@dreamtree-org/twreact-ui 1.3.11 → 2.0.1

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

@@ -0,0 +1,286 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, typeof as _typeof, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useMemo, useRef, useState, useCallback } from 'react';
+import { MoreHorizontal } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import { setRefs } from '../../utils/position.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import { useClickOutside } from '../../hooks/useClickOutside.js';
+import ActionMenuSurface from './menu/ActionMenuSurface.js';
+import { renderIcon } from './menu/menuItems.js';
+import { useSwipeGesture, restingOffset } from './SwipeableListItemGesture.js';
+
+var _excluded = ["as", "children", "leadingActions", "trailingActions", "fullSwipe", "fullSwipeThreshold", "actionWidth", "open", "defaultOpen", "onOpenChange", "disabled", "moreActions", "moreActionsLabel", "menuPresentation", "contentClassName", "className", "onKeyDown"];
+// The iOS Mail / Gmail row: swipe horizontally to reveal actions, swipe all
+// the way to commit the first one. Every action is also reachable without a
+// gesture through the "More actions" button (a menu, or an action sheet on
+// phones).
+var TONE_CLASSES = {
+  "default": "bg-secondary-600 text-secondary-50",
+  primary: "bg-primary-600 text-primary-50",
+  secondary: "bg-secondary-600 text-secondary-50",
+  success: "bg-success-600 text-success-50",
+  warning: "bg-warning-600 text-warning-50",
+  info: "bg-info-600 text-info-50",
+  error: "bg-error-600 text-error-50",
+  destructive: "bg-error-600 text-error-50"
+};
+var MOTION = "duration-base ease-standard motion-reduce:transition-none";
+var toneClass = function toneClass(tone) {
+  return TONE_CLASSES[tone] || TONE_CLASSES["default"];
+};
+var isMenuDestructive = function isMenuDestructive(tone) {
+  return tone === "destructive" || tone === "error";
+};
+function ActionPanel(_ref) {
+  var side = _ref.side,
+    actions = _ref.actions,
+    width = _ref.width,
+    open = _ref.open,
+    armed = _ref.armed,
+    dragging = _ref.dragging,
+    onSelect = _ref.onSelect;
+  // The first action sits at the outer edge, so trailing actions render reversed.
+  var ordered = side === "trailing" ? _toConsumableArray(actions).reverse() : actions;
+  var first = actions[0];
+  return jsx("div", {
+    "data-swipe-actions": side,
+    "aria-hidden": open ? undefined : true,
+    className: cn("absolute inset-y-0 flex overflow-hidden", side === "leading" ? "left-0" : "right-0 flex-row", !dragging && cn("transition-[width]", MOTION)),
+    style: {
+      width: width
+    },
+    children: ordered.map(function (action, idx) {
+      var _action$key;
+      var grow = armed && action === first;
+      var collapsed = armed && action !== first;
+      return jsxs("button", {
+        type: "button",
+        tabIndex: open ? 0 : -1,
+        disabled: action.disabled || undefined,
+        "data-tone": action.tone || "default",
+        className: cn("flex min-w-0 flex-col items-center justify-center gap-1 overflow-hidden px-2 text-xs font-medium outline-none", "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-50", "disabled:cursor-not-allowed disabled:opacity-60", toneClass(action.tone), grow ? "flex-[1_0_auto]" : collapsed ? "w-0 flex-none px-0" : "flex-1", !dragging && cn("transition-[flex-grow,width]", MOTION)),
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onSelect(action, "button");
+        },
+        children: [action.icon != null && jsx("span", {
+          className: "inline-flex shrink-0",
+          "aria-hidden": "true",
+          children: renderIcon(action.icon, "h-5 w-5")
+        }), jsx("span", {
+          className: "max-w-full truncate",
+          children: action.label
+        })]
+      }, (_action$key = action.key) !== null && _action$key !== void 0 ? _action$key : "".concat(side, "-").concat(idx));
+    })
+  });
+}
+var SwipeableListItem = /*#__PURE__*/React.forwardRef(function SwipeableListItem(_ref2, _ref4) {
+  var _ref2$as = _ref2.as,
+    Component = _ref2$as === void 0 ? "div" : _ref2$as,
+    children = _ref2.children,
+    _ref2$leadingActions = _ref2.leadingActions,
+    leadingActions = _ref2$leadingActions === void 0 ? [] : _ref2$leadingActions,
+    _ref2$trailingActions = _ref2.trailingActions,
+    trailingActions = _ref2$trailingActions === void 0 ? [] : _ref2$trailingActions,
+    _ref2$fullSwipe = _ref2.fullSwipe,
+    fullSwipe = _ref2$fullSwipe === void 0 ? true : _ref2$fullSwipe,
+    _ref2$fullSwipeThresh = _ref2.fullSwipeThreshold,
+    fullSwipeThreshold = _ref2$fullSwipeThresh === void 0 ? 0.6 : _ref2$fullSwipeThresh,
+    _ref2$actionWidth = _ref2.actionWidth,
+    actionWidth = _ref2$actionWidth === void 0 ? 80 : _ref2$actionWidth,
+    open = _ref2.open,
+    _ref2$defaultOpen = _ref2.defaultOpen,
+    defaultOpen = _ref2$defaultOpen === void 0 ? null : _ref2$defaultOpen,
+    onOpenChange = _ref2.onOpenChange,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    _ref2$moreActions = _ref2.moreActions,
+    moreActions = _ref2$moreActions === void 0 ? "focus" : _ref2$moreActions,
+    _ref2$moreActionsLabe = _ref2.moreActionsLabel,
+    moreActionsLabel = _ref2$moreActionsLabe === void 0 ? "More actions" : _ref2$moreActionsLabe,
+    _ref2$menuPresentatio = _ref2.menuPresentation,
+    menuPresentation = _ref2$menuPresentatio === void 0 ? "auto" : _ref2$menuPresentatio,
+    contentClassName = _ref2.contentClassName,
+    className = _ref2.className,
+    onKeyDown = _ref2.onKeyDown,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var leading = useMemo(function () {
+    return Array.isArray(leadingActions) ? leadingActions : [];
+  }, [leadingActions]);
+  var trailing = useMemo(function () {
+    return Array.isArray(trailingActions) ? trailingActions : [];
+  }, [trailingActions]);
+  var widths = useMemo(function () {
+    return {
+      leading: leading.length * actionWidth,
+      trailing: trailing.length * actionWidth
+    };
+  }, [leading.length, trailing.length, actionWidth]);
+  var _useControllableState = useControllableState({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    rawOpenSide = _useControllableState2[0],
+    setOpenSide = _useControllableState2[1];
+  // A side without actions can't be open.
+  var openSide = rawOpenSide && widths[rawOpenSide] > 0 ? rawOpenSide : null;
+  var rootRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    moreButtonEl = _useState2[0],
+    setMoreButtonEl = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    menuOpen = _useState4[0],
+    setMenuOpen = _useState4[1];
+  var close = useCallback(function () {
+    if (openSide != null) setOpenSide(null);
+  }, [openSide, setOpenSide]);
+  var runAction = useCallback(function (action, source) {
+    var _action$onSelect;
+    if (!action || action.disabled) return;
+    (_action$onSelect = action.onSelect) === null || _action$onSelect === void 0 || _action$onSelect.call(action, {
+      action: action,
+      source: source
+    });
+    setOpenSide(null);
+  }, [setOpenSide]);
+  var allowFull = _typeof(fullSwipe) === "object" && fullSwipe !== null ? {
+    leading: fullSwipe.leading !== false,
+    trailing: fullSwipe.trailing !== false
+  } : {
+    leading: Boolean(fullSwipe),
+    trailing: Boolean(fullSwipe)
+  };
+  var onSettle = function onSettle(_ref3) {
+    var side = _ref3.side,
+      commit = _ref3.commit;
+    if (commit) {
+      runAction((side === "leading" ? leading : trailing)[0], "full-swipe");
+      return;
+    }
+    if (side !== openSide) setOpenSide(side);
+  };
+  var enabled = !disabled && (widths.leading > 0 || widths.trailing > 0);
+  var _useSwipeGesture = useSwipeGesture({
+      enabled: enabled,
+      widths: widths,
+      openSide: openSide,
+      fullSwipe: allowFull,
+      fullSwipeThreshold: fullSwipeThreshold,
+      onSettle: onSettle
+    }),
+    offset = _useSwipeGesture.offset,
+    dragging = _useSwipeGesture.dragging,
+    armed = _useSwipeGesture.armed,
+    handlers = _useSwipeGesture.handlers,
+    consumeClick = _useSwipeGesture.consumeClick;
+  useClickOutside([rootRef], close, {
+    enabled: openSide != null
+  });
+  var x = offset !== null && offset !== void 0 ? offset : restingOffset(openSide, widths);
+  var menuItems = useMemo(function () {
+    return [].concat(_toConsumableArray(leading), _toConsumableArray(trailing)).map(function (action, idx) {
+      var _action$key2;
+      return {
+        key: (_action$key2 = action.key) !== null && _action$key2 !== void 0 ? _action$key2 : "action-".concat(idx),
+        label: action.label,
+        icon: action.icon != null ? renderIcon(action.icon, "h-4 w-4") : null,
+        disabled: Boolean(action.disabled),
+        tone: isMenuDestructive(action.tone) ? "destructive" : "default",
+        onSelect: function onSelect() {
+          return runAction(action, "menu");
+        }
+      };
+    });
+  }, [leading, trailing, runAction]);
+  var hasActions = menuItems.length > 0;
+  var showMore = hasActions && moreActions !== false && !disabled;
+  var handleKeyDown = function handleKeyDown(e) {
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "Escape" && openSide != null) {
+      e.stopPropagation();
+      setOpenSide(null);
+    }
+  };
+  return jsxs(Component, _objectSpread2(_objectSpread2({
+    ref: function ref(node) {
+      return setRefs(node, rootRef, _ref4);
+    },
+    "data-swipe-open": openSide !== null && openSide !== void 0 ? openSide : undefined,
+    "data-swiping": dragging || undefined,
+    className: cn("group/swipe relative isolate overflow-hidden", className),
+    onKeyDown: handleKeyDown
+  }, rest), {}, {
+    children: [widths.leading > 0 && jsx(ActionPanel, {
+      side: "leading",
+      actions: leading,
+      width: Math.max(0, x),
+      open: openSide === "leading",
+      armed: armed === "leading",
+      dragging: dragging,
+      onSelect: runAction
+    }), widths.trailing > 0 && jsx(ActionPanel, {
+      side: "trailing",
+      actions: trailing,
+      width: Math.max(0, -x),
+      open: openSide === "trailing",
+      armed: armed === "trailing",
+      dragging: dragging,
+      onSelect: runAction
+    }), jsx("div", _objectSpread2(_objectSpread2({
+      "data-swipe-content": "",
+      className: cn("relative bg-surface touch-pan-y", dragging ? "select-none" : cn("transition-transform", MOTION), contentClassName),
+      style: x ? {
+        transform: "translate3d(".concat(x, "px, 0, 0)")
+      } : undefined
+    }, handlers), {}, {
+      onClickCapture: function onClickCapture(e) {
+        // The click that ends a swipe, or a tap on an open row, only closes.
+        var endedSwipe = consumeClick();
+        if (!endedSwipe && openSide == null) return;
+        e.stopPropagation();
+        e.preventDefault();
+        if (!endedSwipe) close();
+      },
+      children: children
+    })), showMore && jsx("button", {
+      ref: setMoreButtonEl,
+      type: "button",
+      "aria-label": moreActionsLabel,
+      "aria-haspopup": "menu",
+      "aria-expanded": menuOpen,
+      "data-swipe-more": "",
+      className: cn("absolute right-2 top-1/2 inline-flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full", "border border-line bg-surface text-foreground shadow-sm outline-none", "focus-visible:ring-2 focus-visible:ring-primary-500 transition-opacity duration-fast motion-reduce:transition-none", moreActions === "focus" && !menuOpen && "pointer-events-none opacity-0 focus-visible:pointer-events-auto focus-visible:opacity-100 [@media(hover:hover)]:group-hover/swipe:pointer-events-auto [@media(hover:hover)]:group-hover/swipe:opacity-100", openSide != null && "hidden"),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setMenuOpen(function (v) {
+          return !v;
+        });
+      },
+      children: jsx(MoreHorizontal, {
+        className: "h-5 w-5",
+        "aria-hidden": "true"
+      })
+    }), showMore && jsx(ActionMenuSurface, {
+      open: menuOpen,
+      onClose: function onClose() {
+        return setMenuOpen(false);
+      },
+      anchorEl: moreButtonEl,
+      items: menuItems,
+      presentation: menuPresentation,
+      placement: "bottom-end",
+      label: moreActionsLabel
+    })]
+  }));
+});
+SwipeableListItem.displayName = "SwipeableListItem";
+
+export { SwipeableListItem as default };

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

