@brightspot/ui 1.5.0 → 1.7.0

package/dist/tailwind-plugin-dropdown.ts

@@ -0,0 +1,249 @@
+import plugin from 'tailwindcss/plugin'
+import type { CSSRuleObject } from 'tailwindcss/types/config'
+declare let module: any
+
+/**
+ * Dropdown menu component styling.
+ *
+ * Class Names:
+ *
+ *  btu-dropdown-panel - Panel container with popover positioning
+ *  btu-dropdown-item - Menu item row
+ *  btu-dropdown-item-selected - Selected/checked item highlight
+ *  btu-dropdown-item-disabled - Disabled item styling (no pointer-events: none)
+ *  btu-dropdown-divider - Horizontal separator between item groups
+ *  btu-dropdown-subhead - Group heading label
+ *  btu-dropdown-header - Menu header bar
+ *  btu-dropdown-checkbox - Checkbox indicator
+ *  btu-dropdown-favorite - Favorite star button
+ *  btu-dropdown-shortcut - Keyboard shortcut text
+ *  btu-dropdown-chevron - Trigger chevron icon
+ */
+
+module.exports = plugin(function ({ addComponents, config, theme }) {
+  const itemFontSize = config('theme.fontSize.sm')?.[0] ?? '0.875rem'
+  const itemLineHeight = config('theme.fontSize.sm')?.[1] ?? '1.25rem'
+  const subheadFontSize = config('theme.fontSize.xs')?.[0] ?? '0.75rem'
+
+  const components: CSSRuleObject = {
+    /* ─── Panel ─── */
+    '.btu-dropdown-panel': {
+      backgroundColor: 'var(--dropdown-panel-background, var(--btu-theme-white))',
+      border: '1px solid var(--dropdown-panel-border-color, oklch(var(--btu-theme-gray-200)))',
+      borderRadius: `var(--dropdown-panel-border-radius, ${theme('borderRadius.lg')})`,
+      boxShadow: theme('boxShadow.lg'),
+      padding: '0.25rem 0',
+      overflow: 'auto',
+      maxHeight: 'min(20rem, 50vh)',
+
+      /* High-contrast border */
+      ':root.is-moreContrast &': {
+        borderColor: 'var(--dropdown-panel-border-color, oklch(var(--btu-theme-gray-400)))',
+      },
+      '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+        ':root:not(.is-normalContrast) &': {
+          borderColor: 'var(--dropdown-panel-border-color, oklch(var(--btu-theme-gray-400)))',
+        },
+      },
+
+      /* Exit state — hidden */
+      opacity: '0',
+
+      /* Transitions with allow-discrete for display/overlay */
+      transition: `opacity 150ms ease`,
+      '@supports (transition-behavior: allow-discrete)': {
+        transition: `opacity 150ms ease, display 150ms allow-discrete, overlay 150ms allow-discrete`,
+      },
+
+      /* Reduced motion */
+      '@media (prefers-reduced-motion: reduce)': {
+        transition: 'opacity 0.01ms ease',
+        '@supports (transition-behavior: allow-discrete)': {
+          transition: 'opacity 0.01ms ease, display 0.01ms allow-discrete, overlay 0.01ms allow-discrete',
+        },
+      },
+    },
+    /* Entry state — visible (popover open) */
+    '.btu-dropdown-panel:popover-open': {
+      opacity: '1',
+    },
+    /* Starting style for entry animation */
+    '@starting-style': {
+      '.btu-dropdown-panel:popover-open': {
+        opacity: '0',
+      },
+    } as any,
+
+    /* ─── Header ─── */
+    '.btu-dropdown-header': {
+      display: 'flex',
+      alignItems: 'center',
+      padding: '0.5rem 0.75rem',
+      fontSize: subheadFontSize,
+      fontWeight: theme('fontWeight.semibold'),
+      color: 'oklch(var(--btu-theme-gray-900))',
+      borderBottom: '1px solid var(--dropdown-divider-color, oklch(var(--btu-theme-gray-200)))',
+      marginBottom: '0.25rem',
+    },
+
+    /* ─── Empty state ─── */
+    '.btu-dropdown-empty': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '1rem',
+      fontSize: itemFontSize,
+      color: 'var(--dropdown-empty-color, oklch(var(--btu-theme-gray-400)))',
+    },
+
+    /* ─── Item ─── */
+    '.btu-dropdown-item': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.5rem',
+      padding: '0.375rem 0.75rem',
+      fontSize: `var(--dropdown-item-font-size, ${itemFontSize})`,
+      lineHeight: itemLineHeight,
+      color: 'var(--dropdown-item-color, oklch(var(--btu-theme-gray-700)))',
+      backgroundColor: 'var(--dropdown-item-background, transparent)',
+      cursor: 'pointer',
+      userSelect: 'none',
+      outline: 'none',
+      whiteSpace: 'nowrap',
+
+      '&:hover': {
+        backgroundColor: 'var(--dropdown-item-hover-background, oklch(var(--btu-theme-gray-100)))',
+        color: 'var(--dropdown-item-hover-color, oklch(var(--btu-theme-gray-900)))',
+      },
+      '&:focus-visible': {
+        backgroundColor: 'var(--dropdown-item-hover-background, oklch(var(--btu-theme-gray-100)))',
+        color: 'var(--dropdown-item-hover-color, oklch(var(--btu-theme-gray-900)))',
+      },
+    },
+
+    '.btu-dropdown-item-selected': {
+      backgroundColor: 'var(--dropdown-item-selected-background, oklch(var(--btu-theme-primary-50)))',
+      color: 'var(--dropdown-item-selected-color, oklch(var(--btu-theme-primary-700)))',
+      '&:hover': {
+        backgroundColor: 'var(--dropdown-item-selected-background, oklch(var(--btu-theme-primary-50)))',
+        color: 'var(--dropdown-item-selected-color, oklch(var(--btu-theme-primary-700)))',
+      },
+      '&:focus-visible': {
+        backgroundColor: 'var(--dropdown-item-selected-background, oklch(var(--btu-theme-primary-50)))',
+        color: 'var(--dropdown-item-selected-color, oklch(var(--btu-theme-primary-700)))',
+      },
+    },
+
+    '.btu-dropdown-item-disabled': {
+      opacity: '0.5',
+      cursor: 'default',
+
+      ':root.is-moreContrast &': {
+        opacity: '0.4',
+      },
+      '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+        ':root:not(.is-normalContrast) &': {
+          opacity: '0.4',
+        },
+      },
+    },
+
+    /* ─── Checkbox indicator ─── */
+    '.btu-dropdown-checkbox': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '1rem',
+      height: '1rem',
+      flexShrink: '0',
+      borderRadius: theme('borderRadius.sm'),
+      border: '1px solid oklch(var(--btu-theme-gray-300))',
+      backgroundColor: 'transparent',
+      color: 'transparent',
+    },
+    '.btu-dropdown-checkbox-checked': {
+      backgroundColor: 'oklch(var(--btu-theme-primary-600))',
+      borderColor: 'oklch(var(--btu-theme-primary-600))',
+      color: 'var(--btu-theme-white)',
+    },
+
+    /* ─── Divider ─── */
+    '.btu-dropdown-divider': {
+      borderTop: '1px solid var(--dropdown-divider-color, oklch(var(--btu-theme-gray-200)))',
+      margin: '0.25rem 0',
+    },
+
+    /* ─── Subhead ─── */
+    '.btu-dropdown-subhead': {
+      padding: '0.5rem 0.75rem 0.25rem',
+      fontSize: subheadFontSize,
+      fontWeight: theme('fontWeight.semibold'),
+      color: 'oklch(var(--btu-theme-gray-500))',
+      textTransform: 'uppercase',
+      letterSpacing: '0.05em',
+      lineHeight: '1rem',
+    },
+
+    /* ─── Favorite star ─── */
+    'button.btu-dropdown-favorite': {
+      flexShrink: '0',
+      marginLeft: 'auto',
+      color: 'oklch(var(--btu-theme-gray-400))',
+      '&:hover': {
+        color: 'oklch(var(--btu-theme-warning-500))',
+      },
+    },
+    'button.btu-dropdown-favorite-active': {
+      color: 'oklch(var(--btu-theme-warning-500))',
+    },
+
+    /* ─── Shortcut text ─── */
+    '.btu-dropdown-shortcut': {
+      marginLeft: 'auto',
+      fontSize: subheadFontSize,
+      color: 'oklch(var(--btu-theme-gray-400))',
+    },
+
+    /* ─── Disabled trigger ─── */
+    'btu-dropdown[disabled]': {
+      opacity: '0.5',
+      pointerEvents: 'none',
+    },
+
+    /* ─── Chevron ─── */
+    '.btu-dropdown-chevron': {
+      transition: 'transform 200ms ease',
+      flexShrink: '0',
+    },
+    /* Icon-only trigger with chevron: override square sizing so both icons fit */
+    '.btu-button-text-hidden:has(.btu-dropdown-chevron)': {
+      width: 'auto',
+      gap: '0.5rem',
+    },
+    'btu-dropdown[open] .btu-dropdown-chevron': {
+      transform: 'rotate(180deg)',
+    },
+
+    /* ─── Item icon container ─── */
+    '.btu-dropdown-item-icon': {
+      display: 'inline-flex',
+      flexShrink: '0',
+    },
+
+    /* ─── Item label ─── */
+    '.btu-dropdown-item-label': {
+      flex: '1',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+
+    /* ─── Selected check mark (non-checkbox mode) ─── */
+    '.btu-dropdown-check': {
+      display: 'inline-flex',
+      flexShrink: '0',
+      color: 'oklch(var(--btu-theme-primary-600))',
+    },
+  }
+
+  addComponents(components)
+})

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

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

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

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

