@arolariu/components/dist/components/ui/toggle.js

🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import { jsx } from "react/jsx-runtime";
import { Root } from "@radix-ui/react-toggle";
import { cva } from "class-variance-authority";
import { forwardRef } from "react";
import { cn } from "../../lib/utilities.js";
const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-neutral-100 hover:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-neutral-100 data-[state=on]:text-neutral-900 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:hover:bg-neutral-800 dark:hover:text-neutral-400 dark:focus-visible:ring-neutral-300 dark:data-[state=on]:bg-neutral-800 dark:data-[state=on]:text-neutral-50", {
    variants: {
        variant: {
            default: "bg-transparent",
            outline: "border border-neutral-200 bg-transparent shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
        },
        size: {
            default: "h-9 px-2 min-w-9",
            sm: "h-8 px-1.5 min-w-8",
            lg: "h-10 px-2.5 min-w-10"
        }
    },
    defaultVariants: {
        variant: "default",
        size: "default"
    }
});
const Toggle = /*#__PURE__*/ forwardRef(({ className, variant, size, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
        ref: ref,
        className: cn(toggleVariants({
            variant,
            size,
            className
        })),
        ...props
    }));
Toggle.displayName = Root.displayName;
export { Toggle, toggleVariants };

//# sourceMappingURL=toggle.js.map