@dreamtree-org/twreact-ui 2.0.4 → 2.0.6

package/dist/components/charts/ChartFrame.d.ts

@@ -8,6 +8,7 @@ export function ChartTooltipContent({ active, payload, label, valueFormatter, hi
     valueFormatter: any;
     hideLabel?: boolean | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;
+export function swatch(size: any): string;
 /**
  * The accessible shell every chart renders: the SVG lives in a `role="img"`
  * region named by `title` and described by `description`; the numbers are

package/dist/components/charts/ChartFrame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartFrame.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ChartFrame.jsx"],"names":[],"mappings":"AAcA;;4CAWC;AAED;;;;;;mDAgBC;AA8BD;;;;GAIG;AACH,mFA6DG;kBA3I0B,OAAO"}
+{"version":3,"file":"ChartFrame.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ChartFrame.jsx"],"names":[],"mappings":"AAcA;;4CAWC;AAED;;;;;;mDAgBC;AAtCM,0CAAwG;AAoE/G;;;;GAIG;AACH,mFA6DG;kBA3I0B,OAAO"}

package/dist/components/charts/ScatterChart.d.ts

@@ -0,0 +1,4 @@
+export default ScatterChart;
+declare const ScatterChart: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=ScatterChart.d.ts.map

package/dist/components/charts/ScatterChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterChart.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ScatterChart.jsx"],"names":[],"mappings":";AASA,sFAyHG;kBAlIe,OAAO"}

package/dist/components/charts/ScatterTooltip.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Tooltip for one ScatterChart point: the entity (`index`) or series name as the
+ * heading, then the series (when both are set) and the formatted x and y values.
+ */
+export default function ScatterTooltipContent({ active, payload, index, category, colorFor, x, y }: {
+    active: any;
+    payload: any;
+    index: any;
+    category: any;
+    colorFor?: {} | undefined;
+    x: any;
+    y: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ScatterTooltip.d.ts.map

package/dist/components/charts/ScatterTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ScatterTooltip.jsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH;;;;;;;;mDA4BC"}

package/dist/components/charts/scatterData.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Axis domain. recharts draws a zero-width scale for a single distinct value, so
+ * pad around it; otherwise let recharts pick nice bounds.
+ */
+export function scatterDomain(values: any): string[] | number[];
+/** Rows with a numeric x and y, split into series by the `category` key (first-seen order). */
+export function groupScatter(data: any, { x, y, category }: {
+    x: any;
+    y: any;
+    category: any;
+}): {
+    rows: any[];
+    names: any[];
+    groups: Map<any, any>;
+};
+export function textOf(v: any): string;
+//# sourceMappingURL=scatterData.d.ts.map

package/dist/components/charts/scatterData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatterData.d.ts","sourceRoot":"","sources":["../../../src/components/charts/scatterData.js"],"names":[],"mappings":"AAKA;;;GAGG;AACH,gEAOC;AAED,+FAA+F;AAC/F;;;;;;;;EASC;AAzBM,uCAAkD"}

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/components/navigation/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":"AAqBA,oCAAqC,oBAAoB,CAAC;;AAoJ1D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iFAglBG;kBA1wBI,OAAO"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":"AAoBA,oCAAqC,oBAAoB,CAAC;;AAoJ1D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iFAglBG;kBAzwBI,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Sortable.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Sortable.jsx"],"names":[],"mappings":";AAqBA,kFAsHG;kBA3I0G,OAAO"}
+{"version":3,"file":"Sortable.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Sortable.jsx"],"names":[],"mappings":";AASA,kFAmIG;kBA5I0G,OAAO"}

package/dist/components/utility/SortableGroup.d.ts

@@ -0,0 +1,15 @@
+/** Where an item from another list would land; styled by whether `canDrop` allows it. */
+export function SortablePlaceholder({ as: Tag, allowed }: {
+    as: any;
+    allowed: any;
+}): import("react/jsx-runtime").JSX.Element;
+export default SortableGroup;
+/**
+ * Connects several `<Sortable id="…">` lists so items can move between them
+ * (pointer drag, or the cross-axis arrow keys while an item is picked up).
+ * `canDrop(item, target, from)` is asked before a target is shown as droppable;
+ * a refused target is marked as such and dropping there does nothing.
+ */
+declare const SortableGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=SortableGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableGroup.d.ts","sourceRoot":"","sources":["../../../src/components/utility/SortableGroup.jsx"],"names":[],"mappings":"AAuBA,yFAAyF;AACzF;;;4CAaC;;AAjCD;;;;;GAKG;AACH,uFASG;kBAnB+B,OAAO"}

package/dist/esm/charts/index.js

@@ -3,3 +3,4 @@ export { default as BarChart } from '../components/charts/BarChart.js';
 export { default as AreaChart } from '../components/charts/AreaChart.js';
 export { default as DonutChart } from '../components/charts/DonutChart.js';
 export { default as Sparkline } from '../components/charts/Sparkline.js';
+export { default as ScatterChart } from '../components/charts/ScatterChart.js';

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",
@@ -90,11 +90,11 @@ function ChartDataTable(_ref3) {
       children: caption
     }), jsx("thead", {
       children: jsx("tr", {
-        children: columns.map(function (c) {
+        children: columns.map(function (c, i) {
           return jsx("th", {
             scope: "col",
             children: c.label
-          }, c.key);
+          }, "".concat(c.key, "-").concat(i));
         })
       })
     }), jsx("tbody", {
@@ -104,9 +104,9 @@ function ChartDataTable(_ref3) {
             return i === 0 ? jsx("th", {
               scope: "row",
               children: c.format(row[c.key])
-            }, c.key) : jsx("td", {
+            }, "".concat(c.key, "-").concat(i)) : jsx("td", {
               children: c.format(row[c.key])
-            }, c.key);
+            }, "".concat(c.key, "-").concat(i));
           })
         }, r);
       })
