erp-pro-ui 0.1.5 → 0.1.7

package/README.md

@@ -53,7 +53,7 @@ In your global stylesheet:
 
 That single import already loads the packaged colors, fonts, foundations, and generated Tailwind v4 tokens. You do not need a local Tailwind theme extension just to use the library palette.
 
-Prefer the semantic utilities and `--ds-*` tokens in new code. The older `--color-*` and `primary-*` aliases are still shipped as a migration surface, not as the preferred authoring API.
+Use DS-only tokens and utilities in new code. The official contract is `--ds-*` plus DS utility classes (for example `text-ds-1`, `bg-ds-surface-1`, `border-ds-border-2`).
 
 If you only want the raw design tokens without the Tailwind bridge, import the internal token layer directly instead:
 
@@ -117,7 +117,7 @@ If you use Next.js, import `erp-pro-ui/styles.css` from your app-level global st
 
 The library now ships a two-layer theme contract so another project can use the same tokens without copying theme config:
 
-- `erp-pro-ui/tokens.css`: raw `--ds-*` tokens plus compatibility CSS variables
+- `erp-pro-ui/tokens.css`: raw `--ds-*` tokens
 - `erp-pro-ui/colors.css`: Tailwind v4 `@theme` bridge that generates semantic utilities
 - `erp-pro-ui/styles.css`: full package stylesheet, including fonts, tokens, bridge, foundations, and animations
 
@@ -128,22 +128,22 @@ After importing `erp-pro-ui/styles.css` or `erp-pro-ui/colors.css`, you can use
 ```tsx
 export function ThemePreview() {
   return (
-    <section className="bg-surface text-fg border border-border rounded-2xl p-6 shadow-2 font-sans">
-      <h2 className="text-accent text-2xl font-semibold">
+    <section className="bg-ds-surface-1 text-ds-1 border border-ds-border-2 rounded-2xl p-6 shadow-2 font-sans">
+      <h2 className="text-ds-1 text-2xl font-semibold">
         Semantic theme utilities
       </h2>
-      <p className="text-fg-muted">
+      <p className="text-ds-2">
         These classes come from erp-pro-ui. No local Tailwind theme extension is
         required.
       </p>
       <div className="mt-4 flex gap-3">
-        <span className="bg-accent text-on-accent rounded-full px-3 py-1">
+        <span className="bg-ds-accent text-ds-on-accent rounded-full px-3 py-1">
           Accent
         </span>
-        <span className="bg-accent-subtle text-accent rounded-full px-3 py-1">
+        <span className="bg-ds-accent-subtle text-ds-1 rounded-full px-3 py-1">
           Accent Subtle
         </span>
-        <span className="bg-success-subtle text-success rounded-full px-3 py-1">
+        <span className="bg-ds-state-success-surface text-ds-state-success-text rounded-full px-3 py-1">
           Success
         </span>
       </div>
@@ -207,21 +207,99 @@ import { BarChart, getChartColorVar } from "erp-pro-ui";
 The token system is split into stable layers:
 
 - Internal design-system tokens: `--ds-*`
-- Semantic utility aliases: `bg-surface`, `text-fg`, `border-border`, `bg-accent`, `text-on-accent`, `outline-focus`
-- Compatibility color variables: `--color-primary`, `--color-background-primary`, `--color-text-primary`, and the existing `primary-50` through `primary-900` theme scale
-
-For new components, use the semantic utility layer or the `--ds-*` variables directly. Keep the compatibility aliases for migration work and external consumers that still rely on the legacy contract.
+- DS utility classes: `bg-ds-surface-1`, `text-ds-1`, `border-ds-border-2`, `bg-ds-accent`, `text-ds-on-accent`, `ring-ds-focus`
+- Raw DS tokens: `--ds-surface-*`, `--ds-text-*`, `--ds-border-*`, `--ds-color-*`
+
+### Token contract rules
+
+Use these rules to keep theming simple and predictable across apps:
+
+- Edit theme values only in `tokens.css` brand/mode/variant blocks (`data-brand`, `data-mode`, `data-variant`).
+- Use DS utility classes in component markup (`text-ds-*`, `bg-ds-*`, `border-ds-*`).
+- Do not re-introduce legacy utility aliases (`text-foreground`, `text-muted-foreground`, `text-accent`, `bg-background*`).
+- Do not use raw `text-[var(...)]`, `bg-[var(...)]`, `border-[var(...)]` utility classes in components.
+- Keep official brand presets hue-first: `purple`, `teal`, `yellow`, `green`.
+
+Single rule for theming:
+
+- If you want a different UI color, update the matching `--ds-*` token in the correct theme block. Do not hardcode color values in components.
+
+### Token priority and quick groups
+
+Priority order (top to bottom):
+
+1. Global foundation defaults (`:root` / `:host`)
+2. Global mode overrides (dark/light + system fallback)
+3. Brand accent scales (`purple` / `teal` / `yellow` / `green`)
+4. Brand + mode surface/text/border overrides
+5. Global variant overrides (`light-alt` / `dark-alt`)
+
+When debugging a color:
+
+- Check `--ds-surface-*` (background layers)
+- Check `--ds-text-*` (text hierarchy)
+- Check `--ds-border-*` (border hierarchy)
+- Check `--ds-accent-*` (brand accents)
+
+Quick groups:
+
+- `--ds-surface-*`: background layers
+  - `--ds-surface-canvas`: main app/page background
+  - `--ds-surface-1`: default card/panel background on top of canvas
+  - `--ds-surface-2`: elevated background (modal/popover/raised panel)
+- `--ds-text-*`: text hierarchy
+  - `--ds-text-1`: primary text (titles, key content)
+  - `--ds-text-2`: secondary text (supporting labels/metadata)
+  - `--ds-text-3`: tertiary text (hints/helper/low emphasis)
+- `--ds-border-*`: border hierarchy
+  - `--ds-border-1`: strongest border
+  - `--ds-border-2`: default border
+  - `--ds-border-3`: subtle border
+  - `--ds-border-field`: input border
+- `--ds-accent-*`: brand accent scale
+  - `--ds-accent-50..900`: light to dark scale
+  - `--ds-accent`: active accent for CTA/active states
+  - `--ds-accent-contrast`: text/icon color on accent backgrounds
+- `--ds-color-*`: semantic derived tokens
+  - `--ds-color-bg-*`: semantic backgrounds
+  - `--ds-color-fg*`: semantic text
+  - `--ds-color-border*`: semantic borders
+  - `--ds-color-accent*`: interaction/brand states
+  - status tokens: success, warning, danger, info, disabled
 
 ### Theme switching
 
-If you use `ThemeProvider`, the library updates `data-brand` and `data-mode` for you. It still writes the old `data-theme` attribute for compatibility, but the new architecture treats brand and mode as separate axes.
+If you use `ThemeProvider`, the library updates `data-brand`, `data-mode`, and `data-variant` for you.
 
 If you do not use `ThemeProvider`, you can still switch manually in your app shell:
 
 ```html
