erp-pro-ui 0.1.8 → 0.2.0

package/dist/chunks/dialog-fffx1-4D.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-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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"}

package/dist/chunks/{drawer-DTRnKChF.cjs → drawer-D07dGN6R.cjs}

@@ -44,7 +44,7 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 	}, [open, onOpenChange]);
 	const variants = getVariants(position);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "fixed inset-0 z-40 flex overlay-backdrop",
+		className: "fixed inset-0 z-200 flex overlay-backdrop",
 		role: "presentation",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 			initial: { opacity: 0 },
@@ -81,11 +81,11 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"aria-hidden": "true",
-					className: "pointer-events-none absolute -right-10 top-[-72px] h-40 w-40 rounded-full bg-ds-accent/18 blur-3xl"
+					className: "pointer-events-none absolute -end-10 top-[-72px] h-40 w-40 rounded-full bg-ds-accent/18 blur-3xl"
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
-					className: "absolute right-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-ds-border-2 bg-ds-surface-2 text-lg font-light text-ds-1 shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-ds-surface-3",
+					className: "absolute end-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-ds-border-2 bg-ds-surface-2 text-lg font-light text-ds-1 shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-ds-surface-3",
 					"aria-label": "Close drawer",
 					onClick: () => onOpenChange?.(false),
 					children: "×"
@@ -94,7 +94,7 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 					className: "relative z-10 flex h-full flex-col",
 					children: [
 						(title || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-							className: "space-y-1 pr-10",
+							className: "space-y-1 pe-10",
 							children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
 								className: "text-lg font-semibold tracking-tight text-ds-1",
 								children: title
@@ -104,7 +104,7 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 							})]
 						}),
 						children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mt-4 flex-1 overflow-auto space-y-4 pr-1",
+							className: "mt-4 flex-1 overflow-auto space-y-4 pe-1",
 							children
 						}),
 						footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
@@ -125,4 +125,4 @@ Object.defineProperty(exports, "Drawer", {
 	}
 });
 
-//# sourceMappingURL=drawer-DTRnKChF.cjs.map
+//# sourceMappingURL=drawer-D07dGN6R.cjs.map

package/dist/chunks/drawer-D07dGN6R.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-D07dGN6R.cjs","names":[],"sources":["../../src/components/overlays/drawer/Drawer.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport type { DrawerProps, DrawerPosition } from \"./types\";\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\nconst basePanel =\n  \"relative flex flex-col overflow-hidden rounded-2xl border border-ds-border-2 bg-ds-surface-1/95 p-6 shadow-[0_24px_80px_rgba(15,23,42,0.22),0_8px_28px_rgba(15,23,42,0.14)] ring-1 ring-inset ring-ds-border-3/35 backdrop-blur-2xl backdrop-saturate-150\";\n\nconst positionClasses: Record<DrawerPosition, string> = {\n  right: \"h-[calc(100%-8px)] my-1 mr-1 w-full max-w-md ml-auto border\",\n  left: \"h-[calc(100%-8px)] my-1 ml-1 w-full max-w-md mr-auto border\",\n  top: \"w-[calc(100%-8px)] mx-1 mt-1 max-h-[80vh] border\",\n  bottom: \"w-[calc(100%-8px)] mx-1 mb-1 max-h-[80vh] mt-auto border\",\n};\n\nconst getVariants = (position: DrawerPosition) => {\n  switch (position) {\n    case \"left\":\n      return { hidden: { x: \"-100%\" }, visible: { x: 0 } };\n    case \"right\":\n      return { hidden: { x: \"100%\" }, visible: { x: 0 } };\n    case \"top\":\n      return { hidden: { y: \"-100%\" }, visible: { y: 0 } };\n    case \"bottom\":\n      return { hidden: { y: \"100%\" }, visible: { y: 0 } };\n  }\n};\n\nexport const Drawer = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  position = \"right\",\n  children,\n  footer,\n}: DrawerProps) => {\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 variants = getVariants(position);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 z-200 flex overlay-backdrop\"\n          role=\"presentation\"\n        >\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"fixed inset-0 bg-ds-canvas/55 backdrop-blur-[3px]\"\n            onClick={() => onOpenChange?.(false)}\n          />\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} ${positionClasses[position]}`}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"hidden\"\n            variants={variants}\n            transition={{ type: \"spring\", damping: 25, stiffness: 200 }}\n          >\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-0 bg-linear-to-b from-ds-accent/10 via-transparent to-transparent\"\n            />\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-x-0 top-0 h-24 bg-linear-to-b from-ds-accent/16 to-transparent\"\n            />\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute -end-10 top-[-72px] h-40 w-40 rounded-full bg-ds-accent/18 blur-3xl\"\n            />\n            <button\n              type=\"button\"\n              className=\"absolute end-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-ds-border-2 bg-ds-surface-2 text-lg font-light text-ds-1 shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-ds-surface-3\"\n              aria-label=\"Close drawer\"\n              onClick={() => onOpenChange?.(false)}\n            >\n              ×\n            </button>\n            <div className=\"relative z-10 flex h-full flex-col\">\n              {(title || description) && (\n                <header className=\"space-y-1 pe-10\">\n                  {title && (\n                    <h2 className=\"text-lg font-semibold tracking-tight text-ds-1\">\n                      {title}\n                    </h2>\n                  )}\n                  {description && (\n                    <p className=\"text-sm text-ds-2\">{description}</p>\n                  )}\n                </header>\n              )}\n              {children && (\n                <div className=\"mt-4 flex-1 overflow-auto space-y-4 pe-1\">\n                  {children}\n                </div>\n              )}\n              {footer && (\n                <footer className=\"mt-6 border-t border-ds-border-2 pt-4\">\n                  {footer}\n                </footer>\n              )}\n            </div>\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"mappings":"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"}

package/dist/chunks/{drawer-BJsBK6cP.mjs → drawer-DaoAXL-w.mjs}

