erp-pro-ui 0.1.7 → 0.1.8

package/dist/chunks/{skeleton-BRx-80dg.mjs.map → skeleton-BdijDxP6.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"skeleton-BRx-80dg.mjs","names":[],"sources":["../../src/components/data-display/skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport type SkeletonVariant = \"text\" | \"circular\" | \"rectangular\" | \"rounded\";\nexport type SkeletonAnimation = \"pulse\" | \"wave\" | \"none\";\nexport type SkeletonTone =\n  | \"default\"\n  | \"subtle\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\nexport type SkeletonRadius = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\nexport type SkeletonSpeed = \"slow\" | \"normal\" | \"fast\";\n\ntype SkeletonCssVariables = CSSProperties &\n  Record<\n    \"--ui-skeleton-base\" | \"--ui-skeleton-highlight\" | \"--ui-skeleton-duration\",\n    string\n  >;\n\nexport interface SkeletonProps extends Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> {\n  /** The variant shape of the skeleton */\n  variant?: SkeletonVariant;\n  /** The animation type */\n  animation?: SkeletonAnimation;\n  /** Width of the skeleton */\n  width?: number | string;\n  /** Height of the skeleton */\n  height?: number | string;\n  /** Border radius override */\n  borderRadius?: number | string;\n  /** Semantic radius preset */\n  radius?: SkeletonRadius;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n  /** Animation speed preset or custom duration */\n  speed?: SkeletonSpeed | number | string;\n  /** Number of lines for text variant */\n  lines?: number;\n  /** Gap between lines */\n  lineGap?: number | string;\n  /** Whether the last line should be shorter */\n  lastLineWidth?: number | string;\n}\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"variant\"> {\n  /** Number of text lines */\n  lines?: number;\n}\n\nexport interface SkeletonAvatarProps extends Omit<\n  SkeletonProps,\n  \"variant\" | \"width\" | \"height\"\n> {\n  /** Size of the avatar */\n  size?: number | string;\n}\n\nexport interface SkeletonCardProps {\n  /** Whether to show image placeholder */\n  showImage?: boolean;\n  /** Image height */\n  imageHeight?: number | string;\n  /** Number of text lines */\n  lines?: number;\n  /** Whether to show avatar */\n  showAvatar?: boolean;\n  /** Whether to show action buttons */\n  showActions?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Animation type */\n  animation?: SkeletonAnimation;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n}\n\nexport interface SkeletonMetricCardProps {\n  /** Whether to show a compact trend badge */\n  showTrend?: boolean;\n  /** Whether to render spark bars */\n  showChart?: boolean;\n  /** Number of spark bars */\n  chartBars?: number;\n  /** Width for the value block */\n  valueWidth?: number | string;\n  /** Custom className */\n  className?: string;\n  /** Animation type */\n  animation?: SkeletonAnimation;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n}\n\nconst animationStyles: Record<SkeletonAnimation, string> = {\n  pulse: \"ui-skeleton-pulse\",\n  wave: \"ui-skeleton-wave\",\n  none: \"\",\n};\n\nconst radiusStyles: Record<SkeletonRadius, string> = {\n  none: \"rounded-none\",\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  full: \"rounded-full\",\n};\n\nconst variantStyles: Record<SkeletonVariant, SkeletonRadius> = {\n  text: \"sm\",\n  circular: \"full\",\n  rectangular: \"none\",\n  rounded: \"md\",\n};\n\nconst speedStyles: Record<SkeletonSpeed, string> = {\n  slow: \"2.4s\",\n  normal: \"1.6s\",\n  fast: \"1.05s\",\n};\n\nconst toneStyles: Record<SkeletonTone, { base: string; highlight: string }> = {\n  default: {\n    base: \"var(--ds-color-bg-ds-surface-3)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 54%, var(--ds-color-bg-canvas))\",\n  },\n  subtle: {\n    base: \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 72%, var(--ds-color-bg-canvas))\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 42%, var(--ds-color-bg-canvas))\",\n  },\n  accent: {\n    base: \"var(--ds-color-accent-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-accent-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  success: {\n    base: \"var(--ds-color-success-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-success-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  warning: {\n    base: \"var(--ds-color-warning-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-warning-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  danger: {\n    base: \"var(--ds-color-danger-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-danger-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  info: {\n    base: \"var(--ds-color-info-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-info-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n};\n\nfunction resolveDimension(value?: number | string): string | undefined {\n  if (typeof value === \"number\") {\n    return `${value}px`;\n  }\n\n  return value;\n}\n\nfunction resolveDuration(value: SkeletonProps[\"speed\"]): string {\n  if (typeof value === \"number\") {\n    return `${value}ms`;\n  }\n\n  if (typeof value === \"string\" && value in speedStyles) {\n    return speedStyles[value as SkeletonSpeed];\n  }\n\n  return value ?? speedStyles.normal;\n}\n\nfunction getDimensionStyle({\n  variant,\n  width,\n  height,\n  borderRadius,\n}: {\n  variant: SkeletonVariant;\n  width?: number | string;\n  height?: number | string;\n  borderRadius?: number | string;\n}): CSSProperties {\n  const nextStyle: CSSProperties = {};\n  const resolvedWidth = resolveDimension(width);\n  const resolvedHeight = resolveDimension(height);\n  const resolvedBorderRadius = resolveDimension(borderRadius);\n\n  if (resolvedWidth) {\n    nextStyle.width = resolvedWidth;\n  } else if (variant === \"text\") {\n    nextStyle.width = \"100%\";\n  }\n\n  if (resolvedHeight) {\n    nextStyle.height = resolvedHeight;\n  } else if (variant === \"text\") {\n    nextStyle.height = \"1em\";\n  } else if (variant === \"circular\") {\n    nextStyle.width = nextStyle.width || \"40px\";\n    nextStyle.height = nextStyle.width;\n  }\n\n  if (resolvedBorderRadius) {\n    nextStyle.borderRadius = resolvedBorderRadius;\n  }\n\n  return nextStyle;\n}\n\n// Base Skeleton Component\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      variant = \"text\",\n      animation = \"pulse\",\n      width,\n      height,\n      borderRadius,\n      radius,\n      tone = \"default\",\n      speed = \"normal\",\n      className,\n      lines = 1,\n      lineGap = 8,\n      lastLineWidth = \"80%\",\n      style,\n      [\"aria-hidden\"]: ariaHidden,\n      ...rest\n    },\n    ref,\n  ) => {\n    const toneStyle = toneStyles[tone];\n    const sharedStyle: SkeletonCssVariables = {\n      \"--ui-skeleton-base\": toneStyle.base,\n      \"--ui-skeleton-highlight\": toneStyle.highlight,\n      \"--ui-skeleton-duration\": resolveDuration(speed),\n      ...style,\n    };\n    const effectiveRadius = radius ?? variantStyles[variant];\n    const sharedClassName = mergeClassNames(\n      \"relative overflow-hidden bg-[var(--ui-skeleton-base)] pointer-events-none select-none shrink-0\",\n      radiusStyles[effectiveRadius],\n      animationStyles[animation],\n    );\n\n    if (variant === \"text\" && lines > 1) {\n      return (\n        <div\n          ref={ref}\n          className={mergeClassNames(\"flex flex-col\", className)}\n          style={{\n            ...style,\n            gap: resolveDimension(lineGap),\n            width: resolveDimension(width) ?? style?.width,\n          }}\n          aria-hidden={ariaHidden ?? true}\n          data-animation={animation}\n          data-tone={tone}\n          {...rest}\n        >\n          {Array.from({ length: lines }).map((_, index) => (\n            <div\n              key={index}\n              className={sharedClassName}\n              style={{\n                ...sharedStyle,\n                ...getDimensionStyle({\n                  variant,\n                  width:\n                    index === lines - 1 ? lastLineWidth : (width ?? \"100%\"),\n                  height,\n                  borderRadius,\n                }),\n              }}\n            />\n          ))}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(sharedClassName, className)}\n        style={{\n          ...sharedStyle,\n          ...getDimensionStyle({ variant, width, height, borderRadius }),\n        }}\n        aria-hidden={ariaHidden ?? true}\n        data-animation={animation}\n        data-tone={tone}\n        {...rest}\n      />\n    );\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n\n// Skeleton Text Component\nconst SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  ({ lines = 3, ...props }, ref) => {\n    return <Skeleton ref={ref} variant=\"text\" lines={lines} {...props} />;\n  },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n\n// Skeleton Avatar Component\nconst SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  ({ size = 40, animation = \"pulse\", className = \"\", ...props }, ref) => {\n    const sizeValue = typeof size === \"number\" ? `${size}px` : size;\n\n    return (\n      <Skeleton\n        ref={ref}\n        variant=\"circular\"\n        width={sizeValue}\n        height={sizeValue}\n        animation={animation}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonAvatar.displayName = \"SkeletonAvatar\";\n\n// Skeleton Button Component\nconst SkeletonButton = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, \"variant\"> & { size?: \"sm\" | \"md\" | \"lg\" }\n>(({ size = \"md\", animation = \"pulse\", className = \"\", ...props }, ref) => {\n  const sizeStyles = {\n    sm: { width: 80, height: 32 },\n    md: { width: 100, height: 40 },\n    lg: { width: 120, height: 48 },\n  };\n\n  return (\n    <Skeleton\n      ref={ref}\n      variant=\"rounded\"\n      width={sizeStyles[size].width}\n      height={sizeStyles[size].height}\n      animation={animation}\n      className={className}\n      {...props}\n    />\n  );\n});\n\nSkeletonButton.displayName = \"SkeletonButton\";\n\n// Skeleton Image Component\nconst SkeletonImage = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, \"variant\">\n>(\n  (\n    {\n      width = \"100%\",\n      height = 200,\n      animation = \"pulse\",\n      className = \"\",\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Skeleton\n        ref={ref}\n        variant=\"rounded\"\n        width={width}\n        height={height}\n        animation={animation}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonImage.displayName = \"SkeletonImage\";\n\n// Skeleton Card Component\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      showImage = true,\n      imageHeight = 200,\n      lines = 3,\n      showAvatar = false,\n      showActions = false,\n      className,\n      animation = \"pulse\",\n      tone = \"default\",\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(\n          \"overflow-hidden rounded-md border border-ds-border-2 bg-ds-surface-1 shadow-sm\",\n          className,\n        )}\n      >\n        {showImage && (\n          <SkeletonImage\n            height={imageHeight}\n            animation={animation}\n            borderRadius={0}\n            tone={tone}\n          />\n        )}\n\n        <div className=\"p-4 flex flex-col gap-4\">\n          {showAvatar && (\n            <div className=\"flex items-center gap-3\">\n              <SkeletonAvatar size={40} animation={animation} tone={tone} />\n              <div className=\"flex-1\">\n                <Skeleton\n                  variant=\"text\"\n                  width=\"60%\"\n                  height={14}\n                  animation={animation}\n                  tone={tone}\n                />\n                <Skeleton\n                  variant=\"text\"\n                  width=\"40%\"\n                  height={12}\n                  animation={animation}\n                  tone={tone}\n                  className=\"mt-2\"\n                />\n              </div>\n            </div>\n          )}\n\n          <SkeletonText\n            lines={lines}\n            animation={animation}\n            height={14}\n            lineGap={10}\n            tone={tone}\n          />\n\n          {showActions && (\n            <div className=\"flex gap-3 mt-2\">\n              <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n              <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nSkeletonCard.displayName = \"SkeletonCard\";\n\n// Skeleton Metric Card Component\nconst SkeletonMetricCard = forwardRef<HTMLDivElement, SkeletonMetricCardProps>(\n  (\n    {\n      showTrend = true,\n      showChart = true,\n      chartBars = 7,\n      valueWidth = \"52%\",\n      className,\n      animation = \"wave\",\n      tone = \"accent\",\n    },\n    ref,\n  ) => {\n    const chartHeights = [36, 52, 46, 72, 64, 84, 68, 78];\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(\n          \"rounded-md border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm\",\n          className,\n        )}\n      >\n        <div className=\"flex items-start justify-between gap-4\">\n          <div className=\"min-w-0 flex-1 space-y-3\">\n            <Skeleton\n              width=\"34%\"\n              height={11}\n              animation={animation}\n              tone=\"subtle\"\n            />\n            <Skeleton\n              width={valueWidth}\n              height={28}\n              animation={animation}\n              tone={tone}\n              radius=\"md\"\n            />\n            <Skeleton\n              width=\"44%\"\n              height={12}\n              animation={animation}\n              tone=\"subtle\"\n            />\n          </div>\n\n          {showTrend ? (\n            <div className=\"rounded-full border border-ds-border-2 bg-ds-surface-1 px-3 py-2\">\n              <Skeleton\n                width={54}\n                height={12}\n                animation={animation}\n                tone=\"subtle\"\n              />\n            </div>\n          ) : null}\n        </div>\n\n        {showChart ? (\n          <div className=\"mt-5 flex h-20 items-end gap-2\">\n            {Array.from({ length: chartBars }).map((_, index) => (\n              <Skeleton\n                key={index}\n                variant=\"rounded\"\n                width=\"100%\"\n                height={`${chartHeights[index % chartHeights.length]}%`}\n                animation={animation}\n                tone={tone}\n                className=\"flex-1\"\n              />\n            ))}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nSkeletonMetricCard.displayName = \"SkeletonMetricCard\";\n\n// Skeleton Table Row Component\nconst SkeletonTableRow = forwardRef<\n  HTMLDivElement,\n  { columns?: number; animation?: SkeletonAnimation; className?: string }\n>(({ columns = 4, animation = \"pulse\", className = \"\" }, ref) => {\n  const sharedWidth =\n    columns <= 1 ? \"100%\" : `${Math.floor(72 / (columns - 1))}%`;\n\n  return (\n    <div ref={ref} className={`flex items-center gap-4 py-3 ${className}`}>\n      {Array.from({ length: columns }).map((_, index) => (\n        <Skeleton\n          key={index}\n          variant=\"text\"\n          width={index === 0 ? \"28%\" : sharedWidth}\n          height={16}\n          animation={animation}\n        />\n      ))}\n    </div>\n  );\n});\n\nSkeletonTableRow.displayName = \"SkeletonTableRow\";\n\n// Skeleton List Item Component\nconst SkeletonListItem = forwardRef<\n  HTMLDivElement,\n  {\n    showAvatar?: boolean;\n    showSecondaryText?: boolean;\n    showAction?: boolean;\n    animation?: SkeletonAnimation;\n    className?: string;\n  }\n>(\n  (\n    {\n      showAvatar = true,\n      showSecondaryText = true,\n      showAction = false,\n      animation = \"pulse\",\n      className = \"\",\n    },\n    ref,\n  ) => {\n    return (\n      <div ref={ref} className={`flex items-center gap-3 py-3 ${className}`}>\n        {showAvatar && <SkeletonAvatar size={48} animation={animation} />}\n        <div className=\"flex-1\">\n          <Skeleton\n            variant=\"text\"\n            width=\"70%\"\n            height={16}\n            animation={animation}\n          />\n          {showSecondaryText && (\n            <Skeleton\n              variant=\"text\"\n              width=\"50%\"\n              height={14}\n              animation={animation}\n              className=\"mt-2\"\n            />\n          )}\n        </div>\n        {showAction && <SkeletonButton size=\"sm\" animation={animation} />}\n      </div>\n    );\n  },\n);\n\nSkeletonListItem.displayName = \"SkeletonListItem\";\n\nexport default Skeleton;\nexport {\n  Skeleton,\n  SkeletonText,\n  SkeletonAvatar,\n  SkeletonButton,\n  SkeletonImage,\n  SkeletonCard,\n  SkeletonMetricCard,\n  SkeletonTableRow,\n  SkeletonListItem,\n};\n"],"mappings":"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"}
+{"version":3,"file":"skeleton-BdijDxP6.mjs","names":[],"sources":["../../src/components/data-display/skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport type SkeletonVariant = \"text\" | \"circular\" | \"rectangular\" | \"rounded\";\nexport type SkeletonAnimation = \"pulse\" | \"wave\" | \"none\";\nexport type SkeletonTone =\n  | \"default\"\n  | \"subtle\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\nexport type SkeletonRadius = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\nexport type SkeletonSpeed = \"slow\" | \"normal\" | \"fast\";\n\ntype SkeletonCssVariables = CSSProperties &\n  Record<\n    \"--ui-skeleton-base\" | \"--ui-skeleton-highlight\" | \"--ui-skeleton-duration\",\n    string\n  >;\n\nexport interface SkeletonProps extends Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> {\n  /** The variant shape of the skeleton */\n  variant?: SkeletonVariant;\n  /** The animation type */\n  animation?: SkeletonAnimation;\n  /** Width of the skeleton */\n  width?: number | string;\n  /** Height of the skeleton */\n  height?: number | string;\n  /** Border radius override */\n  borderRadius?: number | string;\n  /** Semantic radius preset */\n  radius?: SkeletonRadius;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n  /** Animation speed preset or custom duration */\n  speed?: SkeletonSpeed | number | string;\n  /** Number of lines for text variant */\n  lines?: number;\n  /** Gap between lines */\n  lineGap?: number | string;\n  /** Whether the last line should be shorter */\n  lastLineWidth?: number | string;\n}\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"variant\"> {\n  /** Number of text lines */\n  lines?: number;\n}\n\nexport interface SkeletonAvatarProps extends Omit<\n  SkeletonProps,\n  \"variant\" | \"width\" | \"height\"\n> {\n  /** Size of the avatar */\n  size?: number | string;\n}\n\nexport interface SkeletonCardProps {\n  /** Whether to show image placeholder */\n  showImage?: boolean;\n  /** Image height */\n  imageHeight?: number | string;\n  /** Number of text lines */\n  lines?: number;\n  /** Whether to show avatar */\n  showAvatar?: boolean;\n  /** Whether to show action buttons */\n  showActions?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Animation type */\n  animation?: SkeletonAnimation;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n}\n\nexport interface SkeletonMetricCardProps {\n  /** Whether to show a compact trend badge */\n  showTrend?: boolean;\n  /** Whether to render spark bars */\n  showChart?: boolean;\n  /** Number of spark bars */\n  chartBars?: number;\n  /** Width for the value block */\n  valueWidth?: number | string;\n  /** Custom className */\n  className?: string;\n  /** Animation type */\n  animation?: SkeletonAnimation;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n}\n\nconst animationStyles: Record<SkeletonAnimation, string> = {\n  pulse: \"ui-skeleton-pulse\",\n  wave: \"ui-skeleton-wave\",\n  none: \"\",\n};\n\nconst radiusStyles: Record<SkeletonRadius, string> = {\n  none: \"rounded-none\",\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  full: \"rounded-full\",\n};\n\nconst variantStyles: Record<SkeletonVariant, SkeletonRadius> = {\n  text: \"sm\",\n  circular: \"full\",\n  rectangular: \"none\",\n  rounded: \"md\",\n};\n\nconst speedStyles: Record<SkeletonSpeed, string> = {\n  slow: \"2.4s\",\n  normal: \"1.6s\",\n  fast: \"1.05s\",\n};\n\nconst toneStyles: Record<SkeletonTone, { base: string; highlight: string }> = {\n  default: {\n    base: \"var(--ds-color-bg-ds-surface-3)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 54%, var(--ds-color-bg-canvas))\",\n  },\n  subtle: {\n    base: \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 72%, var(--ds-color-bg-canvas))\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 42%, var(--ds-color-bg-canvas))\",\n  },\n  accent: {\n    base: \"var(--ds-color-accent-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-accent-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  success: {\n    base: \"var(--ds-color-success-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-success-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  warning: {\n    base: \"var(--ds-color-warning-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-warning-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  danger: {\n    base: \"var(--ds-color-danger-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-danger-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  info: {\n    base: \"var(--ds-color-info-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-info-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n};\n\nfunction resolveDimension(value?: number | string): string | undefined {\n  if (typeof value === \"number\") {\n    return `${value}px`;\n  }\n\n  return value;\n}\n\nfunction resolveDuration(value: SkeletonProps[\"speed\"]): string {\n  if (typeof value === \"number\") {\n    return `${value}ms`;\n  }\n\n  if (typeof value === \"string\" && value in speedStyles) {\n    return speedStyles[value as SkeletonSpeed];\n  }\n\n  return value ?? speedStyles.normal;\n}\n\nfunction getDimensionStyle({\n  variant,\n  width,\n  height,\n  borderRadius,\n}: {\n  variant: SkeletonVariant;\n  width?: number | string;\n  height?: number | string;\n  borderRadius?: number | string;\n}): CSSProperties {\n  const nextStyle: CSSProperties = {};\n  const resolvedWidth = resolveDimension(width);\n  const resolvedHeight = resolveDimension(height);\n  const resolvedBorderRadius = resolveDimension(borderRadius);\n\n  if (resolvedWidth) {\n    nextStyle.width = resolvedWidth;\n  } else if (variant === \"text\") {\n    nextStyle.width = \"100%\";\n  }\n\n  if (resolvedHeight) {\n    nextStyle.height = resolvedHeight;\n  } else if (variant === \"text\") {\n    nextStyle.height = \"1em\";\n  } else if (variant === \"circular\") {\n    nextStyle.width = nextStyle.width || \"40px\";\n    nextStyle.height = nextStyle.width;\n  }\n\n  if (resolvedBorderRadius) {\n    nextStyle.borderRadius = resolvedBorderRadius;\n  }\n\n  return nextStyle;\n}\n\n// Base Skeleton Component\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      variant = \"text\",\n      animation = \"pulse\",\n      width,\n      height,\n      borderRadius,\n      radius,\n      tone = \"default\",\n      speed = \"normal\",\n      className,\n      lines = 1,\n      lineGap = 8,\n      lastLineWidth = \"80%\",\n      style,\n      [\"aria-hidden\"]: ariaHidden,\n      ...rest\n    },\n    ref,\n  ) => {\n    const toneStyle = toneStyles[tone];\n    const sharedStyle: SkeletonCssVariables = {\n      \"--ui-skeleton-base\": toneStyle.base,\n      \"--ui-skeleton-highlight\": toneStyle.highlight,\n      \"--ui-skeleton-duration\": resolveDuration(speed),\n      ...style,\n    };\n    const effectiveRadius = radius ?? variantStyles[variant];\n    const sharedClassName = mergeClassNames(\n      \"relative overflow-hidden bg-[var(--ui-skeleton-base)] pointer-events-none select-none shrink-0\",\n      radiusStyles[effectiveRadius],\n      animationStyles[animation],\n    );\n\n    if (variant === \"text\" && lines > 1) {\n      return (\n        <div\n          ref={ref}\n          className={mergeClassNames(\"flex flex-col\", className)}\n          style={{\n            ...style,\n            gap: resolveDimension(lineGap),\n            width: resolveDimension(width) ?? style?.width,\n          }}\n          aria-hidden={ariaHidden ?? true}\n          data-animation={animation}\n          data-tone={tone}\n          {...rest}\n        >\n          {Array.from({ length: lines }).map((_, index) => (\n            <div\n              key={index}\n              className={sharedClassName}\n              style={{\n                ...sharedStyle,\n                ...getDimensionStyle({\n                  variant,\n                  width:\n                    index === lines - 1 ? lastLineWidth : (width ?? \"100%\"),\n                  height,\n                  borderRadius,\n                }),\n              }}\n            />\n          ))}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(sharedClassName, className)}\n        style={{\n          ...sharedStyle,\n          ...getDimensionStyle({ variant, width, height, borderRadius }),\n        }}\n        aria-hidden={ariaHidden ?? true}\n        data-animation={animation}\n        data-tone={tone}\n        {...rest}\n      />\n    );\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n\n// Skeleton Text Component\nconst SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  ({ lines = 3, ...props }, ref) => {\n    return <Skeleton ref={ref} variant=\"text\" lines={lines} {...props} />;\n  },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n\n// Skeleton Avatar Component\nconst SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  ({ size = 40, animation = \"pulse\", className = \"\", ...props }, ref) => {\n    const sizeValue = typeof size === \"number\" ? `${size}px` : size;\n\n    return (\n      <Skeleton\n        ref={ref}\n        variant=\"circular\"\n        width={sizeValue}\n        height={sizeValue}\n        animation={animation}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonAvatar.displayName = \"SkeletonAvatar\";\n\n// Skeleton Button Component\nconst SkeletonButton = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, \"variant\"> & { size?: \"sm\" | \"md\" | \"lg\" }\n>(({ size = \"md\", animation = \"pulse\", className = \"\", ...props }, ref) => {\n  const sizeStyles = {\n    sm: { width: 80, height: 32 },\n    md: { width: 100, height: 40 },\n    lg: { width: 120, height: 48 },\n  };\n\n  return (\n    <Skeleton\n      ref={ref}\n      variant=\"rounded\"\n      width={sizeStyles[size].width}\n      height={sizeStyles[size].height}\n      animation={animation}\n      className={className}\n      {...props}\n    />\n  );\n});\n\nSkeletonButton.displayName = \"SkeletonButton\";\n\n// Skeleton Image Component\nconst SkeletonImage = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, \"variant\">\n>(\n  (\n    {\n      width = \"100%\",\n      height = 200,\n      animation = \"pulse\",\n      className = \"\",\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Skeleton\n        ref={ref}\n        variant=\"rounded\"\n        width={width}\n        height={height}\n        animation={animation}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonImage.displayName = \"SkeletonImage\";\n\n// Skeleton Card Component\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      showImage = true,\n      imageHeight = 200,\n      lines = 3,\n      showAvatar = false,\n      showActions = false,\n      className,\n      animation = \"pulse\",\n      tone = \"default\",\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(\n          \"overflow-hidden rounded-md border border-ds-border-2 bg-ds-surface-1 shadow-sm\",\n          className,\n        )}\n      >\n        {showImage && (\n          <SkeletonImage\n            height={imageHeight}\n            animation={animation}\n            borderRadius={0}\n            tone={tone}\n          />\n        )}\n\n        <div className=\"p-4 flex flex-col gap-4\">\n          {showAvatar && (\n            <div className=\"flex items-center gap-3\">\n              <SkeletonAvatar size={40} animation={animation} tone={tone} />\n              <div className=\"flex-1\">\n                <Skeleton\n                  variant=\"text\"\n                  width=\"60%\"\n                  height={14}\n                  animation={animation}\n                  tone={tone}\n                />\n                <Skeleton\n                  variant=\"text\"\n                  width=\"40%\"\n                  height={12}\n                  animation={animation}\n                  tone={tone}\n                  className=\"mt-2\"\n                />\n              </div>\n            </div>\n          )}\n\n          <SkeletonText\n            lines={lines}\n            animation={animation}\n            height={14}\n            lineGap={10}\n            tone={tone}\n          />\n\n          {showActions && (\n            <div className=\"flex gap-3 mt-2\">\n              <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n              <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nSkeletonCard.displayName = \"SkeletonCard\";\n\n// Skeleton Metric Card Component\nconst SkeletonMetricCard = forwardRef<HTMLDivElement, SkeletonMetricCardProps>(\n  (\n    {\n      showTrend = true,\n      showChart = true,\n      chartBars = 7,\n      valueWidth = \"52%\",\n      className,\n      animation = \"wave\",\n      tone = \"accent\",\n    },\n    ref,\n  ) => {\n    const chartHeights = [36, 52, 46, 72, 64, 84, 68, 78];\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(\n          \"rounded-md border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm\",\n          className,\n        )}\n      >\n        <div className=\"flex items-start justify-between gap-4\">\n          <div className=\"min-w-0 flex-1 space-y-3\">\n            <Skeleton\n              width=\"34%\"\n              height={11}\n              animation={animation}\n              tone=\"subtle\"\n            />\n            <Skeleton\n              width={valueWidth}\n              height={28}\n              animation={animation}\n              tone={tone}\n              radius=\"md\"\n            />\n            <Skeleton\n              width=\"44%\"\n              height={12}\n              animation={animation}\n              tone=\"subtle\"\n            />\n          </div>\n\n          {showTrend ? (\n            <div className=\"rounded-full border border-ds-border-2 bg-ds-surface-1 px-3 py-2\">\n              <Skeleton\n                width={54}\n                height={12}\n                animation={animation}\n                tone=\"subtle\"\n              />\n            </div>\n          ) : null}\n        </div>\n\n        {showChart ? (\n          <div className=\"mt-5 flex h-20 items-end gap-2\">\n            {Array.from({ length: chartBars }).map((_, index) => (\n              <Skeleton\n                key={index}\n                variant=\"rounded\"\n                width=\"100%\"\n                height={`${chartHeights[index % chartHeights.length]}%`}\n                animation={animation}\n                tone={tone}\n                className=\"flex-1\"\n              />\n            ))}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nSkeletonMetricCard.displayName = \"SkeletonMetricCard\";\n\n// Skeleton Table Row Component\nconst SkeletonTableRow = forwardRef<\n  HTMLDivElement,\n  { columns?: number; animation?: SkeletonAnimation; className?: string }\n>(({ columns = 4, animation = \"pulse\", className = \"\" }, ref) => {\n  const sharedWidth =\n    columns <= 1 ? \"100%\" : `${Math.floor(72 / (columns - 1))}%`;\n\n  return (\n    <div ref={ref} className={`flex items-center gap-4 py-3 ${className}`}>\n      {Array.from({ length: columns }).map((_, index) => (\n        <Skeleton\n          key={index}\n          variant=\"text\"\n          width={index === 0 ? \"28%\" : sharedWidth}\n          height={16}\n          animation={animation}\n        />\n      ))}\n    </div>\n  );\n});\n\nSkeletonTableRow.displayName = \"SkeletonTableRow\";\n\n// Skeleton List Item Component\nconst SkeletonListItem = forwardRef<\n  HTMLDivElement,\n  {\n    showAvatar?: boolean;\n    showSecondaryText?: boolean;\n    showAction?: boolean;\n    animation?: SkeletonAnimation;\n    className?: string;\n  }\n>(\n  (\n    {\n      showAvatar = true,\n      showSecondaryText = true,\n      showAction = false,\n      animation = \"pulse\",\n      className = \"\",\n    },\n    ref,\n  ) => {\n    return (\n      <div ref={ref} className={`flex items-center gap-3 py-3 ${className}`}>\n        {showAvatar && <SkeletonAvatar size={48} animation={animation} />}\n        <div className=\"flex-1\">\n          <Skeleton\n            variant=\"text\"\n            width=\"70%\"\n            height={16}\n            animation={animation}\n          />\n          {showSecondaryText && (\n            <Skeleton\n              variant=\"text\"\n              width=\"50%\"\n              height={14}\n              animation={animation}\n              className=\"mt-2\"\n            />\n          )}\n        </div>\n        {showAction && <SkeletonButton size=\"sm\" animation={animation} />}\n      </div>\n    );\n  },\n);\n\nSkeletonListItem.displayName = \"SkeletonListItem\";\n\nexport default Skeleton;\nexport {\n  Skeleton,\n  SkeletonText,\n  SkeletonAvatar,\n  SkeletonButton,\n  SkeletonImage,\n  SkeletonCard,\n  SkeletonMetricCard,\n  SkeletonTableRow,\n  SkeletonListItem,\n};\n"],"mappings":"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"}

