@devalok/shilp-sutra 0.49.4 → 0.50.0

package/dist/ui/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","names":[],"sources":["../../src/ui/file-upload.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck,IconPaperclip, IconUpload } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { durations,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\n/**\n * Props for FileUpload — a drag-and-drop file picker with client-side validation (type + size),\n * an upload progress bar, and a compact inline mode.\n *\n * **Two modes:**\n * - Default: large drop zone with an upload icon, label, and sublabel — good for primary upload areas.\n * - `compact={true}`: a small inline button with an attachment icon — good for secondary/inline uploads.\n *\n * **Validation:** Pass `accept` (MIME or extension) and `maxSize` (bytes). Errors are shown inline.\n * The `onFiles` callback only fires with valid files — invalid files are rejected with an error message.\n *\n * **`onFiles` required:** This is the only required prop. Integrating with a real uploader means\n * calling your upload API from this callback and driving `uploading` + `progress` externally.\n *\n * @example\n * // Avatar upload with image-only restriction:\n * <FileUpload\n *   accept=\"image/*\"\n *   maxSize={2 * 1024 * 1024}\n *   onFiles={(files) => uploadAvatar(files[0])}\n *   label=\"Upload profile photo\"\n *   sublabel=\"PNG, JPG up to 2MB\"\n * />\n *\n * @example\n * // Document multi-upload with progress:\n * <FileUpload\n *   multiple\n *   accept=\".pdf,.doc,.docx\"\n *   uploading={isUploading}\n *   progress={uploadPercent}\n *   onFiles={handleFiles}\n * />\n *\n * @example\n * // Compact inline attachment button in a comment form:\n * <FileUpload compact onFiles={(files) => attachFiles(files)} label=\"Attach files\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface FileUploadProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {\n  /** Accepted file types (e.g., \"image/*\", \".pdf,.doc\") */\n  accept?: string\n  /** Max file size in bytes (default: 10MB) */\n  maxSize?: number\n  /** Allow multiple files */\n  multiple?: boolean\n  /** Currently uploading */\n  uploading?: boolean\n  /** Upload progress (0-100) */\n  progress?: number\n  /** Callback when files are selected/dropped */\n  onFiles: (files: File[]) => void\n  /** Error message to display */\n  error?: string\n  /** Compact mode (inline button instead of drop zone) */\n  compact?: boolean\n  /** Disabled */\n  disabled?: boolean\n  /** Custom label */\n  label?: string\n  /** Custom sublabel */\n  sublabel?: string\n}\n\nconst DEFAULT_MAX_SIZE = 10 * 1024 * 1024 // 10MB\n\nfunction fileMatchesAccept(file: File, accept: string): boolean {\n  return accept\n    .split(',')\n    .map((t) => t.trim())\n    .some((type) => {\n      if (type.startsWith('.'))\n        return file.name.toLowerCase().endsWith(type.toLowerCase())\n      if (type.endsWith('/*'))\n        return file.type.startsWith(type.slice(0, type.indexOf('/') + 1))\n      return file.type === type\n    })\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n  (\n    {\n      accept,\n      maxSize = DEFAULT_MAX_SIZE,\n      multiple = false,\n      uploading = false,\n      progress = 0,\n      onFiles,\n      error,\n      compact = false,\n      disabled = false,\n      className,\n      label,\n      sublabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [isDragActive, setIsDragActive] = React.useState(false)\n    const [validationError, setValidationError] = React.useState<string | null>(\n      null,\n    )\n    // Track whether a file dialog was opened, so we can detect when the\n    // browser (or testing library) filters out all files via the accept attribute\n    const dialogOpenRef = React.useRef(false)\n    const filesAcceptedRef = React.useRef(false)\n\n    const displayError = error || validationError\n\n    const openPicker = React.useCallback(() => {\n      if (disabled || uploading) return\n      inputRef.current?.click()\n    }, [disabled, uploading])\n\n    const validateAndEmit = React.useCallback(\n      (files: File[]) => {\n        setValidationError(null)\n\n        for (const file of files) {\n          if (file.size > maxSize) {\n            setValidationError(\n              `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}`,\n            )\n            return\n          }\n          if (accept && !fileMatchesAccept(file, accept)) {\n            setValidationError(\n              `File \"${file.name}\" is not an accepted file type`,\n            )\n            return\n          }\n        }\n\n        onFiles(files)\n      },\n      [maxSize, accept, onFiles],\n    )\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        filesAcceptedRef.current = true\n        const fileList = e.target.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n        // Reset input value so the same file can be selected again\n        e.target.value = ''\n      },\n      [validateAndEmit],\n    )\n\n    // When the file input is clicked, the browser opens a dialog and blurs the input.\n    // We track this to detect when the dialog closes without selecting valid files.\n    const handleInputClick = React.useCallback(() => {\n      dialogOpenRef.current = true\n      filesAcceptedRef.current = false\n    }, [])\n\n    // After the file dialog closes, the browser re-focuses the input.\n    // If no files were accepted (e.g., the browser/test library filtered by accept),\n    // and the accept prop is set, show a validation error.\n    const handleInputFocus = React.useCallback(() => {\n      if (dialogOpenRef.current && !filesAcceptedRef.current && accept) {\n        setValidationError('File type is not accepted')\n      }\n      dialogOpenRef.current = false\n    }, [accept])\n\n    const handleDragEnter = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragOver = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragLeave = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n      },\n      [],\n    )\n\n    const handleDrop = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n\n        if (disabled || uploading) return\n\n        const fileList = e.dataTransfer.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n      },\n      [disabled, uploading, validateAndEmit],\n    )\n\n    const defaultLabel = label ?? 'Drop files here or click to browse'\n    const defaultSublabel = sublabel ?? `Max file size: ${formatBytes(maxSize)}`\n    const inputId = React.useId()\n\n    if (compact) {\n      return (\n        <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n          <button\n            type=\"button\"\n            onClick={openPicker}\n            disabled={disabled}\n            className={cn(\n              'inline-flex items-center gap-ds-02 rounded-control px-ds-03 py-ds-02',\n              'text-ds-sm font-medium',\n              'border border-surface-border-strong',\n              'bg-surface-raised-hover text-surface-fg-muted',\n              'hover:bg-accent-2',\n              'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n              'transition-colors',\n            )}\n          >\n            {uploading ? (\n              <Spinner size=\"sm\" />\n            ) : (\n              <Icon icon={IconPaperclip} size=\"sm\" />\n            )}\n            {label ?? 'Attach files'}\n          </button>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type=\"file\"\n            className=\"sr-only\"\n            style={{ visibility: 'hidden' }}\n            aria-hidden=\"true\"\n            aria-label={label ?? 'Attach files'}\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            onChange={handleInputChange}\n            onClick={handleInputClick}\n            onFocus={handleInputFocus}\n            tabIndex={-1}\n          />\n          {displayError && (\n            <p\n              role=\"alert\"\n              aria-live=\"polite\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n            >\n              {displayError}\n            </p>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        role=\"presentation\"\n        className={cn('flex flex-col', className)}\n        data-drag-active={isDragActive ? 'true' : undefined}\n        onDragEnter={handleDragEnter}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <motion.div\n          role=\"button\"\n          tabIndex={0}\n          aria-disabled={disabled || undefined}\n          onClick={disabled ? undefined : openPicker}\n          onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n            if (!disabled && (e.key === 'Enter' || e.key === ' ')) {\n              e.preventDefault()\n              openPicker()\n            }\n          }}\n          className={cn(\n            'flex flex-col items-center justify-center gap-ds-03 rounded-surface',\n            'border-2 border-dashed p-ds-08',\n            'cursor-pointer',\n            'border-surface-border-strong bg-surface-raised-hover',\n            isDragActive &&\n              'border-accent-7 bg-accent-2',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          animate={{\n            scale: isDragActive ? 1.02 : 1,\n          }}\n          transition={springs.snappy}\n        >\n          {/* Icon — animates between upload ↔ spinner ↔ checkmark */}\n          <AnimatePresence mode=\"wait\">\n            {uploading ? (\n              <motion.div\n                key=\"spinner\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={tweens.fade}\n              >\n                <Spinner size=\"md\" />\n              </motion.div>\n            ) : progress === 100 && !error ? (\n              <motion.div\n                key=\"complete\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={springs.bouncy}\n              >\n                <Icon icon={IconCheck} size=\"2xl\" className=\"text-success-11\" />\n              </motion.div>\n            ) : (\n              <motion.div\n                key=\"upload\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              >\n                <Icon icon={IconUpload} size=\"2xl\" className=\"text-surface-fg-subtle\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <span id={inputId + '-label'} className=\"text-ds-sm text-surface-fg-muted\">\n            {defaultLabel}\n          </span>\n          {uploading ? (\n            <div className=\"w-full max-w-xs\">\n              <div\n                role=\"progressbar\"\n                aria-valuenow={progress}\n                aria-valuemin={0}\n                aria-valuemax={100}\n                className=\"h-2 w-full overflow-hidden rounded-pill bg-surface-raised-hover\"\n              >\n                <motion.div\n                  className=\"h-full rounded-pill bg-accent-9\"\n                  animate={{ width: `${progress}%` }}\n                  transition={springs.smooth}\n                />\n              </div>\n            </div>\n          ) : (\n            <span className=\"text-ds-xs text-surface-fg-subtle\">\n              {defaultSublabel}\n            </span>\n          )}\n        </motion.div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          className=\"sr-only\"\n          style={{ visibility: 'hidden' }}\n          aria-hidden=\"true\"\n          aria-label={defaultLabel}\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleInputChange}\n          onClick={handleInputClick}\n          onFocus={handleInputFocus}\n          tabIndex={-1}\n        />\n        {/* Error message with shake animation */}\n        <AnimatePresence>\n          {displayError && (\n            <motion.p\n              role=\"alert\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n              initial={{ opacity: 0, x: 0 }}\n              animate={{ opacity: 1, x: [0, -4, 4, -4, 4, 0] }}\n              exit={{ opacity: 0 }}\n              transition={{ opacity: tweens.fade, x: { type: 'tween', duration: durations.slow01, ease: 'easeOut' } }}\n            >\n              {displayError}\n            </motion.p>\n          )}\n        </AnimatePresence>\n      </div>\n    )\n  },\n)\nFileUpload.displayName = 'FileUpload'\n\nexport { FileUpload }\n"],"mappings":"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"}
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../src/ui/file-upload.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck,IconPaperclip, IconUpload } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { durations,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\n/**\n * Props for FileUpload — a drag-and-drop file picker with client-side validation (type + size),\n * an upload progress bar, and a compact inline mode.\n *\n * **Two modes:**\n * - Default: large drop zone with an upload icon, label, and sublabel — good for primary upload areas.\n * - `compact={true}`: a small inline button with an attachment icon — good for secondary/inline uploads.\n *\n * **Validation:** Pass `accept` (MIME or extension) and `maxSize` (bytes). Errors are shown inline.\n * The `onFiles` callback only fires with valid files — invalid files are rejected with an error message.\n *\n * **`onFiles` required:** This is the only required prop. Integrating with a real uploader means\n * calling your upload API from this callback and driving `uploading` + `progress` externally.\n *\n * @example\n * // Avatar upload with image-only restriction:\n * <FileUpload\n *   accept=\"image/*\"\n *   maxSize={2 * 1024 * 1024}\n *   onFiles={(files) => uploadAvatar(files[0])}\n *   label=\"Upload profile photo\"\n *   sublabel=\"PNG, JPG up to 2MB\"\n * />\n *\n * @example\n * // Document multi-upload with progress:\n * <FileUpload\n *   multiple\n *   accept=\".pdf,.doc,.docx\"\n *   uploading={isUploading}\n *   progress={uploadPercent}\n *   onFiles={handleFiles}\n * />\n *\n * @example\n * // Compact inline attachment button in a comment form:\n * <FileUpload compact onFiles={(files) => attachFiles(files)} label=\"Attach files\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface FileUploadProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {\n  /** Accepted file types (e.g., \"image/*\", \".pdf,.doc\") */\n  accept?: string\n  /** Max file size in bytes (default: 10MB) */\n  maxSize?: number\n  /** Allow multiple files */\n  multiple?: boolean\n  /** Currently uploading */\n  uploading?: boolean\n  /** Upload progress (0-100) */\n  progress?: number\n  /** Callback when files are selected/dropped */\n  onFiles: (files: File[]) => void\n  /** Error message to display */\n  error?: string\n  /** Compact mode (inline button instead of drop zone) */\n  compact?: boolean\n  /** Disabled */\n  disabled?: boolean\n  /** Custom label */\n  label?: string\n  /** Custom sublabel */\n  sublabel?: string\n}\n\nconst DEFAULT_MAX_SIZE = 10 * 1024 * 1024 // 10MB\n\nfunction fileMatchesAccept(file: File, accept: string): boolean {\n  return accept\n    .split(',')\n    .map((t) => t.trim())\n    .some((type) => {\n      if (type.startsWith('.'))\n        return file.name.toLowerCase().endsWith(type.toLowerCase())\n      if (type.endsWith('/*'))\n        return file.type.startsWith(type.slice(0, type.indexOf('/') + 1))\n      return file.type === type\n    })\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n  (\n    {\n      accept,\n      maxSize = DEFAULT_MAX_SIZE,\n      multiple = false,\n      uploading = false,\n      progress = 0,\n      onFiles,\n      error,\n      compact = false,\n      disabled = false,\n      className,\n      label,\n      sublabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [isDragActive, setIsDragActive] = React.useState(false)\n    const [validationError, setValidationError] = React.useState<string | null>(\n      null,\n    )\n    // Track whether a file dialog was opened, so we can detect when the\n    // browser (or testing library) filters out all files via the accept attribute\n    const dialogOpenRef = React.useRef(false)\n    const filesAcceptedRef = React.useRef(false)\n\n    const displayError = error || validationError\n\n    const openPicker = React.useCallback(() => {\n      if (disabled || uploading) return\n      inputRef.current?.click()\n    }, [disabled, uploading])\n\n    const validateAndEmit = React.useCallback(\n      (files: File[]) => {\n        setValidationError(null)\n\n        for (const file of files) {\n          if (file.size > maxSize) {\n            setValidationError(\n              `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}`,\n            )\n            return\n          }\n          if (accept && !fileMatchesAccept(file, accept)) {\n            setValidationError(\n              `File \"${file.name}\" is not an accepted file type`,\n            )\n            return\n          }\n        }\n\n        onFiles(files)\n      },\n      [maxSize, accept, onFiles],\n    )\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        filesAcceptedRef.current = true\n        const fileList = e.target.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n        // Reset input value so the same file can be selected again\n        e.target.value = ''\n      },\n      [validateAndEmit],\n    )\n\n    // When the file input is clicked, the browser opens a dialog and blurs the input.\n    // We track this to detect when the dialog closes without selecting valid files.\n    const handleInputClick = React.useCallback(() => {\n      dialogOpenRef.current = true\n      filesAcceptedRef.current = false\n    }, [])\n\n    // After the file dialog closes, the browser re-focuses the input.\n    // If no files were accepted (e.g., the browser/test library filtered by accept),\n    // and the accept prop is set, show a validation error.\n    const handleInputFocus = React.useCallback(() => {\n      if (dialogOpenRef.current && !filesAcceptedRef.current && accept) {\n        setValidationError('File type is not accepted')\n      }\n      dialogOpenRef.current = false\n    }, [accept])\n\n    const handleDragEnter = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragOver = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragLeave = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n      },\n      [],\n    )\n\n    const handleDrop = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n\n        if (disabled || uploading) return\n\n        const fileList = e.dataTransfer.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n      },\n      [disabled, uploading, validateAndEmit],\n    )\n\n    const defaultLabel = label ?? 'Drop files here or click to browse'\n    const defaultSublabel = sublabel ?? `Max file size: ${formatBytes(maxSize)}`\n    const inputId = React.useId()\n\n    if (compact) {\n      return (\n        <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n          <button\n            type=\"button\"\n            onClick={openPicker}\n            disabled={disabled}\n            className={cn(\n              'inline-flex items-center gap-ds-02 rounded-control px-ds-03 py-ds-02',\n              'text-body-sm font-medium',\n              'border border-surface-border-strong',\n              'bg-surface-raised-hover text-surface-fg-muted',\n              'hover:bg-accent-2',\n              'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n              'transition-colors',\n            )}\n          >\n            {uploading ? (\n              <Spinner size=\"sm\" />\n            ) : (\n              <Icon icon={IconPaperclip} size=\"sm\" />\n            )}\n            {label ?? 'Attach files'}\n          </button>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type=\"file\"\n            className=\"sr-only\"\n            style={{ visibility: 'hidden' }}\n            aria-hidden=\"true\"\n            aria-label={label ?? 'Attach files'}\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            onChange={handleInputChange}\n            onClick={handleInputClick}\n            onFocus={handleInputFocus}\n            tabIndex={-1}\n          />\n          {displayError && (\n            <p\n              role=\"alert\"\n              aria-live=\"polite\"\n              className=\"mt-ds-02 text-body-xs text-error-11\"\n            >\n              {displayError}\n            </p>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        role=\"presentation\"\n        className={cn('flex flex-col', className)}\n        data-drag-active={isDragActive ? 'true' : undefined}\n        onDragEnter={handleDragEnter}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <motion.div\n          role=\"button\"\n          tabIndex={0}\n          aria-disabled={disabled || undefined}\n          onClick={disabled ? undefined : openPicker}\n          onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n            if (!disabled && (e.key === 'Enter' || e.key === ' ')) {\n              e.preventDefault()\n              openPicker()\n            }\n          }}\n          className={cn(\n            'flex flex-col items-center justify-center gap-ds-03 rounded-surface',\n            'border-2 border-dashed p-ds-08',\n            'cursor-pointer',\n            'border-surface-border-strong bg-surface-raised-hover',\n            isDragActive &&\n              'border-accent-7 bg-accent-2',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          animate={{\n            scale: isDragActive ? 1.02 : 1,\n          }}\n          transition={springs.snappy}\n        >\n          {/* Icon — animates between upload ↔ spinner ↔ checkmark */}\n          <AnimatePresence mode=\"wait\">\n            {uploading ? (\n              <motion.div\n                key=\"spinner\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={tweens.fade}\n              >\n                <Spinner size=\"md\" />\n              </motion.div>\n            ) : progress === 100 && !error ? (\n              <motion.div\n                key=\"complete\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={springs.bouncy}\n              >\n                <Icon icon={IconCheck} size=\"2xl\" className=\"text-success-11\" />\n              </motion.div>\n            ) : (\n              <motion.div\n                key=\"upload\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              >\n                <Icon icon={IconUpload} size=\"2xl\" className=\"text-surface-fg-subtle\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <span id={inputId + '-label'} className=\"text-body-sm text-surface-fg-muted\">\n            {defaultLabel}\n          </span>\n          {uploading ? (\n            <div className=\"w-full max-w-xs\">\n              <div\n                role=\"progressbar\"\n                aria-valuenow={progress}\n                aria-valuemin={0}\n                aria-valuemax={100}\n                className=\"h-2 w-full overflow-hidden rounded-pill bg-surface-raised-hover\"\n              >\n                <motion.div\n                  className=\"h-full rounded-pill bg-accent-9\"\n                  animate={{ width: `${progress}%` }}\n                  transition={springs.smooth}\n                />\n              </div>\n            </div>\n          ) : (\n            <span className=\"text-caption text-surface-fg-subtle\">\n              {defaultSublabel}\n            </span>\n          )}\n        </motion.div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          className=\"sr-only\"\n          style={{ visibility: 'hidden' }}\n          aria-hidden=\"true\"\n          aria-label={defaultLabel}\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleInputChange}\n          onClick={handleInputClick}\n          onFocus={handleInputFocus}\n          tabIndex={-1}\n        />\n        {/* Error message with shake animation */}\n        <AnimatePresence>\n          {displayError && (\n            <motion.p\n              role=\"alert\"\n              className=\"mt-ds-02 text-body-xs text-error-11\"\n              initial={{ opacity: 0, x: 0 }}\n              animate={{ opacity: 1, x: [0, -4, 4, -4, 4, 0] }}\n              exit={{ opacity: 0 }}\n              transition={{ opacity: tweens.fade, x: { type: 'tween', duration: durations.slow01, ease: 'easeOut' } }}\n            >\n              {displayError}\n            </motion.p>\n          )}\n        </AnimatePresence>\n      </div>\n    )\n  },\n)\nFileUpload.displayName = 'FileUpload'\n\nexport { FileUpload }\n"],"mappings":"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"}

