@dreamtree-org/twreact-ui 1.3.3 → 1.3.5

package/README.md

@@ -214,12 +214,16 @@ Versatile button component with multiple variants and states.
 - `leftIcon`: ReactNode
 - `rightIcon`: ReactNode
 - `fullWidth`: boolean
+- `as`: ElementType — render as a link or router `Link` with the Button's look (a bare `href` renders an `<a>`)
+- `href`: string
 - `className`: string
 
 ```jsx
 <Button variant="primary" size="lg" loading>
   Loading...
 </Button>
+<Button href="tel:+919800000000" variant="outline">Call</Button>
+<Button as={Link} to="/move-in">Move in</Button>
 ```
 
 #### Input
@@ -279,6 +283,7 @@ Advanced select component with search, multi-select, and grouping support.
 - `closeOnSelect`: boolean
 - `maxTagCount`: number (default: 3)
 - `allowClear`: boolean (default: false; set it when the field may be emptied)
+- `size`: 'sm' | 'md' | 'lg' (default: 'md') — `md` grows to the 44px touch target on coarse pointers; `lg` is 44px everywhere
 
 ```jsx
 <Select
@@ -510,10 +515,10 @@ Top navigation bar with user menu and notifications.
 Fixed bottom tab bar for phones (`md:hidden`). Uses the semantic `bg-surface` / `border-line` tokens, so it follows dark mode.
 
 **Props:**
-- `items`: Array<{ id, label, icon, onClick?, active?, badge? }>
+- `items`: Array<{ id, label, icon, onClick?, active?, badge?, variant?, 'aria-*'?, 'data-*'? }>
 - `className`: string
 
-The `active` item gets a tinted primary background, `text-primary-700` and `aria-current="page"` (inactive tabs are neutral `text-muted`). Badges sit on their own item's icon. Items share the width and labels truncate, so five tabs fit a 375px screen.
+`variant: 'action'` renders the item as a raised circular primary button (FAB), e.g. a centre "+" that opens a sheet. `aria-*` and `data-*` item keys reach the button, so an item can carry `aria-haspopup="dialog"` and `aria-expanded`. The `active` item gets a tinted primary background, `text-primary-700` and `aria-current="page"` (inactive tabs are neutral `text-muted`). Badges sit on their own item's icon. Items share the width and labels truncate, so five tabs fit a 375px screen.
 
 ```jsx
 <FootNav
@@ -665,7 +670,7 @@ Status indicators and labels with different variants.
 
 **Props:**
 - `children`: ReactNode
-- `variant`: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'outline' (default: 'default')
+- `variant`: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'outline' (default: 'default')
 - `size`: 'sm' | 'md' | 'lg' (default: 'md')
 - `rounded`: boolean (default: true)
 
@@ -708,7 +713,7 @@ Interaction primitives that products used to compose by hand. All are `forwardRe
 
 | Component | Group | Use for |
 |---|---|---|
-| [`Drawer`](doc/Drawer.md) | Feedback | Side/edge sheet (`placement` right/left/top/bottom, `size` sm–full) — record peeks and editors. Same `isOpen`/`onClose` contract as `Dialog`; focus trap, Escape/backdrop close, focus restore, scroll lock; `Drawer.Header/Body/Footer` |
+| [`Drawer`](doc/Drawer.md) | Feedback | Side/edge sheet (`placement` right/left/top/bottom, `size` sm–full) — record peeks and editors. `placement="bottom"` is a phone bottom sheet (grab `handle`, `swipeToClose`, rounded top, safe-area padding). Same `isOpen`/`onClose` contract as `Dialog`; focus trap, Escape/backdrop close, focus restore, scroll lock; `Drawer.Header/Body/Footer` |
 | [`Popover`](doc/Popover.md) | Core | Anchored, click-triggered panel with interactive content (unlike `Tooltip`). Controlled/uncontrolled `open`, `placement` with flip, Escape/outside-click close, `aria-expanded`/`aria-controls`/`aria-haspopup="dialog"` |
 | [`Textarea`](doc/Textarea.md) | Core | Multi-line input mirroring `Input`: `label`, `error`, `helperText`, `required`, `showCount`/`maxLength`, `autoResize`/`maxRows` |
 | [`Slider`](doc/Slider.md) | Core | Single value or `[low, high]` range; `min`/`max`/`step`, arrows/PageUp/PageDown/Home/End, `role="slider"` with full `aria-value*` |
@@ -872,7 +877,7 @@ module.exports = {
 @source "../node_modules/@dreamtree-org/twreact-ui/dist/index.esm.js";
 ```
 