package/dist/chunks/{skeleton-o7DlA5yl.cjs → skeleton-wQOE-pRg.cjs}

@@ -419,4 +419,4 @@ Object.defineProperty(exports, "SkeletonText", {
 	}
 });
 
-//# sourceMappingURL=skeleton-o7DlA5yl.cjs.map
+//# sourceMappingURL=skeleton-wQOE-pRg.cjs.map

package/dist/chunks/{skeleton-o7DlA5yl.cjs.map → skeleton-wQOE-pRg.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"skeleton-o7DlA5yl.cjs","names":[],"sources":["../../src/components/data-display/skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport type SkeletonVariant = \"text\" | \"circular\" | \"rectangular\" | \"rounded\";\nexport type SkeletonAnimation = \"pulse\" | \"wave\" | \"none\";\nexport type SkeletonTone =\n  | \"default\"\n  | \"subtle\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\nexport type SkeletonRadius = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\nexport type SkeletonSpeed = \"slow\" | \"normal\" | \"fast\";\n\ntype SkeletonCssVariables = CSSProperties &\n  Record<\n    \"--ui-skeleton-base\" | \"--ui-skeleton-highlight\" | \"--ui-skeleton-duration\",\n    string\n  >;\n\nexport interface SkeletonProps extends Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> {\n  /** The variant shape of the skeleton */\n  variant?: SkeletonVariant;\n  /** The animation type */\n  animation?: SkeletonAnimation;\n  /** Width of the skeleton */\n  width?: number | string;\n  /** Height of the skeleton */\n  height?: number | string;\n  /** Border radius override */\n  borderRadius?: number | string;\n  /** Semantic radius preset */\n  radius?: SkeletonRadius;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n  /** Animation speed preset or custom duration */\n  speed?: SkeletonSpeed | number | string;\n  /** Number of lines for text variant */\n  lines?: number;\n  /** Gap between lines */\n  lineGap?: number | string;\n  /** Whether the last line should be shorter */\n  lastLineWidth?: number | string;\n}\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"variant\"> {\n  /** Number of text lines */\n  lines?: number;\n}\n\nexport interface SkeletonAvatarProps extends Omit<\n  SkeletonProps,\n  \"variant\" | \"width\" | \"height\"\n> {\n  /** Size of the avatar */\n  size?: number | string;\n}\n\nexport interface SkeletonCardProps {\n  /** Whether to show image placeholder */\n  showImage?: boolean;\n  /** Image height */\n  imageHeight?: number | string;\n  /** Number of text lines */\n  lines?: number;\n  /** Whether to show avatar */\n  showAvatar?: boolean;\n  /** Whether to show action buttons */\n  showActions?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Animation type */\n  animation?: SkeletonAnimation;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n}\n\nexport interface SkeletonMetricCardProps {\n  /** Whether to show a compact trend badge */\n  showTrend?: boolean;\n  /** Whether to render spark bars */\n  showChart?: boolean;\n  /** Number of spark bars */\n  chartBars?: number;\n  /** Width for the value block */\n  valueWidth?: number | string;\n  /** Custom className */\n  className?: string;\n  /** Animation type */\n  animation?: SkeletonAnimation;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n}\n\nconst animationStyles: Record<SkeletonAnimation, string> = {\n  pulse: \"ui-skeleton-pulse\",\n  wave: \"ui-skeleton-wave\",\n  none: \"\",\n};\n\nconst radiusStyles: Record<SkeletonRadius, string> = {\n  none: \"rounded-none\",\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  full: \"rounded-full\",\n};\n\nconst variantStyles: Record<SkeletonVariant, SkeletonRadius> = {\n  text: \"sm\",\n  circular: \"full\",\n  rectangular: \"none\",\n  rounded: \"md\",\n};\n\nconst speedStyles: Record<SkeletonSpeed, string> = {\n  slow: \"2.4s\",\n  normal: \"1.6s\",\n  fast: \"1.05s\",\n};\n\nconst toneStyles: Record<SkeletonTone, { base: string; highlight: string }> = {\n  default: {\n    base: \"var(--ds-color-bg-ds-surface-3)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 54%, var(--ds-color-bg-canvas))\",\n  },\n  subtle: {\n    base: \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 72%, var(--ds-color-bg-canvas))\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 42%, var(--ds-color-bg-canvas))\",\n  },\n  accent: {\n    base: \"var(--ds-color-accent-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-accent-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  success: {\n    base: \"var(--ds-color-success-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-success-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  warning: {\n    base: \"var(--ds-color-warning-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-warning-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  danger: {\n    base: \"var(--ds-color-danger-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-danger-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  info: {\n    base: \"var(--ds-color-info-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-info-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n};\n\nfunction resolveDimension(value?: number | string): string | undefined {\n  if (typeof value === \"number\") {\n    return `${value}px`;\n  }\n\n  return value;\n}\n\nfunction resolveDuration(value: SkeletonProps[\"speed\"]): string {\n  if (typeof value === \"number\") {\n    return `${value}ms`;\n  }\n\n  if (typeof value === \"string\" && value in speedStyles) {\n    return speedStyles[value as SkeletonSpeed];\n  }\n\n  return value ?? speedStyles.normal;\n}\n\nfunction getDimensionStyle({\n  variant,\n  width,\n  height,\n  borderRadius,\n}: {\n  variant: SkeletonVariant;\n  width?: number | string;\n  height?: number | string;\n  borderRadius?: number | string;\n}): CSSProperties {\n  const nextStyle: CSSProperties = {};\n  const resolvedWidth = resolveDimension(width);\n  const resolvedHeight = resolveDimension(height);\n  const resolvedBorderRadius = resolveDimension(borderRadius);\n\n  if (resolvedWidth) {\n    nextStyle.width = resolvedWidth;\n  } else if (variant === \"text\") {\n    nextStyle.width = \"100%\";\n  }\n\n  if (resolvedHeight) {\n    nextStyle.height = resolvedHeight;\n  } else if (variant === \"text\") {\n    nextStyle.height = \"1em\";\n  } else if (variant === \"circular\") {\n    nextStyle.width = nextStyle.width || \"40px\";\n    nextStyle.height = nextStyle.width;\n  }\n\n  if (resolvedBorderRadius) {\n    nextStyle.borderRadius = resolvedBorderRadius;\n  }\n\n  return nextStyle;\n}\n\n// Base Skeleton Component\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      variant = \"text\",\n      animation = \"pulse\",\n      width,\n      height,\n      borderRadius,\n      radius,\n      tone = \"default\",\n      speed = \"normal\",\n      className,\n      lines = 1,\n      lineGap = 8,\n      lastLineWidth = \"80%\",\n      style,\n      [\"aria-hidden\"]: ariaHidden,\n      ...rest\n    },\n    ref,\n  ) => {\n    const toneStyle = toneStyles[tone];\n    const sharedStyle: SkeletonCssVariables = {\n      \"--ui-skeleton-base\": toneStyle.base,\n      \"--ui-skeleton-highlight\": toneStyle.highlight,\n      \"--ui-skeleton-duration\": resolveDuration(speed),\n      ...style,\n    };\n    const effectiveRadius = radius ?? variantStyles[variant];\n    const sharedClassName = mergeClassNames(\n      \"relative overflow-hidden bg-[var(--ui-skeleton-base)] pointer-events-none select-none shrink-0\",\n      radiusStyles[effectiveRadius],\n      animationStyles[animation],\n    );\n\n    if (variant === \"text\" && lines > 1) {\n      return (\n        <div\n          ref={ref}\n          className={mergeClassNames(\"flex flex-col\", className)}\n          style={{\n            ...style,\n            gap: resolveDimension(lineGap),\n            width: resolveDimension(width) ?? style?.width,\n          }}\n          aria-hidden={ariaHidden ?? true}\n          data-animation={animation}\n          data-tone={tone}\n          {...rest}\n        >\n          {Array.from({ length: lines }).map((_, index) => (\n            <div\n              key={index}\n              className={sharedClassName}\n              style={{\n                ...sharedStyle,\n                ...getDimensionStyle({\n                  variant,\n                  width:\n                    index === lines - 1 ? lastLineWidth : (width ?? \"100%\"),\n                  height,\n                  borderRadius,\n                }),\n              }}\n            />\n          ))}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(sharedClassName, className)}\n        style={{\n          ...sharedStyle,\n          ...getDimensionStyle({ variant, width, height, borderRadius }),\n        }}\n        aria-hidden={ariaHidden ?? true}\n        data-animation={animation}\n        data-tone={tone}\n        {...rest}\n      />\n    );\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n\n// Skeleton Text Component\nconst SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  ({ lines = 3, ...props }, ref) => {\n    return <Skeleton ref={ref} variant=\"text\" lines={lines} {...props} />;\n  },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n\n// Skeleton Avatar Component\nconst SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  ({ size = 40, animation = \"pulse\", className = \"\", ...props }, ref) => {\n    const sizeValue = typeof size === \"number\" ? `${size}px` : size;\n\n    return (\n      <Skeleton\n        ref={ref}\n        variant=\"circular\"\n        width={sizeValue}\n        height={sizeValue}\n        animation={animation}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonAvatar.displayName = \"SkeletonAvatar\";\n\n// Skeleton Button Component\nconst SkeletonButton = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, \"variant\"> & { size?: \"sm\" | \"md\" | \"lg\" }\n>(({ size = \"md\", animation = \"pulse\", className = \"\", ...props }, ref) => {\n  const sizeStyles = {\n    sm: { width: 80, height: 32 },\n    md: { width: 100, height: 40 },\n    lg: { width: 120, height: 48 },\n  };\n\n  return (\n    <Skeleton\n      ref={ref}\n      variant=\"rounded\"\n      width={sizeStyles[size].width}\n      height={sizeStyles[size].height}\n      animation={animation}\n      className={className}\n      {...props}\n    />\n  );\n});\n\nSkeletonButton.displayName = \"SkeletonButton\";\n\n// Skeleton Image Component\nconst SkeletonImage = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, \"variant\">\n>(\n  (\n    {\n      width = \"100%\",\n      height = 200,\n      animation = \"pulse\",\n      className = \"\",\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Skeleton\n        ref={ref}\n        variant=\"rounded\"\n        width={width}\n        height={height}\n        animation={animation}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonImage.displayName = \"SkeletonImage\";\n\n// Skeleton Card Component\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      showImage = true,\n      imageHeight = 200,\n      lines = 3,\n      showAvatar = false,\n      showActions = false,\n      className,\n      animation = \"pulse\",\n      tone = \"default\",\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(\n          \"overflow-hidden rounded-md border border-ds-border-2 bg-ds-surface-1 shadow-sm\",\n          className,\n        )}\n      >\n        {showImage && (\n          <SkeletonImage\n            height={imageHeight}\n            animation={animation}\n            borderRadius={0}\n            tone={tone}\n          />\n        )}\n\n        <div className=\"p-4 flex flex-col gap-4\">\n          {showAvatar && (\n            <div className=\"flex items-center gap-3\">\n              <SkeletonAvatar size={40} animation={animation} tone={tone} />\n              <div className=\"flex-1\">\n                <Skeleton\n                  variant=\"text\"\n                  width=\"60%\"\n                  height={14}\n                  animation={animation}\n                  tone={tone}\n                />\n                <Skeleton\n                  variant=\"text\"\n                  width=\"40%\"\n                  height={12}\n                  animation={animation}\n                  tone={tone}\n                  className=\"mt-2\"\n                />\n              </div>\n            </div>\n          )}\n\n          <SkeletonText\n            lines={lines}\n            animation={animation}\n            height={14}\n            lineGap={10}\n            tone={tone}\n          />\n\n          {showActions && (\n            <div className=\"flex gap-3 mt-2\">\n              <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n              <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nSkeletonCard.displayName = \"SkeletonCard\";\n\n// Skeleton Metric Card Component\nconst SkeletonMetricCard = forwardRef<HTMLDivElement, SkeletonMetricCardProps>(\n  (\n    {\n      showTrend = true,\n      showChart = true,\n      chartBars = 7,\n      valueWidth = \"52%\",\n      className,\n      animation = \"wave\",\n      tone = \"accent\",\n    },\n    ref,\n  ) => {\n    const chartHeights = [36, 52, 46, 72, 64, 84, 68, 78];\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(\n          \"rounded-md border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm\",\n          className,\n        )}\n      >\n        <div className=\"flex items-start justify-between gap-4\">\n          <div className=\"min-w-0 flex-1 space-y-3\">\n            <Skeleton\n              width=\"34%\"\n              height={11}\n              animation={animation}\n              tone=\"subtle\"\n            />\n            <Skeleton\n              width={valueWidth}\n              height={28}\n              animation={animation}\n              tone={tone}\n              radius=\"md\"\n            />\n            <Skeleton\n              width=\"44%\"\n              height={12}\n              animation={animation}\n              tone=\"subtle\"\n            />\n          </div>\n\n          {showTrend ? (\n            <div className=\"rounded-full border border-ds-border-2 bg-ds-surface-1 px-3 py-2\">\n              <Skeleton\n                width={54}\n                height={12}\n                animation={animation}\n                tone=\"subtle\"\n              />\n            </div>\n          ) : null}\n        </div>\n\n        {showChart ? (\n          <div className=\"mt-5 flex h-20 items-end gap-2\">\n            {Array.from({ length: chartBars }).map((_, index) => (\n              <Skeleton\n                key={index}\n                variant=\"rounded\"\n                width=\"100%\"\n                height={`${chartHeights[index % chartHeights.length]}%`}\n                animation={animation}\n                tone={tone}\n                className=\"flex-1\"\n              />\n            ))}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nSkeletonMetricCard.displayName = \"SkeletonMetricCard\";\n\n// Skeleton Table Row Component\nconst SkeletonTableRow = forwardRef<\n  HTMLDivElement,\n  { columns?: number; animation?: SkeletonAnimation; className?: string }\n>(({ columns = 4, animation = \"pulse\", className = \"\" }, ref) => {\n  const sharedWidth =\n    columns <= 1 ? \"100%\" : `${Math.floor(72 / (columns - 1))}%`;\n\n  return (\n    <div ref={ref} className={`flex items-center gap-4 py-3 ${className}`}>\n      {Array.from({ length: columns }).map((_, index) => (\n        <Skeleton\n          key={index}\n          variant=\"text\"\n          width={index === 0 ? \"28%\" : sharedWidth}\n          height={16}\n          animation={animation}\n        />\n      ))}\n    </div>\n  );\n});\n\nSkeletonTableRow.displayName = \"SkeletonTableRow\";\n\n// Skeleton List Item Component\nconst SkeletonListItem = forwardRef<\n  HTMLDivElement,\n  {\n    showAvatar?: boolean;\n    showSecondaryText?: boolean;\n    showAction?: boolean;\n    animation?: SkeletonAnimation;\n    className?: string;\n  }\n>(\n  (\n    {\n      showAvatar = true,\n      showSecondaryText = true,\n      showAction = false,\n      animation = \"pulse\",\n      className = \"\",\n    },\n    ref,\n  ) => {\n    return (\n      <div ref={ref} className={`flex items-center gap-3 py-3 ${className}`}>\n        {showAvatar && <SkeletonAvatar size={48} animation={animation} />}\n        <div className=\"flex-1\">\n          <Skeleton\n            variant=\"text\"\n            width=\"70%\"\n            height={16}\n            animation={animation}\n          />\n          {showSecondaryText && (\n            <Skeleton\n              variant=\"text\"\n              width=\"50%\"\n              height={14}\n              animation={animation}\n              className=\"mt-2\"\n            />\n          )}\n        </div>\n        {showAction && <SkeletonButton size=\"sm\" animation={animation} />}\n      </div>\n    );\n  },\n);\n\nSkeletonListItem.displayName = \"SkeletonListItem\";\n\nexport default Skeleton;\nexport {\n  Skeleton,\n  SkeletonText,\n  SkeletonAvatar,\n  SkeletonButton,\n  SkeletonImage,\n  SkeletonCard,\n  SkeletonMetricCard,\n  SkeletonTableRow,\n  SkeletonListItem,\n};\n"],"mappings":"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"}
+{"version":3,"file":"skeleton-wQOE-pRg.cjs","names":[],"sources":["../../src/components/data-display/skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport type SkeletonVariant = \"text\" | \"circular\" | \"rectangular\" | \"rounded\";\nexport type SkeletonAnimation = \"pulse\" | \"wave\" | \"none\";\nexport type SkeletonTone =\n  | \"default\"\n  | \"subtle\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\nexport type SkeletonRadius = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\nexport type SkeletonSpeed = \"slow\" | \"normal\" | \"fast\";\n\ntype SkeletonCssVariables = CSSProperties &\n  Record<\n    \"--ui-skeleton-base\" | \"--ui-skeleton-highlight\" | \"--ui-skeleton-duration\",\n    string\n  >;\n\nexport interface SkeletonProps extends Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> {\n  /** The variant shape of the skeleton */\n  variant?: SkeletonVariant;\n  /** The animation type */\n  animation?: SkeletonAnimation;\n  /** Width of the skeleton */\n  width?: number | string;\n  /** Height of the skeleton */\n  height?: number | string;\n  /** Border radius override */\n  borderRadius?: number | string;\n  /** Semantic radius preset */\n  radius?: SkeletonRadius;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n  /** Animation speed preset or custom duration */\n  speed?: SkeletonSpeed | number | string;\n  /** Number of lines for text variant */\n  lines?: number;\n  /** Gap between lines */\n  lineGap?: number | string;\n  /** Whether the last line should be shorter */\n  lastLineWidth?: number | string;\n}\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"variant\"> {\n  /** Number of text lines */\n  lines?: number;\n}\n\nexport interface SkeletonAvatarProps extends Omit<\n  SkeletonProps,\n  \"variant\" | \"width\" | \"height\"\n> {\n  /** Size of the avatar */\n  size?: number | string;\n}\n\nexport interface SkeletonCardProps {\n  /** Whether to show image placeholder */\n  showImage?: boolean;\n  /** Image height */\n  imageHeight?: number | string;\n  /** Number of text lines */\n  lines?: number;\n  /** Whether to show avatar */\n  showAvatar?: boolean;\n  /** Whether to show action buttons */\n  showActions?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Animation type */\n  animation?: SkeletonAnimation;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n}\n\nexport interface SkeletonMetricCardProps {\n  /** Whether to show a compact trend badge */\n  showTrend?: boolean;\n  /** Whether to render spark bars */\n  showChart?: boolean;\n  /** Number of spark bars */\n  chartBars?: number;\n  /** Width for the value block */\n  valueWidth?: number | string;\n  /** Custom className */\n  className?: string;\n  /** Animation type */\n  animation?: SkeletonAnimation;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n}\n\nconst animationStyles: Record<SkeletonAnimation, string> = {\n  pulse: \"ui-skeleton-pulse\",\n  wave: \"ui-skeleton-wave\",\n  none: \"\",\n};\n\nconst radiusStyles: Record<SkeletonRadius, string> = {\n  none: \"rounded-none\",\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  full: \"rounded-full\",\n};\n\nconst variantStyles: Record<SkeletonVariant, SkeletonRadius> = {\n  text: \"sm\",\n  circular: \"full\",\n  rectangular: \"none\",\n  rounded: \"md\",\n};\n\nconst speedStyles: Record<SkeletonSpeed, string> = {\n  slow: \"2.4s\",\n  normal: \"1.6s\",\n  fast: \"1.05s\",\n};\n\nconst toneStyles: Record<SkeletonTone, { base: string; highlight: string }> = {\n  default: {\n    base: \"var(--ds-color-bg-ds-surface-3)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 54%, var(--ds-color-bg-canvas))\",\n  },\n  subtle: {\n    base: \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 72%, var(--ds-color-bg-canvas))\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 42%, var(--ds-color-bg-canvas))\",\n  },\n  accent: {\n    base: \"var(--ds-color-accent-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-accent-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  success: {\n    base: \"var(--ds-color-success-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-success-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  warning: {\n    base: \"var(--ds-color-warning-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-warning-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  danger: {\n    base: \"var(--ds-color-danger-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-danger-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n  info: {\n    base: \"var(--ds-color-info-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--ds-color-info-subtle) 48%, var(--ds-color-bg-canvas))\",\n  },\n};\n\nfunction resolveDimension(value?: number | string): string | undefined {\n  if (typeof value === \"number\") {\n    return `${value}px`;\n  }\n\n  return value;\n}\n\nfunction resolveDuration(value: SkeletonProps[\"speed\"]): string {\n  if (typeof value === \"number\") {\n    return `${value}ms`;\n  }\n\n  if (typeof value === \"string\" && value in speedStyles) {\n    return speedStyles[value as SkeletonSpeed];\n  }\n\n  return value ?? speedStyles.normal;\n}\n\nfunction getDimensionStyle({\n  variant,\n  width,\n  height,\n  borderRadius,\n}: {\n  variant: SkeletonVariant;\n  width?: number | string;\n  height?: number | string;\n  borderRadius?: number | string;\n}): CSSProperties {\n  const nextStyle: CSSProperties = {};\n  const resolvedWidth = resolveDimension(width);\n  const resolvedHeight = resolveDimension(height);\n  const resolvedBorderRadius = resolveDimension(borderRadius);\n\n  if (resolvedWidth) {\n    nextStyle.width = resolvedWidth;\n  } else if (variant === \"text\") {\n    nextStyle.width = \"100%\";\n  }\n\n  if (resolvedHeight) {\n    nextStyle.height = resolvedHeight;\n  } else if (variant === \"text\") {\n    nextStyle.height = \"1em\";\n  } else if (variant === \"circular\") {\n    nextStyle.width = nextStyle.width || \"40px\";\n    nextStyle.height = nextStyle.width;\n  }\n\n  if (resolvedBorderRadius) {\n    nextStyle.borderRadius = resolvedBorderRadius;\n  }\n\n  return nextStyle;\n}\n\n// Base Skeleton Component\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      variant = \"text\",\n      animation = \"pulse\",\n      width,\n      height,\n      borderRadius,\n      radius,\n      tone = \"default\",\n      speed = \"normal\",\n      className,\n      lines = 1,\n      lineGap = 8,\n      lastLineWidth = \"80%\",\n      style,\n      [\"aria-hidden\"]: ariaHidden,\n      ...rest\n    },\n    ref,\n  ) => {\n    const toneStyle = toneStyles[tone];\n    const sharedStyle: SkeletonCssVariables = {\n      \"--ui-skeleton-base\": toneStyle.base,\n      \"--ui-skeleton-highlight\": toneStyle.highlight,\n      \"--ui-skeleton-duration\": resolveDuration(speed),\n      ...style,\n    };\n    const effectiveRadius = radius ?? variantStyles[variant];\n    const sharedClassName = mergeClassNames(\n      \"relative overflow-hidden bg-[var(--ui-skeleton-base)] pointer-events-none select-none shrink-0\",\n      radiusStyles[effectiveRadius],\n      animationStyles[animation],\n    );\n\n    if (variant === \"text\" && lines > 1) {\n      return (\n        <div\n          ref={ref}\n          className={mergeClassNames(\"flex flex-col\", className)}\n          style={{\n            ...style,\n            gap: resolveDimension(lineGap),\n            width: resolveDimension(width) ?? style?.width,\n          }}\n          aria-hidden={ariaHidden ?? true}\n          data-animation={animation}\n          data-tone={tone}\n          {...rest}\n        >\n          {Array.from({ length: lines }).map((_, index) => (\n            <div\n              key={index}\n              className={sharedClassName}\n              style={{\n                ...sharedStyle,\n                ...getDimensionStyle({\n                  variant,\n                  width:\n                    index === lines - 1 ? lastLineWidth : (width ?? \"100%\"),\n                  height,\n                  borderRadius,\n                }),\n              }}\n            />\n          ))}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(sharedClassName, className)}\n        style={{\n          ...sharedStyle,\n          ...getDimensionStyle({ variant, width, height, borderRadius }),\n        }}\n        aria-hidden={ariaHidden ?? true}\n        data-animation={animation}\n        data-tone={tone}\n        {...rest}\n      />\n    );\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n\n// Skeleton Text Component\nconst SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  ({ lines = 3, ...props }, ref) => {\n    return <Skeleton ref={ref} variant=\"text\" lines={lines} {...props} />;\n  },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n\n// Skeleton Avatar Component\nconst SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  ({ size = 40, animation = \"pulse\", className = \"\", ...props }, ref) => {\n    const sizeValue = typeof size === \"number\" ? `${size}px` : size;\n\n    return (\n      <Skeleton\n        ref={ref}\n        variant=\"circular\"\n        width={sizeValue}\n        height={sizeValue}\n        animation={animation}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonAvatar.displayName = \"SkeletonAvatar\";\n\n// Skeleton Button Component\nconst SkeletonButton = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, \"variant\"> & { size?: \"sm\" | \"md\" | \"lg\" }\n>(({ size = \"md\", animation = \"pulse\", className = \"\", ...props }, ref) => {\n  const sizeStyles = {\n    sm: { width: 80, height: 32 },\n    md: { width: 100, height: 40 },\n    lg: { width: 120, height: 48 },\n  };\n\n  return (\n    <Skeleton\n      ref={ref}\n      variant=\"rounded\"\n      width={sizeStyles[size].width}\n      height={sizeStyles[size].height}\n      animation={animation}\n      className={className}\n      {...props}\n    />\n  );\n});\n\nSkeletonButton.displayName = \"SkeletonButton\";\n\n// Skeleton Image Component\nconst SkeletonImage = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, \"variant\">\n>(\n  (\n    {\n      width = \"100%\",\n      height = 200,\n      animation = \"pulse\",\n      className = \"\",\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Skeleton\n        ref={ref}\n        variant=\"rounded\"\n        width={width}\n        height={height}\n        animation={animation}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonImage.displayName = \"SkeletonImage\";\n\n// Skeleton Card Component\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      showImage = true,\n      imageHeight = 200,\n      lines = 3,\n      showAvatar = false,\n      showActions = false,\n      className,\n      animation = \"pulse\",\n      tone = \"default\",\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(\n          \"overflow-hidden rounded-md border border-ds-border-2 bg-ds-surface-1 shadow-sm\",\n          className,\n        )}\n      >\n        {showImage && (\n          <SkeletonImage\n            height={imageHeight}\n            animation={animation}\n            borderRadius={0}\n            tone={tone}\n          />\n        )}\n\n        <div className=\"p-4 flex flex-col gap-4\">\n          {showAvatar && (\n            <div className=\"flex items-center gap-3\">\n              <SkeletonAvatar size={40} animation={animation} tone={tone} />\n              <div className=\"flex-1\">\n                <Skeleton\n                  variant=\"text\"\n                  width=\"60%\"\n                  height={14}\n                  animation={animation}\n                  tone={tone}\n                />\n                <Skeleton\n                  variant=\"text\"\n                  width=\"40%\"\n                  height={12}\n                  animation={animation}\n                  tone={tone}\n                  className=\"mt-2\"\n                />\n              </div>\n            </div>\n          )}\n\n          <SkeletonText\n            lines={lines}\n            animation={animation}\n            height={14}\n            lineGap={10}\n            tone={tone}\n          />\n\n          {showActions && (\n            <div className=\"flex gap-3 mt-2\">\n              <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n              <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nSkeletonCard.displayName = \"SkeletonCard\";\n\n// Skeleton Metric Card Component\nconst SkeletonMetricCard = forwardRef<HTMLDivElement, SkeletonMetricCardProps>(\n  (\n    {\n      showTrend = true,\n      showChart = true,\n      chartBars = 7,\n      valueWidth = \"52%\",\n      className,\n      animation = \"wave\",\n      tone = \"accent\",\n    },\n    ref,\n  ) => {\n    const chartHeights = [36, 52, 46, 72, 64, 84, 68, 78];\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(\n          \"rounded-md border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm\",\n          className,\n        )}\n      >\n        <div className=\"flex items-start justify-between gap-4\">\n          <div className=\"min-w-0 flex-1 space-y-3\">\n            <Skeleton\n              width=\"34%\"\n              height={11}\n              animation={animation}\n              tone=\"subtle\"\n            />\n            <Skeleton\n              width={valueWidth}\n              height={28}\n              animation={animation}\n              tone={tone}\n              radius=\"md\"\n            />\n            <Skeleton\n              width=\"44%\"\n              height={12}\n              animation={animation}\n              tone=\"subtle\"\n            />\n          </div>\n\n          {showTrend ? (\n            <div className=\"rounded-full border border-ds-border-2 bg-ds-surface-1 px-3 py-2\">\n              <Skeleton\n                width={54}\n                height={12}\n                animation={animation}\n                tone=\"subtle\"\n              />\n            </div>\n          ) : null}\n        </div>\n\n        {showChart ? (\n          <div className=\"mt-5 flex h-20 items-end gap-2\">\n            {Array.from({ length: chartBars }).map((_, index) => (\n              <Skeleton\n                key={index}\n                variant=\"rounded\"\n                width=\"100%\"\n                height={`${chartHeights[index % chartHeights.length]}%`}\n                animation={animation}\n                tone={tone}\n                className=\"flex-1\"\n              />\n            ))}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nSkeletonMetricCard.displayName = \"SkeletonMetricCard\";\n\n// Skeleton Table Row Component\nconst SkeletonTableRow = forwardRef<\n  HTMLDivElement,\n  { columns?: number; animation?: SkeletonAnimation; className?: string }\n>(({ columns = 4, animation = \"pulse\", className = \"\" }, ref) => {\n  const sharedWidth =\n    columns <= 1 ? \"100%\" : `${Math.floor(72 / (columns - 1))}%`;\n\n  return (\n    <div ref={ref} className={`flex items-center gap-4 py-3 ${className}`}>\n      {Array.from({ length: columns }).map((_, index) => (\n        <Skeleton\n          key={index}\n          variant=\"text\"\n          width={index === 0 ? \"28%\" : sharedWidth}\n          height={16}\n          animation={animation}\n        />\n      ))}\n    </div>\n  );\n});\n\nSkeletonTableRow.displayName = \"SkeletonTableRow\";\n\n// Skeleton List Item Component\nconst SkeletonListItem = forwardRef<\n  HTMLDivElement,\n  {\n    showAvatar?: boolean;\n    showSecondaryText?: boolean;\n    showAction?: boolean;\n    animation?: SkeletonAnimation;\n    className?: string;\n  }\n>(\n  (\n    {\n      showAvatar = true,\n      showSecondaryText = true,\n      showAction = false,\n      animation = \"pulse\",\n      className = \"\",\n    },\n    ref,\n  ) => {\n    return (\n      <div ref={ref} className={`flex items-center gap-3 py-3 ${className}`}>\n        {showAvatar && <SkeletonAvatar size={48} animation={animation} />}\n        <div className=\"flex-1\">\n          <Skeleton\n            variant=\"text\"\n            width=\"70%\"\n            height={16}\n            animation={animation}\n          />\n          {showSecondaryText && (\n            <Skeleton\n              variant=\"text\"\n              width=\"50%\"\n              height={14}\n              animation={animation}\n              className=\"mt-2\"\n            />\n          )}\n        </div>\n        {showAction && <SkeletonButton size=\"sm\" animation={animation} />}\n      </div>\n    );\n  },\n);\n\nSkeletonListItem.displayName = \"SkeletonListItem\";\n\nexport default Skeleton;\nexport {\n  Skeleton,\n  SkeletonText,\n  SkeletonAvatar,\n  SkeletonButton,\n  SkeletonImage,\n  SkeletonCard,\n  SkeletonMetricCard,\n  SkeletonTableRow,\n  SkeletonListItem,\n};\n"],"mappings":"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"}