@@ -174,4 +174,4 @@ var ChartFrame = /*#__PURE__*/React.forwardRef(function ChartFrame(_ref4, ref) {
   }));
 });
 
-export { ChartFrame, ChartLegend, ChartTooltipContent };
+export { ChartFrame, ChartLegend, ChartTooltipContent, swatch };

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

@@ -0,0 +1,204 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { ResponsiveContainer, ScatterChart as ScatterChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Scatter } from 'recharts';
+import { ChartFrame } from './ChartFrame.js';
+import ScatterTooltipContent from './ScatterTooltip.js';
+import { useChartTheme, useChartId, defaultValueFormatter } from './chartTheme.js';
+import { useElementWidth, tickGapFor, yAxisWidthFor } from './useChartLayout.js';
+import { groupScatter, scatterDomain, textOf } from './scatterData.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+
+var _excluded = ["data", "x", "y", "index", "category", "colors", "valueFormatter", "xAxisFormatter", "xAxisLabel", "yAxisLabel", "height", "aspectRatio", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
+var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(_ref, ref) {
+  var data = _ref.data,
+    x = _ref.x,
+    y = _ref.y,
+    index = _ref.index,
+    category = _ref.category,
+    colors = _ref.colors,
+    _ref$valueFormatter = _ref.valueFormatter,
+    valueFormatter = _ref$valueFormatter === void 0 ? defaultValueFormatter : _ref$valueFormatter,
+    _ref$xAxisFormatter = _ref.xAxisFormatter,
+    xAxisFormatter = _ref$xAxisFormatter === void 0 ? defaultValueFormatter : _ref$xAxisFormatter,
+    xAxisLabel = _ref.xAxisLabel,
+    yAxisLabel = _ref.yAxisLabel,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 300 : _ref$height,
+    aspectRatio = _ref.aspectRatio,
+    _ref$showLegend = _ref.showLegend,
+    showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
+    _ref$showTooltip = _ref.showTooltip,
+    showTooltip = _ref$showTooltip === void 0 ? true : _ref$showTooltip,
+    _ref$showXAxis = _ref.showXAxis,
+    showXAxis = _ref$showXAxis === void 0 ? true : _ref$showXAxis,
+    _ref$showYAxis = _ref.showYAxis,
+    showYAxis = _ref$showYAxis === void 0 ? true : _ref$showYAxis,
+    _ref$showGrid = _ref.showGrid,
+    showGrid = _ref$showGrid === void 0 ? true : _ref$showGrid,
+    yAxisWidth = _ref.yAxisWidth,
+    _ref$animate = _ref.animate,
+    animate = _ref$animate === void 0 ? true : _ref$animate,
+    title = _ref.title,
+    description = _ref.description,
+    emptyState = _ref.emptyState,
+    _ref$accessibleTable = _ref.accessibleTable,
+    accessibleTable = _ref$accessibleTable === void 0 ? true : _ref$accessibleTable,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _groupScatter = groupScatter(data, {
+      x: x,
+      y: y,
+      category: category
+    }),
+    rows = _groupScatter.rows,
+    names = _groupScatter.names,
+    groups = _groupScatter.groups;
+  var _useChartTheme = useChartTheme(names, colors),
+    chrome = _useChartTheme.chrome,
+    series = _useChartTheme.series;
+  var reducedMotion = useReducedMotion();
+  var chartId = useChartId();
+  var _useElementWidth = useElementWidth(),
+    _useElementWidth2 = _slicedToArray(_useElementWidth, 2),
+    measureRef = _useElementWidth2[0],
+    width = _useElementWidth2[1];
+  var tick = {
+    fill: chrome.axis,
+    fontSize: 12
+  };
+  var axisTitle = function axisTitle(value, angle) {
+    return value ? {
+      value: value,
+      angle: angle,
+      position: angle ? "insideLeft" : "insideBottom",
+      offset: angle ? 10 : -4,
+      fill: chrome.axis,
+      fontSize: 12
+    } : undefined;
+  };
+  var xLabel = xAxisLabel || x;
+  var yLabel = yAxisLabel || y;
+  return jsx(ChartFrame, _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: className,
+    title: title,
+    description: description,
+    defaultTitle: "Scatter chart",
+    data: rows,
+    height: height,
+    aspectRatio: aspectRatio,
+    emptyState: emptyState,
+    accessibleTable: accessibleTable,
+    legend: showLegend && category ? names.map(function (name, i) {
+      return {
+        name: name,
+        color: series[i]
+      };
+    }) : null,
+    tableColumns: [].concat(_toConsumableArray(index ? [{
+      key: index,
+      label: index,
+      format: textOf
+    }] : []), _toConsumableArray(category && category !== index ? [{
+      key: category,
+      label: category,
+      format: textOf
+    }] : []), [{
+      key: x,
+      label: xLabel,
+      format: xAxisFormatter
+    }, {
+      key: y,
+      label: yLabel,
+      format: valueFormatter
+    }])
+  }, rest), {}, {
+    children: jsx("div", {
+      className: "h-full w-full",
+      ref: measureRef,
+      children: jsx(ResponsiveContainer, {
+        width: "100%",
+        height: "100%",
+        minWidth: 0,
+        children: jsxs(ScatterChart$1, {
+          id: chartId,
+          margin: {
+            top: 8,
+            right: 8,
+            bottom: xAxisLabel ? 16 : 0,
+            left: 0
+          },
+          accessibilityLayer: false,
+          children: [showGrid && jsx(CartesianGrid, {
+            stroke: chrome.grid,
+            strokeDasharray: "3 3"
+          }), jsx(XAxis, {
+            type: "number",
+            dataKey: x,
+            name: xLabel,
+            domain: scatterDomain(rows.map(function (row) {
+              return row[x];
+            })),
+            tick: tick,
+            tickLine: false,
+            axisLine: false,
+            tickFormatter: xAxisFormatter,
+            minTickGap: tickGapFor(width),
+            hide: !showXAxis,
+            label: axisTitle(xAxisLabel, 0)
+          }), jsx(YAxis, {
+            type: "number",
+            dataKey: y,
+            name: yLabel,
+            domain: scatterDomain(rows.map(function (row) {
+              return row[y];
+            })),
+            tick: tick,
+            tickLine: false,
+            axisLine: false,
+            tickFormatter: valueFormatter,
+            width: yAxisWidth !== null && yAxisWidth !== void 0 ? yAxisWidth : yAxisWidthFor(width),
+            hide: !showYAxis,
+            label: axisTitle(yAxisLabel, -90)
+          }), showTooltip && jsx(Tooltip, {
+            cursor: {
+              stroke: chrome.grid,
+              strokeDasharray: "3 3"
+            },
+            isAnimationActive: false,
+            content: jsx(ScatterTooltipContent, {
+              index: index,
+              category: category,
+              colorFor: Object.fromEntries(names.map(function (name, i) {
+                return [name, series[i]];
+              })),
+              x: {
+                key: x,
+                label: xLabel,
+                format: xAxisFormatter
+              },
+              y: {
+                key: y,
+                label: yLabel,
+                format: valueFormatter
+              }
+            })
+          }), names.map(function (name, i) {
+            return jsx(Scatter, {
+              id: "".concat(chartId, "-").concat(i),
+              name: name,
+              data: groups.get(name),
+              fill: series[i],
+              isAnimationActive: animate && !reducedMotion
+            }, name);
+          })]
+        })
+      })
+    })
+  }));
+});
+ScatterChart.displayName = "ScatterChart";
+
+export { ScatterChart as default };

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

