@dreamtree-org/twreact-ui 1.2.1 → 1.3.1

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

@@ -0,0 +1,100 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["count", "circle", "height", "width", "rounded", "animated", "active", "gap", "inline", "className", "children", "style"];
+/**
+ * Skeleton Component (React)
+ *
+ * Props
+ * - count (number) - number of skeleton items to render (default: 1)
+ * - circle (boolean) - render items as circles (rounded-full)
+ * - height (number|string) - override height in px or CSS units (e.g. '2rem')
+ * - width (number|string) - override width in px or CSS units
+ * - rounded (boolean) - whether elements have rounded corners (if circle is false)
+ * - animated (boolean) - whether to show shimmer animation
+ * - active (boolean) - if true, show skeletons; if false, render children
+ * - gap (string) - spacing between stacked skeleton items (CSS value, default '8px')
+ * - inline (boolean) - render items inline (row) instead of stacked (column)
+ * - className (string) - extra wrapper classes
+ * - children - optional children to render when active === false
+ */
+function toPxOrUnit(value) {
+  if (typeof value === "number") return "".concat(value, "px");
+  if (typeof value === "string") return value;
+  return undefined;
+}
+var Skeleton = /*#__PURE__*/forwardRef(function Skeleton(_ref, ref) {
+  var _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 1 : _ref$count,
+    _ref$circle = _ref.circle,
+    circle = _ref$circle === void 0 ? false : _ref$circle,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 16 : _ref$height,
+    width = _ref.width,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? true : _ref$rounded,
+    _ref$animated = _ref.animated,
+    animated = _ref$animated === void 0 ? true : _ref$animated,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? true : _ref$active,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? "8px" : _ref$gap,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (!active) return jsx(Fragment, {
+    children: children
+  });
+  var resolvedHeight = toPxOrUnit(height);
+  var resolvedWidth = width !== undefined ? toPxOrUnit(width) : circle ? resolvedHeight : inline ? resolvedHeight : "100%";
+  var borderRadius = circle ? "9999px" : rounded ? "8px" : "2px";
+  var containerDirection = inline ? "row" : "column";
+  var items = Array.from({
+    length: Math.max(1, Math.floor(count))
+  });
+  var shimmerOverlay = animated ? "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%)" : "none";
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("skeleton-wrapper", className),
+    role: "status",
+    "aria-busy": active,
+    "aria-live": "polite",
+    style: _objectSpread2({
+      display: "flex",
+      flexDirection: containerDirection,
+      gap: gap,
+      alignItems: "center"
+    }, style)
+  }, rest), {}, {
+    children: [jsx("style", {
+      children: "\n        @keyframes skeleton-shimmer {\n          0% { background-position: -150% 0; }\n          100% { background-position: 150% 0; }\n        }\n        .skeleton-wrapper .skeleton-item {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n        }\n      "
+    }), items.map(function (_, i) {
+      return jsx("div", {
+        // Token classes rather than an inline hex, so brands and dark mode apply (STUDIO-59).
+        className: "skeleton-item bg-gray-200 dark:bg-gray-700",
+        style: {
+          height: resolvedHeight,
+          width: resolvedWidth,
+          borderRadius: borderRadius,
+          backgroundImage: shimmerOverlay,
+          backgroundSize: animated ? "200% 100%" : undefined,
+          backgroundRepeat: "no-repeat",
+          animation: animated ? "skeleton-shimmer 1.2s linear infinite" : undefined,
+          willChange: animated ? "background-position" : undefined
+        }
+      }, i);
+    })]
+  }));
+});
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton as default };

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