package/dist/chunks/{spinners-BylPf0uk.cjs → spinners-C9acUulz.cjs}

@@ -14,4 +14,4 @@ Object.defineProperty(exports, "Audio", {
 	}
 });
 
-//# sourceMappingURL=spinners-BylPf0uk.cjs.map
+//# sourceMappingURL=spinners-C9acUulz.cjs.map

package/dist/chunks/{spinners-BylPf0uk.cjs.map → spinners-C9acUulz.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"spinners-BylPf0uk.cjs","names":[],"sources":["../../src/components/spinners/Audio.tsx"],"sourcesContent":["import { AudioWaveIcon } from \"../icons\";\n\nconst Audio = ({\n  className = undefined, // String\n  ...props\n}) => (\n  <AudioWaveIcon\n    className={`svg-loaders-svg${className ? ` ${className}` : \"\"}`}\n    {...props}\n  />\n);\n\nexport { Audio };\n"],"mappings":";;;;AAEA,IAAM,SAAS,EACb,YAAY,KAAA,GACZ,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,cAAA,eAAD;CACE,WAAW,kBAAkB,YAAY,IAAI,cAAc;CAC3D,GAAI;CACJ,CAAA"}
+{"version":3,"file":"spinners-C9acUulz.cjs","names":[],"sources":["../../src/components/spinners/Audio.tsx"],"sourcesContent":["import { AudioWaveIcon } from \"../icons\";\n\nconst Audio = ({\n  className = undefined, // String\n  ...props\n}) => (\n  <AudioWaveIcon\n    className={`svg-loaders-svg${className ? ` ${className}` : \"\"}`}\n    {...props}\n  />\n);\n\nexport { Audio };\n"],"mappings":";;;;AAEA,IAAM,SAAS,EACb,YAAY,KAAA,GACZ,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,cAAA,eAAD;CACE,WAAW,kBAAkB,YAAY,IAAI,cAAc;CAC3D,GAAI;CACJ,CAAA"}