@@ -0,0 +1,219 @@
+'use client';
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useRef, useCallback } from 'react';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { rubberBand, FLICK_VELOCITY } from '../../hooks/useSheetDrag.js';
+
+// Internal (not exported). The horizontal swipe gesture behind
+// SwipeableListItem. Offsets are in px; positive moves the content right
+// (revealing the leading actions), negative moves it left (trailing).
+//
+// The gesture only starts once horizontal movement dominates, so a vertical
+// pan scrolls the page as usual (pair with `touch-action: pan-y`). Past the
+// revealed actions the content rubber-bands, unless a full swipe is possible,
+// in which case it follows the finger up to the row width.
+var SLOP = 6; // px before a press becomes a swipe (or a scroll)
+var VELOCITY_WINDOW = 100; // ms of recent samples used for release velocity
+var FULL_SWIPE_MARGIN = 24; // px a full swipe must travel past the revealed actions
+var FALLBACK_WIDTH = 320; // px, when the row has no layout (jsdom, hidden)
+var now = function now() {
+  return Date.now();
+};
+var sideOf = function sideOf(offset) {
+  return offset > 0 ? "leading" : offset < 0 ? "trailing" : null;
+};
+/**
+ * Where the content rests for an open side.
+ * @param {'leading'|'trailing'|null} side
+ * @param {{ leading: number, trailing: number }} widths - revealed widths in px.
+ */
+function restingOffset(side, widths) {
+  if (side === "leading") return widths.leading;
+  if (side === "trailing") return -widths.trailing;
+  return 0;
+}
+/** Distance (px) past which releasing commits the side's first action. */
+function fullSwipeDistance(reveal, width, threshold) {
+  return Math.max(reveal + FULL_SWIPE_MARGIN, width * threshold);
+}
+/**
+ * Maps a raw finger offset to the displayed offset for one side.
+ * @param {number} raw - px, signed.
+ * @param {{ reveal: number, fullSwipe: boolean, width: number }} opts
+ */
+function constrainOffset(raw, _ref) {
+  var reveal = _ref.reveal,
+    fullSwipe = _ref.fullSwipe,
+    width = _ref.width;
+  var sign = Math.sign(raw);
+  var distance = Math.abs(raw);
+  var limit = reveal > 0 && fullSwipe ? width : reveal;
+  if (distance <= limit) return raw;
+  return sign * (limit + rubberBand(distance - limit, width));
+}
+/**
+ * @param {{
+ *   enabled: boolean,
+ *   widths: { leading: number, trailing: number },
+ *   openSide: 'leading'|'trailing'|null,
+ *   fullSwipe: { leading: boolean, trailing: boolean },
+ *   fullSwipeThreshold: number,
+ *   onSettle: (r: { side: 'leading'|'trailing'|null, commit: boolean }) => void,
+ * }} options
+ * @returns {{ offset: number|null, dragging: boolean, armed: 'leading'|'trailing'|null,
+ *   handlers: object, consumeClick: () => boolean }}
+ */
+function useSwipeGesture(_ref2) {
+  var enabled = _ref2.enabled,
+    widths = _ref2.widths,
+    openSide = _ref2.openSide,
+    fullSwipe = _ref2.fullSwipe,
+    fullSwipeThreshold = _ref2.fullSwipeThreshold,
+    onSettle = _ref2.onSettle;
+  // `{ offset, width }` while a swipe is in progress, else null.
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    drag = _useState2[0],
+    setDrag = _useState2[1];
+  var gesture = useRef(null);
+  var swallowClick = useRef(false);
+  var latest = useLatestRef({
+    widths: widths,
+    openSide: openSide,
+    fullSwipe: fullSwipe,
+    fullSwipeThreshold: fullSwipeThreshold,
+    onSettle: onSettle
+  });
+  var reset = useCallback(function () {
+    gesture.current = null;
+    setDrag(null);
+  }, []);
+  var onPointerDown = useCallback(function (e) {
+    var _el$getBoundingClient;
+    if (!enabled || e.button !== undefined && e.button !== 0) return;
+    var el = e.currentTarget;
+    var width = ((_el$getBoundingClient = el.getBoundingClientRect) === null || _el$getBoundingClient === void 0 ? void 0 : _el$getBoundingClient.call(el).width) || el.offsetWidth || FALLBACK_WIDTH;
+    var start = restingOffset(latest.current.openSide, latest.current.widths);
+    gesture.current = {
+      x: e.clientX,
+      y: e.clientY,
+      start: start,
+      width: width,
+      el: el,
+      pointerId: e.pointerId,
+      active: false,
+      current: start,
+      samples: [{
+        o: start,
+        t: now()
+      }]
+    };
+    swallowClick.current = false;
+  }, [enabled, latest]);
+  var onPointerMove = useCallback(function (e) {
+    var g = gesture.current;
+    if (!g) return;
+    var dx = e.clientX - g.x;
+    var dy = e.clientY - g.y;
+    if (!g.active) {
+      if (Math.max(Math.abs(dx), Math.abs(dy)) < SLOP) return;
+      if (Math.abs(dy) >= Math.abs(dx)) {
+        gesture.current = null; // a vertical pan: let the page scroll
+        return;
+      }
+      g.active = true;
+      swallowClick.current = true;
+      try {
+        var _g$el, _g$el$setPointerCaptu;
+        (_g$el = g.el) === null || _g$el === void 0 || (_g$el$setPointerCaptu = _g$el.setPointerCapture) === null || _g$el$setPointerCaptu === void 0 || _g$el$setPointerCaptu.call(_g$el, g.pointerId);
+      } catch (_unused) {
+        // The pointer may already be gone (synthetic events, fast lifts).
+      }
+    }
+    var raw = g.start + dx;
+    var side = sideOf(raw);
+    var _latest$current = latest.current,
+      w = _latest$current.widths,
+      fs = _latest$current.fullSwipe;
+    var next = side ? constrainOffset(raw, {
+      reveal: w[side],
+      fullSwipe: fs[side],
+      width: g.width
+    }) : 0;
+    g.current = next;
+    var t = now();
+    g.samples.push({
+      o: next,
+      t: t
+    });
+    while (g.samples.length > 2 && t - g.samples[0].t > VELOCITY_WINDOW) g.samples.shift();
+    setDrag({
+      offset: next,
+      width: g.width
+    });
+  }, [latest]);
+  var onPointerUp = useCallback(function () {
+    var g = gesture.current;
+    if (!g) return;
+    gesture.current = null;
+    if (!g.active) return;
+    var _latest$current2 = latest.current,
+      w = _latest$current2.widths,
+      fs = _latest$current2.fullSwipe,
+      t = _latest$current2.fullSwipeThreshold,
+      settle = _latest$current2.onSettle;
+    var value = g.current;
+    var side = sideOf(value);
+    var first = g.samples[0];
+    var velocity = (value - first.o) / Math.max(1, now() - first.t);
+    setDrag(null);
+    if (!side || w[side] === 0) {
+      settle({
+        side: null,
+        commit: false
+      });
+      return;
+    }
+    if (fs[side] && Math.abs(value) >= fullSwipeDistance(w[side], g.width, t)) {
+      settle({
+        side: side,
+        commit: true
+      });
+      return;
+    }
+    // A flick decides by direction; otherwise past half the actions opens.
+    var towardOpen = side === "leading" ? velocity > 0 : velocity < 0;
+    var flick = Math.abs(velocity) >= FLICK_VELOCITY;
+    var open = flick ? towardOpen : Math.abs(value) >= w[side] / 2;
+    settle({
+      side: open ? side : null,
+      commit: false
+    });
+  }, [latest]);
+  var onPointerCancel = useCallback(function () {
+    swallowClick.current = false;
+    reset();
+  }, [reset]);
+  // The click that ends a swipe must not activate the row.
+  var consumeClick = useCallback(function () {
+    if (!swallowClick.current) return false;
+    swallowClick.current = false;
+    return true;
+  }, []);
+  var dragSide = drag ? sideOf(drag.offset) : null;
+  var armed = dragSide && fullSwipe[dragSide] && widths[dragSide] > 0 && Math.abs(drag.offset) >= fullSwipeDistance(widths[dragSide], drag.width, fullSwipeThreshold) ? dragSide : null;
+  return {
+    offset: drag ? drag.offset : null,
+    dragging: drag != null,
+    armed: armed,
+    consumeClick: consumeClick,
+    handlers: enabled ? {
+      onPointerDown: onPointerDown,
+      onPointerMove: onPointerMove,
+      onPointerUp: onPointerUp,
+      onPointerCancel: onPointerCancel
+    } : {}
+  };
+}
+
+export { FALLBACK_WIDTH, constrainOffset, fullSwipeDistance, restingOffset, useSwipeGesture };

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