@@ -0,0 +1,134 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef, useMemo } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useSliderValues, useSliderPointer, toPercent, keyToValue } from '../../hooks/useSliderValues.js';
+
+var _excluded = ["value", "defaultValue", "onChange", "onChangeEnd", "min", "max", "step", "largeStep", "disabled", "label", "showValue", "formatValue", "thumbLabels", "name", "className", "aria-label"];
+var DEFAULT_THUMB_LABELS = ["Minimum", "Maximum"];
+var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    onChangeEnd = _ref.onChangeEnd,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    largeStep = _ref.largeStep,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    label = _ref.label,
+    _ref$showValue = _ref.showValue,
+    showValue = _ref$showValue === void 0 ? false : _ref$showValue,
+    _ref$formatValue = _ref.formatValue,
+    formatValue = _ref$formatValue === void 0 ? String : _ref$formatValue,
+    _ref$thumbLabels = _ref.thumbLabels,
+    thumbLabels = _ref$thumbLabels === void 0 ? DEFAULT_THUMB_LABELS : _ref$thumbLabels,
+    name = _ref.name,
+    className = _ref.className,
+    ariaLabel = _ref["aria-label"],
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var labelId = "slider-label-".concat(useId());
+  var trackRef = useRef(null);
+  var bounds = useMemo(function () {
+    return {
+      min: min,
+      max: max,
+      step: step > 0 ? step : 1,
+      largeStep: largeStep !== null && largeStep !== void 0 ? largeStep : Math.max(step, (max - min) / 10)
+    };
+  }, [min, max, step, largeStep]);
+  var _useSliderValues = useSliderValues({
+      value: value,
+      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : min,
+      onChange: onChange,
+      onChangeEnd: onChangeEnd,
+      bounds: bounds
+    }),
+    values = _useSliderValues.values,
+    isRange = _useSliderValues.isRange,
+    setThumb = _useSliderValues.setThumb;
+  var pointer = useSliderPointer({
+    trackRef: trackRef,
+    values: values,
+    setThumb: setThumb,
+    bounds: bounds,
+    disabled: disabled
+  });
+  var handleKeyDown = function handleKeyDown(index) {
+    return function (e) {
+      if (disabled) return;
+      var next = keyToValue(e.key, values[index], bounds);
+      if (next === null) return;
+      e.preventDefault();
+      setThumb(index, next, true);
+    };
+  };
+  var low = isRange ? toPercent(values[0], min, max) : 0;
+  var high = toPercent(values[values.length - 1], min, max);
+  var display = values.map(function (v) {
+    return formatValue(v);
+  }).join(" – ");
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("w-full", disabled && "opacity-50", className)
+  }, rest), {}, {
+    children: [(label || showValue) && jsxs("div", {
+      className: "mb-2 flex items-center justify-between text-sm",
+      children: [label && jsx("span", {
+        id: labelId,
+        className: "font-medium text-gray-700 dark:text-gray-200",
+        children: label
+      }), showValue && jsx("span", {
+        className: "tabular-nums text-gray-500 dark:text-gray-400",
+        "aria-hidden": "true",
+        children: display
+      })]
+    }), jsxs("div", _objectSpread2(_objectSpread2({
+      ref: trackRef,
+      className: cn("relative flex h-5 touch-none select-none items-center", disabled ? "cursor-not-allowed" : "cursor-pointer")
+    }, pointer), {}, {
+      children: [jsx("div", {
+        className: "h-1.5 w-full rounded-full bg-gray-200 dark:bg-gray-700"
+      }), jsx("div", {
+        className: "absolute h-1.5 rounded-full bg-primary-600 dark:bg-primary-500",
+        style: {
+          left: "".concat(low, "%"),
+          width: "".concat(high - low, "%")
+        }
+      }), values.map(function (v, i) {
+        var thumbLabel = isRange ? thumbLabels[i] : undefined;
+        return jsx("div", {
+          role: "slider",
+          tabIndex: disabled ? -1 : 0,
+          "aria-valuemin": isRange && i === 1 ? values[0] : min,
+          "aria-valuemax": isRange && i === 0 ? values[1] : max,
+          "aria-valuenow": v,
+          "aria-valuetext": formatValue(v),
+          "aria-orientation": "horizontal",
+          "aria-disabled": disabled || undefined,
+          "aria-label": thumbLabel !== null && thumbLabel !== void 0 ? thumbLabel : label ? undefined : ariaLabel,
+          "aria-labelledby": label && !thumbLabel ? labelId : undefined,
+          onKeyDown: handleKeyDown(i),
+          style: {
+            left: "".concat(toPercent(v, min, max), "%")
+          },
+          className: cn("absolute h-4 w-4 -translate-x-1/2 rounded-full border-2 border-primary-600 bg-white shadow", "transition-shadow motion-reduce:transition-none", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", "dark:border-primary-500 dark:bg-gray-900 dark:focus:ring-offset-gray-900")
+        }, i);
+      })]
+    })), name && values.map(function (v, i) {
+      return jsx("input", {
+        type: "hidden",
+        name: isRange ? "".concat(name, "[").concat(i, "]") : name,
+        value: v
+      }, i);
+    })]
+  }));
+});
+Slider.displayName = "Slider";
+
+export { Slider as default };

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