package/dist/tailwind-plugin-pagination.js

@@ -0,0 +1,164 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Pagination component styles.
+ *
+ * Class Names:
+ *
+ *  btu-pagination           - Root container
+ *  btu-pagination-hidden    - Hidden state (single page / no items)
+ *  btu-pagination-disabled  - Disabled state
+ *  btu-pagination-loading   - Loading state with dimmed controls
+ *  btu-pagination-nav       - Inner nav wrapper
+ *  btu-pagination-size-changer - Page size select area
+ *  btu-pagination-select    - Native select element
+ *  btu-pagination-total     - "1-10 of 200" display
+ *  btu-pagination-controls  - Button group container
+ *  btu-pagination-jumper    - Slot area for custom jumper content
+ *
+ * Navigation buttons use btu-button classes (btu-button btu-button-text-hidden
+ * btu-button-sm). The controls container overrides
+ * border-radius for grouped button appearance.
+ *
+ * CSS Custom Properties:
+ *
+ *  --pagination-color-background  - Select background
+ *  --pagination-color-foreground  - Text/icon color
+ */
+// Inline chevron-down SVG for select background
+const chevronDownSvg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`;
+module.exports = plugin(function ({ addComponents, config }) {
+    const fontSize_sm = config('theme.fontSize.sm')?.[0] ?? '0.875rem';
+    const fontSize_xs = config('theme.fontSize.xs')?.[0] ?? '0.75rem';
+    addComponents({
+        '.btu-pagination': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '0.75rem',
+            fontSize: fontSize_sm,
+            color: 'var(--pagination-color-foreground, oklch(var(--btu-theme-gray-700)))',
+        },
+        '.btu-pagination-hidden': {
+            display: 'none',
+        },
+        '.btu-pagination-disabled': {
+            opacity: '0.5',
+            pointerEvents: 'none',
+        },
+        '.btu-pagination-loading': {
+            pointerEvents: 'none',
+            '& .btu-pagination-size-changer': {
+                opacity: '0.5',
+            },
+            '& .btu-pagination-total': {
+                opacity: '0.5',
+            },
+            '& .btu-pagination-controls > .btu-button': {
+                opacity: '0.5',
+            },
+            '& .btu-pagination-controls > btu-circular-progress': {
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: 'translate(-50%, -50%)',
+                zIndex: '1',
+            },
+        },
+        '.btu-pagination-nav': {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.75rem',
+            width: '100%',
+        },
+        '.btu-pagination-size-changer': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+            '&:empty': {
+                display: 'none',
+            },
+        },
+        '.btu-pagination-select': {
+            appearance: 'none',
+            background: 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
+            border: '1px solid oklch(var(--btu-theme-gray-300))',
+            borderRadius: '0.5rem',
+            padding: '0.375rem 1.75rem 0.375rem 0.5rem',
+            fontSize: fontSize_sm,
+            color: 'inherit',
+            cursor: 'pointer',
+            backgroundImage: chevronDownSvg,
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'right 0.5rem center',
+            backgroundSize: '1rem',
+            '&:focus-visible': {
+                outline: '2px solid oklch(var(--btu-theme-primary-400))',
+                outlineOffset: '-1px',
+            },
+        },
+        '.btu-pagination-total': {
+            fontSize: fontSize_xs,
+            color: 'oklch(var(--btu-theme-gray-500))',
+            fontWeight: '500',
+            whiteSpace: 'nowrap',
+        },
+        // When size-changer is hidden (empty), push total right next to controls
+        '.btu-pagination-size-changer:empty + .btu-pagination-total': {
+            marginLeft: 'auto',
+        },
+        '.btu-pagination-controls': {
+            position: 'relative',
+            display: 'inline-flex',
+            alignItems: 'center',
+            marginLeft: 'auto',
+            border: '1px solid oklch(var(--btu-theme-gray-300))',
+            borderRadius: '0.5rem',
+            '& > :first-child': {
+                borderTopLeftRadius: 'calc(0.5rem - 1px)',
+                borderBottomLeftRadius: 'calc(0.5rem - 1px)',
+            },
+            '& > :last-child': {
+                borderTopRightRadius: 'calc(0.5rem - 1px)',
+                borderBottomRightRadius: 'calc(0.5rem - 1px)',
+            },
+            '& > :focus-visible': {
+                zIndex: '1',
+                outline: 'none',
+                boxShadow: '0 0 0 1px oklch(var(--btu-theme-primary-400)), 0 0 0 4px oklch(var(--btu-theme-primary-100))',
+                borderRadius: 'calc(0.5rem - 1px)',
+            },
+            '& > :focus-within': {
+                zIndex: '1',
+                outline: 'none',
+                boxShadow: '0 0 0 1px oklch(var(--btu-theme-primary-400)), 0 0 0 4px oklch(var(--btu-theme-primary-100))',
+                borderRadius: 'calc(0.5rem - 1px)',
+                '& :focus-visible': {
+                    outline: 'none',
+                    boxShadow: 'none',
+                },
+            },
+        },
+        '.btu-pagination-controls > .btu-button': {
+            '--button-border-radius': '0',
+            '--button-color': 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
+            borderRight: '1px solid oklch(var(--btu-theme-gray-200))',
+            '&:last-child': {
+                borderRight: 'none',
+            },
+            '&:disabled': {
+                color: 'oklch(var(--btu-theme-gray-400))',
+            },
+        },
+        '.btu-pagination-jumper': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            background: 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
+            '&:empty': {
+                display: 'none',
+            },
+            '&:not(:empty)': {
+                borderRight: '1px solid oklch(var(--btu-theme-gray-200))',
+            },
+        },
+    });
+});
+//# sourceMappingURL=tailwind-plugin-pagination.js.map

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

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

package/dist/tailwind-plugin-pagination.ts

@@ -0,0 +1,179 @@
+import plugin from 'tailwindcss/plugin'
+declare let module: any
+
+/**
+ * Pagination component styles.
+ *
+ * Class Names:
+ *
+ *  btu-pagination           - Root container
+ *  btu-pagination-hidden    - Hidden state (single page / no items)
+ *  btu-pagination-disabled  - Disabled state
+ *  btu-pagination-loading   - Loading state with dimmed controls
+ *  btu-pagination-nav       - Inner nav wrapper
+ *  btu-pagination-size-changer - Page size select area
+ *  btu-pagination-select    - Native select element
+ *  btu-pagination-total     - "1-10 of 200" display
+ *  btu-pagination-controls  - Button group container
+ *  btu-pagination-jumper    - Slot area for custom jumper content
+ *
+ * Navigation buttons use btu-button classes (btu-button btu-button-text-hidden
+ * btu-button-sm). The controls container overrides
+ * border-radius for grouped button appearance.
+ *
+ * CSS Custom Properties:
+ *
+ *  --pagination-color-background  - Select background
+ *  --pagination-color-foreground  - Text/icon color
+ */
+
+// Inline chevron-down SVG for select background
+const chevronDownSvg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`
+
+module.exports = plugin(function ({ addComponents, config }) {
+  const fontSize_sm = config('theme.fontSize.sm')?.[0] ?? '0.875rem'
+  const fontSize_xs = config('theme.fontSize.xs')?.[0] ?? '0.75rem'
+
+  addComponents({
+    '.btu-pagination': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '0.75rem',
+      fontSize: fontSize_sm,
+      color: 'var(--pagination-color-foreground, oklch(var(--btu-theme-gray-700)))',
+    },
+
+    '.btu-pagination-hidden': {
+      display: 'none',
+    },
+
+    '.btu-pagination-disabled': {
+      opacity: '0.5',
+      pointerEvents: 'none',
+    },
+
+    '.btu-pagination-loading': {
+      pointerEvents: 'none',
+      '& .btu-pagination-size-changer': {
+        opacity: '0.5',
+      },
+      '& .btu-pagination-total': {
+        opacity: '0.5',
+      },
+      '& .btu-pagination-controls > .btu-button': {
+        opacity: '0.5',
+      },
+      '& .btu-pagination-controls > btu-circular-progress': {
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        zIndex: '1',
+      },
+    },
+
+    '.btu-pagination-nav': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.75rem',
+      width: '100%',
+    },
+
+    '.btu-pagination-size-changer': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '0.5rem',
+      '&:empty': {
+        display: 'none',
+      },
+    },
+
+    '.btu-pagination-select': {
+      appearance: 'none',
+      background: 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
+      border: '1px solid oklch(var(--btu-theme-gray-300))',
+      borderRadius: '0.5rem',
+      padding: '0.375rem 1.75rem 0.375rem 0.5rem',
+      fontSize: fontSize_sm,
+      color: 'inherit',
+      cursor: 'pointer',
+      backgroundImage: chevronDownSvg,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'right 0.5rem center',
+      backgroundSize: '1rem',
+      '&:focus-visible': {
+        outline: '2px solid oklch(var(--btu-theme-primary-400))',
+        outlineOffset: '-1px',
+      },
+    },
+
+    '.btu-pagination-total': {
+      fontSize: fontSize_xs,
+      color: 'oklch(var(--btu-theme-gray-500))',
+      fontWeight: '500',
+      whiteSpace: 'nowrap',
+    },
+
+    // When size-changer is hidden (empty), push total right next to controls
+    '.btu-pagination-size-changer:empty + .btu-pagination-total': {
+      marginLeft: 'auto',
+    },
+
+    '.btu-pagination-controls': {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      marginLeft: 'auto',
+      border: '1px solid oklch(var(--btu-theme-gray-300))',
+      borderRadius: '0.5rem',
+      '& > :first-child': {
+        borderTopLeftRadius: 'calc(0.5rem - 1px)',
+        borderBottomLeftRadius: 'calc(0.5rem - 1px)',
+      },
+      '& > :last-child': {
+        borderTopRightRadius: 'calc(0.5rem - 1px)',
+        borderBottomRightRadius: 'calc(0.5rem - 1px)',
+      },
+      '& > :focus-visible': {
+        zIndex: '1',
+        outline: 'none',
+        boxShadow: '0 0 0 1px oklch(var(--btu-theme-primary-400)), 0 0 0 4px oklch(var(--btu-theme-primary-100))',
+        borderRadius: 'calc(0.5rem - 1px)',
+      },
+      '& > :focus-within': {
+        zIndex: '1',
+        outline: 'none',
+        boxShadow: '0 0 0 1px oklch(var(--btu-theme-primary-400)), 0 0 0 4px oklch(var(--btu-theme-primary-100))',
+        borderRadius: 'calc(0.5rem - 1px)',
+        '& :focus-visible': {
+          outline: 'none',
+          boxShadow: 'none',
+        },
+      },
+    },
+
+    '.btu-pagination-controls > .btu-button': {
+      '--button-border-radius': '0',
+      '--button-color': 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
+      borderRight: '1px solid oklch(var(--btu-theme-gray-200))',
+      '&:last-child': {
+        borderRight: 'none',
+      },
+      '&:disabled': {
+        color: 'oklch(var(--btu-theme-gray-400))',
+      },
+    },
+
+    '.btu-pagination-jumper': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      background: 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
+      '&:empty': {
+        display: 'none',
+      },
+      '&:not(:empty)': {
+        borderRight: '1px solid oklch(var(--btu-theme-gray-200))',
+      },
+    },
+  })
+})

package/dist/tailwind.config.d.ts

@@ -705,10 +705,7 @@ declare const _default: {
             starFilled: string;
         };
     };
-    plugins: {
-        handler: import("tailwindcss/types/config").PluginCreator;
-        config?: Partial<import("tailwindcss/types/config").Config>;
-    }[];
+    plugins: any[];
 };
 export default _default;
 //# sourceMappingURL=tailwind.config.d.ts.map

package/dist/tailwind.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.config.d.ts","sourceRoot":"","sources":["../src/tailwind.config.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA6c8B;gBAAE,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;aAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAxchE,wBAooBkB"}
+{"version":3,"file":"tailwind.config.d.ts","sourceRoot":"","sources":["../src/tailwind.config.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA6c8B;gBAAE,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;aAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAxchE,wBAqoBkB"}

package/dist/tailwind.config.js

@@ -623,6 +623,7 @@ export default {
         plugin(({ addVariant }) => {
             addVariant('touch-device', '@media (hover: none) or (pointer: coarse)');
         }),
+        require('./tailwind-plugin-pagination.ts'),
     ],
 };
 //# sourceMappingURL=tailwind.config.js.map