package/dist/ui/form.js

@@ -39,7 +39,7 @@ var c = {
 		ref: f,
 		id: h,
 		role: m === "error" ? "alert" : void 0,
-		className: n("text-ds-sm", c[m], s),
+		className: n("text-body-sm", c[m], s),
 		initial: {
 			opacity: 0,
 			y: -4

package/dist/ui/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../../src/ui/form.tsx"],"sourcesContent":["'use client'\n\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nexport type FormHelperState = 'helper' | 'error' | 'warning' | 'success'\n\ninterface FormFieldContextValue {\n  state?: FormHelperState\n  helperTextId?: string\n  /** Auto-generated id shared between Label (htmlFor) and the field input (id). */\n  inputId?: string\n  required?: boolean\n}\nconst FormFieldContext = React.createContext<FormFieldContextValue>({})\n\n/**\n * FormField — vertical flex container that provides validation state and\n * aria-describedby wiring to children via React context.\n *\n * **Automatic a11y wiring:** FormField generates a stable ID (or uses a provided `helperTextId`)\n * and passes it to `FormHelperText` via context. Use the `useFormField()` hook in custom inputs\n * to read `{ state, helperTextId, required }` and spread onto your input element.\n *\n * @example\n * <FormField state=\"error\">\n *   <Label htmlFor=\"email\">Email</Label>\n *   <Input id=\"email\" state=\"error\" />\n *   <FormHelperText>Please enter a valid email address.</FormHelperText>\n * </FormField>\n */\nexport interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Custom ID for the helper text element. If omitted, an auto-generated ID is used.\n   * Pass this to `useFormField()` consumers that need to set `aria-describedby`.\n   */\n  helperTextId?: string\n  /**\n   * Custom ID for the field input element. If omitted, an auto-generated ID is used.\n   * Label (when inside FormField) reads this via `htmlFor`; Input reads it via `id`.\n   * Explicit `htmlFor` / `id` props on children always win.\n   */\n  inputId?: string\n  /** Current validation state — propagated to child `FormHelperText` via context */\n  state?: FormHelperState\n  /** Whether the field is required — available to children via `useFormField()` */\n  required?: boolean\n}\n\nconst FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ className, helperTextId, inputId, state = 'helper', required, children, ...props }, ref) => {\n    const autoId = React.useId()\n    const resolvedHelperId = helperTextId || `${autoId}-helper`\n    const resolvedInputId = inputId || `${autoId}-input`\n    const contextValue = React.useMemo(\n      () => ({ state, helperTextId: resolvedHelperId, inputId: resolvedInputId, required }),\n      [state, resolvedHelperId, resolvedInputId, required],\n    )\n\n    return (\n      <FormFieldContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn('flex flex-col gap-ds-02', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </FormFieldContext.Provider>\n    )\n  },\n)\nFormField.displayName = 'FormField'\n\n// FormHelperText — small helper/error/warning/success message under a field\n//\n// When used for errors, set an `id` matching the input's `aria-describedby`.\nexport interface FormHelperTextProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  state?: FormHelperState\n}\n\nconst helperStateClasses: Record<FormHelperState, string> = {\n  helper:  'text-surface-fg-subtle',\n  error:   'text-error-11',\n  warning: 'text-warning-11',\n  success: 'text-success-11',\n}\n\nconst FormHelperText = React.forwardRef<HTMLParagraphElement, FormHelperTextProps>(\n  ({ className, id: idProp, state: stateProp, ...props }, ref) => {\n    const context = React.useContext(FormFieldContext)\n    const state = stateProp ?? context.state ?? 'helper'\n    const id = idProp ?? context.helperTextId\n\n    return (\n      <motion.p\n        ref={ref}\n        id={id}\n        role={state === 'error' ? 'alert' : undefined}\n        className={cn('text-ds-sm', helperStateClasses[state], className)}\n        initial={{ opacity: 0, y: -4 }}\n        animate={{ opacity: 1, y: 0 }}\n        exit={{ opacity: 0, y: -4 }}\n        transition={tweens.fade}\n        {...motionProps(props)}\n      />\n    )\n  },\n)\nFormHelperText.displayName = 'FormHelperText'\n\n/**\n * Hook to read FormField context — returns `{ state, helperTextId, required }`.\n * Use in custom input components to auto-wire `aria-describedby` and `aria-invalid`.\n *\n * @example\n * function MyCustomInput(props) {\n *   const { state, helperTextId, required } = useFormField()\n *   return (\n *     <input\n *       aria-describedby={helperTextId}\n *       aria-invalid={state === 'error' || undefined}\n *       aria-required={required}\n *       {...props}\n *     />\n *   )\n * }\n */\nexport function useFormField(): FormFieldContextValue {\n  return React.useContext(FormFieldContext)\n}\n\nexport { FormField, FormFieldContext, FormHelperText }\n"],"mappings":";;;;;;;AAiBA,IAAM,IAAmB,EAAM,cAAqC,CAAC,CAAC,GAmChE,IAAY,EAAM,YACrB,EAAE,cAAW,iBAAc,YAAS,WAAQ,UAAU,aAAU,aAAU,GAAG,KAAS,MAAQ;CAC7F,IAAM,IAAS,EAAM,MAAM,GACrB,IAAmB,KAAgB,GAAG,EAAO,UAC7C,IAAkB,KAAW,GAAG,EAAO,SACvC,IAAe,EAAM,eAClB;EAAE;EAAO,cAAc;EAAkB,SAAS;EAAiB;CAAS,IACnF;EAAC;EAAO;EAAkB;EAAiB;CAAQ,CACrD;CAEA,OACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,OAAD;GACO;GACL,WAAW,EAAG,2BAA2B,CAAS;GAClD,GAAI;GAEH;EACE,CAAA;CACoB,CAAA;AAE/B,CACF;AACA,EAAU,cAAc;AASxB,IAAM,IAAsD;CAC1D,QAAS;CACT,OAAS;CACT,SAAS;CACT,SAAS;AACX,GAEM,IAAiB,EAAM,YAC1B,EAAE,cAAW,IAAI,GAAQ,OAAO,GAAW,GAAG,KAAS,MAAQ;CAC9D,IAAM,IAAU,EAAM,WAAW,CAAgB,GAC3C,IAAQ,KAAa,EAAQ,SAAS,UACtC,IAAK,KAAU,EAAQ;CAE7B,OACE,kBAAC,EAAO,GAAR;EACO;EACD;EACJ,MAAM,MAAU,UAAU,UAAU,KAAA;EACpC,WAAW,EAAG,cAAc,EAAmB,IAAQ,CAAS;EAChE,SAAS;GAAE,SAAS;GAAG,GAAG;EAAG;EAC7B,SAAS;GAAE,SAAS;GAAG,GAAG;EAAE;EAC5B,MAAM;GAAE,SAAS;GAAG,GAAG;EAAG;EAC1B,YAAY,EAAO;EACnB,GAAI,EAAY,CAAK;CACtB,CAAA;AAEL,CACF;AACA,EAAe,cAAc;AAmB7B,SAAgB,IAAsC;CACpD,OAAO,EAAM,WAAW,CAAgB;AAC1C"}
+{"version":3,"file":"form.js","names":[],"sources":["../../src/ui/form.tsx"],"sourcesContent":["'use client'\n\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nexport type FormHelperState = 'helper' | 'error' | 'warning' | 'success'\n\ninterface FormFieldContextValue {\n  state?: FormHelperState\n  helperTextId?: string\n  /** Auto-generated id shared between Label (htmlFor) and the field input (id). */\n  inputId?: string\n  required?: boolean\n}\nconst FormFieldContext = React.createContext<FormFieldContextValue>({})\n\n/**\n * FormField — vertical flex container that provides validation state and\n * aria-describedby wiring to children via React context.\n *\n * **Automatic a11y wiring:** FormField generates a stable ID (or uses a provided `helperTextId`)\n * and passes it to `FormHelperText` via context. Use the `useFormField()` hook in custom inputs\n * to read `{ state, helperTextId, required }` and spread onto your input element.\n *\n * @example\n * <FormField state=\"error\">\n *   <Label htmlFor=\"email\">Email</Label>\n *   <Input id=\"email\" state=\"error\" />\n *   <FormHelperText>Please enter a valid email address.</FormHelperText>\n * </FormField>\n */\nexport interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Custom ID for the helper text element. If omitted, an auto-generated ID is used.\n   * Pass this to `useFormField()` consumers that need to set `aria-describedby`.\n   */\n  helperTextId?: string\n  /**\n   * Custom ID for the field input element. If omitted, an auto-generated ID is used.\n   * Label (when inside FormField) reads this via `htmlFor`; Input reads it via `id`.\n   * Explicit `htmlFor` / `id` props on children always win.\n   */\n  inputId?: string\n  /** Current validation state — propagated to child `FormHelperText` via context */\n  state?: FormHelperState\n  /** Whether the field is required — available to children via `useFormField()` */\n  required?: boolean\n}\n\nconst FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ className, helperTextId, inputId, state = 'helper', required, children, ...props }, ref) => {\n    const autoId = React.useId()\n    const resolvedHelperId = helperTextId || `${autoId}-helper`\n    const resolvedInputId = inputId || `${autoId}-input`\n    const contextValue = React.useMemo(\n      () => ({ state, helperTextId: resolvedHelperId, inputId: resolvedInputId, required }),\n      [state, resolvedHelperId, resolvedInputId, required],\n    )\n\n    return (\n      <FormFieldContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn('flex flex-col gap-ds-02', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </FormFieldContext.Provider>\n    )\n  },\n)\nFormField.displayName = 'FormField'\n\n// FormHelperText — small helper/error/warning/success message under a field\n//\n// When used for errors, set an `id` matching the input's `aria-describedby`.\nexport interface FormHelperTextProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  state?: FormHelperState\n}\n\nconst helperStateClasses: Record<FormHelperState, string> = {\n  helper:  'text-surface-fg-subtle',\n  error:   'text-error-11',\n  warning: 'text-warning-11',\n  success: 'text-success-11',\n}\n\nconst FormHelperText = React.forwardRef<HTMLParagraphElement, FormHelperTextProps>(\n  ({ className, id: idProp, state: stateProp, ...props }, ref) => {\n    const context = React.useContext(FormFieldContext)\n    const state = stateProp ?? context.state ?? 'helper'\n    const id = idProp ?? context.helperTextId\n\n    return (\n      <motion.p\n        ref={ref}\n        id={id}\n        role={state === 'error' ? 'alert' : undefined}\n        className={cn('text-body-sm', helperStateClasses[state], className)}\n        initial={{ opacity: 0, y: -4 }}\n        animate={{ opacity: 1, y: 0 }}\n        exit={{ opacity: 0, y: -4 }}\n        transition={tweens.fade}\n        {...motionProps(props)}\n      />\n    )\n  },\n)\nFormHelperText.displayName = 'FormHelperText'\n\n/**\n * Hook to read FormField context — returns `{ state, helperTextId, required }`.\n * Use in custom input components to auto-wire `aria-describedby` and `aria-invalid`.\n *\n * @example\n * function MyCustomInput(props) {\n *   const { state, helperTextId, required } = useFormField()\n *   return (\n *     <input\n *       aria-describedby={helperTextId}\n *       aria-invalid={state === 'error' || undefined}\n *       aria-required={required}\n *       {...props}\n *     />\n *   )\n * }\n */\nexport function useFormField(): FormFieldContextValue {\n  return React.useContext(FormFieldContext)\n}\n\nexport { FormField, FormFieldContext, FormHelperText }\n"],"mappings":";;;;;;;AAiBA,IAAM,IAAmB,EAAM,cAAqC,CAAC,CAAC,GAmChE,IAAY,EAAM,YACrB,EAAE,cAAW,iBAAc,YAAS,WAAQ,UAAU,aAAU,aAAU,GAAG,KAAS,MAAQ;CAC7F,IAAM,IAAS,EAAM,MAAM,GACrB,IAAmB,KAAgB,GAAG,EAAO,UAC7C,IAAkB,KAAW,GAAG,EAAO,SACvC,IAAe,EAAM,eAClB;EAAE;EAAO,cAAc;EAAkB,SAAS;EAAiB;CAAS,IACnF;EAAC;EAAO;EAAkB;EAAiB;CAAQ,CACrD;CAEA,OACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,OAAD;GACO;GACL,WAAW,EAAG,2BAA2B,CAAS;GAClD,GAAI;GAEH;EACE,CAAA;CACoB,CAAA;AAE/B,CACF;AACA,EAAU,cAAc;AASxB,IAAM,IAAsD;CAC1D,QAAS;CACT,OAAS;CACT,SAAS;CACT,SAAS;AACX,GAEM,IAAiB,EAAM,YAC1B,EAAE,cAAW,IAAI,GAAQ,OAAO,GAAW,GAAG,KAAS,MAAQ;CAC9D,IAAM,IAAU,EAAM,WAAW,CAAgB,GAC3C,IAAQ,KAAa,EAAQ,SAAS,UACtC,IAAK,KAAU,EAAQ;CAE7B,OACE,kBAAC,EAAO,GAAR;EACO;EACD;EACJ,MAAM,MAAU,UAAU,UAAU,KAAA;EACpC,WAAW,EAAG,gBAAgB,EAAmB,IAAQ,CAAS;EAClE,SAAS;GAAE,SAAS;GAAG,GAAG;EAAG;EAC7B,SAAS;GAAE,SAAS;GAAG,GAAG;EAAE;EAC5B,MAAM;GAAE,SAAS;GAAG,GAAG;EAAG;EAC1B,YAAY,EAAO;EACnB,GAAI,EAAY,CAAK;CACtB,CAAA;AAEL,CACF;AACA,EAAe,cAAc;AAmB7B,SAAgB,IAAsC;CACpD,OAAO,EAAM,WAAW,CAAgB;AAC1C"}

