@7onic-ui/react 0.3.8 → 0.3.10

package/dist/chunk-COW3B62M.mjs

@@ -0,0 +1,214 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/tabs.tsx
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva } from "class-variance-authority";
+var TabsStyleContext = React.createContext({});
+var useTabsStyleContext = () => React.useContext(TabsStyleContext);
+var tabsListVariants = cva(
+  "inline-flex items-center text-text-subtle",
+  {
+    variants: {
+      variant: {
+        line: "border-b border-border bg-transparent gap-0",
+        enclosed: "border-b border-border bg-transparent gap-0",
+        pill: "bg-background-muted p-1 gap-1"
+      },
+      fitted: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "line",
+      fitted: false
+    }
+  }
+);
+var TabsList = React.forwardRef(({ className, variant, size, fitted, color, radius, ...props }, ref) => {
+  const resolvedVariant = variant || "line";
+  return /* @__PURE__ */ React.createElement(TabsStyleContext.Provider, { value: { variant: resolvedVariant, size: size || "default", fitted: fitted ?? false, color: color || "default", radius: radius || "md" } }, /* @__PURE__ */ React.createElement(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn(
+        tabsListVariants({ variant, fitted }),
+        resolvedVariant === "pill" && pillListRadiusClasses[radius || "md"],
+        className
+      ),
+      ...props
+    }
+  ));
+});
+TabsList.displayName = "TabsList";
+var tabsTriggerVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap",
+    "transition-all duration-micro ease-out cursor-pointer",
+    // Keyboard-only focus ring: see pointer tracking in TabsTrigger
+    "[&:focus-visible:not([data-pointer-focus])]:focus-ring",
+    "disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        line: [
+          "border-b-2 border-transparent -mb-px",
+          "hover:text-foreground hover:border-border",
+          "data-[state=active]:text-foreground data-[state=active]:font-semibold"
+        ].join(" "),
+        enclosed: [
+          "border border-transparent -mb-px",
+          "hover:text-foreground",
+          "data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background",
+          "data-[state=active]:border-border data-[state=active]:border-b-background"
+        ].join(" "),
+        pill: [
+          "hover:text-foreground",
+          "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm"
+        ].join(" ")
+      },
+      size: {
+        sm: "h-8 text-sm",
+        // 32px, 13px
+        md: "h-9 text-sm",
+        // 36px, 13px
+        default: "h-10 text-md",
+        // 40px, 14px
+        lg: "h-12 text-base"
+        // 48px, 16px
+      },
+      fitted: {
+        true: "flex-1",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Padding per variant × size
+      { variant: "line", size: "sm", className: "px-3" },
+      { variant: "line", size: "md", className: "px-3.5" },
+      { variant: "line", size: "default", className: "px-4" },
+      { variant: "line", size: "lg", className: "px-6" },
+      { variant: "enclosed", size: "sm", className: "px-3" },
+      { variant: "enclosed", size: "md", className: "px-3.5" },
+      { variant: "enclosed", size: "default", className: "px-4" },
+      { variant: "enclosed", size: "lg", className: "px-6" },
+      // Pill: reduced height + Segmented-matching font/padding
+      { variant: "pill", size: "sm", className: "h-6 text-xs px-3.5" },
+      { variant: "pill", size: "md", className: "h-7 text-sm px-3.5" },
+      { variant: "pill", size: "default", className: "h-8 text-sm px-4" },
+      { variant: "pill", size: "lg", className: "h-10 text-md px-6" }
+    ],
+    defaultVariants: {
+      variant: "line",
+      size: "default",
+      fitted: false
+    }
+  }
+);
+var triggerIconSizeClasses = {
+  sm: "[&>svg]:icon-xs",
+  // 14px
+  md: "[&>svg]:icon-sm",
+  // 16px
+  default: "[&>svg]:icon-sm",
+  // 16px
+  lg: "[&>svg]:icon-sm"
+  // 16px
+};
+var lineColorClasses = {
+  default: "data-[state=active]:border-foreground",
+  primary: "data-[state=active]:border-primary"
+};
+var enclosedRadiusClasses = {
+  none: "rounded-t-none",
+  sm: "rounded-t-sm",
+  base: "rounded-t",
+  md: "rounded-t-md",
+  lg: "rounded-t-lg",
+  xl: "rounded-t-xl"
+};
+var pillListRadiusClasses = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  base: "rounded",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl",
+  full: "rounded-full"
+};
+var pillItemRadiusClasses = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  base: "rounded",
+  md: "rounded-md",
+  lg: "rounded-md",
+  xl: "rounded-lg",
+  "2xl": "rounded-xl",
+  "3xl": "rounded-2xl",
+  full: "rounded-full"
+};
+var TabsTrigger = React.forwardRef(({ className, children, onPointerDown, onKeyDown, onBlur, ...props }, ref) => {
+  const { variant, size, fitted, color, radius } = useTabsStyleContext();
+  const resolvedSize = size || "default";
+  const [pointerFocus, setPointerFocus] = React.useState(false);
+  return /* @__PURE__ */ React.createElement(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        tabsTriggerVariants({ variant, size: resolvedSize, fitted }),
+        triggerIconSizeClasses[resolvedSize],
+        variant === "line" && lineColorClasses[color || "default"],
+        variant === "enclosed" && enclosedRadiusClasses[radius || "md"],
+        variant === "pill" && pillItemRadiusClasses[radius || "md"],
+        className
+      ),
+      "data-pointer-focus": pointerFocus ? "" : void 0,
+      onPointerDown: (event) => {
+        setPointerFocus(true);
+        onPointerDown?.(event);
+      },
+      onKeyDown: (event) => {
+        setPointerFocus(false);
+        onKeyDown?.(event);
+      },
+      onBlur: (event) => {
+        setPointerFocus(false);
+        onBlur?.(event);
+      },
+      ...props
+    },
+    children
+  );
+});
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-4 focus-visible:focus-ring",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = "TabsContent";
+var Tabs = TabsPrimitive.Root;
+
+export {
+  tabsListVariants,
+  TabsList,
+  tabsTriggerVariants,
+  TabsTrigger,
+  TabsContent,
+  Tabs
+};
+//# sourceMappingURL=chunk-COW3B62M.mjs.map

