commonux2
Version:
A collection of styled components for use in ABB projects, designed for React and Next.js. It features TypeScript support, integrates Lucide icons, and is built on Radix primitives with Tailwind CSS.
33 lines (32 loc) • 2.05 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import * as React from "react";
import * as SwitchPrimitives from "@radix-ui/react-switch";
import { CheckIcon } from "lucide-react";
import { cva } from "class-variance-authority";
import { cn } from "../../lib/utils";
const switchVariants = cva("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent 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", {
variants: {
variant: {
destructive: "data-[state=checked]:bg-destructive/95",
secondary: "data-[state=checked]:bg-neutral-600",
},
},
});
const Switch = React.forwardRef((_a, ref) => {
var { className, variant } = _a, props = __rest(_a, ["className", "variant"]);
return (React.createElement(SwitchPrimitives.Root, Object.assign({ className: cn(switchVariants({ variant, className })) }, props, { ref: ref }),
React.createElement(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0") },
React.createElement(CheckIcon, { className: "w-[0.8rem] h-[0.8rem] z-50 absolute ml-[0.25rem] mt-[0.271rem]", strokeWidth: 3 }))));
});
Switch.displayName = SwitchPrimitives.Root.displayName;
export { Switch };