UNPKG

@easy-shadcn/react

Version:

Use shadcn/ui easy&enhance like component library

59 lines (56 loc) 2.01 kB
import { Label } from './chunk-MK57TVGY.mjs'; import * as React from 'react'; import { useState } from 'react'; import { cn } from '@easy-shadcn/utils'; import * as SwitchPrimitives from '@radix-ui/react-switch'; import { jsx, jsxs } from 'react/jsx-runtime'; var Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx( SwitchPrimitives.Root, { className: cn( "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className ), ...props, ref, children: /* @__PURE__ */ jsx( SwitchPrimitives.Thumb, { className: cn( "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0" ) } ) } )); Switch.displayName = SwitchPrimitives.Root.displayName; var Switch2 = ({ label, labelProps, wrapperClassName, checked, defaultChecked, onCheckedChange, ...restProps }) => { const [internalChecked, setInternalChecked] = useState(defaultChecked); const isChecked = checked ?? internalChecked; const handleChange = (checked2) => { onCheckedChange?.(checked2); setInternalChecked(checked2); }; return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center space-x-2", wrapperClassName), children: [ /* @__PURE__ */ jsx(Switch, { checked: isChecked, onCheckedChange: handleChange, ...restProps }), label && /* @__PURE__ */ jsx( Label, { onClick: () => { handleChange(!isChecked); }, ...labelProps, children: label } ) ] }); }; export { Switch2 as Switch };