@@ -0,0 +1,61 @@
+'use client';
+import { toConsumableArray as _toConsumableArray, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { swatch } from './ChartFrame.js';
+import { textOf } from './scatterData.js';
+
+/**
+ * Tooltip for one ScatterChart point: the entity (`index`) or series name as the
+ * heading, then the series (when both are set) and the formatted x and y values.
+ */
+function ScatterTooltipContent(_ref) {
+  var active = _ref.active,
+    payload = _ref.payload,
+    index = _ref.index,
+    category = _ref.category,
+    _ref$colorFor = _ref.colorFor,
+    colorFor = _ref$colorFor === void 0 ? {} : _ref$colorFor,
+    x = _ref.x,
+    y = _ref.y;
+  var row = active && payload && payload.length ? payload[0].payload : null;
+  if (!row) return null;
+  var seriesName = category ? textOf(row[category]) : null;
+  var heading = index ? textOf(row[index]) : seriesName;
+  var lines = [].concat(_toConsumableArray(index && seriesName ? [[category, seriesName]] : []), [[x.label, x.format(row[x.key])], [y.label, y.format(row[y.key])]]);
+  return jsxs("div", {
+    className: "rounded-md border border-line bg-surface px-3 py-2 text-xs text-foreground shadow-md",
+    "data-chart-tooltip": "",
+    children: [heading && jsxs("p", {
+      className: "mb-1 flex items-center gap-2 font-medium",
+      children: [seriesName && jsx("span", {
+        className: swatch("h-2 w-2"),
+        style: {
+          "--dt-chart-color": colorFor[seriesName]
+        },
+        "aria-hidden": "true"
+      }), jsx("span", {
+        children: heading
+      })]
+    }), jsx("ul", {
+      className: "space-y-0.5",
+      children: lines.map(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          name = _ref3[0],
+          value = _ref3[1];
+        return jsxs("li", {
+          className: "flex items-center gap-2",
+          children: [jsx("span", {
+            className: "text-muted",
+            children: name
+          }), jsx("span", {
+            className: "ml-auto pl-3 font-medium tabular-nums",
+            children: value
+          })]
+        }, name);
+      })
+    })]
+  });
+}
+
+export { ScatterTooltipContent as default };

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

