@kopexa/theme 1.0.0 → 1.2.0

package/dist/components/tooltip.d.ts

@@ -0,0 +1,31 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+declare const tooltip: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            content?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            content?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    content: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            content?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    content: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    content: string[];
+}, undefined, unknown, unknown, undefined>>;
+type TooltipVariants = VariantProps<typeof tooltip>;
+
+export { type TooltipVariants, tooltip };

package/dist/components/tooltip.js

@@ -0,0 +1,40 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/tooltip.ts
+var tooltip_exports = {};
+__export(tooltip_exports, {
+  tooltip: () => tooltip
+});
+module.exports = __toCommonJS(tooltip_exports);
+var import_tailwind_variants = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants.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"
+    ]
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tooltip
+});

package/dist/components/tooltip.mjs

@@ -0,0 +1,6 @@
+import {
+  tooltip
+} from "../chunk-SVCFD7RR.mjs";
+export {
+  tooltip
+};

package/dist/index.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -19,6 +20,8 @@
 	--accent-foreground: oklch(0.205 0 0);
 	--destructive: oklch(0.577 0.245 27.325);
 	--destructive-foreground: oklch(0.577 0.245 27.325);
+    --success: oklch(0.7329 0.1935 150.81);
+    --success-foreground: oklch(1 0 0);
 	--warning: oklch(0.84 0.16 84);
 	--warning-foreground: oklch(0.28 0.07 46);
 	--border: oklch(0.922 0 0);
@@ -57,6 +60,8 @@
 	--accent-foreground: oklch(0.985 0 0);
 	--destructive: oklch(0.396 0.141 25.723);
 	--destructive-foreground: oklch(0.637 0.237 25.331);
+    --success: oklch(0.7329 0.1935 150.81);
+    --success-foreground: oklch(1 0 0);
 	--warning: oklch(0.41 0.11 46);
 	--warning-foreground: oklch(0.99 0.02 95);
 	--border: oklch(0.269 0 0);
@@ -94,6 +99,8 @@
 	--color-accent-foreground: var(--accent-foreground);
 	--color-destructive: var(--destructive);
 	--color-destructive-foreground: var(--destructive-foreground);
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
 	--color-warning: var(--warning);
 	--color-warning-foreground: var(--warning-foreground);
 	--color-border: var(--border);
@@ -126,3 +133,51 @@
 		@apply bg-background text-foreground;
 	}
 }
+
+.spinner-dot-animation {
+    animation-delay: calc(250ms * var(--dot-index));
+}
+
+.spinner-dot-blink-animation {
+    animation-delay: calc(200ms * var(--dot-index));
+}
+
+@theme {
+    --animate-spinner-ease-spin: spinner-spin 0.8s ease infinite;
+    --animate-spinner-linear-spin: spinner-spin 0.8s linear infinite;
+    --animate-blink: blink 1.4s infinite both;
+    --animate-sway: sway 720ms ease infinite;
+
+    @keyframes spinner-spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes blink {
+        0% {
+            opacity: 0.2;
+        }
+        20% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0.2;
+        }
+    }
+
+    @keyframes sway {
+        0% {
+            transform: translate(0px, 0px);
+        }
+        50% {
+            transform: translate(0px, -150%);
+        }
+        100% {
+            transform: translate(0px, 0px);
+        }
+    }
+}

package/dist/index.d.mts

@@ -1,5 +1,8 @@
 export { TV, VariantProps } from 'tailwind-variants';
 export { ButtonVariantProps, button } from './components/button.mjs';
+export { CommandVariants, command } from './components/command.mjs';
 export { DialogSlots, DialogVariantProps, dialog } from './components/dialog.mjs';
 export { DrawerVariantProps, drawer } from './components/drawer.mjs';
 export { PopoverVariants, popover } from './components/popover.mjs';
+export { SpinnerVariants, spinner } from './components/spinner.mjs';
+export { TooltipVariants, tooltip } from './components/tooltip.mjs';

package/dist/index.d.ts

