@brightspot/ui 1.10.0 → 3.0.0

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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"}

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

@@ -0,0 +1,124 @@
+import plugin from 'tailwindcss/plugin'
+declare let module: any
+
+/**
+ * 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' } as const
+
+  const graphicChildren = (size: string) => ({
+    [`& ${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' },
+    },
+  })
+})