@kopexa/theme 1.4.2 → 1.4.4

package/dist/{chunk-HQ27V5V4.mjs → chunk-2C5EQ4P3.mjs}

@@ -3,9 +3,13 @@ var focusVisibleClasses = [
   "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2"
   //"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 ];
+var focusWithinClasses = [
+  "focus-within:outline-2 focus-within:outline-ring focus-within:outline-offset-2"
+];
 var dataFocusVisibleClasses = ["outline-hidden"];
 
 export {
   focusVisibleClasses,
+  focusWithinClasses,
   dataFocusVisibleClasses
 };

package/dist/chunk-32L6KXLV.mjs

@@ -0,0 +1,324 @@
+import {
+  colorVariants
+} from "./chunk-67PPUTSS.mjs";
+
+// src/components/chip.ts
+import { tv } from "tailwind-variants";
+var chip = tv({
+  slots: {
+    root: [
+      "relative",
+      "max-w-fit",
+      "min-w-min",
+      "inline-flex",
+      "items-center",
+      "justify-between",
+      "box-border",
+      "whitespace-nowrap",
+      "isolate"
+    ],
+    content: "flex-1 text-inherit font-normal",
+    indicator: "relative flex size-2 ml-1",
+    indicatorPulse: "absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
+    indicatorDot: "relative inline-flex size-2 rounded-full",
+    status: "flex items-center gap-2 border-r pr-1 font-medium ml-1",
+    closeButton: [
+      "z-10 appearance-none outline-none select-none transition-opacity",
+      "opacity-70 hover:opacity-100 cursor-pointer active:opacity-50"
+    ]
+  },
+  variants: {
+    variant: {
+      solid: {},
+      bordered: {
+        root: "border-2 bg-transparent"
+      },
+      faded: {
+        root: "border-2"
+      },
+      flat: {}
+    },
+    color: {
+      default: {
+        status: "border-default-200 dark:border-default-700"
+      },
+      primary: {
+        status: "border-primary-200 dark:border-primary-700"
+      },
+      secondary: {
+        status: "border-secondary-200 dark:border-secondary-700"
+      },
+      success: {
+        status: "border-success-200 dark:border-success-700"
+      },
+      destructive: {
+        status: "border-destructive-200 dark:border-destructive-700"
+      },
+      warning: {
+        status: "border-warning-200 dark:border-warning-700"
+      }
+    },
+    indicatorColor: {
+      default: {
+        indicatorDot: "bg-accent"
+      },
+      primary: {
+        indicatorDot: "bg-primary"
+      },
+      secondary: {
+        indicatorDot: "bg-secondary"
+      },
+      success: {
+        indicatorDot: "bg-success"
+      },
+      warning: {
+        indicatorDot: "bg-warning"
+      },
+      destructive: {
+        indicatorDot: "bg-destructive"
+      },
+      info: {
+        indicatorDot: "bg-info"
+      }
+    },
+    indicator: {
+      true: {},
+      false: {}
+    },
+    indicatorVariant: {
+      pulse: {}
+    },
+    size: {
+      sm: {
+        root: "px-1 h-6 text-[11px] [&_svg]:size-3",
+        status: "text-[11px]",
+        content: "px-1",
+        closeButton: ["[&_svg]:size-3", "px-1"]
+      },
+      md: {
+        root: "px-1 h-7 text-sm [&_svg]:size-4",
+        status: "text-sm",
+        content: "px-2",
+        closeButton: ["[&_svg]:size-4", "px-2"]
+      },
+      lg: {
+        root: "px-2 h-8 text-md [&_svg]:size-5",
+        status: "text-md",
+        content: "px-2",
+        closeButton: ["[&_svg]:size-5", "px-2"]
+      }
+    },
+    isCloseable: {
+      true: {},
+      false: {}
+    },
+    radius: {
+      none: {
+        root: "rounded-none"
+      },
+      sm: {
+        root: "rounded-sm"
+      },
+      md: {
+        root: "rounded-md"
+      },
+      lg: {
+        root: "rounded-lg"
+      },
+      full: {
+        root: "rounded-full"
+      }
+    },
+    disabled: {
+      true: {
+        root: "opacity-50 pointer-events-none"
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    color: "default",
+    variant: "solid",
+    size: "sm",
+    radius: "full",
+    indicatorVariant: "pulse",
+    indicatorColor: "success"
+  },
+  compoundVariants: [
+    // solid / color
+    {
+      variant: "solid",
+      color: "default",
+      class: {
+        root: colorVariants.solid.default
+      }
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        root: colorVariants.solid.primary
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        root: colorVariants.solid.secondary
+      }
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        root: colorVariants.solid.success
+      }
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        root: colorVariants.solid.warning
+      }
+    },
+    {
+      variant: "solid",
+      color: "destructive",
+      class: {
+        root: colorVariants.solid.destructive
+      }
+    },
+    // bordered / color
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        root: colorVariants.outline.default
+      }
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        root: colorVariants.outline.primary
+      }
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        root: colorVariants.outline.secondary
+      }
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        root: colorVariants.outline.success
+      }
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        root: colorVariants.outline.warning
+      }
+    },
+    {
+      variant: "bordered",
+      color: "destructive",
+      class: {
+        root: colorVariants.outline.destructive
+      }
+    },
+    {
+      variant: "flat",
+      color: "default",
+      class: {
+        root: colorVariants.flat.default
+      }
+    },
+    {
+      variant: "flat",
+      color: "primary",
+      class: {
+        root: colorVariants.flat.primary
+      }
+    },
+    {
+      variant: "flat",
+      color: "secondary",
+      class: {
+        root: colorVariants.flat.secondary
+      }
+    },
+    {
+      variant: "flat",
+      color: "success",
+      class: {
+        root: colorVariants.flat.success
+      }
+    },
+    {
+      variant: "flat",
+      color: "warning",
+      class: {
+        root: colorVariants.flat.warning
+      }
+    },
+    {
+      variant: "flat",
+      color: "destructive",
+      class: {
+        root: colorVariants.flat.destructive
+      }
+    },
+    // faded / color
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        root: colorVariants.faded.default
+      }
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        root: colorVariants.faded.primary
+      }
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        root: colorVariants.faded.secondary
+      }
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        root: colorVariants.faded.success
+      }
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        root: colorVariants.faded.warning
+      }
+    },
+    {
+      variant: "faded",
+      color: "destructive",
+      class: {
+        root: colorVariants.faded.destructive
+      }
+    }
+  ]
+});
+
+export {
+  chip
+};

