@dreamtree-org/twreact-ui 2.0.5 → 2.0.7

package/README.md

@@ -989,7 +989,7 @@ function App() {
 
 `ThemeProvider` sets `data-theme`, the `.dark` class and `color-scheme` on `<html>`, so `dark:` utilities work whether your `tailwind.config.js` uses `darkMode: 'class'` or a `[data-theme="dark"]` selector.
 
-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.
+Surfaces such as `Card`, `Sidebar`, `Navbar`, `Table`, `FootNav`, `Dropdown`, the `Select` / `DatePicker` / `DateRangePicker` triggers and menus, `Accordion`, `Popover`, `Tour`, `Drawer`, `Pagination`, `LocationPicker`, `Form`'s textarea / file button, the chart tooltip and `RichTextEditor` 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.
 
 > **Accessibility fixes (1.4.x):** Radio groups keep a single selection when uncontrolled, Rate and DatePicker use one tab stop with arrow-key focus, Dialog/Sidebar/AppShell drawers share one focus trap and scroll lock, Toast announces via `role="status"`, Alert's dismiss button is labelled, and Input shows a visible focus ring in its default state. No props changed.
 

package/dist/charts/index.js

@@ -57,7 +57,7 @@ function ChartTooltipContent(_ref2) {
     hideLabel = _ref2$hideLabel === void 0 ? false : _ref2$hideLabel;
   if (!active || !payload || !payload.length) return null;
   return jsxRuntime.jsxs("div", {
-    className: "rounded-md border border-gray-200 bg-white px-3 py-2 text-xs text-gray-900 shadow-md dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100",
+    className: "rounded-md border border-line bg-surface px-3 py-2 text-xs text-foreground shadow-md",
     "data-chart-tooltip": "",
     children: [!hideLabel && label != null && label !== "" && jsxRuntime.jsx("p", {
       className: "mb-1 font-medium",

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/core/Popover.jsx"],"names":[],"mappings":";AA0BA,iFAwIG;kBAlK0D,OAAO"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/core/Popover.jsx"],"names":[],"mappings":";AA0BA,iFAuIG;kBAjK0D,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Tour.jsx"],"names":[],"mappings":";AAwCA,8EA+LG;kBAvOoF,OAAO"}
+{"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Tour.jsx"],"names":[],"mappings":";AAwCA,8EA8LG;kBAtOoF,OAAO"}

package/dist/esm/components/charts/ChartFrame.js

@@ -50,7 +50,7 @@ function ChartTooltipContent(_ref2) {
     hideLabel = _ref2$hideLabel === void 0 ? false : _ref2$hideLabel;
   if (!active || !payload || !payload.length) return null;
   return jsxs("div", {
-    className: "rounded-md border border-gray-200 bg-white px-3 py-2 text-xs text-gray-900 shadow-md dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100",
+    className: "rounded-md border border-line bg-surface px-3 py-2 text-xs text-foreground shadow-md",
     "data-chart-tooltip": "",
     children: [!hideLabel && label != null && label !== "" && jsx("p", {
       className: "mb-1 font-medium",

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

@@ -173,7 +173,7 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
     lg: "rounded-lg",
     xl: "rounded-xl"
   };
-  var wrapperClasses = cn(bordered ? "bg-white" : "bg-transparent", bordered ? "divide-y divide-gray-200" : "", roundedMap[rounded] || roundedMap.md, "shadow-sm", className);
+  var wrapperClasses = cn(bordered ? "bg-surface text-foreground" : "bg-transparent", bordered ? "divide-y divide-line" : "", roundedMap[rounded] || roundedMap.md, "shadow-sm", className);
   var renderLeftIcon = function renderLeftIcon(item, index) {
     var left = item === null || item === void 0 ? void 0 : item.leftIcon;
     if (!left) return null;
@@ -201,7 +201,7 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
       var panelId = "".concat(uid, "accordion-panel-").concat(id);
       var leftIconEl = renderLeftIcon(item, index);
       return jsxs("div", {
-        className: "bg-white",
+        className: "bg-surface text-foreground",
         children: [jsx("h3", {
           children: jsx("button", {
             ref: function ref(el) {

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

@@ -157,7 +157,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       edge: isSel
     };
   };
-  var actionClass = isSheet ? "rounded-md px-3 py-2 text-sm hover:bg-gray-100" : "rounded-md px-2 py-1 text-xs hover:bg-gray-100";
+  var actionClass = isSheet ? "rounded-md px-3 py-2 text-sm hover:bg-line/50" : "rounded-md px-2 py-1 text-xs hover:bg-line/50";
   var actions = jsxs("div", {
     className: "flex gap-2",
     children: [showClear && jsx("button", {
@@ -208,7 +208,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
         "aria-describedby": error ? errorId : helperText ? helperId : undefined,
         "aria-invalid": error ? true : undefined,
-        className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white 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-line bg-surface text-foreground 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", {
           "border-error-500 focus:ring-error-500": error,
           // Empty: the placeholder reads muted, like Input's
           // ::placeholder (#159). `className` still merges last.
@@ -244,7 +244,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           // this button unmounts once the value clears
           (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.focus();
         },
-        className: "absolute right-9 top-1/2 inline-flex -translate-y-1/2 items-center justify-center rounded-md p-1 text-primary-400 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50",
+        className: "absolute right-9 top-1/2 inline-flex -translate-y-1/2 items-center justify-center rounded-md p-1 text-primary-400 hover:bg-line/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50",
         children: jsx(X, {
           className: "h-4 w-4",
           "aria-hidden": "true"

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

@@ -298,12 +298,12 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
         onClick: function onClick() {
           return applyPreset(preset);
         },
-        className: cn("shrink-0 rounded-full border px-3 text-xs font-medium transition-colors motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", isSheet ? "min-h-11 text-sm" : "py-1", active ? "border-primary-600 bg-primary-600 text-white" : "border-gray-300 hover:bg-gray-100"),
+        className: cn("shrink-0 rounded-full border px-3 text-xs font-medium transition-colors motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", isSheet ? "min-h-11 text-sm" : "py-1", active ? "border-primary-600 bg-primary-600 text-white" : "border-line hover:bg-line/50"),
         children: preset.label
       }, preset.label);
     })
   }) : null;
-  var actionClass = isSheet ? "rounded-md px-3 py-2 text-sm hover:bg-gray-100" : "rounded-md px-2 py-1 text-xs hover:bg-gray-100";
+  var actionClass = isSheet ? "rounded-md px-3 py-2 text-sm hover:bg-line/50" : "rounded-md px-2 py-1 text-xs hover:bg-line/50";
   var calendar = jsx(Calendar, {
     month: currentMonth,
     onMonthChange: setCurrentMonth,
@@ -358,7 +358,7 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
         "aria-describedby": error ? errorId : helperText ? helperId : undefined,
         "aria-invalid": error ? true : undefined,
-        className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white 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-line bg-surface text-foreground 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", {
           "border-error-500 focus:ring-error-500": error,
           // Empty: the placeholder reads muted, like Input's
           // ::placeholder (#159). `className` still merges last.

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

@@ -218,7 +218,7 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
                 id: fieldId,
                 "aria-invalid": error ? true : undefined,
                 "aria-describedby": describedBy,
-                className: cn("flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-primary-400 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 rounded-md border border-line bg-surface text-foreground px-3 py-2 text-sm placeholder:text-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
                   "border-error-500 focus:ring-error-500": error
                 }),
                 placeholder: placeholder,
@@ -257,7 +257,7 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
                   },
                   "aria-invalid": error ? true : undefined,
                   "aria-describedby": describedBy,
-                  className: "rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  className: "rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600"
                 }), label && jsxs("label", {
                   htmlFor: fieldId,
                   className: "ml-2 text-sm",
@@ -354,7 +354,7 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
                 className: "mt-1 flex items-center",
                 children: [jsxs("label", {
                   htmlFor: name,
-                  className: cn("cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", {
+                  className: cn("cursor-pointer inline-flex items-center px-4 py-2 border border-line rounded-md shadow-sm text-sm font-medium bg-surface text-foreground hover:bg-background focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", {
                     "border-error-500": error
                   }),
                   children: [jsx("svg", {

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

@@ -204,7 +204,7 @@ var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref)
       }, inputProps), {}, {
         value: text,
         onChange: handleInputChange,
-        className: cn("rounded-md border border-gray-300 bg-white py-2 px-3 text-sm text-gray-900 placeholder-gray-400 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500", "dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500", "[@media(pointer:coarse)]:text-base", fullWidth ? "w-full" : "min-w-[200px]", status === "error" && "border-error-500 dark:border-error-400", inputProps.className, inputPaddingClass)
+        className: cn("rounded-md border border-line bg-surface py-2 px-3 text-sm text-foreground placeholder-gray-400 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500", "dark:placeholder-gray-500", "[@media(pointer:coarse)]:text-base", fullWidth ? "w-full" : "min-w-[200px]", status === "error" && "border-error-500 dark:border-error-400", inputProps.className, inputPaddingClass)
       })), jsx("div", {
         className: cn("absolute inset-y-0 flex items-center", iconPosition === "right" ? "right-2" : "left-2"),
         children: iconButton

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

@@ -166,7 +166,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, _ref2) {
       onKeyDown: handlePanelKeyDown,
       "data-side": resolvedPlacement.split("-")[0],
       "data-presentation": "popover",
-      className: cn("z-popover min-w-[12rem] max-w-sm rounded-lg border border-gray-200 bg-white p-4 text-sm text-gray-900 shadow-lg focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "animate-fade-in motion-reduce:animate-none", className),
+      className: cn("z-popover min-w-[12rem] max-w-sm rounded-lg border border-line bg-surface p-4 text-sm text-foreground shadow-lg focus:outline-none", "animate-fade-in motion-reduce:animate-none", className),
       style: _objectSpread2(_objectSpread2({}, floatingStyles), style)
     }, props), {}, {
       children: [title && jsx("h2", {

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

@@ -505,7 +505,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         className: "flex flex-wrap gap-1",
         children: selectedOptions.map(function (opt) {
           return jsxs("div", {
-            className: "flex items-center gap-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs",
+            className: "flex items-center gap-1 rounded-full bg-line/60 px-2 py-0.5 text-xs",
             children: [jsx("span", {
               className: "truncate max-w-[8rem]",
               children: opt.label
@@ -534,7 +534,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           className: "flex flex-wrap gap-1",
           children: selectedOptions.slice(0, maxTagCount).map(function (opt) {
             return jsx("div", {
-              className: "flex items-center gap-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs",
+              className: "flex items-center gap-1 rounded-full bg-line/60 px-2 py-0.5 text-xs",
               children: jsx("span", {
                 className: "truncate max-w-[6rem]",
                 children: opt.label
@@ -572,7 +572,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
               "aria-expanded": !collapsed,
               "aria-controls": collapsed ? undefined : groupOptionsId,
               "aria-label": "".concat(collapsed ? "Expand" : "Collapse", " ").concat(groupName),
-              className: "text-xs border border-slate-200 p-0.5 rounded-md cursor-pointer hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500",
+              className: "text-xs border border-line p-0.5 rounded-md cursor-pointer hover:bg-line/50 focus:outline-none focus:ring-2 focus:ring-primary-500",
               onClick: function onClick() {
                 return setCollapsedGroups(function (prev) {
                   return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, group.label, !prev[group.label]));
@@ -599,16 +599,16 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
                 onClick: function onClick() {
                   return handleSelect(option);
                 },
-                className: cn("flex items-center hover:bg-gray-100 cursor-pointer", rowClass, {
+                className: cn("flex items-center hover:bg-line/50 cursor-pointer", rowClass, {
                   "opacity-50 cursor-not-allowed": option.disabled,
-                  "bg-primary-50 text-primary-600": focusedIndex === index
+                  "bg-primary-50 text-primary-600 dark:bg-primary-900/40 dark:text-primary-300": focusedIndex === index
                 }),
                 children: [multiSelect && jsx("div", {
                   className: "mr-2",
                   children: selectedValues.includes(option.value) ? jsx(Check, {
                     className: "h-4 w-4 text-primary-600"
                   }) : jsx("div", {
-                    className: "h-4 w-4 rounded border border-gray-300"
+                    className: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600"
                   })
                 }), onMenuItemRender ? onMenuItemRender(option) : highlight(option.label, searchTerm), !multiSelect && selectedValues === option.value && jsx(Check, {
                   className: "ml-auto h-4 w-4 text-primary-600"
@@ -637,17 +637,17 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           onClick: function onClick() {
             return handleSelect(option);
           },
-          className: cn("flex items-center hover:bg-gray-100 cursor-pointer", ROW_CLASSES[isSheet ? "sheet" : "popover"], {
+          className: cn("flex items-center hover:bg-line/50 cursor-pointer", ROW_CLASSES[isSheet ? "sheet" : "popover"], {
             "opacity-50 cursor-not-allowed": option.disabled,
-            "bg-primary-50 text-primary-600": focusedIndex === index,
-            "bg-primary-100": multiSelect && selectedValues.includes(option.value)
+            "bg-primary-50 text-primary-600 dark:bg-primary-900/40 dark:text-primary-300": focusedIndex === index,
+            "bg-primary-100 dark:bg-primary-900/60": multiSelect && selectedValues.includes(option.value)
           }),
           children: [multiSelect && jsx("div", {
             className: "mr-2",
             children: selectedValues.includes(option.value) ? jsx(Check, {
               className: "h-4 w-4 text-primary-600"
             }) : jsx("div", {
-              className: "h-4 w-4 rounded border border-gray-300"
+              className: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600"
             })
           }), onMenuItemRender ? onMenuItemRender(option) : highlight(option.label, searchTerm), !multiSelect && selectedValues === option.value && jsx(Check, {
             className: "ml-auto h-4 w-4 text-primary-600"
@@ -659,7 +659,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         children: jsxs("button", {
           type: "button",
           onClick: handleCreate,
-          className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100",
+          className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-line/50 focus:outline-none focus:bg-line/50",
           children: [jsx(Plus, {
             className: "h-4 w-4",
             "aria-hidden": "true"
@@ -687,7 +687,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
               className: "h-4 w-4 text-primary-600",
               "aria-hidden": "true"
             }) : jsx("div", {
-              className: "h-4 w-4 rounded border border-gray-300"
+              className: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600"
             })
           });
         }()
@@ -752,7 +752,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 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, {
+        className: cn("flex w-full items-center justify-between rounded-md border border-line bg-surface text-foreground 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,
           // Empty: the placeholder reads muted, like Input's
           // ::placeholder (#159). `className` still merges last.
@@ -788,7 +788,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         type: "button",
         onClick: handleClear,
         "aria-label": "Clear selection",
-        className: cn("absolute right-8 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded p-1 text-primary-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500", TOUCH_TARGET),
+        className: cn("absolute right-8 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded p-1 text-primary-500 hover:bg-line/50 focus:outline-none focus:ring-2 focus:ring-primary-500", TOUCH_TARGET),
         children: jsx(X, {
           className: "h-4 w-4",
           "aria-hidden": "true"
@@ -811,7 +811,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         value: selectedValues !== null && selectedValues !== void 0 ? selectedValues : ""
       })), isOpen && !isSheet && typeof document !== "undefined" && /*#__PURE__*/createPortal(jsxs("div", {
         ref: popoverRef,
-        className: "fixed z-popover overflow-auto rounded-md border border-gray-300 bg-white shadow-lg",
+        className: "fixed z-popover overflow-auto rounded-md border border-line bg-surface text-foreground shadow-lg",
         role: "dialog",
         "data-placement": floatingPlacement.split("-")[0],
         // Portaled to document.body with position:fixed so the menu
@@ -823,7 +823,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           opacity: 0
         }),
         children: [searchable && jsx("div", {
-          className: "border-b border-gray-200 p-2",
+          className: "border-b border-line p-2",
           children: renderSearch()
         }), renderListbox()]
       }), document.body)]

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

@@ -1225,7 +1225,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             type: "button",
             "aria-label": "Reload",
             title: "Reload",
-            className: "px-4 py-2 bg-primary-100 flex items-center gap-2 rounded-lg md:rounded text-primary-700 hover:bg-primary-200 transition-colors",
+            className: "px-4 py-2 bg-primary-100 flex items-center gap-2 rounded-lg md:rounded text-primary-700 hover:bg-primary-200 transition-colors dark:bg-primary-900/40 dark:text-primary-300 dark:hover:bg-primary-900/60",
             onClick: onReload,
             children: [jsx(RefreshCcw, {
               className: "size-4",

package/dist/esm/components/core/internal/Calendar.js

@@ -305,8 +305,8 @@ function Calendar(_ref3) {
               className: cn("mx-auto rounded-md text-sm transition-colors motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-1", sheet ? "h-11 w-full min-w-0 text-base" : "h-9 w-full max-w-9", {
                 "text-primary-400": !currentMonth,
                 "bg-primary-600 text-primary-50": state.edge,
-                "bg-primary-200": state.inRange && !state.edge,
-                "bg-primary-100 text-primary-600": todayDate && !state.edge && !state.inRange,
+                "bg-primary-200 dark:bg-primary-900/60": state.inRange && !state.edge,
+                "bg-primary-100 text-primary-600 dark:bg-primary-900/40 dark:text-primary-300": todayDate && !state.edge && !state.inRange,
                 "hover:bg-background": currentMonth && !state.edge && !state.inRange && !disabled,
                 "cursor-not-allowed opacity-50": disabled
               }),

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

@@ -70,7 +70,7 @@ var DrawerTitleBar = function DrawerTitleBar(_ref2) {
     dragProps = _useGrabZone.dragProps,
     grabClass = _useGrabZone.grabClass;
   return jsx("div", _objectSpread2(_objectSpread2({}, dragProps), {}, {
-    className: cn("flex shrink-0 items-start justify-between gap-4 border-b border-gray-200 px-6 py-4 dark:border-gray-700", grabClass, className),
+    className: cn("flex shrink-0 items-start justify-between gap-4 border-b border-line px-6 py-4", grabClass, className),
     children: children
   }));
 };
@@ -145,7 +145,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     idPrefix: "drawer",
     testIdPrefix: "drawer",
     handleBarClassName: "bg-gray-300 dark:bg-gray-600",
-    panelClassName: cn("border-gray-200 bg-white text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", PLACEMENT_CLASSES[side], sizes[size] || sizes.md),
+    panelClassName: cn("border-line bg-surface text-foreground", PLACEMENT_CLASSES[side], sizes[size] || sizes.md),
     renderHeader: renderHeader
   }, props), {}, {
     children: composed ? children : jsxs(Fragment, {
@@ -153,7 +153,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
         className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4",
         children: children
       }), footer && jsx("div", {
-        className: "flex shrink-0 items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700",
+        className: "flex shrink-0 items-center justify-end gap-3 border-t border-line px-6 py-4",
         children: footer
       })]
     })
@@ -169,7 +169,7 @@ var DrawerHeader = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
   return jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({
     ref: ref
   }, props), dragProps), {}, {
-    className: cn("border-b border-gray-200 px-6 py-4 dark:border-gray-700", grabClass, className)
+    className: cn("border-b border-line px-6 py-4", grabClass, className)
   }));
 });
 var DrawerBody = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
@@ -185,7 +185,7 @@ var DrawerFooter = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     props = _objectWithoutProperties(_ref7, _excluded4);
   return jsx("div", _objectSpread2({
     ref: ref,
-    className: cn("flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700", className)
+    className: cn("flex items-center justify-end gap-3 border-t border-line px-6 py-4", className)
   }, props));
 });
 DrawerHeader.displayName = "Drawer.Header";

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

@@ -221,7 +221,7 @@ var Tour = /*#__PURE__*/forwardRef(function (_ref, _ref2) {
       onKeyDown: handleKeyDown,
       "data-placement": placementAttr,
       "data-presentation": docked ? "sheet" : "popover",
-      className: cn("fixed overflow-y-auto overscroll-contain rounded-lg border 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", "transition-opacity duration-200 motion-reduce:transition-none", docked ? "inset-x-4 bottom-4 max-h-[60dvh] pb-safe touch-pan-y" : "w-[min(22rem,calc(100vw-2rem))] max-h-[calc(100dvh-2rem)]", !docked && !rect && "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", ready ? "opacity-100" : "pointer-events-none opacity-0", className),
+      className: cn("fixed overflow-y-auto overscroll-contain rounded-lg border border-line bg-surface text-foreground shadow-xl focus:outline-none", "transition-opacity duration-200 motion-reduce:transition-none", docked ? "inset-x-4 bottom-4 max-h-[60dvh] pb-safe touch-pan-y" : "w-[min(22rem,calc(100vw-2rem))] max-h-[calc(100dvh-2rem)]", !docked && !rect && "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", ready ? "opacity-100" : "pointer-events-none opacity-0", className),
       style: anchored ? _objectSpread2(_objectSpread2({}, floatingStyles), style) : style
     }, swipeHandlers), rest), {}, {
       children: [jsxs("div", {

package/dist/esm/components/rich-text/RichTextEditor.js

@@ -12,7 +12,7 @@ import { selectToolbarState, DEFAULT_TOOLBAR, RichTextToolbar } from './RichText
 var _excluded = ["id", "className", "editorClassName", "label", "error", "helperText", "required", "disabled", "readOnly", "placeholder", "value", "defaultValue", "onChange", "outputFormat", "onFocus", "onBlur", "toolbar", "toolbarLabel", "stickyToolbar", "minHeight", "maxHeight", "autoFocus", "extensions", "aria-label", "aria-describedby"];
 // Tailwind's preflight strips list bullets, heading sizes, etc. These arbitrary
 // variants restore readable defaults inside the editable area only.
-var CONTENT_CLASSES = cn("px-3 py-2 text-sm text-gray-900 focus:outline-none dark:text-gray-100", "[&_p]:my-1 [&_h1]:my-2 [&_h1]:text-2xl [&_h1]:font-bold [&_h2]:my-2 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:my-1.5 [&_h3]:text-lg [&_h3]:font-semibold", "[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-0.5", "[&_blockquote]:my-2 [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-3 [&_blockquote]:text-gray-600 dark:[&_blockquote]:border-gray-600 dark:[&_blockquote]:text-gray-300", "[&_code]:rounded [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.85em] dark:[&_code]:bg-gray-800", "[&_pre]:my-2 [&_pre]:rounded-md [&_pre]:bg-gray-100 [&_pre]:p-3 dark:[&_pre]:bg-gray-800 [&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_a]:text-primary-600 [&_a]:underline dark:[&_a]:text-primary-400 [&_hr]:my-3 [&_hr]:border-gray-200 dark:[&_hr]:border-gray-700");
+var CONTENT_CLASSES = cn("px-3 py-2 text-sm text-foreground focus:outline-none", "[&_p]:my-1 [&_h1]:my-2 [&_h1]:text-2xl [&_h1]:font-bold [&_h2]:my-2 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:my-1.5 [&_h3]:text-lg [&_h3]:font-semibold", "[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-0.5", "[&_blockquote]:my-2 [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-3 [&_blockquote]:text-gray-600 dark:[&_blockquote]:border-gray-600 dark:[&_blockquote]:text-gray-300", "[&_code]:rounded [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.85em] dark:[&_code]:bg-gray-800", "[&_pre]:my-2 [&_pre]:rounded-md [&_pre]:bg-gray-100 [&_pre]:p-3 dark:[&_pre]:bg-gray-800 [&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_a]:text-primary-600 [&_a]:underline dark:[&_a]:text-primary-400 [&_hr]:my-3 [&_hr]:border-gray-200 dark:[&_hr]:border-gray-700");
 var toCss = function toCss(v) {
   return typeof v === "number" ? "".concat(v, "px") : v;
 };
@@ -201,7 +201,7 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className: cn(
       // overflow-clip (not hidden) keeps the rounded corners without
       // creating a scroll container, so a sticky toolbar can stick to the page.
-      stickyToolbar ? "overflow-clip" : "overflow-hidden", "rounded-md border bg-white dark:bg-gray-900", error ? "border-error-500" : "border-gray-300 dark:border-gray-600", disabled && "cursor-not-allowed opacity-50"),
+      stickyToolbar ? "overflow-clip" : "overflow-hidden", "rounded-md border bg-surface", error ? "border-error-500" : "border-line", disabled && "cursor-not-allowed opacity-50"),
       children: [showToolbar && jsx(RichTextToolbar, {
         editor: editor,
         state: state,

package/dist/esm/components/rich-text/RichTextToolbar.js

@@ -262,7 +262,7 @@ function LinkForm(_ref) {
           close();
         }
       },
-      className: cn("h-8 min-w-0 flex-1 rounded-md border bg-white px-2 text-sm text-gray-900 placeholder-gray-400", "focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500", invalid ? "border-error-500" : "border-gray-300 dark:border-gray-600")
+      className: cn("h-8 min-w-0 flex-1 rounded-md border bg-surface px-2 text-sm text-foreground placeholder-gray-400", "focus:outline-none focus:ring-2 focus:ring-primary-500 dark:placeholder-gray-500", invalid ? "border-error-500" : "border-line")
     }), jsx("button", {
       type: "button",
       onClick: apply,

package/dist/esm/components/utility/Pagination.js

@@ -9,7 +9,7 @@ import { ChevronLeft, ChevronRight } from 'lucide-react';
 var _excluded = ["currentPage", "totalPages", "onPageChange", "showFirstLast", "showPrevNext", "maxVisiblePages", "className"];
 // Shared button chrome: dark-safe surface, focus-visible ring, 44px target on coarse pointers.
 var BUTTON_BASE = cn('inline-flex items-center justify-center rounded-md border px-3 py-2 text-sm font-medium', 'transition-colors duration-fast motion-reduce:transition-none', 'outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900', TOUCH_TARGET);
-var BUTTON_IDLE = 'border-gray-300 bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800';
+var BUTTON_IDLE = 'border-line bg-surface text-foreground hover:bg-background dark:hover:bg-gray-800';
 var BUTTON_ACTIVE = 'border-primary-500 bg-primary-50 text-primary-600 dark:bg-primary-950 dark:text-primary-300';
 var DISABLED = 'disabled:opacity-50 disabled:cursor-not-allowed';
 var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {