@brightspot/ui 1.11.0 → 3.0.0

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' },
+    },
+  })
+})

package/dist/tailwind-plugin-icon.js

@@ -14,10 +14,12 @@ import { addNameSpaceXML, encodeSVG } from './util/svg.js';
  *
  *  btu-icon - Establishes the standard icon styles and font.
  *  btu-icon-{name-of-icon} - Sets the font glyph to the value of the icon you want.
- *  btu-icon-[xs|sm|md|lg|xl|{arbitary value}] - Size of the icon.
- *  btu-icon-gradient-[primary] - Gradient to use for the icon background.
+ *  btu-icon-[xs|sm|md|lg|xl|{arbitrary value}] - Size of the icon.
+ *  btu-icon-gradient-{color} - Gradient to use for the icon background (ai, primary, error, success, warning, gray, purple, rose, teal).
  *  btu-icon-via-mask-{name of icon} - SVG mask to use given a specific icon name.
- *    - exposes a custom property `--Icon-svg` data URI to set the mask.
+ *    - exposes a custom property `--icon-svg` data URI to set the mask.
+ *  btu-icon-emphasize - Tonal circle + ring behind the icon (derives from currentColor, defaults to primary).
+ *  btu-icon-emphasize-pulse - Adds a one-shot ring spring animation to the emphasize circle.
  *
  * Usages:
  *
@@ -25,7 +27,7 @@ import { addNameSpaceXML, encodeSVG } from './util/svg.js';
  * >   before:btu-icon before:btu-icon-heart
  *
  * A heart icon that is 2rem in size:
- * >   before:btu-icon before:btu-icon-heart before:[--Icon-size:2rem]
+ * >   before:btu-icon before:btu-icon-heart before:[--icon-size:2rem]
  * - or -
  * >   before:btu-icon before:btu-icon-heart before:btu-icon-lg
  *
@@ -33,34 +35,33 @@ import { addNameSpaceXML, encodeSVG } from './util/svg.js';
  * >   before:btu-icon-gradient-primary before:btu-icon-via-mask-heart
  */
 const svgs = {};
