@komarcalabs/design-system 0.1.2 → 0.1.4

package/dist/skeleton-D8D5ibC2.js

@@ -0,0 +1,664 @@
+import { tv as e } from "tailwind-variants";
+const r = e({
+  slots: {
+    root: [
+      "relative flex items-start gap-3.5 w-full rounded-xl border p-4 transition-all duration-200",
+      "font-km-body text-km-foreground shadow-xs"
+    ],
+    iconWrapper: [
+      "shrink-0 flex items-center justify-center rounded-lg p-1.5 transition-colors"
+    ],
+    icon: "w-5 h-5 shrink-0",
+    content: "flex-1 min-w-0 flex flex-col gap-0.5",
+    title: "font-semibold tracking-tight text-sm leading-5",
+    description: "text-xs sm:text-[13px] leading-relaxed text-km-foreground/85",
+    closeButton: [
+      "shrink-0 -mr-1 -mt-1 p-1 rounded-md opacity-60 transition-all hover:opacity-100",
+      "focus:outline-none focus:ring-2 focus:ring-offset-1 cursor-pointer"
+    ],
+    actions: "mt-3 flex items-center gap-2 flex-wrap"
+  },
+  variants: {
+    variant: {
+      subtle: {
+        root: ""
+      },
+      solid: {
+        root: "border-transparent text-white shadow-sm",
+        title: "text-white font-bold",
+        description: "text-white/90",
+        closeButton: "text-white hover:bg-white/20"
+      },
+      outline: {
+        root: "shadow-none border"
+      },
+      leftAccent: {
+        root: "border-l-[4px] shadow-xs"
+      }
+    },
+    tone: {
+      neutral: {
+        root: "bg-km-muted border-km-border",
+        iconWrapper: "bg-km-surface text-km-muted-foreground border border-km-border",
+        icon: "text-km-muted-foreground",
+        title: "text-km-foreground font-semibold",
+        description: "text-km-muted-foreground",
+        closeButton: "text-km-muted-foreground hover:bg-km-surface"
+      },
+      info: {
+        root: "bg-km-info-bg/80 border-km-info/30",
+        iconWrapper: "bg-km-surface/90 text-km-info border border-km-info/20 shadow-xs",
+        icon: "text-km-info",
+        title: "text-km-info font-semibold",
+        description: "text-km-foreground/85",
+        closeButton: "text-km-info hover:bg-km-info/10"
+      },
+      success: {
+        root: "bg-km-success-bg/80 border-km-success/30",
+        iconWrapper: "bg-km-surface/90 text-km-success border border-km-success/20 shadow-xs",
+        icon: "text-km-success",
+        title: "text-km-success font-semibold",
+        description: "text-km-foreground/85",
+        closeButton: "text-km-success hover:bg-km-success/10"
+      },
+      warning: {
+        root: "bg-km-warning-bg/80 border-km-warning/30",
+        iconWrapper: "bg-km-surface/90 text-km-warning border border-km-warning/20 shadow-xs",
+        icon: "text-km-warning",
+        title: "text-km-warning font-semibold",
+        description: "text-km-foreground/85",
+        closeButton: "text-km-warning hover:bg-km-warning/10"
+      },
+      danger: {
+        root: "bg-km-danger-bg/85 border-km-danger/35",
+        iconWrapper: "bg-km-surface/90 text-km-danger border border-km-danger/25 shadow-xs",
+        icon: "text-km-danger",
+        title: "text-km-danger font-semibold",
+        description: "text-km-foreground/85",
+        closeButton: "text-km-danger hover:bg-km-danger/10"
+      }
+    },
+    size: {
+      sm: {
+        root: "p-3 text-xs gap-2.5 rounded-lg",
+        iconWrapper: "p-1 rounded-md",
+        icon: "w-4 h-4",
+        title: "text-xs",
+        description: "text-[11.5px]"
+      },
+      md: {
+        root: "p-4 text-sm gap-3.5 rounded-xl",
+        iconWrapper: "p-1.5 rounded-lg",
+        icon: "w-5 h-5",
+        title: "text-sm",
+        description: "text-xs sm:text-[13px]"
+      },
+      lg: {
+        root: "p-5 text-base gap-4 rounded-xl",
+        iconWrapper: "p-2 rounded-lg",
+        icon: "w-6 h-6",
+        title: "text-base",
+        description: "text-sm sm:text-base"
+      }
+    }
+  },
+  compoundVariants: [
+    // SOLID VARIANTS
+    {
+      variant: "solid",
+      tone: "neutral",
+      class: {
+        root: "bg-km-gray-800 text-white border-transparent shadow-sm",
+        iconWrapper: "bg-white/20 text-white border-0 shadow-none",
+        icon: "text-white",
+        title: "text-white font-bold",
+        description: "text-slate-100",
+        closeButton: "text-white hover:bg-white/20"
+      }
+    },
+    {
+      variant: "solid",
+      tone: "info",
+      class: {
+        root: "bg-km-primary text-white border-transparent shadow-sm",
+        iconWrapper: "bg-white/20 text-white border-0 shadow-none",
+        icon: "text-white",
+        title: "text-white font-bold",
+        description: "text-white/95",
+        closeButton: "text-white hover:bg-white/20"
+      }
+    },
+    {
+      variant: "solid",
+      tone: "success",
+      class: {
+        root: "bg-km-success text-white border-transparent shadow-sm",
+        iconWrapper: "bg-white/20 text-white border-0 shadow-none",
+        icon: "text-white",
+        title: "text-white font-bold",
+        description: "text-white/95",
+        closeButton: "text-white hover:bg-white/20"
+      }
+    },
+    {
+      variant: "solid",
+      tone: "warning",
+      class: {
+        root: "bg-km-warning text-white border-transparent shadow-sm",
+        iconWrapper: "bg-white/20 text-white border-0 shadow-none",
+        icon: "text-white",
+        title: "text-white font-bold",
+        description: "text-white/95",
+        closeButton: "text-white hover:bg-white/20"
+      }
+    },
+    {
+      variant: "solid",
+      tone: "danger",
+      class: {
+        root: "bg-km-danger text-white border-transparent shadow-sm",
+        iconWrapper: "bg-white/20 text-white border-0 shadow-none",
+        icon: "text-white",
+        title: "text-white font-bold",
+        description: "text-white/95",
+        closeButton: "text-white hover:bg-white/20"
+      }
+    },
+    // OUTLINE VARIANTS
+    {
+      variant: "outline",
+      tone: "neutral",
+      class: {
+        root: "bg-km-muted/30 border-km-border text-km-foreground",
+        iconWrapper: "bg-km-muted text-km-muted-foreground border-transparent shadow-none",
+        title: "text-km-foreground font-semibold",
+        description: "text-km-muted-foreground"
+      }
+    },
+    {
+      variant: "outline",
+      tone: "info",
+      class: {
+        root: "bg-km-info-bg/25 border-km-info text-km-foreground",
+        iconWrapper: "bg-km-info-bg text-km-info border-transparent shadow-none",
+        title: "text-km-info font-semibold",
+        description: "text-km-foreground/85"
+      }
+    },
+    {
+      variant: "outline",
+      tone: "success",
+      class: {
+        root: "bg-km-success-bg/25 border-km-success text-km-foreground",
+        iconWrapper: "bg-km-success-bg text-km-success border-transparent shadow-none",
+        title: "text-km-success font-semibold",
+        description: "text-km-foreground/85"
+      }
+    },
+    {
+      variant: "outline",
+      tone: "warning",
+      class: {
+        root: "bg-km-warning-bg/25 border-km-warning text-km-foreground",
+        iconWrapper: "bg-km-warning-bg text-km-warning border-transparent shadow-none",
+        title: "text-km-warning font-semibold",
+        description: "text-km-foreground/85"
+      }
+    },
+    {
+      variant: "outline",
+      tone: "danger",
+      class: {
+        root: "bg-km-danger-bg/30 border-km-danger text-km-foreground",
+        iconWrapper: "bg-km-danger-bg text-km-danger border-transparent shadow-none",
+        title: "text-km-danger font-semibold",
+        description: "text-km-foreground/85"
+      }
+    },
+    // LEFT ACCENT VARIANTS
+    {
+      variant: "leftAccent",
+      tone: "neutral",
+      class: {
+        root: "bg-km-muted/70 border-km-border border-l-km-gray-500",
+        iconWrapper: "bg-km-surface text-km-muted-foreground border-km-border",
+        title: "text-km-foreground font-semibold",
+        description: "text-km-muted-foreground"
+      }
+    },
+    {
+      variant: "leftAccent",
+      tone: "info",
+      class: {
+        root: "bg-km-info-bg/50 border-km-border border-l-km-info",
+        iconWrapper: "bg-km-surface/90 text-km-info border-km-info/20",
+        title: "text-km-info font-semibold",
+        description: "text-km-foreground/85"
+      }
+    },
+    {
+      variant: "leftAccent",
+      tone: "success",
+      class: {
+        root: "bg-km-success-bg/50 border-km-border border-l-km-success",
+        iconWrapper: "bg-km-surface/90 text-km-success border-km-success/20",
+        title: "text-km-success font-semibold",
+        description: "text-km-foreground/85"
+      }
+    },
+    {
+      variant: "leftAccent",
+      tone: "warning",
+      class: {
+        root: "bg-km-warning-bg/50 border-km-border border-l-km-warning",
+        iconWrapper: "bg-km-surface/90 text-km-warning border-km-warning/20",
+        title: "text-km-warning font-semibold",
+        description: "text-km-foreground/85"
+      }
+    },
+    {
+      variant: "leftAccent",
+      tone: "danger",
+      class: {
+        root: "bg-km-danger-bg/50 border-km-border border-l-km-danger",
+        iconWrapper: "bg-km-surface/90 text-km-danger border-km-danger/20",
+        title: "text-km-danger font-semibold",
+        description: "text-km-foreground/85"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "subtle",
+    tone: "neutral",
+    size: "md"
+  }
+}), o = e({
+  base: [
+    "inline-flex items-center gap-1 rounded-full border border-transparent",
+    "px-2 py-0.5 text-xs font-semibold leading-4",
+    "transition-colors duration-200"
+  ],
+  variants: {
+    tone: {
+      neutral: "bg-km-muted text-km-foreground-muted border-km-border",
+      primary: "bg-km-primary-light text-km-primary border-km-primary",
+      success: "bg-km-success-bg text-km-success border-km-success",
+      warning: "bg-km-warning-bg text-km-warning border-km-warning",
+      danger: "bg-km-danger-bg text-km-danger border-km-danger",
+      info: "bg-km-info-bg text-km-info border-km-info"
+    },
+    size: {
+      sm: "px-1.5 py-0.25 text-[0.625rem]",
+      md: "px-2 py-0.5 text-xs",
+      lg: "px-2.5 py-0.75 text-sm"
+    }
+  },
+  defaultVariants: {
+    tone: "neutral",
+    size: "md"
+  }
+}), n = e({
+  base: [
+    "inline-flex items-center justify-center gap-2",
+    "rounded-[8px] border border-transparent",
+    "font-semibold no-underline",
+    "transition-all duration-[200ms] ease-in-out",
+    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+    "active:scale-[0.98]",
+    "disabled:cursor-not-allowed disabled:opacity-60 disabled:scale-100",
+    "aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:scale-100"
+  ],
+  variants: {
+    variant: {
+      // 1. VARIANTES PRINCIPALES
+      solid: "bg-km-primary text-white hover:bg-km-primary-hover focus:bg-km-primary-hover active:bg-km-primary-dark focus-visible:outline-km-primary shadow-sm",
+      solidSecondary: "bg-km-surface text-km-foreground border-km-border hover:bg-km-muted focus:bg-km-muted active:bg-km-gray-200 focus-visible:outline-km-primary",
+      outline: "bg-transparent text-km-primary border-km-primary hover:bg-km-primary/10 focus:bg-km-primary/10 active:bg-km-primary/20 focus-visible:outline-km-primary",
+      outlineSecondary: "bg-transparent text-km-foreground border-km-border hover:bg-km-muted focus:bg-km-muted active:bg-km-gray-200 focus-visible:outline-km-primary",
+      soft: "bg-km-primary/10 text-km-primary hover:bg-km-primary/20 focus:bg-km-primary/20 active:bg-km-primary/30 focus-visible:outline-km-primary",
+      ghost: "bg-transparent text-km-foreground hover:bg-km-muted focus:bg-km-muted active:bg-km-gray-200 focus-visible:outline-km-primary",
+      link: "bg-transparent text-km-primary underline hover:text-km-primary-hover active:opacity-80 px-0 border-0 focus-visible:outline-km-primary",
+      // 2. BOTONES POR SEMÁNTICA
+      success: "bg-km-success text-white hover:bg-km-success/90 focus:bg-km-success/90 active:bg-km-success/80 focus-visible:outline-km-success shadow-sm",
+      successOutline: "bg-transparent text-km-success border-km-success hover:bg-km-success/10 focus:bg-km-success/10 active:bg-km-success/20 focus-visible:outline-km-success",
+      successSoft: "bg-km-success-bg text-km-success hover:bg-km-success-bg/80 focus:bg-km-success-bg/80 active:bg-km-success-bg/60 focus-visible:outline-km-success",
+      warning: "bg-km-warning text-white hover:bg-km-warning/90 focus:bg-km-warning/90 active:bg-km-warning/80 focus-visible:outline-km-warning shadow-sm",
+      warningOutline: "bg-transparent text-km-warning border-km-warning hover:bg-km-warning/10 focus:bg-km-warning/10 active:bg-km-warning/20 focus-visible:outline-km-warning",
+      warningSoft: "bg-km-warning-bg text-km-warning hover:bg-km-warning-bg/80 focus:bg-km-warning-bg/80 active:bg-km-warning-bg/60 focus-visible:outline-km-warning",
+      danger: "bg-km-danger text-white hover:bg-km-danger/90 focus:bg-km-danger/90 active:bg-km-danger/80 focus-visible:outline-km-danger shadow-sm",
+      dangerOutline: "bg-transparent text-km-danger border-km-danger hover:bg-km-danger/10 focus:bg-km-danger/10 active:bg-km-danger/20 focus-visible:outline-km-danger",
+      dangerSoft: "bg-km-danger-bg text-km-danger hover:bg-km-danger-bg/80 focus:bg-km-danger-bg/80 active:bg-km-danger-bg/60 focus-visible:outline-km-danger",
+      info: "bg-km-info text-white hover:bg-km-info/90 focus:bg-km-info/90 active:bg-km-info/80 focus-visible:outline-km-info shadow-sm",
+      infoOutline: "bg-transparent text-km-info border-km-info hover:bg-km-info/10 focus:bg-km-info/10 active:bg-km-info/20 focus-visible:outline-km-info",
+      infoSoft: "bg-km-info-bg text-km-info hover:bg-km-info-bg/80 focus:bg-km-info-bg/80 active:bg-km-info-bg/60 focus-visible:outline-km-info",
+      // Accent
+      accent: "bg-km-accent text-km-primary-dark hover:bg-km-accent/90 focus:bg-km-accent/90 active:bg-km-accent/80 focus-visible:outline-km-accent shadow-sm",
+      accentOutline: "bg-transparent text-km-accent border-km-accent hover:bg-km-accent/10 focus:bg-km-accent/10 active:bg-km-accent/20 focus-visible:outline-km-accent",
+      accentSoft: "bg-km-accent/10 text-km-accent hover:bg-km-accent/20 focus:bg-km-accent/20 active:bg-km-accent/30 focus-visible:outline-km-accent"
+    },
+    size: {
+      xs: "min-h-[28px] px-2.5 py-1 text-[0.6875rem] leading-4",
+      sm: "min-h-[32px] px-3 py-1.5 text-[0.75rem] leading-4",
+      md: "min-h-[36px] px-4 py-2 text-sm leading-5",
+      lg: "min-h-[44px] px-6 py-2.5 text-base leading-6"
+    },
+    loading: {
+      true: "pointer-events-none opacity-80"
+    }
+  },
+  compoundVariants: [
+    // Solid variants get shadows
+    {
+      variant: ["solid", "success", "warning", "danger", "info", "accent"],
+      size: "sm",
+      class: "shadow-sm"
+    },
+    {
+      variant: ["solid", "success", "warning", "danger", "info", "accent"],
+      size: ["md", "lg"],
+      class: "shadow"
+    }
+  ],
+  defaultVariants: {
+    variant: "solid",
+    size: "md"
+  }
+}), i = e({
+  slots: {
+    root: "rounded-km-lg border border-km-border bg-km-surface text-km-foreground shadow-km-sm",
+    header: "border-b border-km-border p-4",
+    body: "p-4",
+    footer: "border-t border-km-border p-4"
+  }
+}), s = e({
+  slots: {
+    root: "grid gap-1.5 min-w-0",
+    label: "text-xs font-semibold text-km-foreground select-none",
+    hint: "text-[0.8125rem] leading-[1.125rem] text-km-muted-foreground",
+    error: "text-[0.8125rem] leading-[1.125rem] text-km-danger font-medium animate-fadeIn"
+  }
+}), a = e({
+  base: [
+    "min-h-10 w-full rounded-km-md border border-km-border bg-km-surface",
+    "px-3 py-2 text-sm leading-5 text-km-foreground transition-all duration-150",
+    "placeholder:text-km-muted-foreground",
+    "focus-visible:outline-none focus-visible:border-km-primary focus-visible:ring-2 focus-visible:ring-km-primary-light",
+    "disabled:cursor-not-allowed disabled:opacity-60",
+    "aria-invalid:border-km-danger aria-invalid:focus-visible:border-km-danger aria-invalid:focus-visible:ring-km-danger/20"
+  ]
+}), m = e({
+  base: [
+    "group relative inline-flex items-center justify-between w-full max-w-full min-w-0 select-none cursor-pointer",
+    "border rounded-[8px] font-medium transition-all duration-150 ease-in-out",
+    "outline-none focus:outline-none",
+    "focus:ring-2 focus:ring-km-primary/25 focus:border-km-primary",
+    "focus-visible:ring-2 focus-visible:ring-km-primary/25 focus-visible:border-km-primary",
+    "data-[state=open]:ring-2 data-[state=open]:ring-km-primary/25 data-[state=open]:border-km-primary",
+    "disabled:cursor-not-allowed disabled:opacity-60 disabled:bg-slate-50/70",
+    "data-[placeholder]:text-km-muted-foreground"
+  ],
+  variants: {
+    variant: {
+      default: "bg-km-surface border-km-border hover:border-slate-300 text-km-foreground shadow-2xs",
+      filled: "bg-slate-50/80 border-slate-200/80 hover:bg-slate-100/80 focus-visible:bg-white text-km-foreground",
+      ghost: "border-transparent bg-transparent hover:bg-slate-100/80 text-km-foreground shadow-none"
+    },
+    size: {
+      xs: "min-h-[26px] h-6.5 px-2 py-0.5 text-[0.6875rem] leading-4 gap-1.5",
+      sm: "min-h-[30px] h-7.5 px-2.5 py-1 text-xs leading-4 gap-1.5",
+      md: "min-h-10 h-10 px-3 py-2 text-xs leading-5 gap-2",
+      lg: "min-h-[42px] h-10.5 px-3.5 py-2 text-sm leading-6 gap-2.5"
+    },
+    error: {
+      true: "border-km-danger text-km-danger focus:border-km-danger focus:ring-km-danger/20 focus-visible:border-km-danger focus-visible:ring-km-danger/20 data-[state=open]:border-km-danger data-[state=open]:ring-km-danger/20"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+}), d = e({
+  base: "flex",
+  variants: {
+    direction: {
+      row: "flex-row",
+      column: "flex-col"
+    },
+    gap: {
+      none: "gap-0",
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between"
+    },
+    wrap: {
+      true: "flex-wrap",
+      false: "flex-nowrap"
+    }
+  },
+  defaultVariants: {
+    direction: "column",
+    gap: "md",
+    align: "stretch",
+    justify: "start",
+    wrap: !1
+  }
+}), l = e({
+  base: [
+    "min-h-24 w-full resize-y rounded-km-md border border-km-border bg-km-surface",
+    "px-3 py-2 text-sm leading-5 text-km-foreground transition-all duration-150",
+    "placeholder:text-km-muted-foreground",
+    "focus-visible:outline-none focus-visible:border-km-primary focus-visible:ring-2 focus-visible:ring-km-primary-light",
+    "disabled:cursor-not-allowed disabled:opacity-60",
+    "aria-invalid:border-km-danger aria-invalid:focus-visible:border-km-danger aria-invalid:focus-visible:ring-km-danger/20"
+  ]
+}), c = e({
+  slots: {
+    // Desktop layout slots
+    root: "flex flex-col gap-0 w-full",
+    step: "flex gap-4 items-stretch",
+    stepContainer: "flex flex-col items-center shrink-0",
+    stepCircle: "flex items-center justify-center w-9 h-9 rounded-full shrink-0 transition-colors duration-[200ms] border",
+    stepText: "font-semibold text-base transition-colors duration-[200ms]",
+    connector: "flex-1 w-[3px] rounded-full transition-all duration-300",
+    content: "flex flex-col gap-1 pb-8 flex-1",
+    title: "font-bold text-base transition-colors duration-[200ms]",
+    description: "text-sm text-km-muted-foreground leading-snug max-w-[280px]",
+    // Mobile Circular layout slots
+    mobileRoot: "flex items-center justify-between p-4 bg-km-surface border border-km-border rounded-xl shadow-sm w-full",
+    mobileInfo: "flex flex-col gap-0.5",
+    mobileTitle: "font-bold text-base text-km-foreground leading-tight",
+    mobileLabel: "text-xs text-km-muted-foreground leading-tight",
+    mobileProgress: "relative flex items-center justify-center shrink-0",
+    mobilePercentText: "absolute font-semibold text-km-foreground text-[10px] leading-none",
+    // Mobile Horizontal progress bar slots
+    mobileHorizRoot: "flex flex-col gap-2.5 w-full p-4 bg-km-surface border border-km-border rounded-xl shadow-sm",
+    mobileHorizHeader: "flex items-center justify-between w-full",
+    mobileHorizTitle: "font-bold text-sm text-km-foreground",
+    mobileHorizSteps: "text-xs font-semibold text-km-muted-foreground",
+    mobileHorizTrack: "flex gap-1.5 w-full",
+    mobileHorizBar: "h-1 rounded-full flex-1 transition-all duration-300"
+  },
+  variants: {
+    state: {
+      completed: {
+        stepCircle: "bg-km-success text-white border-km-success",
+        title: "text-km-foreground",
+        connector: "bg-km-success"
+      },
+      active: {
+        stepCircle: "bg-km-primary text-white border-km-primary font-bold",
+        title: "text-km-primary",
+        connector: "bg-km-border"
+      },
+      upcoming: {
+        stepCircle: "bg-km-surface text-km-muted-foreground border-km-border",
+        title: "text-km-muted-foreground",
+        connector: "bg-km-border"
+      }
+    },
+    orientation: {
+      vertical: {
+        root: "flex flex-col gap-0",
+        step: "flex gap-4 items-stretch",
+        connector: "w-[3px] h-full min-h-[40px] my-1"
+      },
+      horizontal: {
+        root: "flex flex-row gap-4 items-center justify-between",
+        step: "flex flex-1 gap-2 items-center",
+        connector: "flex-1 h-[3px] w-full mx-2"
+      }
+    }
+  },
+  defaultVariants: {
+    state: "upcoming",
+    orientation: "vertical"
+  }
+}), b = e({
+  slots: {
+    root: "inline-flex items-center gap-2.5 cursor-pointer select-none",
+    label: "text-sm text-km-foreground cursor-pointer select-none font-medium",
+    track: "relative rounded-full transition-all duration-200 ease-in-out cursor-pointer",
+    thumb: "absolute top-[2px] rounded-full bg-white shadow-sm transition-all duration-200 ease-in-out"
+  },
+  variants: {
+    size: {
+      small: {
+        track: "w-[34px] h-[18px]",
+        thumb: "w-[14px] h-[14px]",
+        label: "text-xs"
+      },
+      medium: {
+        track: "w-[44px] h-[24px]",
+        thumb: "w-[20px] h-[20px]",
+        label: "text-sm"
+      },
+      large: {
+        track: "w-[54px] h-[28px]",
+        thumb: "w-[24px] h-[24px]",
+        label: "text-base"
+      }
+    },
+    checked: {
+      true: {
+        track: "bg-km-primary hover:bg-km-primary-hover shadow-sm"
+      },
+      false: {
+        track: "bg-km-border-strong hover:bg-km-gray-400 dark:bg-km-muted dark:hover:bg-km-gray-600"
+      }
+    },
+    disabled: {
+      true: {
+        track: "cursor-not-allowed opacity-50 bg-km-muted",
+        label: "cursor-not-allowed opacity-50 text-km-foreground-muted"
+      },
+      false: {
+        track: "cursor-pointer"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      size: "small",
+      checked: !0,
+      class: {
+        thumb: "left-[18px]"
+      }
+    },
+    {
+      size: "small",
+      checked: !1,
+      class: {
+        thumb: "left-[2px]"
+      }
+    },
+    {
+      size: "medium",
+      checked: !0,
+      class: {
+        thumb: "left-[22px]"
+      }
+    },
+    {
+      size: "medium",
+      checked: !1,
+      class: {
+        thumb: "left-[2px]"
+      }
+    },
+    {
+      size: "large",
+      checked: !0,
+      class: {
+        thumb: "left-[28px]"
+      }
+    },
+    {
+      size: "large",
+      checked: !1,
+      class: {
+        thumb: "left-[2px]"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "medium",
+    checked: !1,
+    disabled: !1
+  }
+}), g = e({
+  base: "bg-slate-200 shrink-0 select-none pointer-events-none",
+  variants: {
+    variant: {
+      default: "rounded-km-md",
+      text: "rounded-km-sm h-4",
+      circular: "rounded-full",
+      pill: "rounded-full",
+      rounded: "rounded-km-md",
+      card: "rounded-km-xl",
+      rectangular: "rounded-none"
+    },
+    tone: {
+      subtle: "bg-slate-100",
+      default: "bg-slate-200",
+      muted: "bg-slate-300/80"
+    },
+    animation: {
+      pulse: "animate-pulse",
+      wave: "relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent",
+      none: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    tone: "default",
+    animation: "pulse"
+  }
+});
+export {
+  r as a,
+  o as b,
+  n as c,
+  i as d,
+  g as e,
+  s as f,
+  d as g,
+  c as h,
+  a as i,
+  b as j,
+  m as s,
+  l as t
+};