@dreamtree-org/twreact-ui 2.0.3 → 2.0.5

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/DatePicker.js

@@ -210,10 +210,13 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         "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", {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !selected,
+          // Empty: the placeholder reads muted, like Input's
+          // ::placeholder (#159). `className` still merges last.
+          "text-muted": !selected,
           // leave room for the sibling clear button overlaid on the field
           "pr-16": showClear && selected
         }, className),
+        "data-empty": selected ? undefined : "",
         onClick: function onClick() {
           return setIsOpen(function (open) {
             return !open;

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

@@ -279,7 +279,8 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
     }));
   };
   // Display placeholder until both start and end are committed (mandatory range).
-  var triggerText = committed.start && committed.end ? formatRange(committed.start, committed.end) : placeholder;
+  var isEmpty = !committed.start || !committed.end;
+  var triggerText = isEmpty ? placeholder : formatRange(committed.start, committed.end);
   var draftText = localStart && localEnd ? formatRange(localStart, localEnd) : placeholder;
   var presetList = Array.isArray(presets) && presets.length > 0 ? presets : null;
   var presetChips = presetList ? jsx("div", {
@@ -359,9 +360,12 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
         "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", {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !committed.start || !committed.end,
+          // Empty: the placeholder reads muted, like Input's
+          // ::placeholder (#159). `className` still merges last.
+          "text-muted": isEmpty,
           "pr-16": showClearButton
         }, className),
+        "data-empty": isEmpty ? "" : undefined,
         onClick: function onClick() {
           // The trigger always toggles, even mid-pick (DTUI-35): closing
           // drops the uncommitted start, reopening starts from the last

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

@@ -495,7 +495,8 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       return document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  var showClearButton = allowClear && !disabled && selectedOptions.length > 0;
+  var isEmpty = selectedOptions.length === 0;
+  var showClearButton = allowClear && !disabled && !isEmpty;
   var displayValue = function displayValue() {
     var _selectedOptions$;
     if (multiSelect) {
@@ -753,9 +754,12 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         "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, {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !selectedOptions.length,
+          // Empty: the placeholder reads muted, like Input's
+          // ::placeholder (#159). `className` still merges last.
+          "text-muted": isEmpty,
           "pr-14": showClearButton
         }, className),
+        "data-empty": isEmpty ? "" : undefined,
         onClick: function onClick() {
           if (!disabled) {
             setIsOpen(function (prev) {

package/dist/esm/components/navigation/Navbar.js

@@ -12,7 +12,8 @@ import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 import PropTypes from '../../_vendor/prop-types/index.js';
 
 var _excluded = ["emitter", "content", "notifications"],
-  _excluded2 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen", "sticky", "largeTitle"];
+  _excluded2 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "leftIconLabel", "leftIconProps", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen", "sticky", "largeTitle"],
+  _excluded3 = ["className", "onClick"];
 var NO_NOTIFICATIONS = [];
 // Icon-only bar buttons: 36px on desktop, the 44px touch target on coarse pointers.
 var ICON_BUTTON = cn("inline-flex items-center justify-center rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET);
@@ -241,6 +242,9 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     leftIcon = _ref3$leftIcon === void 0 ? jsx(ChevronLeft, {}) : _ref3$leftIcon,
     RightMenuContentProp = _ref3.rightMenuContent,
     onLeftIconClick = _ref3.onLeftIconClick,
+    _ref3$leftIconLabel = _ref3.leftIconLabel,
+    leftIconLabel = _ref3$leftIconLabel === void 0 ? "Go back" : _ref3$leftIconLabel,
+    leftIconProps = _ref3.leftIconProps,
     _ref3$onLoginClick = _ref3.onLoginClick,
     onLoginClick = _ref3$onLoginClick === void 0 ? function () {
       return console.log("invoked onLoginClick");
@@ -287,6 +291,18 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
       window.removeEventListener("resize", handleResize);
     };
   }, [handleResize]);
+  // Left button: `leftIconLabel` names it ("Go back" by default; e.g. "Open
+  // menu" when it opens a Sidebar drawer). `leftIconProps` lands on the
+  // <button> (aria-expanded, aria-controls, data-*, …); its className merges
+  // last and its onClick runs after `onLeftIconClick`.
+  var _ref4 = leftIconProps || {},
+    leftIconClassName = _ref4.className,
+    leftIconOnClick = _ref4.onClick,
+    leftIconRest = _objectWithoutProperties(_ref4, _excluded3);
+  var handleLeftIconClick = function handleLeftIconClick(e) {
+    onLeftIconClick === null || onLeftIconClick === void 0 || onLeftIconClick(e);
+    leftIconOnClick === null || leftIconOnClick === void 0 || leftIconOnClick(e);
+  };
   // Handle search submit
   var handleSearch = function handleSearch(e) {
     e.preventDefault();
@@ -356,13 +372,14 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
           "aria-hidden": true
         }), jsxs("div", {
           className: "flex min-w-0 items-center",
-          children: [leftIcon !== false && jsx("button", {
-            onClick: onLeftIconClick,
+          children: [leftIcon !== false && jsx("button", _objectSpread2(_objectSpread2({
             type: "button",
-            className: cn(ICON_BUTTON, "shrink-0 md:hidden"),
-            "aria-label": "Go back",
+            "aria-label": leftIconLabel
+          }, leftIconRest), {}, {
+            onClick: handleLeftIconClick,
+            className: cn(ICON_BUTTON, "shrink-0 md:hidden", leftIconClassName),
             children: leftIcon
-          }), logo && jsx("div", {
+          })), logo && jsx("div", {
             className: "ml-2 min-w-0 truncate sm:ml-4 md:ml-0",
             children: logo
           })]

package/dist/esm/components/navigation/Sidebar.js

@@ -11,7 +11,7 @@ import { useScrollLock } from '../../hooks/useScrollLock.js';
 import { useMediaQuery } from '../../hooks/useMediaQuery.js';
 import { useSheetDrag, FLICK_VELOCITY } from '../../hooks/useSheetDrag.js';
 
-var _excluded = ["items", "collapsed", "onToggle", "className", "containerClassName", "stickyOffset", "logo", "footer", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions", "linkAs", "expandedIds", "defaultExpandedIds", "onExpandedChange", "swipeable"];
+var _excluded = ["items", "collapsed", "collapsible", "onToggle", "className", "containerClassName", "stickyOffset", "logo", "footer", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions", "linkAs", "expandedIds", "defaultExpandedIds", "onExpandedChange", "swipeable"];
 // From `md` up the sidebar is an in-flow sticky column; below it, the same
 // tree becomes an off-canvas drawer (modal dialog while open).
 var SIDEBAR_DESKTOP_QUERY = "(min-width: 768px)";
@@ -178,6 +178,8 @@ var hasBadge = function hasBadge(item) {
  * - linkAs: element type used for items with `href` (default "a"; pass Next.js Link etc.)
  * - collapsed: boolean (desktop collapsed)
  * - onToggle: function to toggle collapse
+ * - collapsible: boolean (default true) — false hides the md+ collapse/expand
+ *   toggle (the drawer keeps its "Close navigation" button)
  * - expandedIds / defaultExpandedIds / onExpandedChange: open groups (ids)
  * - className, containerClassName, stickyOffset, logo, footer, user, onUserClick
  * - drawerPosition: 'left' | 'right'
@@ -194,6 +196,8 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     items = _ref2$items === void 0 ? [] : _ref2$items,
     _ref2$collapsed = _ref2.collapsed,
     collapsed = _ref2$collapsed === void 0 ? false : _ref2$collapsed,
+    _ref2$collapsible = _ref2.collapsible,
+    collapsible = _ref2$collapsible === void 0 ? true : _ref2$collapsible,
     onToggle = _ref2.onToggle,
     className = _ref2.className,
     containerClassName = _ref2.containerClassName,
@@ -525,6 +529,9 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     if (drawerMode && mobileOpen && setIsMobileOpen) setIsMobileOpen(false);else onToggle === null || onToggle === void 0 || onToggle();
   };
   var toggleLabel = drawerMode ? "Close navigation" : effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar";
+  // `collapsible={false}`: no collapse/expand toggle on md+. The drawer keeps
+  // its close button (44px touch target, the drawer's only visible close).
+  var showToggle = drawerMode || collapsible;
   var CloseChevron = isRight ? ChevronRight : ChevronLeft;
   var toggleIcon = drawerMode ? jsx(CloseChevron, {
     className: "h-5 w-5",
@@ -591,7 +598,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         children: [!effectiveCollapsed && logo && jsx("div", {
           className: "flex min-w-0 items-center",
           children: logo
-        }), jsx("button", {
+        }), showToggle && jsx("button", {
           type: "button",
           onClick: handleToggleClick,
           className: cn("inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md", "hover:bg-gray-100 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"),