@@ -0,0 +1,226 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
+import { MicOff, Mic } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["lang", "continuous", "interimResults", "onSpeechComplete", "onSpeaking", "onError", "onStart", "onStop", "renderButton", "autoStart", "disabled", "resetOnStart", "className"];
+var isProbablyMobile = function isProbablyMobile() {
+  if (typeof navigator === "undefined") return false;
+  return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+};
+// Routine, non-fatal recognition events. The browser fires these during normal
+// operation (e.g. a pause in speech, or a programmatic stop) and follows them
+// with `onend`, so surfacing them as errors only creates noise for consumers.
+var NON_FATAL_ERRORS = new Set(["no-speech", "aborted"]);
+var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? "en-US" : _ref$lang,
+    _ref$continuous = _ref.continuous,
+    continuous = _ref$continuous === void 0 ? true : _ref$continuous,
+    _ref$interimResults = _ref.interimResults,
+    interimResults = _ref$interimResults === void 0 ? true : _ref$interimResults,
+    _ref$onSpeechComplete = _ref.onSpeechComplete,
+    onSpeechComplete = _ref$onSpeechComplete === void 0 ? function () {} : _ref$onSpeechComplete,
+    _ref$onSpeaking = _ref.onSpeaking,
+    onSpeaking = _ref$onSpeaking === void 0 ? function () {} : _ref$onSpeaking,
+    _ref$onError = _ref.onError,
+    onError = _ref$onError === void 0 ? function () {} : _ref$onError,
+    _ref$onStart = _ref.onStart,
+    onStart = _ref$onStart === void 0 ? function () {} : _ref$onStart,
+    _ref$onStop = _ref.onStop,
+    onStop = _ref$onStop === void 0 ? function () {} : _ref$onStop,
+    renderButton = _ref.renderButton,
+    _ref$autoStart = _ref.autoStart,
+    autoStart = _ref$autoStart === void 0 ? false : _ref$autoStart,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$resetOnStart = _ref.resetOnStart,
+    resetOnStart = _ref$resetOnStart === void 0 ? false : _ref$resetOnStart,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var recognitionRef = useRef(null);
+  var isMountedRef = useRef(true);
+  var autoStartedRef = useRef(false);
+  var finalTranscriptRef = useRef("");
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    _isListening = _useState2[0],
+    setIsListening = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    _isSupported = _useState4[0],
+    setIsSupported = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  useEffect(function () {
+    var hasSpeechRecognition = typeof window !== "undefined" && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window);
+    setIsSupported(hasSpeechRecognition);
+  }, []);
+  var buildFinalTranscript = useCallback(function () {
+    return finalTranscriptRef.current.trim();
+  }, []);
+  var initializeRecognition = useCallback(function () {
+    if (recognitionRef.current) return recognitionRef.current;
+    var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognition) {
+      var err = new Error("SpeechRecognition API not supported");
+      setError(err);
+      onError(err);
+      return null;
+    }
+    var recognition = new SpeechRecognition();
+    recognition.continuous = isProbablyMobile() ? false : continuous;
+    recognition.interimResults = interimResults;
+    recognition.lang = lang;
+    recognition.onstart = function () {
+      if (!isMountedRef.current) return;
+      setIsListening(true);
+      setError(null);
+      onStart();
+    };
+    recognition.onresult = function (event) {
+      if (!isMountedRef.current) return;
+      var interim = "";
+      var finalChunk = "";
+      for (var i = event.resultIndex; i < event.results.length; i++) {
+        var _res$;
+        var res = event.results[i];
+        var text = ((_res$ = res[0]) === null || _res$ === void 0 ? void 0 : _res$.transcript) || "";
+        if (res.isFinal) {
+          finalChunk += text + " ";
+          finalTranscriptRef.current += text + " ";
+        } else {
+          interim += text;
+        }
+      }
+      if (interim) onSpeaking(interim.trim());
+      if (finalChunk) onSpeechComplete(finalChunk.trim());
+    };
+    recognition.onerror = function (event) {
+      if (!isMountedRef.current) return;
+      // Ignore routine events — `onend` handles the listening-state reset.
+      if (NON_FATAL_ERRORS.has(event === null || event === void 0 ? void 0 : event.error)) return;
+      var err = new Error((event === null || event === void 0 ? void 0 : event.error) || "Speech recognition error");
+      setError(err);
+      setIsListening(false);
+      onError(err);
+    };
+    recognition.onend = function () {
+      if (!isMountedRef.current) return;
+      setIsListening(false);
+      onStop();
+    };
+    recognitionRef.current = recognition;
+    return recognition;
+  }, [continuous, interimResults, lang, onStart, onSpeaking, onSpeechComplete, onError, onStop]);
+  var startListening = useCallback(function () {
+    if (!_isSupported || disabled || _isListening) return;
+    try {
+      var rec = initializeRecognition();
+      if (!rec) return;
+      if (resetOnStart) {
+        finalTranscriptRef.current = "";
+      }
+      rec.start();
+    } catch (err) {
+      setError(err);
+      onError(err);
+    }
+  }, [_isSupported, disabled, _isListening, initializeRecognition, resetOnStart, onError]);
+  var stopListening = useCallback(function () {
+    if (!recognitionRef.current) return;
+    try {
+      recognitionRef.current.stop();
+    } catch (_unused) {
+      // already stopped
+    }
+  }, []);
+  var toggleListening = useCallback(function () {
+    if (disabled) return;
+    _isListening ? stopListening() : startListening();
+  }, [_isListening, disabled, startListening, stopListening]);
+  // Auto-start once, after support has been resolved. The ref guard keeps a
+  // later stop from being immediately undone by a re-running effect.
+  useEffect(function () {
+    if (autoStart && _isSupported && !disabled && !autoStartedRef.current) {
+      autoStartedRef.current = true;
+      startListening();
+    }
+  }, [autoStart, _isSupported, disabled, startListening]);
+  // Mark unmounted so async recognition handlers don't touch state after
+  // teardown, then stop the engine.
+  useEffect(function () {
+    isMountedRef.current = true;
+    return function () {
+      isMountedRef.current = false;
+      if (recognitionRef.current) {
+        try {
+          recognitionRef.current.stop();
+        } catch (_unused2) {
+          // already stopped
+        }
+      }
+    };
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      start: startListening,
+      stop: stopListening,
+      toggle: toggleListening,
+      isListening: function isListening() {
+        return _isListening;
+      },
+      isSupported: function isSupported() {
+        return _isSupported;
+      },
+      getTranscript: buildFinalTranscript,
+      clearTranscript: function clearTranscript() {
+        finalTranscriptRef.current = "";
+      },
+      getError: function getError() {
+        return error;
+      }
+    };
+  }, [_isListening, _isSupported, error, startListening, stopListening, toggleListening, buildFinalTranscript]);
+  if (typeof renderButton === "function") {
+    // The start/stop/toggle callbacks only touch refs when invoked from
+    // event handlers, never while renderButton itself is rendering.
+    // eslint-disable-next-line react-hooks/refs
+    return renderButton({
+      isListening: _isListening,
+      isSupported: _isSupported,
+      error: error,
+      start: startListening,
+      stop: stopListening,
+      toggle: toggleListening,
+      disabled: disabled || !_isSupported
+    });
+  }
+  var isDisabled = disabled || !_isSupported;
+  return jsxs("button", _objectSpread2(_objectSpread2({
+    type: "button",
+    "aria-pressed": _isListening,
+    "aria-label": _isListening ? "Stop listening" : "Start listening",
+    onClick: toggleListening,
+    disabled: isDisabled,
+    className: cn("inline-flex items-center gap-2 rounded-md px-4 h-10 text-sm font-medium", "border border-gray-300 bg-transparent transition-colors", "hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", "disabled:opacity-50 disabled:pointer-events-none", {
+      "text-error-600 border-error-600": _isListening,
+      "text-gray-900": !_isListening
+    }, className)
+  }, rest), {}, {
+    children: [_isListening ? jsx(MicOff, {
+      className: "h-4 w-4",
+      "aria-hidden": "true"
+    }) : jsx(Mic, {
+      className: "h-4 w-4",
+      "aria-hidden": "true"
+    }), _isListening ? "Stop" : "Start"]
+  }));
+});
+SpeechToText.displayName = "SpeechToText";
+
+export { SpeechToText as default };

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