package/dist/chunk-COW3B62M.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// Context to pass style props from TabsList to TabsTrigger\ntype TabsStyleContextValue = {\n  variant?: 'line' | 'enclosed' | 'pill'\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  fitted?: boolean\n  color?: 'default' | 'primary'\n  radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst TabsStyleContext = React.createContext<TabsStyleContextValue>({})\nconst useTabsStyleContext = () => React.useContext(TabsStyleContext)\n\n// ─── TabsList ────────────────────────────────────────────────\n\nconst tabsListVariants = cva(\n  'inline-flex items-center text-text-subtle',\n  {\n    variants: {\n      variant: {\n        line: 'border-b border-border bg-transparent gap-0',\n        enclosed: 'border-b border-border bg-transparent gap-0',\n        pill: 'bg-background-muted p-1 gap-1',\n      },\n      fitted: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'line',\n      fitted: false,\n    },\n  }\n)\n\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  /** Indicator color for line variant */\n  color?: 'default' | 'primary'\n  /** Top border-radius for enclosed variant, container radius for pill variant */\n  radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, variant, size, fitted, color, radius, ...props }, ref) => {\n  const resolvedVariant = variant || 'line'\n  return (\n    <TabsStyleContext.Provider value={{ variant: resolvedVariant, size: size || 'default', fitted: fitted ?? false, color: color || 'default', radius: radius || 'md' }}>\n      <TabsPrimitive.List\n        ref={ref}\n        className={cn(\n          tabsListVariants({ variant, fitted }),\n          resolvedVariant === 'pill' && pillListRadiusClasses[radius || 'md'],\n          className\n        )}\n        {...props}\n      />\n    </TabsStyleContext.Provider>\n  )\n})\nTabsList.displayName = 'TabsList'\n\n// ─── TabsTrigger ─────────────────────────────────────────────\n\nconst tabsTriggerVariants = cva(\n  [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n    'transition-all duration-micro ease-out cursor-pointer',\n    // Keyboard-only focus ring: see pointer tracking in TabsTrigger\n    '[&:focus-visible:not([data-pointer-focus])]:focus-ring',\n    'disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        line: [\n          'border-b-2 border-transparent -mb-px',\n          'hover:text-foreground hover:border-border',\n          'data-[state=active]:text-foreground data-[state=active]:font-semibold',\n        ].join(' '),\n        enclosed: [\n          'border border-transparent -mb-px',\n          'hover:text-foreground',\n          'data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background',\n          'data-[state=active]:border-border data-[state=active]:border-b-background',\n        ].join(' '),\n        pill: [\n          'hover:text-foreground',\n          'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm',\n        ].join(' '),\n      },\n      size: {\n        sm: 'h-8 text-sm',       // 32px, 13px\n        md: 'h-9 text-sm',       // 36px, 13px\n        default: 'h-10 text-md', // 40px, 14px\n        lg: 'h-12 text-base',    // 48px, 16px\n      },\n      fitted: {\n        true: 'flex-1',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      // Padding per variant × size\n      { variant: 'line', size: 'sm', className: 'px-3' },\n      { variant: 'line', size: 'md', className: 'px-3.5' },\n      { variant: 'line', size: 'default', className: 'px-4' },\n      { variant: 'line', size: 'lg', className: 'px-6' },\n      { variant: 'enclosed', size: 'sm', className: 'px-3' },\n      { variant: 'enclosed', size: 'md', className: 'px-3.5' },\n      { variant: 'enclosed', size: 'default', className: 'px-4' },\n      { variant: 'enclosed', size: 'lg', className: 'px-6' },\n      // Pill: reduced height + Segmented-matching font/padding\n      { variant: 'pill', size: 'sm', className: 'h-6 text-xs px-3.5' },\n      { variant: 'pill', size: 'md', className: 'h-7 text-sm px-3.5' },\n      { variant: 'pill', size: 'default', className: 'h-8 text-sm px-4' },\n      { variant: 'pill', size: 'lg', className: 'h-10 text-md px-6' },\n    ],\n    defaultVariants: {\n      variant: 'line',\n      size: 'default',\n      fitted: false,\n    },\n  }\n)\n\n// Icon size mapping for tabs (same as Button icon+text pattern)\nconst triggerIconSizeClasses = {\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n} as const\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {}\n\n// Line variant: active indicator color\nconst lineColorClasses = {\n  default: 'data-[state=active]:border-foreground',\n  primary: 'data-[state=active]:border-primary',\n} as const\n\n// Enclosed variant: top border-radius\nconst enclosedRadiusClasses = {\n  none: 'rounded-t-none',\n  sm: 'rounded-t-sm',\n  base: 'rounded-t',\n  md: 'rounded-t-md',\n  lg: 'rounded-t-lg',\n  xl: 'rounded-t-xl',\n} as const\n\n// Pill variant: container radius (applied to TabsList, matches Segmented scale)\nconst pillListRadiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  base: 'rounded',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n} as const\n\n// Pill variant: item radius (one step smaller than container, matches Segmented item scale)\nconst pillItemRadiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  base: 'rounded',\n  md: 'rounded-md',\n  lg: 'rounded-md',\n  xl: 'rounded-lg',\n  '2xl': 'rounded-xl',\n  '3xl': 'rounded-2xl',\n  full: 'rounded-full',\n} as const\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, onPointerDown, onKeyDown, onBlur, ...props }, ref) => {\n  const { variant, size, fitted, color, radius } = useTabsStyleContext()\n  const resolvedSize = size || 'default'\n  // Radix Tabs 1.2+ calls focus() on mouse down, so :focus-visible matches after any\n  // earlier keyboard input. Mark pointer-initiated focus to keep the ring keyboard-only.\n  const [pointerFocus, setPointerFocus] = React.useState(false)\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        tabsTriggerVariants({ variant, size: resolvedSize, fitted }),\n        triggerIconSizeClasses[resolvedSize],\n        variant === 'line' && lineColorClasses[color || 'default'],\n        variant === 'enclosed' && enclosedRadiusClasses[(radius || 'md') as keyof typeof enclosedRadiusClasses],\n        variant === 'pill' && pillItemRadiusClasses[radius || 'md'],\n        className\n      )}\n      data-pointer-focus={pointerFocus ? '' : undefined}\n      onPointerDown={(event) => {\n        setPointerFocus(true)\n        onPointerDown?.(event)\n      }}\n      onKeyDown={(event) => {\n        setPointerFocus(false)\n        onKeyDown?.(event)\n      }}\n      onBlur={(event) => {\n        setPointerFocus(false)\n        onBlur?.(event)\n      }}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Trigger>\n  )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ─── TabsContent ─────────────────────────────────────────────\n\nexport interface TabsContentProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      'mt-4 focus-visible:focus-ring',\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = 'TabsContent'\n\n// ─── Tabs (Root) ─────────────────────────────────────────────\n\nconst Tabs = TabsPrimitive.Root\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  tabsListVariants,\n  tabsTriggerVariants,\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-CTH6SN5Y.mjs

