@trading-game/design-intelligence-layer 0.8.5 → 0.8.7

package/AGENTS.md

@@ -10,22 +10,22 @@ Before building any landing page, product screen, game view, or feature UI, you
 
 **Design principles** — the decision framework for every layout, hierarchy, motion, copy, and component choice:
 ```
-node_modules/@trading-game/design-intelligence-layer/docs/design-principles/trading-game-design-principles.md
+node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md
 ```
 
 **Accessibility standards** — the inclusion standard every screen must meet (WCAG 2.1 AA):
 ```
-node_modules/@trading-game/design-intelligence-layer/docs/accessibility-standards/trading-game-accessibility-standards.md
+node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md
 ```
 
 **Personas** — the three player modes (Edge Seeker, System Runner, Public Predictor) that shape all copy and UX decisions:
 ```
-node_modules/@trading-game/design-intelligence-layer/docs/personas/trading-game-player-field-guide.md
+node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md
 ```
 
 **Tone of voice** — the creative foundation, campaign territories, and the mirror test for all player-facing copy:
 ```
-node_modules/@trading-game/design-intelligence-layer/docs/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md
+node_modules/@trading-game/design-intelligence-layer/guides/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md
 ```
 
 All four files apply to all projects built with this package — landing pages, product screens, and games.
@@ -39,13 +39,13 @@ Run the checklists at the end of the design principles and accessibility standar
 You MUST also follow the full agent rules file:
 
 ```
-node_modules/@trading-game/design-intelligence-layer/docs/rules/design-system-consuming-project.mdc
+node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc
 ```
 
 **Cursor users:** Copy this file into `.cursor/rules/` after every package upgrade:
 
 ```bash
-cp node_modules/@trading-game/design-intelligence-layer/docs/rules/design-system-consuming-project.mdc .cursor/rules/
+cp node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc .cursor/rules/
 ```
 
 ---
@@ -63,8 +63,8 @@ cp node_modules/@trading-game/design-intelligence-layer/docs/rules/design-system
 ## Reference
 
 - Full token + component reference: `node_modules/@trading-game/design-intelligence-layer/README.md`
-- Design principles: `node_modules/@trading-game/design-intelligence-layer/docs/design-principles/trading-game-design-principles.md`
-- Accessibility standards: `node_modules/@trading-game/design-intelligence-layer/docs/accessibility-standards/trading-game-accessibility-standards.md`
-- Personas: `node_modules/@trading-game/design-intelligence-layer/docs/personas/trading-game-player-field-guide.md`
-- Tone of voice: `node_modules/@trading-game/design-intelligence-layer/docs/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md`
-- Full agent rules: `node_modules/@trading-game/design-intelligence-layer/docs/rules/design-system-consuming-project.mdc`
+- Design principles: `node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md`
+- Accessibility standards: `node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md`
+- Personas: `node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md`
+- Tone of voice: `node_modules/@trading-game/design-intelligence-layer/guides/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md`
+- Full agent rules: `node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc`

package/README.md

@@ -84,7 +84,9 @@ npm install react react-dom tailwindcss
 ## What's inside
 
 - **54 UI components** — buttons, forms, dialogs, charts, sidebars, and more
-- **Design tokens** — CSS custom properties for color, radius, and typography synced from Figma
+- **Design tokens** — CSS custom properties for color, radius, typography, and transitions synced from Figma
+- **Transition tokens** — semantic duration and easing tokens (`duration-base`, `ease-standard`, etc.) — no hardcoded `duration-200` anywhere
+- **Light-only theme** — white backgrounds, black text, primary blue accents — no dark mode
 - **Typography classes** — heading scale (h1–xs) and body scale (lg–xs) ready to use
 - **TypeScript** — full type definitions included
 - **ESM + CJS** — works with any bundler