-<html data-brand="teal" data-mode="dark"></html>
+<html data-brand="teal" data-mode="light" data-variant="alt"></html>
 ```
 
+Quick mental model:
+
+- `data-brand` controls accent family and brand-specific palette.
+- `data-mode` controls light/dark surface, text, and border foundations.
+- `data-variant` controls which foundation variant to use (`default` or `alt`) in both light and dark modes.
+- `data-dark-variant` remains supported temporarily as a compatibility alias during migration.
+- Components consume semantic tokens, so they update automatically.
+
+### Brand palette presets (light + dark)
+
+The shipped token presets include a tinted SaaS surface system for each brand. When you switch brand, mode, or variant, semantic tokens (`bg-ds-surface-1`, `text-ds-1`, `border-ds-border-2`) update automatically. Both `light-alt` and `dark-alt` use shared foundations while each brand keeps its own accent family.
+
+| Brand preset | Light default canvas / surface / stroke / text | Light alt canvas / surface / stroke | Dark default canvas / surface / stroke / text | Dark alt canvas / surface / stroke |
+| ------------ | ---------------------------------------------- | ----------------------------------- | --------------------------------------------- | ---------------------------------- |
+| `purple`     | `#F4F7FE` / `#FFFFFF` / `#E9EDF7` / `#2B3674`  | `#F4F7FE` / `#FEFEFF` / `#A3AED0`   | `#0A0B1C` / `#161936` / `#2B308B` / `#EFF4FB` | `#0F111A` / `#1A1D29` / `#2D3748`  |
+| `teal`       | `#F0F9FA` / `#FFFFFF` / `#D1E9ED` / `#134E48`  | `#F4F7FE` / `#FEFEFF` / `#A3AED0`   | `#061113` / `#0E2529` / `#1A4D57` / `#E0F2F1` | `#0F111A` / `#1A1D29` / `#2D3748`  |
+| `yellow`     | `#FEFCE8` / `#FFFFFF` / `#FEF08A` / `#854D0E`  | `#F4F7FE` / `#FEFEFF` / `#A3AED0`   | `#121002` / `#241D05` / `#4D3D02` / `#FEF9C3` | `#0F111A` / `#1A1D29` / `#2D3748`  |
+| `green`      | `#F0FDF4` / `#FFFFFF` / `#DCFCE7` / `#064E3B`  | `#F4F7FE` / `#FEFEFF` / `#A3AED0`   | `#020C09` / `#06241B` / `#065F46` / `#D1FAE5` | `#0F111A` / `#1A1D29` / `#2D3748`  |
+
+You can target these via:
+
+- `data-brand="purple|teal|yellow|green"` + `data-mode="light|dark"` + optional `data-variant="default|alt"`
+
 ## Import Patterns
 
 Use whichever public import style fits your project.
@@ -447,19 +525,20 @@ The tables below document the public surface you can use from another project.
 
 ### Data Display And Charts
 
-| Export                                                            | Subpath                    | Use it for                                        |
-| ----------------------------------------------------------------- | -------------------------- | ------------------------------------------------- |
-| `Card`                                                            | `erp-pro-ui/card`          | Panel and container layout                        |
-| `Chip`                                                            | `erp-pro-ui/chip`          | Tags, status pills, and labels                    |
-| `ColorPalette`                                                    | `erp-pro-ui/color-palette` | Design token or palette presentation              |
-| `DataTable`                                                       | `erp-pro-ui/data-table`    | Feature-rich tables with filtering and pagination |
-| `FilterDropdown`, `FilterButton`, `ColumnToggle`, `FilterProfile` | `erp-pro-ui/data-table`    | DataTable helper building blocks                  |
-| `AreaChart`                                                       | `erp-pro-ui/charts`        | Area chart visualizations                         |
-| `BarChart`                                                        | `erp-pro-ui/charts`        | Bar chart visualizations                          |
-| `PieChart`                                                        | `erp-pro-ui/charts`        | Pie and donut charts                              |
-| `NeonLineChart`                                                   | `erp-pro-ui/charts`        | Glowing line charts                               |
-| `StackedBarChart`                                                 | `erp-pro-ui/charts`        | Stacked comparisons                               |
-| `ThinBreakdownBar`                                                | `erp-pro-ui/charts`        | Compact segmented metric bars                     |
+| Export                                                                                                                     | Subpath                    | Use it for                                        |
+| -------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------------------------------------- |
+| `Card`                                                                                                                     | `erp-pro-ui/card`          | Panel and container layout                        |
+| `Chip`                                                                                                                     | `erp-pro-ui/chip`          | Tags, status pills, and labels                    |
+| `ColorPalette`                                                                                                             | `erp-pro-ui/color-palette` | Design token or palette presentation              |
+| `DataTable`                                                                                                                | `erp-pro-ui/data-table`    | Feature-rich tables with filtering and pagination |
+| `FilterDropdown`, `FilterButton`, `ColumnToggle`, `FilterProfile`                                                          | `erp-pro-ui/data-table`    | DataTable helper building blocks                  |
+| `TableContainer`, `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption` | `erp-pro-ui/data-table`    | Composable table primitives with style control    |
+| `AreaChart`                                                                                                                | `erp-pro-ui/charts`        | Area chart visualizations                         |
+| `BarChart`                                                                                                                 | `erp-pro-ui/charts`        | Bar chart visualizations                          |
+| `PieChart`                                                                                                                 | `erp-pro-ui/charts`        | Pie and donut charts                              |
+| `NeonLineChart`                                                                                                            | `erp-pro-ui/charts`        | Glowing line charts                               |
+| `StackedBarChart`                                                                                                          | `erp-pro-ui/charts`        | Stacked comparisons                               |
+| `ThinBreakdownBar`                                                                                                         | `erp-pro-ui/charts`        | Compact segmented metric bars                     |
 
 ### Visual Effects And Text Components
 
