@brightspot/ui 1.11.0 → 3.0.0

package/dist/tailwind-plugin-checkbox.js

@@ -0,0 +1,246 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Checkbox component — a styled checkbox with label and description support.
+ *
+ * Class Names:
+ *
+ *  btu-checkbox              - Wrapper element
+ *  btu-checkbox-input        - The hidden <input type="checkbox">
+ *  btu-checkbox-box          - The visible checkbox square
+ *  btu-checkbox-icon         - Icon element inside the box (check or minus)
+ *  btu-checkbox-text         - Optional container for label, description, and error (flex column)
+ *  btu-checkbox-label        - Primary label text
+ *  btu-checkbox-description  - Secondary description text
+ *  btu-checkbox-error        - Error message text
+ *  btu-checkbox-md           - Medium size variant (20px, default is sm with no modifier)
+ *  btu-checkbox-invalid      - Error state modifier
+ *
+ * CSS Custom Properties:
+ *
+ *  --checkbox-color-primary   - Background and border when checked/indeterminate  (default: oklch(primary-700))
+ *  --checkbox-color-border    - Border color in unchecked state                   (default: oklch(gray-300))
+ *  --checkbox-color-error     - Border/text color in error                        (default: oklch(error-600))
+ *  --checkbox-border-radius   - Corner rounding                                   (default: 4px)
+ *  --checkbox-label-spacing   - Gap between box and label text                    (default: 0.75rem)
+ *
+ * Internal sizing (not intended for consumer override):
+ *
+ *  --checkbox-box-size        - Width/height of the checkbox square (set by size variant)
+ *  --checkbox-icon-size       - Width/height of the icon inside the box (set by size variant)
+ *
+ * Rendered DOM (the component generates this internally; consumers only write <btu-checkbox ...>):
+ *
+ *  <btu-checkbox>
+ *    <input type="checkbox" class="btu-checkbox-input">
+ *    <span class="btu-checkbox-box">
+ *      <btu-icon class="btu-checkbox-icon" symbol="check" style="--icon-size: var(--checkbox-icon-size)"></btu-icon>
+ *    </span>
+ *    <span class="btu-checkbox-text">
+ *      <span class="btu-checkbox-label">Remember me</span>
+ *      <span class="btu-checkbox-description">Save your login details</span>
+ *      <span class="btu-checkbox-error">Error message here</span>
+ *    </span>
+ *  </btu-checkbox>
+ */
+module.exports = plugin(function ({ addComponents, config }) {
+    const components = {
+        // -------------------------------------------------------------------------
+        // Wrapper
+        // -------------------------------------------------------------------------
+        '.btu-checkbox': {
+            '--checkbox-box-size': '1rem',
+            '--checkbox-icon-size': '0.75rem',
+            display: 'inline-flex',
+            alignItems: 'flex-start',
+            gap: 'var(--checkbox-label-spacing, 0.75rem)',
+            cursor: 'pointer',
+            userSelect: 'none',
+        },
+        // -------------------------------------------------------------------------
+        // Hidden input (sr-only pattern)
+        // -------------------------------------------------------------------------
+        '.btu-checkbox-input': {
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            padding: '0',
+            margin: '-1px',
+            overflow: 'hidden',
+            clipPath: 'inset(50%)',
+            whiteSpace: 'nowrap',
+            borderWidth: '0',
+        },
+        // -------------------------------------------------------------------------
+        // Visible checkbox box
+        // -------------------------------------------------------------------------
+        '.btu-checkbox-box': {
+            flexShrink: '0',
+            position: 'relative',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginTop: '0.125rem',
+            width: 'var(--checkbox-box-size)',
+            height: 'var(--checkbox-box-size)',
+            borderRadius: 'var(--checkbox-border-radius, 4px)',
+            border: '1px solid var(--checkbox-color-border, oklch(var(--btu-theme-gray-300)))',
+            background: 'var(--btu-theme-white)',
+            transition: 'transform 200ms cubic-bezier(0.12, 0.32, 0.54, 2), background 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out',
+        },
+        // -------------------------------------------------------------------------
+        // Icon inside the box
+        // -------------------------------------------------------------------------
+        '.btu-checkbox-icon': {
+            opacity: '0',
+            transform: 'scale(0.5)',
+            color: 'var(--btu-theme-white)',
+            pointerEvents: 'none',
+            transition: 'transform 150ms ease-in, opacity 150ms ease-in',
+        },
+        // -------------------------------------------------------------------------
+        // Checked / indeterminate state
+        // -------------------------------------------------------------------------
+        '.btu-checkbox-input:is(:checked, :indeterminate) ~ .btu-checkbox-box': {
+            background: 'var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700)))',
+            borderColor: 'var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700)))',
+        },
+        '.btu-checkbox-input:is(:checked, :indeterminate) ~ .btu-checkbox-box .btu-checkbox-icon': {
+            opacity: '1',
+            transform: 'scale(1)',
+            transition: 'transform 200ms cubic-bezier(0.12, 0.32, 0.54, 2), opacity 200ms cubic-bezier(0.12, 0.32, 0.54, 2)',
+        },
+        // -------------------------------------------------------------------------
+        // Hover state
+        // -------------------------------------------------------------------------
+        '.btu-checkbox:hover .btu-checkbox-input:not(:disabled) ~ .btu-checkbox-box': {
+            background: 'color-mix(in oklch, var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700))), white 92%)',
+            borderColor: 'color-mix(in oklch, var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700))), black 15%)',
+        },
+        '.btu-checkbox:hover .btu-checkbox-input:not(:disabled):is(:checked, :indeterminate) ~ .btu-checkbox-box': {
+            background: 'color-mix(in oklch, var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700))), black 15%)',
+            borderColor: 'color-mix(in oklch, var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700))), black 15%)',
+        },
+        // -------------------------------------------------------------------------
+        // Active press — box scale bounce (snap in fast, spring back with bounce bezier)
+        // -------------------------------------------------------------------------
+        '.btu-checkbox:active .btu-checkbox-input:not(:disabled, :checked, :indeterminate) ~ .btu-checkbox-box': {
+            transform: 'scale(0.9)',
+            transitionDuration: '0.05s',
+        },
+        '.btu-checkbox:active .btu-checkbox-input:not(:disabled):is(:checked, :indeterminate) ~ .btu-checkbox-box': {
+            transform: 'scale(1.1)',
+            transitionDuration: '0.05s',
+        },
+        // -------------------------------------------------------------------------
+        // Focus visible — ring on the box
+        // -------------------------------------------------------------------------
+        '.btu-checkbox-input:focus-visible ~ .btu-checkbox-box': {
+            borderColor: 'oklch(var(--btu-theme-primary-600))',
+            boxShadow: '0px 0px 0px 4px oklch(var(--btu-theme-primary-100))',
+        },
+        // -------------------------------------------------------------------------
+        // Disabled state
+        // -------------------------------------------------------------------------
+        '.btu-checkbox-input:disabled ~ .btu-checkbox-box': {
+            background: 'oklch(var(--btu-theme-gray-100))',
+            borderColor: 'oklch(var(--btu-theme-gray-300))',
+            pointerEvents: 'none',
+        },
+        '.btu-checkbox-input:disabled:is(:checked, :indeterminate) ~ .btu-checkbox-box': {
+            background: 'oklch(var(--btu-theme-gray-100))',
+            borderColor: 'oklch(var(--btu-theme-gray-300))',
+        },
+        '.btu-checkbox-input:disabled:is(:checked, :indeterminate) ~ .btu-checkbox-box .btu-checkbox-icon': {
+            color: 'oklch(var(--btu-theme-gray-300))',
+        },
+        '.btu-checkbox-input:disabled ~ .btu-checkbox-text': {
+            color: 'oklch(var(--btu-theme-gray-300))',
+        },
+        '.btu-checkbox:has(.btu-checkbox-input:disabled)': {
+            pointerEvents: 'none',
+        },
+        // -------------------------------------------------------------------------
+        // Invalid / error state
+        // -------------------------------------------------------------------------
+        '.btu-checkbox-invalid .btu-checkbox-box': {
+            borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+        },
+        '.btu-checkbox-invalid .btu-checkbox-input:is(:checked, :indeterminate) ~ .btu-checkbox-box': {
+            borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+        },
+        '.btu-checkbox-invalid .btu-checkbox-label': {
+            color: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+        },
+        '.btu-checkbox-invalid:hover .btu-checkbox-input:not(:disabled, :checked, :indeterminate) ~ .btu-checkbox-box': {
+            background: 'var(--btu-theme-white)',
+            borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+        },
+        '.btu-checkbox-invalid:hover .btu-checkbox-input:not(:disabled):is(:checked, :indeterminate) ~ .btu-checkbox-box': {
+            borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+        },
+        '.btu-checkbox-invalid .btu-checkbox-input:focus-visible ~ .btu-checkbox-box': {
+            borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+        },
+        // -------------------------------------------------------------------------
+        // Text elements
+        // -------------------------------------------------------------------------
+        '.btu-checkbox-text': {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.125rem',
+        },
+        '.btu-checkbox-label': {
+            fontSize: config('theme.fontSize.sm')?.[0] ?? '0.875rem',
+            lineHeight: config('theme.fontSize.sm')?.[1] ?? '1.25rem',
+            fontWeight: '500',
+            color: 'oklch(var(--btu-theme-gray-700))',
+        },
+        '.btu-checkbox-description': {
+            fontSize: config('theme.fontSize.xs')?.[0] ?? '0.75rem',
+            lineHeight: config('theme.fontSize.xs')?.[1] ?? '1.125rem',
+            color: 'oklch(var(--btu-theme-gray-500))',
+        },
+        '.btu-checkbox-error': {
+            fontSize: config('theme.fontSize.xs')?.[0] ?? '0.75rem',
+            lineHeight: config('theme.fontSize.xs')?.[1] ?? '1.125rem',
+            color: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+        },
+        // -------------------------------------------------------------------------
+        // Size variants
+        // -------------------------------------------------------------------------
+        // sm is the default — no modifier class needed, base dimensions apply
+        '.btu-checkbox-md': {
+            '--checkbox-box-size': '1.25rem',
+            '--checkbox-icon-size': '0.875rem',
+        },
+        '.btu-checkbox-md .btu-checkbox-label': {
+            fontSize: config('theme.fontSize.base')?.[0] ?? '1rem',
+            lineHeight: config('theme.fontSize.base')?.[1] ?? '1.5rem',
+        },
+        '.btu-checkbox-md .btu-checkbox-description, .btu-checkbox-md .btu-checkbox-error': {
+            fontSize: config('theme.fontSize.sm')?.[0] ?? '0.875rem',
+            lineHeight: config('theme.fontSize.sm')?.[1] ?? '1.25rem',
+        },
+        // -------------------------------------------------------------------------
+        // Reduced motion
+        // -------------------------------------------------------------------------
+        '@media (prefers-reduced-motion: reduce)': {
+            '.btu-checkbox-box': {
+                transition: 'background 0.01ms ease, border-color 0.01ms ease, box-shadow 0.01ms ease, transform 0.01ms ease',
+            },
+            '.btu-checkbox:active .btu-checkbox-input:not(:disabled) ~ .btu-checkbox-box': {
+                transform: 'scale(1)',
+            },
+            '.btu-checkbox-icon': {
+                transition: 'opacity 0.01ms ease',
+                transform: 'scale(1)',
+            },
+            '.btu-checkbox-input:is(:checked, :indeterminate) ~ .btu-checkbox-box .btu-checkbox-icon': {
+                transform: 'scale(1)',
+                transition: 'opacity 0.01ms ease',
+            },
+        },
+    };
+    addComponents(components);
+});
+//# sourceMappingURL=tailwind-plugin-checkbox.js.map

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

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

