@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/feedback/progress-bar/progress-bar.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Text from "../../typography/text/text.js";
+function ProgressBar({ value, max = 100, showLabel, variant = "neutral", className = "" }) {
+  const percentage = Math.min(value / max * 100, 100);
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 bg-muted/30 rounded-full h-2.5 overflow-hidden shadow-inner", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: `h-full transition-all duration-500 ease-out rounded-full bg-${variant}`,
+        style: { width: `${percentage}%` }
+      }
+    ) }),
+    showLabel && /* @__PURE__ */ jsxs(Text, { variant: "muted", weight: "medium", size: "sm", children: [
+      Math.round(percentage),
+      "%"
+    ] })
+  ] });
+}
+ProgressBar.displayName = "ProgressBar";
+export {
+  ProgressBar as default
+};
+//# sourceMappingURL=progress-bar.js.map

package/dist/components/feedback/progress-bar/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sources":["../../../../src/components/feedback/progress-bar/progress-bar.tsx"],"sourcesContent":["import Text from '../../typography/text/text';\nimport { ColorVariant } from '../../../theme/tokens';\n\nexport type ProgressBarProps = {\n  /** Current progress value */\n  value: number;\n  /** Maximum value for the progress bar (defaults to 100) */\n  max?: number;\n  /** Whether to display the percentage label next to the progress bar */\n  showLabel?: boolean;\n  /** Visual style variant indicating the progress state */\n  variant?: ColorVariant;\n  /** Additional CSS classes to apply to the progress bar container */\n  className?: string;\n};\n\n/**\n * ProgressBar - Visual representation of completion\n */\nfunction ProgressBar({ value, max = 100, showLabel, variant = 'neutral', className = '' }: Readonly<ProgressBarProps>) {\n  const percentage = Math.min((value / max) * 100, 100);\n\n  return (\n    <div className={`flex items-center gap-3 ${className}`}>\n      <div className=\"flex-1 bg-muted/30 rounded-full h-2.5 overflow-hidden shadow-inner\">\n        <div\n          role=\"progressbar\"\n          aria-valuenow={value}\n          aria-valuemin={0}\n          aria-valuemax={max}\n          className={`h-full transition-all duration-500 ease-out rounded-full bg-${variant}`}\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n      {showLabel && (\n        <Text variant=\"muted\" weight=\"medium\" size=\"sm\">\n          {Math.round(percentage)}%\n        </Text>\n      )}\n    </div>\n  );\n}\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"names":[],"mappings":";;AAmBA,SAAS,YAAY,EAAE,OAAO,MAAM,KAAK,WAAW,UAAU,WAAW,YAAY,MAAkC;AACrH,QAAM,aAAa,KAAK,IAAK,QAAQ,MAAO,KAAK,GAAG;AAEpD,SACE,qBAAC,OAAA,EAAI,WAAW,2BAA2B,SAAS,IAClD,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,sEACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,WAAW,+DAA+D,OAAO;AAAA,QACjF,OAAO,EAAE,OAAO,GAAG,UAAU,IAAA;AAAA,MAAI;AAAA,IAAA,GAErC;AAAA,IACC,kCACE,MAAA,EAAK,SAAQ,SAAQ,QAAO,UAAS,MAAK,MACxC,UAAA;AAAA,MAAA,KAAK,MAAM,UAAU;AAAA,MAAE;AAAA,IAAA,EAAA,CAC1B;AAAA,EAAA,GAEJ;AAEJ;AAEA,YAAY,cAAc;"}

package/dist/components/feedback/skeleton/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './skeleton';
+export type { SkeletonProps } from './skeleton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/feedback/skeleton/skeleton.d.ts

@@ -0,0 +1,19 @@
+export type SkeletonProps = {
+    /** Shape variant of the skeleton placeholder */
+    variant?: 'text' | 'circular' | 'rectangular';
+    /** Width of the skeleton (CSS value, defaults to 100% for text/rectangular, 40px for circular) */
+    width?: string;
+    /** Height of the skeleton (CSS value, defaults based on variant) */
+    height?: string;
+    /** Additional CSS classes to apply to the skeleton container */
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Skeleton - Placeholder for loading state
+ */
+declare function Skeleton({ variant, width, height, className, ...props }: Readonly<SkeletonProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Skeleton {
+    var displayName: string;
+}
+export default Skeleton;
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/feedback/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC;IAC9C,kGAAkG;IAClG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC;;GAEG;AACH,iBAAS,QAAQ,CAAC,EAAE,OAAgB,EAAE,KAAK,EAAE,MAAM,EAAE,SAAc,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,2CAuBvG;kBAvBQ,QAAQ;;;AA2BjB,eAAe,QAAQ,CAAC"}

package/dist/components/feedback/skeleton/skeleton.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+function Skeleton({ variant = "text", width, height, className = "", ...props }) {
+  const variantClasses = {
+    text: "rounded h-4",
+    circular: "rounded-full",
+    rectangular: "rounded-md"
+  };
+  const style = {
+    width: width || (variant === "circular" ? "40px" : "100%"),
+    height: height || (variant === "circular" ? "40px" : void 0)
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `bg-muted animate-pulse ${variantClasses[variant]} ${className}`,
+      style,
+      "aria-busy": "true",
+      "aria-live": "polite",
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+    }
+  );
+}
+Skeleton.displayName = "Skeleton";
+export {
+  Skeleton as default
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/components/feedback/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedback/skeleton/skeleton.tsx"],"sourcesContent":["export type SkeletonProps = {\n  /** Shape variant of the skeleton placeholder */\n  variant?: 'text' | 'circular' | 'rectangular';\n  /** Width of the skeleton (CSS value, defaults to 100% for text/rectangular, 40px for circular) */\n  width?: string;\n  /** Height of the skeleton (CSS value, defaults based on variant) */\n  height?: string;\n  /** Additional CSS classes to apply to the skeleton container */\n  className?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Skeleton - Placeholder for loading state\n */\nfunction Skeleton({ variant = 'text', width, height, className = '', ...props }: Readonly<SkeletonProps>) {\n  const variantClasses = {\n    text: 'rounded h-4',\n    circular: 'rounded-full',\n    rectangular: 'rounded-md'\n  };\n\n  const style = {\n    width: width || (variant === 'circular' ? '40px' : '100%'),\n    height: height || (variant === 'circular' ? '40px' : undefined)\n  };\n\n  return (\n    <div\n      className={`bg-muted animate-pulse ${variantClasses[variant]} ${className}`}\n      style={style}\n      aria-busy=\"true\"\n      aria-live=\"polite\"\n      {...props}\n    >\n      <span className=\"sr-only\">Loading...</span>\n    </div>\n  );\n}\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"names":[],"mappings":";AAcA,SAAS,SAAS,EAAE,UAAU,QAAQ,OAAO,QAAQ,YAAY,IAAI,GAAG,SAAkC;AACxG,QAAM,iBAAiB;AAAA,IACrB,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,EAAA;AAGf,QAAM,QAAQ;AAAA,IACZ,OAAO,UAAU,YAAY,aAAa,SAAS;AAAA,IACnD,QAAQ,WAAW,YAAY,aAAa,SAAS;AAAA,EAAA;AAGvD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,0BAA0B,eAAe,OAAO,CAAC,IAAI,SAAS;AAAA,MACzE;AAAA,MACA,aAAU;AAAA,MACV,aAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAA,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,aAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAG1C;AAEA,SAAS,cAAc;"}

package/dist/components/feedback/smooth-transition/index.d.ts

@@ -0,0 +1,3 @@
+export { default, useStaggeredTransition } from './smooth-transition';
+export type { SmoothTransitionProps, TransitionType, TransitionDuration } from './smooth-transition';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/smooth-transition/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/smooth-transition/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AACtE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/feedback/smooth-transition/smooth-transition.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode, CSSProperties } from 'react';
+export type TransitionType = 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'scale' | 'scale-fade' | 'slide-fade-up' | 'slide-fade-down' | 'zoom';
+export type TransitionDuration = 'fast' | 'normal' | 'slow' | number;
+export type SmoothTransitionProps = {
+    /** Content to animate */
+    children: ReactNode;
+    /** Whether to show the content (controls animation state) */
+    show?: boolean;
+    /** Type of animation to apply */
+    type?: TransitionType;
+    /** Duration of the animation ('fast', 'normal', 'slow', or custom milliseconds) */
+    duration?: TransitionDuration;
+    /** Delay before animation starts (in ms) */
+    delay?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+    /** Apply hover effect (scale and shadow on hover) */
+    hover?: boolean;
+    /** Apply active effect (scale down on click) */
+    active?: boolean;
+};
+/**
+ * SmoothTransition - A reusable component for smooth animations and transitions
+ *
+ * @example
+ * // Fade in/out
+ * <SmoothTransition show={isOpen} type="fade">
+ *   <div>Content</div>
+ * </SmoothTransition>
+ *
+ * @example
+ * // Slide up with hover effect
+ * <SmoothTransition show={true} type="slide-fade-up" hover>
+ *   <button>Click me</button>
+ * </SmoothTransition>
+ *
+ * @example
+ * // Custom duration
+ * <SmoothTransition show={isVisible} type="scale-fade" duration={500}>
+ *   <div>Animated content</div>
+ * </SmoothTransition>
+ *
+ * @example
+ * // Delayed animation
+ * <SmoothTransition show={true} type="fade" delay={200}>
+ *   <div>Appears after 200ms</div>
+ * </SmoothTransition>
+ */
+declare function SmoothTransition({ children, show, type, duration, delay, className, style, hover, active }: Readonly<SmoothTransitionProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace SmoothTransition {
+    var displayName: string;
+}
+export default SmoothTransition;
+/**
+ * Hook for creating staggered animations
+ *
+ * @example
+ * const delays = useStaggeredTransition(5, 100);
+ * items.map((item, i) => (
+ *   <SmoothTransition key={i} delay={delays[i]}>
+ *     {item}
+ *   </SmoothTransition>
+ * ))
+ */
+export declare function useStaggeredTransition(count: number, baseDelay?: number): number[];
+//# sourceMappingURL=smooth-transition.d.ts.map

package/dist/components/feedback/smooth-transition/smooth-transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smooth-transition.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/smooth-transition/smooth-transition.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,aAAa,GACb,OAAO,GACP,YAAY,GACZ,eAAe,GACf,iBAAiB,GACjB,MAAM,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAErE,MAAM,MAAM,qBAAqB,GAAG;IAClC,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAkEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,gBAAgB,CAAC,EACxB,QAAQ,EACR,IAAW,EACX,IAAa,EACb,QAAmB,EACnB,KAAS,EACT,SAAc,EACd,KAAU,EACV,KAAa,EACb,MAAc,EACf,EAAE,QAAQ,CAAC,qBAAqB,CAAC,2CAejC;kBAzBQ,gBAAgB;;;AA6BzB,eAAe,gBAAgB,CAAC;AAEhC;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,GAAE,MAAW,GAAG,MAAM,EAAE,CAEtF"}

package/dist/components/feedback/smooth-transition/smooth-transition.js

@@ -0,0 +1,89 @@
+import { jsx } from "react/jsx-runtime";
+const getDurationClass = (duration) => {
+  if (typeof duration === "number") {
+    return "";
+  }
+  switch (duration) {
+    case "fast":
+      return "duration-150";
+    case "slow":
+      return "duration-500";
+    case "normal":
+    default:
+      return "duration-300";
+  }
+};
+const getTransitionClasses = (type, show, hover, active) => {
+  const baseClasses = "transition-all";
+  let typeClasses = "";
+  if (!show) {
+    switch (type) {
+      case "fade":
+        typeClasses = "opacity-0";
+        break;
+      case "slide-up":
+        typeClasses = "translate-y-4 opacity-0";
+        break;
+      case "slide-down":
+        typeClasses = "-translate-y-4 opacity-0";
+        break;
+      case "slide-left":
+        typeClasses = "translate-x-4 opacity-0";
+        break;
+      case "slide-right":
+        typeClasses = "-translate-x-4 opacity-0";
+        break;
+      case "scale":
+        typeClasses = "scale-95 opacity-0";
+        break;
+      case "scale-fade":
+        typeClasses = "scale-90 opacity-0";
+        break;
+      case "slide-fade-up":
+        typeClasses = "translate-y-2 opacity-0";
+        break;
+      case "slide-fade-down":
+        typeClasses = "-translate-y-2 opacity-0";
+        break;
+      case "zoom":
+        typeClasses = "scale-0 opacity-0";
+        break;
+      default:
+        typeClasses = "opacity-0";
+    }
+  } else {
+    typeClasses = "translate-y-0 translate-x-0 scale-100 opacity-100";
+  }
+  const hoverClasses = hover ? "hover:scale-105 hover:shadow-lg" : "";
+  const activeClasses = active ? "active:scale-95" : "";
+  return `${baseClasses} ${typeClasses} ${hoverClasses} ${activeClasses}`.trim();
+};
+function SmoothTransition({
+  children,
+  show = true,
+  type = "fade",
+  duration = "normal",
+  delay = 0,
+  className = "",
+  style = {},
+  hover = false,
+  active = false
+}) {
+  const durationClass = getDurationClass(duration);
+  const transitionClasses = getTransitionClasses(type, show, hover, active);
+  const customStyle = {
+    ...style,
+    transitionDuration: typeof duration === "number" ? `${duration}ms` : void 0,
+    transitionDelay: delay > 0 ? `${delay}ms` : void 0
+  };
+  return /* @__PURE__ */ jsx("div", { className: `${transitionClasses} ${durationClass} ${className}`, style: customStyle, children });
+}
+SmoothTransition.displayName = "SmoothTransition";
+function useStaggeredTransition(count, baseDelay = 50) {
+  return Array.from({ length: count }, (_, i) => i * baseDelay);
+}
+export {
+  SmoothTransition as default,
+  useStaggeredTransition
+};
+//# sourceMappingURL=smooth-transition.js.map

package/dist/components/feedback/smooth-transition/smooth-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smooth-transition.js","sources":["../../../../src/components/feedback/smooth-transition/smooth-transition.tsx"],"sourcesContent":["import { ReactNode, CSSProperties } from 'react';\n\nexport type TransitionType =\n  | 'fade'\n  | 'slide-up'\n  | 'slide-down'\n  | 'slide-left'\n  | 'slide-right'\n  | 'scale'\n  | 'scale-fade'\n  | 'slide-fade-up'\n  | 'slide-fade-down'\n  | 'zoom';\n\nexport type TransitionDuration = 'fast' | 'normal' | 'slow' | number;\n\nexport type SmoothTransitionProps = {\n  /** Content to animate */\n  children: ReactNode;\n  /** Whether to show the content (controls animation state) */\n  show?: boolean;\n  /** Type of animation to apply */\n  type?: TransitionType;\n  /** Duration of the animation ('fast', 'normal', 'slow', or custom milliseconds) */\n  duration?: TransitionDuration;\n  /** Delay before animation starts (in ms) */\n  delay?: number;\n  /** Additional CSS classes */\n  className?: string;\n  /** Additional inline styles */\n  style?: CSSProperties;\n  /** Apply hover effect (scale and shadow on hover) */\n  hover?: boolean;\n  /** Apply active effect (scale down on click) */\n  active?: boolean;\n};\n\nconst getDurationClass = (duration: TransitionDuration): string => {\n  if (typeof duration === 'number') {\n    return '';\n  }\n  switch (duration) {\n    case 'fast':\n      return 'duration-150';\n    case 'slow':\n      return 'duration-500';\n    case 'normal':\n    default:\n      return 'duration-300';\n  }\n};\n\nconst getTransitionClasses = (type: TransitionType, show: boolean, hover: boolean, active: boolean): string => {\n  const baseClasses = 'transition-all';\n  let typeClasses = '';\n\n  if (!show) {\n    switch (type) {\n      case 'fade':\n        typeClasses = 'opacity-0';\n        break;\n      case 'slide-up':\n        typeClasses = 'translate-y-4 opacity-0';\n        break;\n      case 'slide-down':\n        typeClasses = '-translate-y-4 opacity-0';\n        break;\n      case 'slide-left':\n        typeClasses = 'translate-x-4 opacity-0';\n        break;\n      case 'slide-right':\n        typeClasses = '-translate-x-4 opacity-0';\n        break;\n      case 'scale':\n        typeClasses = 'scale-95 opacity-0';\n        break;\n      case 'scale-fade':\n        typeClasses = 'scale-90 opacity-0';\n        break;\n      case 'slide-fade-up':\n        typeClasses = 'translate-y-2 opacity-0';\n        break;\n      case 'slide-fade-down':\n        typeClasses = '-translate-y-2 opacity-0';\n        break;\n      case 'zoom':\n        typeClasses = 'scale-0 opacity-0';\n        break;\n      default:\n        typeClasses = 'opacity-0';\n    }\n  } else {\n    typeClasses = 'translate-y-0 translate-x-0 scale-100 opacity-100';\n  }\n\n  const hoverClasses = hover ? 'hover:scale-105 hover:shadow-lg' : '';\n  const activeClasses = active ? 'active:scale-95' : '';\n\n  return `${baseClasses} ${typeClasses} ${hoverClasses} ${activeClasses}`.trim();\n};\n\n/**\n * SmoothTransition - A reusable component for smooth animations and transitions\n *\n * @example\n * // Fade in/out\n * <SmoothTransition show={isOpen} type=\"fade\">\n *   <div>Content</div>\n * </SmoothTransition>\n *\n * @example\n * // Slide up with hover effect\n * <SmoothTransition show={true} type=\"slide-fade-up\" hover>\n *   <button>Click me</button>\n * </SmoothTransition>\n *\n * @example\n * // Custom duration\n * <SmoothTransition show={isVisible} type=\"scale-fade\" duration={500}>\n *   <div>Animated content</div>\n * </SmoothTransition>\n *\n * @example\n * // Delayed animation\n * <SmoothTransition show={true} type=\"fade\" delay={200}>\n *   <div>Appears after 200ms</div>\n * </SmoothTransition>\n */\nfunction SmoothTransition({\n  children,\n  show = true,\n  type = 'fade',\n  duration = 'normal',\n  delay = 0,\n  className = '',\n  style = {},\n  hover = false,\n  active = false\n}: Readonly<SmoothTransitionProps>) {\n  const durationClass = getDurationClass(duration);\n  const transitionClasses = getTransitionClasses(type, show, hover, active);\n\n  const customStyle: CSSProperties = {\n    ...style,\n    transitionDuration: typeof duration === 'number' ? `${duration}ms` : undefined,\n    transitionDelay: delay > 0 ? `${delay}ms` : undefined\n  };\n\n  return (\n    <div className={`${transitionClasses} ${durationClass} ${className}`} style={customStyle}>\n      {children}\n    </div>\n  );\n}\n\nSmoothTransition.displayName = 'SmoothTransition';\n\nexport default SmoothTransition;\n\n/**\n * Hook for creating staggered animations\n *\n * @example\n * const delays = useStaggeredTransition(5, 100);\n * items.map((item, i) => (\n *   <SmoothTransition key={i} delay={delays[i]}>\n *     {item}\n *   </SmoothTransition>\n * ))\n */\nexport function useStaggeredTransition(count: number, baseDelay: number = 50): number[] {\n  return Array.from({ length: count }, (_, i) => i * baseDelay);\n}\n"],"names":[],"mappings":";AAqCA,MAAM,mBAAmB,CAAC,aAAyC;AACjE,MAAI,OAAO,aAAa,UAAU;AAChC,WAAO;AAAA,EACT;AACA,UAAQ,UAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EAAA;AAEb;AAEA,MAAM,uBAAuB,CAAC,MAAsB,MAAe,OAAgB,WAA4B;AAC7G,QAAM,cAAc;AACpB,MAAI,cAAc;AAElB,MAAI,CAAC,MAAM;AACT,YAAQ,MAAA;AAAA,MACN,KAAK;AACH,sBAAc;AACd;AAAA,MACF,KAAK;AACH,sBAAc;AACd;AAAA,MACF,KAAK;AACH,sBAAc;AACd;AAAA,MACF,KAAK;AACH,sBAAc;AACd;AAAA,MACF,KAAK;AACH,sBAAc;AACd;AAAA,MACF,KAAK;AACH,sBAAc;AACd;AAAA,MACF,KAAK;AACH,sBAAc;AACd;AAAA,MACF,KAAK;AACH,sBAAc;AACd;AAAA,MACF,KAAK;AACH,sBAAc;AACd;AAAA,MACF,KAAK;AACH,sBAAc;AACd;AAAA,MACF;AACE,sBAAc;AAAA,IAAA;AAAA,EAEpB,OAAO;AACL,kBAAc;AAAA,EAChB;AAEA,QAAM,eAAe,QAAQ,oCAAoC;AACjE,QAAM,gBAAgB,SAAS,oBAAoB;AAEnD,SAAO,GAAG,WAAW,IAAI,WAAW,IAAI,YAAY,IAAI,aAAa,GAAG,KAAA;AAC1E;AA6BA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,QAAQ,CAAA;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AACX,GAAoC;AAClC,QAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,oBAAoB,qBAAqB,MAAM,MAAM,OAAO,MAAM;AAExE,QAAM,cAA6B;AAAA,IACjC,GAAG;AAAA,IACH,oBAAoB,OAAO,aAAa,WAAW,GAAG,QAAQ,OAAO;AAAA,IACrE,iBAAiB,QAAQ,IAAI,GAAG,KAAK,OAAO;AAAA,EAAA;AAG9C,SACE,oBAAC,OAAA,EAAI,WAAW,GAAG,iBAAiB,IAAI,aAAa,IAAI,SAAS,IAAI,OAAO,aAC1E,SAAA,CACH;AAEJ;AAEA,iBAAiB,cAAc;AAexB,SAAS,uBAAuB,OAAe,YAAoB,IAAc;AACtF,SAAO,MAAM,KAAK,EAAE,QAAQ,SAAS,CAAC,GAAG,MAAM,IAAI,SAAS;AAC9D;"}

package/dist/components/feedback/spinner/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './spinner';
+export type { SpinnerProps } from './spinner';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/feedback/spinner/spinner.d.ts

@@ -0,0 +1,21 @@
+import { Size } from '../../../theme/size-tokens';
+export type SpinnerProps = {
+    /** Size variant - uses unified size system */
+    size?: Size;
+    /** Color variant */
+    variant?: 'primary' | 'accent' | 'neutral';
+    /** Additional CSS classes to apply to the spinner container */
+    className?: string;
+    /** Override animation duration (e.g. '0.6s') */
+    speed?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Spinner - Loading indicator
+ * Uses unified size system from theme/size-tokens
+ */
+declare function Spinner({ size, variant, className, speed, ...props }: Readonly<SpinnerProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Spinner {
+    var displayName: string;
+}
+export default Spinner;
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/feedback/spinner/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAgB,MAAM,4BAA4B,CAAC;AAEhE,MAAM,MAAM,YAAY,GAAG;IACzB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC;;;GAGG;AACH,iBAAS,OAAO,CAAC,EAAE,IAAW,EAAE,OAAmB,EAAE,SAAc,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,YAAY,CAAC,2CAsB7G;kBAtBQ,OAAO;;;AA0BhB,eAAe,OAAO,CAAC"}

package/dist/components/feedback/spinner/spinner.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { spinnerSizes } from "../../../theme/size-tokens.js";
+function Spinner({ size = "xl", variant = "primary", className = "", speed, ...props }) {
+  const sizeConfig = spinnerSizes[size];
+  const variantTopBorder = {
+    primary: "border-t-primary",
+    accent: "border-t-accent",
+    neutral: "border-t-neutral"
+  }[variant];
+  const duration = speed ? `[animation-duration:${speed}]` : "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      "data-variant": variant,
+      className: `inline-block border-muted ${variantTopBorder} rounded-full animate-spin box-border ${duration} ${sizeConfig.classes} ${sizeConfig.border} ${className}`,
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+    }
+  );
+}
+Spinner.displayName = "Spinner";
+export {
+  Spinner as default
+};
+//# sourceMappingURL=spinner.js.map

package/dist/components/feedback/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":["../../../../src/components/feedback/spinner/spinner.tsx"],"sourcesContent":["import { Size, spinnerSizes } from '../../../theme/size-tokens';\n\nexport type SpinnerProps = {\n  /** Size variant - uses unified size system */\n  size?: Size;\n  /** Color variant */\n  variant?: 'primary' | 'accent' | 'neutral';\n  /** Additional CSS classes to apply to the spinner container */\n  className?: string;\n  /** Override animation duration (e.g. '0.6s') */\n  speed?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Spinner - Loading indicator\n * Uses unified size system from theme/size-tokens\n */\nfunction Spinner({ size = 'xl', variant = 'primary', className = '', speed, ...props }: Readonly<SpinnerProps>) {\n  const sizeConfig = spinnerSizes[size];\n\n  const variantTopBorder = {\n    primary: 'border-t-primary',\n    accent: 'border-t-accent',\n    neutral: 'border-t-neutral'\n  }[variant];\n\n  const duration = speed ? `[animation-duration:${speed}]` : '';\n\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Loading\"\n      data-variant={variant}\n      className={`inline-block border-muted ${variantTopBorder} rounded-full animate-spin box-border ${duration} ${sizeConfig.classes} ${sizeConfig.border} ${className}`}\n      {...props}\n    >\n      <span className=\"sr-only\">Loading...</span>\n    </div>\n  );\n}\n\nSpinner.displayName = 'Spinner';\n\nexport default Spinner;\n"],"names":[],"mappings":";;AAiBA,SAAS,QAAQ,EAAE,OAAO,MAAM,UAAU,WAAW,YAAY,IAAI,OAAO,GAAG,SAAiC;AAC9G,QAAM,aAAa,aAAa,IAAI;AAEpC,QAAM,mBAAmB;AAAA,IACvB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA,EACT,OAAO;AAET,QAAM,WAAW,QAAQ,uBAAuB,KAAK,MAAM;AAE3D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,gBAAc;AAAA,MACd,WAAW,6BAA6B,gBAAgB,yCAAyC,QAAQ,IAAI,WAAW,OAAO,IAAI,WAAW,MAAM,IAAI,SAAS;AAAA,MAChK,GAAG;AAAA,MAEJ,UAAA,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,aAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAG1C;AAEA,QAAQ,cAAc;"}

package/dist/components/feedback/toast/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './toast';
+export type { ToastProps } from './toast';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/feedback/toast/toast.d.ts

@@ -0,0 +1,23 @@
+export type ToastProps = {
+    /** Text message to display in the toast (alternative to children) */
+    message?: string;
+    /** React content to display in the toast (takes precedence over message) */
+    children?: React.ReactNode;
+    /** Visual style variant indicating the type of notification (info, success, warning, or error) */
+    type?: 'info' | 'success' | 'warning' | 'error';
+    /** Callback function invoked when the toast is closed (either manually or via auto-dismiss) */
+    onClose?: () => void;
+    /** Additional CSS classes to apply to the toast container */
+    className?: string;
+    /** Auto-dismiss duration in milliseconds (0 to disable) */
+    duration?: number;
+};
+/**
+ * Toast - Notification popup with slide-in/out animations and auto-dismiss
+ */
+declare function Toast({ message, children, type, onClose, className, duration }: Readonly<ToastProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Toast {
+    var displayName: string;
+}
+export default Toast;
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/feedback/toast/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/toast/toast.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG;IACvB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kGAAkG;IAClG,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,iBAAS,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAa,EAAE,OAAO,EAAE,SAAc,EAAE,QAAe,EAAE,EAAE,QAAQ,CAAC,UAAU,CAAC,2CA8ClH;kBA9CQ,KAAK;;;AAkDd,eAAe,KAAK,CAAC"}

package/dist/components/feedback/toast/toast.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+function Toast({ message, children, type = "info", onClose, className = "", duration = 5e3 }) {
+  const [isClosing, setIsClosing] = useState(false);
+  const typeClasses = {
+    info: "bg-info text-info-foreground",
+    success: "bg-success text-success-foreground",
+    warning: "bg-warning text-warning-foreground",
+    error: "bg-error text-error-foreground"
+  };
+  const handleClose = useCallback(() => {
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose?.();
+    }, 300);
+  }, [onClose]);
+  useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(() => {
+        handleClose();
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, [duration, handleClose]);
+  const toast = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "polite",
+      className: `fixed bottom-4 right-4 left-4 sm:left-auto sm:max-w-md px-4 py-3 rounded-md shadow-lg z-[9999] ${typeClasses[type]} transition-all duration-300 ease-out ${isClosing ? "opacity-0 translate-x-full" : "opacity-100 translate-x-0 animate-slideInRight"} ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: children || message }),
+        onClose && /* @__PURE__ */ jsx("button", { onClick: handleClose, className: "ml-4 font-bold hover:opacity-70 transition-opacity", "aria-label": "Close", children: "×" })
+      ]
+    }
+  );
+  return typeof document !== "undefined" ? createPortal(toast, document.body) : toast;
+}
+Toast.displayName = "Toast";
+export {
+  Toast as default
+};
+//# sourceMappingURL=toast.js.map

package/dist/components/feedback/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sources":["../../../../src/components/feedback/toast/toast.tsx"],"sourcesContent":["import { useEffect, useState, useCallback } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport type ToastProps = {\n  /** Text message to display in the toast (alternative to children) */\n  message?: string;\n  /** React content to display in the toast (takes precedence over message) */\n  children?: React.ReactNode;\n  /** Visual style variant indicating the type of notification (info, success, warning, or error) */\n  type?: 'info' | 'success' | 'warning' | 'error';\n  /** Callback function invoked when the toast is closed (either manually or via auto-dismiss) */\n  onClose?: () => void;\n  /** Additional CSS classes to apply to the toast container */\n  className?: string;\n  /** Auto-dismiss duration in milliseconds (0 to disable) */\n  duration?: number;\n};\n\n/**\n * Toast - Notification popup with slide-in/out animations and auto-dismiss\n */\nfunction Toast({ message, children, type = 'info', onClose, className = '', duration = 5000 }: Readonly<ToastProps>) {\n  const [isClosing, setIsClosing] = useState(false);\n\n  const typeClasses = {\n    info: 'bg-info text-info-foreground',\n    success: 'bg-success text-success-foreground',\n    warning: 'bg-warning text-warning-foreground',\n    error: 'bg-error text-error-foreground'\n  };\n\n  const handleClose = useCallback(() => {\n    setIsClosing(true);\n    // Wait for animation to complete before calling onClose\n    setTimeout(() => {\n      onClose?.();\n    }, 300); // Match animation duration\n  }, [onClose]);\n\n  useEffect(() => {\n    if (duration > 0) {\n      const timer = setTimeout(() => {\n        handleClose();\n      }, duration);\n      return () => clearTimeout(timer);\n    }\n    return undefined;\n  }, [duration, handleClose]);\n\n  const toast = (\n    <div\n      role=\"alert\"\n      aria-live=\"polite\"\n      className={`fixed bottom-4 right-4 left-4 sm:left-auto sm:max-w-md px-4 py-3 rounded-md shadow-lg z-[9999] ${typeClasses[type]} transition-all duration-300 ease-out ${\n        isClosing ? 'opacity-0 translate-x-full' : 'opacity-100 translate-x-0 animate-slideInRight'\n      } ${className}`}\n    >\n      <span>{children || message}</span>\n      {onClose && (\n        <button onClick={handleClose} className=\"ml-4 font-bold hover:opacity-70 transition-opacity\" aria-label=\"Close\">\n          ×\n        </button>\n      )}\n    </div>\n  );\n\n  return typeof document !== 'undefined' ? createPortal(toast, document.body) : toast;\n}\n\nToast.displayName = 'Toast';\n\nexport default Toast;\n"],"names":[],"mappings":";;;AAqBA,SAAS,MAAM,EAAE,SAAS,UAAU,OAAO,QAAQ,SAAS,YAAY,IAAI,WAAW,IAAA,GAA8B;AACnH,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,cAAc;AAAA,IAClB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAGT,QAAM,cAAc,YAAY,MAAM;AACpC,iBAAa,IAAI;AAEjB,eAAW,MAAM;AACf,gBAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAU,MAAM;AACd,QAAI,WAAW,GAAG;AAChB,YAAM,QAAQ,WAAW,MAAM;AAC7B,oBAAA;AAAA,MACF,GAAG,QAAQ;AACX,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,QAAM,QACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAW,kGAAkG,YAAY,IAAI,CAAC,yCAC5H,YAAY,+BAA+B,gDAC7C,IAAI,SAAS;AAAA,MAEb,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAM,sBAAY,QAAA,CAAQ;AAAA,QAC1B,+BACE,UAAA,EAAO,SAAS,aAAa,WAAU,sDAAqD,cAAW,SAAQ,UAAA,IAAA,CAEhH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKN,SAAO,OAAO,aAAa,cAAc,aAAa,OAAO,SAAS,IAAI,IAAI;AAChF;AAEA,MAAM,cAAc;"}

package/dist/components/feedback/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './tooltip';
+export type { TooltipProps } from './tooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/feedback/tooltip/tooltip.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { ColorVariant } from '../..';
+export type TooltipProps = {
+    /** The element that triggers the tooltip */
+    children: ReactNode;
+    /** Tooltip text content */
+    content: string | ReactNode;
+    /** Position of the tooltip relative to the trigger element */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Color variant of the tooltip */
+    variant?: ColorVariant;
+    /** Delay before showing tooltip in ms */
+    delayDuration?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+/**
+ * Tooltip - Simple CSS-based tooltip component
+ *
+ * Displays a tooltip message on hover. Uses CSS for positioning with
+ * portal rendering to escape overflow constraints.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Hello">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ *
+ * <Tooltip content="Success!" position="right" variant="success">
+ *   <Button>Submit</Button>
+ * </Tooltip>
+ * ```
+ */
+declare function Tooltip({ children, content, position, variant, delayDuration, className }: Readonly<TooltipProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
+export default Tooltip;
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/feedback/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG;IACzB,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB,2BAA2B;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,mCAAmC;IACnC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,OAAmB,EACnB,aAAmB,EACnB,SAAc,EACf,EAAE,QAAQ,CAAC,YAAY,CAAC,2CAkIxB;kBAzIQ,OAAO;;;AA6IhB,eAAe,OAAO,CAAC"}

package/dist/components/feedback/tooltip/tooltip.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+function Tooltip({
+  children,
+  content,
+  position = "top",
+  variant = "neutral",
+  delayDuration = 200,
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const timeoutRef = useRef(void 0);
+  const calculatePosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const offset = 8;
+    let top = 0;
+    let left = 0;
+    switch (position) {
+      case "top":
+        top = triggerRect.top - tooltipRect.height - offset;
+        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "bottom":
+        top = triggerRect.bottom + offset;
+        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "left":
+        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+        left = triggerRect.left - tooltipRect.width - offset;
+        break;
+      case "right":
+        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+        left = triggerRect.right + offset;
+        break;
+    }
+    const padding = 8;
+    if (left < padding) left = padding;
+    if (left + tooltipRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - tooltipRect.width - padding;
+    }
+    if (top < padding) top = padding;
+    if (top + tooltipRect.height > window.innerHeight - padding) {
+      top = window.innerHeight - tooltipRect.height - padding;
+    }
+    setCoords({ top, left });
+  }, [position]);
+  const handleMouseEnter = () => {
+    timeoutRef.current = window.setTimeout(() => {
+      setIsOpen(true);
+    }, delayDuration);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsOpen(false);
+  };
+  useEffect(() => {
+    if (isOpen) {
+      requestAnimationFrame(() => {
+        calculatePosition();
+      });
+      const handleScroll = () => calculatePosition();
+      const handleResize = () => calculatePosition();
+      window.addEventListener("scroll", handleScroll, true);
+      window.addEventListener("resize", handleResize);
+      return () => {
+        window.removeEventListener("scroll", handleScroll, true);
+        window.removeEventListener("resize", handleResize);
+      };
+    }
+    return void 0;
+  }, [isOpen, calculatePosition]);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const variantClasses = {
+    primary: "bg-primary text-primary-foreground",
+    accent: "bg-accent text-accent-foreground",
+    info: "bg-info text-info-foreground",
+    success: "bg-success text-success-foreground",
+    warning: "bg-warning text-warning-foreground",
+    error: "bg-error text-error-foreground",
+    neutral: "bg-muted text-muted-foreground"
+  };
+  const tooltip = isOpen ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: tooltipRef,
+      role: "tooltip",
+      className: `fixed z-9999 px-3 py-1.5 text-xs font-medium rounded-md shadow-md max-w-xs animate-in fade-in-0 zoom-in-95 ${variantClasses[variant]} ${className}`,
+      style: {
+        top: `${coords.top}px`,
+        left: `${coords.left}px`
+      },
+      children: content
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: triggerRef,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleMouseEnter,
+        onBlur: handleMouseLeave,
+        className: "inline-flex",
+        children
+      }
+    ),
+    tooltip && createPortal(tooltip, document.body)
+  ] });
+}
+Tooltip.displayName = "Tooltip";
+export {
+  Tooltip as default
+};
+//# sourceMappingURL=tooltip.js.map