erp-pro-ui 0.2.0 → 0.2.2

package/dist/chunks/{dialog-CanVyiAD.mjs → dialog-DSyq6MS3.mjs}

@@ -346,7 +346,7 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4" }),
 				showClose && /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "absolute right-4 top-4 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2",
+					className: "absolute right-4 top-4 z-10 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2",
 					"aria-label": "Close dialog",
 					onClick: () => onOpenChange?.(false),
 					children: /* @__PURE__ */ jsx(CloseIcon, {
@@ -390,4 +390,4 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 //#endregion
 export { Dialog as t };
 
-//# sourceMappingURL=dialog-CanVyiAD.mjs.map
+//# sourceMappingURL=dialog-DSyq6MS3.mjs.map

package/dist/chunks/{dialog-CanVyiAD.mjs.map → dialog-DSyq6MS3.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"dialog-CanVyiAD.mjs","names":[],"sources":["../../src/components/overlays/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  motion,\n  AnimatePresence,\n  type TargetAndTransition,\n} from \"framer-motion\";\nimport {\n  AlertCircleIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  QuestionCircleIcon,\n} from \"../../icons\";\nimport type {\n  DialogProps,\n  DialogVariant,\n  DialogAnimation,\n  DialogPreset,\n} from \"./types\";\nexport type { DialogProps, DialogVariant, DialogAnimation, DialogPreset };\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\n// Animation preset type\ninterface AnimationPreset {\n  initial: TargetAndTransition;\n  animate: TargetAndTransition;\n  exit: TargetAndTransition;\n}\n\n// Animation presets for different entrance/exit effects\nconst animationVariants: Record<DialogAnimation, AnimationPreset> = {\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.9, y: 20 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.95, y: 10 },\n  },\n  slideUp: {\n    initial: { opacity: 0, y: 100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 50 },\n  },\n  slideDown: {\n    initial: { opacity: 0, y: -100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -50 },\n  },\n  slideLeft: {\n    initial: { opacity: 0, x: 100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: 50 },\n  },\n  slideRight: {\n    initial: { opacity: 0, x: -100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: -50 },\n  },\n  elastic: {\n    initial: { opacity: 0, scale: 0.5, y: 50 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.8, y: 20 },\n  },\n  bounce: {\n    initial: { opacity: 0, scale: 0.3, y: -100 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.5, y: -50 },\n  },\n  flip: {\n    initial: { opacity: 0, rotateX: -90, scale: 0.9 },\n    animate: { opacity: 1, rotateX: 0, scale: 1 },\n    exit: { opacity: 0, rotateX: 90, scale: 0.9 },\n  },\n  zoom: {\n    initial: { opacity: 0, scale: 0, rotate: -10 },\n    animate: { opacity: 1, scale: 1, rotate: 0 },\n    exit: { opacity: 0, scale: 0.5, rotate: 5 },\n  },\n};\n\n// Transition configs for each animation type\nconst animationTransitions: Record<DialogAnimation, object> = {\n  fade: { duration: 0.2 },\n  scale: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideUp: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideDown: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideLeft: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideRight: { type: \"spring\", damping: 25, stiffness: 300 },\n  elastic: { type: \"spring\", damping: 10, stiffness: 100 },\n  bounce: { type: \"spring\", damping: 8, stiffness: 200, bounce: 0.5 },\n  flip: { type: \"spring\", damping: 15, stiffness: 150 },\n  zoom: { type: \"spring\", damping: 20, stiffness: 200 },\n};\n\n// Crystal glass panel base styling\nconst basePanel = `\n  relative w-full max-w-lg rounded-2xl overflow-hidden\n  border border-ds-border-2\n  backdrop-blur-2xl backdrop-saturate-150\n  bg-ds-surface-1/95\n  p-6\n  shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]\n  ring-1 ring-inset ring-ds-border-3/40\n`;\n\n// Variant accent colors for icons and confirm buttons\nconst variantStyles: Record<\n  DialogVariant,\n  { icon: string; button: string; iconColor: string }\n> = {\n  default: {\n    icon: \"bg-ds-accent-subtle\",\n    button: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent\",\n    iconColor: \"text-ds-1\",\n  },\n  destructive: {\n    icon: \"bg-ds-state-error-surface\",\n    button: \"bg-ds-state-danger hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-error-text\",\n  },\n  success: {\n    icon: \"bg-ds-state-success-surface\",\n    button: \"bg-ds-state-success hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-success-text\",\n  },\n  warning: {\n    icon: \"bg-ds-state-warning-surface\",\n    button: \"bg-ds-state-warning hover:opacity-90 text-ds-1\",\n    iconColor: \"text-ds-state-warning-text\",\n  },\n  info: {\n    icon: \"bg-ds-state-info-surface\",\n    button: \"bg-ds-state-info hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-info-text\",\n  },\n};\n\n// Default icons per variant\nconst VariantIcon = ({ variant }: { variant: DialogVariant }): ReactElement => {\n  const icons: Record<DialogVariant, ReactElement> = {\n    default: <QuestionCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    destructive: <AlertTriangleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    success: <CheckCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    warning: <AlertCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    info: <InfoCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n  };\n  return icons[variant];\n};\n\n// Loading spinner\nconst Spinner = () => (\n  <LoaderIcon className=\"animate-spin w-4 h-4\" aria-hidden=\"true\" />\n);\n\nconst DIALOG_ROOT_Z_INDEX = 2147483000;\n\nexport const Dialog = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  closeOnOverlay = true,\n  showClose = true,\n  className = \"\",\n  widthClassName = \"\",\n  variant = \"default\",\n  preset = \"custom\",\n  confirmLabel = \"OK\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  onCancel,\n  loading = false,\n  icon,\n  animation = \"scale\",\n}: DialogProps) => {\n  const currentAnimation = animationVariants[animation];\n  const currentTransition = animationTransitions[animation];\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  useOverlayEffects(panelRef, open);\n\n  useEffect(() => {\n    if (!open || typeof window === \"undefined\") return;\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange?.(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKey);\n    return () => window.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  const handleOverlayClick = () => {\n    if (closeOnOverlay) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    onOpenChange?.(false);\n  };\n\n  const handleConfirm = () => {\n    onConfirm?.();\n    if (!loading) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const styles = variantStyles[variant];\n  const showPresetButtons = preset !== \"custom\" && !footer;\n  const showCancelButton = preset === \"confirm\";\n\n  // Render preset buttons\n  const renderFooter = () => {\n    if (footer) return footer;\n    if (!showPresetButtons) return null;\n\n    return (\n      <div className=\"flex gap-3 justify-end w-full\">\n        {showCancelButton && (\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={loading}\n            className=\"inline-flex items-center justify-center gap-2 cursor-pointer\n              py-2.5 px-4 text-sm font-semibold leading-none\n              rounded-lg transition-all duration-200\n              bg-ds-surface-2 border border-ds-border-2 text-ds-1\n              shadow-sm hover:bg-ds-surface-3\n              active:scale-95 hover:opacity-90\n              disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {cancelLabel}\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={handleConfirm}\n          disabled={loading}\n          className={`inline-flex items-center justify-center gap-2 cursor-pointer\n            py-2.5 px-4 text-sm font-semibold leading-none\n            rounded-lg transition-all duration-200\n            shadow-md hover:shadow-lg\n            active:scale-95 hover:opacity-90\n            disabled:opacity-50 disabled:cursor-not-allowed ${styles.button}`}\n        >\n          {loading && <Spinner />}\n          {confirmLabel}\n        </button>\n      </div>\n    );\n  };\n\n  const dialogNode = (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 flex items-center justify-center px-4 overlay-backdrop\"\n          style={{ zIndex: DIALOG_ROOT_Z_INDEX }}\n          role=\"presentation\"\n        >\n          {/* Backdrop with blur */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n            className=\"fixed inset-0 bg-black/30 backdrop-blur-sm\"\n            onClick={handleOverlayClick}\n          />\n\n          {/* Crystal panel */}\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} overlay-panel ${className} ${widthClassName}`.trim()}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial={currentAnimation.initial}\n            animate={currentAnimation.animate}\n            exit={currentAnimation.exit}\n            transition={currentTransition}\n          >\n            {/* Subtle gradient overlay for crystal effect */}\n            <div className=\"pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4\" />\n\n            {/* Close button */}\n            {showClose && (\n              <button\n                type=\"button\"\n                className=\"absolute right-4 top-4 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2\"\n                aria-label=\"Close dialog\"\n                onClick={() => onOpenChange?.(false)}\n              >\n                <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n              </button>\n            )}\n\n            {/* Content */}\n            <div className=\"relative flex gap-4\">\n              {/* Icon */}\n              {preset !== \"custom\" && (\n                <div\n                  className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`}\n                >\n                  <span className={styles.iconColor}>\n                    {icon || <VariantIcon variant={variant} />}\n                  </span>\n                </div>\n              )}\n\n              {/* Text content */}\n              <div className=\"flex-1 min-w-0\">\n                {title && (\n                  <h2 className=\"pr-8 text-lg font-semibold text-ds-1\">\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p className=\"mt-1 text-sm leading-relaxed text-ds-2\">\n                    {description}\n                  </p>\n                )}\n              </div>\n            </div>\n\n            {/* Children content */}\n            {children && (\n              <div className=\"mt-4 space-y-4 relative\">{children}</div>\n            )}\n\n            {/* Footer */}\n            {(footer || showPresetButtons) && (\n              <footer className=\"mt-6 flex justify-end gap-3 relative\">\n                {renderFooter()}\n              </footer>\n            )}\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  if (typeof document === \"undefined\") {\n    return dialogNode;\n  }\n\n  return createPortal(dialogNode, document.body);\n};\n"],"mappings":"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"}
+{"version":3,"file":"dialog-DSyq6MS3.mjs","names":[],"sources":["../../src/components/overlays/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  motion,\n  AnimatePresence,\n  type TargetAndTransition,\n} from \"framer-motion\";\nimport {\n  AlertCircleIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  QuestionCircleIcon,\n} from \"../../icons\";\nimport type {\n  DialogProps,\n  DialogVariant,\n  DialogAnimation,\n  DialogPreset,\n} from \"./types\";\nexport type { DialogProps, DialogVariant, DialogAnimation, DialogPreset };\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\n// Animation preset type\ninterface AnimationPreset {\n  initial: TargetAndTransition;\n  animate: TargetAndTransition;\n  exit: TargetAndTransition;\n}\n\n// Animation presets for different entrance/exit effects\nconst animationVariants: Record<DialogAnimation, AnimationPreset> = {\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.9, y: 20 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.95, y: 10 },\n  },\n  slideUp: {\n    initial: { opacity: 0, y: 100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 50 },\n  },\n  slideDown: {\n    initial: { opacity: 0, y: -100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -50 },\n  },\n  slideLeft: {\n    initial: { opacity: 0, x: 100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: 50 },\n  },\n  slideRight: {\n    initial: { opacity: 0, x: -100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: -50 },\n  },\n  elastic: {\n    initial: { opacity: 0, scale: 0.5, y: 50 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.8, y: 20 },\n  },\n  bounce: {\n    initial: { opacity: 0, scale: 0.3, y: -100 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.5, y: -50 },\n  },\n  flip: {\n    initial: { opacity: 0, rotateX: -90, scale: 0.9 },\n    animate: { opacity: 1, rotateX: 0, scale: 1 },\n    exit: { opacity: 0, rotateX: 90, scale: 0.9 },\n  },\n  zoom: {\n    initial: { opacity: 0, scale: 0, rotate: -10 },\n    animate: { opacity: 1, scale: 1, rotate: 0 },\n    exit: { opacity: 0, scale: 0.5, rotate: 5 },\n  },\n};\n\n// Transition configs for each animation type\nconst animationTransitions: Record<DialogAnimation, object> = {\n  fade: { duration: 0.2 },\n  scale: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideUp: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideDown: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideLeft: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideRight: { type: \"spring\", damping: 25, stiffness: 300 },\n  elastic: { type: \"spring\", damping: 10, stiffness: 100 },\n  bounce: { type: \"spring\", damping: 8, stiffness: 200, bounce: 0.5 },\n  flip: { type: \"spring\", damping: 15, stiffness: 150 },\n  zoom: { type: \"spring\", damping: 20, stiffness: 200 },\n};\n\n// Crystal glass panel base styling\nconst basePanel = `\n  relative w-full max-w-lg rounded-2xl overflow-hidden\n  border border-ds-border-2\n  backdrop-blur-2xl backdrop-saturate-150\n  bg-ds-surface-1/95\n  p-6\n  shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]\n  ring-1 ring-inset ring-ds-border-3/40\n`;\n\n// Variant accent colors for icons and confirm buttons\nconst variantStyles: Record<\n  DialogVariant,\n  { icon: string; button: string; iconColor: string }\n> = {\n  default: {\n    icon: \"bg-ds-accent-subtle\",\n    button: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent\",\n    iconColor: \"text-ds-1\",\n  },\n  destructive: {\n    icon: \"bg-ds-state-error-surface\",\n    button: \"bg-ds-state-danger hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-error-text\",\n  },\n  success: {\n    icon: \"bg-ds-state-success-surface\",\n    button: \"bg-ds-state-success hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-success-text\",\n  },\n  warning: {\n    icon: \"bg-ds-state-warning-surface\",\n    button: \"bg-ds-state-warning hover:opacity-90 text-ds-1\",\n    iconColor: \"text-ds-state-warning-text\",\n  },\n  info: {\n    icon: \"bg-ds-state-info-surface\",\n    button: \"bg-ds-state-info hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-info-text\",\n  },\n};\n\n// Default icons per variant\nconst VariantIcon = ({ variant }: { variant: DialogVariant }): ReactElement => {\n  const icons: Record<DialogVariant, ReactElement> = {\n    default: <QuestionCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    destructive: <AlertTriangleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    success: <CheckCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    warning: <AlertCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    info: <InfoCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n  };\n  return icons[variant];\n};\n\n// Loading spinner\nconst Spinner = () => (\n  <LoaderIcon className=\"animate-spin w-4 h-4\" aria-hidden=\"true\" />\n);\n\nconst DIALOG_ROOT_Z_INDEX = 2147483000;\n\nexport const Dialog = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  closeOnOverlay = true,\n  showClose = true,\n  className = \"\",\n  widthClassName = \"\",\n  variant = \"default\",\n  preset = \"custom\",\n  confirmLabel = \"OK\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  onCancel,\n  loading = false,\n  icon,\n  animation = \"scale\",\n}: DialogProps) => {\n  const currentAnimation = animationVariants[animation];\n  const currentTransition = animationTransitions[animation];\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  useOverlayEffects(panelRef, open);\n\n  useEffect(() => {\n    if (!open || typeof window === \"undefined\") return;\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange?.(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKey);\n    return () => window.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  const handleOverlayClick = () => {\n    if (closeOnOverlay) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    onOpenChange?.(false);\n  };\n\n  const handleConfirm = () => {\n    onConfirm?.();\n    if (!loading) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const styles = variantStyles[variant];\n  const showPresetButtons = preset !== \"custom\" && !footer;\n  const showCancelButton = preset === \"confirm\";\n\n  // Render preset buttons\n  const renderFooter = () => {\n    if (footer) return footer;\n    if (!showPresetButtons) return null;\n\n    return (\n      <div className=\"flex gap-3 justify-end w-full\">\n        {showCancelButton && (\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={loading}\n            className=\"inline-flex items-center justify-center gap-2 cursor-pointer\n              py-2.5 px-4 text-sm font-semibold leading-none\n              rounded-lg transition-all duration-200\n              bg-ds-surface-2 border border-ds-border-2 text-ds-1\n              shadow-sm hover:bg-ds-surface-3\n              active:scale-95 hover:opacity-90\n              disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {cancelLabel}\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={handleConfirm}\n          disabled={loading}\n          className={`inline-flex items-center justify-center gap-2 cursor-pointer\n            py-2.5 px-4 text-sm font-semibold leading-none\n            rounded-lg transition-all duration-200\n            shadow-md hover:shadow-lg\n            active:scale-95 hover:opacity-90\n            disabled:opacity-50 disabled:cursor-not-allowed ${styles.button}`}\n        >\n          {loading && <Spinner />}\n          {confirmLabel}\n        </button>\n      </div>\n    );\n  };\n\n  const dialogNode = (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 flex items-center justify-center px-4 overlay-backdrop\"\n          style={{ zIndex: DIALOG_ROOT_Z_INDEX }}\n          role=\"presentation\"\n        >\n          {/* Backdrop with blur */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n            className=\"fixed inset-0 bg-black/30 backdrop-blur-sm\"\n            onClick={handleOverlayClick}\n          />\n\n          {/* Crystal panel */}\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} overlay-panel ${className} ${widthClassName}`.trim()}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial={currentAnimation.initial}\n            animate={currentAnimation.animate}\n            exit={currentAnimation.exit}\n            transition={currentTransition}\n          >\n            {/* Subtle gradient overlay for crystal effect */}\n            <div className=\"pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4\" />\n\n            {/* Close button */}\n            {showClose && (\n              <button\n                type=\"button\"\n                className=\"absolute right-4 top-4 z-10 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2\"\n                aria-label=\"Close dialog\"\n                onClick={() => onOpenChange?.(false)}\n              >\n                <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n              </button>\n            )}\n\n            {/* Content */}\n            <div className=\"relative flex gap-4\">\n              {/* Icon */}\n              {preset !== \"custom\" && (\n                <div\n                  className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`}\n                >\n                  <span className={styles.iconColor}>\n                    {icon || <VariantIcon variant={variant} />}\n                  </span>\n                </div>\n              )}\n\n              {/* Text content */}\n              <div className=\"flex-1 min-w-0\">\n                {title && (\n                  <h2 className=\"pr-8 text-lg font-semibold text-ds-1\">\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p className=\"mt-1 text-sm leading-relaxed text-ds-2\">\n                    {description}\n                  </p>\n                )}\n              </div>\n            </div>\n\n            {/* Children content */}\n            {children && (\n              <div className=\"mt-4 space-y-4 relative\">{children}</div>\n            )}\n\n            {/* Footer */}\n            {(footer || showPresetButtons) && (\n              <footer className=\"mt-6 flex justify-end gap-3 relative\">\n                {renderFooter()}\n              </footer>\n            )}\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  if (typeof document === \"undefined\") {\n    return dialogNode;\n  }\n\n  return createPortal(dialogNode, document.body);\n};\n"],"mappings":"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"}

package/dist/chunks/{dialog-fffx1-4D.cjs → dialog-J2ZTSTpL.cjs}

@@ -347,7 +347,7 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4" }),
 				showClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
-					className: "absolute right-4 top-4 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2",
+					className: "absolute right-4 top-4 z-10 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2",
 					"aria-label": "Close dialog",
 					onClick: () => onOpenChange?.(false),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
@@ -396,4 +396,4 @@ Object.defineProperty(exports, "Dialog", {
 	}
 });
 
-//# sourceMappingURL=dialog-fffx1-4D.cjs.map
+//# sourceMappingURL=dialog-J2ZTSTpL.cjs.map

package/dist/chunks/{dialog-fffx1-4D.cjs.map → dialog-J2ZTSTpL.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"dialog-fffx1-4D.cjs","names":[],"sources":["../../src/components/overlays/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  motion,\n  AnimatePresence,\n  type TargetAndTransition,\n} from \"framer-motion\";\nimport {\n  AlertCircleIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  QuestionCircleIcon,\n} from \"../../icons\";\nimport type {\n  DialogProps,\n  DialogVariant,\n  DialogAnimation,\n  DialogPreset,\n} from \"./types\";\nexport type { DialogProps, DialogVariant, DialogAnimation, DialogPreset };\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\n// Animation preset type\ninterface AnimationPreset {\n  initial: TargetAndTransition;\n  animate: TargetAndTransition;\n  exit: TargetAndTransition;\n}\n\n// Animation presets for different entrance/exit effects\nconst animationVariants: Record<DialogAnimation, AnimationPreset> = {\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.9, y: 20 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.95, y: 10 },\n  },\n  slideUp: {\n    initial: { opacity: 0, y: 100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 50 },\n  },\n  slideDown: {\n    initial: { opacity: 0, y: -100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -50 },\n  },\n  slideLeft: {\n    initial: { opacity: 0, x: 100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: 50 },\n  },\n  slideRight: {\n    initial: { opacity: 0, x: -100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: -50 },\n  },\n  elastic: {\n    initial: { opacity: 0, scale: 0.5, y: 50 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.8, y: 20 },\n  },\n  bounce: {\n    initial: { opacity: 0, scale: 0.3, y: -100 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.5, y: -50 },\n  },\n  flip: {\n    initial: { opacity: 0, rotateX: -90, scale: 0.9 },\n    animate: { opacity: 1, rotateX: 0, scale: 1 },\n    exit: { opacity: 0, rotateX: 90, scale: 0.9 },\n  },\n  zoom: {\n    initial: { opacity: 0, scale: 0, rotate: -10 },\n    animate: { opacity: 1, scale: 1, rotate: 0 },\n    exit: { opacity: 0, scale: 0.5, rotate: 5 },\n  },\n};\n\n// Transition configs for each animation type\nconst animationTransitions: Record<DialogAnimation, object> = {\n  fade: { duration: 0.2 },\n  scale: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideUp: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideDown: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideLeft: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideRight: { type: \"spring\", damping: 25, stiffness: 300 },\n  elastic: { type: \"spring\", damping: 10, stiffness: 100 },\n  bounce: { type: \"spring\", damping: 8, stiffness: 200, bounce: 0.5 },\n  flip: { type: \"spring\", damping: 15, stiffness: 150 },\n  zoom: { type: \"spring\", damping: 20, stiffness: 200 },\n};\n\n// Crystal glass panel base styling\nconst basePanel = `\n  relative w-full max-w-lg rounded-2xl overflow-hidden\n  border border-ds-border-2\n  backdrop-blur-2xl backdrop-saturate-150\n  bg-ds-surface-1/95\n  p-6\n  shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]\n  ring-1 ring-inset ring-ds-border-3/40\n`;\n\n// Variant accent colors for icons and confirm buttons\nconst variantStyles: Record<\n  DialogVariant,\n  { icon: string; button: string; iconColor: string }\n> = {\n  default: {\n    icon: \"bg-ds-accent-subtle\",\n    button: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent\",\n    iconColor: \"text-ds-1\",\n  },\n  destructive: {\n    icon: \"bg-ds-state-error-surface\",\n    button: \"bg-ds-state-danger hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-error-text\",\n  },\n  success: {\n    icon: \"bg-ds-state-success-surface\",\n    button: \"bg-ds-state-success hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-success-text\",\n  },\n  warning: {\n    icon: \"bg-ds-state-warning-surface\",\n    button: \"bg-ds-state-warning hover:opacity-90 text-ds-1\",\n    iconColor: \"text-ds-state-warning-text\",\n  },\n  info: {\n    icon: \"bg-ds-state-info-surface\",\n    button: \"bg-ds-state-info hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-info-text\",\n  },\n};\n\n// Default icons per variant\nconst VariantIcon = ({ variant }: { variant: DialogVariant }): ReactElement => {\n  const icons: Record<DialogVariant, ReactElement> = {\n    default: <QuestionCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    destructive: <AlertTriangleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    success: <CheckCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    warning: <AlertCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    info: <InfoCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n  };\n  return icons[variant];\n};\n\n// Loading spinner\nconst Spinner = () => (\n  <LoaderIcon className=\"animate-spin w-4 h-4\" aria-hidden=\"true\" />\n);\n\nconst DIALOG_ROOT_Z_INDEX = 2147483000;\n\nexport const Dialog = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  closeOnOverlay = true,\n  showClose = true,\n  className = \"\",\n  widthClassName = \"\",\n  variant = \"default\",\n  preset = \"custom\",\n  confirmLabel = \"OK\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  onCancel,\n  loading = false,\n  icon,\n  animation = \"scale\",\n}: DialogProps) => {\n  const currentAnimation = animationVariants[animation];\n  const currentTransition = animationTransitions[animation];\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  useOverlayEffects(panelRef, open);\n\n  useEffect(() => {\n    if (!open || typeof window === \"undefined\") return;\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange?.(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKey);\n    return () => window.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  const handleOverlayClick = () => {\n    if (closeOnOverlay) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    onOpenChange?.(false);\n  };\n\n  const handleConfirm = () => {\n    onConfirm?.();\n    if (!loading) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const styles = variantStyles[variant];\n  const showPresetButtons = preset !== \"custom\" && !footer;\n  const showCancelButton = preset === \"confirm\";\n\n  // Render preset buttons\n  const renderFooter = () => {\n    if (footer) return footer;\n    if (!showPresetButtons) return null;\n\n    return (\n      <div className=\"flex gap-3 justify-end w-full\">\n        {showCancelButton && (\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={loading}\n            className=\"inline-flex items-center justify-center gap-2 cursor-pointer\n              py-2.5 px-4 text-sm font-semibold leading-none\n              rounded-lg transition-all duration-200\n              bg-ds-surface-2 border border-ds-border-2 text-ds-1\n              shadow-sm hover:bg-ds-surface-3\n              active:scale-95 hover:opacity-90\n              disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {cancelLabel}\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={handleConfirm}\n          disabled={loading}\n          className={`inline-flex items-center justify-center gap-2 cursor-pointer\n            py-2.5 px-4 text-sm font-semibold leading-none\n            rounded-lg transition-all duration-200\n            shadow-md hover:shadow-lg\n            active:scale-95 hover:opacity-90\n            disabled:opacity-50 disabled:cursor-not-allowed ${styles.button}`}\n        >\n          {loading && <Spinner />}\n          {confirmLabel}\n        </button>\n      </div>\n    );\n  };\n\n  const dialogNode = (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 flex items-center justify-center px-4 overlay-backdrop\"\n          style={{ zIndex: DIALOG_ROOT_Z_INDEX }}\n          role=\"presentation\"\n        >\n          {/* Backdrop with blur */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n            className=\"fixed inset-0 bg-black/30 backdrop-blur-sm\"\n            onClick={handleOverlayClick}\n          />\n\n          {/* Crystal panel */}\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} overlay-panel ${className} ${widthClassName}`.trim()}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial={currentAnimation.initial}\n            animate={currentAnimation.animate}\n            exit={currentAnimation.exit}\n            transition={currentTransition}\n          >\n            {/* Subtle gradient overlay for crystal effect */}\n            <div className=\"pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4\" />\n\n            {/* Close button */}\n            {showClose && (\n              <button\n                type=\"button\"\n                className=\"absolute right-4 top-4 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2\"\n                aria-label=\"Close dialog\"\n                onClick={() => onOpenChange?.(false)}\n              >\n                <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n              </button>\n            )}\n\n            {/* Content */}\n            <div className=\"relative flex gap-4\">\n              {/* Icon */}\n              {preset !== \"custom\" && (\n                <div\n                  className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`}\n                >\n                  <span className={styles.iconColor}>\n                    {icon || <VariantIcon variant={variant} />}\n                  </span>\n                </div>\n              )}\n\n              {/* Text content */}\n              <div className=\"flex-1 min-w-0\">\n                {title && (\n                  <h2 className=\"pr-8 text-lg font-semibold text-ds-1\">\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p className=\"mt-1 text-sm leading-relaxed text-ds-2\">\n                    {description}\n                  </p>\n                )}\n              </div>\n            </div>\n\n            {/* Children content */}\n            {children && (\n              <div className=\"mt-4 space-y-4 relative\">{children}</div>\n            )}\n\n            {/* Footer */}\n            {(footer || showPresetButtons) && (\n              <footer className=\"mt-6 flex justify-end gap-3 relative\">\n                {renderFooter()}\n              </footer>\n            )}\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  if (typeof document === \"undefined\") {\n    return dialogNode;\n  }\n\n  return createPortal(dialogNode, document.body);\n};\n"],"mappings":"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"}
+{"version":3,"file":"dialog-J2ZTSTpL.cjs","names":[],"sources":["../../src/components/overlays/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  motion,\n  AnimatePresence,\n  type TargetAndTransition,\n} from \"framer-motion\";\nimport {\n  AlertCircleIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  QuestionCircleIcon,\n} from \"../../icons\";\nimport type {\n  DialogProps,\n  DialogVariant,\n  DialogAnimation,\n  DialogPreset,\n} from \"./types\";\nexport type { DialogProps, DialogVariant, DialogAnimation, DialogPreset };\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\n// Animation preset type\ninterface AnimationPreset {\n  initial: TargetAndTransition;\n  animate: TargetAndTransition;\n  exit: TargetAndTransition;\n}\n\n// Animation presets for different entrance/exit effects\nconst animationVariants: Record<DialogAnimation, AnimationPreset> = {\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.9, y: 20 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.95, y: 10 },\n  },\n  slideUp: {\n    initial: { opacity: 0, y: 100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 50 },\n  },\n  slideDown: {\n    initial: { opacity: 0, y: -100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -50 },\n  },\n  slideLeft: {\n    initial: { opacity: 0, x: 100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: 50 },\n  },\n  slideRight: {\n    initial: { opacity: 0, x: -100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: -50 },\n  },\n  elastic: {\n    initial: { opacity: 0, scale: 0.5, y: 50 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.8, y: 20 },\n  },\n  bounce: {\n    initial: { opacity: 0, scale: 0.3, y: -100 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.5, y: -50 },\n  },\n  flip: {\n    initial: { opacity: 0, rotateX: -90, scale: 0.9 },\n    animate: { opacity: 1, rotateX: 0, scale: 1 },\n    exit: { opacity: 0, rotateX: 90, scale: 0.9 },\n  },\n  zoom: {\n    initial: { opacity: 0, scale: 0, rotate: -10 },\n    animate: { opacity: 1, scale: 1, rotate: 0 },\n    exit: { opacity: 0, scale: 0.5, rotate: 5 },\n  },\n};\n\n// Transition configs for each animation type\nconst animationTransitions: Record<DialogAnimation, object> = {\n  fade: { duration: 0.2 },\n  scale: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideUp: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideDown: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideLeft: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideRight: { type: \"spring\", damping: 25, stiffness: 300 },\n  elastic: { type: \"spring\", damping: 10, stiffness: 100 },\n  bounce: { type: \"spring\", damping: 8, stiffness: 200, bounce: 0.5 },\n  flip: { type: \"spring\", damping: 15, stiffness: 150 },\n  zoom: { type: \"spring\", damping: 20, stiffness: 200 },\n};\n\n// Crystal glass panel base styling\nconst basePanel = `\n  relative w-full max-w-lg rounded-2xl overflow-hidden\n  border border-ds-border-2\n  backdrop-blur-2xl backdrop-saturate-150\n  bg-ds-surface-1/95\n  p-6\n  shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]\n  ring-1 ring-inset ring-ds-border-3/40\n`;\n\n// Variant accent colors for icons and confirm buttons\nconst variantStyles: Record<\n  DialogVariant,\n  { icon: string; button: string; iconColor: string }\n> = {\n  default: {\n    icon: \"bg-ds-accent-subtle\",\n    button: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent\",\n    iconColor: \"text-ds-1\",\n  },\n  destructive: {\n    icon: \"bg-ds-state-error-surface\",\n    button: \"bg-ds-state-danger hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-error-text\",\n  },\n  success: {\n    icon: \"bg-ds-state-success-surface\",\n    button: \"bg-ds-state-success hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-success-text\",\n  },\n  warning: {\n    icon: \"bg-ds-state-warning-surface\",\n    button: \"bg-ds-state-warning hover:opacity-90 text-ds-1\",\n    iconColor: \"text-ds-state-warning-text\",\n  },\n  info: {\n    icon: \"bg-ds-state-info-surface\",\n    button: \"bg-ds-state-info hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-info-text\",\n  },\n};\n\n// Default icons per variant\nconst VariantIcon = ({ variant }: { variant: DialogVariant }): ReactElement => {\n  const icons: Record<DialogVariant, ReactElement> = {\n    default: <QuestionCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    destructive: <AlertTriangleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    success: <CheckCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    warning: <AlertCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    info: <InfoCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n  };\n  return icons[variant];\n};\n\n// Loading spinner\nconst Spinner = () => (\n  <LoaderIcon className=\"animate-spin w-4 h-4\" aria-hidden=\"true\" />\n);\n\nconst DIALOG_ROOT_Z_INDEX = 2147483000;\n\nexport const Dialog = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  closeOnOverlay = true,\n  showClose = true,\n  className = \"\",\n  widthClassName = \"\",\n  variant = \"default\",\n  preset = \"custom\",\n  confirmLabel = \"OK\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  onCancel,\n  loading = false,\n  icon,\n  animation = \"scale\",\n}: DialogProps) => {\n  const currentAnimation = animationVariants[animation];\n  const currentTransition = animationTransitions[animation];\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  useOverlayEffects(panelRef, open);\n\n  useEffect(() => {\n    if (!open || typeof window === \"undefined\") return;\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange?.(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKey);\n    return () => window.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  const handleOverlayClick = () => {\n    if (closeOnOverlay) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    onOpenChange?.(false);\n  };\n\n  const handleConfirm = () => {\n    onConfirm?.();\n    if (!loading) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const styles = variantStyles[variant];\n  const showPresetButtons = preset !== \"custom\" && !footer;\n  const showCancelButton = preset === \"confirm\";\n\n  // Render preset buttons\n  const renderFooter = () => {\n    if (footer) return footer;\n    if (!showPresetButtons) return null;\n\n    return (\n      <div className=\"flex gap-3 justify-end w-full\">\n        {showCancelButton && (\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={loading}\n            className=\"inline-flex items-center justify-center gap-2 cursor-pointer\n              py-2.5 px-4 text-sm font-semibold leading-none\n              rounded-lg transition-all duration-200\n              bg-ds-surface-2 border border-ds-border-2 text-ds-1\n              shadow-sm hover:bg-ds-surface-3\n              active:scale-95 hover:opacity-90\n              disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {cancelLabel}\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={handleConfirm}\n          disabled={loading}\n          className={`inline-flex items-center justify-center gap-2 cursor-pointer\n            py-2.5 px-4 text-sm font-semibold leading-none\n            rounded-lg transition-all duration-200\n            shadow-md hover:shadow-lg\n            active:scale-95 hover:opacity-90\n            disabled:opacity-50 disabled:cursor-not-allowed ${styles.button}`}\n        >\n          {loading && <Spinner />}\n          {confirmLabel}\n        </button>\n      </div>\n    );\n  };\n\n  const dialogNode = (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 flex items-center justify-center px-4 overlay-backdrop\"\n          style={{ zIndex: DIALOG_ROOT_Z_INDEX }}\n          role=\"presentation\"\n        >\n          {/* Backdrop with blur */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n            className=\"fixed inset-0 bg-black/30 backdrop-blur-sm\"\n            onClick={handleOverlayClick}\n          />\n\n          {/* Crystal panel */}\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} overlay-panel ${className} ${widthClassName}`.trim()}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial={currentAnimation.initial}\n            animate={currentAnimation.animate}\n            exit={currentAnimation.exit}\n            transition={currentTransition}\n          >\n            {/* Subtle gradient overlay for crystal effect */}\n            <div className=\"pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4\" />\n\n            {/* Close button */}\n            {showClose && (\n              <button\n                type=\"button\"\n                className=\"absolute right-4 top-4 z-10 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2\"\n                aria-label=\"Close dialog\"\n                onClick={() => onOpenChange?.(false)}\n              >\n                <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n              </button>\n            )}\n\n            {/* Content */}\n            <div className=\"relative flex gap-4\">\n              {/* Icon */}\n              {preset !== \"custom\" && (\n                <div\n                  className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`}\n                >\n                  <span className={styles.iconColor}>\n                    {icon || <VariantIcon variant={variant} />}\n                  </span>\n                </div>\n              )}\n\n              {/* Text content */}\n              <div className=\"flex-1 min-w-0\">\n                {title && (\n                  <h2 className=\"pr-8 text-lg font-semibold text-ds-1\">\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p className=\"mt-1 text-sm leading-relaxed text-ds-2\">\n                    {description}\n                  </p>\n                )}\n              </div>\n            </div>\n\n            {/* Children content */}\n            {children && (\n              <div className=\"mt-4 space-y-4 relative\">{children}</div>\n            )}\n\n            {/* Footer */}\n            {(footer || showPresetButtons) && (\n              <footer className=\"mt-6 flex justify-end gap-3 relative\">\n                {renderFooter()}\n              </footer>\n            )}\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  if (typeof document === \"undefined\") {\n    return dialogNode;\n  }\n\n  return createPortal(dialogNode, document.body);\n};\n"],"mappings":"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"}

package/dist/components/navigation/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/Tabs.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAA2B,SAAS,EAAE,MAAM,SAAS,CAAC;AAqClE,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,EACb,GAAY,EACZ,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,mBAAyB,GAC1B,EAAE,SAAS,2CAoOX"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/Tabs.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAA2B,SAAS,EAAE,MAAM,SAAS,CAAC;AAqClE,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,EACb,GAAY,EACZ,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,mBAAyB,GAC1B,EAAE,SAAS,2CAsOX"}