package/dist/tailwind-plugin-checkbox.ts

@@ -0,0 +1,281 @@
+import plugin from 'tailwindcss/plugin'
+import type { CSSRuleObject } from 'tailwindcss/types/config'
+declare let module: any
+
+/**
+ * Checkbox component — a styled checkbox with label and description support.
+ *
+ * Class Names:
+ *
+ *  btu-checkbox              - Wrapper element
+ *  btu-checkbox-input        - The hidden <input type="checkbox">
+ *  btu-checkbox-box          - The visible checkbox square
+ *  btu-checkbox-icon         - Icon element inside the box (check or minus)
+ *  btu-checkbox-text         - Optional container for label, description, and error (flex column)
+ *  btu-checkbox-label        - Primary label text
+ *  btu-checkbox-description  - Secondary description text
+ *  btu-checkbox-error        - Error message text
+ *  btu-checkbox-md           - Medium size variant (20px, default is sm with no modifier)
+ *  btu-checkbox-invalid      - Error state modifier
+ *
+ * CSS Custom Properties:
+ *
+ *  --checkbox-color-primary   - Background and border when checked/indeterminate  (default: oklch(primary-700))
+ *  --checkbox-color-border    - Border color in unchecked state                   (default: oklch(gray-300))
+ *  --checkbox-color-error     - Border/text color in error                        (default: oklch(error-600))
+ *  --checkbox-border-radius   - Corner rounding                                   (default: 4px)
+ *  --checkbox-label-spacing   - Gap between box and label text                    (default: 0.75rem)
+ *
+ * Internal sizing (not intended for consumer override):
+ *
+ *  --checkbox-box-size        - Width/height of the checkbox square (set by size variant)
+ *  --checkbox-icon-size       - Width/height of the icon inside the box (set by size variant)
+ *
+ * Rendered DOM (the component generates this internally; consumers only write <btu-checkbox ...>):
+ *
+ *  <btu-checkbox>
+ *    <input type="checkbox" class="btu-checkbox-input">
+ *    <span class="btu-checkbox-box">
+ *      <btu-icon class="btu-checkbox-icon" symbol="check" style="--icon-size: var(--checkbox-icon-size)"></btu-icon>
+ *    </span>
+ *    <span class="btu-checkbox-text">
+ *      <span class="btu-checkbox-label">Remember me</span>
+ *      <span class="btu-checkbox-description">Save your login details</span>
+ *      <span class="btu-checkbox-error">Error message here</span>
+ *    </span>
+ *  </btu-checkbox>
+ */
+
+module.exports = plugin(function ({ addComponents, config }) {
+  const components: CSSRuleObject = {
+    // -------------------------------------------------------------------------
+    // Wrapper
+    // -------------------------------------------------------------------------
+    '.btu-checkbox': {
+      '--checkbox-box-size': '1rem',
+      '--checkbox-icon-size': '0.75rem',
+      display: 'inline-flex',
+      alignItems: 'flex-start',
+      gap: 'var(--checkbox-label-spacing, 0.75rem)',
+      cursor: 'pointer',
+      userSelect: 'none',
+    },
+
+    // -------------------------------------------------------------------------
+    // Hidden input (sr-only pattern)
+    // -------------------------------------------------------------------------
+    '.btu-checkbox-input': {
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: '0',
+      margin: '-1px',
+      overflow: 'hidden',
+      clipPath: 'inset(50%)',
+      whiteSpace: 'nowrap',
+      borderWidth: '0',
+    },
+
+    // -------------------------------------------------------------------------
+    // Visible checkbox box
+    // -------------------------------------------------------------------------
+    '.btu-checkbox-box': {
+      flexShrink: '0',
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: '0.125rem',
+      width: 'var(--checkbox-box-size)',
+      height: 'var(--checkbox-box-size)',
+      borderRadius: 'var(--checkbox-border-radius, 4px)',
+      border: '1px solid var(--checkbox-color-border, oklch(var(--btu-theme-gray-300)))',
+      background: 'var(--btu-theme-white)',
+      transition:
+        'transform 200ms cubic-bezier(0.12, 0.32, 0.54, 2), background 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out',
+    },
+
+    // -------------------------------------------------------------------------
+    // Icon inside the box
+    // -------------------------------------------------------------------------
+    '.btu-checkbox-icon': {
+      opacity: '0',
+      transform: 'scale(0.5)',
+      color: 'var(--btu-theme-white)',
+      pointerEvents: 'none',
+      transition: 'transform 150ms ease-in, opacity 150ms ease-in',
+    },
+
+    // -------------------------------------------------------------------------
+    // Checked / indeterminate state
+    // -------------------------------------------------------------------------
+    '.btu-checkbox-input:is(:checked, :indeterminate) ~ .btu-checkbox-box': {
+      background: 'var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700)))',
+      borderColor: 'var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700)))',
+    },
+
+    '.btu-checkbox-input:is(:checked, :indeterminate) ~ .btu-checkbox-box .btu-checkbox-icon': {
+      opacity: '1',
+      transform: 'scale(1)',
+      transition: 'transform 200ms cubic-bezier(0.12, 0.32, 0.54, 2), opacity 200ms cubic-bezier(0.12, 0.32, 0.54, 2)',
+    },
+
+    // -------------------------------------------------------------------------
+    // Hover state
+    // -------------------------------------------------------------------------
+    '.btu-checkbox:hover .btu-checkbox-input:not(:disabled) ~ .btu-checkbox-box': {
+      background: 'color-mix(in oklch, var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700))), white 92%)',
+      borderColor: 'color-mix(in oklch, var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700))), black 15%)',
+    },
+
+    '.btu-checkbox:hover .btu-checkbox-input:not(:disabled):is(:checked, :indeterminate) ~ .btu-checkbox-box': {
+      background: 'color-mix(in oklch, var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700))), black 15%)',
+      borderColor: 'color-mix(in oklch, var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700))), black 15%)',
+    },
+
+    // -------------------------------------------------------------------------
+    // Active press — box scale bounce (snap in fast, spring back with bounce bezier)
+    // -------------------------------------------------------------------------
+    '.btu-checkbox:active .btu-checkbox-input:not(:disabled, :checked, :indeterminate) ~ .btu-checkbox-box': {
+      transform: 'scale(0.9)',
+      transitionDuration: '0.05s',
+    },
+
+    '.btu-checkbox:active .btu-checkbox-input:not(:disabled):is(:checked, :indeterminate) ~ .btu-checkbox-box': {
+      transform: 'scale(1.1)',
+      transitionDuration: '0.05s',
+    },
+
+    // -------------------------------------------------------------------------
+    // Focus visible — ring on the box
+    // -------------------------------------------------------------------------
+    '.btu-checkbox-input:focus-visible ~ .btu-checkbox-box': {
+      borderColor: 'oklch(var(--btu-theme-primary-600))',
+      boxShadow: '0px 0px 0px 4px oklch(var(--btu-theme-primary-100))',
+    },
+
+    // -------------------------------------------------------------------------
+    // Disabled state
+    // -------------------------------------------------------------------------
+    '.btu-checkbox-input:disabled ~ .btu-checkbox-box': {
+      background: 'oklch(var(--btu-theme-gray-100))',
+      borderColor: 'oklch(var(--btu-theme-gray-300))',
+      pointerEvents: 'none',
+    },
+
+    '.btu-checkbox-input:disabled:is(:checked, :indeterminate) ~ .btu-checkbox-box': {
+      background: 'oklch(var(--btu-theme-gray-100))',
+      borderColor: 'oklch(var(--btu-theme-gray-300))',
+    },
+
+    '.btu-checkbox-input:disabled:is(:checked, :indeterminate) ~ .btu-checkbox-box .btu-checkbox-icon': {
+      color: 'oklch(var(--btu-theme-gray-300))',
+    },
+
+    '.btu-checkbox-input:disabled ~ .btu-checkbox-text': {
+      color: 'oklch(var(--btu-theme-gray-300))',
+    },
+
+    '.btu-checkbox:has(.btu-checkbox-input:disabled)': {
+      pointerEvents: 'none',
+    },
+
+    // -------------------------------------------------------------------------
+    // Invalid / error state
+    // -------------------------------------------------------------------------
+    '.btu-checkbox-invalid .btu-checkbox-box': {
+      borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+    },
+
+    '.btu-checkbox-invalid .btu-checkbox-input:is(:checked, :indeterminate) ~ .btu-checkbox-box': {
+      borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+    },
+
+    '.btu-checkbox-invalid .btu-checkbox-label': {
+      color: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+    },
+
+    '.btu-checkbox-invalid:hover .btu-checkbox-input:not(:disabled, :checked, :indeterminate) ~ .btu-checkbox-box': {
+      background: 'var(--btu-theme-white)',
+      borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+    },
+
+    '.btu-checkbox-invalid:hover .btu-checkbox-input:not(:disabled):is(:checked, :indeterminate) ~ .btu-checkbox-box': {
+      borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+    },
+
+    '.btu-checkbox-invalid .btu-checkbox-input:focus-visible ~ .btu-checkbox-box': {
+      borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+    },
+
+    // -------------------------------------------------------------------------
+    // Text elements
+    // -------------------------------------------------------------------------
+    '.btu-checkbox-text': {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0.125rem',
+    },
+
+    '.btu-checkbox-label': {
+      fontSize: config('theme.fontSize.sm')?.[0] ?? '0.875rem',
+      lineHeight: config('theme.fontSize.sm')?.[1] ?? '1.25rem',
+      fontWeight: '500',
+      color: 'oklch(var(--btu-theme-gray-700))',
+    },
+
+    '.btu-checkbox-description': {
+      fontSize: config('theme.fontSize.xs')?.[0] ?? '0.75rem',
+      lineHeight: config('theme.fontSize.xs')?.[1] ?? '1.125rem',
+      color: 'oklch(var(--btu-theme-gray-500))',
+    },
+
+    '.btu-checkbox-error': {
+      fontSize: config('theme.fontSize.xs')?.[0] ?? '0.75rem',
+      lineHeight: config('theme.fontSize.xs')?.[1] ?? '1.125rem',
+      color: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
+    },
+
+    // -------------------------------------------------------------------------
+    // Size variants
+    // -------------------------------------------------------------------------
+    // sm is the default — no modifier class needed, base dimensions apply
+
+    '.btu-checkbox-md': {
+      '--checkbox-box-size': '1.25rem',
+      '--checkbox-icon-size': '0.875rem',
+    },
+
+    '.btu-checkbox-md .btu-checkbox-label': {
+      fontSize: config('theme.fontSize.base')?.[0] ?? '1rem',
+      lineHeight: config('theme.fontSize.base')?.[1] ?? '1.5rem',
+    },
+
+    '.btu-checkbox-md .btu-checkbox-description, .btu-checkbox-md .btu-checkbox-error': {
+      fontSize: config('theme.fontSize.sm')?.[0] ?? '0.875rem',
+      lineHeight: config('theme.fontSize.sm')?.[1] ?? '1.25rem',
+    },
+
+    // -------------------------------------------------------------------------
+    // Reduced motion
+    // -------------------------------------------------------------------------
+    '@media (prefers-reduced-motion: reduce)': {
+      '.btu-checkbox-box': {
+        transition: 'background 0.01ms ease, border-color 0.01ms ease, box-shadow 0.01ms ease, transform 0.01ms ease',
+      },
+      '.btu-checkbox:active .btu-checkbox-input:not(:disabled) ~ .btu-checkbox-box': {
+        transform: 'scale(1)',
+      },
+      '.btu-checkbox-icon': {
+        transition: 'opacity 0.01ms ease',
+        transform: 'scale(1)',
+      },
+      '.btu-checkbox-input:is(:checked, :indeterminate) ~ .btu-checkbox-box .btu-checkbox-icon': {
+        transform: 'scale(1)',
+        transition: 'opacity 0.01ms ease',
+      },
+    },
+  }
+
+  addComponents(components)
+})