@@ -0,0 +1,114 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/skeleton.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+var PULSE_DURATION_MS = 2e3;
+var WAVE_DURATION_MS = 1800;
+var WAVE_GRADIENT = [
+  "transparent 0%",
+  "transparent 30%",
+  "var(--color-background-elevated) 50%",
+  "transparent 70%",
+  "transparent 100%"
+].join(", ");
+var MULTI_LINE_WIDTHS = ["100%", "92%", "100%", "85%", "75%"];
+var skeletonVariants = cva(
+  "bg-background-muted",
+  {
+    variants: {
+      variant: {
+        text: "rounded-md h-4 w-full",
+        circular: "rounded-full w-10 h-10",
+        rectangular: "rounded-xl w-full h-24"
+      }
+    },
+    defaultVariants: {
+      variant: "text"
+    }
+  }
+);
+var SkeletonBlock = React.forwardRef(
+  ({
+    className,
+    variant = "text",
+    animation = "pulse",
+    width,
+    height,
+    radius,
+    style,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn(
+          skeletonVariants({ variant }),
+          animation === "pulse" && "animate-skeleton-pulse",
+          animation === "wave" && "relative overflow-hidden",
+          className
+        ),
+        style: {
+          ...style,
+          ...width != null ? { width } : {},
+          ...height != null ? { height } : {},
+          ...radius != null ? { borderRadius: radius } : {},
+          ...animation === "pulse" ? { animationDuration: `${PULSE_DURATION_MS}ms` } : {}
+        },
+        ...props
+      },
+      animation === "wave" && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "absolute inset-0 animate-skeleton-wave",
+          style: {
+            animationDuration: `${WAVE_DURATION_MS}ms`,
+            background: `linear-gradient(90deg, ${WAVE_GRADIENT})`
+          }
+        }
+      )
+    );
+  }
+);
+SkeletonBlock.displayName = "SkeletonBlock";
+var Skeleton = React.forwardRef(
+  ({
+    count,
+    loading,
+    children,
+    variant = "text",
+    ...rest
+  }, ref) => {
+    if (loading !== void 0) {
+      if (!loading) return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+    }
+    if (count != null && count > 1 && variant === "text") {
+      return /* @__PURE__ */ React.createElement("div", { ref, className: "space-y-2.5", "aria-hidden": "true" }, Array.from({ length: count }, (_, i) => {
+        const widthPattern = MULTI_LINE_WIDTHS[i % MULTI_LINE_WIDTHS.length];
+        const isLast = i === count - 1;
+        return /* @__PURE__ */ React.createElement(
+          SkeletonBlock,
+          {
+            key: i,
+            variant: "text",
+            style: { width: isLast ? "60%" : widthPattern },
+            ...rest
+          }
+        );
+      }));
+    }
+    return /* @__PURE__ */ React.createElement(SkeletonBlock, { ref, variant, ...rest });
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+export {
+  skeletonVariants,
+  Skeleton
+};
+//# sourceMappingURL=chunk-CTH6SN5Y.mjs.map

package/dist/chunk-CTH6SN5Y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/skeleton.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Pulse animation duration in ms (slower = more premium) */\nconst PULSE_DURATION_MS = 2000\n/** Wave animation duration in ms */\nconst WAVE_DURATION_MS = 1800\n\n/**\n * Wave shimmer gradient — wide sweep with soft edges.\n * 5 gradient stops create a broader, smoother light band.\n */\nconst WAVE_GRADIENT = [\n  'transparent 0%',\n  'transparent 30%',\n  'var(--color-background-elevated) 50%',\n  'transparent 70%',\n  'transparent 100%',\n].join(', ')\n\n/**\n * Multi-line text width pattern.\n * Last line is always shorter for natural appearance.\n */\nconst MULTI_LINE_WIDTHS = ['100%', '92%', '100%', '85%', '75%'] as const\n\n// ============================================================================\n// Variants (CVA)\n// ============================================================================\n\nconst skeletonVariants = cva(\n  'bg-background-muted',\n  {\n    variants: {\n      variant: {\n        text: 'rounded-md h-4 w-full',\n        circular: 'rounded-full w-10 h-10',\n        rectangular: 'rounded-xl w-full h-24',\n      },\n    },\n    defaultVariants: {\n      variant: 'text',\n    },\n  }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface SkeletonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof skeletonVariants> {\n  /** Animation style */\n  animation?: 'pulse' | 'wave' | false\n  /** Custom width */\n  width?: string | number\n  /** Custom height */\n  height?: string | number\n  /** Custom border radius */\n  radius?: string | number\n  /** Number of text lines (text variant only, generates stacked lines) */\n  count?: number\n  /** Conditional loading — true: show skeleton, false: render children */\n  loading?: boolean\n  /** Children to render when loading=false */\n  children?: React.ReactNode\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nconst SkeletonBlock = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, 'count' | 'loading' | 'children'>>(\n  ({\n    className,\n    variant = 'text',\n    animation = 'pulse',\n    width,\n    height,\n    radius,\n    style,\n    ...props\n  }, ref) => {\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(\n          skeletonVariants({ variant }),\n          animation === 'pulse' && 'animate-skeleton-pulse',\n          animation === 'wave' && 'relative overflow-hidden',\n          className,\n        )}\n        style={{\n          ...style,\n          ...(width != null ? { width } : {}),\n          ...(height != null ? { height } : {}),\n          ...(radius != null ? { borderRadius: radius } : {}),\n          ...(animation === 'pulse' ? { animationDuration: `${PULSE_DURATION_MS}ms` } : {}),\n        }}\n        {...props}\n      >\n        {animation === 'wave' && (\n          <div\n            className=\"absolute inset-0 animate-skeleton-wave\"\n            style={{\n              animationDuration: `${WAVE_DURATION_MS}ms`,\n              background: `linear-gradient(90deg, ${WAVE_GRADIENT})`,\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n)\nSkeletonBlock.displayName = 'SkeletonBlock'\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({\n    count,\n    loading,\n    children,\n    variant = 'text',\n    ...rest\n  }, ref) => {\n    // loading mode — show skeleton or children\n    if (loading !== undefined) {\n      if (!loading) return <>{children}</>\n      // When loading, fall through to render skeleton\n    }\n\n    // count mode — render multiple text lines\n    if (count != null && count > 1 && variant === 'text') {\n      return (\n        <div ref={ref} className=\"space-y-2.5\" aria-hidden=\"true\">\n          {Array.from({ length: count }, (_, i) => {\n            const widthPattern = MULTI_LINE_WIDTHS[i % MULTI_LINE_WIDTHS.length]\n            const isLast = i === count - 1\n            return (\n              <SkeletonBlock\n                key={i}\n                variant=\"text\"\n                style={{ width: isLast ? '60%' : widthPattern }}\n                {...rest}\n              />\n            )\n          })}\n        </div>\n      )\n    }\n\n    return <SkeletonBlock ref={ref} variant={variant} {...rest} />\n  }\n)\nSkeleton.displayName = 'Skeleton'\n\nexport { Skeleton, skeletonVariants }\n"],"mappings":";;;;;;AAEA,YAAY,WAAW;AACvB,SAAS,WAA8B;AAQvC,IAAM,oBAAoB;AAE1B,IAAM,mBAAmB;AAMzB,IAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,IAAI;AAMX,IAAM,oBAAoB,CAAC,QAAQ,OAAO,QAAQ,OAAO,KAAK;AAM9D,IAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AA6BA,IAAM,gBAAsB;AAAA,EAC1B,CAAC;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,UACT,iBAAiB,EAAE,QAAQ,CAAC;AAAA,UAC5B,cAAc,WAAW;AAAA,UACzB,cAAc,UAAU;AAAA,UACxB;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAI,SAAS,OAAO,EAAE,MAAM,IAAI,CAAC;AAAA,UACjC,GAAI,UAAU,OAAO,EAAE,OAAO,IAAI,CAAC;AAAA,UACnC,GAAI,UAAU,OAAO,EAAE,cAAc,OAAO,IAAI,CAAC;AAAA,UACjD,GAAI,cAAc,UAAU,EAAE,mBAAmB,GAAG,iBAAiB,KAAK,IAAI,CAAC;AAAA,QACjF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH,cAAc,UACb;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,mBAAmB,GAAG,gBAAgB;AAAA,YACtC,YAAY,0BAA0B,aAAa;AAAA,UACrD;AAAA;AAAA,MACF;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAE5B,IAAM,WAAiB;AAAA,EACrB,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EACL,GAAG,QAAQ;AAET,QAAI,YAAY,QAAW;AACzB,UAAI,CAAC,QAAS,QAAO,0DAAG,QAAS;AAAA,IAEnC;AAGA,QAAI,SAAS,QAAQ,QAAQ,KAAK,YAAY,QAAQ;AACpD,aACE,oCAAC,SAAI,KAAU,WAAU,eAAc,eAAY,UAChD,MAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MAAM;AACvC,cAAM,eAAe,kBAAkB,IAAI,kBAAkB,MAAM;AACnE,cAAM,SAAS,MAAM,QAAQ;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,SAAS,QAAQ,aAAa;AAAA,YAC7C,GAAG;AAAA;AAAA,QACN;AAAA,MAEJ,CAAC,CACH;AAAA,IAEJ;AAEA,WAAO,oCAAC,iBAAc,KAAU,SAAmB,GAAG,MAAM;AAAA,EAC9D;AACF;AACA,SAAS,cAAc;","names":[]}