@@ -0,0 +1,207 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useId, useEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["id", "name", "checked", "defaultChecked", "onChange", "disabled", "size", "color", "trackClass", "thumbClass", "className", "topLabel", "bottomLabel", "rightLabel", "leftLabel", "ariaLabel"];
+/**
+ * Switch.jsx
+ * - Plain JSX (no TypeScript)
+ * - Uses only trackClass and thumbClass (both accept any valid CSS color string or class name)
+ * - Controlled or uncontrolled usage
+ * - Sizes: 'sm' | 'md' | 'lg'
+ * - Accessible (role="switch", keyboard toggle)
+ * - Hidden input for form serialization (name prop)
+ *
+ * New props:
+ * - topLabel, bottomLabel, rightLabel, leftLabel (renders label in those positions)
+ */
+var SIZE_MAP = {
+  sm: {
+    track: "w-9 h-5",
+    knob: "w-4 h-4",
+    knobTranslate: "translate-x-4"
+  },
+  md: {
+    track: "w-11 h-6",
+    knob: "w-5 h-5",
+    knobTranslate: "translate-x-5"
+  },
+  lg: {
+    track: "w-14 h-8",
+    knob: "w-6 h-6",
+    knobTranslate: "translate-x-6"
+  }
+};
+var COLOR_PRESETS = {
+  primary: {
+    bg: "bg-primary-600",
+    ring: "focus-visible:ring-primary-300"
+  },
+  secondary: {
+    bg: "bg-secondary-600",
+    ring: "focus-visible:ring-secondary-300"
+  },
+  success: {
+    bg: "bg-success-600",
+    ring: "focus-visible:ring-success-300"
+  },
+  green: {
+    bg: "bg-success-600",
+    ring: "focus-visible:ring-success-300"
+  },
+  error: {
+    bg: "bg-error-600",
+    ring: "focus-visible:ring-error-300"
+  },
+  danger: {
+    bg: "bg-error-600",
+    ring: "focus-visible:ring-error-300"
+  },
+  red: {
+    bg: "bg-error-600",
+    ring: "focus-visible:ring-error-300"
+  },
+  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) {
+  var id = props.id,
+    name = props.name,
+    checked = props.checked,
+    _props$defaultChecked = props.defaultChecked,
+    defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,
+    onChange = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "md" : _props$size,
+    _props$color = props.color,
+    color = _props$color === void 0 ? "primary" : _props$color,
+    trackClass = props.trackClass,
+    thumbClass = props.thumbClass,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    topLabel = props.topLabel,
+    bottomLabel = props.bottomLabel,
+    rightLabel = props.rightLabel,
+    leftLabel = props.leftLabel,
+    ariaLabel = props.ariaLabel,
+    rest = _objectWithoutProperties(props, _excluded);
+  var isControlled = typeof checked === "boolean";
+  var _useState = useState(defaultChecked),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalChecked = _useState2[0],
+    setInternalChecked = _useState2[1];
+  var isOn = isControlled ? checked : internalChecked;
+  var autoId = useId();
+  var switchId = id || "switch-".concat(autoId);
+  useEffect(function () {
+    if (!isControlled) setInternalChecked(defaultChecked);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultChecked]);
+  var toggle = function toggle() {
+    if (disabled) return;
+    var next = !isOn;
+    if (!isControlled) setInternalChecked(next);
+    onChange && onChange(next);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (disabled) return;
+    if (e.key === " " || e.key === "Spacebar" || e.key === "Enter") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+  var sizeStuff = SIZE_MAP[size] || SIZE_MAP.md;
+  var isPreset = COLOR_PRESETS[color];
+  // Classes for the track (we use inline style for arbitrary trackClass when ON)
+  var trackClasses = cn("relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out", sizeStuff.track, isOn ? trackClass ? "" : isPreset ? isPreset.bg : "" : "bg-gray-100", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", trackClass // Accepting trackClass as a class name
+  );
+  // Knob classes (thumb)
+  var knobBase = cn("inline-block rounded-full bg-white shadow transform ring-0 transition-transform duration-200 ease-in-out", sizeStuff.knob, thumbClass // Accepting thumbClass as a class name
+  );
+  var knobTransform = isOn ? sizeStuff.knobTranslate : "translate-x-1";
+  var ringClass = isPreset ? isPreset.ring : "focus-visible:ring-primary-300";
+  var focusClasses = disabled ? "" : "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ".concat(ringClass);
+  var trackStyle = isOn && !trackClass && !isPreset ? {
+    backgroundColor: color
+  } : undefined; // Fallback to default trackClass if trackClass is not a class
+  var accessibleLabel = ariaLabel || rightLabel || leftLabel || topLabel || bottomLabel || "Toggle";
+  var containerIsColumn = Boolean(topLabel || bottomLabel);
+  var containerClass = cn(containerIsColumn ? "flex flex-col" : "inline-flex items-center", "gap-2", className);
+  var labelOpacityClass = disabled ? "opacity-50" : "";
+  return jsxs("div", {
+    className: containerClass,
+    children: [topLabel ? jsx("label", {
+      htmlFor: switchId,
+      className: labelOpacityClass,
+      children: topLabel
+    }) : null, jsxs("div", {
+      className: "inline-flex items-center gap-2",
+      children: [leftLabel ? jsx("label", {
+        htmlFor: switchId,
+        className: labelOpacityClass,
+        children: leftLabel
+      }) : null, jsxs("button", _objectSpread2(_objectSpread2({
+        ref: ref,
+        id: switchId,
+        type: "button",
+        role: "switch",
+        "aria-checked": isOn,
+        "aria-label": accessibleLabel,
+        "aria-disabled": disabled || undefined,
+        disabled: disabled,
+        tabIndex: disabled ? -1 : 0,
+        className: cn(trackClasses, focusClasses),
+        onClick: toggle,
+        onKeyDown: handleKeyDown,
+        style: trackStyle
+      }, rest), {}, {
+        children: [jsx("span", {
+          className: "sr-only",
+          children: accessibleLabel
+        }), jsx("span", {
+          "aria-hidden": "true",
+          className: cn(knobBase, knobTransform)
+        })]
+      })), rightLabel ? jsx("label", {
+        htmlFor: switchId,
+        className: labelOpacityClass,
+        children: rightLabel
+      }) : null]
+    }), bottomLabel ? jsx("label", {
+      htmlFor: switchId,
+      className: labelOpacityClass,
+      children: bottomLabel
+    }) : null, name ? jsx("input", {
+      type: "checkbox",
+      name: name,
+      readOnly: true,
+      "aria-hidden": true,
+      tabIndex: -1,
+      value: isOn ? "on" : "off",
+      checked: isOn,
+      onChange: function onChange() {},
+      className: "hidden"
+    }) : null]
+  });
+});
+Switch.displayName = "Switch";
+
+export { Switch as default };