@@ -43,7 +43,7 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 	}, [open, onOpenChange]);
 	const variants = getVariants(position);
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs("div", {
-		className: "fixed inset-0 z-40 flex overlay-backdrop",
+		className: "fixed inset-0 z-200 flex overlay-backdrop",
 		role: "presentation",
 		children: [/* @__PURE__ */ jsx(motion.div, {
 			initial: { opacity: 0 },
@@ -80,11 +80,11 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 				}),
 				/* @__PURE__ */ jsx("div", {
 					"aria-hidden": "true",
-					className: "pointer-events-none absolute -right-10 top-[-72px] h-40 w-40 rounded-full bg-ds-accent/18 blur-3xl"
+					className: "pointer-events-none absolute -end-10 top-[-72px] h-40 w-40 rounded-full bg-ds-accent/18 blur-3xl"
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "absolute right-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-ds-border-2 bg-ds-surface-2 text-lg font-light text-ds-1 shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-ds-surface-3",
+					className: "absolute end-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-ds-border-2 bg-ds-surface-2 text-lg font-light text-ds-1 shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-ds-surface-3",
 					"aria-label": "Close drawer",
 					onClick: () => onOpenChange?.(false),
 					children: "×"
@@ -93,7 +93,7 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 					className: "relative z-10 flex h-full flex-col",
 					children: [
 						(title || description) && /* @__PURE__ */ jsxs("header", {
-							className: "space-y-1 pr-10",
+							className: "space-y-1 pe-10",
 							children: [title && /* @__PURE__ */ jsx("h2", {
 								className: "text-lg font-semibold tracking-tight text-ds-1",
 								children: title
@@ -103,7 +103,7 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 							})]
 						}),
 						children && /* @__PURE__ */ jsx("div", {
-							className: "mt-4 flex-1 overflow-auto space-y-4 pr-1",
+							className: "mt-4 flex-1 overflow-auto space-y-4 pe-1",
 							children
 						}),
 						footer && /* @__PURE__ */ jsx("footer", {
@@ -119,4 +119,4 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 //#endregion
 export { Drawer as t };
 
-//# sourceMappingURL=drawer-BJsBK6cP.mjs.map
+//# sourceMappingURL=drawer-DaoAXL-w.mjs.map

package/dist/chunks/drawer-DaoAXL-w.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-DaoAXL-w.mjs","names":[],"sources":["../../src/components/overlays/drawer/Drawer.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport type { DrawerProps, DrawerPosition } from \"./types\";\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\nconst basePanel =\n  \"relative flex flex-col overflow-hidden rounded-2xl border border-ds-border-2 bg-ds-surface-1/95 p-6 shadow-[0_24px_80px_rgba(15,23,42,0.22),0_8px_28px_rgba(15,23,42,0.14)] ring-1 ring-inset ring-ds-border-3/35 backdrop-blur-2xl backdrop-saturate-150\";\n\nconst positionClasses: Record<DrawerPosition, string> = {\n  right: \"h-[calc(100%-8px)] my-1 mr-1 w-full max-w-md ml-auto border\",\n  left: \"h-[calc(100%-8px)] my-1 ml-1 w-full max-w-md mr-auto border\",\n  top: \"w-[calc(100%-8px)] mx-1 mt-1 max-h-[80vh] border\",\n  bottom: \"w-[calc(100%-8px)] mx-1 mb-1 max-h-[80vh] mt-auto border\",\n};\n\nconst getVariants = (position: DrawerPosition) => {\n  switch (position) {\n    case \"left\":\n      return { hidden: { x: \"-100%\" }, visible: { x: 0 } };\n    case \"right\":\n      return { hidden: { x: \"100%\" }, visible: { x: 0 } };\n    case \"top\":\n      return { hidden: { y: \"-100%\" }, visible: { y: 0 } };\n    case \"bottom\":\n      return { hidden: { y: \"100%\" }, visible: { y: 0 } };\n  }\n};\n\nexport const Drawer = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  position = \"right\",\n  children,\n  footer,\n}: DrawerProps) => {\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 variants = getVariants(position);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 z-200 flex overlay-backdrop\"\n          role=\"presentation\"\n        >\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"fixed inset-0 bg-ds-canvas/55 backdrop-blur-[3px]\"\n            onClick={() => onOpenChange?.(false)}\n          />\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} ${positionClasses[position]}`}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"hidden\"\n            variants={variants}\n            transition={{ type: \"spring\", damping: 25, stiffness: 200 }}\n          >\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-0 bg-linear-to-b from-ds-accent/10 via-transparent to-transparent\"\n            />\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-x-0 top-0 h-24 bg-linear-to-b from-ds-accent/16 to-transparent\"\n            />\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute -end-10 top-[-72px] h-40 w-40 rounded-full bg-ds-accent/18 blur-3xl\"\n            />\n            <button\n              type=\"button\"\n              className=\"absolute end-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-ds-border-2 bg-ds-surface-2 text-lg font-light text-ds-1 shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-ds-surface-3\"\n              aria-label=\"Close drawer\"\n              onClick={() => onOpenChange?.(false)}\n            >\n              ×\n            </button>\n            <div className=\"relative z-10 flex h-full flex-col\">\n              {(title || description) && (\n                <header className=\"space-y-1 pe-10\">\n                  {title && (\n                    <h2 className=\"text-lg font-semibold tracking-tight text-ds-1\">\n                      {title}\n                    </h2>\n                  )}\n                  {description && (\n                    <p className=\"text-sm text-ds-2\">{description}</p>\n                  )}\n                </header>\n              )}\n              {children && (\n                <div className=\"mt-4 flex-1 overflow-auto space-y-4 pe-1\">\n                  {children}\n                </div>\n              )}\n              {footer && (\n                <footer className=\"mt-6 border-t border-ds-border-2 pt-4\">\n                  {footer}\n                </footer>\n              )}\n            </div>\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAM,YACJ;AAEF,IAAM,kBAAkD;CACtD,OAAO;CACP,MAAM;CACN,KAAK;CACL,QAAQ;CACT;AAED,IAAM,eAAe,aAA6B;AAChD,SAAQ,UAAR;EACE,KAAK,OACH,QAAO;GAAE,QAAQ,EAAE,GAAG,SAAS;GAAE,SAAS,EAAE,GAAG,GAAG;GAAE;EACtD,KAAK,QACH,QAAO;GAAE,QAAQ,EAAE,GAAG,QAAQ;GAAE,SAAS,EAAE,GAAG,GAAG;GAAE;EACrD,KAAK,MACH,QAAO;GAAE,QAAQ,EAAE,GAAG,SAAS;GAAE,SAAS,EAAE,GAAG,GAAG;GAAE;EACtD,KAAK,SACH,QAAO;GAAE,QAAQ,EAAE,GAAG,QAAQ;GAAE,SAAS,EAAE,GAAG,GAAG;GAAE;;;AAIzD,IAAa,UAAU,EACrB,MACA,cACA,OACA,aACA,WAAW,SACX,UACA,aACiB;CACjB,MAAM,WAAW,OAA8B,KAAK;AACpD,mBAAkB,UAAU,KAAK;AAEjC,iBAAgB;AACd,MAAI,CAAC,QAAQ,OAAO,WAAW,YAAa;EAC5C,MAAM,aAAa,UAAyB;AAC1C,OAAI,MAAM,QAAQ,SAChB,gBAAe,MAAM;;AAGzB,SAAO,iBAAiB,WAAW,UAAU;AAC7C,eAAa,OAAO,oBAAoB,WAAW,UAAU;IAC5D,CAAC,MAAM,aAAa,CAAC;CAExB,MAAM,WAAW,YAAY,SAAS;AAEtC,QACE,oBAAC,iBAAD,EAAA,UACG,QACC,qBAAC,OAAD;EACE,WAAU;EACV,MAAK;YAFP,CAIE,oBAAC,OAAO,KAAR;GACE,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,MAAM,EAAE,SAAS,GAAG;GACpB,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAU;GACV,eAAe,eAAe,MAAM;GACpC,CAAA,EACF,qBAAC,OAAO,KAAR;GACE,MAAK;GACL,cAAW;GACX,cAAY;GACZ,WAAW,GAAG,UAAU,GAAG,gBAAgB;GAC3C,UAAU;GACV,KAAK;GACL,UAAU,UAAU,MAAM,iBAAiB;GAC3C,SAAQ;GACR,SAAQ;GACR,MAAK;GACK;GACV,YAAY;IAAE,MAAM;IAAU,SAAS;IAAI,WAAW;IAAK;aAZ7D;IAcE,oBAAC,OAAD;KACE,eAAY;KACZ,WAAU;KACV,CAAA;IACF,oBAAC,OAAD;KACE,eAAY;KACZ,WAAU;KACV,CAAA;IACF,oBAAC,OAAD;KACE,eAAY;KACZ,WAAU;KACV,CAAA;IACF,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,cAAW;KACX,eAAe,eAAe,MAAM;eACrC;KAEQ,CAAA;IACT,qBAAC,OAAD;KAAK,WAAU;eAAf;OACI,SAAS,gBACT,qBAAC,UAAD;OAAQ,WAAU;iBAAlB,CACG,SACC,oBAAC,MAAD;QAAI,WAAU;kBACX;QACE,CAAA,EAEN,eACC,oBAAC,KAAD;QAAG,WAAU;kBAAqB;QAAgB,CAAA,CAE7C;;MAEV,YACC,oBAAC,OAAD;OAAK,WAAU;OACZ;OACG,CAAA;MAEP,UACC,oBAAC,UAAD;OAAQ,WAAU;iBACf;OACM,CAAA;MAEP;;IACK;KACT;KAEQ,CAAA"}

package/dist/chunks/{form-CvNNjA1i.mjs → form-CtZ6U-_B.mjs}

@@ -103,7 +103,7 @@ var FormField = ({ label, description, error, required, htmlFor, helperAction, l
 			htmlFor: fieldId,
 			className: "text-sm font-medium text-ds-1",
 			children: [label, required && /* @__PURE__ */ jsx("span", {
-				className: "ml-1 text-destructive",
+				className: "ms-1 text-destructive",
 				children: "*"
 			})]
 		}), helperAction && /* @__PURE__ */ jsx("div", {
@@ -158,4 +158,4 @@ var InputGroup = ({ columns = 2, children, className = "" }) => /* @__PURE__ */
 //#endregion
 export { FormMessage as a, FormField as i, FormActions as n, FormSection as o, FormDescription as r, InputGroup as s, Form as t };
 
-//# sourceMappingURL=form-CvNNjA1i.mjs.map
+//# sourceMappingURL=form-CtZ6U-_B.mjs.map

package/dist/chunks/{form-CvNNjA1i.mjs.map → form-CtZ6U-_B.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"form-CvNNjA1i.mjs","names":[],"sources":["../../src/components/forms/form/Form.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useId } from \"react\";\nimport type { ReactElement } from \"react\";\n\nimport type {\n  FormProps,\n  FormSectionProps,\n  FormFieldProps,\n  FormActionsProps,\n  InputGroupProps,\n  FormDescriptionProps,\n  FormMessageProps,\n} from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n  classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst gapClassMap: Record<NonNullable<FormProps[\"gap\"]>, string> = {\n  sm: \"space-y-4\",\n  md: \"space-y-6\",\n  lg: \"space-y-8\",\n};\n\nconst sectionColumnsMap: Record<\n  NonNullable<FormSectionProps[\"columns\"]>,\n  string\n> = {\n  1: \"space-y-4\",\n  2: \"grid grid-cols-2 gap-4\",\n  3: \"grid grid-cols-3 gap-4\",\n};\n\nconst inputGroupMap: Record<NonNullable<InputGroupProps[\"columns\"]>, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-2\",\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n};\n\nconst actionsAlignMap: Record<\n  NonNullable<FormActionsProps[\"align\"]>,\n  string\n> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst messageIntentMap: Record<\n  NonNullable<FormMessageProps[\"intent\"]>,\n  string\n> = {\n  default: \"text-ds-2\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n};\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nexport const Form = ({\n  title,\n  description,\n  gap = \"lg\",\n  children,\n  className = \"\",\n  ...props\n}: FormProps) => {\n  return (\n    <form\n      className={cx(\n        \"w-full space-y-6 rounded-lg border border-ds-border-2 bg-ds-surface-1 p-6\",\n        className,\n      )}\n      {...props}\n    >\n      {(title || description) && (\n        <div className=\"space-y-2\">\n          {title && (\n            <h2 className=\"text-xl font-semibold text-ds-1\">{title}</h2>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </div>\n      )}\n      <div className={gapClassMap[gap]}>{children}</div>\n    </form>\n  );\n};\n\nexport const FormSection = ({\n  title,\n  description,\n  columns = 1,\n  children,\n  className = \"\",\n}: FormSectionProps) => {\n  return (\n    <section className={cx(\"space-y-4\", className)}>\n      {(title || description) && (\n        <header className=\"space-y-1\">\n          {title && (\n            <h3 className=\"text-base font-medium text-ds-1\">{title}</h3>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </header>\n      )}\n      <div className={sectionColumnsMap[columns] || sectionColumnsMap[1]}>\n        {children}\n      </div>\n    </section>\n  );\n};\n\nexport const FormDescription = ({\n  children,\n  className = \"\",\n  id,\n}: FormDescriptionProps) => (\n  <p id={id} className={cx(\"text-sm text-ds-2\", className)}>\n    {children}\n  </p>\n);\n\nexport const FormMessage = ({\n  children,\n  intent = \"default\",\n  className = \"\",\n  id,\n}: FormMessageProps) => (\n  <p\n    id={id}\n    role={intent === \"error\" ? \"alert\" : \"status\"}\n    className={cx(\"text-sm\", messageIntentMap[intent], className)}\n  >\n    {children}\n  </p>\n);\n\nexport const FormField = ({\n  label,\n  description,\n  error,\n  required,\n  htmlFor,\n  helperAction,\n  layout = \"stacked\",\n  children,\n  className = \"\",\n}: FormFieldProps) => {\n  const autoId = useId();\n  const fieldId = sanitizeId(htmlFor ?? autoId);\n  const descriptionId = description ? `${fieldId}-description` : undefined;\n  const errorId = error ? `${fieldId}-error` : undefined;\n\n  const controls = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const element = child as ReactElement<Record<string, unknown>>;\n    const currentDescribedBy = element.props?.[\"aria-describedby\"] as\n      | string\n      | undefined;\n    const describedBy = [currentDescribedBy, descriptionId, errorId]\n      .filter(Boolean)\n      .join(\" \")\n      .trim();\n\n    return cloneElement(element, {\n      id: element.props?.id ?? fieldId,\n      \"aria-describedby\": describedBy || undefined,\n      \"aria-invalid\": element.props?.[\"aria-invalid\"] ?? Boolean(error),\n    });\n  });\n\n  const labelNode = (\n    <div className=\"flex items-center justify-between gap-2\">\n      <label htmlFor={fieldId} className=\"text-sm font-medium text-ds-1\">\n        {label}\n        {required && <span className=\"ml-1 text-destructive\">*</span>}\n      </label>\n      {helperAction && <div className=\"text-xs text-ds-2\">{helperAction}</div>}\n    </div>\n  );\n\n  if (layout === \"inline\") {\n    return (\n      <div className={cx(\"flex flex-wrap items-start gap-6\", className)}>\n        <div className=\"min-w-[200px] space-y-1\">\n          {labelNode}\n          {description && (\n            <FormDescription id={descriptionId}>{description}</FormDescription>\n          )}\n        </div>\n        <div className=\"flex-1 space-y-2\">\n          {controls}\n          {error && (\n            <FormMessage id={errorId} intent=\"error\">\n              {error}\n            </FormMessage>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(\"space-y-2\", className)}>\n      {labelNode}\n      {description && (\n        <FormDescription id={descriptionId}>{description}</FormDescription>\n      )}\n      <div className=\"space-y-2\">\n        {controls}\n        {error && (\n          <FormMessage id={errorId} intent=\"error\">\n            {error}\n          </FormMessage>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FormActions = ({\n  children,\n  align = \"end\",\n  className = \"\",\n}: FormActionsProps) => (\n  <div\n    className={cx(\"flex flex-wrap gap-3\", actionsAlignMap[align], className)}\n  >\n    {children}\n  </div>\n);\n\nexport const InputGroup = ({\n  columns = 2,\n  children,\n  className = \"\",\n}: InputGroupProps) => (\n  <div className={cx(\"grid gap-4\", inputGroupMap[columns], className)}>\n    {children}\n  </div>\n);\n"],"mappings":"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"}
+{"version":3,"file":"form-CtZ6U-_B.mjs","names":[],"sources":["../../src/components/forms/form/Form.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useId } from \"react\";\nimport type { ReactElement } from \"react\";\n\nimport type {\n  FormProps,\n  FormSectionProps,\n  FormFieldProps,\n  FormActionsProps,\n  InputGroupProps,\n  FormDescriptionProps,\n  FormMessageProps,\n} from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n  classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst gapClassMap: Record<NonNullable<FormProps[\"gap\"]>, string> = {\n  sm: \"space-y-4\",\n  md: \"space-y-6\",\n  lg: \"space-y-8\",\n};\n\nconst sectionColumnsMap: Record<\n  NonNullable<FormSectionProps[\"columns\"]>,\n  string\n> = {\n  1: \"space-y-4\",\n  2: \"grid grid-cols-2 gap-4\",\n  3: \"grid grid-cols-3 gap-4\",\n};\n\nconst inputGroupMap: Record<NonNullable<InputGroupProps[\"columns\"]>, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-2\",\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n};\n\nconst actionsAlignMap: Record<\n  NonNullable<FormActionsProps[\"align\"]>,\n  string\n> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst messageIntentMap: Record<\n  NonNullable<FormMessageProps[\"intent\"]>,\n  string\n> = {\n  default: \"text-ds-2\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n};\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nexport const Form = ({\n  title,\n  description,\n  gap = \"lg\",\n  children,\n  className = \"\",\n  ...props\n}: FormProps) => {\n  return (\n    <form\n      className={cx(\n        \"w-full space-y-6 rounded-lg border border-ds-border-2 bg-ds-surface-1 p-6\",\n        className,\n      )}\n      {...props}\n    >\n      {(title || description) && (\n        <div className=\"space-y-2\">\n          {title && (\n            <h2 className=\"text-xl font-semibold text-ds-1\">{title}</h2>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </div>\n      )}\n      <div className={gapClassMap[gap]}>{children}</div>\n    </form>\n  );\n};\n\nexport const FormSection = ({\n  title,\n  description,\n  columns = 1,\n  children,\n  className = \"\",\n}: FormSectionProps) => {\n  return (\n    <section className={cx(\"space-y-4\", className)}>\n      {(title || description) && (\n        <header className=\"space-y-1\">\n          {title && (\n            <h3 className=\"text-base font-medium text-ds-1\">{title}</h3>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </header>\n      )}\n      <div className={sectionColumnsMap[columns] || sectionColumnsMap[1]}>\n        {children}\n      </div>\n    </section>\n  );\n};\n\nexport const FormDescription = ({\n  children,\n  className = \"\",\n  id,\n}: FormDescriptionProps) => (\n  <p id={id} className={cx(\"text-sm text-ds-2\", className)}>\n    {children}\n  </p>\n);\n\nexport const FormMessage = ({\n  children,\n  intent = \"default\",\n  className = \"\",\n  id,\n}: FormMessageProps) => (\n  <p\n    id={id}\n    role={intent === \"error\" ? \"alert\" : \"status\"}\n    className={cx(\"text-sm\", messageIntentMap[intent], className)}\n  >\n    {children}\n  </p>\n);\n\nexport const FormField = ({\n  label,\n  description,\n  error,\n  required,\n  htmlFor,\n  helperAction,\n  layout = \"stacked\",\n  children,\n  className = \"\",\n}: FormFieldProps) => {\n  const autoId = useId();\n  const fieldId = sanitizeId(htmlFor ?? autoId);\n  const descriptionId = description ? `${fieldId}-description` : undefined;\n  const errorId = error ? `${fieldId}-error` : undefined;\n\n  const controls = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const element = child as ReactElement<Record<string, unknown>>;\n    const currentDescribedBy = element.props?.[\"aria-describedby\"] as\n      | string\n      | undefined;\n    const describedBy = [currentDescribedBy, descriptionId, errorId]\n      .filter(Boolean)\n      .join(\" \")\n      .trim();\n\n    return cloneElement(element, {\n      id: element.props?.id ?? fieldId,\n      \"aria-describedby\": describedBy || undefined,\n      \"aria-invalid\": element.props?.[\"aria-invalid\"] ?? Boolean(error),\n    });\n  });\n\n  const labelNode = (\n    <div className=\"flex items-center justify-between gap-2\">\n      <label htmlFor={fieldId} className=\"text-sm font-medium text-ds-1\">\n        {label}\n        {required && <span className=\"ms-1 text-destructive\">*</span>}\n      </label>\n      {helperAction && <div className=\"text-xs text-ds-2\">{helperAction}</div>}\n    </div>\n  );\n\n  if (layout === \"inline\") {\n    return (\n      <div className={cx(\"flex flex-wrap items-start gap-6\", className)}>\n        <div className=\"min-w-[200px] space-y-1\">\n          {labelNode}\n          {description && (\n            <FormDescription id={descriptionId}>{description}</FormDescription>\n          )}\n        </div>\n        <div className=\"flex-1 space-y-2\">\n          {controls}\n          {error && (\n            <FormMessage id={errorId} intent=\"error\">\n              {error}\n            </FormMessage>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(\"space-y-2\", className)}>\n      {labelNode}\n      {description && (\n        <FormDescription id={descriptionId}>{description}</FormDescription>\n      )}\n      <div className=\"space-y-2\">\n        {controls}\n        {error && (\n          <FormMessage id={errorId} intent=\"error\">\n            {error}\n          </FormMessage>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FormActions = ({\n  children,\n  align = \"end\",\n  className = \"\",\n}: FormActionsProps) => (\n  <div\n    className={cx(\"flex flex-wrap gap-3\", actionsAlignMap[align], className)}\n  >\n    {children}\n  </div>\n);\n\nexport const InputGroup = ({\n  columns = 2,\n  children,\n  className = \"\",\n}: InputGroupProps) => (\n  <div className={cx(\"grid gap-4\", inputGroupMap[columns], className)}>\n    {children}\n  </div>\n);\n"],"mappings":"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"}

package/dist/chunks/{form-C_JxqsSZ.cjs → form-X6Vyaavl.cjs}

@@ -104,7 +104,7 @@ var FormField = ({ label, description, error, required, htmlFor, helperAction, l
 			htmlFor: fieldId,
 			className: "text-sm font-medium text-ds-1",
 			children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "ml-1 text-destructive",
+				className: "ms-1 text-destructive",
 				children: "*"
 			})]
 		}), helperAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -200,4 +200,4 @@ Object.defineProperty(exports, "InputGroup", {
 	}
 });
 
-//# sourceMappingURL=form-C_JxqsSZ.cjs.map
+//# sourceMappingURL=form-X6Vyaavl.cjs.map

package/dist/chunks/{form-C_JxqsSZ.cjs.map → form-X6Vyaavl.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"form-C_JxqsSZ.cjs","names":[],"sources":["../../src/components/forms/form/Form.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useId } from \"react\";\nimport type { ReactElement } from \"react\";\n\nimport type {\n  FormProps,\n  FormSectionProps,\n  FormFieldProps,\n  FormActionsProps,\n  InputGroupProps,\n  FormDescriptionProps,\n  FormMessageProps,\n} from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n  classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst gapClassMap: Record<NonNullable<FormProps[\"gap\"]>, string> = {\n  sm: \"space-y-4\",\n  md: \"space-y-6\",\n  lg: \"space-y-8\",\n};\n\nconst sectionColumnsMap: Record<\n  NonNullable<FormSectionProps[\"columns\"]>,\n  string\n> = {\n  1: \"space-y-4\",\n  2: \"grid grid-cols-2 gap-4\",\n  3: \"grid grid-cols-3 gap-4\",\n};\n\nconst inputGroupMap: Record<NonNullable<InputGroupProps[\"columns\"]>, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-2\",\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n};\n\nconst actionsAlignMap: Record<\n  NonNullable<FormActionsProps[\"align\"]>,\n  string\n> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst messageIntentMap: Record<\n  NonNullable<FormMessageProps[\"intent\"]>,\n  string\n> = {\n  default: \"text-ds-2\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n};\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nexport const Form = ({\n  title,\n  description,\n  gap = \"lg\",\n  children,\n  className = \"\",\n  ...props\n}: FormProps) => {\n  return (\n    <form\n      className={cx(\n        \"w-full space-y-6 rounded-lg border border-ds-border-2 bg-ds-surface-1 p-6\",\n        className,\n      )}\n      {...props}\n    >\n      {(title || description) && (\n        <div className=\"space-y-2\">\n          {title && (\n            <h2 className=\"text-xl font-semibold text-ds-1\">{title}</h2>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </div>\n      )}\n      <div className={gapClassMap[gap]}>{children}</div>\n    </form>\n  );\n};\n\nexport const FormSection = ({\n  title,\n  description,\n  columns = 1,\n  children,\n  className = \"\",\n}: FormSectionProps) => {\n  return (\n    <section className={cx(\"space-y-4\", className)}>\n      {(title || description) && (\n        <header className=\"space-y-1\">\n          {title && (\n            <h3 className=\"text-base font-medium text-ds-1\">{title}</h3>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </header>\n      )}\n      <div className={sectionColumnsMap[columns] || sectionColumnsMap[1]}>\n        {children}\n      </div>\n    </section>\n  );\n};\n\nexport const FormDescription = ({\n  children,\n  className = \"\",\n  id,\n}: FormDescriptionProps) => (\n  <p id={id} className={cx(\"text-sm text-ds-2\", className)}>\n    {children}\n  </p>\n);\n\nexport const FormMessage = ({\n  children,\n  intent = \"default\",\n  className = \"\",\n  id,\n}: FormMessageProps) => (\n  <p\n    id={id}\n    role={intent === \"error\" ? \"alert\" : \"status\"}\n    className={cx(\"text-sm\", messageIntentMap[intent], className)}\n  >\n    {children}\n  </p>\n);\n\nexport const FormField = ({\n  label,\n  description,\n  error,\n  required,\n  htmlFor,\n  helperAction,\n  layout = \"stacked\",\n  children,\n  className = \"\",\n}: FormFieldProps) => {\n  const autoId = useId();\n  const fieldId = sanitizeId(htmlFor ?? autoId);\n  const descriptionId = description ? `${fieldId}-description` : undefined;\n  const errorId = error ? `${fieldId}-error` : undefined;\n\n  const controls = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const element = child as ReactElement<Record<string, unknown>>;\n    const currentDescribedBy = element.props?.[\"aria-describedby\"] as\n      | string\n      | undefined;\n    const describedBy = [currentDescribedBy, descriptionId, errorId]\n      .filter(Boolean)\n      .join(\" \")\n      .trim();\n\n    return cloneElement(element, {\n      id: element.props?.id ?? fieldId,\n      \"aria-describedby\": describedBy || undefined,\n      \"aria-invalid\": element.props?.[\"aria-invalid\"] ?? Boolean(error),\n    });\n  });\n\n  const labelNode = (\n    <div className=\"flex items-center justify-between gap-2\">\n      <label htmlFor={fieldId} className=\"text-sm font-medium text-ds-1\">\n        {label}\n        {required && <span className=\"ml-1 text-destructive\">*</span>}\n      </label>\n      {helperAction && <div className=\"text-xs text-ds-2\">{helperAction}</div>}\n    </div>\n  );\n\n  if (layout === \"inline\") {\n    return (\n      <div className={cx(\"flex flex-wrap items-start gap-6\", className)}>\n        <div className=\"min-w-[200px] space-y-1\">\n          {labelNode}\n          {description && (\n            <FormDescription id={descriptionId}>{description}</FormDescription>\n          )}\n        </div>\n        <div className=\"flex-1 space-y-2\">\n          {controls}\n          {error && (\n            <FormMessage id={errorId} intent=\"error\">\n              {error}\n            </FormMessage>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(\"space-y-2\", className)}>\n      {labelNode}\n      {description && (\n        <FormDescription id={descriptionId}>{description}</FormDescription>\n      )}\n      <div className=\"space-y-2\">\n        {controls}\n        {error && (\n          <FormMessage id={errorId} intent=\"error\">\n            {error}\n          </FormMessage>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FormActions = ({\n  children,\n  align = \"end\",\n  className = \"\",\n}: FormActionsProps) => (\n  <div\n    className={cx(\"flex flex-wrap gap-3\", actionsAlignMap[align], className)}\n  >\n    {children}\n  </div>\n);\n\nexport const InputGroup = ({\n  columns = 2,\n  children,\n  className = \"\",\n}: InputGroupProps) => (\n  <div className={cx(\"grid gap-4\", inputGroupMap[columns], className)}>\n    {children}\n  </div>\n);\n"],"mappings":"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"}
+{"version":3,"file":"form-X6Vyaavl.cjs","names":[],"sources":["../../src/components/forms/form/Form.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useId } from \"react\";\nimport type { ReactElement } from \"react\";\n\nimport type {\n  FormProps,\n  FormSectionProps,\n  FormFieldProps,\n  FormActionsProps,\n  InputGroupProps,\n  FormDescriptionProps,\n  FormMessageProps,\n} from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n  classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst gapClassMap: Record<NonNullable<FormProps[\"gap\"]>, string> = {\n  sm: \"space-y-4\",\n  md: \"space-y-6\",\n  lg: \"space-y-8\",\n};\n\nconst sectionColumnsMap: Record<\n  NonNullable<FormSectionProps[\"columns\"]>,\n  string\n> = {\n  1: \"space-y-4\",\n  2: \"grid grid-cols-2 gap-4\",\n  3: \"grid grid-cols-3 gap-4\",\n};\n\nconst inputGroupMap: Record<NonNullable<InputGroupProps[\"columns\"]>, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-2\",\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n};\n\nconst actionsAlignMap: Record<\n  NonNullable<FormActionsProps[\"align\"]>,\n  string\n> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst messageIntentMap: Record<\n  NonNullable<FormMessageProps[\"intent\"]>,\n  string\n> = {\n  default: \"text-ds-2\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n};\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nexport const Form = ({\n  title,\n  description,\n  gap = \"lg\",\n  children,\n  className = \"\",\n  ...props\n}: FormProps) => {\n  return (\n    <form\n      className={cx(\n        \"w-full space-y-6 rounded-lg border border-ds-border-2 bg-ds-surface-1 p-6\",\n        className,\n      )}\n      {...props}\n    >\n      {(title || description) && (\n        <div className=\"space-y-2\">\n          {title && (\n            <h2 className=\"text-xl font-semibold text-ds-1\">{title}</h2>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </div>\n      )}\n      <div className={gapClassMap[gap]}>{children}</div>\n    </form>\n  );\n};\n\nexport const FormSection = ({\n  title,\n  description,\n  columns = 1,\n  children,\n  className = \"\",\n}: FormSectionProps) => {\n  return (\n    <section className={cx(\"space-y-4\", className)}>\n      {(title || description) && (\n        <header className=\"space-y-1\">\n          {title && (\n            <h3 className=\"text-base font-medium text-ds-1\">{title}</h3>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </header>\n      )}\n      <div className={sectionColumnsMap[columns] || sectionColumnsMap[1]}>\n        {children}\n      </div>\n    </section>\n  );\n};\n\nexport const FormDescription = ({\n  children,\n  className = \"\",\n  id,\n}: FormDescriptionProps) => (\n  <p id={id} className={cx(\"text-sm text-ds-2\", className)}>\n    {children}\n  </p>\n);\n\nexport const FormMessage = ({\n  children,\n  intent = \"default\",\n  className = \"\",\n  id,\n}: FormMessageProps) => (\n  <p\n    id={id}\n    role={intent === \"error\" ? \"alert\" : \"status\"}\n    className={cx(\"text-sm\", messageIntentMap[intent], className)}\n  >\n    {children}\n  </p>\n);\n\nexport const FormField = ({\n  label,\n  description,\n  error,\n  required,\n  htmlFor,\n  helperAction,\n  layout = \"stacked\",\n  children,\n  className = \"\",\n}: FormFieldProps) => {\n  const autoId = useId();\n  const fieldId = sanitizeId(htmlFor ?? autoId);\n  const descriptionId = description ? `${fieldId}-description` : undefined;\n  const errorId = error ? `${fieldId}-error` : undefined;\n\n  const controls = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const element = child as ReactElement<Record<string, unknown>>;\n    const currentDescribedBy = element.props?.[\"aria-describedby\"] as\n      | string\n      | undefined;\n    const describedBy = [currentDescribedBy, descriptionId, errorId]\n      .filter(Boolean)\n      .join(\" \")\n      .trim();\n\n    return cloneElement(element, {\n      id: element.props?.id ?? fieldId,\n      \"aria-describedby\": describedBy || undefined,\n      \"aria-invalid\": element.props?.[\"aria-invalid\"] ?? Boolean(error),\n    });\n  });\n\n  const labelNode = (\n    <div className=\"flex items-center justify-between gap-2\">\n      <label htmlFor={fieldId} className=\"text-sm font-medium text-ds-1\">\n        {label}\n        {required && <span className=\"ms-1 text-destructive\">*</span>}\n      </label>\n      {helperAction && <div className=\"text-xs text-ds-2\">{helperAction}</div>}\n    </div>\n  );\n\n  if (layout === \"inline\") {\n    return (\n      <div className={cx(\"flex flex-wrap items-start gap-6\", className)}>\n        <div className=\"min-w-[200px] space-y-1\">\n          {labelNode}\n          {description && (\n            <FormDescription id={descriptionId}>{description}</FormDescription>\n          )}\n        </div>\n        <div className=\"flex-1 space-y-2\">\n          {controls}\n          {error && (\n            <FormMessage id={errorId} intent=\"error\">\n              {error}\n            </FormMessage>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(\"space-y-2\", className)}>\n      {labelNode}\n      {description && (\n        <FormDescription id={descriptionId}>{description}</FormDescription>\n      )}\n      <div className=\"space-y-2\">\n        {controls}\n        {error && (\n          <FormMessage id={errorId} intent=\"error\">\n            {error}\n          </FormMessage>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FormActions = ({\n  children,\n  align = \"end\",\n  className = \"\",\n}: FormActionsProps) => (\n  <div\n    className={cx(\"flex flex-wrap gap-3\", actionsAlignMap[align], className)}\n  >\n    {children}\n  </div>\n);\n\nexport const InputGroup = ({\n  columns = 2,\n  children,\n  className = \"\",\n}: InputGroupProps) => (\n  <div className={cx(\"grid gap-4\", inputGroupMap[columns], className)}>\n    {children}\n  </div>\n);\n"],"mappings":"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"}

package/dist/chunks/{gradual-blur-BB-8oKX6.cjs → gradual-blur-C6NOnjTw.cjs}

@@ -1,5 +1,5 @@
 require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-B4SmmY4J.cjs");
+const require_utils = require("./utils-LRbEQHYs.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -62,4 +62,4 @@ Object.defineProperty(exports, "GradualBlur", {
 	}
 });
 
-//# sourceMappingURL=gradual-blur-BB-8oKX6.cjs.map
+//# sourceMappingURL=gradual-blur-C6NOnjTw.cjs.map

package/dist/chunks/{gradual-blur-BB-8oKX6.cjs.map → gradual-blur-C6NOnjTw.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"gradual-blur-BB-8oKX6.cjs","names":[],"sources":["../../src/components/effects/gradual-blur/GradualBlur.tsx"],"sourcesContent":["import { useRef, type ComponentType } from \"react\";\nimport { motion, type HTMLMotionProps } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { GradualBlurProps } from \"./types\";\n\nexport const GradualBlur = ({\n  children,\n  duration = 0.5,\n  delay = 0,\n  blur = 8,\n  triggerOnView = true,\n  triggerOnce = true,\n  threshold = 0.05,\n  visible = false,\n  direction = \"none\",\n  distance = 20,\n  className,\n  as = \"div\",\n}: GradualBlurProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const getInitialPosition = () => {\n    switch (direction) {\n      case \"top\":\n        return { y: -distance };\n      case \"bottom\":\n        return { y: distance };\n      case \"left\":\n        return { x: -distance };\n      case \"right\":\n        return { x: distance };\n      default:\n        return { x: 0, y: 0 };\n    }\n  };\n\n  const initialPosition = getInitialPosition();\n\n  const variants = {\n    hidden: {\n      opacity: 0,\n      filter: `blur(${blur}px)`,\n      ...initialPosition,\n    },\n    visible: {\n      opacity: 1,\n      filter: \"blur(0px)\",\n      x: 0,\n      y: 0,\n    },\n  };\n\n  const MotionComponent = motion.create(as as string) as ComponentType<\n    HTMLMotionProps<\"div\">\n  >;\n\n  return (\n    <MotionComponent\n      ref={ref}\n      variants={variants}\n      initial=\"hidden\"\n      animate={!triggerOnView ? (visible ? \"visible\" : \"hidden\") : undefined}\n      whileInView={triggerOnView ? \"visible\" : undefined}\n      viewport={{\n        once: triggerOnce,\n        amount: threshold,\n        margin: \"0px 0px -50px 0px\", // Slight bottom margin to trigger earlier\n      }}\n      transition={{\n        duration,\n        delay,\n        ease: \"easeOut\",\n        filter: { duration: duration },\n        opacity: { duration: duration },\n      }}\n      className={mergeClassNames(\"relative\", className)}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n"],"mappings":";;;;;;AAKA,IAAa,eAAe,EAC1B,UACA,WAAW,IACX,QAAQ,GACR,OAAO,GACP,gBAAgB,MAChB,cAAc,MACd,YAAY,KACZ,UAAU,OACV,YAAY,QACZ,WAAW,IACX,WACA,KAAK,YACiB;CACtB,MAAM,OAAA,GAAA,MAAA,QAA6B,KAAK;CAExC,MAAM,2BAA2B;AAC/B,UAAQ,WAAR;GACE,KAAK,MACH,QAAO,EAAE,GAAG,CAAC,UAAU;GACzB,KAAK,SACH,QAAO,EAAE,GAAG,UAAU;GACxB,KAAK,OACH,QAAO,EAAE,GAAG,CAAC,UAAU;GACzB,KAAK,QACH,QAAO,EAAE,GAAG,UAAU;GACxB,QACE,QAAO;IAAE,GAAG;IAAG,GAAG;IAAG;;;CAI3B,MAAM,kBAAkB,oBAAoB;CAE5C,MAAM,WAAW;EACf,QAAQ;GACN,SAAS;GACT,QAAQ,QAAQ,KAAK;GACrB,GAAG;GACJ;EACD,SAAS;GACP,SAAS;GACT,QAAQ;GACR,GAAG;GACH,GAAG;GACJ;EACF;AAMD,QACE,iBAAA,GAAA,kBAAA,KALsB,cAAA,OAAO,OAAO,GAAa,EAKjD;EACO;EACK;EACV,SAAQ;EACR,SAAS,CAAC,gBAAiB,UAAU,YAAY,WAAY,KAAA;EAC7D,aAAa,gBAAgB,YAAY,KAAA;EACzC,UAAU;GACR,MAAM;GACN,QAAQ;GACR,QAAQ;GACT;EACD,YAAY;GACV;GACA;GACA,MAAM;GACN,QAAQ,EAAY,UAAU;GAC9B,SAAS,EAAY,UAAU;GAChC;EACD,WAAW,cAAA,gBAAgB,YAAY,UAAU;EAEhD;EACe,CAAA"}
+{"version":3,"file":"gradual-blur-C6NOnjTw.cjs","names":[],"sources":["../../src/components/effects/gradual-blur/GradualBlur.tsx"],"sourcesContent":["import { useRef, type ComponentType } from \"react\";\nimport { motion, type HTMLMotionProps } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { GradualBlurProps } from \"./types\";\n\nexport const GradualBlur = ({\n  children,\n  duration = 0.5,\n  delay = 0,\n  blur = 8,\n  triggerOnView = true,\n  triggerOnce = true,\n  threshold = 0.05,\n  visible = false,\n  direction = \"none\",\n  distance = 20,\n  className,\n  as = \"div\",\n}: GradualBlurProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const getInitialPosition = () => {\n    switch (direction) {\n      case \"top\":\n        return { y: -distance };\n      case \"bottom\":\n        return { y: distance };\n      case \"left\":\n        return { x: -distance };\n      case \"right\":\n        return { x: distance };\n      default:\n        return { x: 0, y: 0 };\n    }\n  };\n\n  const initialPosition = getInitialPosition();\n\n  const variants = {\n    hidden: {\n      opacity: 0,\n      filter: `blur(${blur}px)`,\n      ...initialPosition,\n    },\n    visible: {\n      opacity: 1,\n      filter: \"blur(0px)\",\n      x: 0,\n      y: 0,\n    },\n  };\n\n  const MotionComponent = motion.create(as as string) as ComponentType<\n    HTMLMotionProps<\"div\">\n  >;\n\n  return (\n    <MotionComponent\n      ref={ref}\n      variants={variants}\n      initial=\"hidden\"\n      animate={!triggerOnView ? (visible ? \"visible\" : \"hidden\") : undefined}\n      whileInView={triggerOnView ? \"visible\" : undefined}\n      viewport={{\n        once: triggerOnce,\n        amount: threshold,\n        margin: \"0px 0px -50px 0px\", // Slight bottom margin to trigger earlier\n      }}\n      transition={{\n        duration,\n        delay,\n        ease: \"easeOut\",\n        filter: { duration: duration },\n        opacity: { duration: duration },\n      }}\n      className={mergeClassNames(\"relative\", className)}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n"],"mappings":";;;;;;AAKA,IAAa,eAAe,EAC1B,UACA,WAAW,IACX,QAAQ,GACR,OAAO,GACP,gBAAgB,MAChB,cAAc,MACd,YAAY,KACZ,UAAU,OACV,YAAY,QACZ,WAAW,IACX,WACA,KAAK,YACiB;CACtB,MAAM,OAAA,GAAA,MAAA,QAA6B,KAAK;CAExC,MAAM,2BAA2B;AAC/B,UAAQ,WAAR;GACE,KAAK,MACH,QAAO,EAAE,GAAG,CAAC,UAAU;GACzB,KAAK,SACH,QAAO,EAAE,GAAG,UAAU;GACxB,KAAK,OACH,QAAO,EAAE,GAAG,CAAC,UAAU;GACzB,KAAK,QACH,QAAO,EAAE,GAAG,UAAU;GACxB,QACE,QAAO;IAAE,GAAG;IAAG,GAAG;IAAG;;;CAI3B,MAAM,kBAAkB,oBAAoB;CAE5C,MAAM,WAAW;EACf,QAAQ;GACN,SAAS;GACT,QAAQ,QAAQ,KAAK;GACrB,GAAG;GACJ;EACD,SAAS;GACP,SAAS;GACT,QAAQ;GACR,GAAG;GACH,GAAG;GACJ;EACF;AAMD,QACE,iBAAA,GAAA,kBAAA,KALsB,cAAA,OAAO,OAAO,GAKnC,EAAD;EACO;EACK;EACV,SAAQ;EACR,SAAS,CAAC,gBAAiB,UAAU,YAAY,WAAY,KAAA;EAC7D,aAAa,gBAAgB,YAAY,KAAA;EACzC,UAAU;GACR,MAAM;GACN,QAAQ;GACR,QAAQ;GACT;EACD,YAAY;GACV;GACA;GACA,MAAM;GACN,QAAQ,EAAY,UAAU;GAC9B,SAAS,EAAY,UAAU;GAChC;EACD,WAAW,cAAA,gBAAgB,YAAY,UAAU;EAEhD;EACe,CAAA"}

package/dist/chunks/{gradual-blur-BR06yO3Y.mjs → gradual-blur-DXfxpCdB.mjs}

@@ -1,4 +1,4 @@
-import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { motion } from "framer-motion";
@@ -56,4 +56,4 @@ var GradualBlur = ({ children, duration = .5, delay = 0, blur = 8, triggerOnView
 //#endregion
 export { GradualBlur as t };
 
-//# sourceMappingURL=gradual-blur-BR06yO3Y.mjs.map
+//# sourceMappingURL=gradual-blur-DXfxpCdB.mjs.map

package/dist/chunks/{gradual-blur-BR06yO3Y.mjs.map → gradual-blur-DXfxpCdB.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"gradual-blur-BR06yO3Y.mjs","names":[],"sources":["../../src/components/effects/gradual-blur/GradualBlur.tsx"],"sourcesContent":["import { useRef, type ComponentType } from \"react\";\nimport { motion, type HTMLMotionProps } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { GradualBlurProps } from \"./types\";\n\nexport const GradualBlur = ({\n  children,\n  duration = 0.5,\n  delay = 0,\n  blur = 8,\n  triggerOnView = true,\n  triggerOnce = true,\n  threshold = 0.05,\n  visible = false,\n  direction = \"none\",\n  distance = 20,\n  className,\n  as = \"div\",\n}: GradualBlurProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const getInitialPosition = () => {\n    switch (direction) {\n      case \"top\":\n        return { y: -distance };\n      case \"bottom\":\n        return { y: distance };\n      case \"left\":\n        return { x: -distance };\n      case \"right\":\n        return { x: distance };\n      default:\n        return { x: 0, y: 0 };\n    }\n  };\n\n  const initialPosition = getInitialPosition();\n\n  const variants = {\n    hidden: {\n      opacity: 0,\n      filter: `blur(${blur}px)`,\n      ...initialPosition,\n    },\n    visible: {\n      opacity: 1,\n      filter: \"blur(0px)\",\n      x: 0,\n      y: 0,\n    },\n  };\n\n  const MotionComponent = motion.create(as as string) as ComponentType<\n    HTMLMotionProps<\"div\">\n  >;\n\n  return (\n    <MotionComponent\n      ref={ref}\n      variants={variants}\n      initial=\"hidden\"\n      animate={!triggerOnView ? (visible ? \"visible\" : \"hidden\") : undefined}\n      whileInView={triggerOnView ? \"visible\" : undefined}\n      viewport={{\n        once: triggerOnce,\n        amount: threshold,\n        margin: \"0px 0px -50px 0px\", // Slight bottom margin to trigger earlier\n      }}\n      transition={{\n        duration,\n        delay,\n        ease: \"easeOut\",\n        filter: { duration: duration },\n        opacity: { duration: duration },\n      }}\n      className={mergeClassNames(\"relative\", className)}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,eAAe,EAC1B,UACA,WAAW,IACX,QAAQ,GACR,OAAO,GACP,gBAAgB,MAChB,cAAc,MACd,YAAY,KACZ,UAAU,OACV,YAAY,QACZ,WAAW,IACX,WACA,KAAK,YACiB;CACtB,MAAM,MAAM,OAAuB,KAAK;CAExC,MAAM,2BAA2B;AAC/B,UAAQ,WAAR;GACE,KAAK,MACH,QAAO,EAAE,GAAG,CAAC,UAAU;GACzB,KAAK,SACH,QAAO,EAAE,GAAG,UAAU;GACxB,KAAK,OACH,QAAO,EAAE,GAAG,CAAC,UAAU;GACzB,KAAK,QACH,QAAO,EAAE,GAAG,UAAU;GACxB,QACE,QAAO;IAAE,GAAG;IAAG,GAAG;IAAG;;;CAI3B,MAAM,kBAAkB,oBAAoB;CAE5C,MAAM,WAAW;EACf,QAAQ;GACN,SAAS;GACT,QAAQ,QAAQ,KAAK;GACrB,GAAG;GACJ;EACD,SAAS;GACP,SAAS;GACT,QAAQ;GACR,GAAG;GACH,GAAG;GACJ;EACF;AAMD,QACE,oBALsB,OAAO,OAAO,GAAa,EAKjD;EACO;EACK;EACV,SAAQ;EACR,SAAS,CAAC,gBAAiB,UAAU,YAAY,WAAY,KAAA;EAC7D,aAAa,gBAAgB,YAAY,KAAA;EACzC,UAAU;GACR,MAAM;GACN,QAAQ;GACR,QAAQ;GACT;EACD,YAAY;GACV;GACA;GACA,MAAM;GACN,QAAQ,EAAY,UAAU;GAC9B,SAAS,EAAY,UAAU;GAChC;EACD,WAAW,gBAAgB,YAAY,UAAU;EAEhD;EACe,CAAA"}
+{"version":3,"file":"gradual-blur-DXfxpCdB.mjs","names":[],"sources":["../../src/components/effects/gradual-blur/GradualBlur.tsx"],"sourcesContent":["import { useRef, type ComponentType } from \"react\";\nimport { motion, type HTMLMotionProps } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { GradualBlurProps } from \"./types\";\n\nexport const GradualBlur = ({\n  children,\n  duration = 0.5,\n  delay = 0,\n  blur = 8,\n  triggerOnView = true,\n  triggerOnce = true,\n  threshold = 0.05,\n  visible = false,\n  direction = \"none\",\n  distance = 20,\n  className,\n  as = \"div\",\n}: GradualBlurProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const getInitialPosition = () => {\n    switch (direction) {\n      case \"top\":\n        return { y: -distance };\n      case \"bottom\":\n        return { y: distance };\n      case \"left\":\n        return { x: -distance };\n      case \"right\":\n        return { x: distance };\n      default:\n        return { x: 0, y: 0 };\n    }\n  };\n\n  const initialPosition = getInitialPosition();\n\n  const variants = {\n    hidden: {\n      opacity: 0,\n      filter: `blur(${blur}px)`,\n      ...initialPosition,\n    },\n    visible: {\n      opacity: 1,\n      filter: \"blur(0px)\",\n      x: 0,\n      y: 0,\n    },\n  };\n\n  const MotionComponent = motion.create(as as string) as ComponentType<\n    HTMLMotionProps<\"div\">\n  >;\n\n  return (\n    <MotionComponent\n      ref={ref}\n      variants={variants}\n      initial=\"hidden\"\n      animate={!triggerOnView ? (visible ? \"visible\" : \"hidden\") : undefined}\n      whileInView={triggerOnView ? \"visible\" : undefined}\n      viewport={{\n        once: triggerOnce,\n        amount: threshold,\n        margin: \"0px 0px -50px 0px\", // Slight bottom margin to trigger earlier\n      }}\n      transition={{\n        duration,\n        delay,\n        ease: \"easeOut\",\n        filter: { duration: duration },\n        opacity: { duration: duration },\n      }}\n      className={mergeClassNames(\"relative\", className)}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,eAAe,EAC1B,UACA,WAAW,IACX,QAAQ,GACR,OAAO,GACP,gBAAgB,MAChB,cAAc,MACd,YAAY,KACZ,UAAU,OACV,YAAY,QACZ,WAAW,IACX,WACA,KAAK,YACiB;CACtB,MAAM,MAAM,OAAuB,KAAK;CAExC,MAAM,2BAA2B;AAC/B,UAAQ,WAAR;GACE,KAAK,MACH,QAAO,EAAE,GAAG,CAAC,UAAU;GACzB,KAAK,SACH,QAAO,EAAE,GAAG,UAAU;GACxB,KAAK,OACH,QAAO,EAAE,GAAG,CAAC,UAAU;GACzB,KAAK,QACH,QAAO,EAAE,GAAG,UAAU;GACxB,QACE,QAAO;IAAE,GAAG;IAAG,GAAG;IAAG;;;CAI3B,MAAM,kBAAkB,oBAAoB;CAE5C,MAAM,WAAW;EACf,QAAQ;GACN,SAAS;GACT,QAAQ,QAAQ,KAAK;GACrB,GAAG;GACJ;EACD,SAAS;GACP,SAAS;GACT,QAAQ;GACR,GAAG;GACH,GAAG;GACJ;EACF;AAMD,QACE,oBALsB,OAAO,OAAO,GAKnC,EAAD;EACO;EACK;EACV,SAAQ;EACR,SAAS,CAAC,gBAAiB,UAAU,YAAY,WAAY,KAAA;EAC7D,aAAa,gBAAgB,YAAY,KAAA;EACzC,UAAU;GACR,MAAM;GACN,QAAQ;GACR,QAAQ;GACT;EACD,YAAY;GACV;GACA;GACA,MAAM;GACN,QAAQ,EAAY,UAAU;GAC9B,SAAS,EAAY,UAAU;GAChC;EACD,WAAW,gBAAgB,YAAY,UAAU;EAEhD;EACe,CAAA"}

package/dist/chunks/{input-Dox16Ozo.mjs → input-Bqo9Q5zF.mjs}

@@ -1,4 +1,6 @@
-import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
+import { u as InfoCircleIcon } from "./icons-bx3nrxNv.mjs";
+import { t as Tooltip } from "./Tooltip-DK3B879v.mjs";
 import { forwardRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
@@ -12,7 +14,7 @@ var InputState = /* @__PURE__ */ function(InputState) {
 }({});
 //#endregion
 //#region src/components/forms/input/Input.tsx
-var Input = forwardRef(({ className = "", label, labelHint, error, helperText, id, extra, placeholder, state = InputState.DEFAULT, disabled, message, leftIcon, leftIconClassName, rightIcon, rightIconClassName, icon, iconClassName, bgClassName = "bg-ds-surface-1", ...props }, ref) => {
+var Input = forwardRef(({ className = "", label, labelTooltip, labelHint, error, helperText, id, extra, placeholder, state = InputState.DEFAULT, disabled, required, message, leftIcon, leftIconClassName, rightIcon, rightIconClassName, icon, iconClassName, bgClassName = "bg-ds-surface-1", ...props }, ref) => {
 	const radius = 100;
 	const [visible, setVisible] = useState(false);
 	const mouseX = useMotionValue(0);
@@ -28,25 +30,43 @@ var Input = forwardRef(({ className = "", label, labelHint, error, helperText, i
 	};
 	const wrapperStateStyles = {
 		[InputState.DISABLED]: "border border-ds-border-field bg-ds-surface-1",
-		[InputState.ERROR]: "border-destructive ",
-		[InputState.SUCCESS]: "border-success-border ",
-		[InputState.DEFAULT]: "border-ds-border-2 "
+		[InputState.ERROR]: "border-ds-state-danger",
+		[InputState.SUCCESS]: "border-ds-state-success",
+		[InputState.DEFAULT]: "border-ds-border-2"
 	};
 	const inputStateStyles = {
 		[InputState.DISABLED]: "border-transparent bg-transparent text-ds-2 placeholder:!text-ds-3 placeholder:opacity-60",
-		[InputState.ERROR]: "text-destructive placeholder:text-destructive",
-		[InputState.SUCCESS]: "text-success placeholder:text-success",
-		[InputState.DEFAULT]: "text-ds-1"
+		[InputState.ERROR]: "border-ds-state-danger! text-ds-1",
+		[InputState.SUCCESS]: "border-ds-state-success! text-ds-1",
+		[InputState.DEFAULT]: "border-ds-border-field text-ds-1"
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full",
 		children: [
 			label || labelHint ? /* @__PURE__ */ jsxs("div", {
 				className: mergeClassNames("mb-2 flex items-center gap-3", label ? "justify-between" : "justify-end"),
-				children: [label ? /* @__PURE__ */ jsx("label", {
+				children: [label ? /* @__PURE__ */ jsxs("label", {
 					htmlFor: id,
-					className: "block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-					children: label
+					className: "inline-flex items-center gap-1.5 text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+					children: [
+						label,
+						required && /* @__PURE__ */ jsx("sup", {
+							className: "ms-0.5 text-ds-state-danger",
+							children: "*"
+						}),
+						labelTooltip && /* @__PURE__ */ jsx(Tooltip, {
+							content: labelTooltip,
+							position: "top",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "cursor-help text-ds-3 hover:text-ds-2 transition-colors",
+								children: /* @__PURE__ */ jsx(InfoCircleIcon, {
+									width: 14,
+									height: 14,
+									color: "currentColor"
+								})
+							})
+						})
+					]
 				}) : null, labelHint ? /* @__PURE__ */ jsx("div", {
 					className: "shrink-0 text-xs text-ds-2",
 					children: labelHint
@@ -88,6 +108,7 @@ var Input = forwardRef(({ className = "", label, labelHint, error, helperText, i
 							id,
 							placeholder,
 							disabled: isDisabled,
+							required,
 							className: mergeClassNames("flex h-10 w-full rounded-md border border-ds-border-field py-2 text-sm text-ds-1 transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-ds-3 placeholder:opacity-70 focus-visible:ring-1 focus-visible:ring-ds-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", bgClassName, inputStateStyles[resolvedState], className),
 							style: {
 								paddingInlineStart: leftIcon ? "2.5rem" : "0.75rem",
@@ -100,7 +121,7 @@ var Input = forwardRef(({ className = "", label, labelHint, error, helperText, i
 				})
 			}),
 			(error || message) && /* @__PURE__ */ jsx("p", {
-				className: mergeClassNames("text-sm font-medium mt-1", error ? "text-destructive" : "text-ds-2"),
+				className: mergeClassNames("text-sm font-medium mt-1", error ? "text-ds-state-danger" : "text-ds-2"),
 				children: error || message
 			}),
 			helperText && !error && !message && /* @__PURE__ */ jsx("p", {
@@ -114,4 +135,4 @@ Input.displayName = "Input";
 //#endregion
 export { InputState as n, Input as t };
 
-//# sourceMappingURL=input-Dox16Ozo.mjs.map
+//# sourceMappingURL=input-Bqo9Q5zF.mjs.map

package/dist/chunks/input-Bqo9Q5zF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-Bqo9Q5zF.mjs","names":[],"sources":["../../src/components/forms/input/types.ts","../../src/components/forms/input/Input.tsx"],"sourcesContent":["import type { InputHTMLAttributes, ReactNode } from \"react\";\n\nexport enum InputState {\n  DEFAULT = \"default\",\n  DISABLED = \"disabled\",\n  ERROR = \"error\",\n  SUCCESS = \"success\",\n}\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: string;\n  /** Text shown in a tooltip on the info icon next to the label. */\n  labelTooltip?: string;\n  labelHint?: ReactNode;\n  error?: string;\n  helperText?: string;\n  id?: string;\n  extra?: string;\n  state?: InputState;\n  message?: string;\n  leftIcon?: ReactNode;\n  leftIconClassName?: string;\n  rightIcon?: ReactNode;\n  rightIconClassName?: string;\n  icon?: ReactNode;\n  iconClassName?: string;\n  /** Custom background classes (e.g. \"ui:bg-ds-surface-1\"). */\n  bgClassName?: string;\n}\n","import { forwardRef, useState } from \"react\";\nimport { type InputProps, InputState } from \"./types\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { Tooltip } from \"../../overlays/tooltip/Tooltip\";\nimport { InfoCircleIcon } from \"../../icons\";\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      label,\n      labelTooltip,\n      labelHint,\n      error,\n      helperText,\n      id,\n      extra,\n      placeholder,\n      state = InputState.DEFAULT,\n      disabled,\n      required,\n      message,\n      leftIcon,\n      leftIconClassName,\n      rightIcon,\n      rightIconClassName,\n      icon,\n      iconClassName,\n      bgClassName = \"bg-ds-surface-1\",\n      ...props\n    },\n    ref,\n  ) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n    const resolvedState = disabled\n      ? InputState.DISABLED\n      : error\n        ? InputState.ERROR\n        : state;\n    const isDisabled = resolvedState === InputState.DISABLED;\n    const trailingIcon = rightIcon ?? icon;\n    const trailingIconClassName = rightIcon\n      ? rightIconClassName\n      : (rightIconClassName ?? iconClassName);\n\n    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n      const { left, top } = event.currentTarget.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    };\n\n    const wrapperStateStyles: Record<InputState, string> = {\n      [InputState.DISABLED]: \"border border-ds-border-field bg-ds-surface-1\",\n      [InputState.ERROR]: \"border-ds-state-danger\",\n      [InputState.SUCCESS]: \"border-ds-state-success\",\n      [InputState.DEFAULT]: \"border-ds-border-2\",\n    };\n\n    const inputStateStyles: Record<InputState, string> = {\n      [InputState.DISABLED]:\n        \"border-transparent bg-transparent text-ds-2 placeholder:!text-ds-3 placeholder:opacity-60\",\n      [InputState.ERROR]: \"border-ds-state-danger! text-ds-1\",\n      [InputState.SUCCESS]: \"border-ds-state-success! text-ds-1\",\n      [InputState.DEFAULT]: \"border-ds-border-field text-ds-1\",\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label || labelHint ? (\n          <div\n            className={mergeClassNames(\n              \"mb-2 flex items-center gap-3\",\n              label ? \"justify-between\" : \"justify-end\",\n            )}\n          >\n            {label ? (\n              <label\n                htmlFor={id}\n                className=\"inline-flex items-center gap-1.5 text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n              >\n                {label}\n                {required && (\n                  <sup className=\"ms-0.5 text-ds-state-danger\">*</sup>\n                )}\n                {labelTooltip && (\n                  <Tooltip content={labelTooltip} position=\"top\">\n                    <span className=\"cursor-help text-ds-3 hover:text-ds-2 transition-colors\">\n                      <InfoCircleIcon width={14} height={14} color=\"currentColor\" />\n                    </span>\n                  </Tooltip>\n                )}\n              </label>\n            ) : null}\n            {labelHint ? (\n              <div className=\"shrink-0 text-xs text-ds-2\">{labelHint}</div>\n            ) : null}\n          </div>\n        ) : null}\n\n        <motion.div\n          style={{\n            backgroundImage: isDisabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!isDisabled ? handleMouseMove : undefined}\n          onMouseEnter={!isDisabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!isDisabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/input rounded-lg transition duration-300\",\n            isDisabled ? \"p-px\" : \"p-[2px] hover:border-ds-border-accent\",\n            wrapperStateStyles[resolvedState],\n            extra,\n          )}\n        >\n          <div className=\"relative flex items-center\">\n            {leftIcon ? (\n              <div\n                className={mergeClassNames(\n                  \"pointer-events-none absolute inset-y-0 flex items-center text-ds-2\",\n                  leftIconClassName,\n                )}\n                style={{ insetInlineStart: 0, paddingInlineStart: \"0.75rem\" }}\n              >\n                {leftIcon}\n              </div>\n            ) : null}\n            {trailingIcon ? (\n              <div\n                className={mergeClassNames(\n                  \"pointer-events-none absolute inset-y-0 flex items-center text-ds-2\",\n                  trailingIconClassName,\n                )}\n                style={{ insetInlineEnd: 0, paddingInlineEnd: \"0.75rem\" }}\n              >\n                {trailingIcon}\n              </div>\n            ) : null}\n            <input\n              ref={ref}\n              id={id}\n              placeholder={placeholder}\n              disabled={isDisabled}\n              required={required}\n              className={mergeClassNames(\n                \"flex h-10 w-full rounded-md border border-ds-border-field py-2 text-sm text-ds-1 transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-ds-3 placeholder:opacity-70 focus-visible:ring-1 focus-visible:ring-ds-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n                bgClassName,\n                inputStateStyles[resolvedState],\n                className,\n              )}\n              style={{\n                paddingInlineStart: leftIcon ? \"2.5rem\" : \"0.75rem\",\n                paddingInlineEnd: trailingIcon ? \"2.5rem\" : \"0.75rem\",\n              }}\n              {...props}\n              autoComplete=\"off\"\n            />\n          </div>\n        </motion.div>\n\n        {(error || message) && (\n          <p\n            className={mergeClassNames(\n              \"text-sm font-medium mt-1\",\n              error ? \"text-ds-state-danger\" : \"text-ds-2\",\n            )}\n          >\n            {error || message}\n          </p>\n        )}\n        {helperText && !error && !message && (\n          <p className=\"text-sm text-ds-2 mt-1\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n"],"mappings":"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"}