@@ -205,6 +207,31 @@ npm install react react-dom tailwindcss
 <Alert variant="error" />   // red — error state
 ```
 
+## Component behaviour notes
+
+### AlertDialog — button fill
+`AlertDialogAction` and `AlertDialogCancel` fill the full container width **only** when `size="sm"`. On `size="default"` (the default), buttons are natural width and right-aligned.
+
+```tsx
+<AlertDialogContent size="sm">   // buttons fill width (50/50 grid)
+<AlertDialogContent size="default"> // buttons natural width, right-aligned
+```
+
+### Drawer — footer buttons
+`DrawerFooter` makes all direct child buttons fill the full width automatically via `[&>*]:w-full`. Stack your buttons inside `DrawerFooter` and they will always be full-width.
+
+### Link — size lg
+The `lg` variant of `Link` uses `text-base` (16px). The `md` and `sm` variants use `text-sm` (14px) and `text-xs` (12px) respectively.
+
+```tsx
+<Link size="lg" />  // 16px — font-base
+<Link size="md" />  // 14px — font-sm
+<Link size="sm" />  // 12px — font-xs
+```
+
+### Tabs — line variant hover
+On the `line` variant, hover state shows `text-primary` (blue) with no background fill. On the `default` (pill) variant, hover shows a grey background with `text-on-prominent`.
+
 ---
 
 ## Design tokens
@@ -250,6 +277,29 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 
 > ⚠️ **`border-border` vs `border-border-subtle`:** Both resolve to the same light grey `#EEEEEE`. `border-border` is kept for backward compatibility. **Prefer `border-border-subtle` in all new code.**
 
+### Transition tokens
+
+Duration — primitive scale:
+
+| Tailwind class | CSS variable | Value | Used for |
+|---|---|---|---|
+| `duration-instant` | `--primitive-duration-instant` | `50ms` | Focus rings, hover tints |
+| `duration-fast` | `--primitive-duration-fast` | `100ms` | Buttons, inputs, badges |
+| `duration-base` | `--primitive-duration-base` | `200ms` | Dropdowns, popovers, accordions |
+| `duration-slow` | `--primitive-duration-slow` | `300ms` | Dialogs, sheets, drawers closing |
+| `duration-open` | `--primitive-duration-open` | `500ms` | Sheets, drawers entering |
+
+Easing — primitive scale:
+
+| Tailwind class | CSS variable | Value | Used for |
+|---|---|---|---|
+| `ease-standard` | `--primitive-ease-standard` | `cubic-bezier(0.2, 0, 0, 1)` | General UI — bidirectional state changes |
+| `ease-enter` | `--primitive-ease-enter` | `cubic-bezier(0, 0, 0.2, 1)` | Overlays / surfaces entering |
+| `ease-exit` | `--primitive-ease-exit` | `cubic-bezier(0.4, 0, 1, 1)` | Overlays / surfaces leaving |
+| `ease-linear` | `--primitive-ease-linear` | `linear` | Sidebar width, progress bar |
+
+> Always use token utilities — never raw `duration-200` or `ease-in-out` directly.
+
 ### Other tokens
 
 | Tailwind class | Value | Usage |
