@vesture/react 0.2.1 → 0.2.2

package/dist/index.js

@@ -2620,6 +2620,584 @@ function DateRangePicker({
   );
 }
 
+// src/components/NumberInput/NumberInput.tsx
+import { forwardRef as forwardRef14, useEffect as useEffect5, useRef as useRef6, useState as useState12 } from "react";
+import { useMergeRefs as useMergeRefs5 } from "@floating-ui/react";
+
+// src/components/NumberInput/NumberInput.css.ts
+var input2 = "NumberInput_input__1vx30yr1";
+var stepButton = "NumberInput_stepButton__1vx30yr3";
+var stepperGroup = "NumberInput_stepperGroup__1vx30yr2";
+var wrapper8 = "NumberInput_wrapper__1vx30yr0";
+
+// src/components/NumberInput/NumberInput.tsx
+import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
+function clamp(value, min, max) {
+  let result = value;
+  if (min !== void 0) result = Math.max(min, result);
+  if (max !== void 0) result = Math.min(max, result);
+  return result;
+}
+function formatValue(value) {
+  return value === null ? "" : String(value);
+}
+var NumberInput = forwardRef14(function NumberInput2({
+  value: controlledValue,
+  defaultValue = null,
+  onChange,
+  min,
+  max,
+  step = 1,
+  disabled = false,
+  invalid,
+  placeholder,
+  id,
+  name,
+  className,
+  ...rest
+}, ref) {
+  const [uncontrolledValue, setUncontrolledValue] = useState12(defaultValue);
+  const value = controlledValue !== void 0 ? controlledValue : uncontrolledValue;
+  const setValue = (next) => {
+    if (controlledValue === void 0) {
+      setUncontrolledValue(next);
+    }
+    onChange?.(next);
+  };
+  const [inputText, setInputText] = useState12(() => formatValue(value));
+  useEffect5(() => {
+    setInputText(formatValue(value));
+  }, [value]);
+  const inputRef = useRef6(null);
+  const mergedRef = useMergeRefs5([inputRef, ref]);
+  const commitTypedValue = () => {
+    const trimmed = inputText.trim();
+    if (!trimmed) {
+      if (value !== null) setValue(null);
+      return;
+    }
+    const parsed = Number(trimmed);
+    if (Number.isNaN(parsed)) {
+      setInputText(formatValue(value));
+      return;
+    }
+    const clamped = clamp(parsed, min, max);
+    setValue(clamped);
+    setInputText(formatValue(clamped));
+  };
+  const step2 = (direction2) => {
+    if (disabled) return;
+    const base2 = value ?? min ?? 0;
+    const next = clamp(base2 + direction2 * step, min, max);
+    setValue(next);
+    setInputText(formatValue(next));
+    inputRef.current?.focus();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitTypedValue();
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      step2(1);
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      step2(-1);
+      return;
+    }
+    if (event.key === "Home" && min !== void 0) {
+      event.preventDefault();
+      setValue(min);
+      setInputText(formatValue(min));
+      return;
+    }
+    if (event.key === "End" && max !== void 0) {
+      event.preventDefault();
+      setValue(max);
+      setInputText(formatValue(max));
+    }
+  };
+  const handleBlur = (_event) => {
+    commitTypedValue();
+  };
+  const classes = [wrapper8, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs21("span", { className: classes, "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsx38(
+      "input",
+      {
+        ref: mergedRef,
+        id,
+        name,
+        type: "text",
+        inputMode: "decimal",
+        className: input2,
+        value: inputText,
+        placeholder,
+        disabled,
+        role: "spinbutton",
+        "aria-valuenow": value ?? void 0,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-invalid": invalid || void 0,
+        onChange: (e) => setInputText(e.target.value),
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxs21("span", { className: stepperGroup, children: [
+      /* @__PURE__ */ jsx38(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          className: stepButton,
+          disabled: disabled || max !== void 0 && value !== null && value >= max,
+          "aria-label": "Increment",
+          onClick: () => step2(1),
+          children: /* @__PURE__ */ jsx38("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx38("path", { d: "M1 5l3-3 3 3", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx38(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          className: stepButton,
+          disabled: disabled || min !== void 0 && value !== null && value <= min,
+          "aria-label": "Decrement",
+          onClick: () => step2(-1),
+          children: /* @__PURE__ */ jsx38("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx38("path", { d: "M1 3l3 3 3-3", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        }
+      )
+    ] })
+  ] });
+});
+
+// src/components/Slider/Slider.tsx
+import { useRef as useRef7, useState as useState13 } from "react";
+
+// src/components/Slider/Slider.css.ts
+var range2 = "Slider_range__2gl56i2";
+var root3 = "Slider_root__2gl56i0";
+var thumb = "Slider_thumb__2gl56i3";
+var track3 = "Slider_track__2gl56i1";
+
+// src/components/Slider/Slider.tsx
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
+function isRange(value) {
+  return Array.isArray(value);
+}
+function clampToStep(raw, min, max, step) {
+  const stepped = Math.round((raw - min) / step) * step + min;
+  return Math.min(max, Math.max(min, Math.round(stepped * 1e6) / 1e6));
+}
+function percentOf(value, min, max) {
+  if (max === min) return 0;
+  return (value - min) / (max - min) * 100;
+}
+function Slider({
+  value: controlledValue,
+  defaultValue = 0,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  className,
+  formatValue: formatValue2 = (v) => String(v),
+  ...rest
+}) {
+  const ariaLabel = rest["aria-label"];
+  const [uncontrolledValue, setUncontrolledValue] = useState13(defaultValue);
+  const value = controlledValue !== void 0 ? controlledValue : uncontrolledValue;
+  const setValue = (next) => {
+    if (controlledValue === void 0) {
+      setUncontrolledValue(next);
+    }
+    onChange?.(next);
+  };
+  const trackRef = useRef7(null);
+  const dragThumbIndex = useRef7(null);
+  const isDragging = useRef7(false);
+  const valueFromClientX = (clientX) => {
+    const trackEl = trackRef.current;
+    if (!trackEl) return min;
+    const rect = trackEl.getBoundingClientRect();
+    const ratio = rect.width === 0 ? 0 : (clientX - rect.left) / rect.width;
+    return clampToStep(min + ratio * (max - min), min, max, step);
+  };
+  const setThumbValue = (index, raw) => {
+    if (index === null) {
+      setValue(clampToStep(raw, min, max, step));
+      return;
+    }
+    if (!isRange(value)) return;
+    const [start, end] = value;
+    if (index === 0) {
+      setValue([Math.min(raw, end), end]);
+    } else {
+      setValue([start, Math.max(raw, start)]);
+    }
+  };
+  const handlePointerMove = (event) => {
+    if (!isDragging.current) return;
+    setThumbValue(dragThumbIndex.current, valueFromClientX(event.clientX));
+  };
+  const handlePointerUp = () => {
+    isDragging.current = false;
+    dragThumbIndex.current = null;
+    window.removeEventListener("pointermove", handlePointerMove);
+    window.removeEventListener("pointerup", handlePointerUp);
+  };
+  const startDrag = (index) => (event) => {
+    if (disabled) return;
+    event.preventDefault();
+    isDragging.current = true;
+    dragThumbIndex.current = index;
+    setThumbValue(index, valueFromClientX(event.clientX));
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+  };
+  const handleTrackPointerDown = (event) => {
+    if (disabled) return;
+    if (!isRange(value)) {
+      startDrag(null)(event);
+      return;
+    }
+    const target = valueFromClientX(event.clientX);
+    const [start, end] = value;
+    const nearestIndex = Math.abs(target - start) <= Math.abs(target - end) ? 0 : 1;
+    startDrag(nearestIndex)(event);
+  };
+  const handleThumbKeyDown = (index) => (event) => {
+    if (disabled) return;
+    const current2 = index === null ? value : value[index];
+    let next = null;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = clampToStep(current2 + step, min, max, step);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = clampToStep(current2 - step, min, max, step);
+        break;
+      case "Home":
+        next = min;
+        break;
+      case "End":
+        next = max;
+        break;
+      case "PageUp":
+        next = clampToStep(current2 + step * 10, min, max, step);
+        break;
+      case "PageDown":
+        next = clampToStep(current2 - step * 10, min, max, step);
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    setThumbValue(index, next);
+  };
+  const renderThumb = (index, current2, label3) => /* @__PURE__ */ jsx39(
+    "span",
+    {
+      role: "slider",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": label3,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": current2,
+      "aria-valuetext": formatValue2(current2),
+      "aria-disabled": disabled || void 0,
+      className: thumb,
+      style: { left: `${percentOf(current2, min, max)}%` },
+      onPointerDown: (event) => {
+        event.stopPropagation();
+        startDrag(index)(event);
+      },
+      onKeyDown: handleThumbKeyDown(index)
+    },
+    index ?? "single"
+  );
+  const classes = [root3, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx39("span", { className: classes, "data-disabled": disabled || void 0, children: /* @__PURE__ */ jsxs22("span", { ref: trackRef, className: track3, onPointerDown: handleTrackPointerDown, children: [
+    isRange(value) ? /* @__PURE__ */ jsx39(
+      "span",
+      {
+        className: range2,
+        style: {
+          left: `${percentOf(value[0], min, max)}%`,
+          right: `${100 - percentOf(value[1], min, max)}%`
+        }
+      }
+    ) : /* @__PURE__ */ jsx39("span", { className: range2, style: { left: 0, right: `${100 - percentOf(value, min, max)}%` } }),
+    isRange(value) ? [
+      renderThumb(0, value[0], Array.isArray(ariaLabel) ? ariaLabel[0] : ariaLabel),
+      renderThumb(1, value[1], Array.isArray(ariaLabel) ? ariaLabel[1] : ariaLabel)
+    ] : renderThumb(null, value, typeof ariaLabel === "string" ? ariaLabel : void 0)
+  ] }) });
+}
+
+// src/components/Combobox/Combobox.tsx
+import { useEffect as useEffect6, useId as useId2, useRef as useRef8, useState as useState14 } from "react";
+import {
+  FloatingPortal as FloatingPortal7,
+  autoUpdate as autoUpdate6,
+  flip as flip6,
+  offset as offset6,
+  shift as shift6,
+  useDismiss as useDismiss7,
+  useFloating as useFloating7,
+  useInteractions as useInteractions7,
+  useRole as useRole7
+} from "@floating-ui/react";
+
+// src/components/Combobox/Combobox.css.ts
+var chip = "Combobox_chip__26nhic2";
+var chipRemove = "Combobox_chipRemove__26nhic3";
+var chipsWrapper = "Combobox_chipsWrapper__26nhic1";
+var emptyState2 = "Combobox_emptyState__26nhic7";
+var inputEl = "Combobox_inputEl__26nhic4";
+var listbox = "Combobox_listbox__26nhic5";
+var option = "Combobox_option__26nhic6";
+var wrapper9 = "Combobox_wrapper__26nhic0";
+
+// src/components/Combobox/Combobox.tsx
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+function defaultFilter(options, inputText) {
+  const query = inputText.trim().toLowerCase();
+  if (!query) return options;
+  return options.filter((opt) => opt.label.toLowerCase().includes(query));
+}
+function labelFor(options, value) {
+  if (!value) return "";
+  return options.find((opt) => opt.value === value)?.label ?? "";
+}
+function Combobox({
+  options,
+  multiple = false,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  onInputChange,
+  filterOptions = defaultFilter,
+  placeholder,
+  noOptionsMessage = "No options",
+  disabled = false,
+  invalid,
+  loading = false,
+  id,
+  className,
+  ...rest
+}) {
+  const fallbackDefault = multiple ? [] : null;
+  const [uncontrolledValue, setUncontrolledValue] = useState14(
+    defaultValue !== void 0 ? defaultValue : fallbackDefault
+  );
+  const value = controlledValue !== void 0 ? controlledValue : uncontrolledValue;
+  const setValue = (next) => {
+    if (controlledValue === void 0) {
+      setUncontrolledValue(next);
+    }
+    onChange?.(next);
+  };
+  const selectedValues = multiple ? value ?? [] : [];
+  const singleValue = multiple ? null : value;
+  const [open, setOpen] = useState14(false);
+  const [inputText, setInputText] = useState14(() => multiple ? "" : labelFor(options, singleValue));
+  const [activeIndex, setActiveIndex] = useState14(null);
+  useEffect6(() => {
+    if (!multiple) {
+      setInputText(labelFor(options, singleValue));
+    }
+  }, [singleValue, multiple]);
+  const inputRef = useRef8(null);
+  const listboxId = useId2();
+  const filteredOptions = filterOptions(options, multiple ? inputText : open ? inputText : "");
+  const { refs, floatingStyles, context } = useFloating7({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate6,
+    middleware: [offset6(4), flip6(), shift6({ padding: 8 })]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions7([
+    useDismiss7(context),
+    useRole7(context, { role: "listbox" })
+  ]);
+  const openList = () => {
+    if (disabled) return;
+    setOpen(true);
+    setActiveIndex(null);
+  };
+  const closeList = () => {
+    setOpen(false);
+    setActiveIndex(null);
+  };
+  const selectOption = (opt) => {
+    if (opt.disabled) return;
+    if (multiple) {
+      const next = selectedValues.includes(opt.value) ? selectedValues.filter((v) => v !== opt.value) : [...selectedValues, opt.value];
+      setValue(next);
+      setInputText("");
+      onInputChange?.("");
+      inputRef.current?.focus();
+      return;
+    }
+    setValue(opt.value);
+    setInputText(opt.label);
+    closeList();
+  };
+  const removeChip = (optionValue) => {
+    setValue(selectedValues.filter((v) => v !== optionValue));
+    inputRef.current?.focus();
+  };
+  const handleInputChange = (text) => {
+    setInputText(text);
+    onInputChange?.(text);
+    setOpen(true);
+    setActiveIndex(null);
+  };
+  const moveActiveIndex = (direction2) => {
+    if (filteredOptions.length === 0) return;
+    let next = activeIndex ?? (direction2 === 1 ? -1 : filteredOptions.length);
+    for (let step = 0; step < filteredOptions.length; step++) {
+      next = (next + direction2 + filteredOptions.length) % filteredOptions.length;
+      if (!filteredOptions[next]?.disabled) {
+        setActiveIndex(next);
+        return;
+      }
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) {
+          openList();
+        } else {
+          moveActiveIndex(1);
+        }
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        if (open) moveActiveIndex(-1);
+        return;
+      case "Enter": {
+        if (!open) return;
+        event.preventDefault();
+        const active = activeIndex !== null ? filteredOptions[activeIndex] : void 0;
+        if (active) selectOption(active);
+        return;
+      }
+      case "Escape":
+        if (open) {
+          event.preventDefault();
+          closeList();
+          if (!multiple) setInputText(labelFor(options, singleValue));
+        }
+        return;
+      case "Backspace":
+        if (multiple && inputText === "" && selectedValues.length > 0) {
+          removeChip(selectedValues[selectedValues.length - 1]);
+        }
+        return;
+      default:
+    }
+  };
+  const handleBlur = () => {
+    if (!multiple) {
+      setInputText(labelFor(options, singleValue));
+    }
+    closeList();
+  };
+  const classes = [wrapper9, className].filter(Boolean).join(" ");
+  const activeOptionId = activeIndex !== null ? `${listboxId}-option-${activeIndex}` : void 0;
+  return /* @__PURE__ */ jsxs23("span", { className: classes, ref: refs.setReference, "data-disabled": disabled || void 0, children: [
+    multiple && selectedValues.length > 0 ? /* @__PURE__ */ jsx40("span", { className: chipsWrapper, children: selectedValues.map((val) => /* @__PURE__ */ jsxs23("span", { className: chip, children: [
+      labelFor(options, val),
+      /* @__PURE__ */ jsx40(
+        "button",
+        {
+          type: "button",
+          className: chipRemove,
+          "aria-label": `Remove ${labelFor(options, val)}`,
+          disabled,
+          onClick: () => removeChip(val),
+          children: "\xD7"
+        }
+      )
+    ] }, val)) }) : null,
+    /* @__PURE__ */ jsx40(
+      "input",
+      {
+        ref: inputRef,
+        id,
+        type: "text",
+        role: "combobox",
+        className: inputEl,
+        value: inputText,
+        placeholder,
+        disabled,
+        autoComplete: "off",
+        "aria-autocomplete": "list",
+        "aria-expanded": open,
+        "aria-controls": listboxId,
+        "aria-invalid": invalid || void 0,
+        "aria-activedescendant": activeOptionId,
+        ...getReferenceProps({
+          ...rest,
+          onFocus: openList,
+          onBlur: handleBlur,
+          onChange: (e) => handleInputChange(e.target.value),
+          onKeyDown: handleKeyDown
+        })
+      }
+    ),
+    open ? /* @__PURE__ */ jsx40(FloatingPortal7, { children: /* @__PURE__ */ jsx40(
+      "div",
+      {
+        ref: refs.setFloating,
+        id: listboxId,
+        role: "listbox",
+        "aria-multiselectable": multiple || void 0,
+        className: listbox,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        children: loading ? /* @__PURE__ */ jsx40("div", { className: emptyState2, children: "Loading\u2026" }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx40("div", { className: emptyState2, children: noOptionsMessage }) : filteredOptions.map((opt, index) => {
+          const isSelected = multiple ? selectedValues.includes(opt.value) : opt.value === singleValue;
+          return /* @__PURE__ */ jsx40(
+            "div",
+            {
+              id: `${listboxId}-option-${index}`,
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": opt.disabled || void 0,
+              "data-active": activeIndex === index || void 0,
+              className: option,
+              onMouseDown: (event) => {
+                event.preventDefault();
+                selectOption(opt);
+              },
+              onMouseEnter: () => setActiveIndex(index),
+              children: opt.label
+            },
+            opt.value
+          );
+        })
+      }
+    ) }) : null
+  ] });
+}
+
 // src/index.ts
 import { vars as vars2, defaultThemeClass, defaultThemeVars } from "@vesture/tokens";
 export {
@@ -2636,6 +3214,7 @@ export {
   Calendar,
   Card,
   Checkbox,
+  Combobox,
   DataGrid,
   DatePicker,
   DateRangePicker,
@@ -2645,11 +3224,13 @@ export {
   Input,
   Label,
   Modal,
+  NumberInput,
   Pagination,
   Popover,
   Progress,
   Radio,
   Select,
+  Slider,
   Spinner,
   Stack,
   Switch,