@@ -0,0 +1,43 @@
+import { toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+
+// Internal to the charts entry point: data shaping for ScatterChart.
+var isFiniteNumber = function isFiniteNumber(v) {
+  return typeof v === "number" && Number.isFinite(v);
+};
+var textOf = function textOf(v) {
+  return v == null ? "" : String(v);
+};
+/**
+ * Axis domain. recharts draws a zero-width scale for a single distinct value, so
+ * pad around it; otherwise let recharts pick nice bounds.
+ */
+function scatterDomain(values) {
+  if (!values.length) return ["auto", "auto"];
+  var min = Math.min.apply(Math, _toConsumableArray(values));
+  var max = Math.max.apply(Math, _toConsumableArray(values));
+  if (min !== max) return ["auto", "auto"];
+  var pad = Math.abs(min) / 2 || 1;
+  return [min - pad, max + pad];
+}
+/** Rows with a numeric x and y, split into series by the `category` key (first-seen order). */
+function groupScatter(data, _ref) {
+  var x = _ref.x,
+    y = _ref.y,
+    category = _ref.category;
+  var rows = (Array.isArray(data) ? data : []).filter(function (row) {
+    return isFiniteNumber(row === null || row === void 0 ? void 0 : row[x]) && isFiniteNumber(row === null || row === void 0 ? void 0 : row[y]);
+  });
+  var groups = new Map();
+  rows.forEach(function (row) {
+    var name = category ? textOf(row[category]) : y;
+    if (!groups.has(name)) groups.set(name, []);
+    groups.get(name).push(row);
+  });
+  return {
+    rows: rows,
+    names: _toConsumableArray(groups.keys()),
+    groups: groups
+  };
+}
+
+export { groupScatter, scatterDomain, textOf };

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", {