@kopexa/theme 1.1.0 → 1.3.0

package/dist/chunk-E5AF4JZZ.mjs

@@ -0,0 +1,167 @@
+import {
+  focusVisibleClasses
+} from "./chunk-HQ27V5V4.mjs";
+import {
+  colorVariants
+} from "./chunk-U6ONJKJY.mjs";
+
+// src/components/button.ts
+import { tv } from "tailwind-variants";
+var button = tv({
+  base: [
+    "group relative inline-flex items-center justify-center select-none",
+    "box-border appearance-none",
+    "whitespace-nowrap min-w-max font-normal subpixel-antialiased",
+    "transform-gpu cursor-pointer hover:opacity-80",
+    ...focusVisibleClasses,
+    // shadcn below
+    "disabled:pointer-events-none disabled:opacity-50",
+    "shrink-0 [&_svg]:shrink-0",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "text-sm font-medium"
+  ],
+  variants: {
+    variant: {
+      solid: "shadow-xs",
+      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",
+      md: "px-4 min-w-20 h-10 text-sm gap-2 rounded-md has-[>svg]:px-3",
+      lg: "px-6 min-w-24 h-12 text-base gap-3 rounded-lg has-[>svg]:px-4"
+    },
+    color: {
+      primary: "",
+      secondary: "",
+      destructive: "",
+      warning: "",
+      success: ""
+    },
+    radius: {},
+    fullWidth: {
+      true: "w-full"
+    },
+    isIconOnly: {
+      true: "px-0 !gap-0",
+      false: "[&>svg]:max-w-[theme(spacing.8)]"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid",
+    color: "primary",
+    fullWidth: false,
+    isIconOnly: false
+  },
+  compoundVariants: [
+    // primary color
+    {
+      variant: "solid",
+      color: "primary",
+      class: colorVariants.solid.primary
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: colorVariants.solid.secondary
+    },
+    {
+      variant: "solid",
+      color: "destructive",
+      class: colorVariants.solid.destructive
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: colorVariants.solid.warning
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: colorVariants.solid.success
+    },
+    // ghost color
+    {
+      variant: "ghost",
+      color: "primary",
+      class: colorVariants.ghost.primary
+    },
+    {
+      variant: "ghost",
+      color: "secondary",
+      class: colorVariants.ghost.secondary
+    },
+    {
+      variant: "ghost",
+      color: "destructive",
+      class: colorVariants.ghost.destructive
+    },
+    {
+      variant: "ghost",
+      color: "warning",
+      class: colorVariants.ghost.warning
+    },
+    {
+      variant: "ghost",
+      color: "success",
+      class: colorVariants.ghost.success
+    },
+    // outline color
+    {
+      variant: "outline",
+      color: "primary",
+      class: colorVariants.outline.primary
+    },
+    {
+      variant: "outline",
+      color: "secondary",
+      class: colorVariants.outline.secondary
+    },
+    {
+      variant: "outline",
+      color: "destructive",
+      class: colorVariants.outline.destructive
+    },
+    {
+      variant: "outline",
+      color: "warning",
+      class: colorVariants.outline.warning
+    },
+    {
+      variant: "outline",
+      color: "success",
+      class: colorVariants.outline.success
+    },
+    // icon
+    {
+      isIconOnly: true,
+      size: "sm",
+      class: "min-w-8 w-8 h-8 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5"
+    },
+    {
+      isIconOnly: true,
+      size: "md",
+      class: "min-w-10 w-10 h-10 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    },
+    {
+      isIconOnly: true,
+      size: "lg",
+      class: "min-w-12 w-12 h-12 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5"
+    }
+  ]
+});
+
+export {
+  button
+};

package/dist/chunk-HQ27V5V4.mjs

@@ -0,0 +1,11 @@
+// src/utils/classes.ts
+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 dataFocusVisibleClasses = ["outline-hidden"];
+
+export {
+  focusVisibleClasses,
+  dataFocusVisibleClasses
+};

package/dist/chunk-IL3JFLE2.mjs

@@ -0,0 +1,114 @@
+// src/components/spinner.ts
+import { tv } from "tailwind-variants";
+var spinner = tv({
+  slots: {
+    base: "relative inline-flex flex-col gap-2 items-center justify-center",
+    wrapper: "relative flex",
+    label: "text-foreground font-regular",
+    circle1: "absolute w-full h-full rounded-full",
+    circle2: "absolute w-full h-full rounded-full",
+    dots: "relative rounded-full mx-auto"
+  },
+  variants: {
+    size: {
+      sm: {
+        wrapper: "w-5 h-5",
+        circle1: "border-2",
+        circle2: "border-2",
+        dots: "size-1",
+        label: "text-small"
+      },
+      md: {
+        wrapper: "w-8 h-8",
+        circle1: "border-3",
+        circle2: "border-3",
+        dots: "size-1.5",
+        label: "text-medium"
+      },
+      lg: {
+        wrapper: "w-10 h-10",
+        circle1: "border-3",
+        circle2: "border-3",
+        dots: "size-2",
+        label: "text-large"
+      }
+    },
+    color: {
+      current: {
+        circle1: "border-b-current",
+        circle2: "border-b-current",
+        dots: "bg-current",
+        spinnerBars: "bg-current"
+      },
+      white: {
+        circle1: "border-b-white",
+        circle2: "border-b-white",
+        dots: "bg-white",
+        spinnerBars: "bg-white"
+      },
+      primary: {
+        circle1: "border-b-primary",
+        circle2: "border-b-primary",
+        dots: "bg-primary",
+        spinnerBars: "bg-primary"
+      },
+      secondary: {
+        circle1: "border-b-secondary",
+        circle2: "border-b-secondary",
+        dots: "bg-secondary",
+        spinnerBars: "bg-secondary"
+      },
+      success: {
+        circle1: "border-b-success",
+        circle2: "border-b-success",
+        dots: "bg-success",
+        spinnerBars: "bg-success"
+      },
+      warning: {
+        circle1: "border-b-warning",
+        circle2: "border-b-warning",
+        dots: "bg-warning",
+        spinnerBars: "bg-warning"
+      },
+      danger: {
+        circle1: "border-b-destructive",
+        circle2: "border-b-destructive",
+        dots: "bg-destructive",
+        spinnerBars: "bg-destructive"
+      }
+    },
+    variant: {
+      default: {
+        circle1: [
+          "animate-spinner-ease-spin",
+          "border-solid border-t-transparent border-l-transparent border-r-transparent"
+        ],
+        circle2: [
+          "opacity-75",
+          "animate-spinner-linear-spin",
+          "border-dotted",
+          "border-t-transparent",
+          "border-l-transparent",
+          "border-r-transparent"
+        ]
+      },
+      wave: {
+        wrapper: "translate-y-3/4",
+        dots: ["animate-sway", "spinner-dot-animation"]
+      },
+      dots: {
+        wrapper: "translate-y-2/4",
+        dots: ["animate-blink", "spinner-dot-blink-animation"]
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "current",
+    variant: "default"
+  }
+});
+
+export {
+  spinner
+};

package/dist/chunk-SVCFD7RR.mjs

@@ -0,0 +1,16 @@
+// src/components/tooltip.ts
+import { tv } from "tailwind-variants";
+var tooltip = tv({
+  slots: {
+    content: [
+      "bg-primary text-primary-foreground",
+      "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 w-fit origin-(--radix-tooltip-content-transform-origin)",
+      "rounded-md px-3 py-1.5 text-xs font-medium text-balance"
+    ]
+  }
+});
+
+export {
+  tooltip
+};

package/dist/chunk-U6ONJKJY.mjs

@@ -0,0 +1,31 @@
+// src/utils/variants.ts
+var solid = {
+  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 = {
+  primary: "bg-transparent border-primary text-primary",
+  secondary: "bg-transparent border-secondary text-secondary",
+  destructive: "bg-transparent border-destructive text-destructive",
+  warning: "bg-transparent border-warning text-warning",
+  success: "bg-transparent border-success text-success"
+};
+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
+};
+
+export {
+  colorVariants
+};

package/dist/chunk-YPHFKGNI.mjs

@@ -0,0 +1,23 @@
+// src/components/command.ts
+import { tv } from "tailwind-variants";
+var command = tv({
+  slots: {
+    root: "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+    inputWrapper: "flex h-9 items-center gap-2 border-b px-3",
+    inputIcon: "size-4 shrink-0 opacity-50",
+    input: "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+    list: "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+    empty: "py-6 text-center text-sm",
+    group: "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+    separator: "bg-border -mx-1 h-px",
+    item: "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    shortcut: "text-muted-foreground ml-auto text-xs tracking-widest",
+    header: "flex flex-col items-start justify-between px-3 py-2 border-b",
+    title: "text-sm font-semibold",
+    description: "text-xs text-muted-foreground"
+  }
+});
+
+export {
+  command
+};

package/dist/components/button.d.mts

@@ -1,13 +1,28 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
 
+/**
+ * Solid variant
+ *  Ergebnis: solid button mit farbe im BG und contrast als foreground
+ * - default: solid + primary color
+ * - Solid can be combined with colors: primary, secondary, destructive, success, warning
+ *
+ * Ghost variant
+ * Ein Button mit transparentem Background und Color im foreground
+ * - default: ghost + primary color
+ *
+ * Outline variant
+ * Ein Button mit transparentem Background und Border in der Color
+ * - default: outline + primary color
+ *
+ * Link variant
+ * Link ist transparenter button, mit Color.
+ */
 declare const button: tailwind_variants.TVReturnType<{
     variant: {
         solid: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
         ghost: string;
+        outline: string;
         link: string;
     };
     size: {
@@ -15,13 +30,26 @@ declare const button: tailwind_variants.TVReturnType<{
         md: string;
         lg: string;
     };
+    color: {
+        primary: string;
+        secondary: string;
+        destructive: string;
+        warning: string;
+        success: string;
+    };
+    radius: {};
+    fullWidth: {
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+        false: string;
+    };
 }, undefined, string[], {
     variant: {
         solid: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
         ghost: string;
+        outline: string;
         link: string;
     };
     size: {
@@ -29,13 +57,26 @@ declare const button: tailwind_variants.TVReturnType<{
         md: string;
         lg: string;
     };
+    color: {
+        primary: string;
+        secondary: string;
+        destructive: string;
+        warning: string;
+        success: string;
+    };
+    radius: {};
+    fullWidth: {
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+        false: string;
+    };
 }, undefined, tailwind_variants.TVReturnType<{
     variant: {
         solid: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
         ghost: string;
+        outline: string;
         link: string;
     };
     size: {
@@ -43,6 +84,21 @@ declare const button: tailwind_variants.TVReturnType<{
         md: string;
         lg: string;
     };
+    color: {
+        primary: string;
+        secondary: string;
+        destructive: string;
+        warning: string;
+        success: string;
+    };
+    radius: {};
+    fullWidth: {
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+        false: string;
+    };
 }, undefined, string[], unknown, unknown, undefined>>;
 type ButtonVariantProps = VariantProps<typeof button>;
 

package/dist/components/button.d.ts

@@ -1,13 +1,28 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
 
+/**
+ * Solid variant
+ *  Ergebnis: solid button mit farbe im BG und contrast als foreground
+ * - default: solid + primary color
+ * - Solid can be combined with colors: primary, secondary, destructive, success, warning
+ *
+ * Ghost variant
+ * Ein Button mit transparentem Background und Color im foreground
+ * - default: ghost + primary color
+ *
+ * Outline variant
+ * Ein Button mit transparentem Background und Border in der Color
+ * - default: outline + primary color
+ *
+ * Link variant
+ * Link ist transparenter button, mit Color.
+ */
 declare const button: tailwind_variants.TVReturnType<{
     variant: {
         solid: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
         ghost: string;
+        outline: string;
         link: string;
     };
     size: {
@@ -15,13 +30,26 @@ declare const button: tailwind_variants.TVReturnType<{
         md: string;
         lg: string;
     };
+    color: {
+        primary: string;
+        secondary: string;
+        destructive: string;
+        warning: string;
+        success: string;
+    };
+    radius: {};
+    fullWidth: {
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+        false: string;
+    };
 }, undefined, string[], {
     variant: {
         solid: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
         ghost: string;
+        outline: string;
         link: string;
     };
     size: {
@@ -29,13 +57,26 @@ declare const button: tailwind_variants.TVReturnType<{
         md: string;
         lg: string;
     };
+    color: {
+        primary: string;
+        secondary: string;
+        destructive: string;
+        warning: string;
+        success: string;
+    };
+    radius: {};
+    fullWidth: {
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+        false: string;
+    };
 }, undefined, tailwind_variants.TVReturnType<{
     variant: {
         solid: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
         ghost: string;
+        outline: string;
         link: string;
     };
     size: {
@@ -43,6 +84,21 @@ declare const button: tailwind_variants.TVReturnType<{
         md: string;
         lg: string;
     };
+    color: {
+        primary: string;
+        secondary: string;
+        destructive: string;
+        warning: string;
+        success: string;
+    };
+    radius: {};
+    fullWidth: {
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+        false: string;
+    };
 }, undefined, string[], unknown, unknown, undefined>>;
 type ButtonVariantProps = VariantProps<typeof button>;