@dreamtree-org/twreact-ui 1.3.11 → 2.0.1

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

@@ -0,0 +1,311 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useState, useRef, useId, useCallback } from 'react';
+import { Search, X } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import { setRefs } from '../../utils/position.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import { usePresentation } from '../../hooks/usePresentation.js';
+import { useClickOutside } from '../../hooks/useClickOutside.js';
+import Sheet from '../feedback/Sheet.js';
+
+var _excluded = ["value", "defaultValue", "onChange", "onValueChange", "onSearch", "onCancel", "onClear", "placeholder", "cancelLabel", "clearLabel", "showCancel", "presentation", "results", "renderResults", "resultsOpen", "onResultsOpenChange", "resultsLabel", "disabled", "readOnly", "className", "inputClassName", "style", "onFocus", "onBlur", "onKeyDown", "onClick", "aria-label"];
+// iOS-style search field (DTUI-58): leading icon, clear button, a "Cancel"
+// text button on phones while focused, and an optional results surface that
+// is a full-height Sheet on phones and a popover beneath the field elsewhere.
+var INPUT_CLASSES = cn("h-10 w-full min-w-0 appearance-none rounded-control border border-line bg-background pl-9 pr-9 text-sm text-foreground", "placeholder:text-muted [@media(pointer:coarse)]:h-11 [@media(pointer:coarse)]:pr-12", "transition-colors duration-fast ease-standard motion-reduce:transition-none", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", "disabled:cursor-not-allowed disabled:opacity-50",
+// The native WebKit clear (x) would duplicate ours.
+"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none");
+var CLEAR_BUTTON_CLASSES = cn("absolute right-1 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-pill text-muted", "hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET);
+var CANCEL_BUTTON_CLASSES = cn("inline-flex shrink-0 items-center rounded-control px-2 text-sm font-medium text-primary-600 dark:text-primary-400", "hover:text-primary-700 dark:hover:text-primary-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", "min-h-10 [@media(pointer:coarse)]:min-h-11");
+var RESULTS_POPOVER_CLASSES = cn("absolute inset-x-0 top-full z-popover mt-1 max-h-80 overflow-y-auto overscroll-contain", "rounded-control border border-line bg-surface text-foreground shadow-overlay");
+// Keeps focus in the input when a button inside the field is pressed, so a
+// blur does not hide the Cancel button before its click lands.
+var keepFocus = function keepFocus(e) {
+  return e.preventDefault();
+};
+var isEmptyNode = function isEmptyNode(node) {
+  return node === undefined || node === null || node === false;
+};
+/**
+ * SearchField — `type="search"` input with iOS conventions.
+ *
+ * `ref` and unknown props go to the `<input>`; `className` styles the root.
+ */
+var SearchField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var valueProp = _ref.value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
+    onChange = _ref.onChange,
+    onValueChange = _ref.onValueChange,
+    onSearch = _ref.onSearch,
+    onCancel = _ref.onCancel,
+    onClear = _ref.onClear,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "Search" : _ref$placeholder,
+    _ref$cancelLabel = _ref.cancelLabel,
+    cancelLabel = _ref$cancelLabel === void 0 ? "Cancel" : _ref$cancelLabel,
+    _ref$clearLabel = _ref.clearLabel,
+    clearLabel = _ref$clearLabel === void 0 ? "Clear search" : _ref$clearLabel,
+    _ref$showCancel = _ref.showCancel,
+    showCancel = _ref$showCancel === void 0 ? "auto" : _ref$showCancel,
+    _ref$presentation = _ref.presentation,
+    presentation = _ref$presentation === void 0 ? "auto" : _ref$presentation,
+    results = _ref.results,
+    renderResults = _ref.renderResults,
+    resultsOpen = _ref.resultsOpen,
+    onResultsOpenChange = _ref.onResultsOpenChange,
+    _ref$resultsLabel = _ref.resultsLabel,
+    resultsLabel = _ref$resultsLabel === void 0 ? "Search results" : _ref$resultsLabel,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    className = _ref.className,
+    inputClassName = _ref.inputClassName,
+    style = _ref.style,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onKeyDown = _ref.onKeyDown,
+    onClick = _ref.onClick,
+    ariaLabel = _ref["aria-label"],
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useControllableState = useControllableState({
+      value: valueProp,
+      defaultValue: defaultValue,
+      onChange: onValueChange
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    value = _useControllableState2[0],
+    setValue = _useControllableState2[1];
+  var text = value == null ? "" : String(value);
+  var _useControllableState3 = useControllableState({
+      value: resultsOpen,
+      defaultValue: false,
+      onChange: onResultsOpenChange
+    }),
+    _useControllableState4 = _slicedToArray(_useControllableState3, 2),
+    open = _useControllableState4[0],
+    setOpen = _useControllableState4[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focused = _useState2[0],
+    setFocused = _useState2[1];
+  var mode = usePresentation(presentation);
+  var isPhone = mode === "sheet";
+  var hasResultsSlot = results !== undefined || typeof renderResults === "function";
+  var sheetMode = isPhone && hasResultsSlot;
+  var rootRef = useRef(null);
+  var inputRef = useRef(null);
+  var sheetInputRef = useRef(null);
+  // Set by Cancel inside the sheet: the focus the Sheet restores to the
+  // inline field is dropped, like iOS dismissing search.
+  var blurOnRestoreRef = useRef(false);
+  var resultsId = "search-results-".concat(useId());
+  var inputCallbackRef = useCallback(function (node) {
+    return setRefs(node, inputRef, ref);
+  }, [ref]);
+  var close = useCallback(function () {
+    if (open) setOpen(false);
+  }, [open, setOpen]);
+  var content = !hasResultsSlot ? null : typeof renderResults === "function" ? renderResults({
+    value: text,
+    close: close
+  }) : results;
+  var popoverOpen = !sheetMode && hasResultsSlot && Boolean(open) && !isEmptyNode(content);
+  var sheetOpen = sheetMode && Boolean(open);
+  useClickOutside(rootRef, function () {
+    return setOpen(false);
+  }, {
+    enabled: popoverOpen
+  });
+  var emitChange = function emitChange(next, event) {
+    setValue(next);
+    if (event) onChange === null || onChange === void 0 || onChange(event);else onChange === null || onChange === void 0 || onChange({
+      target: {
+        value: next
+      },
+      currentTarget: {
+        value: next
+      }
+    });
+  };
+  var handleChange = function handleChange(e) {
+    emitChange(e.target.value, e);
+    if (hasResultsSlot && !open) setOpen(true);
+  };
+  var handleClear = function handleClear(target) {
+    var _target$current, _target$current$focus;
+    emitChange("");
+    onClear === null || onClear === void 0 || onClear();
+    target === null || target === void 0 || (_target$current = target.current) === null || _target$current === void 0 || (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 || _target$current$focus.call(_target$current);
+  };
+  var handleCancel = function handleCancel(fromSheet) {
+    if (text !== "") emitChange("");
+    if (open) setOpen(false);
+    if (fromSheet) {
+      // Only the restore that follows this close; never a later, real focus.
+      blurOnRestoreRef.current = true;
+      setTimeout(function () {
+        blurOnRestoreRef.current = false;
+      }, 300);
+    } else {
+      var _inputRef$current, _inputRef$current$blu;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current$blu = _inputRef$current.blur) === null || _inputRef$current$blu === void 0 || _inputRef$current$blu.call(_inputRef$current);
+    }
+    setFocused(false);
+    onCancel === null || onCancel === void 0 || onCancel();
+  };
+  var handleKeyDown = function handleKeyDown(e, inSheet) {
+    var _e$nativeEvent;
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "Enter" && !((_e$nativeEvent = e.nativeEvent) !== null && _e$nativeEvent !== void 0 && _e$nativeEvent.isComposing)) {
+      onSearch === null || onSearch === void 0 || onSearch(text);
+    } else if (e.key === "Escape" && !inSheet) {
+      if (popoverOpen) {
+        e.stopPropagation();
+        setOpen(false);
+      } else if (text !== "") {
+        e.stopPropagation();
+        emitChange("");
+        onClear === null || onClear === void 0 || onClear();
+      }
+    }
+  };
+  var handleFocus = function handleFocus(e) {
+    if (blurOnRestoreRef.current) {
+      var _e$target$blur, _e$target;
+      blurOnRestoreRef.current = false;
+      (_e$target$blur = (_e$target = e.target).blur) === null || _e$target$blur === void 0 || _e$target$blur.call(_e$target);
+      return;
+    }
+    setFocused(true);
+    onFocus === null || onFocus === void 0 || onFocus(e);
+    if (hasResultsSlot && !sheetMode && !open) setOpen(true);
+  };
+  var handleBlur = function handleBlur(e) {
+    setFocused(false);
+    onBlur === null || onBlur === void 0 || onBlur(e);
+    // Tabbing out closes the popover; a press on non-focusable results
+    // content (relatedTarget null) is handled by the outside-press check.
+    var next = e.relatedTarget;
+    if (popoverOpen && next && rootRef.current && !rootRef.current.contains(next)) setOpen(false);
+  };
+  var handleClick = function handleClick(e) {
+    onClick === null || onClick === void 0 || onClick(e);
+    if (sheetMode && !disabled && !readOnly && !open) setOpen(true);
+  };
+  var cancelVisible = !disabled && (showCancel === true || showCancel === "auto" && isPhone && focused);
+  var renderRow = function renderRow(_ref2) {
+    var inputProps = _ref2.inputProps,
+      inSheet = _ref2.inSheet;
+    return jsxs(Fragment, {
+      children: [jsxs("div", {
+        className: "relative min-w-0 flex-1",
+        children: [jsx(Search, {
+          className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted",
+          "aria-hidden": "true"
+        }), inputProps, text !== "" && !disabled && !readOnly && jsx("button", {
+          type: "button",
+          className: CLEAR_BUTTON_CLASSES,
+          "aria-label": clearLabel,
+          onMouseDown: keepFocus,
+          onClick: function onClick() {
+            return handleClear(inSheet ? sheetInputRef : inputRef);
+          },
+          "data-search-clear": "",
+          children: jsx(X, {
+            className: "h-4 w-4",
+            "aria-hidden": "true"
+          })
+        })]
+      }), (inSheet || cancelVisible) && jsx("button", {
+        type: "button",
+        className: CANCEL_BUTTON_CLASSES,
+        onMouseDown: keepFocus,
+        onClick: function onClick() {
+          return handleCancel(inSheet);
+        },
+        "data-search-cancel": "",
+        children: cancelLabel
+      })]
+    });
+  };
+  var sharedInputProps = {
+    type: "search",
+    enterKeyHint: "search",
+    inputMode: "search",
+    autoComplete: "off",
+    placeholder: placeholder,
+    disabled: disabled,
+    readOnly: readOnly,
+    value: text,
+    onChange: handleChange,
+    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : rest["aria-labelledby"] ? undefined : placeholder || "Search"
+  };
+  var inlineInput = jsx("input", _objectSpread2(_objectSpread2(_objectSpread2({
+    ref: inputCallbackRef
+  }, sharedInputProps), {}, {
+    "aria-controls": popoverOpen ? resultsId : undefined,
+    onKeyDown: function onKeyDown(e) {
+      return handleKeyDown(e, false);
+    },
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onClick: handleClick
+  }, rest), {}, {
+    className: cn(INPUT_CLASSES, inputClassName)
+  }));
+  return jsxs("div", {
+    ref: rootRef,
+    className: cn("relative flex w-full items-center gap-2", className),
+    style: style,
+    "data-search-field": "",
+    children: [renderRow({
+      inputProps: inlineInput,
+      inSheet: false
+    }), popoverOpen && jsx("div", {
+      id: resultsId,
+      role: "region",
+      "aria-label": resultsLabel,
+      className: RESULTS_POPOVER_CLASSES,
+      children: content
+    }), sheetMode && jsxs(Sheet, {
+      open: sheetOpen,
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      handle: false,
+      initialFocus: sheetInputRef,
+      "aria-label": resultsLabel,
+      className: "h-[calc(100dvh-env(safe-area-inset-top)-1rem)]",
+      "data-search-sheet": "",
+      children: [jsx("div", {
+        className: "flex shrink-0 items-center gap-2 border-b border-line px-4 py-3",
+        children: renderRow({
+          inSheet: true,
+          inputProps: jsx("input", _objectSpread2(_objectSpread2({
+            ref: sheetInputRef
+          }, sharedInputProps), {}, {
+            "aria-controls": resultsId,
+            onKeyDown: function onKeyDown(e) {
+              return handleKeyDown(e, true);
+            },
+            className: cn(INPUT_CLASSES, inputClassName)
+          }))
+        })
+      }), jsx(Sheet.Body, {
+        id: resultsId,
+        role: "region",
+        "aria-label": resultsLabel,
+        children: content
+      })]
+    })]
+  });
+});
+SearchField.displayName = "SearchField";
+
+export { SearchField as default };

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

@@ -0,0 +1,189 @@
+'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, useLayoutEffect, useEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+import { setRefs } from '../../utils/position.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import { PRESS_FEEDBACK, TOUCH_TARGET } from '../../utils/touchTarget.js';
+
+var _excluded = ["options", "value", "defaultValue", "onChange", "size", "fullWidth", "name", "disabled", "className"];
+// useLayoutEffect warns during SSR; fall back to useEffect on the server.
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+// Same padding / type scale as `Tabs` segments, so the two read as one control.
+var SIZE_CLASSES = {
+  sm: "px-2 py-1 text-sm",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-3 text-base"
+};
+// PRESS_FEEDBACK sets transition-transform; this keeps the colour transition as well.
+var TRANSITION_WITH_PRESS = "transition-[color,background-color,transform]";
+var NEXT_KEYS = {
+  ArrowRight: 1,
+  ArrowDown: 1,
+  ArrowLeft: -1,
+  ArrowUp: -1
+};
+function isRtl(el) {
+  var dirEl = el.closest("[dir]");
+  if (dirEl) return dirEl.getAttribute("dir") === "rtl";
+  return typeof window !== "undefined" && window.getComputedStyle(el).direction === "rtl";
+}
+// Next enabled index from `from` in `step` direction, wrapping; -1 when none.
+function findEnabled(options, from, step) {
+  var len = options.length;
+  for (var i = 1; i <= len; i += 1) {
+    var idx = ((from + step * i) % len + len) % len;
+    if (!options[idx].disabled) return idx;
+  }
+  return -1;
+}
+/**
+ * SegmentedControl: a radiogroup view toggle (iOS segmented control).
+ * Use `Tabs variant="segmented"` instead when the choice switches panels.
+ */
+var SegmentedControl = /*#__PURE__*/forwardRef(function SegmentedControl(_ref, _ref2) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    valueProp = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    name = _ref.name,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useControllableState = useControllableState({
+      value: valueProp,
+      defaultValue: defaultValue,
+      onChange: onChange
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    value = _useControllableState2[0],
+    setValue = _useControllableState2[1];
+  var rootRef = useRef(null);
+  var optionRefs = useRef([]);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    thumb = _useState2[0],
+    setThumb = _useState2[1];
+  var selectedIndex = options.findIndex(function (o) {
+    return o.value === value;
+  });
+  var firstEnabled = disabled ? -1 : findEnabled(options, -1, 1);
+  var selectedEnabled = selectedIndex >= 0 && !options[selectedIndex].disabled && !disabled;
+  var tabbableIndex = selectedEnabled ? selectedIndex : firstEnabled;
+  // Measure the selected option and move the thumb under it. Runs before paint,
+  // so the thumb never flashes; the CSS transition animates the slide.
+  useIsomorphicLayoutEffect(function () {
+    var root = rootRef.current;
+    var option = optionRefs.current[selectedIndex];
+    if (!root || !option) return undefined;
+    var measure = function measure() {
+      // jsdom / display:none report 0; the option keeps its own selected styling then.
+      if (!option.offsetWidth) return;
+      var next = {
+        left: option.offsetLeft,
+        top: option.offsetTop,
+        width: option.offsetWidth,
+        height: option.offsetHeight
+      };
+      setThumb(function (prev) {
+        return prev && prev.left === next.left && prev.top === next.top && prev.width === next.width && prev.height === next.height ? prev : next;
+      });
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    var ro = new ResizeObserver(measure);
+    ro.observe(root);
+    ro.observe(option);
+    return function () {
+      return ro.disconnect();
+    };
+  }, [selectedIndex, options.length, size, fullWidth]);
+  var showThumb = selectedIndex >= 0 && thumb !== null;
+  var select = function select(index) {
+    var option = options[index];
+    if (!option || option.disabled || disabled) return;
+    if (option.value !== value) setValue(option.value);
+  };
+  var _onKeyDown = function onKeyDown(event, index) {
+    var _optionRefs$current$t;
+    var key = event.key;
+    var target = -1;
+    if (key in NEXT_KEYS) {
+      var step = NEXT_KEYS[key];
+      // Horizontal arrows follow the reading direction.
+      if ((key === "ArrowLeft" || key === "ArrowRight") && isRtl(event.currentTarget)) step = -step;
+      target = findEnabled(options, index, step);
+    } else if (key === "Home") {
+      target = findEnabled(options, -1, 1);
+    } else if (key === "End") {
+      target = findEnabled(options, options.length, -1);
+    } else {
+      return;
+    }
+    event.preventDefault();
+    if (target < 0) return;
+    (_optionRefs$current$t = optionRefs.current[target]) === null || _optionRefs$current$t === void 0 || _optionRefs$current$t.focus();
+    select(target);
+  };
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: function ref(node) {
+      return setRefs(node, rootRef, _ref2);
+    },
+    role: "radiogroup",
+    "aria-disabled": disabled || undefined,
+    className: cn("relative gap-1 rounded-lg bg-line p-1", fullWidth ? "flex w-full" : "inline-flex", disabled && "cursor-not-allowed opacity-50", className)
+  }, rest), {}, {
+    children: [showThumb && jsx("span", {
+      "aria-hidden": "true",
+      "data-segmented-thumb": "",
+      className: cn("pointer-events-none absolute left-0 top-0 rounded-md bg-surface shadow-sm", "transition-[transform,width,height] duration-base ease-standard motion-reduce:transition-none"),
+      style: {
+        width: thumb.width,
+        height: thumb.height,
+        transform: "translate(".concat(thumb.left, "px, ").concat(thumb.top, "px)")
+      }
+    }), options.map(function (option, index) {
+      var checked = index === selectedIndex;
+      var optionDisabled = disabled || Boolean(option.disabled);
+      return jsxs("button", {
+        ref: function ref(node) {
+          optionRefs.current[index] = node;
+        },
+        type: "button",
+        role: "radio",
+        "aria-checked": checked,
+        tabIndex: index === tabbableIndex ? 0 : -1,
+        disabled: optionDisabled,
+        "data-state": checked ? "checked" : "unchecked",
+        onClick: function onClick() {
+          return select(index);
+        },
+        onKeyDown: function onKeyDown(event) {
+          return _onKeyDown(event, index);
+        },
+        className: cn("relative z-10 inline-flex flex-1 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium outline-none select-none", "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500", TOUCH_TARGET, PRESS_FEEDBACK, TRANSITION_WITH_PRESS, "motion-reduce:transition-none",
+        // A disabled group dims once at the root; a lone disabled option dims itself.
+        "disabled:cursor-not-allowed", option.disabled && !disabled && "opacity-50", SIZE_CLASSES[size] || SIZE_CLASSES.md, checked ? cn("text-foreground", !showThumb && "bg-surface shadow-sm") : "text-muted enabled:hover:text-foreground"),
+        children: [option.icon && jsx("span", {
+          "aria-hidden": "true",
+          className: "inline-flex shrink-0",
+          children: option.icon
+        }), option.label]
+      }, String(option.value));
+    }), name && jsx("input", {
+      type: "hidden",
+      name: name,
+      value: value !== null && value !== void 0 ? value : ""
+    })]
+  }));
+});
+SegmentedControl.displayName = "SegmentedControl";
+
+export { SegmentedControl as default };