package/dist/dialog.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_dialog = require("./chunks/dialog-fffx1-4D.cjs");
+const require_dialog = require("./chunks/dialog-J2ZTSTpL.cjs");
 exports.Dialog = require_dialog.Dialog;

package/dist/dialog.mjs

@@ -1,2 +1,2 @@
-import { t as Dialog } from "./chunks/dialog-CanVyiAD.mjs";
+import { t as Dialog } from "./chunks/dialog-DSyq6MS3.mjs";
 export { Dialog };

package/dist/index.cjs

@@ -38,7 +38,7 @@ const require_data_table = require("./chunks/data-table-fAEuevPn.cjs");
 const require_multi_select_combobox = require("./chunks/multi-select-combobox-C0DoDzxQ.cjs");
 const require_switch = require("./chunks/switch-X3l8xnle.cjs");
 const require_date_picker = require("./chunks/date-picker-qpUZMtZC.cjs");
-const require_dialog = require("./chunks/dialog-fffx1-4D.cjs");
+const require_dialog = require("./chunks/dialog-J2ZTSTpL.cjs");
 const require_drawer = require("./chunks/drawer-D07dGN6R.cjs");
 const require_form = require("./chunks/form-X6Vyaavl.cjs");
 const require_hover_card = require("./chunks/hover-card--rplmsA_.cjs");
