@brightspot/ui 1.10.0 → 3.0.0

package/dist/tailwind-plugin-tabs.js

@@ -0,0 +1,158 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * NOTE on btu-tab-button carve-out:
+ * `btu-tab-button` is a standalone button primitive, NOT composed from `btu-button-*`.
+ * This is intentional — tabs require a bottom-edge active-state indicator (::after)
+ * and a tab-specific height/padding model that the generic action-button anatomy
+ * cannot express. See `.ai/LESSONS-BUTTON-REUSE.md` §4. Do not "fix" this by
+ * migrating to btu-button; either extend btu-button with a new variant or leave as-is.
+ *
+ * Tabs component styles.
+ *
+ * Class Names:
+ *
+ *  btu-tabs           - Root container
+ *  btu-tabs-xs        - Extra small container padding
+ *  btu-tabs-sm        - Small container padding
+ *  btu-tabs-md        - Medium container padding (default)
+ *  btu-tabs-lg        - Large container padding
+ *  btu-tab            - Individual tab wrapper
+ *  btu-tab-button     - Inner tab button
+ *  btu-tab-button-xs  - Extra small button height/text
+ *  btu-tab-button-sm  - Small button height/text
+ *  btu-tab-button-md  - Medium button height/text (default)
+ *  btu-tab-button-lg  - Large button height/text
+ *  btu-tab-indicator  - Active tab underline indicator
+ *  btu-tabs-menu-mode - Menu variant overflow override
+ *  btu-tab-menu-wrapper - Menu variant wrapper for label and dropdown
+ *  btu-tab-menu-label - Menu variant active tab label
+ *
+ * CSS Custom Properties:
+ *
+ *  --tabs-active-color          - Text and icon color of the active tab (default: gray-700)
+ *  --tabs-active-indicator-color - Color of the active tab underline indicator (default: primary gradient)
+ *  --tabs-border-color          - Bottom border divider color (default: gray-200)
+ *  --tabs-color                 - Text and icon color for all tabs (default: gray-500)
+ *  --tabs-background            - Background color for all tab buttons (default: transparent)
+ *  --tabs-container-background  - Background color of the tabs container (default: theme white)
+ *  --tabs-hover-background      - Background color of a tab on hover (default: gray-100)
+ *  --tabs-hover-color           - Text and icon color of a tab on hover (default: gray-700)
+ *  --tabs-gap                   - Spacing between tabs (default: 1rem)
+ */
+module.exports = plugin(function ({ addComponents, addBase, config, theme }) {
+    const fontSize_xs = config('theme.fontSize.xs')?.[0] ?? '0.75rem';
+    const fontSize_sm = config('theme.fontSize.sm')?.[0] ?? '0.875rem';
+    const fontSize_base = config('theme.fontSize.base')?.[0] ?? '1rem';
+    addBase({
+        '@keyframes btu-tab-draw': {
+            from: { transform: 'scaleX(0)' },
+            to: { transform: 'scaleX(1)' },
+        },
+    });
+    addComponents({
+        '.btu-tabs': {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--tabs-gap, 1rem)',
+            position: 'relative',
+            borderBottom: '1px solid var(--tabs-border-color, oklch(var(--btu-theme-gray-200)))',
+            backgroundColor: 'var(--tabs-container-background, var(--btu-theme-white))',
+            overflowX: 'auto',
+            overflowY: 'clip',
+        },
+        // In menu mode, disable scrolling so the dropdown can extend beyond the container
+        '.btu-tabs-menu-mode': {
+            overflowX: 'visible',
+            overflowY: 'visible',
+        },
+        '.btu-tabs-xs': { paddingInline: '1rem' },
+        '.btu-tabs-sm': { paddingInline: '1rem' },
+        '.btu-tabs-md': { paddingInline: '1.5rem' },
+        '.btu-tabs-lg': { paddingInline: '1.5rem' },
+        '.btu-tab': {
+            display: 'inline-flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            flexShrink: '0',
+        },
+        '.btu-tab-button': {
+            position: 'relative',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '0.5rem',
+            paddingInline: '0.5rem',
+            cursor: 'pointer',
+            whiteSpace: 'nowrap',
+            boxSizing: 'border-box',
+            backgroundColor: 'var(--tabs-background, transparent)',
+            color: 'var(--tabs-color, oklch(var(--btu-theme-gray-500)))',
+            transitionProperty: 'color, background-color',
+            transitionDuration: '150ms',
+            transitionTimingFunction: 'ease',
+            '&:hover:not([aria-disabled="true"])': {
+                backgroundColor: 'var(--tabs-hover-background, oklch(var(--btu-theme-gray-100)))',
+                color: 'var(--tabs-hover-color, oklch(var(--btu-theme-gray-700)))',
+            },
+            '&[aria-selected="true"]:not([aria-disabled="true"])': {
+                color: 'var(--tabs-active-color, oklch(var(--btu-theme-gray-700)))',
+            },
+            '&[aria-disabled="true"]': {
+                color: 'oklch(var(--btu-theme-gray-300))',
+                cursor: 'not-allowed',
+            },
+            '&:focus-visible': {
+                outline: 'none',
+                boxShadow: 'inset 0 0 0 3px oklch(var(--btu-theme-primary-100)), inset 0 0 0 4px oklch(var(--btu-theme-primary-600))',
+            },
+            '@media (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+            },
+        },
+        '.btu-tab-button-xs': {
+            height: '2.25rem',
+            fontSize: fontSize_xs,
+            fontWeight: '400',
+        },
+        '.btu-tab-button-sm': {
+            height: '2.75rem',
+            fontSize: fontSize_sm,
+            fontWeight: '500',
+        },
+        '.btu-tab-button-md': {
+            height: '3.25rem',
+            fontSize: fontSize_sm,
+            fontWeight: '500',
+        },
+        '.btu-tab-button-lg': {
+            height: '3.5rem',
+            fontSize: fontSize_base,
+            fontWeight: '500',
+        },
+        '.btu-tab-indicator': {
+            position: 'absolute',
+            bottom: '0',
+            left: '0',
+            right: '0',
+            height: '0.125rem',
+            background: `var(--tabs-active-indicator-color, ${theme('backgroundImage.primary-gradient')})`,
+            transformOrigin: 'left',
+            animation: 'btu-tab-draw 200ms ease-out',
+            '@media (prefers-reduced-motion: reduce)': {
+                animationDuration: '0.01ms',
+            },
+        },
+        '.btu-tab-menu-wrapper': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+        },
+        '.btu-tab-menu-label': {
+            fontSize: fontSize_sm,
+            fontWeight: '500',
+            color: 'var(--tabs-active-color, oklch(var(--btu-theme-gray-700)))',
+            whiteSpace: 'nowrap',
+        },
+    });
+});
+//# sourceMappingURL=tailwind-plugin-tabs.js.map