@@ -315,7 +365,7 @@ When you bump `@trading-game/design-intelligence-layer` and run `npm install` (o
 
 **Overrides:** Passing large `className` strings onto DS components can mask new defaults (e.g. old radius after a “pill button” update). After upgrading, review those callsites.
 
-**Cursor / AI agents:** The package ships agent rules at `node_modules/@trading-game/design-intelligence-layer/docs/rules/design-system-consuming-project.mdc`. Cursor does **not** load rules from `node_modules` by default — **re-copy** that file into `.cursor/rules/` after each upgrade so instructions match the release (same command as in **AI Agent Setup** below). The rules include **Rule 7 — Package version upgrades**: agents should search for duplicated components, align with the package, and **tell you explicitly** if local component code was replaced.
+**Cursor / AI agents:** The package ships agent rules at `node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc`. Cursor does **not** load rules from `node_modules` by default — **re-copy** that file into `.cursor/rules/` after each upgrade so instructions match the release (same command as in **AI Agent Setup** below). The rules include **Rule 7 — Package version upgrades**: agents should search for duplicated components, align with the package, and **tell you explicitly** if local component code was replaced.
 
 ---
 
@@ -336,22 +386,22 @@ This tells any AI agent to:
 
 **Design principles file** (bundled in the package):
 ```
-node_modules/@trading-game/design-intelligence-layer/docs/design-principles/trading-game-design-principles.md
+node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md
 ```
 
 **Accessibility standards file** (bundled in the package):
 ```
-node_modules/@trading-game/design-intelligence-layer/docs/accessibility-standards/trading-game-accessibility-standards.md
+node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md
 ```
 
 **Personas file** (bundled in the package):
 ```
-node_modules/@trading-game/design-intelligence-layer/docs/personas/trading-game-player-field-guide.md
+node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md
 ```
 
 **Tone of voice file** (bundled in the package):
 ```
-node_modules/@trading-game/design-intelligence-layer/docs/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md
+node_modules/@trading-game/design-intelligence-layer/guides/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md
 ```
 
 All four files apply to all projects built with this package — landing pages, product screens, and games. Every AI agent must read all of them before starting any build. Run the design principles and accessibility checklists before completing any screen. Use the personas and tone of voice to guide all player-facing copy.
@@ -362,7 +412,7 @@ Copy the included rule file into your project:
 
 ```bash
 mkdir -p .cursor/rules
-cp node_modules/@trading-game/design-intelligence-layer/docs/rules/design-system-consuming-project.mdc .cursor/rules/
+cp node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc .cursor/rules/
 ```
 
 Re-run this **`cp` after every design-system version bump** so your workspace rules stay in sync with the installed package.
@@ -375,17 +425,17 @@ Add the following to your project's `CLAUDE.md`:
 ## Design System
 
 This project uses @trading-game/design-intelligence-layer. Before writing any UI:
-1. Read node_modules/@trading-game/design-intelligence-layer/docs/design-principles/trading-game-design-principles.md — apply the 8 principles and run the 7-point checklist on every screen
-2. Read node_modules/@trading-game/design-intelligence-layer/docs/accessibility-standards/trading-game-accessibility-standards.md — apply WCAG 2.1 AA standards and run the 9-point accessibility checklist on every screen
-3. Read node_modules/@trading-game/design-intelligence-layer/docs/personas/trading-game-player-field-guide.md — understand the 3 player modes (Edge Seeker, System Runner, Public Predictor) that shape all copy and UX
-4. Read node_modules/@trading-game/design-intelligence-layer/docs/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md — apply the voice, campaign territories, and mirror test for all player-facing copy
+1. Read node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md — apply the 8 principles and run the 7-point checklist on every screen
+2. Read node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md — apply WCAG 2.1 AA standards and run the 9-point accessibility checklist on every screen
+3. Read node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md — understand the 3 player modes (Edge Seeker, System Runner, Public Predictor) that shape all copy and UX
+4. Read node_modules/@trading-game/design-intelligence-layer/guides/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md — apply the voice, campaign territories, and mirror test for all player-facing copy
 5. Check if the component exists in the package — import it, don't re-implement
 6. Use only design token classes (bg-background, text-on-prominent, border-border-subtle, etc.) — no hardcoded hex or raw Tailwind palette colors
 7. Do not install lucide-react, tailwindcss, or other bundled dependencies separately
 8. If no token exists for a value, ask before using a hardcoded value
-9. After upgrading the package: prefer package imports over local copies of components; if replacing local UI code with the package version, tell the user what was overwritten; re-copy docs/rules/design-system-consuming-project.mdc into .cursor/rules if using Cursor
+9. After upgrading the package: prefer package imports over local copies of components; if replacing local UI code with the package version, tell the user what was overwritten; re-copy guides/rules/design-system-consuming-project.mdc into .cursor/rules if using Cursor
 
-See node_modules/@trading-game/design-intelligence-layer/docs/rules/design-system-consuming-project.mdc for full rules.
+See node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc for full rules.
 See node_modules/@trading-game/design-intelligence-layer/README.md for complete token and component reference.
 ```
 
@@ -450,7 +500,7 @@ npm run build:next
 Design tokens are managed in Figma and exported as CSS variables. To update:
 
 1. Update the CSS custom properties in `app/globals.css` (playground) and `src/styles.css` (published package)
-2. Update `docs/rules/design-system-consuming-project.mdc` to reflect any token renames
+2. Update `guides/rules/design-system-consuming-project.mdc` to reflect any token renames
 3. Update this README's token tables
 
 ---

package/dist/index.cjs

@@ -626,7 +626,7 @@ function AlertDialogContent(_a) {
         "data-slot": "alert-dialog-content",
         "data-size": size,
         className: cn(
-          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-background p-6 shadow-lg duration-base data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
           className
         )
       }, props)
@@ -725,11 +725,10 @@ function AlertDialogAction(_a) {
     "variant",
     "size"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { variant, size, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { variant, size, asChild: true, className: cn("group-data-[size=sm]/alert-dialog-content:w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_radix_ui3.AlertDialog.Action,
     __spreadValues({
-      "data-slot": "alert-dialog-action",
-      className: cn(className)
+      "data-slot": "alert-dialog-action"
     }, props)
   ) });
 }
@@ -743,11 +742,10 @@ function AlertDialogCancel(_a) {
     "variant",
     "size"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { variant, size, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { variant, size, asChild: true, className: cn("group-data-[size=sm]/alert-dialog-content:w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_radix_ui3.AlertDialog.Cancel,
     __spreadValues({
-      "data-slot": "alert-dialog-cancel",
-      className: cn(className)
+      "data-slot": "alert-dialog-cancel"
     }, props)
   ) });
 }
@@ -2354,7 +2352,7 @@ function DialogContent(_a) {
       __spreadProps(__spreadValues({
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-background p-6 shadow-lg duration-base outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           className
         )
       }, props), {
@@ -2927,7 +2925,7 @@ function DrawerFooter(_a) {
     "div",
     __spreadValues({
       "data-slot": "drawer-footer",
-      className: cn("mt-auto flex flex-col gap-2 p-4", className)
+      className: cn("mt-auto flex flex-col gap-2 p-4 [&>*]:w-full", className)
     }, props)
   );
 }
@@ -3805,7 +3803,7 @@ function ItemSeparator(_a) {
   );
 }
 var itemVariants = (0, import_class_variance_authority7.cva)(
-  "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-secondary-hover",
+  "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-instant outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-secondary-hover",
   {
     variants: {
       variant: {
@@ -3993,7 +3991,7 @@ var linkVariants = (0, import_class_variance_authority8.cva)(
   {
     variants: {
       size: {
-        lg: "text-sm [&_svg:not([class*='size-'])]:size-4",
+        lg: "text-base [&_svg:not([class*='size-'])]:size-4",
         md: "text-sm [&_svg:not([class*='size-'])]:size-4",
         sm: "text-xs [&_svg:not([class*='size-'])]:size-[14px]"
       }
@@ -4424,7 +4422,7 @@ function NavigationMenuTrigger(_a) {
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           import_lucide_react14.ChevronDownIcon,
           {
-            className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative top-[1px] ml-1 size-3 transition duration-slow group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -4444,7 +4442,7 @@ function NavigationMenuContent(_a) {
       "data-slot": "navigation-menu-content",
       className: cn(
         "top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-border-subtle group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
+        "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-border-subtle group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-base **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
         className
       )
     }, props)
@@ -5104,7 +5102,7 @@ function SheetContent(_a) {
       __spreadProps(__spreadValues({
         "data-slot": "sheet-content",
         className: cn(
-          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-standard data-[state=closed]:animate-out data-[state=closed]:duration-slow data-[state=open]:animate-in data-[state=open]:duration-open",
           side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l border-border-subtle data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
           side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r border-border-subtle data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
           side === "top" && "inset-x-0 top-0 h-auto border-b border-border-subtle data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
@@ -5418,7 +5416,7 @@ function Sidebar(_a) {
           {
             "data-slot": "sidebar-gap",
             className: cn(
-              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-base ease-linear",
               "group-data-[collapsible=offcanvas]:w-0",
               "group-data-[side=right]:rotate-180",
               variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
@@ -5430,7 +5428,7 @@ function Sidebar(_a) {
           __spreadProps(__spreadValues({
             "data-slot": "sidebar-container",
             className: cn(
-              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-base ease-linear md:flex",
               side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
               // Adjust the padding for floating and inset variants.
               variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
@@ -6205,51 +6203,68 @@ function Tabs(_a) {
   );
 }
 var tabsListVariants = (0, import_class_variance_authority11.cva)(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-on-subtle group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center text-on-subtle group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none has-[[data-icon-position=top]]:h-auto",
   {
     variants: {
       variant: {
         default: "bg-subtle",
         line: "gap-1 bg-transparent"
+      },
+      size: {
+        sm: "h-8 rounded-md p-[2px]",
+        md: "h-10 rounded-lg p-1",
+        lg: "h-12 rounded-xl p-1.5"
       }
     },
     defaultVariants: {
-      variant: "default"
+      variant: "default",
+      size: "md"
     }
   }
 );
 function TabsList(_a) {
   var _b = _a, {
     className,
-    variant = "default"
+    variant = "default",
+    size = "md"
   } = _b, props = __objRest(_b, [
     "className",
-    "variant"
+    "variant",
+    "size"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     import_radix_ui32.Tabs.List,
     __spreadValues({
       "data-slot": "tabs-list",
       "data-variant": variant,
-      className: cn(tabsListVariants({ variant }), className)
+      "data-size": size,
+      className: cn(tabsListVariants({ variant, size }), className)
     }, props)
   );
 }
 function TabsTrigger(_a) {
   var _b = _a, {
-    className
+    className,
+    iconPosition = "inline"
   } = _b, props = __objRest(_b, [
-    "className"
+    "className",
+    "iconPosition"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     import_radix_ui32.Tabs.Trigger,
     __spreadValues({
       "data-slot": "tabs-trigger",
+      "data-icon-position": iconPosition,
       className: cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-normal whitespace-nowrap text-on-prominent/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:bg-secondary-hover hover:text-on-prominent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-none group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-normal whitespace-nowrap text-on-prominent/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:bg-secondary-hover hover:text-on-prominent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-none group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[size=sm]/tabs-list:gap-1 group-data-[size=sm]/tabs-list:rounded-sm group-data-[size=sm]/tabs-list:px-2 group-data-[size=sm]/tabs-list:text-xs",
+        "group-data-[size=lg]/tabs-list:gap-2 group-data-[size=lg]/tabs-list:rounded-lg group-data-[size=lg]/tabs-list:px-4 group-data-[size=lg]/tabs-list:text-base",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:hover:bg-transparent group-data-[variant=line]/tabs-list:hover:text-primary group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent",
         "data-[state=active]:bg-background data-[state=active]:border-transparent data-[state=active]:text-primary data-[state=active]:font-semibold",
         "after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        iconPosition === "top" && "h-auto flex-col gap-1 py-2",
+        iconPosition === "top" && "group-data-[size=sm]/tabs-list:gap-0.5 group-data-[size=sm]/tabs-list:py-1.5",
+        iconPosition === "top" && "group-data-[size=lg]/tabs-list:gap-1.5 group-data-[size=lg]/tabs-list:py-2.5",
         className
       )
     }, props)