@dreamtree-org/twreact-ui 2.0.5 → 2.0.7

package/dist/index.js

@@ -7539,7 +7539,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         className: "flex flex-wrap gap-1",
         children: selectedOptions.map(function (opt) {
           return jsxRuntime.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: [jsxRuntime.jsx("span", {
               className: "truncate max-w-[8rem]",
               children: opt.label
@@ -7568,7 +7568,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           className: "flex flex-wrap gap-1",
           children: selectedOptions.slice(0, maxTagCount).map(function (opt) {
             return jsxRuntime.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: jsxRuntime.jsx("span", {
                 className: "truncate max-w-[6rem]",
                 children: opt.label
@@ -7606,7 +7606,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 _objectSpread$17(_objectSpread$17({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
@@ -7633,16 +7633,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 && jsxRuntime.jsx("div", {
                   className: "mr-2",
                   children: selectedValues.includes(option.value) ? jsxRuntime.jsx(Check, {
                     className: "h-4 w-4 text-primary-600"
                   }) : jsxRuntime.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 && jsxRuntime.jsx(Check, {
                   className: "ml-auto h-4 w-4 text-primary-600"
@@ -7671,17 +7671,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$1[isSheet ? "sheet" : "popover"], {
+          className: cn("flex items-center hover:bg-line/50 cursor-pointer", ROW_CLASSES$1[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 && jsxRuntime.jsx("div", {
             className: "mr-2",
             children: selectedValues.includes(option.value) ? jsxRuntime.jsx(Check, {
               className: "h-4 w-4 text-primary-600"
             }) : jsxRuntime.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 && jsxRuntime.jsx(Check, {
             className: "ml-auto h-4 w-4 text-primary-600"
@@ -7693,7 +7693,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         children: jsxRuntime.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: [jsxRuntime.jsx(Plus, {
             className: "h-4 w-4",
             "aria-hidden": "true"
@@ -7721,7 +7721,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
               className: "h-4 w-4 text-primary-600",
               "aria-hidden": "true"
             }) : jsxRuntime.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"
             })
           });
         }()
@@ -7786,7 +7786,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$3[size] || SIZE_CLASSES$3.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$3[size] || SIZE_CLASSES$3.md, {
           "border-error-500 focus:ring-error-500": error,
           // Empty: the placeholder reads muted, like Input's
           // ::placeholder (#159). `className` still merges last.
@@ -7822,7 +7822,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: jsxRuntime.jsx(X, {
           className: "h-4 w-4",
           "aria-hidden": "true"
@@ -7845,7 +7845,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         value: selectedValues !== null && selectedValues !== void 0 ? selectedValues : ""
       })), isOpen && !isSheet && typeof document !== "undefined" && /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.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
@@ -7857,7 +7857,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           opacity: 0
         }),
         children: [searchable && jsxRuntime.jsx("div", {
-          className: "border-b border-gray-200 p-2",
+          className: "border-b border-line p-2",
           children: renderSearch()
         }), renderListbox()]
       }), document.body)]
@@ -11892,7 +11892,7 @@ var Table = /*#__PURE__*/React.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: [jsxRuntime.jsx(RefreshCcw, {
               className: "size-4",
@@ -17961,8 +17961,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
               }),
@@ -18184,7 +18184,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 = jsxRuntime.jsxs("div", {
     className: "flex gap-2",
     children: [showClear && jsxRuntime.jsx("button", {
@@ -18235,7 +18235,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.
@@ -18271,7 +18271,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: jsxRuntime.jsx(X, {
           className: "h-4 w-4",
           "aria-hidden": "true"
@@ -19418,7 +19418,7 @@ var Form = /*#__PURE__*/React.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,
@@ -19457,7 +19457,7 @@ var Form = /*#__PURE__*/React.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 && jsxRuntime.jsxs("label", {
                   htmlFor: fieldId,
                   className: "ml-2 text-sm",
@@ -19554,7 +19554,7 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(_ref2, ref) {
                 className: "mt-1 flex items-center",
                 children: [jsxRuntime.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: [jsxRuntime.jsx("svg", {
@@ -19924,7 +19924,7 @@ var Accordion = /*#__PURE__*/React.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;
@@ -19952,7 +19952,7 @@ var Accordion = /*#__PURE__*/React.forwardRef(function Accordion(_ref, ref) {
       var panelId = "".concat(uid, "accordion-panel-").concat(id);
       var leftIconEl = renderLeftIcon(item, index);
       return jsxRuntime.jsxs("div", {
-        className: "bg-white",
+        className: "bg-surface text-foreground",
         children: [jsxRuntime.jsx("h3", {
           children: jsxRuntime.jsx("button", {
             ref: function ref(el) {
@@ -20526,12 +20526,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function DateRangePicker(_re
         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 = jsxRuntime.jsx(Calendar, {
     month: currentMonth,
     onMonthChange: setCurrentMonth,
@@ -20586,7 +20586,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function DateRangePicker(_re
         "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.
@@ -24304,7 +24304,7 @@ var LocationPicker = /*#__PURE__*/React.forwardRef(function LocationPicker(_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)
       })), jsxRuntime.jsx("div", {
         className: cn("absolute inset-y-0 flex items-center", iconPosition === "right" ? "right-2" : "left-2"),
         children: iconButton
@@ -25017,7 +25017,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: _objectSpread$E(_objectSpread$E({}, floatingStyles), style)
     }, props), {}, {
       children: [title && jsxRuntime.jsx("h2", {
@@ -28195,7 +28195,7 @@ var DrawerTitleBar = function DrawerTitleBar(_ref2) {
     dragProps = _useGrabZone.dragProps,
     grabClass = _useGrabZone.grabClass;
   return jsxRuntime.jsx("div", _objectSpread$q(_objectSpread$q({}, 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
   }));
 };
@@ -28270,7 +28270,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 : jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -28278,7 +28278,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 && jsxRuntime.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
       })]
     })
@@ -28294,7 +28294,7 @@ var DrawerHeader = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
   return jsxRuntime.jsx("div", _objectSpread$q(_objectSpread$q(_objectSpread$q({
     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) {
@@ -28310,7 +28310,7 @@ var DrawerFooter = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     props = _objectWithoutProperties$1(_ref7, _excluded4$1);
   return jsxRuntime.jsx("div", _objectSpread$q({
     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";
@@ -28727,7 +28727,7 @@ var Tour = /*#__PURE__*/React.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 ? _objectSpread$o(_objectSpread$o({}, floatingStyles), style) : style
     }, swipeHandlers), rest), {}, {
       children: [jsxRuntime.jsxs("div", {
@@ -29015,7 +29015,7 @@ function ownKeys$k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 function _objectSpread$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // 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) {

package/dist/rich-text/index.js

@@ -291,7 +291,7 @@ function LinkForm(_ref) {
           close();
         }
       },
-      className: cn.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.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")
     }), jsxRuntime.jsx("button", {
       type: "button",
       onClick: apply,
@@ -446,7 +446,7 @@ function RichTextToolbar(_ref2) {
 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.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.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;
 };
@@ -635,7 +635,7 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: cn.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 && jsxRuntime.jsx(RichTextToolbar, {
         editor: editor,
         state: state,