package/dist/tailwind-plugin-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-plugin-tabs.js","sourceRoot":"","sources":["../src/tailwind-plugin-tabs.ts"],"names":[],"mappings":"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"}

package/dist/tailwind-plugin-tabs.ts

@@ -0,0 +1,169 @@
+import plugin from 'tailwindcss/plugin'
+declare let module: any
+
+/**
+ * NOTE on btu-tab-button carve-out:
+ * `btu-tab-button` is a standalone button primitive, NOT composed from `btu-button-*`.
+ * This is intentional — tabs require a bottom-edge active-state indicator (::after)
+ * and a tab-specific height/padding model that the generic action-button anatomy
+ * cannot express. See `.ai/LESSONS-BUTTON-REUSE.md` §4. Do not "fix" this by
+ * migrating to btu-button; either extend btu-button with a new variant or leave as-is.
+ *
+ * Tabs component styles.
+ *
+ * Class Names:
+ *
+ *  btu-tabs           - Root container
+ *  btu-tabs-xs        - Extra small container padding
+ *  btu-tabs-sm        - Small container padding
+ *  btu-tabs-md        - Medium container padding (default)
+ *  btu-tabs-lg        - Large container padding
+ *  btu-tab            - Individual tab wrapper
+ *  btu-tab-button     - Inner tab button
+ *  btu-tab-button-xs  - Extra small button height/text
+ *  btu-tab-button-sm  - Small button height/text
+ *  btu-tab-button-md  - Medium button height/text (default)
+ *  btu-tab-button-lg  - Large button height/text
+ *  btu-tab-indicator  - Active tab underline indicator
+ *  btu-tabs-menu-mode - Menu variant overflow override
+ *  btu-tab-menu-wrapper - Menu variant wrapper for label and dropdown
+ *  btu-tab-menu-label - Menu variant active tab label
+ *
+ * CSS Custom Properties:
+ *
+ *  --tabs-active-color          - Text and icon color of the active tab (default: gray-700)
+ *  --tabs-active-indicator-color - Color of the active tab underline indicator (default: primary gradient)
+ *  --tabs-border-color          - Bottom border divider color (default: gray-200)
+ *  --tabs-color                 - Text and icon color for all tabs (default: gray-500)
+ *  --tabs-background            - Background color for all tab buttons (default: transparent)
+ *  --tabs-container-background  - Background color of the tabs container (default: theme white)
+ *  --tabs-hover-background      - Background color of a tab on hover (default: gray-100)
+ *  --tabs-hover-color           - Text and icon color of a tab on hover (default: gray-700)
+ *  --tabs-gap                   - Spacing between tabs (default: 1rem)
+ */
+
+module.exports = plugin(function ({ addComponents, addBase, config, theme }) {
+  const fontSize_xs = config('theme.fontSize.xs')?.[0] ?? '0.75rem'
+  const fontSize_sm = config('theme.fontSize.sm')?.[0] ?? '0.875rem'
+  const fontSize_base = config('theme.fontSize.base')?.[0] ?? '1rem'
+
+  addBase({
+    '@keyframes btu-tab-draw': {
+      from: { transform: 'scaleX(0)' },
+      to: { transform: 'scaleX(1)' },
+    },
+  })
+
+  addComponents({
+    '.btu-tabs': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 'var(--tabs-gap, 1rem)',
+      position: 'relative',
+      borderBottom: '1px solid var(--tabs-border-color, oklch(var(--btu-theme-gray-200)))',
+      backgroundColor: 'var(--tabs-container-background, var(--btu-theme-white))',
+      overflowX: 'auto',
+      overflowY: 'clip',
+    },
+    // In menu mode, disable scrolling so the dropdown can extend beyond the container
+    '.btu-tabs-menu-mode': {
+      overflowX: 'visible',
+      overflowY: 'visible',
+    },
+    '.btu-tabs-xs': { paddingInline: '1rem' },
+    '.btu-tabs-sm': { paddingInline: '1rem' },
+    '.btu-tabs-md': { paddingInline: '1.5rem' },
+    '.btu-tabs-lg': { paddingInline: '1.5rem' },
+
+    '.btu-tab': {
+      display: 'inline-flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      flexShrink: '0',
+    },
+
+    '.btu-tab-button': {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.5rem',
+      paddingInline: '0.5rem',
+      cursor: 'pointer',
+      whiteSpace: 'nowrap',
+      boxSizing: 'border-box',
+      backgroundColor: 'var(--tabs-background, transparent)',
+      color: 'var(--tabs-color, oklch(var(--btu-theme-gray-500)))',
+      transitionProperty: 'color, background-color',
+      transitionDuration: '150ms',
+      transitionTimingFunction: 'ease',
+      '&:hover:not([aria-disabled="true"])': {
+        backgroundColor: 'var(--tabs-hover-background, oklch(var(--btu-theme-gray-100)))',
+        color: 'var(--tabs-hover-color, oklch(var(--btu-theme-gray-700)))',
+      },
+      '&[aria-selected="true"]:not([aria-disabled="true"])': {
+        color: 'var(--tabs-active-color, oklch(var(--btu-theme-gray-700)))',
+      },
+      '&[aria-disabled="true"]': {
+        color: 'oklch(var(--btu-theme-gray-300))',
+        cursor: 'not-allowed',
+      },
+      '&:focus-visible': {
+        outline: 'none',
+        boxShadow:
+          'inset 0 0 0 3px oklch(var(--btu-theme-primary-100)), inset 0 0 0 4px oklch(var(--btu-theme-primary-600))',
+      },
+      '@media (prefers-reduced-motion: reduce)': {
+        transitionDuration: '0.01ms',
+      },
+    },
+
+    '.btu-tab-button-xs': {
+      height: '2.25rem',
+      fontSize: fontSize_xs,
+      fontWeight: '400',
+    },
+    '.btu-tab-button-sm': {
+      height: '2.75rem',
+      fontSize: fontSize_sm,
+      fontWeight: '500',
+    },
+    '.btu-tab-button-md': {
+      height: '3.25rem',
+      fontSize: fontSize_sm,
+      fontWeight: '500',
+    },
+    '.btu-tab-button-lg': {
+      height: '3.5rem',
+      fontSize: fontSize_base,
+      fontWeight: '500',
+    },
+
+    '.btu-tab-indicator': {
+      position: 'absolute',
+      bottom: '0',
+      left: '0',
+      right: '0',
+      height: '0.125rem',
+      background: `var(--tabs-active-indicator-color, ${theme('backgroundImage.primary-gradient')})`,
+      transformOrigin: 'left',
+      animation: 'btu-tab-draw 200ms ease-out',
+      '@media (prefers-reduced-motion: reduce)': {
+        animationDuration: '0.01ms',
+      },
+    },
+
+    '.btu-tab-menu-wrapper': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '0.5rem',
+    },
+
+    '.btu-tab-menu-label': {
+      fontSize: fontSize_sm,
+      fontWeight: '500',
+      color: 'var(--tabs-active-color, oklch(var(--btu-theme-gray-700)))',
+      whiteSpace: 'nowrap',
+    },
+  })
+})

