@dreamtree-org/twreact-ui 1.3.10 → 1.3.11

package/dist/esm/components/blocks/StatCard.js

@@ -11,12 +11,12 @@ var _excluded = ["label", "value", "icon", "tone", "change", "loading", "classNa
 // Extracted from PracticePro/components/ui/StatCard.tsx (28 imports), with tones mapped to the
 // semantic scales instead of product colours. Class names are written out in full so Tailwind keeps them.
 var TONES = {
-  primary: 'bg-primary-50 text-primary-600',
-  secondary: 'bg-secondary-100 text-secondary-600',
-  success: 'bg-success-50 text-success-600',
-  warning: 'bg-warning-50 text-warning-600',
-  error: 'bg-error-50 text-error-600',
-  info: 'bg-info-50 text-info-600'
+  primary: 'bg-primary-50 text-primary-600 dark:bg-primary-900/40 dark:text-primary-300',
+  secondary: 'bg-secondary-100 text-secondary-600 dark:bg-secondary-800/60 dark:text-secondary-300',
+  success: 'bg-success-50 text-success-600 dark:bg-success-900/40 dark:text-success-300',
+  warning: 'bg-warning-50 text-warning-600 dark:bg-warning-900/40 dark:text-warning-300',
+  error: 'bg-error-50 text-error-600 dark:bg-error-900/40 dark:text-error-300',
+  info: 'bg-info-50 text-info-600 dark:bg-info-900/40 dark:text-info-300'
 };
 var StatCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _change$goodWhenUp, _change$unit;

package/dist/esm/components/blocks/StatusPill.js

@@ -1,6 +1,6 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { cn } from '../../utils/cn.js';
 import Badge from '../utility/Badge.js';
@@ -37,17 +37,14 @@ var StatusPill = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var resolvedTone = (entry === null || entry === void 0 ? void 0 : entry.tone) || tone || 'neutral';
   var label = (_ref2 = children !== null && children !== void 0 ? children : entry === null || entry === void 0 ? void 0 : entry.label) !== null && _ref2 !== void 0 ? _ref2 : status != null ? humanizeStatus(status) : null;
   var resolvedIcon = icon !== null && icon !== void 0 ? icon : entry === null || entry === void 0 ? void 0 : entry.icon;
-  return jsxs(Badge, _objectSpread2(_objectSpread2({
+  return jsx(Badge, _objectSpread2(_objectSpread2({
     ref: ref,
     variant: TONE_TO_VARIANT[resolvedTone] || 'secondary',
     size: "sm",
-    className: cn('gap-1.5 whitespace-nowrap', className)
+    className: cn('gap-1.5 whitespace-nowrap', className),
+    icon: resolvedIcon
   }, props), {}, {
-    children: [resolvedIcon && jsx("span", {
-      className: "inline-flex h-3.5 w-3.5 items-center",
-      "aria-hidden": "true",
-      children: resolvedIcon
-    }), label]
+    children: label
   }));
 });
 StatusPill.displayName = 'StatusPill';

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

@@ -1,13 +1,15 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+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, AreaChart, BarChart, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar, Area, Line } from 'recharts';
 import { ChartFrame, ChartTooltipContent } from './ChartFrame.js';
 import { useChartTheme, useChartId, defaultValueFormatter } from './chartTheme.js';
+import { useElementWidth, usePinnedTooltip, yAxisWidthFor, tickGapFor } from './useChartLayout.js';
 import { useReducedMotion } from '../../hooks/useReducedMotion.js';
 
-var _excluded = ["kind", "data", "index", "categories", "colors", "valueFormatter", "xAxisFormatter", "height", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "curveType", "stacked", "horizontal", "showDots", "connectNulls", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
+var _excluded = ["kind", "data", "index", "categories", "colors", "valueFormatter", "xAxisFormatter", "height", "aspectRatio", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "curveType", "stacked", "horizontal", "showDots", "connectNulls", "animate", "title", "description", "emptyState", "accessibleTable", "className"],
+  _excluded2 = ["ref"];
 var ROOTS = {
   line: LineChart,
   bar: BarChart,
@@ -101,6 +103,7 @@ var CartesianChart = /*#__PURE__*/React.forwardRef(function CartesianChart(_ref2
     xAxisFormatter = _ref2.xAxisFormatter,
     _ref2$height = _ref2.height,
     height = _ref2$height === void 0 ? 300 : _ref2$height,
+    aspectRatio = _ref2.aspectRatio,
     _ref2$showLegend = _ref2.showLegend,
     showLegend = _ref2$showLegend === void 0 ? true : _ref2$showLegend,
     _ref2$showTooltip = _ref2.showTooltip,
@@ -111,8 +114,7 @@ var CartesianChart = /*#__PURE__*/React.forwardRef(function CartesianChart(_ref2
     showYAxis = _ref2$showYAxis === void 0 ? true : _ref2$showYAxis,
     _ref2$showGrid = _ref2.showGrid,
     showGrid = _ref2$showGrid === void 0 ? true : _ref2$showGrid,
-    _ref2$yAxisWidth = _ref2.yAxisWidth,
-    yAxisWidth = _ref2$yAxisWidth === void 0 ? 48 : _ref2$yAxisWidth,
+    yAxisWidth = _ref2.yAxisWidth,
     _ref2$curveType = _ref2.curveType,
     curveType = _ref2$curveType === void 0 ? "monotone" : _ref2$curveType,
     _ref2$stacked = _ref2.stacked,
@@ -147,6 +149,20 @@ var CartesianChart = /*#__PURE__*/React.forwardRef(function CartesianChart(_ref2
   var formatIndex = xAxisFormatter || function (v) {
     return v == null ? "" : String(v);
   };
+  var _useElementWidth = useElementWidth(),
+    _useElementWidth2 = _slicedToArray(_useElementWidth, 2),
+    measureRef = _useElementWidth2[0],
+    width = _useElementWidth2[1];
+  var pin = usePinnedTooltip(showTooltip);
+  var _pin$wrapperProps = pin.wrapperProps,
+    pinRef = _pin$wrapperProps.ref,
+    pinWrapperProps = _objectWithoutProperties(_pin$wrapperProps, _excluded2);
+  // An explicit yAxisWidth always wins; otherwise narrow charts give the plot more room.
+  var valueAxisWidth = yAxisWidth !== null && yAxisWidth !== void 0 ? yAxisWidth : yAxisWidthFor(width);
+  var setWrapperNode = React.useCallback(function (node) {
+    measureRef.current = node;
+    pinRef.current = node;
+  }, [measureRef, pinRef]);
   var categoryAxis = {
     dataKey: index,
     tick: tick,
@@ -154,7 +170,7 @@ var CartesianChart = /*#__PURE__*/React.forwardRef(function CartesianChart(_ref2
     axisLine: false,
     tickFormatter: xAxisFormatter,
     hide: !showXAxis,
-    minTickGap: 8
+    minTickGap: tickGapFor(width)
   };
   var valueAxis = {
     tick: tick,
@@ -162,7 +178,7 @@ var CartesianChart = /*#__PURE__*/React.forwardRef(function CartesianChart(_ref2
     axisLine: false,
     tickFormatter: valueFormatter,
     hide: !showYAxis,
-    width: yAxisWidth
+    width: valueAxisWidth
   };
   return jsx(ChartFrame, _objectSpread2(_objectSpread2({
     ref: ref,
@@ -172,6 +188,7 @@ var CartesianChart = /*#__PURE__*/React.forwardRef(function CartesianChart(_ref2
     defaultTitle: TITLES[kind],
     data: data,
     height: height,
+    aspectRatio: aspectRatio,
     emptyState: emptyState,
     accessibleTable: accessibleTable,
     legend: showLegend ? categories.map(function (c, i) {
@@ -192,64 +209,70 @@ var CartesianChart = /*#__PURE__*/React.forwardRef(function CartesianChart(_ref2
       };
     })))
   }, rest), {}, {
-    children: jsx(ResponsiveContainer, {
-      width: "100%",
-      height: "100%",
-      minWidth: 0,
-      children: jsxs(Root, {
-        id: chartId,
-        data: data,
-        layout: isHorizontalBars ? "vertical" : "horizontal",
-        margin: {
-          top: 8,
-          right: 8,
-          bottom: 0,
-          left: 0
-        },
-        accessibilityLayer: false,
-        children: [showGrid && jsx(CartesianGrid, {
-          stroke: chrome.grid,
-          strokeDasharray: "3 3",
-          vertical: isHorizontalBars,
-          horizontal: !isHorizontalBars
-        }), isHorizontalBars ? jsx(XAxis, _objectSpread2(_objectSpread2({
-          type: "number"
-        }, valueAxis), {}, {
-          hide: !showXAxis,
-          width: undefined
-        })) : jsx(XAxis, _objectSpread2({}, categoryAxis)), isHorizontalBars ? jsx(YAxis, _objectSpread2(_objectSpread2({
-          type: "category"
-        }, categoryAxis), {}, {
-          hide: !showYAxis,
-          width: yAxisWidth,
-          interval: 0
-        })) : jsx(YAxis, _objectSpread2({}, valueAxis)), showTooltip && jsx(Tooltip, {
-          cursor: kind === "bar" ? {
-            fill: chrome.grid,
-            fillOpacity: 0.4
-          } : {
-            stroke: chrome.grid
+    children: jsx("div", _objectSpread2(_objectSpread2({
+      className: "h-full w-full",
+      ref: setWrapperNode
+    }, pinWrapperProps), {}, {
+      children: jsx(ResponsiveContainer, {
+        width: "100%",
+        height: "100%",
+        minWidth: 0,
+        children: jsxs(Root, {
+          id: chartId,
+          onClick: pin.onChartClick,
+          data: data,
+          layout: isHorizontalBars ? "vertical" : "horizontal",
+          margin: {
+            top: 8,
+            right: 8,
+            bottom: 0,
+            left: 0
           },
-          isAnimationActive: false,
-          content: jsx(ChartTooltipContent, {
-            valueFormatter: valueFormatter
-          })
-        }), categories.map(function (category, i) {
-          return renderSeries(kind, {
-            id: "".concat(chartId, "-").concat(i),
-            category: category,
-            color: series[i],
-            curve: curve,
-            stacked: stacked,
-            showDots: showDots,
-            connectNulls: connectNulls,
-            animate: animate && !reducedMotion,
-            horizontal: isHorizontalBars,
-            barRadius: 4
-          });
-        })]
+          accessibilityLayer: false,
+          children: [showGrid && jsx(CartesianGrid, {
+            stroke: chrome.grid,
+            strokeDasharray: "3 3",
+            vertical: isHorizontalBars,
+            horizontal: !isHorizontalBars
+          }), isHorizontalBars ? jsx(XAxis, _objectSpread2(_objectSpread2({
+            type: "number"
+          }, valueAxis), {}, {
+            hide: !showXAxis,
+            width: undefined
+          })) : jsx(XAxis, _objectSpread2({}, categoryAxis)), isHorizontalBars ? jsx(YAxis, _objectSpread2(_objectSpread2({
+            type: "category"
+          }, categoryAxis), {}, {
+            hide: !showYAxis,
+            width: valueAxisWidth,
+            interval: 0
+          })) : jsx(YAxis, _objectSpread2({}, valueAxis)), showTooltip && jsx(Tooltip, _objectSpread2({
+            cursor: kind === "bar" ? {
+              fill: chrome.grid,
+              fillOpacity: 0.4
+            } : {
+              stroke: chrome.grid
+            },
+            isAnimationActive: false,
+            content: jsx(ChartTooltipContent, {
+              valueFormatter: valueFormatter
+            })
+          }, pin.tooltipProps)), categories.map(function (category, i) {
+            return renderSeries(kind, {
+              id: "".concat(chartId, "-").concat(i),
+              category: category,
+              color: series[i],
+              curve: curve,
+              stacked: stacked,
+              showDots: showDots,
+              connectNulls: connectNulls,
+              animate: animate && !reducedMotion,
+              horizontal: isHorizontalBars,
+              barRadius: 4
+            });
+          })]
+        })
       })
-    })
+    }))
   }));
 });
 

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

@@ -4,14 +4,19 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useId } from 'react';
 import { cn } from '../../utils/cn.js';
 
-var _excluded = ["className", "title", "description", "defaultTitle", "data", "height", "emptyState", "legend", "accessibleTable", "tableColumns", "children", "aria-label"];
+var _excluded = ["className", "title", "description", "defaultTitle", "data", "height", "aspectRatio", "emptyState", "legend", "accessibleTable", "tableColumns", "children", "aria-label"];
 // The swatch colour arrives as a custom property so a token (`rgb(var(--dt-*))`)
 // and a resolved rgb() string both work.
 var swatch = function swatch(size) {
   return cn("inline-block shrink-0 rounded-full bg-[color:var(--dt-chart-color)]", size);
 };
-var sizeStyle = function sizeStyle(height) {
-  return {
+// `aspectRatio` (e.g. 16 / 9), when given, replaces the fixed height so the chart
+// scales with its container width.
+var sizeStyle = function sizeStyle(height, aspectRatio) {
+  return aspectRatio ? {
+    aspectRatio: String(aspectRatio),
+    width: "100%"
+  } : {
     height: typeof height === "number" ? "".concat(height, "px") : height
   };
 };
@@ -46,6 +51,7 @@ function ChartTooltipContent(_ref2) {
   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",
+    "data-chart-tooltip": "",
     children: [!hideLabel && label != null && label !== "" && jsx("p", {
       className: "mb-1 font-medium",
       children: label
@@ -119,6 +125,7 @@ var ChartFrame = /*#__PURE__*/React.forwardRef(function ChartFrame(_ref4, ref) {
     defaultTitle = _ref4.defaultTitle,
     data = _ref4.data,
     height = _ref4.height,
+    aspectRatio = _ref4.aspectRatio,
     _ref4$emptyState = _ref4.emptyState,
     emptyState = _ref4$emptyState === void 0 ? "No data to display" : _ref4$emptyState,
     legend = _ref4.legend,
@@ -134,7 +141,7 @@ var ChartFrame = /*#__PURE__*/React.forwardRef(function ChartFrame(_ref4, ref) {
     return jsx("div", _objectSpread2(_objectSpread2({
       ref: ref,
       className: cn("flex w-full items-center justify-center rounded-md border border-dashed border-gray-300 text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400", className),
-      style: sizeStyle(height),
+      style: sizeStyle(height, aspectRatio),
       role: "status",
       "aria-label": name,
       "data-empty": "true"
@@ -151,7 +158,7 @@ var ChartFrame = /*#__PURE__*/React.forwardRef(function ChartFrame(_ref4, ref) {
       "aria-label": name,
       "aria-describedby": description ? descriptionId : undefined,
       className: "w-full text-gray-500 dark:text-gray-400",
-      style: sizeStyle(height),
+      style: sizeStyle(height, aspectRatio),
       children: children
     }), description && jsx("p", {
       id: descriptionId,

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

@@ -0,0 +1,105 @@
+'use client';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useRef, useState, useEffect, useCallback } from 'react';
+
+// Internal to the charts entry point. Small-screen helpers for the cartesian
+// charts: measured width (for adaptive ticks / axis width) and a tooltip that a
+// tap can pin open on touch screens.
+/** Gap (px) recharts keeps between x-axis ticks: wider on narrow charts so labels don't collide. */
+function tickGapFor(width) {
+  if (!width) return 8;
+  if (width < 360) return 32;
+  if (width < 640) return 16;
+  return 8;
+}
+/** Default value-axis width (px) when the consumer didn't set `yAxisWidth`. */
+function yAxisWidthFor(width) {
+  if (!width) return 48;
+  return width < 400 ? 36 : 48;
+}
+/** Tracks the rendered width of `ref`'s element. `0` until measured. */
+function useElementWidth() {
+  var ref = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  useEffect(function () {
+    var node = ref.current;
+    if (!node) return undefined;
+    var measure = function measure() {
+      return setWidth(Math.round(node.getBoundingClientRect().width || 0));
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    var observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
+  return [ref, width];
+}
+var readIndex = function readIndex(state) {
+  var _state$activeTooltipI;
+  var raw = (_state$activeTooltipI = state === null || state === void 0 ? void 0 : state.activeTooltipIndex) !== null && _state$activeTooltipI !== void 0 ? _state$activeTooltipI : state === null || state === void 0 ? void 0 : state.activeIndex;
+  if (raw === undefined || raw === null || raw === "") return undefined;
+  var n = Number(raw);
+  return Number.isNaN(n) ? raw : n;
+};
+/**
+ * Tap-to-pin tooltip for touch. A tap on the chart pins the tooltip at the
+ * tapped point; a second tap on the chart, or a tap outside it, unpins it.
+ * Mouse and pen keep the normal hover tooltip.
+ *
+ * Returns props for a wrapper element, an `onChartClick` for the recharts root
+ * and `tooltipProps` to spread on `<Tooltip>`.
+ */
+function usePinnedTooltip() {
+  var enabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var wrapperRef = useRef(null);
+  var pointerType = useRef("mouse");
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pinned = _useState4[0],
+    setPinned = _useState4[1]; // null | { index }
+  var onPointerDownCapture = useCallback(function (e) {
+    pointerType.current = e.pointerType || "mouse";
+  }, []);
+  var toggle = useCallback(function (state) {
+    if (!enabled || pointerType.current !== "touch") return;
+    setPinned(function (current) {
+      return current ? null : {
+        index: readIndex(state)
+      };
+    });
+  }, [enabled]);
+  // A tap outside the chart unpins.
+  useEffect(function () {
+    if (!pinned) return undefined;
+    var onDown = function onDown(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setPinned(null);
+    };
+    document.addEventListener("pointerdown", onDown);
+    return function () {
+      return document.removeEventListener("pointerdown", onDown);
+    };
+  }, [pinned]);
+  var tooltipProps = pinned ? _objectSpread2({
+    active: true
+  }, pinned.index !== undefined ? {
+    defaultIndex: pinned.index
+  } : {}) : {};
+  return {
+    pinned: Boolean(pinned),
+    wrapperProps: {
+      ref: wrapperRef,
+      onPointerDownCapture: onPointerDownCapture,
+      "data-tooltip-pinned": pinned ? "true" : undefined
+    },
+    onChartClick: toggle,
+    tooltipProps: tooltipProps
+  };
+}
+
+export { tickGapFor, useElementWidth, usePinnedTooltip, yAxisWidthFor };

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

@@ -1,11 +1,18 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET, PRESS_FEEDBACK } from '../../utils/touchTarget.js';
 import { Loader2 } from 'lucide-react';
 
 var _excluded = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth", "as", "onClick"];
+// Square, icon-only sizes. Pair with an `aria-label` (there is no visible text).
+var ICON_SIZES = {
+  'icon-sm': 'h-8 w-8 p-0',
+  icon: 'h-10 w-10 p-0',
+  'icon-lg': 'h-12 w-12 p-0'
+};
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$variant = _ref.variant,
@@ -26,26 +33,37 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var Component = as || (props.href !== undefined ? 'a' : 'button');
   var isNativeButton = Component === 'button';
   var isDisabled = disabled || loading;
-  var baseClasses = cn('inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none', {
-    // Variants
-    'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500': variant === 'primary',
-    'bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus-visible:ring-secondary-500': variant === 'secondary',
-    'bg-transparent border border-gray-300 hover:bg-gray-50 focus-visible:ring-primary-500 dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus-visible:ring-offset-gray-900': variant === 'outline',
-    'bg-transparent text-primary-600 hover:bg-primary-50 focus-visible:ring-primary-500': variant === 'ghost',
-    'bg-error-600 text-white hover:bg-error-700 focus-visible:ring-error-500': variant === 'destructive',
-    'bg-success-600 text-white hover:bg-success-700 focus-visible:ring-success-500': variant === 'success',
-    'bg-warning-600 text-white hover:bg-warning-700 focus-visible:ring-warning-500': variant === 'warning',
+  var isIconSize = Boolean(ICON_SIZES[size]);
+  var baseClasses = cn('relative inline-flex items-center justify-center rounded-md font-medium',
+  // Press shrink + an explicit transition for colours and the shrink;
+  // both are off under prefers-reduced-motion.
+  PRESS_FEEDBACK, 'transition duration-fast ease-standard motion-reduce:transition-none', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900', 'disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none', _defineProperty(_defineProperty({
+    // Variants (each with dark-mode colours).
+    'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500 dark:hover:bg-primary-500': variant === 'primary',
+    'bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus-visible:ring-secondary-500 dark:bg-secondary-800 dark:text-secondary-100 dark:hover:bg-secondary-700': variant === 'secondary',
+    'bg-transparent border border-gray-300 hover:bg-gray-50 focus-visible:ring-primary-500 dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-800': variant === 'outline',
+    'bg-transparent text-primary-600 hover:bg-primary-50 focus-visible:ring-primary-500 dark:text-primary-300 dark:hover:bg-primary-900/40': variant === 'ghost',
+    'bg-error-600 text-white hover:bg-error-700 focus-visible:ring-error-500 dark:hover:bg-error-500': variant === 'destructive',
+    'bg-success-600 text-white hover:bg-success-700 focus-visible:ring-success-500 dark:hover:bg-success-500': variant === 'success',
+    'bg-warning-600 text-white hover:bg-warning-700 focus-visible:ring-warning-500 dark:hover:bg-warning-500': variant === 'warning',
     // Sizes — every value of the shared `Size` type gets a real height.
     'h-7 px-2 text-xs': size === 'xs',
     'h-8 px-3 text-xs': size === 'sm',
     'h-10 px-4 text-sm': size === 'md',
     'h-12 px-6 text-base': size === 'lg',
     'h-14 px-8 text-lg': size === 'xl',
-    'h-16 px-10 text-xl': size === '2xl',
-    // Full width
-    'w-full': fullWidth
-  }, className);
-  return jsxs(Component, _objectSpread2(_objectSpread2(_objectSpread2({
+    'h-16 px-10 text-xl': size === '2xl'
+  }, TOUCH_TARGET, size === 'xs' || size === 'sm' || size === 'icon-sm' || size === 'icon'), 'w-full', fullWidth), ICON_SIZES[size], className);
+  var content = jsxs(Fragment, {
+    children: [leftIcon && jsx("span", {
+      className: isIconSize ? undefined : 'mr-2',
+      children: leftIcon
+    }), children, rightIcon && jsx("span", {
+      className: isIconSize ? undefined : 'ml-2',
+      children: rightIcon
+    })]
+  });
+  return jsx(Component, _objectSpread2(_objectSpread2(_objectSpread2({
     ref: ref,
     className: baseClasses
   }, isNativeButton ? {
@@ -56,19 +74,25 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     'aria-disabled': true,
     tabIndex: -1
   }), {}, {
+    "aria-busy": loading ? true : undefined,
     onClick: !isNativeButton && isDisabled ? function (e) {
       return e.preventDefault();
     } : onClick
   }, props), {}, {
-    children: [loading && jsx(Loader2, {
-      className: "mr-2 h-4 w-4 animate-spin"
-    }), !loading && leftIcon && jsx("span", {
-      className: "mr-2",
-      children: leftIcon
-    }), children, !loading && rightIcon && jsx("span", {
-      className: "ml-2",
-      children: rightIcon
-    })]
+    children: loading ? jsxs(Fragment, {
+      children: [jsx("span", {
+        className: "inline-flex items-center opacity-0",
+        "data-slot": "label",
+        children: content
+      }), jsx("span", {
+        className: "absolute inset-0 flex items-center justify-center",
+        "data-slot": "spinner",
+        "aria-hidden": "true",
+        children: jsx(Loader2, {
+          className: "h-4 w-4 animate-spin motion-reduce:animate-none"
+        })
+      })]
+    }) : content
   }));
 });
 Button.displayName = 'Button';