@kala-ui/react 0.0.1-beta.1

package/dist/src/lib/__tests__/animations.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.test.js","sourceRoot":"","sources":["../../../../src/lib/__tests__/animations.test.ts"],"names":[],"mappings":"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"}

package/dist/src/lib/animations.d.ts

@@ -0,0 +1,180 @@
+/**
+ * Animation Utilities
+ *
+ * Reusable CSS-based animation utilities with support for prefers-reduced-motion.
+ * Uses design tokens from @repo/design-tokens for consistency.
+ */
+/**
+ * CSS Animation Presets
+ *
+ * Ready-to-use animation classes that can be applied via className.
+ * Automatically respects user's prefers-reduced-motion preference.
+ */
+export declare const animationPresets: {
+    readonly fadeIn: "animate-fade-in";
+    readonly fadeOut: "animate-fade-out";
+    readonly slideInFromTop: "animate-slide-in-from-top";
+    readonly slideInFromBottom: "animate-slide-in-from-bottom";
+    readonly slideInFromLeft: "animate-slide-in-from-left";
+    readonly slideInFromRight: "animate-slide-in-from-right";
+    readonly slideOutToTop: "animate-slide-out-to-top";
+    readonly slideOutToBottom: "animate-slide-out-to-bottom";
+    readonly slideOutToLeft: "animate-slide-out-to-left";
+    readonly slideOutToRight: "animate-slide-out-to-right";
+    readonly scaleIn: "animate-scale-in";
+    readonly scaleOut: "animate-scale-out";
+    readonly expandVertical: "animate-expand-vertical";
+    readonly collapseVertical: "animate-collapse-vertical";
+    readonly spin: "animate-spin";
+    readonly pulse: "animate-pulse";
+    readonly bounce: "animate-bounce";
+};
+/**
+ * Transition Duration Classes
+ *
+ * Duration utilities from design tokens
+ */
+export declare const transitionDurations: {
+    readonly instant: "duration-0";
+    readonly fast: "duration-150";
+    readonly base: "duration-200";
+    readonly medium: "duration-300";
+    readonly slow: "duration-500";
+    readonly slower: "duration-700";
+    readonly slowest: "duration-1000";
+};
+/**
+ * Transition Timing Function Classes
+ *
+ * Easing utilities from design tokens
+ */
+export declare const transitionTimings: {
+    readonly linear: "ease-linear";
+    readonly ease: "ease";
+    readonly easeIn: "ease-in";
+    readonly easeOut: "ease-out";
+    readonly easeInOut: "ease-in-out";
+    readonly snappy: "ease-[cubic-bezier(0.4,0,0.2,1)]";
+    readonly smooth: "ease-[cubic-bezier(0.25,0.1,0.25,1)]";
+    readonly bounce: "ease-[cubic-bezier(0.68,-0.55,0.265,1.55)]";
+};
+/**
+ * Common Transition Properties
+ *
+ * Ready-to-use transition combinations
+ */
+export declare const transitionClasses: {
+    readonly hover: "transition-all duration-200 ease-in-out";
+    readonly colors: "transition-[color,background-color,border-color] duration-200 ease-in-out";
+    readonly fade: "transition-opacity duration-300 ease-in-out";
+    readonly transform: "transition-transform duration-300 ease-in-out";
+    readonly shadow: "transition-shadow duration-200 ease-in-out";
+    readonly interactive: "transition-[color,background-color,border-color,box-shadow] duration-200 ease-in-out";
+    readonly modal: "transition-[opacity,transform] duration-300 ease-in-out";
+    readonly dropdown: "transition-[opacity,transform] duration-150 ease-in-out";
+    readonly tooltip: "transition-opacity duration-150 ease-in";
+};
+/**
+ * CSS Keyframes for Animations
+ *
+ * Define the actual CSS keyframes in your global styles or Tailwind config.
+ * These values match the keyframes from design tokens.
+ */
+export declare const keyframesCSS = "\n  @keyframes fade-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  @keyframes fade-out {\n    from { opacity: 1; }\n    to { opacity: 0; }\n  }\n\n  @keyframes slide-in-from-top {\n    from { transform: translateY(-100%); }\n    to { transform: translateY(0); }\n  }\n\n  @keyframes slide-in-from-bottom {\n    from { transform: translateY(100%); }\n    to { transform: translateY(0); }\n  }\n\n  @keyframes slide-in-from-left {\n    from { transform: translateX(-100%); }\n    to { transform: translateX(0); }\n  }\n\n  @keyframes slide-in-from-right {\n    from { transform: translateX(100%); }\n    to { transform: translateX(0); }\n  }\n\n  @keyframes slide-out-to-top {\n    from { transform: translateY(0); }\n    to { transform: translateY(-100%); }\n  }\n\n  @keyframes slide-out-to-bottom {\n    from { transform: translateY(0); }\n    to { transform: translateY(100%); }\n  }\n\n  @keyframes slide-out-to-left {\n    from { transform: translateX(0); }\n    to { transform: translateX(-100%); }\n  }\n\n  @keyframes slide-out-to-right {\n    from { transform: translateX(0); }\n    to { transform: translateX(100%); }\n  }\n\n  @keyframes scale-in {\n    from { transform: scale(0.95); opacity: 0; }\n    to { transform: scale(1); opacity: 1; }\n  }\n\n  @keyframes scale-out {\n    from { transform: scale(1); opacity: 1; }\n    to { transform: scale(0.95); opacity: 0; }\n  }\n\n  @keyframes expand-vertical {\n    from {\n      max-height: 0;\n      opacity: 0;\n    }\n    to {\n      max-height: var(--max-height, 1000px);\n      opacity: 1;\n    }\n  }\n\n  @keyframes collapse-vertical {\n    from {\n      max-height: var(--max-height, 1000px);\n      opacity: 1;\n    }\n    to {\n      max-height: 0;\n      opacity: 0;\n    }\n  }\n\n  /* Respect prefers-reduced-motion */\n  @media (prefers-reduced-motion: reduce) {\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }\n";
+/**
+ * Utility function to build animation class string
+ *
+ * @param animation - The animation preset to use
+ * @param duration - Duration of the animation (default: base)
+ * @param timing - Timing function for the animation (default: easeInOut)
+ * @param additionalClasses - Additional CSS classes to apply
+ * @returns Combined class string
+ */
+export declare function buildAnimationClass(animation: keyof typeof animationPresets, options?: {
+    duration?: keyof typeof transitionDurations;
+    timing?: keyof typeof transitionTimings;
+    additionalClasses?: string;
+}): string;
+/**
+ * Page Transition Utilities
+ *
+ * For Next.js route transitions
+ */
+export declare const pageTransitions: {
+    readonly enter: "animate-fade-in duration-300 ease-in-out";
+    readonly exit: "animate-fade-out duration-200 ease-in-out";
+};
+/**
+ * Modal/Dialog Transition Utilities
+ */
+export declare const modalTransitions: {
+    readonly overlay: {
+        readonly enter: "animate-fade-in duration-200 ease-out";
+        readonly exit: "animate-fade-out duration-150 ease-in";
+    };
+    readonly content: {
+        readonly enter: "animate-scale-in duration-300 ease-out";
+        readonly exit: "animate-scale-out duration-200 ease-in";
+    };
+};
+/**
+ * Drawer/Sheet Transition Utilities
+ */
+export declare const drawerTransitions: {
+    readonly left: {
+        readonly enter: "animate-slide-in-from-left duration-300 ease-out";
+        readonly exit: "animate-slide-out-to-left duration-250 ease-in";
+    };
+    readonly right: {
+        readonly enter: "animate-slide-in-from-right duration-300 ease-out";
+        readonly exit: "animate-slide-out-to-right duration-250 ease-in";
+    };
+    readonly top: {
+        readonly enter: "animate-slide-in-from-top duration-300 ease-out";
+        readonly exit: "animate-slide-out-to-top duration-250 ease-in";
+    };
+    readonly bottom: {
+        readonly enter: "animate-slide-in-from-bottom duration-300 ease-out";
+        readonly exit: "animate-slide-out-to-bottom duration-250 ease-in";
+    };
+};
+/**
+ * Accordion/Collapsible Transition Utilities
+ */
+export declare const accordionTransitions: {
+    readonly expand: "animate-expand-vertical duration-300 ease-out";
+    readonly collapse: "animate-collapse-vertical duration-250 ease-in";
+};
+/**
+ * Dropdown Menu Transition Utilities
+ */
+export declare const dropdownTransitions: {
+    readonly enter: "animate-scale-in duration-150 ease-out";
+    readonly exit: "animate-scale-out duration-100 ease-in";
+};
+/**
+ * Skeleton to Content Transition
+ */
+export declare const skeletonTransition: {
+    readonly container: "relative";
+    readonly skeleton: "animate-fade-out duration-200 ease-out absolute inset-0";
+    readonly content: "animate-fade-in duration-300 ease-in";
+};
+/**
+ * Hover Transition Utilities for Interactive Elements
+ */
+export declare const hoverTransitions: {
+    readonly button: "transition-[color,background-color,border-color,box-shadow,transform] duration-200 ease-in-out hover:scale-[1.02] active:scale-[0.98]";
+    readonly link: "transition-[color,text-decoration-color] duration-150 ease-in-out";
+    readonly card: "transition-[box-shadow,transform] duration-300 ease-out hover:shadow-lg hover:scale-[1.01]";
+    readonly iconButton: "transition-[color,background-color,transform] duration-200 ease-in-out hover:scale-110 active:scale-95";
+    readonly subtle: "transition-[color,background-color] duration-150 ease-in-out";
+};
+/**
+ * Type exports
+ */
+export type AnimationPreset = keyof typeof animationPresets;
+export type TransitionDuration = keyof typeof transitionDurations;
+export type TransitionTiming = keyof typeof transitionTimings;
+export type TransitionClass = keyof typeof transitionClasses;
+//# sourceMappingURL=animations.d.ts.map