package/dist/tailwind-plugin-upload.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tailwind-plugin-upload.d.ts.map

package/dist/tailwind-plugin-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-plugin-upload.d.ts","sourceRoot":"","sources":["../src/tailwind-plugin-upload.ts"],"names":[],"mappings":""}

package/dist/tailwind-plugin-upload.js

@@ -0,0 +1,322 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Upload component styling.
+ *
+ * Class Names:
+ *
+ *  btu-upload - Base upload container
+ *  btu-upload-dropzone - Drop zone area
+ *  btu-upload-dropzone-icon - Drop zone icon circle
+ *  btu-upload-dropzone-prompt - Prompt layer wrap hosting text + drag overlay
+ *  btu-upload-dropzone-text - Drop zone text (resting prompt)
+ *  btu-upload-dropzone-drag-message - Drag-over message overlay (absolute, fades in on dragover)
+ *  btu-upload-dropzone-action - Drop zone "select" link
+ *  btu-upload-dropzone-count - Corner count pill (visible only when max-files is finite and > 1)
+ *  btu-upload-dropzone-dragover - Drag-over state (dashed border + crossfade)
+ *  btu-upload-dropzone-disabled - Disabled drop zone
+ *  btu-upload-list - File list container
+ *  btu-upload-item - Individual file item
+ *  btu-upload-item-active - Active/uploading item
+ *  btu-upload-item-complete - Completed upload item
+ *  btu-upload-item-error - Error state item
+ *  btu-upload-item-icon - File type icon (uses btu-icon emphasize)
+ *  btu-upload-item-icon-error - Error variant icon color
+ *  btu-upload-item-info - File info container
+ *  btu-upload-item-name - File name text
+ *  btu-upload-item-size - File size text
+ *  btu-upload-item-progress - Progress bar container
+ *  btu-upload-item-percent - Progress percentage text
+ *  btu-upload-item-check - Success color override for the completion btu-icon (uses emphasize="pulse")
+ *  btu-upload-item-remove - Remove button positioning (uses btu-icon-button)
+ *  btu-upload-item-error-text - Error message text
+ *  btu-upload-item-error-filename - Error state filename
+ *  btu-upload-item-retry - Retry link
+ *
+ * @cssprop --upload-dropzone-bg - Drop zone background color
+ * @cssprop --upload-dropzone-border-color - Drop zone border color
+ * @cssprop --upload-dropzone-border-radius - Drop zone border radius
+ * @cssprop --upload-dropzone-hover-bg - Drop zone hover background (hover default: gray-50; drag-over default: primary-25)
+ * @cssprop --upload-dropzone-hover-border-color - Drop zone hover border
+ * @cssprop --upload-dropzone-focus-ring-color - Drop zone focus ring
+ * @cssprop --upload-item-bg - Item background
+ * @cssprop --upload-item-border-color - Item border color
+ * @cssprop --upload-item-active-border-color - Item active/in-progress border
+ * @cssprop --upload-item-complete-border-color - Item completed border
+ * @cssprop --upload-item-error-bg - Item error background
+ * @cssprop --upload-item-error-border-color - Item error border
+ */
+module.exports = plugin(function ({ addComponents, theme, config }) {
+    const fontSizeSm = config('theme.fontSize.sm')?.[0] ?? '0.875rem';
+    const lineHeightSm = config('theme.fontSize.sm')?.[1] ?? '1.25rem';
+    const fontSizeXs = config('theme.fontSize.xs')?.[0] ?? '0.75rem';
+    const lineHeightXs = config('theme.fontSize.xs')?.[1] ?? '1.125rem';
+    const components = {
+        /* ─── Upload Container ─── */
+        '.btu-upload': {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.75rem',
+            width: '100%',
+        },
+        /* ─── Drop Zone ─── */
+        '.btu-upload-dropzone': {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '0.5rem',
+            padding: '16px 24px',
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderColor: 'var(--upload-dropzone-border-color, oklch(var(--btu-theme-gray-300)))',
+            borderRadius: `var(--upload-dropzone-border-radius, ${theme('borderRadius.lg')})`,
+            backgroundColor: 'var(--upload-dropzone-bg, oklch(var(--btu-theme-gray-25)))',
+            cursor: 'pointer',
+            transition: 'background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease',
+            textAlign: 'center',
+            '@media (prefers-reduced-motion: reduce)': {
+                transition: 'background-color 0.01ms ease, border-color 0.01ms ease, box-shadow 0.01ms ease',
+            },
+            '&:hover': {
+                backgroundColor: 'var(--upload-dropzone-hover-bg, oklch(var(--btu-theme-gray-50)))',
+                borderColor: 'var(--upload-dropzone-hover-border-color, oklch(var(--btu-theme-primary-300)))',
+            },
+            '&:focus-within': {
+                boxShadow: '0 0 0 4px var(--upload-dropzone-focus-ring-color, oklch(var(--btu-theme-primary-100)))',
+                borderColor: 'var(--upload-dropzone-hover-border-color, oklch(var(--btu-theme-primary-300)))',
+            },
+            /* High-contrast */
+            ':root.is-moreContrast &': {
+                borderColor: 'var(--upload-dropzone-border-color, oklch(var(--btu-theme-gray-400)))',
+            },
+            '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+                ':root:not(.is-normalContrast) &': {
+                    borderColor: 'var(--upload-dropzone-border-color, oklch(var(--btu-theme-gray-400)))',
+                },
+            },
+        },
+        '.btu-upload-dropzone-icon': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '2.5rem',
+            height: '2.5rem',
+            borderRadius: '9999px',
+            backgroundColor: 'oklch(var(--btu-theme-gray-100))',
+            color: 'oklch(var(--btu-theme-gray-500))',
+            transition: 'transform 150ms ease',
+            '@media (prefers-reduced-motion: reduce)': {
+                transition: 'transform 0.01ms ease',
+            },
+        },
+        /* Prompt layer wrap — hosts both the resting text and the drag-over overlay. */
+        '.btu-upload-dropzone-prompt': {
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+        },
+        '.btu-upload-dropzone-text': {
+            fontSize: fontSizeSm,
+            lineHeight: lineHeightSm,
+            color: 'oklch(var(--btu-theme-gray-500))',
+            transition: 'opacity 150ms ease',
+            '@media (prefers-reduced-motion: reduce)': {
+                transition: 'opacity 0.01ms ease',
+            },
+        },
+        /* Drag-over message — absolutely positioned overlay so the dropzone height stays constant. */
+        '.btu-upload-dropzone-drag-message': {
+            position: 'absolute',
+            inset: '0',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: fontSizeSm,
+            lineHeight: lineHeightSm,
+            color: 'oklch(var(--btu-theme-gray-500))',
+            opacity: '0',
+            pointerEvents: 'none',
+            transition: 'opacity 150ms ease',
+            '@media (prefers-reduced-motion: reduce)': {
+                transition: 'opacity 0.01ms ease',
+            },
+        },
+        '.btu-upload-dropzone-action': {
+            // Button reset — the element is a <button> so default UA chrome must be cleared.
+            background: 'transparent',
+            border: '0',
+            padding: '0',
+            font: 'inherit',
+            color: 'oklch(var(--btu-theme-primary-600))',
+            fontWeight: '600',
+            cursor: 'pointer',
+            textDecoration: 'none',
+            '&:hover': {
+                textDecoration: 'underline',
+            },
+            '&:disabled': {
+                cursor: 'not-allowed',
+                opacity: '0.6',
+            },
+        },
+        /* Corner count pill — shown when max-files is finite and > 1. */
+        '.btu-upload-dropzone-count': {
+            position: 'absolute',
+            top: '0.5rem',
+            right: '0.5rem',
+            padding: '0.125rem 0.5rem',
+            borderRadius: '9999px',
+            fontSize: fontSizeXs,
+            lineHeight: lineHeightXs,
+            fontWeight: '500',
+            backgroundColor: 'oklch(var(--btu-theme-gray-100))',
+            color: 'oklch(var(--btu-theme-gray-700))',
+            pointerEvents: 'none',
+        },
+        /* Drag-over state — dashed border + crossfade overlay. */
+        '.btu-upload-dropzone-dragover': {
+            borderStyle: 'dashed',
+            borderWidth: '2px',
+            borderColor: 'var(--upload-dropzone-hover-border-color, oklch(var(--btu-theme-primary-400)))',
+            backgroundColor: 'var(--upload-dropzone-hover-bg, oklch(var(--btu-theme-primary-25)))',
+            '& .btu-upload-dropzone-text': {
+                opacity: '0',
+            },
+            '& .btu-upload-dropzone-drag-message': {
+                opacity: '1',
+            },
+            '& .btu-upload-dropzone-icon': {
+                transform: 'scale(1.15)',
+            },
+        },
+        /* Disabled state */
+        '.btu-upload-dropzone-disabled': {
+            opacity: '0.5',
+            pointerEvents: 'none',
+            cursor: 'default',
+            backgroundColor: 'var(--upload-dropzone-bg, oklch(var(--btu-theme-gray-50)))',
+            borderColor: 'var(--upload-dropzone-border-color, oklch(var(--btu-theme-gray-200)))',
+        },
+        /* ─── File List ─── */
+        '.btu-upload-list': {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5rem',
+            margin: '0',
+            padding: '0',
+            listStyle: 'none',
+        },
+        /* ─── Upload Item ─── */
+        '.btu-upload-item': {
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: '0.75rem',
+            padding: '0.75rem 1rem',
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderColor: 'var(--upload-item-border-color, oklch(var(--btu-theme-gray-200)))',
+            borderRadius: theme('borderRadius.lg'),
+            backgroundColor: 'var(--upload-item-bg, var(--btu-theme-white))',
+        },
+        /* Active/uploading state */
+        '.btu-upload-item-active': {
+            borderColor: 'var(--upload-item-active-border-color, oklch(var(--btu-theme-gray-300)))',
+        },
+        /* Complete state */
+        '.btu-upload-item-complete': {
+            borderColor: 'var(--upload-item-complete-border-color, oklch(var(--btu-theme-primary-500)))',
+        },
+        /* Error state */
+        '.btu-upload-item-error': {
+            backgroundColor: 'var(--upload-item-error-bg, oklch(var(--btu-theme-error-25)))',
+            borderColor: 'var(--upload-item-error-border-color, oklch(var(--btu-theme-error-300)))',
+        },
+        /* ─── Icon (uses btu-icon emphasize for tonal circle) ─── */
+        '.btu-upload-item-icon': {
+            flexShrink: '0',
+            color: 'oklch(var(--btu-theme-primary-600))',
+        },
+        '.btu-upload-item-icon-error': {
+            color: 'oklch(var(--btu-theme-error-600))',
+        },
+        /* ─── Item Info ─── */
+        '.btu-upload-item-info': {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: '1',
+            minWidth: '0',
+            gap: '0.25rem',
+        },
+        '.btu-upload-item-name': {
+            fontSize: fontSizeSm,
+            lineHeight: lineHeightSm,
+            fontWeight: '500',
+            color: 'oklch(var(--btu-theme-gray-700))',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        },
+        '.btu-upload-item-size': {
+            fontSize: fontSizeXs,
+            lineHeight: lineHeightXs,
+            color: 'oklch(var(--btu-theme-gray-500))',
+        },
+        '.btu-upload-item-progress': {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+            width: '100%',
+        },
+        '.btu-upload-item-percent': {
+            fontSize: fontSizeXs,
+            lineHeight: lineHeightXs,
+            color: 'oklch(var(--btu-theme-gray-500))',
+            flexShrink: '0',
+            minWidth: '2rem',
+            textAlign: 'right',
+        },
+        /* Double-class selector beats .btu-icon-emphasize's default primary color; flex-shrink: 0 keeps the circle round inside the progress row's flex layout. */
+        '.btu-icon-emphasize.btu-upload-item-check': {
+            flexShrink: '0',
+            color: 'oklch(var(--btu-theme-success-600))',
+        },
+        /* ─── Remove Button (uses btu-icon-button destructive) ─── */
+        '.btu-upload-item-remove': {
+            alignSelf: 'flex-start',
+            flexShrink: '0',
+        },
+        /* ─── Error Text ─── */
+        '.btu-upload-item-error-text': {
+            fontSize: fontSizeSm,
+            lineHeight: lineHeightSm,
+            color: 'oklch(var(--btu-theme-error-600))',
+        },
+        '.btu-upload-item-error-filename': {
+            fontSize: fontSizeXs,
+            lineHeight: lineHeightXs,
+            color: 'oklch(var(--btu-theme-gray-500))',
+        },
+        /* ─── Retry Link ─── */
+        '.btu-upload-item-retry': {
+            fontSize: fontSizeSm,
+            lineHeight: lineHeightSm,
+            fontWeight: '600',
+            color: 'oklch(var(--btu-theme-error-600))',
+            cursor: 'pointer',
+            textDecoration: 'none',
+            textAlign: 'left',
+            alignSelf: 'flex-start',
+            background: 'none',
+            border: 'none',
+            padding: '0',
+            '&:hover': {
+                textDecoration: 'underline',
+            },
+        },
+    };
+    addComponents(components);
+});
+//# sourceMappingURL=tailwind-plugin-upload.js.map

package/dist/tailwind-plugin-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-plugin-upload.js","sourceRoot":"","sources":["../src/tailwind-plugin-upload.ts"],"names":[],"mappings":"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"}