package/dist/tailwind-plugin-empty-state.d.ts

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

package/dist/tailwind-plugin-empty-state.d.ts.map

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

package/dist/tailwind-plugin-empty-state.js

@@ -0,0 +1,113 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Empty State component for displaying placeholder content when no data is available.
+ *
+ * Class Names:
+ *
+ *  btu-empty-state - Base container styles
+ *  btu-empty-state-sm - Small size variant
+ *  btu-empty-state-md - Medium size variant
+ *  btu-empty-state-lg - Large size variant
+ *  btu-empty-state-graphic - Graphic container (icon, image, picture, or svg)
+ *  btu-empty-state-content - Content wrapper (heading + description)
+ *  btu-empty-state-title - Heading text
+ *  btu-empty-state-description - Description text
+ *  btu-empty-state-actions - Actions container; applied to an internal
+ *    btu-button-group (variant="spaced"). The button-group provides display,
+ *    flex-flow, and gap; this class only collapses the container when empty.
+ *
+ * Example Usage:
+ *
+ *  <btu-empty-state class="btu-empty-state btu-empty-state-md">
+ *    <div class="btu-empty-state-graphic">...</div>
+ *    <div class="btu-empty-state-content">
+ *      <h2 class="btu-empty-state-title">No items found</h2>
+ *      <p class="btu-empty-state-description">Try adjusting your filters.</p>
+ *    </div>
+ *    <btu-button-group class="btu-empty-state-actions" variant="spaced">...</btu-button-group>
+ *  </btu-empty-state>
+ */
+module.exports = plugin(function ({ addComponents }) {
+    const className = '.btu-empty-state';
+    // Graphic sizes per variant (img/svg/picture). btu-icon children are sized by the
+    // component via the icon's own size prop.
+    const graphicSize = { sm: '118px', md: '128px', lg: '160px' };
+    const graphicChildren = (size) => ({
+        [`& ${className}-graphic > img, & ${className}-graphic > svg, & ${className}-graphic > picture`]: {
+            width: size,
+            height: size,
+        },
+    });
+    addComponents({
+        // Base container
+        [className]: {
+            containerType: 'inline-size',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            padding: '2rem',
+        },
+        // Graphic container
+        [`${className}-graphic`]: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            '&:empty': { display: 'none' },
+            '& > img, & > svg': {
+                objectFit: 'contain',
+            },
+            '& > picture': {
+                display: 'block',
+            },
+            '& > picture > img': {
+                width: '100%',
+                height: '100%',
+                objectFit: 'contain',
+            },
+        },
+        // Content wrapper (heading + description)
+        [`${className}-content`]: {
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth: 'var(--empty-state-max-width, min(75cqw, 360px))',
+        },
+        // Size variants (gap, description text, graphic size, content gap)
+        [`${className}-sm`]: {
+            gap: '1rem',
+            [`& ${className}-description`]: { fontSize: '0.875rem', lineHeight: '1.25rem' },
+            ...graphicChildren(graphicSize.sm),
+            [`& ${className}-content`]: { gap: '0.25rem' },
+        },
+        [`${className}-md`]: {
+            gap: '1.5rem',
+            [`& ${className}-description`]: { fontSize: '0.875rem', lineHeight: '1.25rem' },
+            ...graphicChildren(graphicSize.md),
+            [`& ${className}-content`]: { gap: '0.5rem' },
+        },
+        [`${className}-lg`]: {
+            gap: '1.5rem',
+            [`& ${className}-description`]: { fontSize: '1rem', lineHeight: '1.5rem' },
+            ...graphicChildren(graphicSize.lg),
+            [`& ${className}-content`]: { gap: '0.5rem' },
+        },
+        // Title
+        [`${className}-title`]: {
+            color: 'var(--empty-state-color-heading, oklch(var(--btu-theme-gray-900)))',
+            margin: '0',
+        },
+        // Description
+        [`${className}-description`]: {
+            color: 'var(--empty-state-color-description, oklch(var(--btu-theme-gray-500)))',
+            margin: '0',
+        },
+        // Actions container — applied to an internal btu-button-group. Layout, gap,
+        // and size propagation come from the button-group plugin; we only need to
+        // collapse the container when it has no children.
+        [`${className}-actions`]: {
+            '&:empty': { display: 'none' },
+        },
+    });
+});
+//# sourceMappingURL=tailwind-plugin-empty-state.js.map

package/dist/tailwind-plugin-empty-state.js.map

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