package/dist/chunks/{spinners-hJaI_cBH.mjs → spinners-g6_Up5Rb.mjs}

@@ -8,4 +8,4 @@ var Audio = ({ className = void 0, ...props }) => /* @__PURE__ */ jsx(AudioWaveI
 //#endregion
 export { Audio as t };
 
-//# sourceMappingURL=spinners-hJaI_cBH.mjs.map
+//# sourceMappingURL=spinners-g6_Up5Rb.mjs.map

package/dist/chunks/{spinners-hJaI_cBH.mjs.map → spinners-g6_Up5Rb.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"spinners-hJaI_cBH.mjs","names":[],"sources":["../../src/components/spinners/Audio.tsx"],"sourcesContent":["import { AudioWaveIcon } from \"../icons\";\n\nconst Audio = ({\n  className = undefined, // String\n  ...props\n}) => (\n  <AudioWaveIcon\n    className={`svg-loaders-svg${className ? ` ${className}` : \"\"}`}\n    {...props}\n  />\n);\n\nexport { Audio };\n"],"mappings":";;;AAEA,IAAM,SAAS,EACb,YAAY,KAAA,GACZ,GAAG,YAEH,oBAAC,eAAD;CACE,WAAW,kBAAkB,YAAY,IAAI,cAAc;CAC3D,GAAI;CACJ,CAAA"}
+{"version":3,"file":"spinners-g6_Up5Rb.mjs","names":[],"sources":["../../src/components/spinners/Audio.tsx"],"sourcesContent":["import { AudioWaveIcon } from \"../icons\";\n\nconst Audio = ({\n  className = undefined, // String\n  ...props\n}) => (\n  <AudioWaveIcon\n    className={`svg-loaders-svg${className ? ` ${className}` : \"\"}`}\n    {...props}\n  />\n);\n\nexport { Audio };\n"],"mappings":";;;AAEA,IAAM,SAAS,EACb,YAAY,KAAA,GACZ,GAAG,YAEH,oBAAC,eAAD;CACE,WAAW,kBAAkB,YAAY,IAAI,cAAc;CAC3D,GAAI;CACJ,CAAA"}

package/dist/chunks/{splash-cursor-CmqkSl6m.cjs → splash-cursor-CCi5n3O-.cjs}

@@ -276,4 +276,4 @@ Object.defineProperty(exports, "SplashCursor", {
 	}
 });
 
