@dreamtree-org/twreact-ui 1.3.4 → 1.3.6

package/README.md

@@ -2,38 +2,42 @@
 
 A comprehensive React + Tailwind CSS components library for building modern web applications. Built with accessibility, customization, and developer experience in mind.
 
+[![npm version](https://badge.fury.io/js/@dreamtree-org%2Ftwreact-ui.svg)](https://www.npmjs.com/package/@dreamtree-org/twreact-ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Website](https://img.shields.io/badge/by-Dreamtree--Org-0ea5e9)](https://www.dreamtreeglobal.com)
+
 ## About the Company
 
-Dreamtree UI is built and maintained under **[Dreamtree Global](http://dreamtreeglobal.com/)** — a team crafting thoughtful, accessible, developer-first software for the modern web. We believe great products start with a great foundation, and that's exactly what this design system aims to be: a polished, open, and dependable building block for teams everywhere.
+Dreamtree UI is built and maintained under **[Dreamtree-Org](https://www.dreamtreeglobal.com)** — a team crafting thoughtful, developer-first software for the modern web. We believe great products start with a great foundation, and that's exactly what this design system aims to be: a polished, open, and dependable building block for teams everywhere.
 
-🌐 **Website:** [dreamtreeglobal.com](http://dreamtreeglobal.com/)
+🌐 **Website:** [www.dreamtreeglobal.com](https://www.dreamtreeglobal.com)
 
 ## Author & Maintainer
 
-**Partha Preetham Krishna M L**
+**Partha Preetham Krishna** — [Dreamtree-Org](https://www.dreamtreeglobal.com)
 📧 [preetham.krishna.dev@gmail.com](mailto:preetham.krishna.dev@gmail.com)
 
-Have an idea, a bug, or just want to say hi? Reach out anytime — feedback from developers like you is what keeps this library growing.
+Have an idea, a bug, or just want to say hi? Reach out anytime — feedback from developers like you is what keeps this design system growing.
 
 ## 💚 Sponsor & Support
 
-Dreamtree UI is **free and open source**, built in the open and powered entirely by passion and late nights. Every component you use — every accessible button, dark-mode-ready table, and tree-shakeable export — represents hours of careful craft so that *your* product can ship faster and feel better.
+Dreamtree UI is **free and open source**, built in the open and powered entirely by passion and late nights. Every feature you rely on — every accessible button, dark-mode-ready table, and tree-shakeable export — represents hours of careful craft so that _your_ product can ship faster and feel better.
 
-If this library has saved you time, sparked an idea, or made your app a little more beautiful, please consider supporting its continued development. **Your sponsorship keeps the updates coming, the bugs squashed, and the docs sharp — for the whole community.** Even the smallest contribution is a huge encouragement. 🙏
+If this design system has saved you time, sparked an idea, or made your app a little more beautiful, please consider supporting its continued development. **Your sponsorship keeps the updates coming, the bugs squashed, and the docs sharp — for the whole community.** Even the smallest contribution is a huge encouragement. 🙏
 
 ### ☕ Make a one-tap donation via UPI
 
 **📷 Scan the QR with any UPI app** (Google Pay, PhonePe, Paytm, BHIM, …) to pay instantly:
 
 <p>
-  <img src="https://unpkg.com/@dreamtree-org/twreact-ui@latest/doc/assets/upi-qr.png" alt="Scan to pay Dreamtree Global via UPI" width="220" height="220" />
+  <img src="https://unpkg.com/@dreamtree-org/twreact-ui@latest/doc/assets/upi-qr.png" alt="Scan to pay Dreamtree-Org via UPI" width="220" height="220" />
 </p>
 
-> **UPI ID:** `dhrugantha.llp@kotak` &nbsp;•&nbsp; **Payee:** Dreamtree Global
+> **UPI ID:** `dhrugantha.llp@kotak` &nbsp;•&nbsp; **Payee:** Dreamtree-Org
 >
 > 📱 On mobile, you can also tap the button below — it opens your UPI app directly. On desktop, scan the QR above or copy the UPI ID into your payment app.
 
-[![Pay via UPI](https://img.shields.io/badge/Pay-via%20UPI-22c55e?style=for-the-badge&logo=googlepay&logoColor=white)](upi://pay?pa=dhrugantha.llp@kotak&pn=Dreamtree%20Global&cu=INR&tn=Support%20Dreamtree%20UI)
+[![Pay via UPI](https://img.shields.io/badge/Pay-via%20UPI-22c55e?style=for-the-badge&logo=googlepay&logoColor=white)](upi://pay?pa=dhrugantha.llp@kotak&pn=Dreamtree-Org&cu=INR&tn=Support%20Dreamtree%20UI)
 
 ### 🤝 Become a Sponsor
 
@@ -214,12 +218,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 +287,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 +519,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 +674,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 +717,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 +881,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`).
 
@@ -1019,16 +1028,24 @@ function UserTable() {
 
 ## Contributing
 
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
 
 ## License
 
-MIT License - see [LICENSE](LICENSE) for details.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
 ## Support
 
 - 📖 [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/)
-- 📧 [preetham.krishna.dev@gmail.com](mailto:preetham.krishna.dev@gmail.com)
+- 🐛 [Issue Tracker](https://github.com/dreamtree-org/dreamtree-org.twreact-ui/issues)
+- 📦 [npm package](https://www.npmjs.com/package/@dreamtree-org/twreact-ui)
+- 🌐 [Dreamtree-Org](https://www.dreamtreeglobal.com)
+- 📧 [preetham.krishna.dev@gmail.com](mailto:preetham.krishna.dev@gmail.com)
+
+---
+
+**Made with ❤️ by [Partha Preetham Krishna](https://www.linkedin.com/in/partha-preetham-krishna-68ba00197/)** under [Dreamtree-Org](https://www.dreamtreeglobal.com) · [www.dreamtreeglobal.com](https://www.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": "[]"
       },

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/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/feedback/Dialog.js

@@ -6,6 +6,7 @@ import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn.js';
 import { X } from 'lucide-react';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
 var _excluded = ["isOpen", "onClose", "title", "children", "size", "dismissible", "showCloseButton", "footer", "className", "onOpen"],
   _excluded2 = ["children", "className"],
@@ -141,11 +142,12 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
           children: title
         }), showCloseButton && jsx("button", {
           type: "button",
-          className: "rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100",
+          className: cn('inline-flex items-center justify-center rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100', TOUCH_TARGET),
           onClick: onClose,
           "aria-label": "Close dialog",
           children: jsx(X, {
-            className: "h-5 w-5"
+            className: "h-5 w-5",
+            "aria-hidden": "true"
           })
         })]
       }), jsx("div", {

package/dist/esm/components/feedback/Drawer.js

@@ -8,8 +8,10 @@ import { cn } from '../../utils/cn.js';
 import { setRefs } from '../../utils/position.js';
 import { useFocusTrap } from '../../hooks/useFocusTrap.js';
 import { useScrollLock } from '../../hooks/useScrollLock.js';
+import { useSwipeToClose } from '../../hooks/useSwipeToClose.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
-var _excluded = ["isOpen", "onClose", "title", "description", "children", "placement", "size", "dismissible", "showCloseButton", "footer", "initialFocusRef", "className"],
+var _excluded = ["isOpen", "onClose", "title", "description", "children", "placement", "size", "dismissible", "showCloseButton", "footer", "initialFocusRef", "handle", "swipeToClose", "className", "style"],
   _excluded2 = ["className"],
   _excluded3 = ["className"],
   _excluded4 = ["className"];
@@ -17,7 +19,8 @@ var PLACEMENT_CLASSES = {
   right: "inset-y-0 right-0 h-full w-full border-l",
   left: "inset-y-0 left-0 h-full w-full border-r",
   top: "inset-x-0 top-0 w-full border-b",
-  bottom: "inset-x-0 bottom-0 w-full border-t"
+  // Bottom sheet: rounded top and room for the home indicator (safe area).
+  bottom: "inset-x-0 bottom-0 w-full overflow-hidden rounded-t-2xl border-t pb-[env(safe-area-inset-bottom)]"
 };
 var SIDE_SIZES = {
   sm: "max-w-xs",
@@ -40,7 +43,7 @@ var CloseButton = function CloseButton(_ref) {
     type: "button",
     onClick: onClose,
     "aria-label": "Close drawer",
-    className: cn("rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2", "dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:ring-offset-gray-900", className),
+    className: cn("inline-flex items-center justify-center rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2", "dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:ring-offset-gray-900", TOUCH_TARGET, className),
     children: jsx(X, {
       className: "h-5 w-5",
       "aria-hidden": "true"
@@ -63,7 +66,11 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
     showCloseButton = _ref2$showCloseButton === void 0 ? true : _ref2$showCloseButton,
     footer = _ref2.footer,
     initialFocusRef = _ref2.initialFocusRef,
+    handle = _ref2.handle,
+    _ref2$swipeToClose = _ref2.swipeToClose,
+    swipeToClose = _ref2$swipeToClose === void 0 ? false : _ref2$swipeToClose,
     className = _ref2.className,
+    style = _ref2.style,
     props = _objectWithoutProperties(_ref2, _excluded);
   var panelRef = useRef(null);
   var titleId = "drawer-title-".concat(useId());
@@ -73,6 +80,17 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
   // Without title/description/footer the children are the panel content, so
   // Drawer.Header / Drawer.Body / Drawer.Footer compose without double padding.
   var composed = !title && !description && !footer;
+  var showHandle = handle !== null && handle !== void 0 ? handle : side === "bottom";
+  var swipe = useSwipeToClose({
+    enabled: swipeToClose && side === "bottom" && dismissible,
+    onClose: onClose
+  });
+  // The grab zone (handle + header) starts a swipe; the scrolling body never does.
+  var grabProps = swipeToClose && side === "bottom" && dismissible ? _objectSpread2(_objectSpread2({}, swipe.dragProps), {}, {
+    className: "touch-none cursor-grab"
+  }) : {
+    className: ""
+  };
   useScrollLock(isOpen);
   useFocusTrap(panelRef, {
     active: isOpen,
@@ -91,7 +109,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
       onClick: function onClick() {
         return dismissible && (onClose === null || onClose === void 0 ? void 0 : onClose());
       }
-    }), jsx("div", _objectSpread2(_objectSpread2({
+    }), jsxs("div", _objectSpread2(_objectSpread2({
       ref: function ref(node) {
         return setRefs(node, panelRef, _ref3);
       },
@@ -101,16 +119,27 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
       "aria-describedby": description ? descriptionId : undefined,
       tabIndex: -1,
       "data-placement": side,
-      className: cn("absolute flex flex-col border-gray-200 bg-white text-gray-900 shadow-xl focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "animate-fade-in motion-reduce:animate-none", PLACEMENT_CLASSES[side], (isEdge ? EDGE_SIZES : SIDE_SIZES)[size] || (isEdge ? EDGE_SIZES.md : SIDE_SIZES.md), className)
+      className: cn("absolute flex flex-col border-gray-200 bg-white text-gray-900 shadow-xl focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "animate-fade-in motion-reduce:animate-none", PLACEMENT_CLASSES[side], (isEdge ? EDGE_SIZES : SIDE_SIZES)[size] || (isEdge ? EDGE_SIZES.md : SIDE_SIZES.md), !swipe.dragging && "transition-transform duration-200 ease-out motion-reduce:transition-none", className),
+      style: swipe.offset ? _objectSpread2(_objectSpread2({}, style), {}, {
+        transform: "translateY(".concat(swipe.offset, "px)")
+      }) : style
     }, props), {}, {
-      children: composed ? jsxs(Fragment, {
+      children: [showHandle && jsx("div", _objectSpread2(_objectSpread2({
+        "aria-hidden": "true",
+        "data-testid": "drawer-handle"
+      }, grabProps), {}, {
+        className: cn("flex shrink-0 justify-center pb-1 pt-3", grabProps.className),
+        children: jsx("span", {
+          className: "h-1.5 w-10 rounded-full bg-gray-300 dark:bg-gray-600"
+        })
+      })), composed ? jsxs(Fragment, {
         children: [showCloseButton && jsx(CloseButton, {
           onClose: onClose,
           className: "absolute right-3 top-3"
         }), children]
       }) : jsxs(Fragment, {
-        children: [jsxs("div", {
-          className: "flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-4 dark:border-gray-700",
+        children: [jsxs("div", _objectSpread2(_objectSpread2({}, grabProps), {}, {
+          className: cn("flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-4 dark:border-gray-700", showHandle && "pt-2", grabProps.className),
           children: [jsxs("div", {
             className: "min-w-0",
             children: [title && jsx("h2", {
@@ -125,14 +154,14 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
           }), showCloseButton && jsx(CloseButton, {
             onClose: onClose
           })]
-        }), jsx("div", {
+        })), jsx("div", {
           className: "min-h-0 flex-1 overflow-y-auto px-6 py-4",
           children: children
         }), footer && jsx("div", {
           className: "flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700",
           children: footer
         })]
-      })
+      })]
     }))]
   }), document.body);
 });