package/dist/{chunk-IL3JFLE2.mjs → chunk-4UDOCFU5.mjs}

@@ -11,6 +11,13 @@ var spinner = tv({
   },
   variants: {
     size: {
+      xs: {
+        wrapper: "w-4 h-4",
+        circle1: "border-2",
+        circle2: "border-2",
+        dots: "size-1",
+        label: "text-xs"
+      },
       sm: {
         wrapper: "w-5 h-5",
         circle1: "border-2",

package/dist/chunk-67PPUTSS.mjs

@@ -0,0 +1,53 @@
+// src/utils/variants.ts
+var solid = {
+  default: "bg-accent text-accent-foreground",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  destructive: "bg-destructive text-destructive-foreground",
+  warning: "bg-warning text-warning-foreground",
+  success: "bg-success text-success-foreground"
+};
+var outline = {
+  default: "bg-transparent border border-accent text-accent-foreground",
+  primary: "bg-transparent border-primary text-primary",
+  secondary: "bg-transparent border-secondary text-secondary-foreground",
+  destructive: "bg-transparent border-destructive text-destructive",
+  warning: "bg-transparent border-warning text-warning",
+  success: "bg-transparent border-success text-success"
+};
+var flat = {
+  default: "bg-accent/40 text-accent-700",
+  primary: "bg-primary/20 text-primary-600",
+  secondary: "bg-secondary/20 text-secondary-600",
+  success: "bg-success/20 text-success-700 dark:text-success",
+  warning: "bg-warning/20 text-warning-700 dark:text-warning",
+  destructive: "bg-danger/20 text-danger-600 dark:text-danger-500",
+  foreground: "bg-foreground/10 text-foreground"
+};
+var faded = {
+  default: "border-default bg-accent/30 text-default-foreground",
+  primary: "border-default bg-accent/30 text-primary",
+  secondary: "border-default bg-accent/30 text-secondary-foreground",
+  success: "border-default bg-accent/30 text-success",
+  warning: "border-default bg-accent/30 text-warning",
+  destructive: "border-default bg-accent/30 text-danger",
+  foreground: "border-default bg-accent/30 text-foreground"
+};
+var ghost = {
+  primary: "bg-transparent text-primary",
+  secondary: "bg-transparent text-secondary",
+  destructive: "bg-transparent text-destructive",
+  warning: "bg-transparent text-warning",
+  success: "bg-transparent text-success"
+};
+var colorVariants = {
+  solid,
+  ghost,
+  outline,
+  flat,
+  faded
+};
+
+export {
+  colorVariants
+};

package/dist/chunk-JWF5ABNP.mjs

@@ -0,0 +1,56 @@
+// src/components/calendar.ts
+import { tv } from "tailwind-variants";
+var calendar = tv({
+  slots: {
+    base: [
+      "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+      String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+      String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`
+    ],
+    icon: "size-4",
+    root: "w-fit",
+    months: "flex gap-4 flex-col md:flex-row relative",
+    month: "flex flex-col w-full gap-4",
+    nav: "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+    buttonPrevious: "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+    buttonNext: "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+    monthCaption: "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+    dropdown: "absolute bg-popover inset-0 opacity-0",
+    dropdowns: "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+    dropdownRoot: "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+    captionLabel: "select-none font-medium",
+    table: "w-full border-collapse",
+    weekdays: "flex",
+    weekday: "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+    week: "flex w-full mt-2",
+    weekNumberWrapper: "flex size-(--cell-size) items-center justify-center text-center",
+    weekNumberHeader: "select-none w-(--cell-size)",
+    weekNumber: "text-[0.8rem] select-none text-muted-foreground",
+    day: "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+    dayButton: "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+    rangeStart: "rounded-l-md bg-accent",
+    rangeMiddle: "rounded-none",
+    rangeEnd: "rounded-r-md bg-accent",
+    today: "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+    outside: "text-muted-foreground aria-selected:text-muted-foreground",
+    disabled: "text-muted-foreground opacity-50",
+    hidden: "invisible"
+  },
+  variants: {
+    captionLayout: {
+      label: {
+        captionLabel: "text-sm"
+      },
+      default: {
+        captionLabel: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5"
+      }
+    }
+  },
+  defaultVariants: {
+    captionLayout: "default"
+  }
+});
+
+export {
+  calendar
+};

package/dist/{chunk-5FI7W32M.mjs → chunk-KE2E5LGH.mjs}

@@ -1,9 +1,9 @@
 import {
   focusVisibleClasses
-} from "./chunk-HQ27V5V4.mjs";
+} from "./chunk-2C5EQ4P3.mjs";
 import {
   colorVariants
-} from "./chunk-U6ONJKJY.mjs";
+} from "./chunk-67PPUTSS.mjs";
 
 // src/components/button.ts
 import { tv } from "tailwind-variants";
@@ -26,15 +26,6 @@ var button = tv({
       ghost: "",
       outline: "border-2 bg-transparent",
       link: ""
-      // destructive:
-      // 	"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-      // outline:
-      // 	"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-      // secondary:
-      // 	"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-      // ghost:
-      // 	"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-      // link: "text-primary underline-offset-4 hover:underline",
     },
     size: {
       sm: "px-3 min-w-16 h-8 text-xs gap-2 rounded-sm has-[>svg]:px-2.5",

package/dist/chunk-PQSL3W26.mjs

@@ -0,0 +1,96 @@
+import {
+  focusWithinClasses
+} from "./chunk-2C5EQ4P3.mjs";
+
+// src/components/input.ts
+import { tv } from "tailwind-variants";
+var passwordInput = tv({
+  slots: {
+    button: "focus:outline-hidden",
+    icon: "pointer-events-none text-muted-foreground"
+  }
+});
+var input = tv({
+  base: [],
+  slots: {
+    inputWrapper: [
+      "relative w-full inline-flex flex-row items-center shadow-xs px-3 gap-3 [&_svg]:shrink-0",
+      "border-input border dark:bg-input/30 data-[hidden=true]:hidden transition-[color,box-shadow]",
+      "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      ...focusWithinClasses
+    ],
+    innerWrapper: "inline-flex w-full items-center h-full box-border",
+    input: [
+      "w-full font-normal outline-hidden focus-visible:outline-hidden",
+      "data-[has-start-content=true]:ps-1.5",
+      "data-[has-end-content=true]:pe-1.5",
+      "file:cursor-pointer file:bg-transparent file:border-0",
+      "autofill:bg-transparent bg-clip-text",
+      // legacy
+      "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground",
+      "flex",
+      // file
+      "file:text-foreground file:inline-flex file:text-sm file:font-medium",
+      "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+    ],
+    clearButton: [
+      "p-2 -m-2 z-10 absolute end-3 start-auto pointer-events-none",
+      "appearance-none outline-hidden select-none opacity-0 cursor-pointer",
+      "active:!opacity-70 rounded-full"
+    ]
+  },
+  variants: {
+    size: {
+      sm: {
+        inputWrapper: ["h-8 min-h-8 px-2 rounded-sm [&_svg]:size-4"],
+        input: "text-sm file:h-6"
+      },
+      md: {
+        inputWrapper: "h-10 min-10 rounded-md [&_svg]:size-4",
+        input: "text-base md:text-sm file:h-8",
+        clearButton: "hover:opacity-100"
+      },
+      lg: {
+        inputWrapper: "h-12 min-h-12 rounded-lg [&_svg]:size-4",
+        input: "text-base file:h-10",
+        clearButton: "hover:opacity-100"
+      }
+    },
+    radius: {
+      none: {
+        inputWrapper: "rounded-none"
+      },
+      sm: {
+        inputWrapper: "rounded-sm"
+      },
+      md: {
+        inputWrapper: "rounded-md"
+      },
+      lg: {
+        inputWrapper: "rounded-lg"
+      },
+      full: {
+        inputWrapper: "rounded-full"
+      }
+    },
+    isClearable: {
+      true: {
+        input: "peer pe-6",
+        clearButton: [
+          "peer-data-[filled=true]:pointer-events-auto",
+          "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block",
+          "peer-data-[filled=true]:scale-100"
+        ]
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export {
+  passwordInput,
+  input
+};

package/dist/components/button.js

@@ -33,6 +33,7 @@ var focusVisibleClasses = [
 
 // src/utils/variants.ts
 var solid = {
+  default: "bg-accent text-accent-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
   destructive: "bg-destructive text-destructive-foreground",
@@ -40,12 +41,31 @@ var solid = {
   success: "bg-success text-success-foreground"
 };
 var outline = {
+  default: "bg-transparent border border-accent text-accent-foreground",
   primary: "bg-transparent border-primary text-primary",
-  secondary: "bg-transparent border-secondary text-secondary",
+  secondary: "bg-transparent border-secondary text-secondary-foreground",
   destructive: "bg-transparent border-destructive text-destructive",
   warning: "bg-transparent border-warning text-warning",
   success: "bg-transparent border-success text-success"
 };
+var flat = {
+  default: "bg-accent/40 text-accent-700",
+  primary: "bg-primary/20 text-primary-600",
+  secondary: "bg-secondary/20 text-secondary-600",
+  success: "bg-success/20 text-success-700 dark:text-success",
+  warning: "bg-warning/20 text-warning-700 dark:text-warning",
+  destructive: "bg-danger/20 text-danger-600 dark:text-danger-500",
+  foreground: "bg-foreground/10 text-foreground"
+};
+var faded = {
+  default: "border-default bg-accent/30 text-default-foreground",
+  primary: "border-default bg-accent/30 text-primary",
+  secondary: "border-default bg-accent/30 text-secondary-foreground",
+  success: "border-default bg-accent/30 text-success",
+  warning: "border-default bg-accent/30 text-warning",
+  destructive: "border-default bg-accent/30 text-danger",
+  foreground: "border-default bg-accent/30 text-foreground"
+};
 var ghost = {
   primary: "bg-transparent text-primary",
   secondary: "bg-transparent text-secondary",
@@ -56,7 +76,9 @@ var ghost = {
 var colorVariants = {
   solid,
   ghost,
-  outline
+  outline,
+  flat,
+  faded
 };
 
 // src/components/button.ts
@@ -79,15 +101,6 @@ var button = (0, import_tailwind_variants.tv)({
       ghost: "",
       outline: "border-2 bg-transparent",
       link: ""
-      // destructive:
-      // 	"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-      // outline:
-      // 	"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-      // secondary:
-      // 	"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-      // ghost:
-      // 	"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-      // link: "text-primary underline-offset-4 hover:underline",
     },
     size: {
       sm: "px-3 min-w-16 h-8 text-xs gap-2 rounded-sm has-[>svg]:px-2.5",

package/dist/components/button.mjs

@@ -1,8 +1,8 @@
 import {
   button
-} from "../chunk-5FI7W32M.mjs";
-import "../chunk-HQ27V5V4.mjs";
-import "../chunk-U6ONJKJY.mjs";
+} from "../chunk-KE2E5LGH.mjs";
+import "../chunk-2C5EQ4P3.mjs";
+import "../chunk-67PPUTSS.mjs";
 export {
   button
 };