package/dist/src/lib/animations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../../src/lib/animations.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;CA2BnB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;CAQtB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;CASpB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;CA6BpB,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,YAAY,gjEA8FxB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAClC,SAAS,EAAE,MAAM,OAAO,gBAAgB,EACxC,OAAO,CAAC,EAAE;IACT,QAAQ,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC3B,GACC,MAAM,CAeR;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;CASnB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAiBpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;CAGtB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;CAKrB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;CAiBnB,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC5D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAClE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,iBAAiB,CAAC"}

package/dist/src/lib/animations.js

@@ -0,0 +1,293 @@
+/**
+ * Animation Utilities
+ *
+ * Reusable CSS-based animation utilities with support for prefers-reduced-motion.
+ * Uses design tokens from @repo/design-tokens for consistency.
+ */
+/**
+ * CSS Animation Presets
+ *
+ * Ready-to-use animation classes that can be applied via className.
+ * Automatically respects user's prefers-reduced-motion preference.
+ */
+export const animationPresets = {
+    // Fade transitions
+    fadeIn: "animate-fade-in",
+    fadeOut: "animate-fade-out",
+    // Slide transitions
+    slideInFromTop: "animate-slide-in-from-top",
+    slideInFromBottom: "animate-slide-in-from-bottom",
+    slideInFromLeft: "animate-slide-in-from-left",
+    slideInFromRight: "animate-slide-in-from-right",
+    slideOutToTop: "animate-slide-out-to-top",
+    slideOutToBottom: "animate-slide-out-to-bottom",
+    slideOutToLeft: "animate-slide-out-to-left",
+    slideOutToRight: "animate-slide-out-to-right",
+    // Scale transitions
+    scaleIn: "animate-scale-in",
+    scaleOut: "animate-scale-out",
+    // Expand/collapse
+    expandVertical: "animate-expand-vertical",
+    collapseVertical: "animate-collapse-vertical",
+    // Utility animations
+    spin: "animate-spin",
+    pulse: "animate-pulse",
+    bounce: "animate-bounce",
+};
+/**
+ * Transition Duration Classes
+ *
+ * Duration utilities from design tokens
+ */
+export const transitionDurations = {
+    instant: "duration-0",
+    fast: "duration-150",
+    base: "duration-200",
+    medium: "duration-300",
+    slow: "duration-500",
+    slower: "duration-700",
+    slowest: "duration-1000",
+};
+/**
+ * Transition Timing Function Classes
+ *
+ * Easing utilities from design tokens
+ */
+export const transitionTimings = {
+    linear: "ease-linear",
+    ease: "ease",
+    easeIn: "ease-in",
+    easeOut: "ease-out",
+    easeInOut: "ease-in-out",
+    snappy: "ease-[cubic-bezier(0.4,0,0.2,1)]",
+    smooth: "ease-[cubic-bezier(0.25,0.1,0.25,1)]",
+    bounce: "ease-[cubic-bezier(0.68,-0.55,0.265,1.55)]",
+};
+/**
+ * Common Transition Properties
+ *
+ * Ready-to-use transition combinations
+ */
+export const transitionClasses = {
+    // Hover state transitions
+    hover: "transition-all duration-200 ease-in-out",
+    // Color transitions
+    colors: "transition-[color,background-color,border-color] duration-200 ease-in-out",
+    // Opacity transitions
+    fade: "transition-opacity duration-300 ease-in-out",
+    // Transform transitions
+    transform: "transition-transform duration-300 ease-in-out",
+    // Shadow transitions
+    shadow: "transition-shadow duration-200 ease-in-out",
+    // Combined transitions for interactive elements
+    interactive: "transition-[color,background-color,border-color,box-shadow] duration-200 ease-in-out",
+    // Modal/Dialog transitions
+    modal: "transition-[opacity,transform] duration-300 ease-in-out",
+    // Dropdown transitions
+    dropdown: "transition-[opacity,transform] duration-150 ease-in-out",
+    // Tooltip transitions
+    tooltip: "transition-opacity duration-150 ease-in",
+};
+/**
+ * CSS Keyframes for Animations
+ *
+ * Define the actual CSS keyframes in your global styles or Tailwind config.
+ * These values match the keyframes from design tokens.
+ */
+export const keyframesCSS = `
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+
+  @keyframes slide-in-from-top {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+  }
+
+  @keyframes slide-in-from-bottom {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+
+  @keyframes slide-in-from-left {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes slide-in-from-right {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes slide-out-to-top {
+    from { transform: translateY(0); }
+    to { transform: translateY(-100%); }
+  }
+
+  @keyframes slide-out-to-bottom {
+    from { transform: translateY(0); }
+    to { transform: translateY(100%); }
+  }
+
+  @keyframes slide-out-to-left {
+    from { transform: translateX(0); }
+    to { transform: translateX(-100%); }
+  }
+
+  @keyframes slide-out-to-right {
+    from { transform: translateX(0); }
+    to { transform: translateX(100%); }
+  }
+
+  @keyframes scale-in {
+    from { transform: scale(0.95); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+  }
+
+  @keyframes scale-out {
+    from { transform: scale(1); opacity: 1; }
+    to { transform: scale(0.95); opacity: 0; }
+  }
+
+  @keyframes expand-vertical {
+    from {
+      max-height: 0;
+      opacity: 0;
+    }
+    to {
+      max-height: var(--max-height, 1000px);
+      opacity: 1;
+    }
+  }
+
+  @keyframes collapse-vertical {
+    from {
+      max-height: var(--max-height, 1000px);
+      opacity: 1;
+    }
+    to {
+      max-height: 0;
+      opacity: 0;
+    }
+  }
+
+  /* Respect prefers-reduced-motion */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+`;
+/**
+ * Utility function to build animation class string
+ *
+ * @param animation - The animation preset to use
+ * @param duration - Duration of the animation (default: base)
+ * @param timing - Timing function for the animation (default: easeInOut)
+ * @param additionalClasses - Additional CSS classes to apply
+ * @returns Combined class string
+ */
+export function buildAnimationClass(animation, options) {
+    const { duration = "base", timing = "easeInOut", additionalClasses = "", } = options || {};
+    return [
+        animationPresets[animation],
+        transitionDurations[duration],
+        transitionTimings[timing],
+        additionalClasses,
+    ]
+        .filter(Boolean)
+        .join(" ");
+}
+/**
+ * Page Transition Utilities
+ *
+ * For Next.js route transitions
+ */
+export const pageTransitions = {
+    enter: "animate-fade-in duration-300 ease-in-out",
+    exit: "animate-fade-out duration-200 ease-in-out",
+};
+/**
+ * Modal/Dialog Transition Utilities
+ */
+export const modalTransitions = {
+    overlay: {
+        enter: "animate-fade-in duration-200 ease-out",
+        exit: "animate-fade-out duration-150 ease-in",
+    },
+    content: {
+        enter: "animate-scale-in duration-300 ease-out",
+        exit: "animate-scale-out duration-200 ease-in",
+    },
+};
+/**
+ * Drawer/Sheet Transition Utilities
+ */
+export const drawerTransitions = {
+    left: {
+        enter: "animate-slide-in-from-left duration-300 ease-out",
+        exit: "animate-slide-out-to-left duration-250 ease-in",
+    },
+    right: {
+        enter: "animate-slide-in-from-right duration-300 ease-out",
+        exit: "animate-slide-out-to-right duration-250 ease-in",
+    },
+    top: {
+        enter: "animate-slide-in-from-top duration-300 ease-out",
+        exit: "animate-slide-out-to-top duration-250 ease-in",
+    },
+    bottom: {
+        enter: "animate-slide-in-from-bottom duration-300 ease-out",
+        exit: "animate-slide-out-to-bottom duration-250 ease-in",
+    },
+};
+/**
+ * Accordion/Collapsible Transition Utilities
+ */
+export const accordionTransitions = {
+    expand: "animate-expand-vertical duration-300 ease-out",
+    collapse: "animate-collapse-vertical duration-250 ease-in",
+};
+/**
+ * Dropdown Menu Transition Utilities
+ */
+export const dropdownTransitions = {
+    enter: "animate-scale-in duration-150 ease-out",
+    exit: "animate-scale-out duration-100 ease-in",
+};
+/**
+ * Skeleton to Content Transition
+ */
+export const skeletonTransition = {
+    // Apply to container wrapping skeleton and content
+    container: "relative",
+    skeleton: "animate-fade-out duration-200 ease-out absolute inset-0",
+    content: "animate-fade-in duration-300 ease-in",
+};
+/**
+ * Hover Transition Utilities for Interactive Elements
+ */
+export const hoverTransitions = {
+    // Button hover
+    button: "transition-[color,background-color,border-color,box-shadow,transform] duration-200 ease-in-out hover:scale-[1.02] active:scale-[0.98]",
+    // Link hover
+    link: "transition-[color,text-decoration-color] duration-150 ease-in-out",
+    // Card hover
+    card: "transition-[box-shadow,transform] duration-300 ease-out hover:shadow-lg hover:scale-[1.01]",
+    // Icon button hover
+    iconButton: "transition-[color,background-color,transform] duration-200 ease-in-out hover:scale-110 active:scale-95",
+    // Subtle hover (for nav items, etc.)
+    subtle: "transition-[color,background-color] duration-150 ease-in-out",
+};
+//# sourceMappingURL=animations.js.map

