laif-ds/dist/components/ui/toggle.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsx as i } from "react/jsx-runtime";
import { Root as a } from "../../node_modules/@radix-ui/react-toggle/dist/index.js";
import { cva as o } from "../../node_modules/class-variance-authority/dist/index.js";
import { cn as s } from "../../lib/utils.js";
const d = o(
  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-d-secondary hover:text-d-secondary-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-d-accent data-[state=on]:text-d-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-d-ring focus-visible:ring-d-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive whitespace-nowrap",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline: "border border-d-input bg-transparent shadow-xs hover:bg-d-accent hover:text-d-accent-foreground"
      },
      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"
    }
  }
);
function v({
  className: e,
  variant: t,
  size: n,
  ...r
}) {
  return /* @__PURE__ */ i(
    a,
    {
      "data-slot": "toggle",
      className: s(d({ variant: t, size: n, className: e })),
      ...r
    }
  );
}
export {
  v as Toggle,
  d as toggleVariants
};