@@ -527,6 +606,36 @@ const rows = [
 <DataTable columns={columns} data={rows} searchPlaceholder="Search users" />;
 ```
 
+### Composable table primitives
+
+```tsx
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "erp-pro-ui";
+
+<Table>
+  <TableCaption>Quarterly summary</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Role</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Ava Stone</TableCell>
+      <TableCell>Admin</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>;
+```
+
 ### Charts
 
 ```tsx

package/dist/accordion.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_accordion = require("./chunks/accordion-CxJYq_6x.cjs");
+const require_accordion = require("./chunks/accordion-CmB6EidC.cjs");
 exports.Accordion = require_accordion.Accordion;

package/dist/accordion.mjs

@@ -1,2 +1,2 @@
-import { t as Accordion } from "./chunks/accordion-Dwm6yH0C.mjs";
+import { t as Accordion } from "./chunks/accordion-6zxJUYXr.mjs";
 export { Accordion };

package/dist/alert.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_alert = require("./chunks/alert-Cc-jD7qn.cjs");
+const require_alert = require("./chunks/alert-C5KEeQqh.cjs");
 exports.Alert = require_alert.Alert;

package/dist/alert.mjs

@@ -1,2 +1,2 @@
-import { t as Alert } from "./chunks/alert-BJWReBBk.mjs";
+import { t as Alert } from "./chunks/alert-XVmYJgds.mjs";
 export { Alert };

package/dist/animations.css

@@ -23,8 +23,8 @@
   width: var(--size);
   background: linear-gradient(
     to left,
-    var(--color-from),
-    var(--color-to),
+    var(--beam-color-from),
+    var(--beam-color-to),
     transparent
   );
   offset-anchor: calc(var(--anchor) * 1%) 50%;

package/dist/ascii-text.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_ascii_text = require("./chunks/ascii-text-Bh4HjIrL.cjs");
+const require_ascii_text = require("./chunks/ascii-text-BP-BBy0-.cjs");
 exports.ASCIIText = require_ascii_text.ASCIIText;

package/dist/background-gradient-animation.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_background_gradient_animation = require("./chunks/background-gradient-animation-C0jV3b6l.cjs");
+const require_background_gradient_animation = require("./chunks/background-gradient-animation-II9hdrgB.cjs");
 exports.BackgroundGradientAnimation = require_background_gradient_animation.BackgroundGradientAnimation;
 exports.BackgroundGradientAnimationDemo = require_background_gradient_animation.BackgroundGradientAnimationDemo;

package/dist/background-gradient-animation.mjs

@@ -1,2 +1,2 @@
-import { n as BackgroundGradientAnimation, t as BackgroundGradientAnimationDemo } from "./chunks/background-gradient-animation-BNztOaAL.mjs";
+import { n as BackgroundGradientAnimation, t as BackgroundGradientAnimationDemo } from "./chunks/background-gradient-animation-DpKJ3ecq.mjs";
 export { BackgroundGradientAnimation, BackgroundGradientAnimationDemo };

package/dist/button-hover-border-gradient.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_button_hover_border_gradient = require("./chunks/button-hover-border-gradient-B_JuE939.cjs");
+const require_button_hover_border_gradient = require("./chunks/button-hover-border-gradient-DX2lBG5C.cjs");
 exports.ButtonHoverBorderGradient = require_button_hover_border_gradient.ButtonHoverBorderGradient;

package/dist/button-hover-border-gradient.mjs

@@ -1,2 +1,2 @@
-import { t as ButtonHoverBorderGradient } from "./chunks/button-hover-border-gradient-TmQPZyYW.mjs";
+import { t as ButtonHoverBorderGradient } from "./chunks/button-hover-border-gradient-DFppVRI4.mjs";
 export { ButtonHoverBorderGradient };

package/dist/button.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_button = require("./chunks/button-sVzhc451.cjs");
+const require_button = require("./chunks/button-xqernofO.cjs");
 exports.Button = require_button.Button;

package/dist/button.mjs

@@ -1,2 +1,2 @@
-import { t as Button } from "./chunks/button-NwWcZaCl.mjs";
+import { t as Button } from "./chunks/button-DddUhuR-.mjs";
 export { Button };

package/dist/calendar.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_calendar = require("./chunks/calendar-B8yy-7Se.cjs");
+const require_calendar = require("./chunks/calendar-DuCKr6b7.cjs");
 exports.Calendar = require_calendar.Calendar;

package/dist/calendar.mjs

@@ -1,2 +1,2 @@
-import { t as Calendar } from "./chunks/calendar-wZGU7o1B.mjs";
+import { t as Calendar } from "./chunks/calendar-Cp84V2rY.mjs";
 export { Calendar };

package/dist/card.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_card = require("./chunks/card-CAzOcjaC.cjs");
+const require_card = require("./chunks/card-CqPDr6Tt.cjs");
 exports.Card = require_card.Card;

package/dist/card.mjs

@@ -1,2 +1,2 @@
-import { t as Card } from "./chunks/card-BOTJSO1o.mjs";
+import { t as Card } from "./chunks/card-SpHHNB0c.mjs";
 export { Card };

package/dist/carousel.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_carousel = require("./chunks/carousel-Crpz33XV.cjs");
+const require_carousel = require("./chunks/carousel-YlRLOGkM.cjs");
 exports.Carousel = require_carousel.Carousel;

package/dist/carousel.mjs

@@ -1,2 +1,2 @@
-import { t as Carousel } from "./chunks/carousel-BCMk0v5p.mjs";
+import { t as Carousel } from "./chunks/carousel-C1skQ65z.mjs";
 export { Carousel };

package/dist/charts.cjs

@@ -1,7 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_charts = require("./chunks/charts-D1pdxSiu.cjs");
+const require_charts = require("./chunks/charts-CZEYcr6X.cjs");
 exports.AreaChart = require_charts.AreaChart;
 exports.BarChart = require_charts.BarChart;
+exports.MiniNeonSparkline = require_charts.MiniNeonSparkline;
 exports.NeonLineChart = require_charts.NeonLineChart;
 exports.PieChart = require_charts.PieChart;
 exports.PositiveNegativeBarChart = require_charts.PositiveNegativeBarChart;

package/dist/charts.mjs

@@ -1,2 +1,2 @@
-import { a as ThinBreakdownBar, c as chartColorTokens, i as AreaChart, l as getChartColorVar, n as PositiveNegativeBarChart, o as StackedBarChart, r as BarChart, s as NeonLineChart, t as PieChart, u as getChartPalette } from "./chunks/charts-9OPShAea.mjs";
-export { AreaChart, BarChart, NeonLineChart, PieChart, PositiveNegativeBarChart, StackedBarChart, ThinBreakdownBar, chartColorTokens, getChartColorVar, getChartPalette };
+import { a as ThinBreakdownBar, c as NeonLineChart, d as getChartPalette, i as AreaChart, l as chartColorTokens, n as PositiveNegativeBarChart, o as StackedBarChart, r as BarChart, s as MiniNeonSparkline, t as PieChart, u as getChartColorVar } from "./chunks/charts-C-Qee_JY.mjs";
+export { AreaChart, BarChart, MiniNeonSparkline, NeonLineChart, PieChart, PositiveNegativeBarChart, StackedBarChart, ThinBreakdownBar, chartColorTokens, getChartColorVar, getChartPalette };

package/dist/checkbox.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_checkbox = require("./chunks/checkbox-BakVQmue.cjs");
+const require_checkbox = require("./chunks/checkbox-NM_iPd6S.cjs");
 exports.Checkbox = require_checkbox.Checkbox;

package/dist/checkbox.mjs

@@ -1,2 +1,2 @@
-import { t as Checkbox } from "./chunks/checkbox-C9NrpH_Q.mjs";
+import { t as Checkbox } from "./chunks/checkbox-DjGpvMyo.mjs";
 export { Checkbox };

package/dist/chip.cjs

@@ -1,3 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_chip = require("./chunks/chip-Dc2Sm3Ng.cjs");
+const require_chip = require("./chunks/chip-BY83_HK7.cjs");
 exports.Chip = require_chip.Chip;
+exports.SplitChip = require_chip.SplitChip;
+exports.StatusDotChip = require_chip.StatusDotChip;

package/dist/chip.mjs

@@ -1,2 +1,2 @@
-import { t as Chip } from "./chunks/chip-BN0aOUa-.mjs";
-export { Chip };
+import { n as StatusDotChip, r as Chip, t as SplitChip } from "./chunks/chip-CbO8-1lK.mjs";
+export { Chip, SplitChip, StatusDotChip };

package/dist/chroma-grid.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_chroma_grid = require("./chunks/chroma-grid-8p5tntYr.cjs");
+const require_chroma_grid = require("./chunks/chroma-grid-DP__XtmV.cjs");
 exports.ChromaGrid = require_chroma_grid.ChromaGrid;

package/dist/chroma-grid.mjs

@@ -1,2 +1,2 @@
-import { t as ChromaGrid } from "./chunks/chroma-grid-BF9SlWxA.mjs";
+import { t as ChromaGrid } from "./chunks/chroma-grid-CexX28VQ.mjs";
 export { ChromaGrid };

package/dist/chunks/{HoverBorderGradient-DaduPpj-.cjs → HoverBorderGradient-C5D6lGg0.cjs}

@@ -5,12 +5,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
 //#region src/components/effects/hover-border-gradient/HoverBorderGradient.tsx
 var movingMap = {
-	TOP: "radial-gradient(50.7% 50% at 50% 0%, var(--color-hover-gradient) 0%, transparent 100%)",
-	LEFT: "radial-gradient(25.6% 43.1% at 0% 50%, var(--color-hover-gradient) 0%, transparent 100%)",
-	BOTTOM: "radial-gradient(50.7% 50% at 50% 100%, var(--color-hover-gradient) 0%, transparent 100%)",
-	RIGHT: "radial-gradient(25.2% 41% at 100% 50%, var(--color-hover-gradient) 0%, transparent 100%)"
+	TOP: "radial-gradient(50.7% 50% at 50% 0%, var(--ds-gradient-accent-hover) 0%, transparent 100%)",
+	LEFT: "radial-gradient(25.6% 43.1% at 0% 50%, var(--ds-gradient-accent-hover) 0%, transparent 100%)",
+	BOTTOM: "radial-gradient(50.7% 50% at 50% 100%, var(--ds-gradient-accent-hover) 0%, transparent 100%)",
+	RIGHT: "radial-gradient(25.2% 41% at 100% 50%, var(--ds-gradient-accent-hover) 0%, transparent 100%)"
 };
-var highlight = `radial-gradient(85% 181% at 50% 50%, var(--color-hover-gradient) 0%, transparent 100%)`;
+var highlight = `radial-gradient(85% 181% at 50% 50%, var(--ds-gradient-accent-hover) 0%, transparent 100%)`;
 function HoverBorderGradient({ containerClassName, className, duration = 1, clockwise = true, children, ...props }) {
 	const [hovered, setHovered] = (0, react.useState)(false);
 	const [direction, setDirection] = (0, react.useState)("TOP");
@@ -42,10 +42,10 @@ function HoverBorderGradient({ containerClassName, className, duration = 1, cloc
 		type: "button",
 		onMouseEnter: handleMouseEnter,
 		onMouseLeave: handleMouseLeave,
-		className: require_utils.mergeClassNames("relative flex h-min w-fit flex-col flex-nowrap content-center items-center justify-center gap-10 overflow-visible rounded-lg border border-neutral-300 dark:border-white/10 p-px transition duration-500", containerClassName),
+		className: require_utils.mergeClassNames("relative flex h-min w-fit flex-col flex-nowrap content-center items-center justify-center gap-10 overflow-visible rounded-lg border border-ds-border-2 p-px transition duration-500", containerClassName),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_utils.mergeClassNames("bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white z-10 w-auto rounded-[inherit] px-4 py-2", className),
+			className: require_utils.mergeClassNames("bg-ds-surface-1 text-ds-1 z-10 w-auto rounded-[inherit] px-4 py-2", className),
 			children
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 			className: require_utils.mergeClassNames("absolute inset-0 z-0 flex-none overflow-hidden rounded-[inherit]"),
@@ -72,4 +72,4 @@ Object.defineProperty(exports, "HoverBorderGradient", {
 	}
 });
 
-//# sourceMappingURL=HoverBorderGradient-DaduPpj-.cjs.map
+//# sourceMappingURL=HoverBorderGradient-C5D6lGg0.cjs.map

package/dist/chunks/HoverBorderGradient-C5D6lGg0.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverBorderGradient-C5D6lGg0.cjs","names":[],"sources":["../../src/components/effects/hover-border-gradient/HoverBorderGradient.tsx"],"sourcesContent":["import { mergeClassNames } from \"../../../utils\";\nimport { motion } from \"framer-motion\";\nimport { useCallback, useEffect, useState } from \"react\";\n\ntype Direction = \"TOP\" | \"LEFT\" | \"BOTTOM\" | \"RIGHT\";\n\ntype HoverBorderGradientProps =\n  React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    containerClassName?: string;\n    className?: string;\n    duration?: number;\n    clockwise?: boolean;\n    children?: React.ReactNode;\n  };\n\nconst movingMap: Record<Direction, string> = {\n  TOP: \"radial-gradient(50.7% 50% at 50% 0%, var(--ds-gradient-accent-hover) 0%, transparent 100%)\",\n  LEFT: \"radial-gradient(25.6% 43.1% at 0% 50%, var(--ds-gradient-accent-hover) 0%, transparent 100%)\",\n  BOTTOM:\n    \"radial-gradient(50.7% 50% at 50% 100%, var(--ds-gradient-accent-hover) 0%, transparent 100%)\",\n  RIGHT:\n    \"radial-gradient(25.2% 41% at 100% 50%, var(--ds-gradient-accent-hover) 0%, transparent 100%)\",\n};\n\nconst highlight = `radial-gradient(85% 181% at 50% 50%, var(--ds-gradient-accent-hover) 0%, transparent 100%)`;\n\nexport function HoverBorderGradient({\n  containerClassName,\n  className,\n  duration = 1,\n  clockwise = true,\n  children,\n  ...props\n}: HoverBorderGradientProps) {\n  const [hovered, setHovered] = useState(false);\n  const [direction, setDirection] = useState<Direction>(\"TOP\");\n\n  const rotateDirection = useCallback(\n    (current: Direction): Direction => {\n      const directions: Direction[] = [\"TOP\", \"LEFT\", \"BOTTOM\", \"RIGHT\"];\n      const index = directions.indexOf(current);\n      const nextIndex = clockwise\n        ? (index - 1 + directions.length) % directions.length\n        : (index + 1) % directions.length;\n      return directions[nextIndex];\n    },\n    [clockwise],\n  );\n\n  useEffect(() => {\n    if (!hovered) {\n      const interval = setInterval(() => {\n        setDirection((prevState) => rotateDirection(prevState));\n      }, duration * 1000);\n      return () => clearInterval(interval);\n    }\n  }, [hovered, duration, rotateDirection]);\n\n  const handleMouseEnter = () => setHovered(true);\n  const handleMouseLeave = () => setHovered(false);\n\n  return (\n    <button\n      type=\"button\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={mergeClassNames(\n        \"relative flex h-min w-fit flex-col flex-nowrap content-center items-center justify-center gap-10 overflow-visible rounded-lg border border-ds-border-2 p-px transition duration-500\",\n        containerClassName,\n      )}\n      {...props}\n    >\n      <div\n        className={mergeClassNames(\n          \"bg-ds-surface-1 text-ds-1 z-10 w-auto rounded-[inherit] px-4 py-2\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n      <motion.div\n        className={mergeClassNames(\n          \"absolute inset-0 z-0 flex-none overflow-hidden rounded-[inherit]\",\n        )}\n        style={{\n          filter: \"blur(2px)\",\n          position: \"absolute\",\n          width: \"100%\",\n          height: \"100%\",\n        }}\n        initial={{ background: movingMap[direction] }}\n        animate={{\n          background: hovered\n            ? [movingMap[direction], highlight]\n            : movingMap[direction],\n        }}\n        transition={{ ease: \"linear\", duration: duration ?? 1 }}\n      />\n    </button>\n  );\n}\n"],"mappings":";;;;;;AAeA,IAAM,YAAuC;CAC3C,KAAK;CACL,MAAM;CACN,QACE;CACF,OACE;CACH;AAED,IAAM,YAAY;AAElB,SAAgB,oBAAoB,EAClC,oBACA,WACA,WAAW,GACX,YAAY,MACZ,UACA,GAAG,SACwB;CAC3B,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAoC,MAAM;CAE5D,MAAM,mBAAA,GAAA,MAAA,cACH,YAAkC;EACjC,MAAM,aAA0B;GAAC;GAAO;GAAQ;GAAU;GAAQ;EAClE,MAAM,QAAQ,WAAW,QAAQ,QAAQ;AAIzC,SAAO,WAHW,aACb,QAAQ,IAAI,WAAW,UAAU,WAAW,UAC5C,QAAQ,KAAK,WAAW;IAG/B,CAAC,UAAU,CACZ;AAED,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,SAAS;GACZ,MAAM,WAAW,kBAAkB;AACjC,kBAAc,cAAc,gBAAgB,UAAU,CAAC;MACtD,WAAW,IAAK;AACnB,gBAAa,cAAc,SAAS;;IAErC;EAAC;EAAS;EAAU;EAAgB,CAAC;CAExC,MAAM,yBAAyB,WAAW,KAAK;CAC/C,MAAM,yBAAyB,WAAW,MAAM;AAEhD,QACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;EACE,MAAK;EACL,cAAc;EACd,cAAc;EACd,WAAW,cAAA,gBACT,uLACA,mBACD;EACD,GAAI;YARN,CAUE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,WAAW,cAAA,gBACT,qEACA,UACD;GAEA;GACG,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;GACE,WAAW,cAAA,gBACT,mEACD;GACD,OAAO;IACL,QAAQ;IACR,UAAU;IACV,OAAO;IACP,QAAQ;IACT;GACD,SAAS,EAAE,YAAY,UAAU,YAAY;GAC7C,SAAS,EACP,YAAY,UACR,CAAC,UAAU,YAAY,UAAU,GACjC,UAAU,YACf;GACD,YAAY;IAAE,MAAM;IAAU,UAAU,YAAY;IAAG;GACvD,CAAA,CACK"}

package/dist/chunks/{HoverBorderGradient-DYXhtPWs.mjs → HoverBorderGradient-CduqqQgX.mjs}

@@ -4,12 +4,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 //#region src/components/effects/hover-border-gradient/HoverBorderGradient.tsx
 var movingMap = {
-	TOP: "radial-gradient(50.7% 50% at 50% 0%, var(--color-hover-gradient) 0%, transparent 100%)",
-	LEFT: "radial-gradient(25.6% 43.1% at 0% 50%, var(--color-hover-gradient) 0%, transparent 100%)",
-	BOTTOM: "radial-gradient(50.7% 50% at 50% 100%, var(--color-hover-gradient) 0%, transparent 100%)",
-	RIGHT: "radial-gradient(25.2% 41% at 100% 50%, var(--color-hover-gradient) 0%, transparent 100%)"
+	TOP: "radial-gradient(50.7% 50% at 50% 0%, var(--ds-gradient-accent-hover) 0%, transparent 100%)",
+	LEFT: "radial-gradient(25.6% 43.1% at 0% 50%, var(--ds-gradient-accent-hover) 0%, transparent 100%)",
+	BOTTOM: "radial-gradient(50.7% 50% at 50% 100%, var(--ds-gradient-accent-hover) 0%, transparent 100%)",
+	RIGHT: "radial-gradient(25.2% 41% at 100% 50%, var(--ds-gradient-accent-hover) 0%, transparent 100%)"
 };
-var highlight = `radial-gradient(85% 181% at 50% 50%, var(--color-hover-gradient) 0%, transparent 100%)`;
+var highlight = `radial-gradient(85% 181% at 50% 50%, var(--ds-gradient-accent-hover) 0%, transparent 100%)`;
 function HoverBorderGradient({ containerClassName, className, duration = 1, clockwise = true, children, ...props }) {
 	const [hovered, setHovered] = useState(false);
 	const [direction, setDirection] = useState("TOP");
@@ -41,10 +41,10 @@ function HoverBorderGradient({ containerClassName, className, duration = 1, cloc
 		type: "button",
 		onMouseEnter: handleMouseEnter,
 		onMouseLeave: handleMouseLeave,
-		className: mergeClassNames("relative flex h-min w-fit flex-col flex-nowrap content-center items-center justify-center gap-10 overflow-visible rounded-lg border border-neutral-300 dark:border-white/10 p-px transition duration-500", containerClassName),
+		className: mergeClassNames("relative flex h-min w-fit flex-col flex-nowrap content-center items-center justify-center gap-10 overflow-visible rounded-lg border border-ds-border-2 p-px transition duration-500", containerClassName),
 		...props,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: mergeClassNames("bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white z-10 w-auto rounded-[inherit] px-4 py-2", className),
+			className: mergeClassNames("bg-ds-surface-1 text-ds-1 z-10 w-auto rounded-[inherit] px-4 py-2", className),
 			children
 		}), /* @__PURE__ */ jsx(motion.div, {
 			className: mergeClassNames("absolute inset-0 z-0 flex-none overflow-hidden rounded-[inherit]"),
@@ -66,4 +66,4 @@ function HoverBorderGradient({ containerClassName, className, duration = 1, cloc
 //#endregion
 export { HoverBorderGradient as t };
 
-//# sourceMappingURL=HoverBorderGradient-DYXhtPWs.mjs.map
+//# sourceMappingURL=HoverBorderGradient-CduqqQgX.mjs.map

package/dist/chunks/HoverBorderGradient-CduqqQgX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverBorderGradient-CduqqQgX.mjs","names":[],"sources":["../../src/components/effects/hover-border-gradient/HoverBorderGradient.tsx"],"sourcesContent":["import { mergeClassNames } from \"../../../utils\";\nimport { motion } from \"framer-motion\";\nimport { useCallback, useEffect, useState } from \"react\";\n\ntype Direction = \"TOP\" | \"LEFT\" | \"BOTTOM\" | \"RIGHT\";\n\ntype HoverBorderGradientProps =\n  React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    containerClassName?: string;\n    className?: string;\n    duration?: number;\n    clockwise?: boolean;\n    children?: React.ReactNode;\n  };\n\nconst movingMap: Record<Direction, string> = {\n  TOP: \"radial-gradient(50.7% 50% at 50% 0%, var(--ds-gradient-accent-hover) 0%, transparent 100%)\",\n  LEFT: \"radial-gradient(25.6% 43.1% at 0% 50%, var(--ds-gradient-accent-hover) 0%, transparent 100%)\",\n  BOTTOM:\n    \"radial-gradient(50.7% 50% at 50% 100%, var(--ds-gradient-accent-hover) 0%, transparent 100%)\",\n  RIGHT:\n    \"radial-gradient(25.2% 41% at 100% 50%, var(--ds-gradient-accent-hover) 0%, transparent 100%)\",\n};\n\nconst highlight = `radial-gradient(85% 181% at 50% 50%, var(--ds-gradient-accent-hover) 0%, transparent 100%)`;\n\nexport function HoverBorderGradient({\n  containerClassName,\n  className,\n  duration = 1,\n  clockwise = true,\n  children,\n  ...props\n}: HoverBorderGradientProps) {\n  const [hovered, setHovered] = useState(false);\n  const [direction, setDirection] = useState<Direction>(\"TOP\");\n\n  const rotateDirection = useCallback(\n    (current: Direction): Direction => {\n      const directions: Direction[] = [\"TOP\", \"LEFT\", \"BOTTOM\", \"RIGHT\"];\n      const index = directions.indexOf(current);\n      const nextIndex = clockwise\n        ? (index - 1 + directions.length) % directions.length\n        : (index + 1) % directions.length;\n      return directions[nextIndex];\n    },\n    [clockwise],\n  );\n\n  useEffect(() => {\n    if (!hovered) {\n      const interval = setInterval(() => {\n        setDirection((prevState) => rotateDirection(prevState));\n      }, duration * 1000);\n      return () => clearInterval(interval);\n    }\n  }, [hovered, duration, rotateDirection]);\n\n  const handleMouseEnter = () => setHovered(true);\n  const handleMouseLeave = () => setHovered(false);\n\n  return (\n    <button\n      type=\"button\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={mergeClassNames(\n        \"relative flex h-min w-fit flex-col flex-nowrap content-center items-center justify-center gap-10 overflow-visible rounded-lg border border-ds-border-2 p-px transition duration-500\",\n        containerClassName,\n      )}\n      {...props}\n    >\n      <div\n        className={mergeClassNames(\n          \"bg-ds-surface-1 text-ds-1 z-10 w-auto rounded-[inherit] px-4 py-2\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n      <motion.div\n        className={mergeClassNames(\n          \"absolute inset-0 z-0 flex-none overflow-hidden rounded-[inherit]\",\n        )}\n        style={{\n          filter: \"blur(2px)\",\n          position: \"absolute\",\n          width: \"100%\",\n          height: \"100%\",\n        }}\n        initial={{ background: movingMap[direction] }}\n        animate={{\n          background: hovered\n            ? [movingMap[direction], highlight]\n            : movingMap[direction],\n        }}\n        transition={{ ease: \"linear\", duration: duration ?? 1 }}\n      />\n    </button>\n  );\n}\n"],"mappings":";;;;;AAeA,IAAM,YAAuC;CAC3C,KAAK;CACL,MAAM;CACN,QACE;CACF,OACE;CACH;AAED,IAAM,YAAY;AAElB,SAAgB,oBAAoB,EAClC,oBACA,WACA,WAAW,GACX,YAAY,MACZ,UACA,GAAG,SACwB;CAC3B,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,WAAW,gBAAgB,SAAoB,MAAM;CAE5D,MAAM,kBAAkB,aACrB,YAAkC;EACjC,MAAM,aAA0B;GAAC;GAAO;GAAQ;GAAU;GAAQ;EAClE,MAAM,QAAQ,WAAW,QAAQ,QAAQ;AAIzC,SAAO,WAHW,aACb,QAAQ,IAAI,WAAW,UAAU,WAAW,UAC5C,QAAQ,KAAK,WAAW;IAG/B,CAAC,UAAU,CACZ;AAED,iBAAgB;AACd,MAAI,CAAC,SAAS;GACZ,MAAM,WAAW,kBAAkB;AACjC,kBAAc,cAAc,gBAAgB,UAAU,CAAC;MACtD,WAAW,IAAK;AACnB,gBAAa,cAAc,SAAS;;IAErC;EAAC;EAAS;EAAU;EAAgB,CAAC;CAExC,MAAM,yBAAyB,WAAW,KAAK;CAC/C,MAAM,yBAAyB,WAAW,MAAM;AAEhD,QACE,qBAAC,UAAD;EACE,MAAK;EACL,cAAc;EACd,cAAc;EACd,WAAW,gBACT,uLACA,mBACD;EACD,GAAI;YARN,CAUE,oBAAC,OAAD;GACE,WAAW,gBACT,qEACA,UACD;GAEA;GACG,CAAA,EACN,oBAAC,OAAO,KAAR;GACE,WAAW,gBACT,mEACD;GACD,OAAO;IACL,QAAQ;IACR,UAAU;IACV,OAAO;IACP,QAAQ;IACT;GACD,SAAS,EAAE,YAAY,UAAU,YAAY;GAC7C,SAAS,EACP,YAAY,UACR,CAAC,UAAU,YAAY,UAAU,GACjC,UAAU,YACf;GACD,YAAY;IAAE,MAAM;IAAU,UAAU,YAAY;IAAG;GACvD,CAAA,CACK"}

package/dist/chunks/{accordion-Dwm6yH0C.mjs → accordion-6zxJUYXr.mjs}

@@ -1,4 +1,4 @@
-import { N as ChevronDownIcon } from "./icons-BquccnYa.mjs";
+import { N as ChevronDownIcon } from "./icons-bx3nrxNv.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation/accordion/Accordion.tsx
@@ -24,10 +24,10 @@ var Accordion = ({ items, type = "single", defaultOpenIds = type === "single" &&
 		children: items.map((item) => {
 			const open = openItems.includes(item.id);
 			return /* @__PURE__ */ jsxs("div", {
-				className: cx("rounded-xl backdrop-blur-2xl transition-all duration-300", "bg-white/60 border border-white/40 shadow-lg shadow-neutral-200/50", "dark:bg-neutral-900/50 dark:border-white/10 dark:shadow-neutral-950/50", "hover:bg-white/80 hover:shadow-xl hover:border-white/60", "dark:hover:bg-neutral-800/60 dark:hover:border-white/20", open && "ring-2 ring-focus/40", separated ? "p-0" : ""),
+				className: cx("rounded-xl border border-ds-border-2 bg-ds-surface-1 backdrop-blur-2xl transition-all duration-300", "hover:border-ds-border-1 hover:bg-ds-surface-2", open && "ring-2 ring-ds-focus/40", separated ? "p-0" : ""),
 				children: [/* @__PURE__ */ jsxs("button", {
 					type: "button",
-					className: cx("flex w-full items-center justify-between gap-4 px-5 py-4 rounded-xl transition-colors duration-200", "text-neutral-700 dark:text-neutral-200", "hover:bg-white/40 dark:hover:bg-white/5", separated ? "border-b border-neutral-200/50 dark:border-white/10" : "", item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+					className: cx("flex w-full items-center justify-between gap-4 px-5 py-4 rounded-xl transition-colors duration-200", "text-ds-1 hover:bg-ds-surface-2", separated ? "border-b border-ds-border-2" : "", item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
 					"aria-expanded": open,
 					"aria-controls": `${item.id}-content`,
 					id: `${item.id}-trigger`,
@@ -36,14 +36,14 @@ var Accordion = ({ items, type = "single", defaultOpenIds = type === "single" &&
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "text-left flex-1",
 						children: [/* @__PURE__ */ jsx("p", {
-							className: "text-base font-semibold text-neutral-900 dark:text-white",
+							className: "text-base font-semibold text-ds-1",
 							children: item.title
 						}), item.description && /* @__PURE__ */ jsx("p", {
-							className: "text-sm text-neutral-500 dark:text-neutral-400 mt-0.5",
+							className: "mt-0.5 text-sm text-ds-2",
 							children: item.description
 						})]
 					}), /* @__PURE__ */ jsx("span", {
-						className: cx("p-1.5 rounded-lg transition-all duration-300", "bg-neutral-100/80 dark:bg-white/10", "text-neutral-600 dark:text-neutral-300", open && "rotate-180 bg-accent-subtle text-accent"),
+						className: cx("p-1.5 rounded-lg transition-all duration-300", "bg-ds-surface-2 text-ds-2", open && "rotate-180 bg-ds-accent-subtle text-ds-1"),
 						children: caret
 					})]
 				}), /* @__PURE__ */ jsx("div", {
@@ -52,7 +52,7 @@ var Accordion = ({ items, type = "single", defaultOpenIds = type === "single" &&
 					"aria-labelledby": `${item.id}-trigger`,
 					className: cx("overflow-hidden transition-all duration-300 ease-in-out", open ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"),
 					children: /* @__PURE__ */ jsx("div", {
-						className: "px-5 pb-5 pt-2 text-sm text-neutral-600 dark:text-neutral-300 leading-relaxed",
+						className: "px-5 pb-5 pt-2 text-sm leading-relaxed text-ds-2",
 						children: item.content
 					})
 				})]
@@ -63,4 +63,4 @@ var Accordion = ({ items, type = "single", defaultOpenIds = type === "single" &&
 //#endregion
 export { Accordion as t };
 
-//# sourceMappingURL=accordion-Dwm6yH0C.mjs.map
+//# sourceMappingURL=accordion-6zxJUYXr.mjs.map

package/dist/chunks/accordion-6zxJUYXr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-6zxJUYXr.mjs","names":[],"sources":["../../src/components/navigation/accordion/Accordion.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons\";\nimport type { AccordionProps } from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n  classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst caret = (\n  <ChevronDownIcon\n    className=\"h-5 w-5 transition-transform duration-300\"\n    aria-hidden=\"true\"\n  />\n);\n\nexport const Accordion = ({\n  items,\n  type = \"single\",\n  defaultOpenIds = type === \"single\" && items.length ? [items[0].id] : [],\n  value,\n  onValueChange,\n  className = \"\",\n  separated = false,\n}: AccordionProps) => {\n  const [internalOpen, setInternalOpen] = useState<string[]>(defaultOpenIds);\n  const controlled = Array.isArray(value);\n  const openItems = controlled ? value! : internalOpen;\n\n  const toggleItem = (id: string) => {\n    let next: string[];\n    const isOpen = openItems.includes(id);\n\n    if (type === \"single\") {\n      next = isOpen ? [] : [id];\n    } else {\n      next = isOpen\n        ? openItems.filter((openId) => openId !== id)\n        : [...openItems, id];\n    }\n\n    if (!controlled) {\n      setInternalOpen(next);\n    }\n    onValueChange?.(next);\n  };\n\n  return (\n    <div className={cx(\"space-y-3\", className)}>\n      {items.map((item) => {\n        const open = openItems.includes(item.id);\n        return (\n          <div\n            key={item.id}\n            className={cx(\n              \"rounded-xl border border-ds-border-2 bg-ds-surface-1 backdrop-blur-2xl transition-all duration-300\",\n              \"hover:border-ds-border-1 hover:bg-ds-surface-2\",\n              // Ring highlight on open\n              open && \"ring-2 ring-ds-focus/40\",\n              separated ? \"p-0\" : \"\",\n            )}\n          >\n            <button\n              type=\"button\"\n              className={cx(\n                \"flex w-full items-center justify-between gap-4 px-5 py-4 rounded-xl transition-colors duration-200\",\n                \"text-ds-1 hover:bg-ds-surface-2\",\n                separated ? \"border-b border-ds-border-2\" : \"\",\n                item.disabled\n                  ? \"opacity-50 cursor-not-allowed\"\n                  : \"cursor-pointer\",\n              )}\n              aria-expanded={open}\n              aria-controls={`${item.id}-content`}\n              id={`${item.id}-trigger`}\n              onClick={() => !item.disabled && toggleItem(item.id)}\n              disabled={item.disabled}\n            >\n              <div className=\"text-left flex-1\">\n                <p className=\"text-base font-semibold text-ds-1\">\n                  {item.title}\n                </p>\n                {item.description && (\n                  <p className=\"mt-0.5 text-sm text-ds-2\">{item.description}</p>\n                )}\n              </div>\n              <span\n                className={cx(\n                  \"p-1.5 rounded-lg transition-all duration-300\",\n                  \"bg-ds-surface-2 text-ds-2\",\n                  open && \"rotate-180 bg-ds-accent-subtle text-ds-1\",\n                )}\n              >\n                {caret}\n              </span>\n            </button>\n            <div\n              id={`${item.id}-content`}\n              role=\"region\"\n              aria-labelledby={`${item.id}-trigger`}\n              className={cx(\n                \"overflow-hidden transition-all duration-300 ease-in-out\",\n                open ? \"max-h-[1000px] opacity-100\" : \"max-h-0 opacity-0\",\n              )}\n            >\n              <div className=\"px-5 pb-5 pt-2 text-sm leading-relaxed text-ds-2\">\n                {item.content}\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;AAKA,IAAM,MAAM,GAAG,YACb,QAAQ,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,QAAQ,QAAQ,IAAI,CAAC,MAAM;AAE/D,IAAM,QACJ,oBAAC,iBAAD;CACE,WAAU;CACV,eAAY;CACZ,CAAA;AAGJ,IAAa,aAAa,EACxB,OACA,OAAO,UACP,iBAAiB,SAAS,YAAY,MAAM,SAAS,CAAC,MAAM,GAAG,GAAG,GAAG,EAAE,EACvE,OACA,eACA,YAAY,IACZ,YAAY,YACQ;CACpB,MAAM,CAAC,cAAc,mBAAmB,SAAmB,eAAe;CAC1E,MAAM,aAAa,MAAM,QAAQ,MAAM;CACvC,MAAM,YAAY,aAAa,QAAS;CAExC,MAAM,cAAc,OAAe;EACjC,IAAI;EACJ,MAAM,SAAS,UAAU,SAAS,GAAG;AAErC,MAAI,SAAS,SACX,QAAO,SAAS,EAAE,GAAG,CAAC,GAAG;MAEzB,QAAO,SACH,UAAU,QAAQ,WAAW,WAAW,GAAG,GAC3C,CAAC,GAAG,WAAW,GAAG;AAGxB,MAAI,CAAC,WACH,iBAAgB,KAAK;AAEvB,kBAAgB,KAAK;;AAGvB,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,UAAU;YACvC,MAAM,KAAK,SAAS;GACnB,MAAM,OAAO,UAAU,SAAS,KAAK,GAAG;AACxC,UACE,qBAAC,OAAD;IAEE,WAAW,GACT,sGACA,kDAEA,QAAQ,2BACR,YAAY,QAAQ,GACrB;cARH,CAUE,qBAAC,UAAD;KACE,MAAK;KACL,WAAW,GACT,sGACA,mCACA,YAAY,gCAAgC,IAC5C,KAAK,WACD,kCACA,iBACL;KACD,iBAAe;KACf,iBAAe,GAAG,KAAK,GAAG;KAC1B,IAAI,GAAG,KAAK,GAAG;KACf,eAAe,CAAC,KAAK,YAAY,WAAW,KAAK,GAAG;KACpD,UAAU,KAAK;eAdjB,CAgBE,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,KAAD;OAAG,WAAU;iBACV,KAAK;OACJ,CAAA,EACH,KAAK,eACJ,oBAAC,KAAD;OAAG,WAAU;iBAA4B,KAAK;OAAgB,CAAA,CAE5D;SACN,oBAAC,QAAD;MACE,WAAW,GACT,gDACA,6BACA,QAAQ,2CACT;gBAEA;MACI,CAAA,CACA;QACT,oBAAC,OAAD;KACE,IAAI,GAAG,KAAK,GAAG;KACf,MAAK;KACL,mBAAiB,GAAG,KAAK,GAAG;KAC5B,WAAW,GACT,2DACA,OAAO,+BAA+B,oBACvC;eAED,oBAAC,OAAD;MAAK,WAAU;gBACZ,KAAK;MACF,CAAA;KACF,CAAA,CACF;MAxDC,KAAK,GAwDN;IAER;EACE,CAAA"}