-//# sourceMappingURL=splash-cursor-CmqkSl6m.cjs.map
+//# sourceMappingURL=splash-cursor-CCi5n3O-.cjs.map

package/dist/chunks/{splash-cursor-CmqkSl6m.cjs.map → splash-cursor-CCi5n3O-.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"splash-cursor-CmqkSl6m.cjs","names":[],"sources":["../../src/components/effects/splash-cursor/SplashCursor.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SplashCursorProps, Particle } from \"./types\";\n\nconst sizeConfig = {\n  sm: { base: 20, variance: 10 },\n  md: { base: 40, variance: 20 },\n  lg: { base: 60, variance: 30 },\n  xl: { base: 100, variance: 50 },\n};\n\nconst defaultColors = [\n  \"var(--ds-color-accent)\",\n  \"var(--ds-color-accent-hover)\",\n  \"var(--ds-color-info)\",\n  \"var(--ds-color-success)\",\n  \"var(--ds-color-warning)\",\n  \"var(--ds-color-danger)\",\n];\n\nexport const SplashCursor = ({\n  className,\n  color,\n  secondaryColor,\n  size = \"md\",\n  particleCount = 12,\n  enabled = true,\n  blur = 0,\n  opacity = 0.6,\n  duration = 800,\n  smooth = true,\n  smoothFactor = 0.15,\n  style,\n  children,\n  variant = \"splash\",\n}: SplashCursorProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [particles, setParticles] = useState<Particle[]>([]);\n  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });\n  const [smoothPos, setSmoothPos] = useState({ x: 0, y: 0 });\n  const [isInside, setIsInside] = useState(false);\n  const particleIdRef = useRef<number>(0);\n  const animationFrameRef = useRef<number | undefined>(undefined);\n\n  // Smooth cursor following\n  useEffect(() => {\n    if (!smooth || !enabled) return;\n\n    const animate = () => {\n      setSmoothPos((prev) => ({\n        x: prev.x + (mousePos.x - prev.x) * smoothFactor,\n        y: prev.y + (mousePos.y - prev.y) * smoothFactor,\n      }));\n      animationFrameRef.current = requestAnimationFrame(animate);\n    };\n\n    animationFrameRef.current = requestAnimationFrame(animate);\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    };\n  }, [mousePos, smooth, smoothFactor, enabled]);\n\n  const getRandomColor = useCallback(() => {\n    if (color && secondaryColor) {\n      return Math.random() > 0.5 ? color : secondaryColor;\n    }\n    if (color) return color;\n    return defaultColors[Math.floor(Math.random() * defaultColors.length)];\n  }, [color, secondaryColor]);\n\n  const createParticles = useCallback(\n    (x: number, y: number) => {\n      const config = sizeConfig[size];\n      const newParticles: Particle[] = [];\n\n      for (let i = 0; i < particleCount; i++) {\n        const angle = (Math.PI * 2 * i) / particleCount;\n        const distance =\n          variant === \"ripple\" ? config.base : Math.random() * config.variance;\n\n        newParticles.push({\n          id: particleIdRef.current++,\n          x: x + Math.cos(angle) * distance * (variant === \"ripple\" ? 0 : 1),\n          y: y + Math.sin(angle) * distance * (variant === \"ripple\" ? 0 : 1),\n          size: config.base * 0.3 + Math.random() * config.base * 0.4,\n          opacity: opacity * (0.5 + Math.random() * 0.5),\n          color: getRandomColor(),\n        });\n      }\n\n      setParticles((prev) => [...prev.slice(-50), ...newParticles]);\n\n      // Remove particles after animation\n      setTimeout(() => {\n        setParticles((prev) =>\n          prev.filter((p) => !newParticles.find((np) => np.id === p.id)),\n        );\n      }, duration);\n    },\n    [size, particleCount, opacity, duration, getRandomColor, variant],\n  );\n\n  const handleMouseMove = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!enabled || !containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n\n      setMousePos({ x, y });\n\n      // Create splash effect on movement\n      if (variant === \"splash\" || variant === \"trail\") {\n        if (Math.random() > (variant === \"trail\" ? 0.7 : 0.85)) {\n          createParticles(x, y);\n        }\n      }\n    },\n    [enabled, createParticles, variant],\n  );\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!enabled || !containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n\n      // Create burst effect on click\n      createParticles(x, y);\n      if (variant === \"ripple\") {\n        setTimeout(() => createParticles(x, y), 100);\n        setTimeout(() => createParticles(x, y), 200);\n      }\n    },\n    [enabled, createParticles, variant],\n  );\n\n  const getParticleAnimation = (particle: Particle) => {\n    const config = sizeConfig[size];\n\n    switch (variant) {\n      case \"glow\":\n        return {\n          initial: { scale: 0, opacity: particle.opacity },\n          animate: { scale: 2, opacity: 0 },\n          exit: { scale: 3, opacity: 0 },\n        };\n      case \"trail\":\n        return {\n          initial: { scale: 1, opacity: particle.opacity, y: 0 },\n          animate: { scale: 0.5, opacity: 0, y: 20 },\n          exit: { scale: 0, opacity: 0 },\n        };\n      case \"ripple\":\n        return {\n          initial: { scale: 0, opacity: particle.opacity },\n          animate: { scale: 4, opacity: 0 },\n          exit: { scale: 5, opacity: 0 },\n        };\n      default: // splash\n        const angle = Math.random() * Math.PI * 2;\n        const distance = config.base + Math.random() * config.variance;\n        return {\n          initial: { scale: 0, opacity: particle.opacity, x: 0, y: 0 },\n          animate: {\n            scale: [0, 1.2, 0.8],\n            opacity: [particle.opacity, particle.opacity * 0.8, 0],\n            x: Math.cos(angle) * distance,\n            y: Math.sin(angle) * distance,\n          },\n          exit: { scale: 0, opacity: 0 },\n        };\n    }\n  };\n\n  const cursorPos = smooth ? smoothPos : mousePos;\n  const glowColor =\n    color && secondaryColor\n      ? `color-mix(in srgb, ${color} 60%, ${secondaryColor})`\n      : color\n        ? `color-mix(in srgb, ${color} 35%, transparent)`\n        : \"color-mix(in srgb, var(--ds-color-accent) 35%, transparent)\";\n\n  return (\n    <div\n      ref={containerRef}\n      className={mergeClassNames(\"relative overflow-hidden\", className)}\n      style={style}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsInside(true)}\n      onMouseLeave={() => setIsInside(false)}\n      onClick={handleClick}\n    >\n      {/* Cursor glow effect */}\n      {enabled && isInside && variant === \"glow\" && (\n        <motion.div\n          className=\"pointer-events-none absolute z-10\"\n          style={{\n            left: cursorPos.x,\n            top: cursorPos.y,\n            width: sizeConfig[size].base * 2,\n            height: sizeConfig[size].base * 2,\n            transform: \"translate(-50%, -50%)\",\n            background: `radial-gradient(circle, ${glowColor} 0%, transparent 70%)`,\n            filter: blur ? `blur(${blur}px)` : undefined,\n          }}\n          initial={{ scale: 0, opacity: 0 }}\n          animate={{ scale: 1, opacity: 1 }}\n          exit={{ scale: 0, opacity: 0 }}\n        />\n      )}\n\n      {/* Particles */}\n      <AnimatePresence>\n        {enabled &&\n          particles.map((particle) => {\n            const animation = getParticleAnimation(particle);\n            return (\n              <motion.div\n                key={particle.id}\n                className=\"pointer-events-none absolute rounded-full z-20\"\n                style={{\n                  left: particle.x,\n                  top: particle.y,\n                  width: particle.size,\n                  height: particle.size,\n                  backgroundColor: particle.color,\n                  transform: \"translate(-50%, -50%)\",\n                  filter: blur ? `blur(${blur}px)` : undefined,\n                }}\n                {...animation}\n                transition={{\n                  duration: duration / 1000,\n                  ease: \"easeOut\",\n                }}\n              />\n            );\n          })}\n      </AnimatePresence>\n\n      {/* Children content */}\n      <div className=\"relative z-0\">{children}</div>\n    </div>\n  );\n};\n\nSplashCursor.displayName = \"SplashCursor\";\n\nexport default SplashCursor;\n"],"mappings":"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"}
+{"version":3,"file":"splash-cursor-CCi5n3O-.cjs","names":[],"sources":["../../src/components/effects/splash-cursor/SplashCursor.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SplashCursorProps, Particle } from \"./types\";\n\nconst sizeConfig = {\n  sm: { base: 20, variance: 10 },\n  md: { base: 40, variance: 20 },\n  lg: { base: 60, variance: 30 },\n  xl: { base: 100, variance: 50 },\n};\n\nconst defaultColors = [\n  \"var(--ds-color-accent)\",\n  \"var(--ds-color-accent-hover)\",\n  \"var(--ds-color-info)\",\n  \"var(--ds-color-success)\",\n  \"var(--ds-color-warning)\",\n  \"var(--ds-color-danger)\",\n];\n\nexport const SplashCursor = ({\n  className,\n  color,\n  secondaryColor,\n  size = \"md\",\n  particleCount = 12,\n  enabled = true,\n  blur = 0,\n  opacity = 0.6,\n  duration = 800,\n  smooth = true,\n  smoothFactor = 0.15,\n  style,\n  children,\n  variant = \"splash\",\n}: SplashCursorProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [particles, setParticles] = useState<Particle[]>([]);\n  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });\n  const [smoothPos, setSmoothPos] = useState({ x: 0, y: 0 });\n  const [isInside, setIsInside] = useState(false);\n  const particleIdRef = useRef<number>(0);\n  const animationFrameRef = useRef<number | undefined>(undefined);\n\n  // Smooth cursor following\n  useEffect(() => {\n    if (!smooth || !enabled) return;\n\n    const animate = () => {\n      setSmoothPos((prev) => ({\n        x: prev.x + (mousePos.x - prev.x) * smoothFactor,\n        y: prev.y + (mousePos.y - prev.y) * smoothFactor,\n      }));\n      animationFrameRef.current = requestAnimationFrame(animate);\n    };\n\n    animationFrameRef.current = requestAnimationFrame(animate);\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    };\n  }, [mousePos, smooth, smoothFactor, enabled]);\n\n  const getRandomColor = useCallback(() => {\n    if (color && secondaryColor) {\n      return Math.random() > 0.5 ? color : secondaryColor;\n    }\n    if (color) return color;\n    return defaultColors[Math.floor(Math.random() * defaultColors.length)];\n  }, [color, secondaryColor]);\n\n  const createParticles = useCallback(\n    (x: number, y: number) => {\n      const config = sizeConfig[size];\n      const newParticles: Particle[] = [];\n\n      for (let i = 0; i < particleCount; i++) {\n        const angle = (Math.PI * 2 * i) / particleCount;\n        const distance =\n          variant === \"ripple\" ? config.base : Math.random() * config.variance;\n\n        newParticles.push({\n          id: particleIdRef.current++,\n          x: x + Math.cos(angle) * distance * (variant === \"ripple\" ? 0 : 1),\n          y: y + Math.sin(angle) * distance * (variant === \"ripple\" ? 0 : 1),\n          size: config.base * 0.3 + Math.random() * config.base * 0.4,\n          opacity: opacity * (0.5 + Math.random() * 0.5),\n          color: getRandomColor(),\n        });\n      }\n\n      setParticles((prev) => [...prev.slice(-50), ...newParticles]);\n\n      // Remove particles after animation\n      setTimeout(() => {\n        setParticles((prev) =>\n          prev.filter((p) => !newParticles.find((np) => np.id === p.id)),\n        );\n      }, duration);\n    },\n    [size, particleCount, opacity, duration, getRandomColor, variant],\n  );\n\n  const handleMouseMove = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!enabled || !containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n\n      setMousePos({ x, y });\n\n      // Create splash effect on movement\n      if (variant === \"splash\" || variant === \"trail\") {\n        if (Math.random() > (variant === \"trail\" ? 0.7 : 0.85)) {\n          createParticles(x, y);\n        }\n      }\n    },\n    [enabled, createParticles, variant],\n  );\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!enabled || !containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n\n      // Create burst effect on click\n      createParticles(x, y);\n      if (variant === \"ripple\") {\n        setTimeout(() => createParticles(x, y), 100);\n        setTimeout(() => createParticles(x, y), 200);\n      }\n    },\n    [enabled, createParticles, variant],\n  );\n\n  const getParticleAnimation = (particle: Particle) => {\n    const config = sizeConfig[size];\n\n    switch (variant) {\n      case \"glow\":\n        return {\n          initial: { scale: 0, opacity: particle.opacity },\n          animate: { scale: 2, opacity: 0 },\n          exit: { scale: 3, opacity: 0 },\n        };\n      case \"trail\":\n        return {\n          initial: { scale: 1, opacity: particle.opacity, y: 0 },\n          animate: { scale: 0.5, opacity: 0, y: 20 },\n          exit: { scale: 0, opacity: 0 },\n        };\n      case \"ripple\":\n        return {\n          initial: { scale: 0, opacity: particle.opacity },\n          animate: { scale: 4, opacity: 0 },\n          exit: { scale: 5, opacity: 0 },\n        };\n      default: // splash\n        const angle = Math.random() * Math.PI * 2;\n        const distance = config.base + Math.random() * config.variance;\n        return {\n          initial: { scale: 0, opacity: particle.opacity, x: 0, y: 0 },\n          animate: {\n            scale: [0, 1.2, 0.8],\n            opacity: [particle.opacity, particle.opacity * 0.8, 0],\n            x: Math.cos(angle) * distance,\n            y: Math.sin(angle) * distance,\n          },\n          exit: { scale: 0, opacity: 0 },\n        };\n    }\n  };\n\n  const cursorPos = smooth ? smoothPos : mousePos;\n  const glowColor =\n    color && secondaryColor\n      ? `color-mix(in srgb, ${color} 60%, ${secondaryColor})`\n      : color\n        ? `color-mix(in srgb, ${color} 35%, transparent)`\n        : \"color-mix(in srgb, var(--ds-color-accent) 35%, transparent)\";\n\n  return (\n    <div\n      ref={containerRef}\n      className={mergeClassNames(\"relative overflow-hidden\", className)}\n      style={style}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsInside(true)}\n      onMouseLeave={() => setIsInside(false)}\n      onClick={handleClick}\n    >\n      {/* Cursor glow effect */}\n      {enabled && isInside && variant === \"glow\" && (\n        <motion.div\n          className=\"pointer-events-none absolute z-10\"\n          style={{\n            left: cursorPos.x,\n            top: cursorPos.y,\n            width: sizeConfig[size].base * 2,\n            height: sizeConfig[size].base * 2,\n            transform: \"translate(-50%, -50%)\",\n            background: `radial-gradient(circle, ${glowColor} 0%, transparent 70%)`,\n            filter: blur ? `blur(${blur}px)` : undefined,\n          }}\n          initial={{ scale: 0, opacity: 0 }}\n          animate={{ scale: 1, opacity: 1 }}\n          exit={{ scale: 0, opacity: 0 }}\n        />\n      )}\n\n      {/* Particles */}\n      <AnimatePresence>\n        {enabled &&\n          particles.map((particle) => {\n            const animation = getParticleAnimation(particle);\n            return (\n              <motion.div\n                key={particle.id}\n                className=\"pointer-events-none absolute rounded-full z-20\"\n                style={{\n                  left: particle.x,\n                  top: particle.y,\n                  width: particle.size,\n                  height: particle.size,\n                  backgroundColor: particle.color,\n                  transform: \"translate(-50%, -50%)\",\n                  filter: blur ? `blur(${blur}px)` : undefined,\n                }}\n                {...animation}\n                transition={{\n                  duration: duration / 1000,\n                  ease: \"easeOut\",\n                }}\n              />\n            );\n          })}\n      </AnimatePresence>\n\n      {/* Children content */}\n      <div className=\"relative z-0\">{children}</div>\n    </div>\n  );\n};\n\nSplashCursor.displayName = \"SplashCursor\";\n\nexport default SplashCursor;\n"],"mappings":"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"}