package/dist/src/lib/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.js","sourceRoot":"","sources":["../../../src/lib/animations.ts"],"names":[],"mappings":"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"}

package/dist/src/lib/use-mobile.d.ts

@@ -0,0 +1,2 @@
+export declare function useIsMobile(): boolean;
+//# sourceMappingURL=use-mobile.d.ts.map

package/dist/src/lib/use-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../../src/lib/use-mobile.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,YAe1B"}

package/dist/src/lib/use-mobile.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        const checkIsMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+        checkIsMobile();
+        window.addEventListener("resize", checkIsMobile);
+        return () => window.removeEventListener("resize", checkIsMobile);
+    }, []);
+    return isMobile;
+}
+//# sourceMappingURL=use-mobile.js.map

package/dist/src/lib/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.js","sourceRoot":"","sources":["../../../src/lib/use-mobile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,UAAU,WAAW;IAC1B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,aAAa,GAAG,GAAG,EAAE;YAC1B,WAAW,CAAC,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC,CAAC;QACtC,CAAC,CAAC;QAEF,aAAa,EAAE,CAAC;QAChB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;QAEjD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;IAClE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,QAAQ,CAAC;AACjB,CAAC"}

package/dist/src/lib/utils.d.ts

@@ -0,0 +1,7 @@
+import { type ClassValue } from "clsx";
+/**
+ * Merge Tailwind CSS classes with proper precedence
+ * Note: Using tailwind-merge for class conflict resolution as it works with atomic CSS utilities
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/src/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAG7C;;;GAGG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/src/lib/utils.js

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+/**
+ * Merge Tailwind CSS classes with proper precedence
+ * Note: Using tailwind-merge for class conflict resolution as it works with atomic CSS utilities
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+//# sourceMappingURL=utils.js.map

package/dist/src/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,MAAM,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC;;;GAGG;AACH,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACzC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AAC9B,CAAC"}

package/dist/src/primitives/command/Command.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Command Primitives - Shared command palette components
+ *
+ * These primitives are built on top of cmdk and used by components like
+ * Combobox and MultiSelect. They provide a consistent command interface
+ * throughout the design system.
+ *
+ * @see https://cmdk.paco.me/
+ */
+import * as React from "react";
+declare const Command: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandSeparator, CommandItem, };
+//# sourceMappingURL=Command.d.ts.map

package/dist/src/primitives/command/Command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.d.ts","sourceRoot":"","sources":["../../../../src/primitives/command/Command.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;sFAYX,CAAC;AAOH,QAAA,MAAM,YAAY;;;;;;;0FAiBhB,CAAC;AAOH,QAAA,MAAM,WAAW;;;;;;;;sFASf,CAAC;AAOH,QAAA,MAAM,YAAY;;;;;;uJAShB,CAAC;AAOH,QAAA,MAAM,YAAY;;;;;;;;;;sFAYhB,CAAC;AAOH,QAAA,MAAM,gBAAgB;;;;;;sFASpB,CAAC;AAOH,QAAA,MAAM,WAAW;;;;;;;;;;;;sFAYf,CAAC;AAOH,OAAO,EACN,OAAO,EACP,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,WAAW,GACX,CAAC"}