@@ -506,7 +506,7 @@ function Tabs({ items, value, defaultValue, onValueChange, dir = "auto", classNa
 			id: `tabpanel-${activeItem?.id ?? ""}`,
 			"aria-labelledby": `tab-${activeItem?.id ?? ""}`,
 			className: require_utils.mergeClassNames("mt-2 w-full", panelClassName),
-			children: activeItem?.content
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: activeItem?.content }, activeItem?.id)
 		})]
 	});
 }

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../src/components/effects/border-beam/BorderBeam.tsx","../src/components/data-display/dashboard-cards/StatCard.tsx","../src/components/data-display/dashboard-cards/ChartCard.tsx","../src/components/data-display/dashboard-cards/TopProductsCard.tsx","../src/components/navigation/tabs/Tabs.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nexport interface BorderBeamProps {\n  className?: string;\n  size?: number;\n  duration?: number;\n  borderWidth?: number;\n  anchor?: number;\n  colorFrom?: string;\n  colorTo?: string;\n  delay?: number;\n}\n\nexport function BorderBeam({\n  className = \"\",\n  size = 200,\n  duration = 15,\n  anchor = 90,\n  borderWidth = 0.5,\n  colorFrom = \"var(--ds-color-accent)\",\n  colorTo = \"var(--ds-color-accent-hover)\",\n  delay = 0,\n}: BorderBeamProps) {\n  return (\n    <div\n      style={\n        {\n          \"--size\": `${size}px`,\n          \"--duration\": `${duration}s`,\n          \"--anchor\": `${anchor}`,\n          \"--border-width\": `${borderWidth}px`,\n          \"--beam-color-from\": colorFrom,\n          \"--beam-color-to\": colorTo,\n          \"--delay\": `-${delay}s`,\n        } as CSSProperties\n      }\n      className={`border-beam ${className}`}\n    />\n  );\n}\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ---------------------------------------------------------------------------\n// Internal: TrendBadge\n// ---------------------------------------------------------------------------\n\ninterface TrendBadgeProps {\n  value: string;\n  direction: \"up\" | \"down\";\n}\n\nconst TrendBadge: FC<TrendBadgeProps> = ({ value, direction }) => {\n  const isUp = direction === \"up\";\n  const color = isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\";\n  const bg = isUp ? \"var(--ds-color-success-subtle)\" : \"var(--ds-color-danger-subtle)\";\n\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 rounded-sm border px-1 py-0.5 text-[11px] font-semibold leading-none\"\n      style={{ color, borderColor: color, backgroundColor: bg }}\n      aria-label={`${value} ${isUp ? \"increase\" : \"decrease\"}`}\n    >\n      {value}\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n        {isUp ? (\n          <path d=\"M5 8V2M5 2L2 5M5 2L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : (\n          <path d=\"M5 2V8M5 8L2 5M5 8L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        )}\n      </svg>\n   \n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Internal: MenuButton\n// ---------------------------------------------------------------------------\n\nconst MenuButton: FC<{ onClick?: () => void }> = ({ onClick }) => (\n  <Button\n    variant=\"tertiary\"\n    size=\"small\"\n    className=\"shrink-0 p-0.5! text-ds-3\"\n    aria-label=\"More options\"\n    onClick={onClick}\n  >\n    <EllipsisVerticalIcon width={18} height={18} />\n  </Button>\n);\n\n// ---------------------------------------------------------------------------\n// Internal: LegendDot\n// ---------------------------------------------------------------------------\n\nconst LegendDots: FC<{ items: { label: string; color: string }[] }> = ({ items }) => (\n  <div className=\"flex items-center gap-3\">\n    {items.map((item) => (\n      <span key={item.label} className=\"flex items-center gap-1.5 text-xs text-ds-2\">\n        <span\n          className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n          style={{ backgroundColor: item.color }}\n          aria-hidden=\"true\"\n        />\n        {item.label}\n      </span>\n    ))}\n  </div>\n);\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport type StatCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StatCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface StatCardProps {\n  /** Layout size:\n   *  - \"sm\"  → 2-col  — metric only, no chart\n   *  - \"md\"  → 4-col  — metric + compact chart on the right (default)\n   *  - \"lg\"  → 12-col — metric header + full-width chart below\n   */\n  size?: StatCardSize;\n  title: string;\n  badge?: TrendBadgeProps;\n  value: ReactNode;\n  dateRange: string;\n  /** Chart content (any chart component). Ignored when size=\"sm\".\n   *  For \"md\" position is controlled by chartPosition.\n   *  For \"lg\" the chart spans full card width below a divider. */\n  chart?: ReactNode;\n  /** Controls where the chart renders in size=\"md\".\n   *  - \"side\"   (default) — compact chart to the right of the metric.\n   *  - \"bottom\" — full-width chart below the metric (good for bar/line/area charts). */\n  chartPosition?: \"side\" | \"bottom\";\n  /** Override the chart container's size/style.\n   *  \"md\" side:   overrides the side-zone div (default: h-[68px] w-[180px] shrink-0 overflow-hidden).\n   *  \"md\" bottom: overrides the bottom chart div (default: w-full pt-3).\n   *  \"lg\":        overrides the chart wrapper div (default: border-t border-ds-border-2 pt-4 w-full). */\n  chartClassName?: string;\n  /** Legend items shown in the header. Only visible when size=\"lg\". */\n  legend?: StatCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ---------------------------------------------------------------------------\n// StatCard\n// ---------------------------------------------------------------------------\n\nexport const StatCard: FC<StatCardProps> = ({\n  size = \"md\",\n  title,\n  badge,\n  value,\n  dateRange,\n  chart,\n  chartPosition = \"side\",\n  chartClassName,\n  legend,\n  className,\n  onMenuClick,\n}) => {\n  const base = mergeClassNames(\n    \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n    className,\n  );\n\n  // ── sm: 2-col, metric only ───────────────────────────────────────────────\n  if (size === \"sm\") {\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-7 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-2xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n        </div>\n      </div>\n    );\n  }\n\n  // ── md: 4-col, metric + chart ────────────────────────────────────────────\n  if (size === \"md\") {\n    const metricBlock = (\n      <div className=\"flex flex-col gap-1 min-w-0\">\n        <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n          {value}\n        </p>\n        <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n      </div>\n    );\n\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-3 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n\n        {chartPosition === \"bottom\" ? (\n          <>\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"w-full pt-3\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"flex items-end justify-between gap-3\">\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"h-[46px] w-[155px] shrink-0 overflow-hidden\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // ── lg: 12-col, header + full-width chart ────────────────────────────────\n  return (\n    <div className={mergeClassNames(base, \"flex flex-col p-5\")}>\n      {/* Header row */}\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2 mb-4\">\n        <div className=\"flex flex-col gap-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-xs text-ds-3\">{dateRange}</p>\n        </div>\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && <LegendDots items={legend} />}\n          <MenuButton onClick={onMenuClick} />\n        </div>\n      </div>\n\n      {/* Chart area */}\n      {chart && (\n        <div className={mergeClassNames(\"border-t border-ds-border-2 pt-4 w-full\", chartClassName)}>\n          {chart}\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ChartCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface ChartCardProps {\n  title: string;\n  dateRange?: string;\n  legend?: ChartCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  children: ReactNode;\n}\n\nexport const ChartCard: FC<ChartCardProps> = ({\n  title,\n  dateRange,\n  legend,\n  className,\n  onMenuClick,\n  children,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col gap-4 rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2\">\n        <div className=\"flex flex-col gap-0.5\">\n          <span className=\"text-sm font-semibold text-ds-color-fg\">\n            {title}\n          </span>\n          {dateRange && (\n            <span className=\"text-xs text-ds-color-fg-subtle\">{dateRange}</span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && (\n            <div className=\"flex items-center gap-3\">\n              {legend.map((item) => (\n                <span\n                  key={item.label}\n                  className=\"flex items-center gap-1.5 text-xs text-ds-color-fg-muted\"\n                >\n                  <span\n                    className=\"inline-block h-2.5 w-2.5 rounded-full shrink-0\"\n                    style={{ backgroundColor: item.color }}\n                    aria-hidden=\"true\"\n                  />\n                  {item.label}\n                </span>\n              ))}\n            </div>\n          )}\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n            aria-label=\"More options\"\n            onClick={onMenuClick}\n          >\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"w-full\">{children}</div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface TopProductItem {\n  id: string | number;\n  name: string;\n  category: string;\n  soldCount: number;\n  image?: string;\n  rank: number;\n}\n\nexport interface TopProductsCardProps {\n  title?: string;\n  items: TopProductItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\nconst RankBadge: FC<{ rank: number }> = ({ rank }) => (\n  <span\n    className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-xs font-semibold  border-ds-border-3/80 \"\n    style={{\n      borderColor: \"var(--ds-color-accent)\",\n      color: \"var(--ds-color-accent)\",\n    }}\n    aria-label={`Rank ${rank}`}\n  >\n    {rank}\n  </span>\n);\n\nconst ProductImage: FC<{ src?: string; alt: string }> = ({ src, alt }) => {\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={alt}\n        className=\"h-11 w-11 shrink-0 rounded-md object-contain bg-ds-color-bg-utility p-1\"\n      />\n    );\n  }\n  return (\n    <div\n      className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-ds-color-bg-utility text-ds-color-fg-subtle text-lg\"\n      aria-hidden=\"true\"\n    >\n      □\n    </div>\n  );\n};\n\nexport const TopProductsCard: FC<TopProductsCardProps> = ({\n  title = \"Top Products\",\n  items,\n  className,\n  onMenuClick,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"mb-4 flex items-center justify-between\">\n        <span className=\"text-sm font-semibold text-ds-color-fg\">{title}</span>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      <ul className=\"flex flex-col divide-y divide-ds-border-2\" role=\"list\">\n        {items.map((item) => (\n          <li\n            key={item.id}\n            className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\"\n          >\n            <ProductImage src={item.image} alt={item.name} />\n\n            <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n              <span className=\"truncate text-sm font-semibold text-ds-color-fg\">\n                {item.name}\n              </span>\n              <span className=\"truncate text-xs text-ds-color-fg-subtle\">\n                {item.category} · {item.soldCount.toLocaleString()} sold\n              </span>\n            </div>\n\n            <RankBadge rank={item.rank} />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n","import {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { TabsDirection, TabsItem, TabsProps } from \"./types\";\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: TabsDirection,\n): Exclude<TabsDirection, \"auto\"> {\n  if (direction !== \"auto\") {\n    return direction;\n  }\n\n  if (typeof document === \"undefined\") {\n    return \"ltr\";\n  }\n\n  const explicitDirection =\n    document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n  if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n    return explicitDirection;\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction getFirstEnabledId(items: readonly TabsItem[]): string {\n  const fallback = items.find((item) => !item.disabled) ?? items[0];\n  return fallback?.id ?? \"\";\n}\n\nexport function Tabs({\n  items,\n  value,\n  defaultValue,\n  onValueChange,\n  dir = \"auto\",\n  className,\n  listClassName,\n  triggerClassName,\n  panelClassName,\n  animationDurationMs = 220,\n}: TabsProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const tabSlotRefs = useRef<Record<string, HTMLDivElement | null>>({});\n  const panelRef = useRef<HTMLDivElement>(null);\n  const isControlled = value !== undefined;\n\n  const fallbackId = useMemo(() => getFirstEnabledId(items), [items]);\n  const [internalValue, setInternalValue] = useState<string>(\n    defaultValue ?? fallbackId,\n  );\n  const rawActiveId = isControlled ? value : internalValue;\n  const activeId = items.some((item) => item.id === rawActiveId)\n    ? rawActiveId\n    : fallbackId;\n\n  const activeIndex = useMemo(\n    () =>\n      Math.max(\n        items.findIndex((item) => item.id === activeId),\n        0,\n      ),\n    [items, activeId],\n  );\n\n  const previousIndexRef = useRef(activeIndex);\n  const [indicator, setIndicator] = useState<{\n    left: number;\n    width: number;\n  } | null>(null);\n\n  const getEffectiveDirection = useCallback(() => {\n    if (dir !== \"auto\") {\n      return dir;\n    }\n\n    if (typeof window !== \"undefined\" && listRef.current) {\n      const cssDirection = window.getComputedStyle(listRef.current).direction;\n      if (cssDirection === \"rtl\" || cssDirection === \"ltr\") {\n        return cssDirection;\n      }\n    }\n\n    return resolveDirection(\"auto\");\n  }, [dir]);\n\n  useEffect(() => {\n    const previousIndex = previousIndexRef.current;\n    if (activeIndex === previousIndex) {\n      return;\n    }\n\n    const panel = panelRef.current;\n    if (!panel) {\n      previousIndexRef.current = activeIndex;\n      return;\n    }\n\n    const indexDelta = activeIndex - previousIndex;\n    const logicalDirection = indexDelta >= 0 ? 1 : -1;\n    const visualDirection =\n      getEffectiveDirection() === \"rtl\" ? -logicalDirection : logicalDirection;\n    const fromX = visualDirection > 0 ? -14 : 14;\n\n    panel.animate(\n      [\n        { opacity: 0, transform: `translateX(${fromX}px)` },\n        { opacity: 1, transform: \"translateX(0px)\" },\n      ],\n      {\n        duration: animationDurationMs,\n        easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\n      },\n    );\n\n    previousIndexRef.current = activeIndex;\n  }, [activeIndex, animationDurationMs, getEffectiveDirection]);\n\n  const activeItem = items[activeIndex] ?? items[0];\n\n  useLayoutEffect(() => {\n    const updateIndicator = () => {\n      const selectedSlot = tabSlotRefs.current[activeItem?.id ?? \"\"];\n      if (!selectedSlot) {\n        setIndicator(null);\n        return;\n      }\n\n      setIndicator({\n        left: selectedSlot.offsetLeft,\n        width: selectedSlot.offsetWidth,\n      });\n    };\n\n    updateIndicator();\n    window.addEventListener(\"resize\", updateIndicator);\n    return () => window.removeEventListener(\"resize\", updateIndicator);\n  }, [activeItem?.id, items.length]);\n\n  const setValue = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    onValueChange?.(nextValue);\n  };\n\n  const moveBy = (delta: number) => {\n    if (items.length === 0) {\n      return;\n    }\n\n    let probe = activeIndex;\n    for (let step = 0; step < items.length; step++) {\n      probe = (probe + delta + items.length) % items.length;\n      const candidate = items[probe];\n      if (!candidate?.disabled) {\n        setValue(candidate.id);\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      dir={dir === \"auto\" ? undefined : dir}\n      className={mergeClassNames(\"w-full\", className)}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        className={mergeClassNames(\n          \"relative flex h-9 w-full items-center gap-0 overflow-hidden rounded-lg border border-ds-border-3 bg-ds-surface-2 p-1\",\n          listClassName,\n        )}\n      >\n        {items.length > 0 && indicator ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute bottom-1 top-1 rounded-md border border-ds-border-accent/45 bg-ds-accent shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_rgba(0,0,0,0.06)] transition-transform duration-300 ease-out\"\n            style={{\n              width: `${indicator.width}px`,\n              transform: `translateX(${indicator.left}px)`,\n              left: 0,\n            }}\n          />\n        ) : null}\n        {items.map((item) => {\n          const selected = item.id === activeItem?.id;\n          return (\n            <div\n              key={item.id}\n              ref={(node) => {\n                tabSlotRefs.current[item.id] = node;\n              }}\n              className=\"relative z-10 h-full min-w-0 flex-1\"\n            >\n              <Button\n                role=\"tab\"\n                id={`tab-${item.id}`}\n                aria-selected={selected}\n                aria-controls={`tabpanel-${item.id}`}\n                tabIndex={selected ? 0 : -1}\n                disabled={item.disabled}\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"h-full w-full rounded-md px-3 py-1 text-base font-normal leading-[22px] transition-colors duration-200\",\n                  \"outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60\",\n                  selected ? \"text-ds-on-accent\" : \"text-ds-2 hover:text-ds-1\",\n                  item.disabled && \"cursor-not-allowed opacity-55\",\n                  triggerClassName,\n                )}\n                onClick={() => {\n                  if (!item.disabled) {\n                    setValue(item.id);\n                  }\n                }}\n                onKeyDown={(event) => {\n                  if (event.key === \"ArrowRight\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? -1 : 1);\n                  }\n\n                  if (event.key === \"ArrowLeft\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? 1 : -1);\n                  }\n\n                  if (event.key === \"Home\") {\n                    event.preventDefault();\n                    const first = items.find((candidate) => !candidate.disabled);\n                    if (first) {\n                      setValue(first.id);\n                    }\n                  }\n\n                  if (event.key === \"End\") {\n                    event.preventDefault();\n                    const reversed = [...items].reverse();\n                    const last = reversed.find(\n                      (candidate) => !candidate.disabled,\n                    );\n                    if (last) {\n                      setValue(last.id);\n                    }\n                  }\n                }}\n              >\n                {item.label}\n              </Button>\n            </div>\n          );\n        })}\n      </div>\n\n      <div\n        ref={panelRef}\n        role=\"tabpanel\"\n        id={`tabpanel-${activeItem?.id ?? \"\"}`}\n        aria-labelledby={`tab-${activeItem?.id ?? \"\"}`}\n        className={mergeClassNames(\"mt-2 w-full\", panelClassName)}\n      >\n        {activeItem?.content}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/components/effects/border-beam/BorderBeam.tsx","../src/components/data-display/dashboard-cards/StatCard.tsx","../src/components/data-display/dashboard-cards/ChartCard.tsx","../src/components/data-display/dashboard-cards/TopProductsCard.tsx","../src/components/navigation/tabs/Tabs.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nexport interface BorderBeamProps {\n  className?: string;\n  size?: number;\n  duration?: number;\n  borderWidth?: number;\n  anchor?: number;\n  colorFrom?: string;\n  colorTo?: string;\n  delay?: number;\n}\n\nexport function BorderBeam({\n  className = \"\",\n  size = 200,\n  duration = 15,\n  anchor = 90,\n  borderWidth = 0.5,\n  colorFrom = \"var(--ds-color-accent)\",\n  colorTo = \"var(--ds-color-accent-hover)\",\n  delay = 0,\n}: BorderBeamProps) {\n  return (\n    <div\n      style={\n        {\n          \"--size\": `${size}px`,\n          \"--duration\": `${duration}s`,\n          \"--anchor\": `${anchor}`,\n          \"--border-width\": `${borderWidth}px`,\n          \"--beam-color-from\": colorFrom,\n          \"--beam-color-to\": colorTo,\n          \"--delay\": `-${delay}s`,\n        } as CSSProperties\n      }\n      className={`border-beam ${className}`}\n    />\n  );\n}\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ---------------------------------------------------------------------------\n// Internal: TrendBadge\n// ---------------------------------------------------------------------------\n\ninterface TrendBadgeProps {\n  value: string;\n  direction: \"up\" | \"down\";\n}\n\nconst TrendBadge: FC<TrendBadgeProps> = ({ value, direction }) => {\n  const isUp = direction === \"up\";\n  const color = isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\";\n  const bg = isUp ? \"var(--ds-color-success-subtle)\" : \"var(--ds-color-danger-subtle)\";\n\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 rounded-sm border px-1 py-0.5 text-[11px] font-semibold leading-none\"\n      style={{ color, borderColor: color, backgroundColor: bg }}\n      aria-label={`${value} ${isUp ? \"increase\" : \"decrease\"}`}\n    >\n      {value}\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n        {isUp ? (\n          <path d=\"M5 8V2M5 2L2 5M5 2L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : (\n          <path d=\"M5 2V8M5 8L2 5M5 8L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        )}\n      </svg>\n   \n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Internal: MenuButton\n// ---------------------------------------------------------------------------\n\nconst MenuButton: FC<{ onClick?: () => void }> = ({ onClick }) => (\n  <Button\n    variant=\"tertiary\"\n    size=\"small\"\n    className=\"shrink-0 p-0.5! text-ds-3\"\n    aria-label=\"More options\"\n    onClick={onClick}\n  >\n    <EllipsisVerticalIcon width={18} height={18} />\n  </Button>\n);\n\n// ---------------------------------------------------------------------------\n// Internal: LegendDot\n// ---------------------------------------------------------------------------\n\nconst LegendDots: FC<{ items: { label: string; color: string }[] }> = ({ items }) => (\n  <div className=\"flex items-center gap-3\">\n    {items.map((item) => (\n      <span key={item.label} className=\"flex items-center gap-1.5 text-xs text-ds-2\">\n        <span\n          className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n          style={{ backgroundColor: item.color }}\n          aria-hidden=\"true\"\n        />\n        {item.label}\n      </span>\n    ))}\n  </div>\n);\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport type StatCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StatCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface StatCardProps {\n  /** Layout size:\n   *  - \"sm\"  → 2-col  — metric only, no chart\n   *  - \"md\"  → 4-col  — metric + compact chart on the right (default)\n   *  - \"lg\"  → 12-col — metric header + full-width chart below\n   */\n  size?: StatCardSize;\n  title: string;\n  badge?: TrendBadgeProps;\n  value: ReactNode;\n  dateRange: string;\n  /** Chart content (any chart component). Ignored when size=\"sm\".\n   *  For \"md\" position is controlled by chartPosition.\n   *  For \"lg\" the chart spans full card width below a divider. */\n  chart?: ReactNode;\n  /** Controls where the chart renders in size=\"md\".\n   *  - \"side\"   (default) — compact chart to the right of the metric.\n   *  - \"bottom\" — full-width chart below the metric (good for bar/line/area charts). */\n  chartPosition?: \"side\" | \"bottom\";\n  /** Override the chart container's size/style.\n   *  \"md\" side:   overrides the side-zone div (default: h-[68px] w-[180px] shrink-0 overflow-hidden).\n   *  \"md\" bottom: overrides the bottom chart div (default: w-full pt-3).\n   *  \"lg\":        overrides the chart wrapper div (default: border-t border-ds-border-2 pt-4 w-full). */\n  chartClassName?: string;\n  /** Legend items shown in the header. Only visible when size=\"lg\". */\n  legend?: StatCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ---------------------------------------------------------------------------\n// StatCard\n// ---------------------------------------------------------------------------\n\nexport const StatCard: FC<StatCardProps> = ({\n  size = \"md\",\n  title,\n  badge,\n  value,\n  dateRange,\n  chart,\n  chartPosition = \"side\",\n  chartClassName,\n  legend,\n  className,\n  onMenuClick,\n}) => {\n  const base = mergeClassNames(\n    \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n    className,\n  );\n\n  // ── sm: 2-col, metric only ───────────────────────────────────────────────\n  if (size === \"sm\") {\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-7 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-2xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n        </div>\n      </div>\n    );\n  }\n\n  // ── md: 4-col, metric + chart ────────────────────────────────────────────\n  if (size === \"md\") {\n    const metricBlock = (\n      <div className=\"flex flex-col gap-1 min-w-0\">\n        <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n          {value}\n        </p>\n        <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n      </div>\n    );\n\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-3 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n\n        {chartPosition === \"bottom\" ? (\n          <>\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"w-full pt-3\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"flex items-end justify-between gap-3\">\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"h-[46px] w-[155px] shrink-0 overflow-hidden\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // ── lg: 12-col, header + full-width chart ────────────────────────────────\n  return (\n    <div className={mergeClassNames(base, \"flex flex-col p-5\")}>\n      {/* Header row */}\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2 mb-4\">\n        <div className=\"flex flex-col gap-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-xs text-ds-3\">{dateRange}</p>\n        </div>\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && <LegendDots items={legend} />}\n          <MenuButton onClick={onMenuClick} />\n        </div>\n      </div>\n\n      {/* Chart area */}\n      {chart && (\n        <div className={mergeClassNames(\"border-t border-ds-border-2 pt-4 w-full\", chartClassName)}>\n          {chart}\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ChartCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface ChartCardProps {\n  title: string;\n  dateRange?: string;\n  legend?: ChartCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  children: ReactNode;\n}\n\nexport const ChartCard: FC<ChartCardProps> = ({\n  title,\n  dateRange,\n  legend,\n  className,\n  onMenuClick,\n  children,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col gap-4 rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2\">\n        <div className=\"flex flex-col gap-0.5\">\n          <span className=\"text-sm font-semibold text-ds-color-fg\">\n            {title}\n          </span>\n          {dateRange && (\n            <span className=\"text-xs text-ds-color-fg-subtle\">{dateRange}</span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && (\n            <div className=\"flex items-center gap-3\">\n              {legend.map((item) => (\n                <span\n                  key={item.label}\n                  className=\"flex items-center gap-1.5 text-xs text-ds-color-fg-muted\"\n                >\n                  <span\n                    className=\"inline-block h-2.5 w-2.5 rounded-full shrink-0\"\n                    style={{ backgroundColor: item.color }}\n                    aria-hidden=\"true\"\n                  />\n                  {item.label}\n                </span>\n              ))}\n            </div>\n          )}\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n            aria-label=\"More options\"\n            onClick={onMenuClick}\n          >\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"w-full\">{children}</div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface TopProductItem {\n  id: string | number;\n  name: string;\n  category: string;\n  soldCount: number;\n  image?: string;\n  rank: number;\n}\n\nexport interface TopProductsCardProps {\n  title?: string;\n  items: TopProductItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\nconst RankBadge: FC<{ rank: number }> = ({ rank }) => (\n  <span\n    className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-xs font-semibold  border-ds-border-3/80 \"\n    style={{\n      borderColor: \"var(--ds-color-accent)\",\n      color: \"var(--ds-color-accent)\",\n    }}\n    aria-label={`Rank ${rank}`}\n  >\n    {rank}\n  </span>\n);\n\nconst ProductImage: FC<{ src?: string; alt: string }> = ({ src, alt }) => {\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={alt}\n        className=\"h-11 w-11 shrink-0 rounded-md object-contain bg-ds-color-bg-utility p-1\"\n      />\n    );\n  }\n  return (\n    <div\n      className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-ds-color-bg-utility text-ds-color-fg-subtle text-lg\"\n      aria-hidden=\"true\"\n    >\n      □\n    </div>\n  );\n};\n\nexport const TopProductsCard: FC<TopProductsCardProps> = ({\n  title = \"Top Products\",\n  items,\n  className,\n  onMenuClick,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"mb-4 flex items-center justify-between\">\n        <span className=\"text-sm font-semibold text-ds-color-fg\">{title}</span>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      <ul className=\"flex flex-col divide-y divide-ds-border-2\" role=\"list\">\n        {items.map((item) => (\n          <li\n            key={item.id}\n            className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\"\n          >\n            <ProductImage src={item.image} alt={item.name} />\n\n            <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n              <span className=\"truncate text-sm font-semibold text-ds-color-fg\">\n                {item.name}\n              </span>\n              <span className=\"truncate text-xs text-ds-color-fg-subtle\">\n                {item.category} · {item.soldCount.toLocaleString()} sold\n              </span>\n            </div>\n\n            <RankBadge rank={item.rank} />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n","import {\n  Fragment,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { TabsDirection, TabsItem, TabsProps } from \"./types\";\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: TabsDirection,\n): Exclude<TabsDirection, \"auto\"> {\n  if (direction !== \"auto\") {\n    return direction;\n  }\n\n  if (typeof document === \"undefined\") {\n    return \"ltr\";\n  }\n\n  const explicitDirection =\n    document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n  if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n    return explicitDirection;\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction getFirstEnabledId(items: readonly TabsItem[]): string {\n  const fallback = items.find((item) => !item.disabled) ?? items[0];\n  return fallback?.id ?? \"\";\n}\n\nexport function Tabs({\n  items,\n  value,\n  defaultValue,\n  onValueChange,\n  dir = \"auto\",\n  className,\n  listClassName,\n  triggerClassName,\n  panelClassName,\n  animationDurationMs = 220,\n}: TabsProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const tabSlotRefs = useRef<Record<string, HTMLDivElement | null>>({});\n  const panelRef = useRef<HTMLDivElement>(null);\n  const isControlled = value !== undefined;\n\n  const fallbackId = useMemo(() => getFirstEnabledId(items), [items]);\n  const [internalValue, setInternalValue] = useState<string>(\n    defaultValue ?? fallbackId,\n  );\n  const rawActiveId = isControlled ? value : internalValue;\n  const activeId = items.some((item) => item.id === rawActiveId)\n    ? rawActiveId\n    : fallbackId;\n\n  const activeIndex = useMemo(\n    () =>\n      Math.max(\n        items.findIndex((item) => item.id === activeId),\n        0,\n      ),\n    [items, activeId],\n  );\n\n  const previousIndexRef = useRef(activeIndex);\n  const [indicator, setIndicator] = useState<{\n    left: number;\n    width: number;\n  } | null>(null);\n\n  const getEffectiveDirection = useCallback(() => {\n    if (dir !== \"auto\") {\n      return dir;\n    }\n\n    if (typeof window !== \"undefined\" && listRef.current) {\n      const cssDirection = window.getComputedStyle(listRef.current).direction;\n      if (cssDirection === \"rtl\" || cssDirection === \"ltr\") {\n        return cssDirection;\n      }\n    }\n\n    return resolveDirection(\"auto\");\n  }, [dir]);\n\n  useEffect(() => {\n    const previousIndex = previousIndexRef.current;\n    if (activeIndex === previousIndex) {\n      return;\n    }\n\n    const panel = panelRef.current;\n    if (!panel) {\n      previousIndexRef.current = activeIndex;\n      return;\n    }\n\n    const indexDelta = activeIndex - previousIndex;\n    const logicalDirection = indexDelta >= 0 ? 1 : -1;\n    const visualDirection =\n      getEffectiveDirection() === \"rtl\" ? -logicalDirection : logicalDirection;\n    const fromX = visualDirection > 0 ? -14 : 14;\n\n    panel.animate(\n      [\n        { opacity: 0, transform: `translateX(${fromX}px)` },\n        { opacity: 1, transform: \"translateX(0px)\" },\n      ],\n      {\n        duration: animationDurationMs,\n        easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\n      },\n    );\n\n    previousIndexRef.current = activeIndex;\n  }, [activeIndex, animationDurationMs, getEffectiveDirection]);\n\n  const activeItem = items[activeIndex] ?? items[0];\n\n  useLayoutEffect(() => {\n    const updateIndicator = () => {\n      const selectedSlot = tabSlotRefs.current[activeItem?.id ?? \"\"];\n      if (!selectedSlot) {\n        setIndicator(null);\n        return;\n      }\n\n      setIndicator({\n        left: selectedSlot.offsetLeft,\n        width: selectedSlot.offsetWidth,\n      });\n    };\n\n    updateIndicator();\n    window.addEventListener(\"resize\", updateIndicator);\n    return () => window.removeEventListener(\"resize\", updateIndicator);\n  }, [activeItem?.id, items.length]);\n\n  const setValue = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    onValueChange?.(nextValue);\n  };\n\n  const moveBy = (delta: number) => {\n    if (items.length === 0) {\n      return;\n    }\n\n    let probe = activeIndex;\n    for (let step = 0; step < items.length; step++) {\n      probe = (probe + delta + items.length) % items.length;\n      const candidate = items[probe];\n      if (!candidate?.disabled) {\n        setValue(candidate.id);\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      dir={dir === \"auto\" ? undefined : dir}\n      className={mergeClassNames(\"w-full\", className)}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        className={mergeClassNames(\n          \"relative flex h-9 w-full items-center gap-0 overflow-hidden rounded-lg border border-ds-border-3 bg-ds-surface-2 p-1\",\n          listClassName,\n        )}\n      >\n        {items.length > 0 && indicator ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute bottom-1 top-1 rounded-md border border-ds-border-accent/45 bg-ds-accent shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_rgba(0,0,0,0.06)] transition-transform duration-300 ease-out\"\n            style={{\n              width: `${indicator.width}px`,\n              transform: `translateX(${indicator.left}px)`,\n              left: 0,\n            }}\n          />\n        ) : null}\n        {items.map((item) => {\n          const selected = item.id === activeItem?.id;\n          return (\n            <div\n              key={item.id}\n              ref={(node) => {\n                tabSlotRefs.current[item.id] = node;\n              }}\n              className=\"relative z-10 h-full min-w-0 flex-1\"\n            >\n              <Button\n                role=\"tab\"\n                id={`tab-${item.id}`}\n                aria-selected={selected}\n                aria-controls={`tabpanel-${item.id}`}\n                tabIndex={selected ? 0 : -1}\n                disabled={item.disabled}\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"h-full w-full rounded-md px-3 py-1 text-base font-normal leading-[22px] transition-colors duration-200\",\n                  \"outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60\",\n                  selected ? \"text-ds-on-accent\" : \"text-ds-2 hover:text-ds-1\",\n                  item.disabled && \"cursor-not-allowed opacity-55\",\n                  triggerClassName,\n                )}\n                onClick={() => {\n                  if (!item.disabled) {\n                    setValue(item.id);\n                  }\n                }}\n                onKeyDown={(event) => {\n                  if (event.key === \"ArrowRight\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? -1 : 1);\n                  }\n\n                  if (event.key === \"ArrowLeft\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? 1 : -1);\n                  }\n\n                  if (event.key === \"Home\") {\n                    event.preventDefault();\n                    const first = items.find((candidate) => !candidate.disabled);\n                    if (first) {\n                      setValue(first.id);\n                    }\n                  }\n\n                  if (event.key === \"End\") {\n                    event.preventDefault();\n                    const reversed = [...items].reverse();\n                    const last = reversed.find(\n                      (candidate) => !candidate.disabled,\n                    );\n                    if (last) {\n                      setValue(last.id);\n                    }\n                  }\n                }}\n              >\n                {item.label}\n              </Button>\n            </div>\n          );\n        })}\n      </div>\n\n      <div\n        ref={panelRef}\n        role=\"tabpanel\"\n        id={`tabpanel-${activeItem?.id ?? \"\"}`}\n        aria-labelledby={`tab-${activeItem?.id ?? \"\"}`}\n        className={mergeClassNames(\"mt-2 w-full\", panelClassName)}\n      >\n        <Fragment key={activeItem?.id}>\n          {activeItem?.content}\n        </Fragment>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/index.mjs

@@ -36,7 +36,7 @@ import { a as FilterButton, c as TableBody, d as TableContainer, f as TableFoote
 import { t as MultiSelectCombobox } from "./chunks/multi-select-combobox-Do23ZfOQ.mjs";
 import { t as Switch } from "./chunks/switch-iPsN1NS2.mjs";
 import { t as DatePicker } from "./chunks/date-picker-BmQ0rgwH.mjs";
-import { t as Dialog } from "./chunks/dialog-CanVyiAD.mjs";
+import { t as Dialog } from "./chunks/dialog-DSyq6MS3.mjs";
 import { t as Drawer } from "./chunks/drawer-DaoAXL-w.mjs";
 import { i as FormField, n as FormActions, o as FormSection, s as InputGroup, t as Form } from "./chunks/form-CtZ6U-_B.mjs";
 import { t as HoverCard } from "./chunks/hover-card-C88rU-nW.mjs";
@@ -50,7 +50,7 @@ import { i as Stepper, n as StepperWizardStep, r as StepperSteps, t as StepperWi
 import { t as Textarea } from "./chunks/textarea-Bdo-Trvi.mjs";
 import { a as useToast, n as ToastProvider, t as ToastItem } from "./chunks/toast-BcBidy5n.mjs";
 import { t as Audio } from "./chunks/spinners-g6_Up5Rb.mjs";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/effects/border-beam/BorderBeam.tsx
 function BorderBeam({ className = "", size = 200, duration = 15, anchor = 90, borderWidth = .5, colorFrom = "var(--ds-color-accent)", colorTo = "var(--ds-color-accent-hover)", delay = 0 }) {
@@ -504,7 +504,7 @@ function Tabs({ items, value, defaultValue, onValueChange, dir = "auto", classNa
 			id: `tabpanel-${activeItem?.id ?? ""}`,
 			"aria-labelledby": `tab-${activeItem?.id ?? ""}`,
 			className: mergeClassNames("mt-2 w-full", panelClassName),
-			children: activeItem?.content
+			children: /* @__PURE__ */ jsx(Fragment, { children: activeItem?.content }, activeItem?.id)
 		})]
 	});
 }

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/components/effects/border-beam/BorderBeam.tsx","../src/components/data-display/dashboard-cards/StatCard.tsx","../src/components/data-display/dashboard-cards/ChartCard.tsx","../src/components/data-display/dashboard-cards/TopProductsCard.tsx","../src/components/navigation/tabs/Tabs.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nexport interface BorderBeamProps {\n  className?: string;\n  size?: number;\n  duration?: number;\n  borderWidth?: number;\n  anchor?: number;\n  colorFrom?: string;\n  colorTo?: string;\n  delay?: number;\n}\n\nexport function BorderBeam({\n  className = \"\",\n  size = 200,\n  duration = 15,\n  anchor = 90,\n  borderWidth = 0.5,\n  colorFrom = \"var(--ds-color-accent)\",\n  colorTo = \"var(--ds-color-accent-hover)\",\n  delay = 0,\n}: BorderBeamProps) {\n  return (\n    <div\n      style={\n        {\n          \"--size\": `${size}px`,\n          \"--duration\": `${duration}s`,\n          \"--anchor\": `${anchor}`,\n          \"--border-width\": `${borderWidth}px`,\n          \"--beam-color-from\": colorFrom,\n          \"--beam-color-to\": colorTo,\n          \"--delay\": `-${delay}s`,\n        } as CSSProperties\n      }\n      className={`border-beam ${className}`}\n    />\n  );\n}\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ---------------------------------------------------------------------------\n// Internal: TrendBadge\n// ---------------------------------------------------------------------------\n\ninterface TrendBadgeProps {\n  value: string;\n  direction: \"up\" | \"down\";\n}\n\nconst TrendBadge: FC<TrendBadgeProps> = ({ value, direction }) => {\n  const isUp = direction === \"up\";\n  const color = isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\";\n  const bg = isUp ? \"var(--ds-color-success-subtle)\" : \"var(--ds-color-danger-subtle)\";\n\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 rounded-sm border px-1 py-0.5 text-[11px] font-semibold leading-none\"\n      style={{ color, borderColor: color, backgroundColor: bg }}\n      aria-label={`${value} ${isUp ? \"increase\" : \"decrease\"}`}\n    >\n      {value}\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n        {isUp ? (\n          <path d=\"M5 8V2M5 2L2 5M5 2L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : (\n          <path d=\"M5 2V8M5 8L2 5M5 8L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        )}\n      </svg>\n   \n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Internal: MenuButton\n// ---------------------------------------------------------------------------\n\nconst MenuButton: FC<{ onClick?: () => void }> = ({ onClick }) => (\n  <Button\n    variant=\"tertiary\"\n    size=\"small\"\n    className=\"shrink-0 p-0.5! text-ds-3\"\n    aria-label=\"More options\"\n    onClick={onClick}\n  >\n    <EllipsisVerticalIcon width={18} height={18} />\n  </Button>\n);\n\n// ---------------------------------------------------------------------------\n// Internal: LegendDot\n// ---------------------------------------------------------------------------\n\nconst LegendDots: FC<{ items: { label: string; color: string }[] }> = ({ items }) => (\n  <div className=\"flex items-center gap-3\">\n    {items.map((item) => (\n      <span key={item.label} className=\"flex items-center gap-1.5 text-xs text-ds-2\">\n        <span\n          className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n          style={{ backgroundColor: item.color }}\n          aria-hidden=\"true\"\n        />\n        {item.label}\n      </span>\n    ))}\n  </div>\n);\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport type StatCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StatCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface StatCardProps {\n  /** Layout size:\n   *  - \"sm\"  → 2-col  — metric only, no chart\n   *  - \"md\"  → 4-col  — metric + compact chart on the right (default)\n   *  - \"lg\"  → 12-col — metric header + full-width chart below\n   */\n  size?: StatCardSize;\n  title: string;\n  badge?: TrendBadgeProps;\n  value: ReactNode;\n  dateRange: string;\n  /** Chart content (any chart component). Ignored when size=\"sm\".\n   *  For \"md\" position is controlled by chartPosition.\n   *  For \"lg\" the chart spans full card width below a divider. */\n  chart?: ReactNode;\n  /** Controls where the chart renders in size=\"md\".\n   *  - \"side\"   (default) — compact chart to the right of the metric.\n   *  - \"bottom\" — full-width chart below the metric (good for bar/line/area charts). */\n  chartPosition?: \"side\" | \"bottom\";\n  /** Override the chart container's size/style.\n   *  \"md\" side:   overrides the side-zone div (default: h-[68px] w-[180px] shrink-0 overflow-hidden).\n   *  \"md\" bottom: overrides the bottom chart div (default: w-full pt-3).\n   *  \"lg\":        overrides the chart wrapper div (default: border-t border-ds-border-2 pt-4 w-full). */\n  chartClassName?: string;\n  /** Legend items shown in the header. Only visible when size=\"lg\". */\n  legend?: StatCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ---------------------------------------------------------------------------\n// StatCard\n// ---------------------------------------------------------------------------\n\nexport const StatCard: FC<StatCardProps> = ({\n  size = \"md\",\n  title,\n  badge,\n  value,\n  dateRange,\n  chart,\n  chartPosition = \"side\",\n  chartClassName,\n  legend,\n  className,\n  onMenuClick,\n}) => {\n  const base = mergeClassNames(\n    \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n    className,\n  );\n\n  // ── sm: 2-col, metric only ───────────────────────────────────────────────\n  if (size === \"sm\") {\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-7 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-2xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n        </div>\n      </div>\n    );\n  }\n\n  // ── md: 4-col, metric + chart ────────────────────────────────────────────\n  if (size === \"md\") {\n    const metricBlock = (\n      <div className=\"flex flex-col gap-1 min-w-0\">\n        <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n          {value}\n        </p>\n        <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n      </div>\n    );\n\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-3 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n\n        {chartPosition === \"bottom\" ? (\n          <>\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"w-full pt-3\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"flex items-end justify-between gap-3\">\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"h-[46px] w-[155px] shrink-0 overflow-hidden\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // ── lg: 12-col, header + full-width chart ────────────────────────────────\n  return (\n    <div className={mergeClassNames(base, \"flex flex-col p-5\")}>\n      {/* Header row */}\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2 mb-4\">\n        <div className=\"flex flex-col gap-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-xs text-ds-3\">{dateRange}</p>\n        </div>\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && <LegendDots items={legend} />}\n          <MenuButton onClick={onMenuClick} />\n        </div>\n      </div>\n\n      {/* Chart area */}\n      {chart && (\n        <div className={mergeClassNames(\"border-t border-ds-border-2 pt-4 w-full\", chartClassName)}>\n          {chart}\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ChartCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface ChartCardProps {\n  title: string;\n  dateRange?: string;\n  legend?: ChartCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  children: ReactNode;\n}\n\nexport const ChartCard: FC<ChartCardProps> = ({\n  title,\n  dateRange,\n  legend,\n  className,\n  onMenuClick,\n  children,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col gap-4 rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2\">\n        <div className=\"flex flex-col gap-0.5\">\n          <span className=\"text-sm font-semibold text-ds-color-fg\">\n            {title}\n          </span>\n          {dateRange && (\n            <span className=\"text-xs text-ds-color-fg-subtle\">{dateRange}</span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && (\n            <div className=\"flex items-center gap-3\">\n              {legend.map((item) => (\n                <span\n                  key={item.label}\n                  className=\"flex items-center gap-1.5 text-xs text-ds-color-fg-muted\"\n                >\n                  <span\n                    className=\"inline-block h-2.5 w-2.5 rounded-full shrink-0\"\n                    style={{ backgroundColor: item.color }}\n                    aria-hidden=\"true\"\n                  />\n                  {item.label}\n                </span>\n              ))}\n            </div>\n          )}\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n            aria-label=\"More options\"\n            onClick={onMenuClick}\n          >\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"w-full\">{children}</div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface TopProductItem {\n  id: string | number;\n  name: string;\n  category: string;\n  soldCount: number;\n  image?: string;\n  rank: number;\n}\n\nexport interface TopProductsCardProps {\n  title?: string;\n  items: TopProductItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\nconst RankBadge: FC<{ rank: number }> = ({ rank }) => (\n  <span\n    className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-xs font-semibold  border-ds-border-3/80 \"\n    style={{\n      borderColor: \"var(--ds-color-accent)\",\n      color: \"var(--ds-color-accent)\",\n    }}\n    aria-label={`Rank ${rank}`}\n  >\n    {rank}\n  </span>\n);\n\nconst ProductImage: FC<{ src?: string; alt: string }> = ({ src, alt }) => {\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={alt}\n        className=\"h-11 w-11 shrink-0 rounded-md object-contain bg-ds-color-bg-utility p-1\"\n      />\n    );\n  }\n  return (\n    <div\n      className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-ds-color-bg-utility text-ds-color-fg-subtle text-lg\"\n      aria-hidden=\"true\"\n    >\n      □\n    </div>\n  );\n};\n\nexport const TopProductsCard: FC<TopProductsCardProps> = ({\n  title = \"Top Products\",\n  items,\n  className,\n  onMenuClick,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"mb-4 flex items-center justify-between\">\n        <span className=\"text-sm font-semibold text-ds-color-fg\">{title}</span>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      <ul className=\"flex flex-col divide-y divide-ds-border-2\" role=\"list\">\n        {items.map((item) => (\n          <li\n            key={item.id}\n            className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\"\n          >\n            <ProductImage src={item.image} alt={item.name} />\n\n            <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n              <span className=\"truncate text-sm font-semibold text-ds-color-fg\">\n                {item.name}\n              </span>\n              <span className=\"truncate text-xs text-ds-color-fg-subtle\">\n                {item.category} · {item.soldCount.toLocaleString()} sold\n              </span>\n            </div>\n\n            <RankBadge rank={item.rank} />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n","import {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { TabsDirection, TabsItem, TabsProps } from \"./types\";\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: TabsDirection,\n): Exclude<TabsDirection, \"auto\"> {\n  if (direction !== \"auto\") {\n    return direction;\n  }\n\n  if (typeof document === \"undefined\") {\n    return \"ltr\";\n  }\n\n  const explicitDirection =\n    document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n  if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n    return explicitDirection;\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction getFirstEnabledId(items: readonly TabsItem[]): string {\n  const fallback = items.find((item) => !item.disabled) ?? items[0];\n  return fallback?.id ?? \"\";\n}\n\nexport function Tabs({\n  items,\n  value,\n  defaultValue,\n  onValueChange,\n  dir = \"auto\",\n  className,\n  listClassName,\n  triggerClassName,\n  panelClassName,\n  animationDurationMs = 220,\n}: TabsProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const tabSlotRefs = useRef<Record<string, HTMLDivElement | null>>({});\n  const panelRef = useRef<HTMLDivElement>(null);\n  const isControlled = value !== undefined;\n\n  const fallbackId = useMemo(() => getFirstEnabledId(items), [items]);\n  const [internalValue, setInternalValue] = useState<string>(\n    defaultValue ?? fallbackId,\n  );\n  const rawActiveId = isControlled ? value : internalValue;\n  const activeId = items.some((item) => item.id === rawActiveId)\n    ? rawActiveId\n    : fallbackId;\n\n  const activeIndex = useMemo(\n    () =>\n      Math.max(\n        items.findIndex((item) => item.id === activeId),\n        0,\n      ),\n    [items, activeId],\n  );\n\n  const previousIndexRef = useRef(activeIndex);\n  const [indicator, setIndicator] = useState<{\n    left: number;\n    width: number;\n  } | null>(null);\n\n  const getEffectiveDirection = useCallback(() => {\n    if (dir !== \"auto\") {\n      return dir;\n    }\n\n    if (typeof window !== \"undefined\" && listRef.current) {\n      const cssDirection = window.getComputedStyle(listRef.current).direction;\n      if (cssDirection === \"rtl\" || cssDirection === \"ltr\") {\n        return cssDirection;\n      }\n    }\n\n    return resolveDirection(\"auto\");\n  }, [dir]);\n\n  useEffect(() => {\n    const previousIndex = previousIndexRef.current;\n    if (activeIndex === previousIndex) {\n      return;\n    }\n\n    const panel = panelRef.current;\n    if (!panel) {\n      previousIndexRef.current = activeIndex;\n      return;\n    }\n\n    const indexDelta = activeIndex - previousIndex;\n    const logicalDirection = indexDelta >= 0 ? 1 : -1;\n    const visualDirection =\n      getEffectiveDirection() === \"rtl\" ? -logicalDirection : logicalDirection;\n    const fromX = visualDirection > 0 ? -14 : 14;\n\n    panel.animate(\n      [\n        { opacity: 0, transform: `translateX(${fromX}px)` },\n        { opacity: 1, transform: \"translateX(0px)\" },\n      ],\n      {\n        duration: animationDurationMs,\n        easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\n      },\n    );\n\n    previousIndexRef.current = activeIndex;\n  }, [activeIndex, animationDurationMs, getEffectiveDirection]);\n\n  const activeItem = items[activeIndex] ?? items[0];\n\n  useLayoutEffect(() => {\n    const updateIndicator = () => {\n      const selectedSlot = tabSlotRefs.current[activeItem?.id ?? \"\"];\n      if (!selectedSlot) {\n        setIndicator(null);\n        return;\n      }\n\n      setIndicator({\n        left: selectedSlot.offsetLeft,\n        width: selectedSlot.offsetWidth,\n      });\n    };\n\n    updateIndicator();\n    window.addEventListener(\"resize\", updateIndicator);\n    return () => window.removeEventListener(\"resize\", updateIndicator);\n  }, [activeItem?.id, items.length]);\n\n  const setValue = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    onValueChange?.(nextValue);\n  };\n\n  const moveBy = (delta: number) => {\n    if (items.length === 0) {\n      return;\n    }\n\n    let probe = activeIndex;\n    for (let step = 0; step < items.length; step++) {\n      probe = (probe + delta + items.length) % items.length;\n      const candidate = items[probe];\n      if (!candidate?.disabled) {\n        setValue(candidate.id);\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      dir={dir === \"auto\" ? undefined : dir}\n      className={mergeClassNames(\"w-full\", className)}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        className={mergeClassNames(\n          \"relative flex h-9 w-full items-center gap-0 overflow-hidden rounded-lg border border-ds-border-3 bg-ds-surface-2 p-1\",\n          listClassName,\n        )}\n      >\n        {items.length > 0 && indicator ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute bottom-1 top-1 rounded-md border border-ds-border-accent/45 bg-ds-accent shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_rgba(0,0,0,0.06)] transition-transform duration-300 ease-out\"\n            style={{\n              width: `${indicator.width}px`,\n              transform: `translateX(${indicator.left}px)`,\n              left: 0,\n            }}\n          />\n        ) : null}\n        {items.map((item) => {\n          const selected = item.id === activeItem?.id;\n          return (\n            <div\n              key={item.id}\n              ref={(node) => {\n                tabSlotRefs.current[item.id] = node;\n              }}\n              className=\"relative z-10 h-full min-w-0 flex-1\"\n            >\n              <Button\n                role=\"tab\"\n                id={`tab-${item.id}`}\n                aria-selected={selected}\n                aria-controls={`tabpanel-${item.id}`}\n                tabIndex={selected ? 0 : -1}\n                disabled={item.disabled}\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"h-full w-full rounded-md px-3 py-1 text-base font-normal leading-[22px] transition-colors duration-200\",\n                  \"outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60\",\n                  selected ? \"text-ds-on-accent\" : \"text-ds-2 hover:text-ds-1\",\n                  item.disabled && \"cursor-not-allowed opacity-55\",\n                  triggerClassName,\n                )}\n                onClick={() => {\n                  if (!item.disabled) {\n                    setValue(item.id);\n                  }\n                }}\n                onKeyDown={(event) => {\n                  if (event.key === \"ArrowRight\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? -1 : 1);\n                  }\n\n                  if (event.key === \"ArrowLeft\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? 1 : -1);\n                  }\n\n                  if (event.key === \"Home\") {\n                    event.preventDefault();\n                    const first = items.find((candidate) => !candidate.disabled);\n                    if (first) {\n                      setValue(first.id);\n                    }\n                  }\n\n                  if (event.key === \"End\") {\n                    event.preventDefault();\n                    const reversed = [...items].reverse();\n                    const last = reversed.find(\n                      (candidate) => !candidate.disabled,\n                    );\n                    if (last) {\n                      setValue(last.id);\n                    }\n                  }\n                }}\n              >\n                {item.label}\n              </Button>\n            </div>\n          );\n        })}\n      </div>\n\n      <div\n        ref={panelRef}\n        role=\"tabpanel\"\n        id={`tabpanel-${activeItem?.id ?? \"\"}`}\n        aria-labelledby={`tab-${activeItem?.id ?? \"\"}`}\n        className={mergeClassNames(\"mt-2 w-full\", panelClassName)}\n      >\n        {activeItem?.content}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/components/effects/border-beam/BorderBeam.tsx","../src/components/data-display/dashboard-cards/StatCard.tsx","../src/components/data-display/dashboard-cards/ChartCard.tsx","../src/components/data-display/dashboard-cards/TopProductsCard.tsx","../src/components/navigation/tabs/Tabs.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nexport interface BorderBeamProps {\n  className?: string;\n  size?: number;\n  duration?: number;\n  borderWidth?: number;\n  anchor?: number;\n  colorFrom?: string;\n  colorTo?: string;\n  delay?: number;\n}\n\nexport function BorderBeam({\n  className = \"\",\n  size = 200,\n  duration = 15,\n  anchor = 90,\n  borderWidth = 0.5,\n  colorFrom = \"var(--ds-color-accent)\",\n  colorTo = \"var(--ds-color-accent-hover)\",\n  delay = 0,\n}: BorderBeamProps) {\n  return (\n    <div\n      style={\n        {\n          \"--size\": `${size}px`,\n          \"--duration\": `${duration}s`,\n          \"--anchor\": `${anchor}`,\n          \"--border-width\": `${borderWidth}px`,\n          \"--beam-color-from\": colorFrom,\n          \"--beam-color-to\": colorTo,\n          \"--delay\": `-${delay}s`,\n        } as CSSProperties\n      }\n      className={`border-beam ${className}`}\n    />\n  );\n}\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ---------------------------------------------------------------------------\n// Internal: TrendBadge\n// ---------------------------------------------------------------------------\n\ninterface TrendBadgeProps {\n  value: string;\n  direction: \"up\" | \"down\";\n}\n\nconst TrendBadge: FC<TrendBadgeProps> = ({ value, direction }) => {\n  const isUp = direction === \"up\";\n  const color = isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\";\n  const bg = isUp ? \"var(--ds-color-success-subtle)\" : \"var(--ds-color-danger-subtle)\";\n\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 rounded-sm border px-1 py-0.5 text-[11px] font-semibold leading-none\"\n      style={{ color, borderColor: color, backgroundColor: bg }}\n      aria-label={`${value} ${isUp ? \"increase\" : \"decrease\"}`}\n    >\n      {value}\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n        {isUp ? (\n          <path d=\"M5 8V2M5 2L2 5M5 2L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : (\n          <path d=\"M5 2V8M5 8L2 5M5 8L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        )}\n      </svg>\n   \n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Internal: MenuButton\n// ---------------------------------------------------------------------------\n\nconst MenuButton: FC<{ onClick?: () => void }> = ({ onClick }) => (\n  <Button\n    variant=\"tertiary\"\n    size=\"small\"\n    className=\"shrink-0 p-0.5! text-ds-3\"\n    aria-label=\"More options\"\n    onClick={onClick}\n  >\n    <EllipsisVerticalIcon width={18} height={18} />\n  </Button>\n);\n\n// ---------------------------------------------------------------------------\n// Internal: LegendDot\n// ---------------------------------------------------------------------------\n\nconst LegendDots: FC<{ items: { label: string; color: string }[] }> = ({ items }) => (\n  <div className=\"flex items-center gap-3\">\n    {items.map((item) => (\n      <span key={item.label} className=\"flex items-center gap-1.5 text-xs text-ds-2\">\n        <span\n          className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n          style={{ backgroundColor: item.color }}\n          aria-hidden=\"true\"\n        />\n        {item.label}\n      </span>\n    ))}\n  </div>\n);\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport type StatCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StatCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface StatCardProps {\n  /** Layout size:\n   *  - \"sm\"  → 2-col  — metric only, no chart\n   *  - \"md\"  → 4-col  — metric + compact chart on the right (default)\n   *  - \"lg\"  → 12-col — metric header + full-width chart below\n   */\n  size?: StatCardSize;\n  title: string;\n  badge?: TrendBadgeProps;\n  value: ReactNode;\n  dateRange: string;\n  /** Chart content (any chart component). Ignored when size=\"sm\".\n   *  For \"md\" position is controlled by chartPosition.\n   *  For \"lg\" the chart spans full card width below a divider. */\n  chart?: ReactNode;\n  /** Controls where the chart renders in size=\"md\".\n   *  - \"side\"   (default) — compact chart to the right of the metric.\n   *  - \"bottom\" — full-width chart below the metric (good for bar/line/area charts). */\n  chartPosition?: \"side\" | \"bottom\";\n  /** Override the chart container's size/style.\n   *  \"md\" side:   overrides the side-zone div (default: h-[68px] w-[180px] shrink-0 overflow-hidden).\n   *  \"md\" bottom: overrides the bottom chart div (default: w-full pt-3).\n   *  \"lg\":        overrides the chart wrapper div (default: border-t border-ds-border-2 pt-4 w-full). */\n  chartClassName?: string;\n  /** Legend items shown in the header. Only visible when size=\"lg\". */\n  legend?: StatCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ---------------------------------------------------------------------------\n// StatCard\n// ---------------------------------------------------------------------------\n\nexport const StatCard: FC<StatCardProps> = ({\n  size = \"md\",\n  title,\n  badge,\n  value,\n  dateRange,\n  chart,\n  chartPosition = \"side\",\n  chartClassName,\n  legend,\n  className,\n  onMenuClick,\n}) => {\n  const base = mergeClassNames(\n    \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n    className,\n  );\n\n  // ── sm: 2-col, metric only ───────────────────────────────────────────────\n  if (size === \"sm\") {\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-7 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-2xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n        </div>\n      </div>\n    );\n  }\n\n  // ── md: 4-col, metric + chart ────────────────────────────────────────────\n  if (size === \"md\") {\n    const metricBlock = (\n      <div className=\"flex flex-col gap-1 min-w-0\">\n        <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n          {value}\n        </p>\n        <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n      </div>\n    );\n\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-3 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n\n        {chartPosition === \"bottom\" ? (\n          <>\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"w-full pt-3\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"flex items-end justify-between gap-3\">\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"h-[46px] w-[155px] shrink-0 overflow-hidden\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // ── lg: 12-col, header + full-width chart ────────────────────────────────\n  return (\n    <div className={mergeClassNames(base, \"flex flex-col p-5\")}>\n      {/* Header row */}\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2 mb-4\">\n        <div className=\"flex flex-col gap-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-xs text-ds-3\">{dateRange}</p>\n        </div>\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && <LegendDots items={legend} />}\n          <MenuButton onClick={onMenuClick} />\n        </div>\n      </div>\n\n      {/* Chart area */}\n      {chart && (\n        <div className={mergeClassNames(\"border-t border-ds-border-2 pt-4 w-full\", chartClassName)}>\n          {chart}\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ChartCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface ChartCardProps {\n  title: string;\n  dateRange?: string;\n  legend?: ChartCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  children: ReactNode;\n}\n\nexport const ChartCard: FC<ChartCardProps> = ({\n  title,\n  dateRange,\n  legend,\n  className,\n  onMenuClick,\n  children,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col gap-4 rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2\">\n        <div className=\"flex flex-col gap-0.5\">\n          <span className=\"text-sm font-semibold text-ds-color-fg\">\n            {title}\n          </span>\n          {dateRange && (\n            <span className=\"text-xs text-ds-color-fg-subtle\">{dateRange}</span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && (\n            <div className=\"flex items-center gap-3\">\n              {legend.map((item) => (\n                <span\n                  key={item.label}\n                  className=\"flex items-center gap-1.5 text-xs text-ds-color-fg-muted\"\n                >\n                  <span\n                    className=\"inline-block h-2.5 w-2.5 rounded-full shrink-0\"\n                    style={{ backgroundColor: item.color }}\n                    aria-hidden=\"true\"\n                  />\n                  {item.label}\n                </span>\n              ))}\n            </div>\n          )}\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n            aria-label=\"More options\"\n            onClick={onMenuClick}\n          >\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"w-full\">{children}</div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface TopProductItem {\n  id: string | number;\n  name: string;\n  category: string;\n  soldCount: number;\n  image?: string;\n  rank: number;\n}\n\nexport interface TopProductsCardProps {\n  title?: string;\n  items: TopProductItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\nconst RankBadge: FC<{ rank: number }> = ({ rank }) => (\n  <span\n    className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-xs font-semibold  border-ds-border-3/80 \"\n    style={{\n      borderColor: \"var(--ds-color-accent)\",\n      color: \"var(--ds-color-accent)\",\n    }}\n    aria-label={`Rank ${rank}`}\n  >\n    {rank}\n  </span>\n);\n\nconst ProductImage: FC<{ src?: string; alt: string }> = ({ src, alt }) => {\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={alt}\n        className=\"h-11 w-11 shrink-0 rounded-md object-contain bg-ds-color-bg-utility p-1\"\n      />\n    );\n  }\n  return (\n    <div\n      className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-ds-color-bg-utility text-ds-color-fg-subtle text-lg\"\n      aria-hidden=\"true\"\n    >\n      □\n    </div>\n  );\n};\n\nexport const TopProductsCard: FC<TopProductsCardProps> = ({\n  title = \"Top Products\",\n  items,\n  className,\n  onMenuClick,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"mb-4 flex items-center justify-between\">\n        <span className=\"text-sm font-semibold text-ds-color-fg\">{title}</span>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      <ul className=\"flex flex-col divide-y divide-ds-border-2\" role=\"list\">\n        {items.map((item) => (\n          <li\n            key={item.id}\n            className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\"\n          >\n            <ProductImage src={item.image} alt={item.name} />\n\n            <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n              <span className=\"truncate text-sm font-semibold text-ds-color-fg\">\n                {item.name}\n              </span>\n              <span className=\"truncate text-xs text-ds-color-fg-subtle\">\n                {item.category} · {item.soldCount.toLocaleString()} sold\n              </span>\n            </div>\n\n            <RankBadge rank={item.rank} />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n","import {\n  Fragment,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { TabsDirection, TabsItem, TabsProps } from \"./types\";\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: TabsDirection,\n): Exclude<TabsDirection, \"auto\"> {\n  if (direction !== \"auto\") {\n    return direction;\n  }\n\n  if (typeof document === \"undefined\") {\n    return \"ltr\";\n  }\n\n  const explicitDirection =\n    document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n  if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n    return explicitDirection;\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction getFirstEnabledId(items: readonly TabsItem[]): string {\n  const fallback = items.find((item) => !item.disabled) ?? items[0];\n  return fallback?.id ?? \"\";\n}\n\nexport function Tabs({\n  items,\n  value,\n  defaultValue,\n  onValueChange,\n  dir = \"auto\",\n  className,\n  listClassName,\n  triggerClassName,\n  panelClassName,\n  animationDurationMs = 220,\n}: TabsProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const tabSlotRefs = useRef<Record<string, HTMLDivElement | null>>({});\n  const panelRef = useRef<HTMLDivElement>(null);\n  const isControlled = value !== undefined;\n\n  const fallbackId = useMemo(() => getFirstEnabledId(items), [items]);\n  const [internalValue, setInternalValue] = useState<string>(\n    defaultValue ?? fallbackId,\n  );\n  const rawActiveId = isControlled ? value : internalValue;\n  const activeId = items.some((item) => item.id === rawActiveId)\n    ? rawActiveId\n    : fallbackId;\n\n  const activeIndex = useMemo(\n    () =>\n      Math.max(\n        items.findIndex((item) => item.id === activeId),\n        0,\n      ),\n    [items, activeId],\n  );\n\n  const previousIndexRef = useRef(activeIndex);\n  const [indicator, setIndicator] = useState<{\n    left: number;\n    width: number;\n  } | null>(null);\n\n  const getEffectiveDirection = useCallback(() => {\n    if (dir !== \"auto\") {\n      return dir;\n    }\n\n    if (typeof window !== \"undefined\" && listRef.current) {\n      const cssDirection = window.getComputedStyle(listRef.current).direction;\n      if (cssDirection === \"rtl\" || cssDirection === \"ltr\") {\n        return cssDirection;\n      }\n    }\n\n    return resolveDirection(\"auto\");\n  }, [dir]);\n\n  useEffect(() => {\n    const previousIndex = previousIndexRef.current;\n    if (activeIndex === previousIndex) {\n      return;\n    }\n\n    const panel = panelRef.current;\n    if (!panel) {\n      previousIndexRef.current = activeIndex;\n      return;\n    }\n\n    const indexDelta = activeIndex - previousIndex;\n    const logicalDirection = indexDelta >= 0 ? 1 : -1;\n    const visualDirection =\n      getEffectiveDirection() === \"rtl\" ? -logicalDirection : logicalDirection;\n    const fromX = visualDirection > 0 ? -14 : 14;\n\n    panel.animate(\n      [\n        { opacity: 0, transform: `translateX(${fromX}px)` },\n        { opacity: 1, transform: \"translateX(0px)\" },\n      ],\n      {\n        duration: animationDurationMs,\n        easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\n      },\n    );\n\n    previousIndexRef.current = activeIndex;\n  }, [activeIndex, animationDurationMs, getEffectiveDirection]);\n\n  const activeItem = items[activeIndex] ?? items[0];\n\n  useLayoutEffect(() => {\n    const updateIndicator = () => {\n      const selectedSlot = tabSlotRefs.current[activeItem?.id ?? \"\"];\n      if (!selectedSlot) {\n        setIndicator(null);\n        return;\n      }\n\n      setIndicator({\n        left: selectedSlot.offsetLeft,\n        width: selectedSlot.offsetWidth,\n      });\n    };\n\n    updateIndicator();\n    window.addEventListener(\"resize\", updateIndicator);\n    return () => window.removeEventListener(\"resize\", updateIndicator);\n  }, [activeItem?.id, items.length]);\n\n  const setValue = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    onValueChange?.(nextValue);\n  };\n\n  const moveBy = (delta: number) => {\n    if (items.length === 0) {\n      return;\n    }\n\n    let probe = activeIndex;\n    for (let step = 0; step < items.length; step++) {\n      probe = (probe + delta + items.length) % items.length;\n      const candidate = items[probe];\n      if (!candidate?.disabled) {\n        setValue(candidate.id);\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      dir={dir === \"auto\" ? undefined : dir}\n      className={mergeClassNames(\"w-full\", className)}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        className={mergeClassNames(\n          \"relative flex h-9 w-full items-center gap-0 overflow-hidden rounded-lg border border-ds-border-3 bg-ds-surface-2 p-1\",\n          listClassName,\n        )}\n      >\n        {items.length > 0 && indicator ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute bottom-1 top-1 rounded-md border border-ds-border-accent/45 bg-ds-accent shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_rgba(0,0,0,0.06)] transition-transform duration-300 ease-out\"\n            style={{\n              width: `${indicator.width}px`,\n              transform: `translateX(${indicator.left}px)`,\n              left: 0,\n            }}\n          />\n        ) : null}\n        {items.map((item) => {\n          const selected = item.id === activeItem?.id;\n          return (\n            <div\n              key={item.id}\n              ref={(node) => {\n                tabSlotRefs.current[item.id] = node;\n              }}\n              className=\"relative z-10 h-full min-w-0 flex-1\"\n            >\n              <Button\n                role=\"tab\"\n                id={`tab-${item.id}`}\n                aria-selected={selected}\n                aria-controls={`tabpanel-${item.id}`}\n                tabIndex={selected ? 0 : -1}\n                disabled={item.disabled}\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"h-full w-full rounded-md px-3 py-1 text-base font-normal leading-[22px] transition-colors duration-200\",\n                  \"outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60\",\n                  selected ? \"text-ds-on-accent\" : \"text-ds-2 hover:text-ds-1\",\n                  item.disabled && \"cursor-not-allowed opacity-55\",\n                  triggerClassName,\n                )}\n                onClick={() => {\n                  if (!item.disabled) {\n                    setValue(item.id);\n                  }\n                }}\n                onKeyDown={(event) => {\n                  if (event.key === \"ArrowRight\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? -1 : 1);\n                  }\n\n                  if (event.key === \"ArrowLeft\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? 1 : -1);\n                  }\n\n                  if (event.key === \"Home\") {\n                    event.preventDefault();\n                    const first = items.find((candidate) => !candidate.disabled);\n                    if (first) {\n                      setValue(first.id);\n                    }\n                  }\n\n                  if (event.key === \"End\") {\n                    event.preventDefault();\n                    const reversed = [...items].reverse();\n                    const last = reversed.find(\n                      (candidate) => !candidate.disabled,\n                    );\n                    if (last) {\n                      setValue(last.id);\n                    }\n                  }\n                }}\n              >\n                {item.label}\n              </Button>\n            </div>\n          );\n        })}\n      </div>\n\n      <div\n        ref={panelRef}\n        role=\"tabpanel\"\n        id={`tabpanel-${activeItem?.id ?? \"\"}`}\n        aria-labelledby={`tab-${activeItem?.id ?? \"\"}`}\n        className={mergeClassNames(\"mt-2 w-full\", panelClassName)}\n      >\n        <Fragment key={activeItem?.id}>\n          {activeItem?.content}\n        </Fragment>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "erp-pro-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Lightweight React UI component library for ERP and SaaS apps with tree-shakeable subpath exports.",
   "type": "module",
   "sideEffects": [