-This adds semantic utilities next to the palettes: `bg-surface`, `bg-background`, `text-foreground`, `text-muted`, `border-line`, `bg-shell`, `text-micro`, `rounded-control` and `rounded-card`. Add a brand by creating `tokens/brands/<name>.json`; it overrides only the steps and roles you list.
+The palettes are `primary`, `secondary`, `success`, `warning`, `error`, `info` and `gray` (steps 50–950), so `bg-info-50` / `text-info-600` work out of the box; `info` is for informational and scheduled states that are not the brand accent. This adds semantic utilities next to the palettes: `bg-surface`, `bg-background`, `text-foreground`, `text-muted`, `border-line`, `bg-shell`, `text-micro`, `rounded-control` and `rounded-card`. Add a brand by creating `tokens/brands/<name>.json`; it overrides only the steps and roles you list.
 
 **Design rules:** [`DESIGN.md`](DESIGN.md) is the rule set for product screens and AI agents: tokens only, blocks first, loading, empty and error states, 390 px, no native dialogs. It is generated from the tokens (`npm run build:tokens`).
 
@@ -896,6 +901,8 @@ function App() {
 }
 ```
 
+Surfaces such as `Card`, `Sidebar`, `Navbar`, `Table`, `FootNav` and `Dropdown` use the semantic `bg-surface` / `bg-background` / `border-line` / `text-foreground` / `text-muted` tokens, which switch under `.dark` (or `[data-theme="dark"]`). Re-theme them by overriding the `--dt-surface`, `--dt-background`, `--dt-line`, … variables.
+
 ## Examples
 
 ### Complete Form Example
@@ -1025,7 +1032,7 @@ MIT License - see [LICENSE](LICENSE) for details.
 
 ## Support
 
-- 📖 [Documentation](https://dreamtree-ui.dev)
+- 📖 [Storybook](https://storybook.app.drm3.org)
 - 🐛 [Issue Tracker](https://github.com/dreamtree-ui/dreamtree-ui/issues)
 - 💬 [Discussions](https://github.com/dreamtree-ui/dreamtree-ui/discussions)
 - 🌐 [Dreamtree Global](http://dreamtreeglobal.com/)

package/ai-skills/dreamtree-ui.md

@@ -193,7 +193,11 @@ When suggesting a component or new variant value, use this exact vocabulary.
 
 **Interaction primitives** — reach for these before hand-rolling the pattern:
 
-- `Drawer` — side/edge sheet for record peeks and editors (`isOpen`, `onClose`, `title`, `placement`, `size`, `footer`); don't fake one with `Dialog size="lg"`.
+- `Drawer` — side/edge sheet for record peeks and editors (`isOpen`, `onClose`, `title`, `placement`, `size`, `footer`); don't fake one with `Dialog size="lg"`. On phones use `placement="bottom"` (+ `swipeToClose`) as the bottom sheet: it already has a grab `handle`, rounded top and safe-area padding — don't add them with `className`.
+- `FootNav` — phone tab bar. A centre "+" is an item with `variant: 'action'` (raised primary circle); give it `'aria-haspopup': 'dialog'` and `'aria-expanded'` when it opens a sheet.
+- `Button` as a link — `<Button href="tel:…">` or `<Button as={Link} to="/x">`; never copy Button's class string onto an `<a>`.
+- `Select size="lg"` — 44px trigger for phone forms (`md` already grows to 44px on touch screens).
+- `Stepper` steps take `title` (or its alias `label`). `Radio` follows the primary token by default — don't pass `radioColor` to match the brand.
 - `Popover` — click-triggered panel with controls (`trigger={<Button>…</Button>}`, children or `({ close }) => …`); `Tooltip` is for read-only hover text only.
 - `Textarea` — same API as `Input` plus `autoResize`/`maxRows`; never a raw `<textarea>`.
 - `Slider` — `defaultValue={40}` for one thumb, `[low, high]` for a range; `onChangeEnd` to save after a drag.

package/dist/ai-schema.json

@@ -304,6 +304,7 @@
           "success",
           "warning",
           "error",
+          "info",
           "outline"
         ],
         "default": "\"default\""
@@ -527,6 +528,27 @@
           "submit",
           "reset"
         ]
+      },
+      "as": {
+        "type": "ElementType",
+        "required": false,
+        "default": "\"button\""
+      },
+      "href": {
+        "type": "string",
+        "required": false
+      },
+      "target": {
+        "type": "string",
+        "required": false
+      },
+      "rel": {
+        "type": "string",
+        "required": false
+      },
+      "to": {
+        "type": "string | Record<string, unknown>",
+        "required": false
       }
     }
   },
@@ -1098,6 +1120,16 @@
       "initialFocusRef": {
         "type": "RefObject",
         "required": false
+      },
+      "handle": {
+        "type": "boolean",
+        "required": false,
+        "default": "true for placement=\"bottom\", else false"
+      },
+      "swipeToClose": {
+        "type": "boolean",
+        "required": false,
+        "default": "false"
       }
     }
   },
@@ -1906,7 +1938,7 @@
       "radioColor": {
         "type": "string",
         "required": false,
-        "default": "\"blue\""
+        "default": "\"rgb(var(--dt-primary-600))\""
       },
       "ariaLabel": {
         "type": "string",
@@ -2264,6 +2296,16 @@
       "renderGroupLabel": {
         "type": "(label: string) => ReactNode",
         "required": false
+      },
+      "size": {
+        "type": "enum",
+        "required": false,
+        "values": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "default": "\"md\""
       }
     }
   },
@@ -2692,7 +2734,7 @@
     "forwardRef": true,
     "props": {
       "steps": {
-        "type": "StepperStep[]",
+        "type": "Array",
         "required": true,
         "default": "[]"
       },
@@ -2936,7 +2978,8 @@
       },
       "theme": {
         "type": "TableTheme",
-        "required": false
+        "required": false,
+        "default": "see below"
       },
       "responsiveBreakpoint": {
         "type": "number",

package/dist/components/core/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/core/Button.jsx"],"names":[],"mappings":";AAIA,gFAmDG;kBAvD+B,OAAO"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/core/Button.jsx"],"names":[],"mappings":";AAIA,gFAkEG;kBAtE+B,OAAO"}

package/dist/components/core/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/core/Radio.jsx"],"names":[],"mappings":";AAYA,+EAqIG;kBAhJgD,OAAO"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/core/Radio.jsx"],"names":[],"mappings":";AAYA,+EAsIG;kBAjJgD,OAAO"}

package/dist/components/core/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/core/Select.jsx"],"names":[],"mappings":";AAqGA,gFAszBE;kBAn5BK,OAAO"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/core/Select.jsx"],"names":[],"mappings":";AA8GA,gFAwzBE;kBA95BK,OAAO"}

package/dist/components/core/Table/MobileCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileCard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/MobileCard.jsx"],"names":[],"mappings":";AAWA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAoOC"}
+{"version":3,"file":"MobileCard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/MobileCard.jsx"],"names":[],"mappings":";AAYA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAsOC"}

package/dist/components/core/Table/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/TableRow.jsx"],"names":[],"mappings":";AAWA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CA6RC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/TableRow.jsx"],"names":[],"mappings":";AAYA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CA+RC"}

package/dist/components/core/Table/helpers.d.ts

@@ -1,4 +1,16 @@
 export function getRowKey(row: any, globalIndex: any): string;
+export function getStripeProps(stripe: any): {
+    className?: undefined;
+    style?: undefined;
+} | {
+    className: any;
+    style?: undefined;
+} | {
+    style: {
+        backgroundColor: any;
+    };
+    className?: undefined;
+};
 export function rowHasDetails(hasDetails: any, row: any, index: any): boolean;
 export function getActionLabelText(action: any): any;
 export function mergeDefaultActions(overrides: any[], defaults: any[]): any[];

package/dist/components/core/Table/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/helpers.js"],"names":[],"mappings":"AAGO,8DAMN;AAaM,8EACqE;AAMrE,qDAGG;AAcH,8EAmBN;AAuBM,wCALI,gBAAc,OACd,MAAM,SACN,MAAM,GACJ;IAAE,aAAa,QAAQ;IAAC,WAAW,QAAO;CAAE,CAyBxD"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/helpers.js"],"names":[],"mappings":"AAGO,8DAMN;AAOM;;;;;;;;;;;EAKN;AAaM,8EACqE;AAMrE,qDAGG;AAcH,8EAmBN;AAuBM,wCALI,gBAAc,OACd,MAAM,SACN,MAAM,GACJ;IAAE,aAAa,QAAQ;IAAC,WAAW,QAAO;CAAE,CAyBxD"}

package/dist/components/feedback/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Dialog.jsx"],"names":[],"mappings":";AAmCA,gFAuJG;kBA1LsC,OAAO"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Dialog.jsx"],"names":[],"mappings":";AAoCA,gFA0JG;kBA9LsC,OAAO"}

package/dist/components/feedback/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Drawer.jsx"],"names":[],"mappings":";AAiCA,gFAyFG;kBA1HkC,OAAO"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Drawer.jsx"],"names":[],"mappings":";AAqCA,gFAqHG;kBA1JkC,OAAO"}

package/dist/components/navigation/FootNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FootNav.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/FootNav.jsx"],"names":[],"mappings":";AAKA,iFA8CG;kBAnDe,OAAO"}
+{"version":3,"file":"FootNav.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/FootNav.jsx"],"names":[],"mappings":";AAmBA,iFA0DG;kBA7Ee,OAAO"}

package/dist/components/utility/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Badge.jsx"],"names":[],"mappings":";AAGA,+EA6CG;kBAhDe,OAAO"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Badge.jsx"],"names":[],"mappings":";AAGA,+EA8CG;kBAjDe,OAAO"}

package/dist/components/utility/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Stepper.jsx"],"names":[],"mappings":";AAIA,iFAoIG;kBAxIe,OAAO"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Stepper.jsx"],"names":[],"mappings":";AAIA,iFAuIG;kBA3Ie,OAAO"}

package/dist/esm/components/blocks/StatusPill.js

@@ -10,7 +10,7 @@ var _excluded = ["status", "map", "tone", "icon", "children", "className"];
 // One map from domain state to tone + human label; unknown states are humanized, never shown raw.
 var TONE_TO_VARIANT = {
   neutral: 'secondary',
-  info: 'primary',
+  info: 'info',
   success: 'success',
   warning: 'warning',
   danger: 'error',

package/dist/esm/components/core/Button.js

@@ -5,7 +5,7 @@ import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
 import { Loader2 } from 'lucide-react';
 
-var _excluded = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth"];
+var _excluded = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth", "as", "onClick"];
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$variant = _ref.variant,
@@ -18,12 +18,19 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     leftIcon = _ref.leftIcon,
     rightIcon = _ref.rightIcon,
     fullWidth = _ref.fullWidth,
+    as = _ref.as,
+    onClick = _ref.onClick,
     props = _objectWithoutProperties(_ref, _excluded);
-  var baseClasses = cn('inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none', {
+  // `as` renders any element or component (an <a>, a router Link) with the
+  // Button's look; a bare `href` implies an <a>.
+  var Component = as || (props.href !== undefined ? 'a' : 'button');
+  var isNativeButton = Component === 'button';
+  var isDisabled = disabled || loading;
+  var baseClasses = cn('inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none', {
     // Variants
     'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500': variant === 'primary',
     'bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus:ring-secondary-500': variant === 'secondary',
-    'bg-transparent border border-gray-300 hover:bg-gray-50 focus:ring-primary-500': variant === 'outline',
+    'bg-transparent border border-gray-300 hover:bg-gray-50 focus:ring-primary-500 dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus:ring-offset-gray-900': variant === 'outline',
     'bg-transparent text-primary-600 hover:bg-primary-50 focus:ring-primary-500': variant === 'ghost',
     'bg-error-600 text-white hover:bg-error-700 focus:ring-error-500': variant === 'destructive',
     'bg-success-600 text-white hover:bg-success-700 focus:ring-success-500': variant === 'success',
@@ -38,10 +45,20 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // Full width
     'w-full': fullWidth
   }, className);
-  return jsxs("button", _objectSpread2(_objectSpread2({
+  return jsxs(Component, _objectSpread2(_objectSpread2(_objectSpread2({
     ref: ref,
-    className: baseClasses,
-    disabled: disabled || loading
+    className: baseClasses
+  }, isNativeButton ? {
+    disabled: isDisabled
+  }
+  // Links can't be `disabled`: announce it and swallow the click instead.
+  : isDisabled && {
+    'aria-disabled': true,
+    tabIndex: -1
+  }), {}, {
+    onClick: !isNativeButton && isDisabled ? function (e) {
+      return e.preventDefault();
+    } : onClick
   }, props), {}, {
     children: [loading && jsx(Loader2, {
       className: "mr-2 h-4 w-4 animate-spin"

package/dist/esm/components/core/Radio.js

@@ -51,7 +51,8 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var autoId = useId();
   var inputId = id || "".concat(autoId, "-radio");
-  var accentColor = radioColor || "blue";
+  // Default to the brand's primary token so the radio follows theming.
+  var accentColor = radioColor || "rgb(var(--dt-primary-600))";
   var _useState = useState(!!defaultChecked),
     _useState2 = _slicedToArray(_useState, 2),
     internalChecked = _useState2[0],
@@ -109,7 +110,7 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
         "--radio-accent": accentColor
       },
       children: jsx("span", {
-        className: cn("flex items-center justify-center rounded-full border transition-colors duration-150 ease-in-out border-slate-300", sizeClasses.outer, disabled ? "bg-slate-100" : "bg-white", isChecked ? "shadow-inner" : ""),
+        className: cn("flex items-center justify-center rounded-full border transition-colors duration-150 ease-in-out border-slate-300 dark:border-gray-600", sizeClasses.outer, disabled ? "bg-slate-100 dark:bg-gray-800" : "bg-white dark:bg-gray-900", isChecked ? "shadow-inner" : ""),
         children: jsx("span", {
           "aria-hidden": true,
           className: cn("rounded-full transform transition-all duration-200 ease-out", sizeClasses.dot),

package/dist/esm/components/core/Select.js

@@ -7,7 +7,7 @@ import { cn } from '../../utils/cn.js';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
 import { ChevronDown, X, Check, Search, Plus } from 'lucide-react';
 
-var _excluded = ["options", "value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name"];
+var _excluded = ["options", "value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name", "size"];
 /**
  * Enhanced Select component (debounce removed)
  * - Supports single and multi select
@@ -106,6 +106,14 @@ var highlight = function highlight() {
     }), label.slice(idx + term.length)]
   });
 };
+// Trigger sizes. min-h (not h) so multi-select tags can wrap. `md` keeps its
+// desktop look but grows to the 44px touch target on coarse pointers; `lg` is
+// 44px everywhere.
+var SIZE_CLASSES = {
+  sm: "min-h-8 px-2.5 py-1 text-xs",
+  md: "min-h-[38px] px-3 py-2 text-sm [@media(pointer:coarse)]:min-h-11",
+  lg: "min-h-11 px-4 py-2.5 text-base"
+};
 var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
@@ -142,6 +150,8 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     maxTagCount = _ref$maxTagCount === void 0 ? 3 : _ref$maxTagCount,
     renderGroupLabel = _ref.renderGroupLabel,
     name = _ref.name,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -712,7 +722,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
         "aria-describedby": describedBy,
         "aria-invalid": error ? true : undefined,
-        className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
+        className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", SIZE_CLASSES[size] || SIZE_CLASSES.md, {
           "border-error-500 focus:ring-error-500": error,
           "text-primary-500": !selectedOptions.length,
           "pr-14": showClearButton

package/dist/esm/components/core/Table/ActionMenu.js

@@ -6,8 +6,8 @@ import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
 import { useLatestRef } from '../../../hooks/useLatestRef.js';
 
-var DEFAULT_MENU_BG = "bg-white border border-gray-100 shadow-xl";
-var DEFAULT_MENU_ITEM_HOVER = "opacity-75 hover:opacity-100 hover:bg-gray-100/80 active:bg-gray-200/80";
+var DEFAULT_MENU_BG = "bg-surface border border-line shadow-xl";
+var DEFAULT_MENU_ITEM_HOVER = "opacity-75 hover:opacity-100 hover:bg-gray-100/80 active:bg-gray-200/80 dark:hover:bg-gray-800 dark:active:bg-gray-700";
 function ActionMenu(_ref) {
   var _theme$menuBg, _theme$menuItemHover;
   var _ref$actions = _ref.actions,
@@ -211,7 +211,7 @@ function ActionMenu(_ref) {
     children: jsx("div", {
       className: "p-1.5 space-y-0.5",
       children: !Array.isArray(actions) || actions.length === 0 ? jsx("div", {
-        className: "px-3 py-2 text-sm text-gray-400 italic",
+        className: "px-3 py-2 text-sm text-muted italic",
         children: "No actions"
       }) : actions.map(function (action, idx) {
         var _action$name;
@@ -222,7 +222,7 @@ function ActionMenu(_ref) {
             type: "button",
             disabled: isDisabled,
             "aria-disabled": isDisabled || undefined,
-            className: cn("w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 rounded-lg transition-colors font-medium", isDisabled ? "opacity-50 cursor-not-allowed text-gray-400" : ["text-gray-700 hover:text-gray-900", menuItemHover, isFocused ? "bg-gray-100 text-gray-900 ring-1 ring-gray-300" : ""]),
+            className: cn("w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 rounded-lg transition-colors font-medium", isDisabled ? "opacity-50 cursor-not-allowed text-muted" : ["text-foreground", menuItemHover, isFocused ? "bg-gray-100 text-gray-900 ring-1 ring-gray-300 dark:bg-gray-800 dark:text-foreground dark:ring-gray-600" : ""]),
             onMouseEnter: function onMouseEnter() {
               return !isDisabled && setFocusedIndex(idx);
             },
@@ -234,7 +234,7 @@ function ActionMenu(_ref) {
             },
             children: action.render ? action.render(row) : jsxs(Fragment, {
               children: [action.icon && jsx("span", {
-                className: "inline-flex text-gray-500 flex-shrink-0",
+                className: "inline-flex text-muted flex-shrink-0",
                 children: action.icon
               }), jsx("span", {
                 className: "truncate",

package/dist/esm/components/core/Table/ColumnMenu.js

@@ -4,7 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import { cn } from '../../../utils/cn.js';
 
-var DEFAULT_ROW_HOVER = "bg-gray-50";
+var DEFAULT_ROW_HOVER = "bg-background";
 /**
  * Column visibility toggle menu
  */

package/dist/esm/components/core/Table/FieldInput.js

@@ -56,7 +56,7 @@ function FieldInput(_ref) {
       onClick: stopProp,
       onMouseDown: stopProp,
       placeholder: "Enter ".concat(column.label || column.key, "..."),
-      className: cn("w-full px-2 py-1 text-sm border rounded outline-none transition-all focus:ring-2 focus:ring-primary-500 bg-white resize-y min-h-[2.5rem]", className)
+      className: cn("w-full px-2 py-1 text-sm border rounded outline-none transition-all focus:ring-2 focus:ring-primary-500 bg-surface text-foreground resize-y min-h-[2.5rem]", className)
     });
   }
   // Select / Dropdown
@@ -76,7 +76,7 @@ function FieldInput(_ref) {
       onKeyDown: onKeyDown,
       onClick: stopProp,
       onMouseDown: stopProp,
-      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className),
+      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-surface text-foreground", className),
       children: [jsxs("option", {
         value: "",
         children: ["Select ", column.label || column.key]
@@ -119,7 +119,7 @@ function FieldInput(_ref) {
       onKeyDown: onKeyDown,
       onClick: stopProp,
       onMouseDown: stopProp,
-      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
+      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-surface text-foreground", className)
     });
   }
   // Number
@@ -135,7 +135,7 @@ function FieldInput(_ref) {
       onClick: stopProp,
       onMouseDown: stopProp,
       placeholder: "Enter ".concat(column.label || column.key, "..."),
-      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
+      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-surface text-foreground", className)
     });
   }
   // Default: Text
@@ -150,7 +150,7 @@ function FieldInput(_ref) {
     onClick: stopProp,
     onMouseDown: stopProp,
     placeholder: "Enter ".concat(column.label || column.key, "..."),
-    className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
+    className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-surface text-foreground", className)
   });
 }
 

package/dist/esm/components/core/Table/MobileCard.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { cn } from '../../../utils/cn.js';
 import { MoreVertical } from 'lucide-react';
 import ActionMenu from './ActionMenu.js';
-import { getRowKey, resolveActions, rowHasDetails, getActionLabelText } from './helpers.js';
+import { getRowKey, resolveActions, rowHasDetails, getActionLabelText, getStripeProps } from './helpers.js';
 
 /**
  * Mobile card view for a single table row
@@ -61,11 +61,10 @@ function MobileCard(_ref) {
   var hasActions = withAction && (inlineActions.length > 0 || menuActions.length > 0);
   var showHeader = showDetailsToggle || selectable || showSerial || hasActions;
   var stripeBg = stripedRows && !isSelected && Array.isArray(stripedColors) && stripedColors.length > 0 ? stripedColors[globalIndex % stripedColors.length] : undefined;
+  var stripeProps = getStripeProps(stripeBg);
   return jsxs("div", {
-    style: stripeBg ? {
-      backgroundColor: stripeBg
-    } : undefined,
-    className: cn("border rounded-lg mb-3 shadow-sm overflow-hidden transition-all duration-200", {
+    style: stripeProps.style,
+    className: cn(stripeProps.className, "border border-line rounded-lg mb-3 shadow-sm overflow-hidden transition-all duration-200", {
       "cursor-pointer": !!onRowClick,
       "bg-primary-50 border-primary-200": isSelected,
       "hover:shadow-md": !isSelected
@@ -74,7 +73,7 @@ function MobileCard(_ref) {
       return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
     },
     children: [showHeader && jsxs("div", {
-      className: "flex items-center justify-between p-4 border-b bg-gray-50",
+      className: "flex items-center justify-between p-4 border-b border-line bg-background",
       children: [jsxs("div", {
         className: "flex items-center gap-3",
         children: [showDetailsToggle && jsx("button", {
@@ -85,7 +84,7 @@ function MobileCard(_ref) {
           },
           "aria-expanded": isExpanded,
           "aria-label": isExpanded ? "Collapse row details" : "Expand row details",
-          className: "p-1 rounded hover:bg-gray-200",
+          className: "p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700",
           children: isExpanded ? "▾" : "▸"
         }), selectable && jsx("input", {
           type: "checkbox",
@@ -119,7 +118,7 @@ function MobileCard(_ref) {
               if (action.disabled) return;
               handleOnAction(action, row);
             },
-            className: cn("p-1.5 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-200"),
+            className: cn("p-1.5 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-200 dark:hover:bg-gray-700"),
             children: action.render ? action.render(row) : (_action$icon = action.icon) !== null && _action$icon !== void 0 ? _action$icon : jsx("span", {
               className: "text-xs",
               children: actionLabel
@@ -136,7 +135,7 @@ function MobileCard(_ref) {
               return toggleActions(e, actionCellKey, row);
             },
             "aria-expanded": activeActionRowKey === actionCellKey,
-            className: "p-1.5 rounded hover:bg-gray-200",
+            className: "p-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700",
             title: "Actions",
             "aria-label": "Actions",
             children: jsx(MoreVertical, {
@@ -178,7 +177,7 @@ function MobileCard(_ref) {
         }, column.key);
       })
     }), showDetailsToggle && isExpanded && DetailsComponent && jsx("div", {
-      className: "border-t bg-gray-50 p-4",
+      className: "border-t border-line bg-background p-4",
       children: jsx(DetailsComponent, {
         row: row,
         index: globalIndex

package/dist/esm/components/core/Table/MobileFilters.js

@@ -19,7 +19,7 @@ function MobileFilters(_ref) {
     handleFilter = _ref.handleFilter;
   var idPrefix = React.useId();
   return jsxs("div", {
-    className: "mb-4 p-3 bg-gray-50 rounded-lg",
+    className: "mb-4 p-3 bg-background rounded-lg",
     children: [jsxs("div", {
       className: "flex items-center justify-between mb-3",
       children: [jsx("h3", {

package/dist/esm/components/core/Table/Pagination.js

@@ -9,7 +9,7 @@ import { ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight } from 'lucide-r
  * Pagination controls component for the table
  * Supports both header (icon-only) and footer (with page numbers) variants
  */
-var DEFAULT_ROW_HOVER = "bg-gray-50";
+var DEFAULT_ROW_HOVER = "bg-background";
 // Header pagination (compact, icon-based)
 function PaginationHeader(_ref) {
   var _theme$rowHover;