@brightspot/ui 1.11.0 → 3.0.0

package/dist/tailwind-plugin-badge.js

@@ -34,7 +34,7 @@ module.exports = plugin(function ({ addComponents, theme, e, matchUtilities, add
         for (const key in colors) {
             badgeColors.push({
                 [`${className}-${e(key)}`]: {
-                    '--Icon-size': iconSizes['xs'],
+                    '--icon-size': iconSizes['xs'],
                     backgroundColor: `var(--badge-color-background, oklch(var(--btu-theme-${key}-50)))`,
                     color: `var(--badge-color-foreground, oklch(var(--btu-theme-${key}-700)))`,
                     textDecoration: 'underline',

package/dist/tailwind-plugin-badge.ts

@@ -76,7 +76,7 @@ module.exports = plugin(
       for (const key in colors) {
         badgeColors.push({
           [`${className}-${e(key)}`]: {
-            '--Icon-size': iconSizes['xs'],
+            '--icon-size': iconSizes['xs'],
             backgroundColor: `var(--badge-color-background, oklch(var(--btu-theme-${key}-50)))`,
             color: `var(--badge-color-foreground, oklch(var(--btu-theme-${key}-700)))`,
             textDecoration: 'underline',

package/dist/tailwind-plugin-button-group.d.ts

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

package/dist/tailwind-plugin-button-group.d.ts.map

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

package/dist/tailwind-plugin-button-group.js

@@ -0,0 +1,215 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Button Group — Tailwind CSS plugin for grouping related buttons.
+ *
+ * Provides connected (joined) and spaced layouts with horizontal/vertical orientation.
+ * Supports both direct `.btu-button` children and `btu-icon-button` children.
+ * `btu-icon-button` uses `display: contents` so its inner button participates
+ * directly in the group's flex layout.
+ *
+ * Selection uses a circular wipe transition: a `::after` pseudo-element with
+ * `clip-path: circle()` reveals the selection color from the center outward.
+ *
+ * Class Names:
+ *
+ *  btu-button-group - Base group container
+ *
+ * CSS Custom Properties:
+ *
+ *  --button-group-gap             - Gap between buttons in spaced variant (default: spacing.sm)
+ *  --button-group-border-radius   - Outer corner radius in connected variant (default: 0.5rem)
+ *  --button-group-border-color    - Internal divider color in connected variant (default: gray-300)
+ *  --button-group-selection-bg    - Selection background color (auto-set per color variant)
+ *  --button-group-selection-color - Selection text color (auto-set per color variant)
+ */
+module.exports = plugin(function ({ addComponents, addBase, theme }) {
+    const connected = 'btu-button-group[variant="connected"]';
+    const connectedH = `${connected}[orientation="horizontal"]`;
+    const connectedV = `${connected}[orientation="vertical"]`;
+    const allSelected = `${connected}[data-all-selected]`;
+    const borderColor = 'var(--button-group-border-color, oklch(var(--btu-theme-gray-300)))';
+    const outerRadius = 'var(--button-group-border-radius, 0.5rem)';
+    const skipColors = new Set(['currentColor', 'transparent', 'white', 'black', 'ai']);
+    const colors = theme('colors') || {};
+    const components = {
+        // ─── Base ─────────────────────────────────────────────────────────
+        '.btu-button-group': {
+            display: 'inline-flex',
+            alignItems: 'stretch',
+            flexWrap: 'nowrap',
+            flexShrink: '0',
+        },
+        // ─── Icon-button: remove wrapper box so inner button is the flex item ──
+        '.btu-button-group > btu-icon-button': {
+            display: 'contents',
+        },
+        // ─── Orientation ──────────────────────────────────────────────────
+        'btu-button-group[orientation="vertical"]': {
+            flexDirection: 'column',
+        },
+        // ─── Spaced variant ───────────────────────────────────────────────
+        'btu-button-group[variant="spaced"]': {
+            gap: 'var(--button-group-gap, var(--gap-s, 0.5rem))',
+        },
+        // ─── slot="end" auto-margin ──────────────────────────────────────
+        // Direct children and inner .btu-button (for display:contents wrappers like btu-icon-button)
+        'btu-button-group[orientation="horizontal"] > [slot="end"], btu-button-group[orientation="horizontal"] > [slot="end"] > .btu-button': {
+            marginInlineStart: 'auto',
+        },
+        'btu-button-group[orientation="vertical"] > [slot="end"], btu-button-group[orientation="vertical"] > [slot="end"] > .btu-button': {
+            marginBlockStart: 'auto',
+        },
+        // ─── Size propagation via CSS ─────────────────────────────────────
+        'btu-button-group[size="small"] .btu-button': {
+            padding: 'var(--button-padding-sm)',
+            width: 'var(--button-size-sm, auto)',
+            height: 'var(--button-size-sm, auto)',
+        },
+        'btu-button-group[size="medium"] .btu-button': {
+            padding: 'var(--button-padding-md)',
+            width: 'var(--button-size-md, auto)',
+            height: 'var(--button-size-md, auto)',
+        },
+        'btu-button-group[size="large"] .btu-button': {
+            padding: 'var(--button-padding-lg)',
+            width: 'var(--button-size-lg, auto)',
+            height: 'var(--button-size-lg, auto)',
+        },
+        // ─── Connected: convert outline buttons to border-based ───────────
+        [`${connected} .btu-button`]: {
+            outline: 'none',
+            border: `1px solid ${borderColor}`,
+            transition: 'box-shadow 100ms ease, filter 100ms ease',
+            '&:active': {
+                scale: '1',
+                boxShadow: 'inset 0 2px 4px oklch(0 0 0 / 10%)',
+                filter: 'brightness(0.92)',
+            },
+        },
+        // ─── Disabled buttons ─────────────────────────────────────────────
+        '.btu-button-group .btu-button:disabled, .btu-button-group .btu-button[disabled]': {
+            opacity: '0.5',
+            cursor: 'default',
+        },
+        // ─── Selection wipe: disable button plugin's instant pressed toggle ─
+        // The ::after pseudo handles the pressed background via clip-path wipe,
+        // so the button itself must stay at its normal (non-pressed) color.
+        '.btu-button-group .btu-button[aria-pressed]': {
+            '--button-pressed-color': 'initial',
+            '--button-pressed-text-color': 'initial',
+            isolation: 'isolate',
+            transition: 'color 150ms ease-in',
+        },
+        '.btu-button-group .btu-button[aria-pressed]::after': {
+            content: '""',
+            position: 'absolute',
+            inset: '0',
+            zIndex: '-1',
+            borderRadius: 'inherit',
+            background: 'var(--button-group-selection-bg)',
+            clipPath: 'circle(0% at center)',
+            transition: 'clip-path 150ms ease-in',
+        },
+        // ─── Selection wipe: active state ─────────────────────────────────
+        '.btu-button-group .btu-button[aria-pressed="true"]': {
+            color: 'var(--button-group-selection-color)',
+            transition: 'color 200ms ease-out',
+        },
+        '.btu-button-group .btu-button[aria-pressed="true"]::after': {
+            clipPath: 'circle(75% at center)',
+            transition: 'clip-path 200ms ease-out',
+        },
+        // ─── Reduced motion ─────────────────────────────────────────────────
+        '@media (prefers-reduced-motion: reduce)': {
+            '.btu-button-group .btu-button[aria-pressed]': {
+                transition: 'color 0.01ms ease',
+            },
+            '.btu-button-group .btu-button[aria-pressed]::after': {
+                transition: 'clip-path 0.01ms ease',
+            },
+            [`${allSelected} .btu-button[aria-pressed="true"]`]: {
+                animation: 'none',
+            },
+        },
+        // ─── Connected variant — horizontal ───────────────────────────────
+        [`${connectedH} .btu-button`]: {
+            borderRadius: '0',
+            marginInlineEnd: '-1px',
+            position: 'relative',
+            '&:hover, &:focus-visible, &:active, &[aria-pressed="true"]': {
+                zIndex: '1',
+            },
+            '&:focus-visible': {
+                zIndex: '2',
+            },
+        },
+        [`${connectedH} > :first-child:is(.btu-button), ${connectedH} > :first-child > .btu-button`]: {
+            borderStartStartRadius: outerRadius,
+            borderEndStartRadius: outerRadius,
+        },
+        [`${connectedH} > :last-child:is(.btu-button), ${connectedH} > :last-child > .btu-button`]: {
+            borderStartEndRadius: outerRadius,
+            borderEndEndRadius: outerRadius,
+            marginInlineEnd: '0',
+        },
+        // ─── Connected variant — vertical ─────────────────────────────────
+        [`${connectedV} .btu-button`]: {
+            borderRadius: '0',
+            marginBlockEnd: '-1px',
+            position: 'relative',
+            '&:hover, &:focus-visible, &:active, &[aria-pressed="true"]': {
+                zIndex: '1',
+            },
+            '&:focus-visible': {
+                zIndex: '2',
+            },
+        },
+        [`${connectedV} > :first-child:is(.btu-button), ${connectedV} > :first-child > .btu-button`]: {
+            borderStartStartRadius: outerRadius,
+            borderStartEndRadius: outerRadius,
+        },
+        [`${connectedV} > :last-child:is(.btu-button), ${connectedV} > :last-child > .btu-button`]: {
+            borderEndStartRadius: outerRadius,
+            borderEndEndRadius: outerRadius,
+            marginBlockEnd: '0',
+        },
+    };
+    // ─── Sibling index for staggered animations ─────────────────────────
+    // CSS sibling-index() has limited browser support (Chrome 133+).
+    // When unsupported, the fallback of 1 means all buttons animate simultaneously.
+    components[`${connected} > *`] = {
+        '--_btn-index': 'sibling-index()',
+    };
+    // ─── All-selected shimmer (connected only) ─────────────────────────
+    // Text color pulse + border color pulse on each button, staggered.
+    components[`${allSelected} .btu-button[aria-pressed="true"]`] = {
+        animation: 'btu-shimmer-all 500ms ease-in-out both',
+        animationDelay: 'calc((var(--_btn-index, 1) - 1) * 100ms)',
+    };
+    // ─── Selection color variants ─────────────────────────────────────
+    for (const key in colors) {
+        if (skipColors.has(key))
+            continue;
+        const pressedKey = key === 'gray' ? 'primary' : key;
+        components[`.btu-button-group .btu-button-${key}`] = {
+            '--button-group-selection-bg': `oklch(var(--btu-theme-${pressedKey}-50))`,
+            '--button-group-selection-color': `oklch(var(--btu-theme-${pressedKey}-800))`,
+            '--button-group-shimmer-highlight': `oklch(var(--btu-theme-${pressedKey}-200))`,
+        };
+    }
+    addComponents(components);
+    // Keyframes must be added via addBase (not addComponents)
+    addBase({
+        '@keyframes btu-shimmer-all': {
+            '0%, 100%': {
+                color: 'var(--button-group-selection-color)',
+                borderColor: 'var(--button-group-border-color, oklch(var(--btu-theme-gray-300)))',
+            },
+            '40%, 60%': {
+                color: 'var(--button-group-shimmer-highlight)',
+                borderColor: 'var(--button-group-shimmer-highlight)',
+            },
+        },
+    });
+});
+//# sourceMappingURL=tailwind-plugin-button-group.js.map

package/dist/tailwind-plugin-button-group.js.map

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

package/dist/tailwind-plugin-button-group.ts

@@ -0,0 +1,238 @@
+import plugin from 'tailwindcss/plugin'
+import type { CSSRuleObject } from 'tailwindcss/types/config'
+declare let module: any
+
+/**
+ * Button Group — Tailwind CSS plugin for grouping related buttons.
+ *
+ * Provides connected (joined) and spaced layouts with horizontal/vertical orientation.
+ * Supports both direct `.btu-button` children and `btu-icon-button` children.
+ * `btu-icon-button` uses `display: contents` so its inner button participates
+ * directly in the group's flex layout.
+ *
+ * Selection uses a circular wipe transition: a `::after` pseudo-element with
+ * `clip-path: circle()` reveals the selection color from the center outward.
+ *
+ * Class Names:
+ *
+ *  btu-button-group - Base group container
+ *
+ * CSS Custom Properties:
+ *
+ *  --button-group-gap             - Gap between buttons in spaced variant (default: spacing.sm)
+ *  --button-group-border-radius   - Outer corner radius in connected variant (default: 0.5rem)
+ *  --button-group-border-color    - Internal divider color in connected variant (default: gray-300)
+ *  --button-group-selection-bg    - Selection background color (auto-set per color variant)
+ *  --button-group-selection-color - Selection text color (auto-set per color variant)
+ */
+
+module.exports = plugin(function ({ addComponents, addBase, theme }) {
+  const connected = 'btu-button-group[variant="connected"]'
+  const connectedH = `${connected}[orientation="horizontal"]`
+  const connectedV = `${connected}[orientation="vertical"]`
+  const allSelected = `${connected}[data-all-selected]`
+  const borderColor = 'var(--button-group-border-color, oklch(var(--btu-theme-gray-300)))'
+  const outerRadius = 'var(--button-group-border-radius, 0.5rem)'
+  const skipColors = new Set(['currentColor', 'transparent', 'white', 'black', 'ai'])
+  const colors: CSSRuleObject = theme('colors') || {}
+
+  const components: CSSRuleObject = {
+    // ─── Base ─────────────────────────────────────────────────────────
+    '.btu-button-group': {
+      display: 'inline-flex',
+      alignItems: 'stretch',
+      flexWrap: 'nowrap',
+      flexShrink: '0',
+    },
+
+    // ─── Icon-button: remove wrapper box so inner button is the flex item ──
+    '.btu-button-group > btu-icon-button': {
+      display: 'contents',
+    },
+
+    // ─── Orientation ──────────────────────────────────────────────────
+    'btu-button-group[orientation="vertical"]': {
+      flexDirection: 'column',
+    },
+
+    // ─── Spaced variant ───────────────────────────────────────────────
+    'btu-button-group[variant="spaced"]': {
+      gap: 'var(--button-group-gap, var(--gap-s, 0.5rem))',
+    },
+
+    // ─── slot="end" auto-margin ──────────────────────────────────────
+    // Direct children and inner .btu-button (for display:contents wrappers like btu-icon-button)
+    'btu-button-group[orientation="horizontal"] > [slot="end"], btu-button-group[orientation="horizontal"] > [slot="end"] > .btu-button':
+      {
+        marginInlineStart: 'auto',
+      },
+    'btu-button-group[orientation="vertical"] > [slot="end"], btu-button-group[orientation="vertical"] > [slot="end"] > .btu-button':
+      {
+        marginBlockStart: 'auto',
+      },
+
+    // ─── Size propagation via CSS ─────────────────────────────────────
+    'btu-button-group[size="small"] .btu-button': {
+      padding: 'var(--button-padding-sm)',
+      width: 'var(--button-size-sm, auto)',
+      height: 'var(--button-size-sm, auto)',
+    },
+    'btu-button-group[size="medium"] .btu-button': {
+      padding: 'var(--button-padding-md)',
+      width: 'var(--button-size-md, auto)',
+      height: 'var(--button-size-md, auto)',
+    },
+    'btu-button-group[size="large"] .btu-button': {
+      padding: 'var(--button-padding-lg)',
+      width: 'var(--button-size-lg, auto)',
+      height: 'var(--button-size-lg, auto)',
+    },
+
+    // ─── Connected: convert outline buttons to border-based ───────────
+    [`${connected} .btu-button`]: {
+      outline: 'none',
+      border: `1px solid ${borderColor}`,
+      transition: 'box-shadow 100ms ease, filter 100ms ease',
+      '&:active': {
+        scale: '1',
+        boxShadow: 'inset 0 2px 4px oklch(0 0 0 / 10%)',
+        filter: 'brightness(0.92)',
+      },
+    },
+
+    // ─── Disabled buttons ─────────────────────────────────────────────
+    '.btu-button-group .btu-button:disabled, .btu-button-group .btu-button[disabled]': {
+      opacity: '0.5',
+      cursor: 'default',
+    },
+
+    // ─── Selection wipe: disable button plugin's instant pressed toggle ─
+    // The ::after pseudo handles the pressed background via clip-path wipe,
+    // so the button itself must stay at its normal (non-pressed) color.
+    '.btu-button-group .btu-button[aria-pressed]': {
+      '--button-pressed-color': 'initial',
+      '--button-pressed-text-color': 'initial',
+      isolation: 'isolate',
+      transition: 'color 150ms ease-in',
+    },
+    '.btu-button-group .btu-button[aria-pressed]::after': {
+      content: '""',
+      position: 'absolute',
+      inset: '0',
+      zIndex: '-1',
+      borderRadius: 'inherit',
+      background: 'var(--button-group-selection-bg)',
+      clipPath: 'circle(0% at center)',
+      transition: 'clip-path 150ms ease-in',
+    },
+
+    // ─── Selection wipe: active state ─────────────────────────────────
+    '.btu-button-group .btu-button[aria-pressed="true"]': {
+      color: 'var(--button-group-selection-color)',
+      transition: 'color 200ms ease-out',
+    },
+
+    '.btu-button-group .btu-button[aria-pressed="true"]::after': {
+      clipPath: 'circle(75% at center)',
+      transition: 'clip-path 200ms ease-out',
+    },
+
+    // ─── Reduced motion ─────────────────────────────────────────────────
+    '@media (prefers-reduced-motion: reduce)': {
+      '.btu-button-group .btu-button[aria-pressed]': {
+        transition: 'color 0.01ms ease',
+      },
+      '.btu-button-group .btu-button[aria-pressed]::after': {
+        transition: 'clip-path 0.01ms ease',
+      },
+      [`${allSelected} .btu-button[aria-pressed="true"]`]: {
+        animation: 'none',
+      },
+    },
+
+    // ─── Connected variant — horizontal ───────────────────────────────
+    [`${connectedH} .btu-button`]: {
+      borderRadius: '0',
+      marginInlineEnd: '-1px',
+      position: 'relative',
+      '&:hover, &:focus-visible, &:active, &[aria-pressed="true"]': {
+        zIndex: '1',
+      },
+      '&:focus-visible': {
+        zIndex: '2',
+      },
+    },
+    [`${connectedH} > :first-child:is(.btu-button), ${connectedH} > :first-child > .btu-button`]: {
+      borderStartStartRadius: outerRadius,
+      borderEndStartRadius: outerRadius,
+    },
+    [`${connectedH} > :last-child:is(.btu-button), ${connectedH} > :last-child > .btu-button`]: {
+      borderStartEndRadius: outerRadius,
+      borderEndEndRadius: outerRadius,
+      marginInlineEnd: '0',
+    },
+
+    // ─── Connected variant — vertical ─────────────────────────────────
+    [`${connectedV} .btu-button`]: {
+      borderRadius: '0',
+      marginBlockEnd: '-1px',
+      position: 'relative',
+      '&:hover, &:focus-visible, &:active, &[aria-pressed="true"]': {
+        zIndex: '1',
+      },
+      '&:focus-visible': {
+        zIndex: '2',
+      },
+    },
+    [`${connectedV} > :first-child:is(.btu-button), ${connectedV} > :first-child > .btu-button`]: {
+      borderStartStartRadius: outerRadius,
+      borderStartEndRadius: outerRadius,
+    },
+    [`${connectedV} > :last-child:is(.btu-button), ${connectedV} > :last-child > .btu-button`]: {
+      borderEndStartRadius: outerRadius,
+      borderEndEndRadius: outerRadius,
+      marginBlockEnd: '0',
+    },
+  }
+
+  // ─── Sibling index for staggered animations ─────────────────────────
+  // CSS sibling-index() has limited browser support (Chrome 133+).
+  // When unsupported, the fallback of 1 means all buttons animate simultaneously.
+  components[`${connected} > *`] = {
+    '--_btn-index': 'sibling-index()',
+  }
+
+  // ─── All-selected shimmer (connected only) ─────────────────────────
+  // Text color pulse + border color pulse on each button, staggered.
+  components[`${allSelected} .btu-button[aria-pressed="true"]`] = {
+    animation: 'btu-shimmer-all 500ms ease-in-out both',
+    animationDelay: 'calc((var(--_btn-index, 1) - 1) * 100ms)',
+  }
+
+  // ─── Selection color variants ─────────────────────────────────────
+  for (const key in colors) {
+    if (skipColors.has(key)) continue
+    const pressedKey = key === 'gray' ? 'primary' : key
+    components[`.btu-button-group .btu-button-${key}`] = {
+      '--button-group-selection-bg': `oklch(var(--btu-theme-${pressedKey}-50))`,
+      '--button-group-selection-color': `oklch(var(--btu-theme-${pressedKey}-800))`,
+      '--button-group-shimmer-highlight': `oklch(var(--btu-theme-${pressedKey}-200))`,
+    }
+  }
+
+  addComponents(components)
+
+  // Keyframes must be added via addBase (not addComponents)
+  addBase({
+    '@keyframes btu-shimmer-all': {
+      '0%, 100%': {
+        color: 'var(--button-group-selection-color)',
+        borderColor: 'var(--button-group-border-color, oklch(var(--btu-theme-gray-300)))',
+      },
+      '40%, 60%': {
+        color: 'var(--button-group-shimmer-highlight)',
+        borderColor: 'var(--button-group-shimmer-highlight)',
+      },
+    },
+  })
+})

package/dist/tailwind-plugin-button.js

@@ -218,7 +218,7 @@ module.exports = plugin(function ({ addComponents, addUtilities, theme }) {
             height: 'var(--button-size-xl, auto)',
         },
         '2xl': {
-            '--Icon-size': iconSizes['lg'],
+            '--icon-size': iconSizes['lg'],
             fontSize: `var(--button-icon-font-size, ${textSizes['lg'][0]})`,
             lineHeight: `var(--button-icon-line-height, ${textSizes['lg'][1]})`,
             padding: 'var(--button-padding-2xl)',

package/dist/tailwind-plugin-button.ts

@@ -227,7 +227,7 @@ module.exports = plugin(function ({ addComponents, addUtilities, theme }) {
       height: 'var(--button-size-xl, auto)',
     },
     '2xl': {
-      '--Icon-size': iconSizes['lg'],
+      '--icon-size': iconSizes['lg'],
       fontSize: `var(--button-icon-font-size, ${textSizes['lg'][0]})`,
       lineHeight: `var(--button-icon-line-height, ${textSizes['lg'][1]})`,
       padding: 'var(--button-padding-2xl)',

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

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

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

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