@komarcalabs/design-system 0.1.2 → 0.1.3

package/dist/toggleSwitch-CpBXc_jq.js

@@ -1,369 +0,0 @@
-import { tv as e } from "tailwind-variants";
-const t = e({
-  slots: {
-    root: "rounded-km-lg border p-4 text-sm leading-5 transition-all duration-200",
-    title: "font-semibold",
-    description: "mt-1"
-  },
-  variants: {
-    tone: {
-      neutral: {
-        root: "border-km-border bg-km-surface text-km-foreground",
-        description: "text-km-foreground-muted"
-      },
-      success: {
-        root: "border-km-success bg-km-success-bg text-km-success",
-        description: "text-km-success-foreground"
-      },
-      warning: {
-        root: "border-km-warning bg-km-warning-bg text-km-warning",
-        description: "text-km-warning-foreground"
-      },
-      danger: {
-        root: "border-km-danger bg-km-danger-bg text-km-danger",
-        description: "text-km-danger-foreground"
-      },
-      info: {
-        root: "border-km-info bg-km-info-bg text-km-info",
-        description: "text-km-info-foreground"
-      }
-    }
-  },
-  defaultVariants: {
-    tone: "neutral"
-  }
-}), 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"
-  }
-}), i = 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"
-  }
-}), s = 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"
-  }
-}), n = e({
-  slots: {
-    root: "grid gap-1.5",
-    label: "text-sm font-semibold text-km-foreground",
-    hint: "text-[0.8125rem] leading-[1.125rem] text-km-muted-foreground",
-    error: "text-[0.8125rem] leading-[1.125rem] text-km-danger"
-  }
-}), 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",
-    "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"
-  ]
-}), m = 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",
-    "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"
-  ]
-}), c = 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",
-    "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"
-  ]
-}), d = 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: "flex items-center gap-2.5",
-    label: "text-sm text-gray-700 cursor-pointer select-none font-semibold",
-    track: "relative rounded-full transition-all duration-300 ease-in-out cursor-pointer",
-    thumb: "absolute top-[2px] rounded-full bg-white shadow-[0_2px_4px_rgba(0,0,0,0.2)] transition-all duration-300 ease-in-out hover:scale-110"
-  },
-  variants: {
-    size: {
-      small: {
-        track: "w-[36px] h-[20px]",
-        thumb: "w-[16px] h-[16px]"
-      },
-      medium: {
-        track: "w-[48px] h-[26px]",
-        thumb: "w-[22px] h-[22px]"
-      },
-      large: {
-        track: "w-[60px] h-[32px]",
-        thumb: "w-[28px] h-[28px]"
-      }
-    },
-    checked: {
-      true: {
-        track: "bg-indigo-600 shadow-[0_2px_4px_rgba(79,70,229,0.3)] hover:bg-indigo-700"
-      },
-      false: {
-        track: "bg-gray-300 hover:bg-gray-400"
-      }
-    },
-    disabled: {
-      true: {
-        track: "cursor-not-allowed opacity-50 bg-gray-200",
-        label: "cursor-not-allowed opacity-50 text-gray-400"
-      },
-      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-[24px]"
-      }
-    },
-    {
-      size: "medium",
-      checked: !1,
-      class: {
-        thumb: "left-[2px]"
-      }
-    },
-    {
-      size: "large",
-      checked: !0,
-      class: {
-        thumb: "left-[30px]"
-      }
-    },
-    {
-      size: "large",
-      checked: !1,
-      class: {
-        thumb: "left-[2px]"
-      }
-    }
-  ],
-  defaultVariants: {
-    size: "medium",
-    checked: !1,
-    disabled: !1
-  }
-});
-export {
-  t as a,
-  o as b,
-  i as c,
-  s as d,
-  c as e,
-  n as f,
-  d as g,
-  b as h,
-  a as i,
-  m as s,
-  l as t
-};