85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Switch — https://app.subframe.com/f023064a5ca0/library?component=Switch_7a464794-9ea9-4040-b1de-5bfb2ce599d9
|
|
*/
|
|
|
|
import React from "react";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
export interface ThumbProps
|
|
extends React.ComponentProps<typeof SubframeCore.Switch.Thumb> {
|
|
variant?: "off" | "on" | "disabled";
|
|
className?: string;
|
|
}
|
|
|
|
const Thumb = React.forwardRef<HTMLDivElement, ThumbProps>(function Thumb(
|
|
{ variant = "off", className, ...otherProps }: ThumbProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<SubframeCore.Switch.Thumb asChild={true} {...otherProps}>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/deb91878 flex h-4 w-4 cursor-pointer flex-col items-start gap-2 rounded-round bg-brand-brand-surface-solid-default group-hover/7a464794:bg-brand-brand-surface-solid-hover",
|
|
{
|
|
"bg-icon-neutral-disabled": variant === "disabled",
|
|
"bg-icon-neutral-on-solid group-hover/7a464794:bg-icon-neutral-on-solid":
|
|
variant === "on",
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
/>
|
|
</SubframeCore.Switch.Thumb>
|
|
);
|
|
});
|
|
|
|
export interface SwitchRootProps
|
|
extends React.ComponentProps<typeof SubframeCore.Switch.Root> {
|
|
disabled?: boolean;
|
|
checked?: boolean;
|
|
onCheckedChange?: (checked: boolean) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const SwitchRoot = React.forwardRef<HTMLDivElement, SwitchRootProps>(
|
|
function SwitchRoot(
|
|
{
|
|
disabled = false,
|
|
checked = false,
|
|
className,
|
|
...otherProps
|
|
}: SwitchRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<SubframeCore.Switch.Root
|
|
checked={checked}
|
|
asChild={true}
|
|
disabled={disabled}
|
|
{...otherProps}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/7a464794 flex w-9 cursor-pointer flex-col items-start justify-center gap-2 rounded-round border border-solid border-brand-brand-border-solid-default bg-surface-neutral-primary px-0.5 py-0.5 hover:border hover:border-solid hover:border-brand-brand-border-solid-hover focus-within:shadow-focus aria-[checked=true]:bg-brand-brand-surface-solid-default hover:aria-[checked=true]:bg-brand-brand-surface-solid-hover",
|
|
{
|
|
"border border-solid border-border-disabled bg-surface-neutral-disabled hover:border hover:border-solid hover:border-border-disabled focus-within:shadow-none":
|
|
disabled,
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
>
|
|
<Thumb variant={checked ? "on" : disabled ? "disabled" : undefined} />
|
|
</div>
|
|
</SubframeCore.Switch.Root>
|
|
);
|
|
}
|
|
);
|
|
|
|
export const Switch = Object.assign(SwitchRoot, {
|
|
Thumb,
|
|
});
|