-const symbols = /[\r\n%#()<>?[\\\]^`{|}]/g;
 for (const [key, value] of Object.entries(LucideExports)) {
     if (typeof value === 'string') {
         svgs[key] = value;
     }
 }
-module.exports = plugin(function ({ addComponents, matchUtilities, theme }) {
-    const size = 'var(--Icon-size)';
+module.exports = plugin(function ({ addBase, addComponents, matchUtilities, theme }) {
+    const size = 'var(--icon-size)';
     const prefix = '.btu-icon-';
     Object.entries(svgs).forEach(([key, svg]) => {
         addComponents({
             [`${prefix}via-mask`]: {
                 '--size': '1.25rem',
-                mask: 'var(--mask-url, var(--Icon-svg, var(--compat-icon-via-mask))) center / contain no-repeat',
+                mask: 'var(--mask-url, var(--icon-svg, var(--compat-icon-via-mask))) center / contain no-repeat',
                 'mask-mode': 'alpha',
                 'aspect-ratio': '1',
-                'inline-size': 'var(--Icon-size, var(--size))',
-                'block-size': 'var(--Icon-size, var(--size))',
+                'inline-size': 'var(--icon-size, var(--size))',
+                'block-size': 'var(--icon-size, var(--size))',
                 display: 'inline-block',
             },
             [`${prefix}via-mask-${pascalToKebab(key)}`]: {
                 '--size': '1.25rem',
-                '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpaceXML(svg))}")`,
-                mask: 'var(--Icon-svg) center / contain no-repeat',
+                '--icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpaceXML(svg))}")`,
+                mask: 'var(--icon-svg) center / contain no-repeat',
                 'mask-mode': 'alpha',
                 'aspect-ratio': '1',
-                'inline-size': 'var(--Icon-size, var(--size))',
-                'block-size': 'var(--Icon-size, var(--size))',
+                'inline-size': 'var(--icon-size, var(--size))',
+                'block-size': 'var(--icon-size, var(--size))',
                 display: 'inline-block',
             },
         });
@@ -96,9 +97,9 @@ module.exports = plugin(function ({ addComponents, matchUtilities, theme }) {
             'background-image': value,
             'background-repeat': 'no-repeat',
             'background-position': 'center',
-            'background-size': 'var(--Icon-size, 1.5rem) var(--Icon-size, 1.5rem)',
-            width: 'var(--Icon-size, 1.5rem)',
-            height: 'var(--Icon-size, 1.5rem)',
+            'background-size': 'var(--icon-size, 1.5rem) var(--icon-size, 1.5rem)',
+            width: 'var(--icon-size, 1.5rem)',
+            height: 'var(--icon-size, 1.5rem)',
             display: 'inline-block',
         }),
     }, {
@@ -116,9 +117,112 @@ module.exports = plugin(function ({ addComponents, matchUtilities, theme }) {
     });
     matchUtilities({
         'btu-icon': value => ({
-            '--Icon-size': value,
+            '--icon-size': value,
         }),
     }, { values: theme('iconSize') });
+    /* ─── Emphasize: tonal circle + ring behind icon ─── */
+    function oklch(l, cMul, cMin) {
+        const chroma = cMin != null ? `max(calc(c * ${cMul}), ${cMin})` : `calc(c * ${cMul})`;
+        return `oklch(from currentColor ${l} ${chroma} h)`;
+    }
+    const lightColors = {
+        '--_ring-color': oklch(0.8, 0.5),
+        backgroundColor: oklch(0.93, 0.22),
+        borderColor: oklch(0.97, 0.1),
+    };
+    const darkColors = {
+        '--_ring-color': oklch(0.65, 1.5, 0.08),
+        backgroundColor: oklch(0.69, 1.6, 0.08),
+        borderColor: oklch(0.6, 1.4, 0.06),
+    };
+    const highContrastColors = {
+        '--_ring-color': oklch(0.75, 0.5),
+        backgroundColor: oklch(0.9, 0.35),
+        borderColor: oklch(0.95, 0.2),
+    };
+    /* Pulse ring animation keyframes (pseudo-element scale + fade) */
+    addBase({
+        '@keyframes btu-icon-ring-spring': {
+            '0%': { transform: 'scale(1)', opacity: '0.6' },
+            '35%': { transform: 'scale(var(--_ring-scale))', opacity: '0.4' },
+            '100%': { transform: 'scale(var(--_ring-scale))', opacity: '0' },
+        },
+    });
+    addComponents({
+        '.btu-icon-emphasize': {
+            position: 'relative',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '9999px',
+            borderStyle: 'solid',
+            color: 'oklch(var(--btu-theme-primary-600))',
+            ...lightColors,
+        },
+        /* Per-size circle dimensions (border width scales with size per Figma spec) */
+        '.btu-icon-emphasize.btu-icon-xs': {
+            width: '1.5rem',
+            height: '1.5rem',
+            borderWidth: '2px',
+            '--_ring-scale': '1.25',
+        },
+        '.btu-icon-emphasize.btu-icon-sm': {
+            width: '2rem',
+            height: '2rem',
+            borderWidth: '4px',
+            '--_ring-scale': '1.35',
+        },
+        '.btu-icon-emphasize.btu-icon-md': {
+            width: '2.25rem',
+            height: '2.25rem',
+            borderWidth: '6px',
+            '--_ring-scale': '1.4',
+        },
+        '.btu-icon-emphasize.btu-icon-lg': {
+            width: '3rem',
+            height: '3rem',
+            borderWidth: '8px',
+            '--_ring-scale': '1.45',
+        },
+        '.btu-icon-emphasize.btu-icon-xl': {
+            width: '3.5rem',
+            height: '3.5rem',
+            borderWidth: '10px',
+            '--_ring-scale': '1.5',
+        },
+        /* Pulse animation — pseudo-element ring that scales out and fades */
+        '.btu-icon-emphasize-pulse::before': {
+            content: '""',
+            position: 'absolute',
+            inset: '0',
+            borderRadius: '9999px',
+            backgroundColor: 'var(--_ring-color)',
+            opacity: '0',
+            animation: 'btu-icon-ring-spring 1200ms ease-out 200ms both',
+            pointerEvents: 'none',
+        },
+        /* ─── Dark mode ─── */
+        '.is-dark .btu-icon-emphasize': darkColors,
+        '.is-dark .btu-icon-emphasize svg': { color: 'oklch(0.95 0 0)' },
+        '@media (prefers-color-scheme: dark)': {
+            ':root:not([data-theme*=\'"appearance":"light"\']):not(.is-dark) .btu-icon-emphasize': darkColors,
+            ':root:not([data-theme*=\'"appearance":"light"\']):not(.is-dark) .btu-icon-emphasize svg': {
+                color: 'oklch(0.95 0 0)',
+            },
+        },
+        /* ─── High contrast ─── */
+        ':root.is-moreContrast .btu-icon-emphasize': highContrastColors,
+        '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+            ':root:not(.is-normalContrast) .btu-icon-emphasize': highContrastColors,
+        },
+        /* ─── Reduced motion ─── */
+        '@media (prefers-reduced-motion: reduce)': {
+            '.btu-icon-emphasize-pulse::before': {
+                animationDuration: '0.01ms',
+                animationDelay: '0ms',
+            },
+        },
+    });
 }, {
     theme: {
         iconSize: {

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

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

package/dist/tailwind-plugin-icon.ts

@@ -16,10 +16,12 @@ declare let module: any
  *
  *  btu-icon - Establishes the standard icon styles and font.
  *  btu-icon-{name-of-icon} - Sets the font glyph to the value of the icon you want.
- *  btu-icon-[xs|sm|md|lg|xl|{arbitary value}] - Size of the icon.
- *  btu-icon-gradient-[primary] - Gradient to use for the icon background.
+ *  btu-icon-[xs|sm|md|lg|xl|{arbitrary value}] - Size of the icon.
+ *  btu-icon-gradient-{color} - Gradient to use for the icon background (ai, primary, error, success, warning, gray, purple, rose, teal).
  *  btu-icon-via-mask-{name of icon} - SVG mask to use given a specific icon name.
- *    - exposes a custom property `--Icon-svg` data URI to set the mask.
+ *    - exposes a custom property `--icon-svg` data URI to set the mask.
+ *  btu-icon-emphasize - Tonal circle + ring behind the icon (derives from currentColor, defaults to primary).
+ *  btu-icon-emphasize-pulse - Adds a one-shot ring spring animation to the emphasize circle.
  *
  * Usages:
  *
@@ -27,7 +29,7 @@ declare let module: any
  * >   before:btu-icon before:btu-icon-heart
  *
  * A heart icon that is 2rem in size:
- * >   before:btu-icon before:btu-icon-heart before:[--Icon-size:2rem]
+ * >   before:btu-icon before:btu-icon-heart before:[--icon-size:2rem]
  * - or -
  * >   before:btu-icon before:btu-icon-heart before:btu-icon-lg
  *
@@ -36,7 +38,6 @@ declare let module: any
  */
 
 const svgs: Record<string, string> = {}
-const symbols = /[\r\n%#()<>?[\\\]^`{|}]/g
 for (const [key, value] of Object.entries(LucideExports)) {
   if (typeof value === 'string') {
     svgs[key] = value
@@ -44,29 +45,29 @@ for (const [key, value] of Object.entries(LucideExports)) {
 }
 
 module.exports = plugin(
-  function ({ addComponents, matchUtilities, theme }) {
-    const size = 'var(--Icon-size)'
+  function ({ addBase, addComponents, matchUtilities, theme }) {
+    const size = 'var(--icon-size)'
     const prefix = '.btu-icon-'
 
     Object.entries(svgs).forEach(([key, svg]) => {
       addComponents({
         [`${prefix}via-mask`]: {
           '--size': '1.25rem',
-          mask: 'var(--mask-url, var(--Icon-svg, var(--compat-icon-via-mask))) center / contain no-repeat',
+          mask: 'var(--mask-url, var(--icon-svg, var(--compat-icon-via-mask))) center / contain no-repeat',
           'mask-mode': 'alpha',
           'aspect-ratio': '1',
-          'inline-size': 'var(--Icon-size, var(--size))',
-          'block-size': 'var(--Icon-size, var(--size))',
+          'inline-size': 'var(--icon-size, var(--size))',
+          'block-size': 'var(--icon-size, var(--size))',
           display: 'inline-block',
         },
         [`${prefix}via-mask-${pascalToKebab(key)}`]: {
           '--size': '1.25rem',
-          '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpaceXML(svg))}")`,
-          mask: 'var(--Icon-svg) center / contain no-repeat',
+          '--icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpaceXML(svg))}")`,
+          mask: 'var(--icon-svg) center / contain no-repeat',
           'mask-mode': 'alpha',
           'aspect-ratio': '1',
-          'inline-size': 'var(--Icon-size, var(--size))',
-          'block-size': 'var(--Icon-size, var(--size))',
+          'inline-size': 'var(--icon-size, var(--size))',
+          'block-size': 'var(--icon-size, var(--size))',
           display: 'inline-block',
         },
       })
@@ -107,9 +108,9 @@ module.exports = plugin(
           'background-image': value,
           'background-repeat': 'no-repeat',
           'background-position': 'center',
-          'background-size': 'var(--Icon-size, 1.5rem) var(--Icon-size, 1.5rem)',
-          width: 'var(--Icon-size, 1.5rem)',
-          height: 'var(--Icon-size, 1.5rem)',
+          'background-size': 'var(--icon-size, 1.5rem) var(--icon-size, 1.5rem)',
+          width: 'var(--icon-size, 1.5rem)',
+          height: 'var(--icon-size, 1.5rem)',
           display: 'inline-block',
         }),
       },
@@ -130,11 +131,123 @@ module.exports = plugin(
     matchUtilities(
       {
         'btu-icon': value => ({
-          '--Icon-size': value,
+          '--icon-size': value,
         }),
       },
       { values: theme('iconSize') },
     )
+
+    /* ─── Emphasize: tonal circle + ring behind icon ─── */
+    function oklch(l: number, cMul: number, cMin?: number): string {
+      const chroma = cMin != null ? `max(calc(c * ${cMul}), ${cMin})` : `calc(c * ${cMul})`
+      return `oklch(from currentColor ${l} ${chroma} h)`
+    }
+
+    const lightColors = {
+      '--_ring-color': oklch(0.8, 0.5),
+      backgroundColor: oklch(0.93, 0.22),
+      borderColor: oklch(0.97, 0.1),
+    }
+    const darkColors = {
+      '--_ring-color': oklch(0.65, 1.5, 0.08),
+      backgroundColor: oklch(0.69, 1.6, 0.08),
+      borderColor: oklch(0.6, 1.4, 0.06),
+    }
+    const highContrastColors = {
+      '--_ring-color': oklch(0.75, 0.5),
+      backgroundColor: oklch(0.9, 0.35),
+      borderColor: oklch(0.95, 0.2),
+    }
+
+    /* Pulse ring animation keyframes (pseudo-element scale + fade) */
+    addBase({
+      '@keyframes btu-icon-ring-spring': {
+        '0%': { transform: 'scale(1)', opacity: '0.6' },
+        '35%': { transform: 'scale(var(--_ring-scale))', opacity: '0.4' },
+        '100%': { transform: 'scale(var(--_ring-scale))', opacity: '0' },
+      },
+    })
+
+    addComponents({
+      '.btu-icon-emphasize': {
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '9999px',
+        borderStyle: 'solid',
+        color: 'oklch(var(--btu-theme-primary-600))',
+        ...lightColors,
+      },
+
+      /* Per-size circle dimensions (border width scales with size per Figma spec) */
+      '.btu-icon-emphasize.btu-icon-xs': {
+        width: '1.5rem',
+        height: '1.5rem',
+        borderWidth: '2px',
+        '--_ring-scale': '1.25',
+      },
+      '.btu-icon-emphasize.btu-icon-sm': {
+        width: '2rem',
+        height: '2rem',
+        borderWidth: '4px',
+        '--_ring-scale': '1.35',
+      },
+      '.btu-icon-emphasize.btu-icon-md': {
+        width: '2.25rem',
+        height: '2.25rem',
+        borderWidth: '6px',
+        '--_ring-scale': '1.4',
+      },
+      '.btu-icon-emphasize.btu-icon-lg': {
+        width: '3rem',
+        height: '3rem',
+        borderWidth: '8px',
+        '--_ring-scale': '1.45',
+      },
+      '.btu-icon-emphasize.btu-icon-xl': {
+        width: '3.5rem',
+        height: '3.5rem',
+        borderWidth: '10px',
+        '--_ring-scale': '1.5',
+      },
+
+      /* Pulse animation — pseudo-element ring that scales out and fades */
+      '.btu-icon-emphasize-pulse::before': {
+        content: '""',
+        position: 'absolute',
+        inset: '0',
+        borderRadius: '9999px',
+        backgroundColor: 'var(--_ring-color)',
+        opacity: '0',
+        animation: 'btu-icon-ring-spring 1200ms ease-out 200ms both',
+        pointerEvents: 'none',
+      },
+
+      /* ─── Dark mode ─── */
+      '.is-dark .btu-icon-emphasize': darkColors,
+      '.is-dark .btu-icon-emphasize svg': { color: 'oklch(0.95 0 0)' },
+      '@media (prefers-color-scheme: dark)': {
+        ':root:not([data-theme*=\'"appearance":"light"\']):not(.is-dark) .btu-icon-emphasize': darkColors,
+        ':root:not([data-theme*=\'"appearance":"light"\']):not(.is-dark) .btu-icon-emphasize svg': {
+          color: 'oklch(0.95 0 0)',
+        },
+      },
+
+      /* ─── High contrast ─── */
+      ':root.is-moreContrast .btu-icon-emphasize': highContrastColors,
+      '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+        ':root:not(.is-normalContrast) .btu-icon-emphasize': highContrastColors,
+      },
+
+      /* ─── Reduced motion ─── */
+      '@media (prefers-reduced-motion: reduce)': {
+        '.btu-icon-emphasize-pulse::before': {
+          animationDuration: '0.01ms',
+          animationDelay: '0ms',
+        },
+      },
+    })
   },
   {
     theme: {

package/dist/tailwind-plugin-loader.js

@@ -11,7 +11,7 @@ import plugin from 'tailwindcss/plugin';
  * Loaders come with light and dark styles.
  *
  * If you need to reference the loader size, you can do so with:
- * --Loader-size
+ * --loader-size
  *
  * Class Name: btu-loader
  *
@@ -20,10 +20,10 @@ import plugin from 'tailwindcss/plugin';
  */
 module.exports = plugin(function ({ addComponents, theme }) {
     const loader = {
-        '--Loader-size': '2rem',
+        '--loader-size': '2rem',
         display: 'block',
         content: 'var(--tw-content)',
-        '--tw-content': `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 50 50%27%3E %3Cstyle%3E :root %7B --Loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.light.200'))}%29; --Loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.light.600'))}%29; --btu-theme-primary-hue: 264; %7D @media %28prefers-color-scheme: dark%29 %7B :root %7B --Loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.dark.100'))}%29; --Loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.dark.700'))}%29; %7D %7D @keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29;%7D%7D @keyframes dash%7B0%25%7Bstroke-dasharray:1,200;stroke-dashoffset:0;%7D50%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-35;%7D100%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-124;%7D%7D svg %7Bwill-change:transform;position:relative;animation:rotate 1.6s linear infinite;%7D .Loader-bg %7Bwill-change:transform;fill:none;transform-origin:center;%7D .Loader-fg %7Bwill-change:transform;animation:dash 1s infinite ease-in-out;animation-fill-mode:both;fill:none;transform-origin:center;stroke-linecap:round;stroke-dasharray:1,200;stroke-dashoffset:0;%7D %3C/style%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-bg%27 stroke=%27var%28--Loader-bg-color%29%27/%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-fg%27 stroke=%27var%28--Loader-fg-color%29%27/%3E %3C/svg%3E")`,
+        '--tw-content': `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 50 50%27%3E %3Cstyle%3E :root %7B --loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.light.200'))}%29; --loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.light.600'))}%29; --btu-theme-primary-hue: 264; %7D @media %28prefers-color-scheme: dark%29 %7B :root %7B --loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.dark.100'))}%29; --loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.dark.700'))}%29; %7D %7D @keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29;%7D%7D @keyframes dash%7B0%25%7Bstroke-dasharray:1,200;stroke-dashoffset:0;%7D50%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-35;%7D100%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-124;%7D%7D svg %7Bwill-change:transform;position:relative;animation:rotate 1.6s linear infinite;%7D .Loader-bg %7Bwill-change:transform;fill:none;transform-origin:center;%7D .Loader-fg %7Bwill-change:transform;animation:dash 1s infinite ease-in-out;animation-fill-mode:both;fill:none;transform-origin:center;stroke-linecap:round;stroke-dasharray:1,200;stroke-dashoffset:0;%7D %3C/style%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-bg%27 stroke=%27var%28--loader-bg-color%29%27/%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-fg%27 stroke=%27var%28--loader-fg-color%29%27/%3E %3C/svg%3E")`,
     };
     addComponents({
         '.btu-loader': loader,

package/dist/tailwind-plugin-loader.ts

@@ -13,7 +13,7 @@ declare let module: any
  * Loaders come with light and dark styles.
  *
  * If you need to reference the loader size, you can do so with:
- * --Loader-size
+ * --loader-size
  *
  * Class Name: btu-loader
  *
@@ -23,10 +23,10 @@ declare let module: any
 
 module.exports = plugin(function ({ addComponents, theme }) {
   const loader = {
-    '--Loader-size': '2rem',
+    '--loader-size': '2rem',
     display: 'block',
     content: 'var(--tw-content)',
-    '--tw-content': `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 50 50%27%3E %3Cstyle%3E :root %7B --Loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.light.200'))}%29; --Loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.light.600'))}%29; --btu-theme-primary-hue: 264; %7D @media %28prefers-color-scheme: dark%29 %7B :root %7B --Loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.dark.100'))}%29; --Loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.dark.700'))}%29; %7D %7D @keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29;%7D%7D @keyframes dash%7B0%25%7Bstroke-dasharray:1,200;stroke-dashoffset:0;%7D50%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-35;%7D100%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-124;%7D%7D svg %7Bwill-change:transform;position:relative;animation:rotate 1.6s linear infinite;%7D .Loader-bg %7Bwill-change:transform;fill:none;transform-origin:center;%7D .Loader-fg %7Bwill-change:transform;animation:dash 1s infinite ease-in-out;animation-fill-mode:both;fill:none;transform-origin:center;stroke-linecap:round;stroke-dasharray:1,200;stroke-dashoffset:0;%7D %3C/style%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-bg%27 stroke=%27var%28--Loader-bg-color%29%27/%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-fg%27 stroke=%27var%28--Loader-fg-color%29%27/%3E %3C/svg%3E")`,
+    '--tw-content': `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 50 50%27%3E %3Cstyle%3E :root %7B --loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.light.200'))}%29; --loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.light.600'))}%29; --btu-theme-primary-hue: 264; %7D @media %28prefers-color-scheme: dark%29 %7B :root %7B --loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.dark.100'))}%29; --loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.dark.700'))}%29; %7D %7D @keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29;%7D%7D @keyframes dash%7B0%25%7Bstroke-dasharray:1,200;stroke-dashoffset:0;%7D50%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-35;%7D100%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-124;%7D%7D svg %7Bwill-change:transform;position:relative;animation:rotate 1.6s linear infinite;%7D .Loader-bg %7Bwill-change:transform;fill:none;transform-origin:center;%7D .Loader-fg %7Bwill-change:transform;animation:dash 1s infinite ease-in-out;animation-fill-mode:both;fill:none;transform-origin:center;stroke-linecap:round;stroke-dasharray:1,200;stroke-dashoffset:0;%7D %3C/style%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-bg%27 stroke=%27var%28--loader-bg-color%29%27/%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-fg%27 stroke=%27var%28--loader-fg-color%29%27/%3E %3C/svg%3E")`,
   }
   addComponents({
     '.btu-loader': loader,

package/dist/tailwind-plugin-tabs.js

@@ -1,5 +1,12 @@
 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:

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

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

@@ -2,6 +2,13 @@ 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:

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