@@ -3,8 +3,9 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useId, useEffect, useRef } from 'react';
 import { cn } from '../../utils/cn.js';
+import { useHaptics } from '../../hooks/useHaptics.js';
 
-var _excluded = ["id", "name", "checked", "defaultChecked", "onChange", "disabled", "size", "color", "trackClass", "thumbClass", "className", "topLabel", "bottomLabel", "rightLabel", "leftLabel", "ariaLabel", "onPointerDown", "onPointerMove", "onPointerUp", "onPointerCancel"];
+var _excluded = ["id", "name", "checked", "defaultChecked", "onChange", "disabled", "size", "color", "trackClass", "thumbClass", "className", "topLabel", "bottomLabel", "rightLabel", "leftLabel", "ariaLabel", "onPointerDown", "onPointerMove", "onPointerUp", "onPointerCancel", "haptics"];
 /**
  * Switch.jsx
  * - Plain JSX (no TypeScript)
@@ -40,6 +41,8 @@ var SIZE_MAP = {
 };
 // Horizontal travel (px) before a press becomes a drag.
 var DRAG_THRESHOLD = 4;
+// Token presets only: the raw-palette presets (blue / indigo / purple) were
+// removed in 2.0.0 (DTUI-65).
 var COLOR_PRESETS = {
   primary: {
     bg: "bg-primary-600",
@@ -72,18 +75,6 @@ var COLOR_PRESETS = {
   warning: {
     bg: "bg-warning-600",
     ring: "focus-visible:ring-warning-300"
-  },
-  blue: {
-    bg: "bg-blue-600",
-    ring: "focus-visible:ring-blue-300"
-  },
-  indigo: {
-    bg: "bg-indigo-600",
-    ring: "focus-visible:ring-indigo-300"
-  },
-  purple: {
-    bg: "bg-purple-600",
-    ring: "focus-visible:ring-purple-300"
   }
 };
 var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
@@ -112,6 +103,8 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
     onPointerMove = props.onPointerMove,
     onPointerUp = props.onPointerUp,
     onPointerCancel = props.onPointerCancel,
+    _props$haptics = props.haptics,
+    haptics = _props$haptics === void 0 ? false : _props$haptics,
     rest = _objectWithoutProperties(props, _excluded);
   var isControlled = typeof checked === "boolean";
   var _useState = useState(defaultChecked),
@@ -132,9 +125,14 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     dragPreview = _useState4[0],
     setDragPreview = _useState4[1];
+  var _useHaptics = useHaptics({
+      enabled: haptics
+    }),
+    haptic = _useHaptics.trigger;
   var setOn = function setOn(next) {
     if (disabled || next === isOn) return;
     if (!isControlled) setInternalChecked(next);
+    haptic("selection");
     onChange && onChange(next);
   };
   var toggle = function toggle() {