package/dist/chunks/{splash-cursor-Cxouip_h.mjs → splash-cursor-CDHTm5vA.mjs}

@@ -270,4 +270,4 @@ SplashCursor.displayName = "SplashCursor";
 //#endregion
 export { SplashCursor as t };
 
-//# sourceMappingURL=splash-cursor-Cxouip_h.mjs.map
+//# sourceMappingURL=splash-cursor-CDHTm5vA.mjs.map

package/dist/chunks/{splash-cursor-Cxouip_h.mjs.map → splash-cursor-CDHTm5vA.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"splash-cursor-Cxouip_h.mjs","names":[],"sources":["../../src/components/effects/splash-cursor/SplashCursor.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SplashCursorProps, Particle } from \"./types\";\n\nconst sizeConfig = {\n  sm: { base: 20, variance: 10 },\n  md: { base: 40, variance: 20 },\n  lg: { base: 60, variance: 30 },\n  xl: { base: 100, variance: 50 },\n};\n\nconst defaultColors = [\n  \"var(--ds-color-accent)\",\n  \"var(--ds-color-accent-hover)\",\n  \"var(--ds-color-info)\",\n  \"var(--ds-color-success)\",\n  \"var(--ds-color-warning)\",\n  \"var(--ds-color-danger)\",\n];\n\nexport const SplashCursor = ({\n  className,\n  color,\n  secondaryColor,\n  size = \"md\",\n  particleCount = 12,\n  enabled = true,\n  blur = 0,\n  opacity = 0.6,\n  duration = 800,\n  smooth = true,\n  smoothFactor = 0.15,\n  style,\n  children,\n  variant = \"splash\",\n}: SplashCursorProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [particles, setParticles] = useState<Particle[]>([]);\n  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });\n  const [smoothPos, setSmoothPos] = useState({ x: 0, y: 0 });\n  const [isInside, setIsInside] = useState(false);\n  const particleIdRef = useRef<number>(0);\n  const animationFrameRef = useRef<number | undefined>(undefined);\n\n  // Smooth cursor following\n  useEffect(() => {\n    if (!smooth || !enabled) return;\n\n    const animate = () => {\n      setSmoothPos((prev) => ({\n        x: prev.x + (mousePos.x - prev.x) * smoothFactor,\n        y: prev.y + (mousePos.y - prev.y) * smoothFactor,\n      }));\n      animationFrameRef.current = requestAnimationFrame(animate);\n    };\n\n    animationFrameRef.current = requestAnimationFrame(animate);\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    };\n  }, [mousePos, smooth, smoothFactor, enabled]);\n\n  const getRandomColor = useCallback(() => {\n    if (color && secondaryColor) {\n      return Math.random() > 0.5 ? color : secondaryColor;\n    }\n    if (color) return color;\n    return defaultColors[Math.floor(Math.random() * defaultColors.length)];\n  }, [color, secondaryColor]);\n\n  const createParticles = useCallback(\n    (x: number, y: number) => {\n      const config = sizeConfig[size];\n      const newParticles: Particle[] = [];\n\n      for (let i = 0; i < particleCount; i++) {\n        const angle = (Math.PI * 2 * i) / particleCount;\n        const distance =\n          variant === \"ripple\" ? config.base : Math.random() * config.variance;\n\n        newParticles.push({\n          id: particleIdRef.current++,\n          x: x + Math.cos(angle) * distance * (variant === \"ripple\" ? 0 : 1),\n          y: y + Math.sin(angle) * distance * (variant === \"ripple\" ? 0 : 1),\n          size: config.base * 0.3 + Math.random() * config.base * 0.4,\n          opacity: opacity * (0.5 + Math.random() * 0.5),\n          color: getRandomColor(),\n        });\n      }\n\n      setParticles((prev) => [...prev.slice(-50), ...newParticles]);\n\n      // Remove particles after animation\n      setTimeout(() => {\n        setParticles((prev) =>\n          prev.filter((p) => !newParticles.find((np) => np.id === p.id)),\n        );\n      }, duration);\n    },\n    [size, particleCount, opacity, duration, getRandomColor, variant],\n  );\n\n  const handleMouseMove = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!enabled || !containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n\n      setMousePos({ x, y });\n\n      // Create splash effect on movement\n      if (variant === \"splash\" || variant === \"trail\") {\n        if (Math.random() > (variant === \"trail\" ? 0.7 : 0.85)) {\n          createParticles(x, y);\n        }\n      }\n    },\n    [enabled, createParticles, variant],\n  );\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!enabled || !containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n\n      // Create burst effect on click\n      createParticles(x, y);\n      if (variant === \"ripple\") {\n        setTimeout(() => createParticles(x, y), 100);\n        setTimeout(() => createParticles(x, y), 200);\n      }\n    },\n    [enabled, createParticles, variant],\n  );\n\n  const getParticleAnimation = (particle: Particle) => {\n    const config = sizeConfig[size];\n\n    switch (variant) {\n      case \"glow\":\n        return {\n          initial: { scale: 0, opacity: particle.opacity },\n          animate: { scale: 2, opacity: 0 },\n          exit: { scale: 3, opacity: 0 },\n        };\n      case \"trail\":\n        return {\n          initial: { scale: 1, opacity: particle.opacity, y: 0 },\n          animate: { scale: 0.5, opacity: 0, y: 20 },\n          exit: { scale: 0, opacity: 0 },\n        };\n      case \"ripple\":\n        return {\n          initial: { scale: 0, opacity: particle.opacity },\n          animate: { scale: 4, opacity: 0 },\n          exit: { scale: 5, opacity: 0 },\n        };\n      default: // splash\n        const angle = Math.random() * Math.PI * 2;\n        const distance = config.base + Math.random() * config.variance;\n        return {\n          initial: { scale: 0, opacity: particle.opacity, x: 0, y: 0 },\n          animate: {\n            scale: [0, 1.2, 0.8],\n            opacity: [particle.opacity, particle.opacity * 0.8, 0],\n            x: Math.cos(angle) * distance,\n            y: Math.sin(angle) * distance,\n          },\n          exit: { scale: 0, opacity: 0 },\n        };\n    }\n  };\n\n  const cursorPos = smooth ? smoothPos : mousePos;\n  const glowColor =\n    color && secondaryColor\n      ? `color-mix(in srgb, ${color} 60%, ${secondaryColor})`\n      : color\n        ? `color-mix(in srgb, ${color} 35%, transparent)`\n        : \"color-mix(in srgb, var(--ds-color-accent) 35%, transparent)\";\n\n  return (\n    <div\n      ref={containerRef}\n      className={mergeClassNames(\"relative overflow-hidden\", className)}\n      style={style}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsInside(true)}\n      onMouseLeave={() => setIsInside(false)}\n      onClick={handleClick}\n    >\n      {/* Cursor glow effect */}\n      {enabled && isInside && variant === \"glow\" && (\n        <motion.div\n          className=\"pointer-events-none absolute z-10\"\n          style={{\n            left: cursorPos.x,\n            top: cursorPos.y,\n            width: sizeConfig[size].base * 2,\n            height: sizeConfig[size].base * 2,\n            transform: \"translate(-50%, -50%)\",\n            background: `radial-gradient(circle, ${glowColor} 0%, transparent 70%)`,\n            filter: blur ? `blur(${blur}px)` : undefined,\n          }}\n          initial={{ scale: 0, opacity: 0 }}\n          animate={{ scale: 1, opacity: 1 }}\n          exit={{ scale: 0, opacity: 0 }}\n        />\n      )}\n\n      {/* Particles */}\n      <AnimatePresence>\n        {enabled &&\n          particles.map((particle) => {\n            const animation = getParticleAnimation(particle);\n            return (\n              <motion.div\n                key={particle.id}\n                className=\"pointer-events-none absolute rounded-full z-20\"\n                style={{\n                  left: particle.x,\n                  top: particle.y,\n                  width: particle.size,\n                  height: particle.size,\n                  backgroundColor: particle.color,\n                  transform: \"translate(-50%, -50%)\",\n                  filter: blur ? `blur(${blur}px)` : undefined,\n                }}\n                {...animation}\n                transition={{\n                  duration: duration / 1000,\n                  ease: \"easeOut\",\n                }}\n              />\n            );\n          })}\n      </AnimatePresence>\n\n      {/* Children content */}\n      <div className=\"relative z-0\">{children}</div>\n    </div>\n  );\n};\n\nSplashCursor.displayName = \"SplashCursor\";\n\nexport default SplashCursor;\n"],"mappings":"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"}
+{"version":3,"file":"splash-cursor-CDHTm5vA.mjs","names":[],"sources":["../../src/components/effects/splash-cursor/SplashCursor.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SplashCursorProps, Particle } from \"./types\";\n\nconst sizeConfig = {\n  sm: { base: 20, variance: 10 },\n  md: { base: 40, variance: 20 },\n  lg: { base: 60, variance: 30 },\n  xl: { base: 100, variance: 50 },\n};\n\nconst defaultColors = [\n  \"var(--ds-color-accent)\",\n  \"var(--ds-color-accent-hover)\",\n  \"var(--ds-color-info)\",\n  \"var(--ds-color-success)\",\n  \"var(--ds-color-warning)\",\n  \"var(--ds-color-danger)\",\n];\n\nexport const SplashCursor = ({\n  className,\n  color,\n  secondaryColor,\n  size = \"md\",\n  particleCount = 12,\n  enabled = true,\n  blur = 0,\n  opacity = 0.6,\n  duration = 800,\n  smooth = true,\n  smoothFactor = 0.15,\n  style,\n  children,\n  variant = \"splash\",\n}: SplashCursorProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [particles, setParticles] = useState<Particle[]>([]);\n  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });\n  const [smoothPos, setSmoothPos] = useState({ x: 0, y: 0 });\n  const [isInside, setIsInside] = useState(false);\n  const particleIdRef = useRef<number>(0);\n  const animationFrameRef = useRef<number | undefined>(undefined);\n\n  // Smooth cursor following\n  useEffect(() => {\n    if (!smooth || !enabled) return;\n\n    const animate = () => {\n      setSmoothPos((prev) => ({\n        x: prev.x + (mousePos.x - prev.x) * smoothFactor,\n        y: prev.y + (mousePos.y - prev.y) * smoothFactor,\n      }));\n      animationFrameRef.current = requestAnimationFrame(animate);\n    };\n\n    animationFrameRef.current = requestAnimationFrame(animate);\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    };\n  }, [mousePos, smooth, smoothFactor, enabled]);\n\n  const getRandomColor = useCallback(() => {\n    if (color && secondaryColor) {\n      return Math.random() > 0.5 ? color : secondaryColor;\n    }\n    if (color) return color;\n    return defaultColors[Math.floor(Math.random() * defaultColors.length)];\n  }, [color, secondaryColor]);\n\n  const createParticles = useCallback(\n    (x: number, y: number) => {\n      const config = sizeConfig[size];\n      const newParticles: Particle[] = [];\n\n      for (let i = 0; i < particleCount; i++) {\n        const angle = (Math.PI * 2 * i) / particleCount;\n        const distance =\n          variant === \"ripple\" ? config.base : Math.random() * config.variance;\n\n        newParticles.push({\n          id: particleIdRef.current++,\n          x: x + Math.cos(angle) * distance * (variant === \"ripple\" ? 0 : 1),\n          y: y + Math.sin(angle) * distance * (variant === \"ripple\" ? 0 : 1),\n          size: config.base * 0.3 + Math.random() * config.base * 0.4,\n          opacity: opacity * (0.5 + Math.random() * 0.5),\n          color: getRandomColor(),\n        });\n      }\n\n      setParticles((prev) => [...prev.slice(-50), ...newParticles]);\n\n      // Remove particles after animation\n      setTimeout(() => {\n        setParticles((prev) =>\n          prev.filter((p) => !newParticles.find((np) => np.id === p.id)),\n        );\n      }, duration);\n    },\n    [size, particleCount, opacity, duration, getRandomColor, variant],\n  );\n\n  const handleMouseMove = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!enabled || !containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n\n      setMousePos({ x, y });\n\n      // Create splash effect on movement\n      if (variant === \"splash\" || variant === \"trail\") {\n        if (Math.random() > (variant === \"trail\" ? 0.7 : 0.85)) {\n          createParticles(x, y);\n        }\n      }\n    },\n    [enabled, createParticles, variant],\n  );\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!enabled || !containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n\n      // Create burst effect on click\n      createParticles(x, y);\n      if (variant === \"ripple\") {\n        setTimeout(() => createParticles(x, y), 100);\n        setTimeout(() => createParticles(x, y), 200);\n      }\n    },\n    [enabled, createParticles, variant],\n  );\n\n  const getParticleAnimation = (particle: Particle) => {\n    const config = sizeConfig[size];\n\n    switch (variant) {\n      case \"glow\":\n        return {\n          initial: { scale: 0, opacity: particle.opacity },\n          animate: { scale: 2, opacity: 0 },\n          exit: { scale: 3, opacity: 0 },\n        };\n      case \"trail\":\n        return {\n          initial: { scale: 1, opacity: particle.opacity, y: 0 },\n          animate: { scale: 0.5, opacity: 0, y: 20 },\n          exit: { scale: 0, opacity: 0 },\n        };\n      case \"ripple\":\n        return {\n          initial: { scale: 0, opacity: particle.opacity },\n          animate: { scale: 4, opacity: 0 },\n          exit: { scale: 5, opacity: 0 },\n        };\n      default: // splash\n        const angle = Math.random() * Math.PI * 2;\n        const distance = config.base + Math.random() * config.variance;\n        return {\n          initial: { scale: 0, opacity: particle.opacity, x: 0, y: 0 },\n          animate: {\n            scale: [0, 1.2, 0.8],\n            opacity: [particle.opacity, particle.opacity * 0.8, 0],\n            x: Math.cos(angle) * distance,\n            y: Math.sin(angle) * distance,\n          },\n          exit: { scale: 0, opacity: 0 },\n        };\n    }\n  };\n\n  const cursorPos = smooth ? smoothPos : mousePos;\n  const glowColor =\n    color && secondaryColor\n      ? `color-mix(in srgb, ${color} 60%, ${secondaryColor})`\n      : color\n        ? `color-mix(in srgb, ${color} 35%, transparent)`\n        : \"color-mix(in srgb, var(--ds-color-accent) 35%, transparent)\";\n\n  return (\n    <div\n      ref={containerRef}\n      className={mergeClassNames(\"relative overflow-hidden\", className)}\n      style={style}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsInside(true)}\n      onMouseLeave={() => setIsInside(false)}\n      onClick={handleClick}\n    >\n      {/* Cursor glow effect */}\n      {enabled && isInside && variant === \"glow\" && (\n        <motion.div\n          className=\"pointer-events-none absolute z-10\"\n          style={{\n            left: cursorPos.x,\n            top: cursorPos.y,\n            width: sizeConfig[size].base * 2,\n            height: sizeConfig[size].base * 2,\n            transform: \"translate(-50%, -50%)\",\n            background: `radial-gradient(circle, ${glowColor} 0%, transparent 70%)`,\n            filter: blur ? `blur(${blur}px)` : undefined,\n          }}\n          initial={{ scale: 0, opacity: 0 }}\n          animate={{ scale: 1, opacity: 1 }}\n          exit={{ scale: 0, opacity: 0 }}\n        />\n      )}\n\n      {/* Particles */}\n      <AnimatePresence>\n        {enabled &&\n          particles.map((particle) => {\n            const animation = getParticleAnimation(particle);\n            return (\n              <motion.div\n                key={particle.id}\n                className=\"pointer-events-none absolute rounded-full z-20\"\n                style={{\n                  left: particle.x,\n                  top: particle.y,\n                  width: particle.size,\n                  height: particle.size,\n                  backgroundColor: particle.color,\n                  transform: \"translate(-50%, -50%)\",\n                  filter: blur ? `blur(${blur}px)` : undefined,\n                }}\n                {...animation}\n                transition={{\n                  duration: duration / 1000,\n                  ease: \"easeOut\",\n                }}\n              />\n            );\n          })}\n      </AnimatePresence>\n\n      {/* Children content */}\n      <div className=\"relative z-0\">{children}</div>\n    </div>\n  );\n};\n\nSplashCursor.displayName = \"SplashCursor\";\n\nexport default SplashCursor;\n"],"mappings":"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"}