package/dist/ui/input-otp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../src/ui/input-otp.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAYtC,QAAA,MAAM,QAAQ;;;;;kBANmB,GAAE;;;;;;;;;;;;;kBAAF,GAAE;;;;;;;;;YASvB,SAAS,GAAG,OAAO;IAC3B,+BAA+B;WACxB,YAAY;2CAwBrB,CAAA;AAGF,QAAA,MAAM,aAAa,mKAKjB,CAAA;AAGF,QAAA,MAAM,YAAY;WAEiC,MAAM;wCA0BvD,CAAA;AAGF,QAAA,MAAM,iBAAiB,mKAOrB,CAAA;AAGF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5E,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC3B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAC,YAAY,EAAE,CAAA"}
+{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../src/ui/input-otp.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAYtC,QAAA,MAAM,QAAQ;;;;;kBANgB,GAAG;;;;;;;;;;;;;kBAAH,GAAG;;;;;;;;;YASrB,SAAS,GAAG,OAAO;IAC3B,+BAA+B;WACxB,YAAY;2CAwBrB,CAAA;AAGF,QAAA,MAAM,aAAa,mKAKjB,CAAA;AAGF,QAAA,MAAM,YAAY;WAEiC,MAAM;wCA0BvD,CAAA;AAGF,QAAA,MAAM,iBAAiB,mKAOrB,CAAA;AAGF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5E,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC3B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAC,YAAY,EAAE,CAAA"}

package/dist/ui/input-otp.js

@@ -8,9 +8,9 @@ import { IconMinus as o } from "@tabler/icons-react";
 import { OTPInput as s, OTPInputContext as c } from "input-otp";
 //#region src/ui/input-otp.tsx
 var l = r.createContext("md"), u = {
-	sm: "h-ds-sm w-ds-sm text-ds-sm",
-	md: "h-ds-sm-plus w-ds-sm-plus text-ds-md",
-	lg: "h-ds-md w-ds-md text-ds-lg"
+	sm: "h-ds-sm w-ds-sm text-body-sm",
+	md: "h-ds-sm-plus w-ds-sm-plus text-body-md",
+	lg: "h-ds-md w-ds-md text-heading-xs"
 }, d = r.forwardRef(({ className: t, containerClassName: r, state: a, size: o, ...c }, u) => {
 	let d = n(), f = a === "error" || d?.state === "error", p = (typeof o == "string" ? o : void 0) ?? "md";
 	return /* @__PURE__ */ i(l.Provider, {

package/dist/ui/input-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/ui/input-otp.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus } from '@tabler/icons-react'\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n// ── Size context ────────────────────────────────────────────────────\n\ntype InputOTPSize = 'sm' | 'md' | 'lg'\n\nconst InputOTPSizeContext = React.createContext<InputOTPSize>('md')\n\nconst slotSizeClasses: Record<InputOTPSize, string> = {\n  sm: 'h-ds-sm w-ds-sm text-ds-sm',\n  md: 'h-ds-sm-plus w-ds-sm-plus text-ds-md',\n  lg: 'h-ds-md w-ds-md text-ds-lg',\n}\n\n// ── InputOTP ────────────────────────────────────────────────────────\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput> & {\n    state?: 'default' | 'error'\n    /** Slot size. @default 'md' */\n    size?: InputOTPSize\n  }\n>(({ className, containerClassName, state, size: sizeProp, ...props }, ref) => {\n  const formField = useFormField()\n  const isError = state === 'error' || formField?.state === 'error'\n  const size: InputOTPSize = (typeof sizeProp === 'string' ? sizeProp : undefined) ?? 'md'\n\n  return (\n    <InputOTPSizeContext.Provider value={size}>\n      <OTPInput\n        ref={ref}\n        aria-invalid={isError || undefined}\n        aria-describedby={formField?.helperTextId}\n        aria-required={formField?.required || undefined}\n        containerClassName={cn(\n          'group/otp flex items-center gap-ds-03 has-[:disabled]:opacity-action-disabled',\n          isError && 'is-error',\n          containerClassName,\n        )}\n        className={cn('disabled:cursor-not-allowed', className)}\n        {...props}\n      />\n    </InputOTPSizeContext.Provider>\n  )\n})\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex items-center', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const size = React.useContext(InputOTPSizeContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'relative flex items-center justify-center border-y border-r border-surface-border-strong transition-[box-shadow,border-color] first:rounded-l-control first:border-l last:rounded-r-control',\n        slotSizeClasses[size],\n        'group-[.is-error]/otp:border-error-7',\n        isActive && 'z-raised ring-2 ring-accent-9',\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink h-ds-05 w-px bg-surface-fg duration-slow-02\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = 'InputOTPSlot'\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <Icon icon={IconMinus} size=\"sm\" />\n  </div>\n))\nInputOTPSeparator.displayName = 'InputOTPSeparator'\n\nexport type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {\n  state?: 'default' | 'error'\n  /** Slot size. @default 'md' */\n  size?: InputOTPSize\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator,InputOTPSlot }\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAsB,EAAM,cAA4B,IAAI,GAE5D,IAAgD;CACpD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAIM,IAAW,EAAM,YAOpB,EAAE,cAAW,uBAAoB,UAAO,MAAM,GAAU,GAAG,KAAS,MAAQ;CAC7E,IAAM,IAAY,EAAa,GACzB,IAAU,MAAU,WAAW,GAAW,UAAU,SACpD,KAAsB,OAAO,KAAa,WAAW,IAAW,KAAA,MAAc;CAEpF,OACE,kBAAC,EAAoB,UAArB;EAA8B,OAAO;YACnC,kBAAC,GAAD;GACO;GACL,gBAAc,KAAW,KAAA;GACzB,oBAAkB,GAAW;GAC7B,iBAAe,GAAW,YAAY,KAAA;GACtC,oBAAoB,EAClB,iFACA,KAAW,YACX,CACF;GACA,WAAW,EAAG,+BAA+B,CAAS;GACtD,GAAI;EACL,CAAA;CAC2B,CAAA;AAElC,CAAC;AACD,EAAS,cAAc;AAEvB,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAG,qBAAqB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC3E;AACD,EAAc,cAAc;AAE5B,IAAM,IAAe,EAAM,YAGxB,EAAE,UAAO,cAAW,GAAG,KAAS,MAAQ;CACzC,IAAM,IAAkB,EAAM,WAAW,CAAe,GAClD,IAAO,EAAM,WAAW,CAAmB,GAC3C,EAAE,SAAM,iBAAc,gBAAa,EAAgB,MAAM;CAE/D,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,+LACA,EAAgB,IAChB,wCACA,KAAY,iCACZ,CACF;EACA,GAAI;YATN,CAWG,GACA,KACC,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD,EAAK,WAAU,kEAAmE,CAAA;EAC/E,CAAA,CAEJ;;AAET,CAAC;AACD,EAAa,cAAc;AAE3B,IAAM,IAAoB,EAAM,YAG7B,EAAE,GAAG,KAAS,MACf,kBAAC,OAAD;CAAU;CAAK,MAAK;CAAY,GAAI;WAClC,kBAAC,GAAD;EAAM,MAAM;EAAW,MAAK;CAAM,CAAA;AAC/B,CAAA,CACN;AACD,EAAkB,cAAc"}
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/ui/input-otp.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus } from '@tabler/icons-react'\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n// ── Size context ────────────────────────────────────────────────────\n\ntype InputOTPSize = 'sm' | 'md' | 'lg'\n\nconst InputOTPSizeContext = React.createContext<InputOTPSize>('md')\n\nconst slotSizeClasses: Record<InputOTPSize, string> = {\n  sm: 'h-ds-sm w-ds-sm text-body-sm',\n  md: 'h-ds-sm-plus w-ds-sm-plus text-body-md',\n  lg: 'h-ds-md w-ds-md text-heading-xs',\n}\n\n// ── InputOTP ────────────────────────────────────────────────────────\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput> & {\n    state?: 'default' | 'error'\n    /** Slot size. @default 'md' */\n    size?: InputOTPSize\n  }\n>(({ className, containerClassName, state, size: sizeProp, ...props }, ref) => {\n  const formField = useFormField()\n  const isError = state === 'error' || formField?.state === 'error'\n  const size: InputOTPSize = (typeof sizeProp === 'string' ? sizeProp : undefined) ?? 'md'\n\n  return (\n    <InputOTPSizeContext.Provider value={size}>\n      <OTPInput\n        ref={ref}\n        aria-invalid={isError || undefined}\n        aria-describedby={formField?.helperTextId}\n        aria-required={formField?.required || undefined}\n        containerClassName={cn(\n          'group/otp flex items-center gap-ds-03 has-[:disabled]:opacity-action-disabled',\n          isError && 'is-error',\n          containerClassName,\n        )}\n        className={cn('disabled:cursor-not-allowed', className)}\n        {...props}\n      />\n    </InputOTPSizeContext.Provider>\n  )\n})\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex items-center', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const size = React.useContext(InputOTPSizeContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'relative flex items-center justify-center border-y border-r border-surface-border-strong transition-[box-shadow,border-color] first:rounded-l-control first:border-l last:rounded-r-control',\n        slotSizeClasses[size],\n        'group-[.is-error]/otp:border-error-7',\n        isActive && 'z-raised ring-2 ring-accent-9',\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink h-ds-05 w-px bg-surface-fg duration-slow-02\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = 'InputOTPSlot'\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <Icon icon={IconMinus} size=\"sm\" />\n  </div>\n))\nInputOTPSeparator.displayName = 'InputOTPSeparator'\n\nexport type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {\n  state?: 'default' | 'error'\n  /** Slot size. @default 'md' */\n  size?: InputOTPSize\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator,InputOTPSlot }\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAsB,EAAM,cAA4B,IAAI,GAE5D,IAAgD;CACpD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAIM,IAAW,EAAM,YAOpB,EAAE,cAAW,uBAAoB,UAAO,MAAM,GAAU,GAAG,KAAS,MAAQ;CAC7E,IAAM,IAAY,EAAa,GACzB,IAAU,MAAU,WAAW,GAAW,UAAU,SACpD,KAAsB,OAAO,KAAa,WAAW,IAAW,KAAA,MAAc;CAEpF,OACE,kBAAC,EAAoB,UAArB;EAA8B,OAAO;YACnC,kBAAC,GAAD;GACO;GACL,gBAAc,KAAW,KAAA;GACzB,oBAAkB,GAAW;GAC7B,iBAAe,GAAW,YAAY,KAAA;GACtC,oBAAoB,EAClB,iFACA,KAAW,YACX,CACF;GACA,WAAW,EAAG,+BAA+B,CAAS;GACtD,GAAI;EACL,CAAA;CAC2B,CAAA;AAElC,CAAC;AACD,EAAS,cAAc;AAEvB,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAG,qBAAqB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC3E;AACD,EAAc,cAAc;AAE5B,IAAM,IAAe,EAAM,YAGxB,EAAE,UAAO,cAAW,GAAG,KAAS,MAAQ;CACzC,IAAM,IAAkB,EAAM,WAAW,CAAe,GAClD,IAAO,EAAM,WAAW,CAAmB,GAC3C,EAAE,SAAM,iBAAc,gBAAa,EAAgB,MAAM;CAE/D,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,+LACA,EAAgB,IAChB,wCACA,KAAY,iCACZ,CACF;EACA,GAAI;YATN,CAWG,GACA,KACC,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD,EAAK,WAAU,kEAAmE,CAAA;EAC/E,CAAA,CAEJ;;AAET,CAAC;AACD,EAAa,cAAc;AAE3B,IAAM,IAAoB,EAAM,YAG7B,EAAE,GAAG,KAAS,MACf,kBAAC,OAAD;CAAU;CAAK,MAAK;CAAY,GAAI;WAClC,kBAAC,GAAD;EAAM,MAAM;EAAW,MAAK;CAAM,CAAA;AAC/B,CAAA,CACN;AACD,EAAkB,cAAc"}

package/dist/ui/input.js

@@ -18,10 +18,10 @@ var c = t([
 	"has-[:read-only]:bg-surface-raised has-[:read-only]:cursor-default"
 ], {
 	variants: { size: {
-		xs: "h-ds-xs-plus text-ds-sm",
-		sm: "h-ds-sm text-ds-sm",
-		md: "h-ds-md text-ds-md",
-		lg: "h-ds-lg text-ds-md"
+		xs: "h-ds-xs-plus text-body-sm",
+		sm: "h-ds-sm text-body-sm",
+		md: "h-ds-md text-body-md",
+		lg: "h-ds-lg text-body-md"
 	} },
 	defaultVariants: { size: "md" }
 }), l = {
@@ -41,10 +41,10 @@ var c = t([
 		md: "px-ds-03",
 		lg: "px-ds-03"
 	}, N = {
-		xs: "text-ds-sm",
-		sm: "text-ds-sm",
-		md: "text-ds-sm",
-		lg: "text-ds-md"
+		xs: "text-body-sm",
+		sm: "text-body-sm",
+		md: "text-body-sm",
+		lg: "text-body-md"
 	};
 	return /* @__PURE__ */ s("div", {
 		className: n(c({ size: S }), w === "error" && "border-error-7 focus-within:ring-error-7", w === "warning" && "border-warning-7 focus-within:ring-warning-7", w === "success" && "border-success-7 focus-within:ring-success-7", y),

package/dist/ui/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../src/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { IconProvider, type IconSize } from './icon-context'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { cn } from './lib/utils'\n\n/** @deprecated Use `FieldState` — the shared control-state type. Kept as an alias. */\nexport type InputState = FieldState\n\nconst inputWrapperVariants = cva(\n  [\n    'relative flex items-center w-full font-sans',\n    'bg-surface-raised-hover text-surface-fg',\n    'border border-surface-border-strong rounded-control',\n    'hover:bg-surface-raised-active',\n    'transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n    'focus-within:outline-hidden focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-offset-2 focus-within:border-surface-border',\n    'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-action-disabled',\n    'has-[:read-only]:bg-surface-raised has-[:read-only]:cursor-default',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-ds-sm',\n        sm: 'h-ds-sm text-ds-sm',\n        md: 'h-ds-md text-ds-md',\n        lg: 'h-ds-lg text-ds-md',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sectionWidthMap: Record<string, string> = {\n  xs: 'w-[26px]',\n  sm: 'w-[30px]',\n  md: 'w-[38px]',\n  lg: 'w-[46px]',\n}\n\nconst iconSizeMap: Record<string, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n}\n\n/**\n * Props for Input — a single-line text field with container-first architecture,\n * section-based icons with automatic padding, per-size scaling, and validation state coloring.\n *\n * **Sizes:** `xs` (28px) | `sm` (32px) | `md` (40px, default) | `lg` (48px)\n * HTML's native `size` attribute is excluded — use CSS width instead.\n *\n * **Validation states:** `state=\"error\"` colors the border red and sets `aria-invalid`.\n * Use with `<FormField>` to show helper text below the input.\n *\n * **Section-based icons:** `startSection` and `endSection` accept any React node.\n * Icons are auto-sized via `IconProvider`. Sections are `pointer-events-none` by default;\n * use `startSectionClickable`/`endSectionClickable` for interactive sections.\n *\n * **className** targets the `<input>` element (backward compatible).\n * **wrapperClassName** targets the wrapper div for border/bg/ring overrides.\n *\n * @example\n * // Basic email field with placeholder:\n * <Input type=\"email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Search input with a leading icon:\n * <Input size=\"md\" startSection={<IconSearch />} placeholder=\"Search projects...\" />\n *\n * @example\n * // Validated error state (pair with FormField for label + helper text):\n * <Input state=\"error\" value={email} onChange={handleChange} />\n *\n * @example\n * // Read-only field (shows a muted background, non-editable):\n * <Input readOnly value=\"https://devalok.com/api/key/abc123\" endSection={<IconCopy />} />\n */\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputWrapperVariants> {\n  state?: FieldState\n  startSection?: React.ReactNode\n  endSection?: React.ReactNode\n  startSectionClickable?: boolean\n  endSectionClickable?: boolean\n  /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n   *  `'label'` = tinted background with border separator (default for strings). */\n  startSectionType?: 'icon' | 'label'\n  /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n   *  `'label'` = tinted background with border separator (default for strings). */\n  endSectionType?: 'icon' | 'label'\n  /** Classes for the wrapper div (border, bg, ring). */\n  wrapperClassName?: string\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      state: stateProp,\n      size: sizeProp = 'md',\n      startSection,\n      endSection,\n      startSectionClickable,\n      endSectionClickable,\n      startSectionType: startSectionTypeProp,\n      endSectionType: endSectionTypeProp,\n      wrapperClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const fieldCtx = useFormField()\n    // Merge FormField context — explicit props always win (shared precedence)\n    const state = resolveFieldState(stateProp, fieldCtx.state)\n    const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n    const ariaRequired = props['aria-required'] ?? fieldCtx.required\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n    const inputId = props.id ?? fieldCtx.inputId\n\n    const hasStart = !!startSection\n    const hasEnd = !!endSection\n\n    // Infer section type: string → label, ReactElement → icon\n    const startType = startSectionTypeProp ?? (typeof startSection === 'string' ? 'label' : 'icon')\n    const endType = endSectionTypeProp ?? (typeof endSection === 'string' ? 'label' : 'icon')\n\n    const labelPaddingMap: Record<string, string> = {\n      xs: 'px-ds-02',\n      sm: 'px-ds-02',\n      md: 'px-ds-03',\n      lg: 'px-ds-03',\n    }\n\n    const labelTextMap: Record<string, string> = {\n      xs: 'text-ds-sm',\n      sm: 'text-ds-sm',\n      md: 'text-ds-sm',\n      lg: 'text-ds-md',\n    }\n\n    const inputPadding: Record<string, string> = {\n      xs: 'px-ds-02',\n      sm: 'px-ds-03',\n      md: 'px-ds-03',\n      lg: 'px-ds-04',\n    }\n\n    return (\n      <div\n        className={cn(\n          inputWrapperVariants({ size }),\n          state === 'error' && 'border-error-7 focus-within:ring-error-7',\n          state === 'warning' && 'border-warning-7 focus-within:ring-warning-7',\n          state === 'success' && 'border-success-7 focus-within:ring-success-7',\n          wrapperClassName,\n        )}\n      >\n        {hasStart && startType === 'label' && (\n          <span\n            className={cn(\n              'flex items-center shrink-0 select-none self-stretch',\n              'border-r border-surface-border',\n              'bg-surface-raised text-surface-fg-muted',\n              'rounded-l-[inherit]',\n              labelPaddingMap[size],\n              labelTextMap[size],\n              !startSectionClickable && 'pointer-events-none',\n            )}\n          >\n            {startSection}\n          </span>\n        )}\n\n        {hasStart && startType === 'icon' && (\n          <IconProvider size={iconSizeMap[size]}>\n            <span\n              className={cn(\n                'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n                sectionWidthMap[size],\n                !startSectionClickable && 'pointer-events-none',\n              )}\n            >\n              {startSection}\n            </span>\n          </IconProvider>\n        )}\n\n        <input\n          type={type}\n          className={cn(\n            'flex-1 min-w-0 h-full bg-transparent outline-hidden font-sans',\n            'placeholder:text-surface-fg-subtle',\n            'disabled:cursor-not-allowed',\n            'read-only:cursor-default',\n            inputPadding[size],\n            // Remove left padding when start icon section is present (icon provides visual space)\n            hasStart && startType === 'icon' && 'pl-0',\n            // Remove right padding when end icon section is present\n            hasEnd && endType === 'icon' && 'pr-0',\n            className,\n          )}\n          aria-invalid={state === 'error' || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired || undefined}\n          ref={ref}\n          {...props}\n          id={inputId}\n        />\n\n        {hasEnd && endType === 'label' && (\n          <span\n            className={cn(\n              'flex items-center shrink-0 select-none self-stretch',\n              'border-l border-surface-border',\n              'bg-surface-raised text-surface-fg-muted',\n              'rounded-r-[inherit]',\n              labelPaddingMap[size],\n              labelTextMap[size],\n              !endSectionClickable && 'pointer-events-none',\n            )}\n          >\n            {endSection}\n          </span>\n        )}\n\n        {hasEnd && endType === 'icon' && (\n          <IconProvider size={iconSizeMap[size]}>\n            <span\n              className={cn(\n                'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n                sectionWidthMap[size],\n                !endSectionClickable && 'pointer-events-none',\n              )}\n            >\n              {endSection}\n            </span>\n          </IconProvider>\n        )}\n      </div>\n    )\n  },\n)\nInput.displayName = 'Input'\n\nexport { Input, inputWrapperVariants }\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAuB,EAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAEM,IAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAqDM,IAAQ,EAAM,YAEhB,EACE,cACA,SACA,OAAO,GACP,MAAM,IAAW,MACjB,iBACA,eACA,0BACA,wBACA,kBAAkB,GAClB,gBAAgB,GAChB,qBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,IAAW,EAAa,GAExB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAU,EAAM,MAAM,EAAS,SAE/B,IAAW,CAAC,CAAC,GACb,IAAS,CAAC,CAAC,GAGX,IAAY,MAAyB,OAAO,KAAiB,WAAW,UAAU,SAClF,IAAU,MAAuB,OAAO,KAAe,WAAW,UAAU,SAE5E,IAA0C;EAC9C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,GAEM,IAAuC;EAC3C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN;CASA,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAqB,EAAE,QAAK,CAAC,GAC7B,MAAU,WAAW,4CACrB,MAAU,aAAa,gDACvB,MAAU,aAAa,gDACvB,CACF;YAPF;GASG,KAAY,MAAc,WACzB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAyB,qBAC5B;cAEC;GACG,CAAA;GAGP,KAAY,MAAc,UACzB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAyB,qBAC5B;eAEC;IACG,CAAA;GACM,CAAA;GAGhB,kBAAC,SAAD;IACQ;IACN,WAAW,EACT,iEACA,sCACA,+BACA,4BACA;KArDN,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;IAkDE,EAAa,IAEb,KAAY,MAAc,UAAU,QAEpC,KAAU,MAAY,UAAU,QAChC,CACF;IACA,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB;IAClB,iBAAe,KAAgB,KAAA;IAC1B;IACL,GAAI;IACJ,IAAI;GACL,CAAA;GAEA,KAAU,MAAY,WACrB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAuB,qBAC1B;cAEC;GACG,CAAA;GAGP,KAAU,MAAY,UACrB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAuB,qBAC1B;eAEC;IACG,CAAA;GACM,CAAA;EAEb;;AAET,CACF;AACA,EAAM,cAAc"}
+{"version":3,"file":"input.js","names":[],"sources":["../../src/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { IconProvider, type IconSize } from './icon-context'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { cn } from './lib/utils'\n\n/** @deprecated Use `FieldState` — the shared control-state type. Kept as an alias. */\nexport type InputState = FieldState\n\nconst inputWrapperVariants = cva(\n  [\n    'relative flex items-center w-full font-sans',\n    'bg-surface-raised-hover text-surface-fg',\n    'border border-surface-border-strong rounded-control',\n    'hover:bg-surface-raised-active',\n    'transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n    'focus-within:outline-hidden focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-offset-2 focus-within:border-surface-border',\n    'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-action-disabled',\n    'has-[:read-only]:bg-surface-raised has-[:read-only]:cursor-default',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-body-sm',\n        sm: 'h-ds-sm text-body-sm',\n        md: 'h-ds-md text-body-md',\n        lg: 'h-ds-lg text-body-md',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sectionWidthMap: Record<string, string> = {\n  xs: 'w-[26px]',\n  sm: 'w-[30px]',\n  md: 'w-[38px]',\n  lg: 'w-[46px]',\n}\n\nconst iconSizeMap: Record<string, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n}\n\n/**\n * Props for Input — a single-line text field with container-first architecture,\n * section-based icons with automatic padding, per-size scaling, and validation state coloring.\n *\n * **Sizes:** `xs` (28px) | `sm` (32px) | `md` (40px, default) | `lg` (48px)\n * HTML's native `size` attribute is excluded — use CSS width instead.\n *\n * **Validation states:** `state=\"error\"` colors the border red and sets `aria-invalid`.\n * Use with `<FormField>` to show helper text below the input.\n *\n * **Section-based icons:** `startSection` and `endSection` accept any React node.\n * Icons are auto-sized via `IconProvider`. Sections are `pointer-events-none` by default;\n * use `startSectionClickable`/`endSectionClickable` for interactive sections.\n *\n * **className** targets the `<input>` element (backward compatible).\n * **wrapperClassName** targets the wrapper div for border/bg/ring overrides.\n *\n * @example\n * // Basic email field with placeholder:\n * <Input type=\"email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Search input with a leading icon:\n * <Input size=\"md\" startSection={<IconSearch />} placeholder=\"Search projects...\" />\n *\n * @example\n * // Validated error state (pair with FormField for label + helper text):\n * <Input state=\"error\" value={email} onChange={handleChange} />\n *\n * @example\n * // Read-only field (shows a muted background, non-editable):\n * <Input readOnly value=\"https://devalok.com/api/key/abc123\" endSection={<IconCopy />} />\n */\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputWrapperVariants> {\n  state?: FieldState\n  startSection?: React.ReactNode\n  endSection?: React.ReactNode\n  startSectionClickable?: boolean\n  endSectionClickable?: boolean\n  /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n   *  `'label'` = tinted background with border separator (default for strings). */\n  startSectionType?: 'icon' | 'label'\n  /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n   *  `'label'` = tinted background with border separator (default for strings). */\n  endSectionType?: 'icon' | 'label'\n  /** Classes for the wrapper div (border, bg, ring). */\n  wrapperClassName?: string\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      state: stateProp,\n      size: sizeProp = 'md',\n      startSection,\n      endSection,\n      startSectionClickable,\n      endSectionClickable,\n      startSectionType: startSectionTypeProp,\n      endSectionType: endSectionTypeProp,\n      wrapperClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const fieldCtx = useFormField()\n    // Merge FormField context — explicit props always win (shared precedence)\n    const state = resolveFieldState(stateProp, fieldCtx.state)\n    const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n    const ariaRequired = props['aria-required'] ?? fieldCtx.required\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n    const inputId = props.id ?? fieldCtx.inputId\n\n    const hasStart = !!startSection\n    const hasEnd = !!endSection\n\n    // Infer section type: string → label, ReactElement → icon\n    const startType = startSectionTypeProp ?? (typeof startSection === 'string' ? 'label' : 'icon')\n    const endType = endSectionTypeProp ?? (typeof endSection === 'string' ? 'label' : 'icon')\n\n    const labelPaddingMap: Record<string, string> = {\n      xs: 'px-ds-02',\n      sm: 'px-ds-02',\n      md: 'px-ds-03',\n      lg: 'px-ds-03',\n    }\n\n    const labelTextMap: Record<string, string> = {\n      xs: 'text-body-sm',\n      sm: 'text-body-sm',\n      md: 'text-body-sm',\n      lg: 'text-body-md',\n    }\n\n    const inputPadding: Record<string, string> = {\n      xs: 'px-ds-02',\n      sm: 'px-ds-03',\n      md: 'px-ds-03',\n      lg: 'px-ds-04',\n    }\n\n    return (\n      <div\n        className={cn(\n          inputWrapperVariants({ size }),\n          state === 'error' && 'border-error-7 focus-within:ring-error-7',\n          state === 'warning' && 'border-warning-7 focus-within:ring-warning-7',\n          state === 'success' && 'border-success-7 focus-within:ring-success-7',\n          wrapperClassName,\n        )}\n      >\n        {hasStart && startType === 'label' && (\n          <span\n            className={cn(\n              'flex items-center shrink-0 select-none self-stretch',\n              'border-r border-surface-border',\n              'bg-surface-raised text-surface-fg-muted',\n              'rounded-l-[inherit]',\n              labelPaddingMap[size],\n              labelTextMap[size],\n              !startSectionClickable && 'pointer-events-none',\n            )}\n          >\n            {startSection}\n          </span>\n        )}\n\n        {hasStart && startType === 'icon' && (\n          <IconProvider size={iconSizeMap[size]}>\n            <span\n              className={cn(\n                'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n                sectionWidthMap[size],\n                !startSectionClickable && 'pointer-events-none',\n              )}\n            >\n              {startSection}\n            </span>\n          </IconProvider>\n        )}\n\n        <input\n          type={type}\n          className={cn(\n            'flex-1 min-w-0 h-full bg-transparent outline-hidden font-sans',\n            'placeholder:text-surface-fg-subtle',\n            'disabled:cursor-not-allowed',\n            'read-only:cursor-default',\n            inputPadding[size],\n            // Remove left padding when start icon section is present (icon provides visual space)\n            hasStart && startType === 'icon' && 'pl-0',\n            // Remove right padding when end icon section is present\n            hasEnd && endType === 'icon' && 'pr-0',\n            className,\n          )}\n          aria-invalid={state === 'error' || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired || undefined}\n          ref={ref}\n          {...props}\n          id={inputId}\n        />\n\n        {hasEnd && endType === 'label' && (\n          <span\n            className={cn(\n              'flex items-center shrink-0 select-none self-stretch',\n              'border-l border-surface-border',\n              'bg-surface-raised text-surface-fg-muted',\n              'rounded-r-[inherit]',\n              labelPaddingMap[size],\n              labelTextMap[size],\n              !endSectionClickable && 'pointer-events-none',\n            )}\n          >\n            {endSection}\n          </span>\n        )}\n\n        {hasEnd && endType === 'icon' && (\n          <IconProvider size={iconSizeMap[size]}>\n            <span\n              className={cn(\n                'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n                sectionWidthMap[size],\n                !endSectionClickable && 'pointer-events-none',\n              )}\n            >\n              {endSection}\n            </span>\n          </IconProvider>\n        )}\n      </div>\n    )\n  },\n)\nInput.displayName = 'Input'\n\nexport { Input, inputWrapperVariants }\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAuB,EAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAEM,IAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAqDM,IAAQ,EAAM,YAEhB,EACE,cACA,SACA,OAAO,GACP,MAAM,IAAW,MACjB,iBACA,eACA,0BACA,wBACA,kBAAkB,GAClB,gBAAgB,GAChB,qBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,IAAW,EAAa,GAExB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAU,EAAM,MAAM,EAAS,SAE/B,IAAW,CAAC,CAAC,GACb,IAAS,CAAC,CAAC,GAGX,IAAY,MAAyB,OAAO,KAAiB,WAAW,UAAU,SAClF,IAAU,MAAuB,OAAO,KAAe,WAAW,UAAU,SAE5E,IAA0C;EAC9C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,GAEM,IAAuC;EAC3C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN;CASA,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAqB,EAAE,QAAK,CAAC,GAC7B,MAAU,WAAW,4CACrB,MAAU,aAAa,gDACvB,MAAU,aAAa,gDACvB,CACF;YAPF;GASG,KAAY,MAAc,WACzB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAyB,qBAC5B;cAEC;GACG,CAAA;GAGP,KAAY,MAAc,UACzB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAyB,qBAC5B;eAEC;IACG,CAAA;GACM,CAAA;GAGhB,kBAAC,SAAD;IACQ;IACN,WAAW,EACT,iEACA,sCACA,+BACA,4BACA;KArDN,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;IAkDE,EAAa,IAEb,KAAY,MAAc,UAAU,QAEpC,KAAU,MAAY,UAAU,QAChC,CACF;IACA,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB;IAClB,iBAAe,KAAgB,KAAA;IAC1B;IACL,GAAI;IACJ,IAAI;GACL,CAAA;GAEA,KAAU,MAAY,WACrB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAuB,qBAC1B;cAEC;GACG,CAAA;GAGP,KAAU,MAAY,UACrB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAuB,qBAC1B;eAEC;IACG,CAAA;GACM,CAAA;EAEb;;AAET,CACF;AACA,EAAM,cAAc"}

package/dist/ui/label.js

@@ -10,7 +10,7 @@ var o = r.forwardRef(({ className: r, required: o, children: s, htmlFor: c, ...l
 	return /* @__PURE__ */ a(e, {
 		ref: u,
 		htmlFor: f,
-		className: t("font-sans text-ds-md font-medium text-surface-fg leading-none transition-opacity duration-fast-01 ease-productive-standard peer-disabled:opacity-action-disabled", r),
+		className: t("font-sans text-body-md font-medium text-surface-fg leading-none transition-opacity duration-fast-01 ease-productive-standard peer-disabled:opacity-action-disabled", r),
 		...l,
 		children: [s, p && /* @__PURE__ */ i("span", {
 			className: "text-error-11 ml-ds-01",

package/dist/ui/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":[],"sources":["../../src/ui/label.tsx"],"sourcesContent":["'use client'\n\nimport * as LabelPrimitive from '@primitives/react-label'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { cn } from './lib/utils'\n\nexport interface LabelProps\n  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {\n  required?: boolean\n}\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  LabelProps\n>(({ className, required, children, htmlFor, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  // Explicit htmlFor wins; otherwise fall back to FormField's inputId.\n  const resolvedHtmlFor = htmlFor ?? fieldCtx.inputId\n  const resolvedRequired = required ?? fieldCtx.required\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      htmlFor={resolvedHtmlFor}\n      className={cn(\n        'font-sans text-ds-md font-medium text-surface-fg leading-none transition-opacity duration-fast-01 ease-productive-standard peer-disabled:opacity-action-disabled',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {resolvedRequired && (\n        <span className=\"text-error-11 ml-ds-01\" aria-hidden=\"true\">*</span>\n      )}\n    </LabelPrimitive.Root>\n  )\n})\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"],"mappings":";;;;;;;AAaA,IAAM,IAAQ,EAAM,YAGjB,EAAE,cAAW,aAAU,aAAU,YAAS,GAAG,KAAS,MAAQ;CAC/D,IAAM,IAAW,EAAa,GAExB,IAAkB,KAAW,EAAS,SACtC,IAAmB,KAAY,EAAS;CAC9C,OACE,kBAAC,GAAD;EACO;EACL,SAAS;EACT,WAAW,EACT,oKACA,CACF;EACA,GAAI;YAPN,CASG,GACA,KACC,kBAAC,QAAD;GAAM,WAAU;GAAyB,eAAY;aAAO;EAAO,CAAA,CAElD;;AAEzB,CAAC;AACD,EAAM,cAAA,EAAkC"}
+{"version":3,"file":"label.js","names":[],"sources":["../../src/ui/label.tsx"],"sourcesContent":["'use client'\n\nimport * as LabelPrimitive from '@primitives/react-label'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { cn } from './lib/utils'\n\nexport interface LabelProps\n  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {\n  required?: boolean\n}\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  LabelProps\n>(({ className, required, children, htmlFor, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  // Explicit htmlFor wins; otherwise fall back to FormField's inputId.\n  const resolvedHtmlFor = htmlFor ?? fieldCtx.inputId\n  const resolvedRequired = required ?? fieldCtx.required\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      htmlFor={resolvedHtmlFor}\n      className={cn(\n        'font-sans text-body-md font-medium text-surface-fg leading-none transition-opacity duration-fast-01 ease-productive-standard peer-disabled:opacity-action-disabled',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {resolvedRequired && (\n        <span className=\"text-error-11 ml-ds-01\" aria-hidden=\"true\">*</span>\n      )}\n    </LabelPrimitive.Root>\n  )\n})\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"],"mappings":";;;;;;;AAaA,IAAM,IAAQ,EAAM,YAGjB,EAAE,cAAW,aAAU,aAAU,YAAS,GAAG,KAAS,MAAQ;CAC/D,IAAM,IAAW,EAAa,GAExB,IAAkB,KAAW,EAAS,SACtC,IAAmB,KAAY,EAAS;CAC9C,OACE,kBAAC,GAAD;EACO;EACL,SAAS;EACT,WAAW,EACT,sKACA,CACF;EACA,GAAI;YAPN,CASG,GACA,KACC,kBAAC,QAAD;GAAM,WAAU;GAAyB,eAAY;aAAO;EAAO,CAAA,CAElD;;AAEzB,CAAC;AACD,EAAM,cAAA,EAAkC"}

package/dist/ui/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ui/lib/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAO,MAAM,MAAM,CAAA;AAc3C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ui/lib/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAO,MAAM,MAAM,CAAA;AA0B3C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/ui/lib/utils.js

@@ -19,19 +19,48 @@ var n = t({ extend: {
 		"ds-12",
 		"ds-13"
 	] },
-	classGroups: { "font-size": [{ "text-ds": [
-		"xs",
-		"sm",
-		"md",
-		"base",
-		"lg",
-		"xl",
-		"2xl",
-		"3xl",
-		"4xl",
-		"5xl",
-		"6xl"
-	] }] }
+	classGroups: { "font-size": [
+		{ "text-ds": [
+			"xs",
+			"sm",
+			"md",
+			"base",
+			"lg",
+			"xl",
+			"2xl",
+			"3xl",
+			"4xl",
+			"5xl",
+			"6xl"
+		] },
+		{ "text-heading": [
+			"2xl",
+			"xl",
+			"lg",
+			"md",
+			"sm",
+			"xs"
+		] },
+		{ "text-body": [
+			"lg",
+			"md",
+			"sm",
+			"xs"
+		] },
+		{ "text-label": [
+			"lg",
+			"md",
+			"sm",
+			"xs"
+		] },
+		{ "text-label-plain": [
+			"lg",
+			"md",
+			"sm"
+		] },
+		"text-caption",
+		"text-code"
+	] }
 } });
 function r(...t) {
 	return n(e(t));

package/dist/ui/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/ui/lib/utils.ts"],"sourcesContent":["// @server-safe\nimport { type ClassValue,clsx } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      spacing: ['ds-01', 'ds-02', 'ds-02b', 'ds-03', 'ds-04', 'ds-05', 'ds-05b', 'ds-06', 'ds-06b', 'ds-07', 'ds-08', 'ds-09', 'ds-10', 'ds-11', 'ds-12', 'ds-13'],\n    },\n    classGroups: {\n      'font-size': [{ 'text-ds': ['xs', 'sm', 'md', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'] }],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;AAIA,IAAM,IAAU,EAAoB,EAClC,QAAQ;CACN,OAAO,EACL,SAAS;EAAC;EAAS;EAAS;EAAU;EAAS;EAAS;EAAS;EAAU;EAAS;EAAU;EAAS;EAAS;EAAS;EAAS;EAAS;EAAS;CAAO,EAC7J;CACA,aAAa,EACX,aAAa,CAAC,EAAE,WAAW;EAAC;EAAM;EAAM;EAAM;EAAQ;EAAM;EAAM;EAAO;EAAO;EAAO;EAAO;CAAK,EAAE,CAAC,EACxG;AACF,EACF,CAAC;AAED,SAAgB,EAAG,GAAG,GAAsB;CAC1C,OAAO,EAAQ,EAAK,CAAM,CAAC;AAC7B"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/ui/lib/utils.ts"],"sourcesContent":["// @server-safe\nimport { type ClassValue,clsx } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      spacing: ['ds-01', 'ds-02', 'ds-02b', 'ds-03', 'ds-04', 'ds-05', 'ds-05b', 'ds-06', 'ds-06b', 'ds-07', 'ds-08', 'ds-09', 'ds-10', 'ds-11', 'ds-12', 'ds-13'],\n    },\n    classGroups: {\n      // All size ramps live in the font-size group so they're mutually exclusive\n      // with EACH OTHER but NOT confused with text-COLOR utilities (text-error-11,\n      // text-surface-fg, …). Without registering these, tw-merge classifies\n      // `text-body-md` as a colour and silently strips a real colour on the same element.\n      'font-size': [\n        { 'text-ds': ['xs', 'sm', 'md', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'] },\n        { 'text-heading': ['2xl', 'xl', 'lg', 'md', 'sm', 'xs'] },\n        { 'text-body': ['lg', 'md', 'sm', 'xs'] },\n        { 'text-label': ['lg', 'md', 'sm', 'xs'] },\n        { 'text-label-plain': ['lg', 'md', 'sm'] },\n        'text-caption',\n        'text-code',\n      ],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;AAIA,IAAM,IAAU,EAAoB,EAClC,QAAQ;CACN,OAAO,EACL,SAAS;EAAC;EAAS;EAAS;EAAU;EAAS;EAAS;EAAS;EAAU;EAAS;EAAU;EAAS;EAAS;EAAS;EAAS;EAAS;EAAS;CAAO,EAC7J;CACA,aAAa,EAKX,aAAa;EACX,EAAE,WAAW;GAAC;GAAM;GAAM;GAAM;GAAQ;GAAM;GAAM;GAAO;GAAO;GAAO;GAAO;EAAK,EAAE;EACvF,EAAE,gBAAgB;GAAC;GAAO;GAAM;GAAM;GAAM;GAAM;EAAI,EAAE;EACxD,EAAE,aAAa;GAAC;GAAM;GAAM;GAAM;EAAI,EAAE;EACxC,EAAE,cAAc;GAAC;GAAM;GAAM;GAAM;EAAI,EAAE;EACzC,EAAE,oBAAoB;GAAC;GAAM;GAAM;EAAI,EAAE;EACzC;EACA;CACF,EACF;AACF,EACF,CAAC;AAED,SAAgB,EAAG,GAAG,GAAsB;CAC1C,OAAO,EAAQ,EAAK,CAAM,CAAC;AAC7B"}

package/dist/ui/menubar.js

@@ -32,13 +32,13 @@ var N = c, P = b.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ x(u,
 P.displayName = u.displayName;
 var F = b.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ x(h, {
 	ref: n,
-	className: v("flex cursor-default select-none items-center rounded-control px-ds-04 py-ds-02 text-ds-md font-medium outline-hidden transition-colors hover:bg-surface-raised-hover focus-visible:bg-surface-raised-hover data-[state=open]:bg-surface-raised-hover", e),
+	className: v("flex cursor-default select-none items-center rounded-control px-ds-04 py-ds-02 text-body-md font-medium outline-hidden transition-colors hover:bg-surface-raised-hover focus-visible:bg-surface-raised-hover data-[state=open]:bg-surface-raised-hover", e),
 	...t
 }));
 F.displayName = h.displayName;
 var I = b.forwardRef(({ className: e, inset: t, children: n, ...r }, i) => /* @__PURE__ */ S(m, {
 	ref: i,
-	className: v("flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0", t && "pl-ds-07", e),
+	className: v("flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0", t && "pl-ds-07", e),
 	...r,
 	children: [/* @__PURE__ */ x("span", {
 		className: "min-w-0 truncate",
@@ -89,13 +89,13 @@ var R = b.forwardRef(({ className: e, align: n = "start", alignOffset: r = -4, s
 R.displayName = t.displayName;
 var z = b.forwardRef(({ className: e, inset: t, ...n }, i) => /* @__PURE__ */ x(r, {
 	ref: i,
-	className: v("relative flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", t && "pl-ds-07", e),
+	className: v("relative flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", t && "pl-ds-07", e),
 	...n
 }));
 z.displayName = r.displayName;
 var B = b.forwardRef(({ className: t, children: n, checked: r, ...a }, o) => /* @__PURE__ */ S(e, {
 	ref: o,
-	className: v("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t),
+	className: v("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t),
 	checked: r,
 	...a,
 	children: [/* @__PURE__ */ x("span", {
@@ -109,7 +109,7 @@ var B = b.forwardRef(({ className: t, children: n, checked: r, ...a }, o) => /*
 B.displayName = e.displayName;
 var V = b.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ S(l, {
 	ref: r,
-	className: v("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	className: v("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
 	...n,
 	children: [/* @__PURE__ */ x("span", {
 		className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",
@@ -122,7 +122,7 @@ var V = b.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */
 V.displayName = l.displayName;
 var H = b.forwardRef(({ className: e, inset: t, ...n }, r) => /* @__PURE__ */ x(a, {
 	ref: r,
-	className: v("px-ds-03 py-ds-02b text-ds-md font-semibold", t && "pl-ds-07", e),
+	className: v("px-ds-03 py-ds-02b text-body-md font-semibold", t && "pl-ds-07", e),
 	...n
 }));
 H.displayName = a.displayName;
@@ -133,7 +133,7 @@ var U = b.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ x(d, {
 }));
 U.displayName = d.displayName;
 var W = ({ className: e, ...t }) => /* @__PURE__ */ x("span", {
-	className: v("ml-auto text-ds-sm text-surface-fg-subtle", e),
+	className: v("ml-auto text-body-sm text-surface-fg-subtle", e),
 	...t
 });
 W.displayName = "MenubarShortcut";

package/dist/ui/menubar.js.map

@@ -1 +1 @@
-{"version":3,"file":"menubar.js","names":[],"sources":["../../src/ui/menubar.tsx"],"sourcesContent":["'use client'\n\nimport * as MenubarPrimitive from '@primitives/react-menubar'\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal contexts to thread open state ──\n\nconst MenubarSubOpenContext = React.createContext(false)\n\nconst MenubarMenu: React.FC<React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Menu>> = (props) => {\n  // MenubarPrimitive.Menu doesn't expose open/onOpenChange directly.\n  // We derive open from data-state on the trigger via a callback ref approach,\n  // but the cleanest way is to use the Menubar root's value prop.\n  // Since MenubarMenu doesn't have open/onOpenChange, we track via a wrapper\n  // that observes the trigger's data-state.\n  //\n  // Alternative: MenubarPrimitive.Menu has a `value` that the root uses.\n  // We'll use a simpler approach: track open via content mount state.\n  return <MenubarPrimitive.Menu {...props} />\n}\nMenubarMenu.displayName = 'MenubarMenu'\n\n// For Menubar, the Menu doesn't expose open/onOpenChange. Instead, we'll use a\n// different approach: wrap Content to use a local presence state based on data-state.\n// We create a wrapper component that tracks whether content should be shown.\n\nconst MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group\n\nconst MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal\n\nconst MenubarSub: React.FC<React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Sub>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <MenubarSubOpenContext.Provider value={open}>\n      <MenubarPrimitive.Sub open={open} onOpenChange={handleOpenChange} {...props} />\n    </MenubarSubOpenContext.Provider>\n  )\n}\nMenubarSub.displayName = 'MenubarSub'\n\nconst MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup =\n  MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      'flex h-ds-sm-plus items-center space-x-ds-02 rounded-overlay bg-surface-overlay p-ds-02 shadow-raised',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center rounded-control px-ds-04 py-ds-02 text-ds-md font-medium outline-hidden transition-colors hover:bg-surface-raised-hover focus-visible:bg-surface-raised-hover data-[state=open]:bg-surface-raised-hover',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto shrink-0\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(MenubarSubOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <MenubarPrimitive.SubContent\n          ref={ref}\n          forceMount\n          asChild\n          {...props}\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ ...springs.snappy, opacity: tweens.fade }}\n            className={cn(\n              'z-popover min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n              className,\n            )}\n          >\n            {children}\n          </motion.div>\n        </MenubarPrimitive.SubContent>\n      )}\n    </AnimatePresence>\n  )\n})\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\n// For MenubarContent, since MenubarMenu doesn't expose open/onOpenChange,\n// we use a wrapper that reads presence from a callback approach.\n// The cleanest solution: use a local state tracker via onCloseAutoFocus/onOpenAutoFocus\n// or simply keep CSS-free and let Radix handle mount/unmount naturally.\n//\n// Since Menubar menus are opened by the Menubar root (which tracks which menu value is open),\n// and MenubarPrimitive.Content already handles mount/unmount, we can use a ref-based approach\n// to detect the data-state attribute. However, the simplest reliable approach is to use\n// a wrapper that detects mount via useEffect.\n\n// MenubarContent uses CSS data-state animations instead of framer-motion because\n// MenubarPrimitive.Menu doesn't expose open/onOpenChange, making AnimatePresence\n// impossible to wire up for exit animations. The popover-in/popover-out keyframes\n// are defined in the tailwind preset and triggered by Radix's data-state attribute.\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = 'start', alignOffset = -4, sideOffset = 8, children, ...props },\n    ref,\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          'z-popover min-w-[12rem] rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n          'data-[state=open]:animate-popover-in data-[state=closed]:animate-popover-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </MenubarPrimitive.Content>\n    </MenubarPrimitive.Portal>\n  ),\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <IconCircle className=\"h-2 w-2 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      'px-ds-03 py-ds-02b text-ds-md font-semibold',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'ml-auto text-ds-sm text-surface-fg-subtle',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayName = 'MenubarShortcut'\n\nexport type MenubarContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\nexport type MenubarItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>\n\nexport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarPortal,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n}\n"],"mappings":"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"}
+{"version":3,"file":"menubar.js","names":[],"sources":["../../src/ui/menubar.tsx"],"sourcesContent":["'use client'\n\nimport * as MenubarPrimitive from '@primitives/react-menubar'\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal contexts to thread open state ──\n\nconst MenubarSubOpenContext = React.createContext(false)\n\nconst MenubarMenu: React.FC<React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Menu>> = (props) => {\n  // MenubarPrimitive.Menu doesn't expose open/onOpenChange directly.\n  // We derive open from data-state on the trigger via a callback ref approach,\n  // but the cleanest way is to use the Menubar root's value prop.\n  // Since MenubarMenu doesn't have open/onOpenChange, we track via a wrapper\n  // that observes the trigger's data-state.\n  //\n  // Alternative: MenubarPrimitive.Menu has a `value` that the root uses.\n  // We'll use a simpler approach: track open via content mount state.\n  return <MenubarPrimitive.Menu {...props} />\n}\nMenubarMenu.displayName = 'MenubarMenu'\n\n// For Menubar, the Menu doesn't expose open/onOpenChange. Instead, we'll use a\n// different approach: wrap Content to use a local presence state based on data-state.\n// We create a wrapper component that tracks whether content should be shown.\n\nconst MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group\n\nconst MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal\n\nconst MenubarSub: React.FC<React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Sub>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <MenubarSubOpenContext.Provider value={open}>\n      <MenubarPrimitive.Sub open={open} onOpenChange={handleOpenChange} {...props} />\n    </MenubarSubOpenContext.Provider>\n  )\n}\nMenubarSub.displayName = 'MenubarSub'\n\nconst MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup =\n  MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      'flex h-ds-sm-plus items-center space-x-ds-02 rounded-overlay bg-surface-overlay p-ds-02 shadow-raised',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center rounded-control px-ds-04 py-ds-02 text-body-md font-medium outline-hidden transition-colors hover:bg-surface-raised-hover focus-visible:bg-surface-raised-hover data-[state=open]:bg-surface-raised-hover',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto shrink-0\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(MenubarSubOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <MenubarPrimitive.SubContent\n          ref={ref}\n          forceMount\n          asChild\n          {...props}\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ ...springs.snappy, opacity: tweens.fade }}\n            className={cn(\n              'z-popover min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n              className,\n            )}\n          >\n            {children}\n          </motion.div>\n        </MenubarPrimitive.SubContent>\n      )}\n    </AnimatePresence>\n  )\n})\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\n// For MenubarContent, since MenubarMenu doesn't expose open/onOpenChange,\n// we use a wrapper that reads presence from a callback approach.\n// The cleanest solution: use a local state tracker via onCloseAutoFocus/onOpenAutoFocus\n// or simply keep CSS-free and let Radix handle mount/unmount naturally.\n//\n// Since Menubar menus are opened by the Menubar root (which tracks which menu value is open),\n// and MenubarPrimitive.Content already handles mount/unmount, we can use a ref-based approach\n// to detect the data-state attribute. However, the simplest reliable approach is to use\n// a wrapper that detects mount via useEffect.\n\n// MenubarContent uses CSS data-state animations instead of framer-motion because\n// MenubarPrimitive.Menu doesn't expose open/onOpenChange, making AnimatePresence\n// impossible to wire up for exit animations. The popover-in/popover-out keyframes\n// are defined in the tailwind preset and triggered by Radix's data-state attribute.\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = 'start', alignOffset = -4, sideOffset = 8, children, ...props },\n    ref,\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          'z-popover min-w-[12rem] rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n          'data-[state=open]:animate-popover-in data-[state=closed]:animate-popover-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </MenubarPrimitive.Content>\n    </MenubarPrimitive.Portal>\n  ),\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <IconCircle className=\"h-2 w-2 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      'px-ds-03 py-ds-02b text-body-md font-semibold',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'ml-auto text-body-sm text-surface-fg-subtle',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayName = 'MenubarShortcut'\n\nexport type MenubarContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\nexport type MenubarItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>\n\nexport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarPortal,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n}\n"],"mappings":"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"}

package/dist/ui/navigation-menu.js

@@ -23,7 +23,7 @@ var v = f.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ p(i, {
 v.displayName = i.displayName;
 var y = n, b = f.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ m(o, {
 	ref: r,
-	className: u("group inline-flex h-ds-sm-plus w-max items-center justify-center rounded-control bg-transparent px-ds-05 py-ds-03 text-ds-md font-medium transition-colors hover:bg-surface-raised-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none disabled:opacity-action-disabled", e),
+	className: u("group inline-flex h-ds-sm-plus w-max items-center justify-center rounded-control bg-transparent px-ds-05 py-ds-03 text-body-md font-medium transition-colors hover:bg-surface-raised-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none disabled:opacity-action-disabled", e),
 	...n,
 	children: [
 		t,