@@ -1,5 +1,8 @@
 export { TV, VariantProps } from 'tailwind-variants';
 export { ButtonVariantProps, button } from './components/button.js';
+export { CommandVariants, command } from './components/command.js';
 export { DialogSlots, DialogVariantProps, dialog } from './components/dialog.js';
 export { DrawerVariantProps, drawer } from './components/drawer.js';
 export { PopoverVariants, popover } from './components/popover.js';
+export { SpinnerVariants, spinner } from './components/spinner.js';
+export { TooltipVariants, tooltip } from './components/tooltip.js';

package/dist/index.js

@@ -21,9 +21,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   button: () => button,
+  command: () => command,
   dialog: () => dialog,
   drawer: () => drawer,
-  popover: () => popover
+  popover: () => popover,
+  spinner: () => spinner,
+  tooltip: () => tooltip
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -61,9 +64,26 @@ var button = (0, import_tailwind_variants.tv)({
   }
 });
 
-// src/components/dialog.ts
+// src/components/command.ts
 var import_tailwind_variants2 = require("tailwind-variants");
-var dialog = (0, import_tailwind_variants2.tv)({
+var command = (0, import_tailwind_variants2.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"
+  }
+});
+
+// src/components/dialog.ts
+var import_tailwind_variants3 = require("tailwind-variants");
+var dialog = (0, import_tailwind_variants3.tv)({
   slots: {
     overlay: ["fixed inset-0 z-50 bg-black/25"],
     content: [
@@ -153,8 +173,8 @@ var dialog = (0, import_tailwind_variants2.tv)({
 });
 
 // src/components/drawer.ts
-var import_tailwind_variants3 = require("tailwind-variants");
-var drawer = (0, import_tailwind_variants3.tv)({
+var import_tailwind_variants4 = require("tailwind-variants");
+var drawer = (0, import_tailwind_variants4.tv)({
   slots: {
     overlay: dialog.slots.overlay,
     content: [
@@ -234,8 +254,8 @@ var drawer = (0, import_tailwind_variants3.tv)({
 });
 
 // src/components/popover.ts
-var import_tailwind_variants4 = require("tailwind-variants");
-var popover = (0, import_tailwind_variants4.tv)({
+var import_tailwind_variants5 = require("tailwind-variants");
+var popover = (0, import_tailwind_variants5.tv)({
   slots: {
     content: [
       "bg-popover text-popover-foreground z-50 w-72",
@@ -244,10 +264,137 @@ var popover = (0, import_tailwind_variants4.tv)({
     ]
   }
 });
+
+// src/components/spinner.ts
+var import_tailwind_variants6 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants6.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"
+  }
+});
+
+// src/components/tooltip.ts
+var import_tailwind_variants7 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants7.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"
+    ]
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   button,
+  command,
   dialog,
   drawer,
-  popover
+  popover,
+  spinner,
+  tooltip
 });

package/dist/index.mjs

@@ -1,7 +1,13 @@
-import "./chunk-BFZUC56W.mjs";
+import "./chunk-QIGSYUIX.mjs";
+import {
+  tooltip
+} from "./chunk-SVCFD7RR.mjs";
 import {
   button
 } from "./chunk-GSHMDS47.mjs";
+import {
+  command
+} from "./chunk-EOML76MT.mjs";
 import {
   drawer
 } from "./chunk-V74N5X6Z.mjs";
@@ -11,9 +17,15 @@ import {
 import {
   popover
 } from "./chunk-J35D7RWA.mjs";
+import {
+  spinner
+} from "./chunk-IL3JFLE2.mjs";
 export {
   button,
+  command,
   dialog,
   drawer,
-  popover
+  popover,
+  spinner,
+  tooltip
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/theme",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "The default theme for Kopexa components",
   "keywords": [
     "theme",
@@ -44,7 +44,8 @@
     "flat": "^6.0.1",
     "tailwind-merge": "3.3.1",
     "tailwind-variants": "1.0.0",
-    "@kopexa/shared-utils": "1.0.0"
+    "tw-animate-css": "^1.3.5",
+    "@kopexa/shared-utils": "1.1.0"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0"