package/dist/chunks/{spotlight-card-B3L3K21T.cjs → spotlight-card-Bh7KG0vZ.cjs}

@@ -107,4 +107,4 @@ Object.defineProperty(exports, "SpotlightCard", {
 	}
 });
 
-//# sourceMappingURL=spotlight-card-B3L3K21T.cjs.map
+//# sourceMappingURL=spotlight-card-Bh7KG0vZ.cjs.map

package/dist/chunks/{spotlight-card-B3L3K21T.cjs.map → spotlight-card-Bh7KG0vZ.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"spotlight-card-B3L3K21T.cjs","names":[],"sources":["../../src/components/effects/spotlight-card/SpotlightCard.tsx"],"sourcesContent":["import { useState, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SpotlightCardProps } from \"./types\";\n\nconst borderRadiusMap = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  \"2xl\": \"rounded-2xl\",\n  full: \"rounded-full\",\n};\n\nconst paddingMap = {\n  none: \"\",\n  sm: \"p-3\",\n  md: \"p-5\",\n  lg: \"p-7\",\n  xl: \"p-10\",\n};\n\nconst variantStyles = {\n  glass: `\n    bg-ds-surface-1/70\n    backdrop-blur-2xl\n    border border-ds-border-2/60\n    shadow-xl\n  `,\n  solid: `\n    bg-ds-surface-1\n    border border-ds-border-2\n    shadow-lg\n  `,\n  outlined: `\n    bg-transparent\n    border-2 border-ds-border-2\n  `,\n};\n\nexport const SpotlightCard = ({\n  children,\n  className,\n  spotlightColor = \"rgba(115, 103, 240, 0.15)\",\n  spotlightSize = 350,\n  spotlightEnabled = true,\n  variant = \"glass\",\n  borderRadius = \"xl\",\n  padding = \"md\",\n  hoverScale = true,\n  style,\n  onClick,\n}: SpotlightCardProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current || !spotlightEnabled) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    setMousePosition({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n  };\n\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n  };\n\n  const spotlightStyle =\n    spotlightEnabled && isHovered\n      ? {\n          background: `radial-gradient(${spotlightSize}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor}, transparent 80%)`,\n        }\n      : {};\n\n  return (\n    <motion.div\n      ref={containerRef}\n      className={mergeClassNames(\n        \"relative overflow-hidden transition-all duration-300\",\n        borderRadiusMap[borderRadius],\n        paddingMap[padding],\n        variantStyles[variant],\n        onClick && \"cursor-pointer\",\n        className,\n      )}\n      style={style}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onClick={onClick}\n      whileHover={hoverScale ? { scale: 1.02 } : undefined}\n      whileTap={onClick ? { scale: 0.98 } : undefined}\n      transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n    >\n      {/* Spotlight overlay */}\n      {spotlightEnabled && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-0\"\n          style={spotlightStyle}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: isHovered ? 1 : 0 }}\n          transition={{ duration: 0.3 }}\n        />\n      )}\n\n      {/* Border glow effect */}\n      {spotlightEnabled && isHovered && (\n        <motion.div\n          className={mergeClassNames(\n            \"pointer-events-none absolute inset-0 z-0\",\n            borderRadiusMap[borderRadius],\n          )}\n          style={{\n            background: `radial-gradient(${spotlightSize * 0.6}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor.replace(\"0.15\", \"0.3\")}, transparent 70%)`,\n            filter: \"blur(20px)\",\n          }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.2 }}\n        />\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10\">{children}</div>\n    </motion.div>\n  );\n};\n\nSpotlightCard.displayName = \"SpotlightCard\";\n\nexport default SpotlightCard;\n"],"mappings":";;;;;;AAKA,IAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,MAAM;CACP;AAED,IAAM,aAAa;CACjB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,gBAAgB;CACpB,OAAO;;;;;;CAMP,OAAO;;;;;CAKP,UAAU;;;;CAIX;AAED,IAAa,iBAAiB,EAC5B,UACA,WACA,iBAAiB,6BACjB,gBAAgB,KAChB,mBAAmB,MACnB,UAAU,SACV,eAAe,MACf,UAAU,MACV,aAAa,MACb,OACA,cACwB;CACxB,MAAM,gBAAA,GAAA,MAAA,QAAsC,KAAK;CACjD,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,UAA6B;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CAClE,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAyB,MAAM;CAEjD,MAAM,mBAAmB,MAAwC;AAC/D,MAAI,CAAC,aAAa,WAAW,CAAC,iBAAkB;EAChD,MAAM,OAAO,aAAa,QAAQ,uBAAuB;AACzD,mBAAiB;GACf,GAAG,EAAE,UAAU,KAAK;GACpB,GAAG,EAAE,UAAU,KAAK;GACrB,CAAC;;CAGJ,MAAM,yBAAyB;AAC7B,eAAa,KAAK;;CAGpB,MAAM,yBAAyB;AAC7B,eAAa,MAAM;;CAGrB,MAAM,iBACJ,oBAAoB,YAChB,EACE,YAAY,mBAAmB,cAAc,eAAe,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,qBACvH,GACD,EAAE;AAER,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAA,OAAO,KAAR;EACE,KAAK;EACL,WAAW,cAAA,gBACT,wDACA,gBAAgB,eAChB,WAAW,UACX,cAAc,UACd,WAAW,kBACX,UACD;EACM;EACP,aAAa;EACb,cAAc;EACd,cAAc;EACL;EACT,YAAY,aAAa,EAAE,OAAO,MAAM,GAAG,KAAA;EAC3C,UAAU,UAAU,EAAE,OAAO,KAAM,GAAG,KAAA;EACtC,YAAY;GAAE,MAAM;GAAU,WAAW;GAAK,SAAS;GAAI;YAjB7D;GAoBG,oBACC,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,WAAU;IACV,OAAO;IACP,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,YAAY,IAAI,GAAG;IACvC,YAAY,EAAE,UAAU,IAAK;IAC7B,CAAA;GAIH,oBAAoB,aACnB,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,WAAW,cAAA,gBACT,4CACA,gBAAgB,cACjB;IACD,OAAO;KACL,YAAY,mBAAmB,gBAAgB,GAAI,eAAe,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,QAAQ,QAAQ,MAAM,CAAC;KACnJ,QAAQ;KACT;IACD,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY,EAAE,UAAU,IAAK;IAC7B,CAAA;GAIJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;IAAiB;IAAe,CAAA;GACpC;;;AAIjB,cAAc,cAAc"}
+{"version":3,"file":"spotlight-card-Bh7KG0vZ.cjs","names":[],"sources":["../../src/components/effects/spotlight-card/SpotlightCard.tsx"],"sourcesContent":["import { useState, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SpotlightCardProps } from \"./types\";\n\nconst borderRadiusMap = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  \"2xl\": \"rounded-2xl\",\n  full: \"rounded-full\",\n};\n\nconst paddingMap = {\n  none: \"\",\n  sm: \"p-3\",\n  md: \"p-5\",\n  lg: \"p-7\",\n  xl: \"p-10\",\n};\n\nconst variantStyles = {\n  glass: `\n    bg-ds-surface-1/70\n    backdrop-blur-2xl\n    border border-ds-border-2/60\n    shadow-xl\n  `,\n  solid: `\n    bg-ds-surface-1\n    border border-ds-border-2\n    shadow-lg\n  `,\n  outlined: `\n    bg-transparent\n    border-2 border-ds-border-2\n  `,\n};\n\nexport const SpotlightCard = ({\n  children,\n  className,\n  spotlightColor = \"rgba(115, 103, 240, 0.15)\",\n  spotlightSize = 350,\n  spotlightEnabled = true,\n  variant = \"glass\",\n  borderRadius = \"xl\",\n  padding = \"md\",\n  hoverScale = true,\n  style,\n  onClick,\n}: SpotlightCardProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current || !spotlightEnabled) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    setMousePosition({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n  };\n\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n  };\n\n  const spotlightStyle =\n    spotlightEnabled && isHovered\n      ? {\n          background: `radial-gradient(${spotlightSize}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor}, transparent 80%)`,\n        }\n      : {};\n\n  return (\n    <motion.div\n      ref={containerRef}\n      className={mergeClassNames(\n        \"relative overflow-hidden transition-all duration-300\",\n        borderRadiusMap[borderRadius],\n        paddingMap[padding],\n        variantStyles[variant],\n        onClick && \"cursor-pointer\",\n        className,\n      )}\n      style={style}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onClick={onClick}\n      whileHover={hoverScale ? { scale: 1.02 } : undefined}\n      whileTap={onClick ? { scale: 0.98 } : undefined}\n      transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n    >\n      {/* Spotlight overlay */}\n      {spotlightEnabled && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-0\"\n          style={spotlightStyle}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: isHovered ? 1 : 0 }}\n          transition={{ duration: 0.3 }}\n        />\n      )}\n\n      {/* Border glow effect */}\n      {spotlightEnabled && isHovered && (\n        <motion.div\n          className={mergeClassNames(\n            \"pointer-events-none absolute inset-0 z-0\",\n            borderRadiusMap[borderRadius],\n          )}\n          style={{\n            background: `radial-gradient(${spotlightSize * 0.6}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor.replace(\"0.15\", \"0.3\")}, transparent 70%)`,\n            filter: \"blur(20px)\",\n          }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.2 }}\n        />\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10\">{children}</div>\n    </motion.div>\n  );\n};\n\nSpotlightCard.displayName = \"SpotlightCard\";\n\nexport default SpotlightCard;\n"],"mappings":";;;;;;AAKA,IAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,MAAM;CACP;AAED,IAAM,aAAa;CACjB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,gBAAgB;CACpB,OAAO;;;;;;CAMP,OAAO;;;;;CAKP,UAAU;;;;CAIX;AAED,IAAa,iBAAiB,EAC5B,UACA,WACA,iBAAiB,6BACjB,gBAAgB,KAChB,mBAAmB,MACnB,UAAU,SACV,eAAe,MACf,UAAU,MACV,aAAa,MACb,OACA,cACwB;CACxB,MAAM,gBAAA,GAAA,MAAA,QAAsC,KAAK;CACjD,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,UAA6B;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CAClE,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAyB,MAAM;CAEjD,MAAM,mBAAmB,MAAwC;AAC/D,MAAI,CAAC,aAAa,WAAW,CAAC,iBAAkB;EAChD,MAAM,OAAO,aAAa,QAAQ,uBAAuB;AACzD,mBAAiB;GACf,GAAG,EAAE,UAAU,KAAK;GACpB,GAAG,EAAE,UAAU,KAAK;GACrB,CAAC;;CAGJ,MAAM,yBAAyB;AAC7B,eAAa,KAAK;;CAGpB,MAAM,yBAAyB;AAC7B,eAAa,MAAM;;CAGrB,MAAM,iBACJ,oBAAoB,YAChB,EACE,YAAY,mBAAmB,cAAc,eAAe,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,qBACvH,GACD,EAAE;AAER,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAA,OAAO,KAAR;EACE,KAAK;EACL,WAAW,cAAA,gBACT,wDACA,gBAAgB,eAChB,WAAW,UACX,cAAc,UACd,WAAW,kBACX,UACD;EACM;EACP,aAAa;EACb,cAAc;EACd,cAAc;EACL;EACT,YAAY,aAAa,EAAE,OAAO,MAAM,GAAG,KAAA;EAC3C,UAAU,UAAU,EAAE,OAAO,KAAM,GAAG,KAAA;EACtC,YAAY;GAAE,MAAM;GAAU,WAAW;GAAK,SAAS;GAAI;YAjB7D;GAoBG,oBACC,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,WAAU;IACV,OAAO;IACP,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,YAAY,IAAI,GAAG;IACvC,YAAY,EAAE,UAAU,IAAK;IAC7B,CAAA;GAIH,oBAAoB,aACnB,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,WAAW,cAAA,gBACT,4CACA,gBAAgB,cACjB;IACD,OAAO;KACL,YAAY,mBAAmB,gBAAgB,GAAI,eAAe,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,QAAQ,QAAQ,MAAM,CAAC;KACnJ,QAAQ;KACT;IACD,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY,EAAE,UAAU,IAAK;IAC7B,CAAA;GAIJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;IAAiB;IAAe,CAAA;GACpC;;;AAIjB,cAAc,cAAc"}

package/dist/chunks/{spotlight-card-DIgacTxA.mjs → spotlight-card-D0uTxfPZ.mjs}

@@ -101,4 +101,4 @@ SpotlightCard.displayName = "SpotlightCard";
 //#endregion
 export { SpotlightCard as t };
 
-//# sourceMappingURL=spotlight-card-DIgacTxA.mjs.map
+//# sourceMappingURL=spotlight-card-D0uTxfPZ.mjs.map

package/dist/chunks/{spotlight-card-DIgacTxA.mjs.map → spotlight-card-D0uTxfPZ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"spotlight-card-DIgacTxA.mjs","names":[],"sources":["../../src/components/effects/spotlight-card/SpotlightCard.tsx"],"sourcesContent":["import { useState, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SpotlightCardProps } from \"./types\";\n\nconst borderRadiusMap = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  \"2xl\": \"rounded-2xl\",\n  full: \"rounded-full\",\n};\n\nconst paddingMap = {\n  none: \"\",\n  sm: \"p-3\",\n  md: \"p-5\",\n  lg: \"p-7\",\n  xl: \"p-10\",\n};\n\nconst variantStyles = {\n  glass: `\n    bg-ds-surface-1/70\n    backdrop-blur-2xl\n    border border-ds-border-2/60\n    shadow-xl\n  `,\n  solid: `\n    bg-ds-surface-1\n    border border-ds-border-2\n    shadow-lg\n  `,\n  outlined: `\n    bg-transparent\n    border-2 border-ds-border-2\n  `,\n};\n\nexport const SpotlightCard = ({\n  children,\n  className,\n  spotlightColor = \"rgba(115, 103, 240, 0.15)\",\n  spotlightSize = 350,\n  spotlightEnabled = true,\n  variant = \"glass\",\n  borderRadius = \"xl\",\n  padding = \"md\",\n  hoverScale = true,\n  style,\n  onClick,\n}: SpotlightCardProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current || !spotlightEnabled) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    setMousePosition({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n  };\n\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n  };\n\n  const spotlightStyle =\n    spotlightEnabled && isHovered\n      ? {\n          background: `radial-gradient(${spotlightSize}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor}, transparent 80%)`,\n        }\n      : {};\n\n  return (\n    <motion.div\n      ref={containerRef}\n      className={mergeClassNames(\n        \"relative overflow-hidden transition-all duration-300\",\n        borderRadiusMap[borderRadius],\n        paddingMap[padding],\n        variantStyles[variant],\n        onClick && \"cursor-pointer\",\n        className,\n      )}\n      style={style}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onClick={onClick}\n      whileHover={hoverScale ? { scale: 1.02 } : undefined}\n      whileTap={onClick ? { scale: 0.98 } : undefined}\n      transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n    >\n      {/* Spotlight overlay */}\n      {spotlightEnabled && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-0\"\n          style={spotlightStyle}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: isHovered ? 1 : 0 }}\n          transition={{ duration: 0.3 }}\n        />\n      )}\n\n      {/* Border glow effect */}\n      {spotlightEnabled && isHovered && (\n        <motion.div\n          className={mergeClassNames(\n            \"pointer-events-none absolute inset-0 z-0\",\n            borderRadiusMap[borderRadius],\n          )}\n          style={{\n            background: `radial-gradient(${spotlightSize * 0.6}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor.replace(\"0.15\", \"0.3\")}, transparent 70%)`,\n            filter: \"blur(20px)\",\n          }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.2 }}\n        />\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10\">{children}</div>\n    </motion.div>\n  );\n};\n\nSpotlightCard.displayName = \"SpotlightCard\";\n\nexport default SpotlightCard;\n"],"mappings":";;;;;AAKA,IAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,MAAM;CACP;AAED,IAAM,aAAa;CACjB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,gBAAgB;CACpB,OAAO;;;;;;CAMP,OAAO;;;;;CAKP,UAAU;;;;CAIX;AAED,IAAa,iBAAiB,EAC5B,UACA,WACA,iBAAiB,6BACjB,gBAAgB,KAChB,mBAAmB,MACnB,UAAU,SACV,eAAe,MACf,UAAU,MACV,aAAa,MACb,OACA,cACwB;CACxB,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,eAAe,oBAAoB,SAAS;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CAClE,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,MAAM,mBAAmB,MAAwC;AAC/D,MAAI,CAAC,aAAa,WAAW,CAAC,iBAAkB;EAChD,MAAM,OAAO,aAAa,QAAQ,uBAAuB;AACzD,mBAAiB;GACf,GAAG,EAAE,UAAU,KAAK;GACpB,GAAG,EAAE,UAAU,KAAK;GACrB,CAAC;;CAGJ,MAAM,yBAAyB;AAC7B,eAAa,KAAK;;CAGpB,MAAM,yBAAyB;AAC7B,eAAa,MAAM;;CAGrB,MAAM,iBACJ,oBAAoB,YAChB,EACE,YAAY,mBAAmB,cAAc,eAAe,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,qBACvH,GACD,EAAE;AAER,QACE,qBAAC,OAAO,KAAR;EACE,KAAK;EACL,WAAW,gBACT,wDACA,gBAAgB,eAChB,WAAW,UACX,cAAc,UACd,WAAW,kBACX,UACD;EACM;EACP,aAAa;EACb,cAAc;EACd,cAAc;EACL;EACT,YAAY,aAAa,EAAE,OAAO,MAAM,GAAG,KAAA;EAC3C,UAAU,UAAU,EAAE,OAAO,KAAM,GAAG,KAAA;EACtC,YAAY;GAAE,MAAM;GAAU,WAAW;GAAK,SAAS;GAAI;YAjB7D;GAoBG,oBACC,oBAAC,OAAO,KAAR;IACE,WAAU;IACV,OAAO;IACP,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,YAAY,IAAI,GAAG;IACvC,YAAY,EAAE,UAAU,IAAK;IAC7B,CAAA;GAIH,oBAAoB,aACnB,oBAAC,OAAO,KAAR;IACE,WAAW,gBACT,4CACA,gBAAgB,cACjB;IACD,OAAO;KACL,YAAY,mBAAmB,gBAAgB,GAAI,eAAe,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,QAAQ,QAAQ,MAAM,CAAC;KACnJ,QAAQ;KACT;IACD,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY,EAAE,UAAU,IAAK;IAC7B,CAAA;GAIJ,oBAAC,OAAD;IAAK,WAAU;IAAiB;IAAe,CAAA;GACpC;;;AAIjB,cAAc,cAAc"}
+{"version":3,"file":"spotlight-card-D0uTxfPZ.mjs","names":[],"sources":["../../src/components/effects/spotlight-card/SpotlightCard.tsx"],"sourcesContent":["import { useState, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SpotlightCardProps } from \"./types\";\n\nconst borderRadiusMap = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  \"2xl\": \"rounded-2xl\",\n  full: \"rounded-full\",\n};\n\nconst paddingMap = {\n  none: \"\",\n  sm: \"p-3\",\n  md: \"p-5\",\n  lg: \"p-7\",\n  xl: \"p-10\",\n};\n\nconst variantStyles = {\n  glass: `\n    bg-ds-surface-1/70\n    backdrop-blur-2xl\n    border border-ds-border-2/60\n    shadow-xl\n  `,\n  solid: `\n    bg-ds-surface-1\n    border border-ds-border-2\n    shadow-lg\n  `,\n  outlined: `\n    bg-transparent\n    border-2 border-ds-border-2\n  `,\n};\n\nexport const SpotlightCard = ({\n  children,\n  className,\n  spotlightColor = \"rgba(115, 103, 240, 0.15)\",\n  spotlightSize = 350,\n  spotlightEnabled = true,\n  variant = \"glass\",\n  borderRadius = \"xl\",\n  padding = \"md\",\n  hoverScale = true,\n  style,\n  onClick,\n}: SpotlightCardProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current || !spotlightEnabled) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    setMousePosition({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n  };\n\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n  };\n\n  const spotlightStyle =\n    spotlightEnabled && isHovered\n      ? {\n          background: `radial-gradient(${spotlightSize}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor}, transparent 80%)`,\n        }\n      : {};\n\n  return (\n    <motion.div\n      ref={containerRef}\n      className={mergeClassNames(\n        \"relative overflow-hidden transition-all duration-300\",\n        borderRadiusMap[borderRadius],\n        paddingMap[padding],\n        variantStyles[variant],\n        onClick && \"cursor-pointer\",\n        className,\n      )}\n      style={style}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onClick={onClick}\n      whileHover={hoverScale ? { scale: 1.02 } : undefined}\n      whileTap={onClick ? { scale: 0.98 } : undefined}\n      transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n    >\n      {/* Spotlight overlay */}\n      {spotlightEnabled && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-0\"\n          style={spotlightStyle}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: isHovered ? 1 : 0 }}\n          transition={{ duration: 0.3 }}\n        />\n      )}\n\n      {/* Border glow effect */}\n      {spotlightEnabled && isHovered && (\n        <motion.div\n          className={mergeClassNames(\n            \"pointer-events-none absolute inset-0 z-0\",\n            borderRadiusMap[borderRadius],\n          )}\n          style={{\n            background: `radial-gradient(${spotlightSize * 0.6}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor.replace(\"0.15\", \"0.3\")}, transparent 70%)`,\n            filter: \"blur(20px)\",\n          }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.2 }}\n        />\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10\">{children}</div>\n    </motion.div>\n  );\n};\n\nSpotlightCard.displayName = \"SpotlightCard\";\n\nexport default SpotlightCard;\n"],"mappings":";;;;;AAKA,IAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,MAAM;CACP;AAED,IAAM,aAAa;CACjB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,gBAAgB;CACpB,OAAO;;;;;;CAMP,OAAO;;;;;CAKP,UAAU;;;;CAIX;AAED,IAAa,iBAAiB,EAC5B,UACA,WACA,iBAAiB,6BACjB,gBAAgB,KAChB,mBAAmB,MACnB,UAAU,SACV,eAAe,MACf,UAAU,MACV,aAAa,MACb,OACA,cACwB;CACxB,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,eAAe,oBAAoB,SAAS;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CAClE,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,MAAM,mBAAmB,MAAwC;AAC/D,MAAI,CAAC,aAAa,WAAW,CAAC,iBAAkB;EAChD,MAAM,OAAO,aAAa,QAAQ,uBAAuB;AACzD,mBAAiB;GACf,GAAG,EAAE,UAAU,KAAK;GACpB,GAAG,EAAE,UAAU,KAAK;GACrB,CAAC;;CAGJ,MAAM,yBAAyB;AAC7B,eAAa,KAAK;;CAGpB,MAAM,yBAAyB;AAC7B,eAAa,MAAM;;CAGrB,MAAM,iBACJ,oBAAoB,YAChB,EACE,YAAY,mBAAmB,cAAc,eAAe,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,qBACvH,GACD,EAAE;AAER,QACE,qBAAC,OAAO,KAAR;EACE,KAAK;EACL,WAAW,gBACT,wDACA,gBAAgB,eAChB,WAAW,UACX,cAAc,UACd,WAAW,kBACX,UACD;EACM;EACP,aAAa;EACb,cAAc;EACd,cAAc;EACL;EACT,YAAY,aAAa,EAAE,OAAO,MAAM,GAAG,KAAA;EAC3C,UAAU,UAAU,EAAE,OAAO,KAAM,GAAG,KAAA;EACtC,YAAY;GAAE,MAAM;GAAU,WAAW;GAAK,SAAS;GAAI;YAjB7D;GAoBG,oBACC,oBAAC,OAAO,KAAR;IACE,WAAU;IACV,OAAO;IACP,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,YAAY,IAAI,GAAG;IACvC,YAAY,EAAE,UAAU,IAAK;IAC7B,CAAA;GAIH,oBAAoB,aACnB,oBAAC,OAAO,KAAR;IACE,WAAW,gBACT,4CACA,gBAAgB,cACjB;IACD,OAAO;KACL,YAAY,mBAAmB,gBAAgB,GAAI,eAAe,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,QAAQ,QAAQ,MAAM,CAAC;KACnJ,QAAQ;KACT;IACD,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY,EAAE,UAAU,IAAK;IAC7B,CAAA;GAIJ,oBAAC,OAAD;IAAK,WAAU;IAAiB;IAAe,CAAA;GACpC;;;AAIjB,cAAc,cAAc"}