@choice-ui/react 1.7.6 → 1.7.7

package/dist/components/toggle-button/dist/index.js

@@ -0,0 +1,602 @@
+import { Tooltip } from "../../tooltip/dist/index.js";
+import { forwardRef, useId, createContext, memo, useState, useMemo, useRef, useCallback, useContext, useLayoutEffect, useEffect } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  __defProp(target, "default", { value: mod, enumerable: true }),
+  mod
+));
+var require_lodash = __commonJS({
+  "../../../../../node_modules/.pnpm/lodash.debounce@4.0.8/node_modules/lodash.debounce/index.js"(exports$1, module) {
+    var FUNC_ERROR_TEXT = "Expected a function";
+    var NAN = 0 / 0;
+    var symbolTag = "[object Symbol]";
+    var reTrim = /^\s+|\s+$/g;
+    var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+    var reIsBinary = /^0b[01]+$/i;
+    var reIsOctal = /^0o[0-7]+$/i;
+    var freeParseInt = parseInt;
+    var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
+    var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+    var root = freeGlobal || freeSelf || Function("return this")();
+    var objectProto = Object.prototype;
+    var objectToString = objectProto.toString;
+    var nativeMax = Math.max;
+    var nativeMin = Math.min;
+    var now = function() {
+      return root.Date.now();
+    };
+    function debounce2(func, wait, options) {
+      var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+      if (typeof func != "function") {
+        throw new TypeError(FUNC_ERROR_TEXT);
+      }
+      wait = toNumber(wait) || 0;
+      if (isObject(options)) {
+        leading = !!options.leading;
+        maxing = "maxWait" in options;
+        maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+        trailing = "trailing" in options ? !!options.trailing : trailing;
+      }
+      function invokeFunc(time) {
+        var args = lastArgs, thisArg = lastThis;
+        lastArgs = lastThis = void 0;
+        lastInvokeTime = time;
+        result = func.apply(thisArg, args);
+        return result;
+      }
+      function leadingEdge(time) {
+        lastInvokeTime = time;
+        timerId = setTimeout(timerExpired, wait);
+        return leading ? invokeFunc(time) : result;
+      }
+      function remainingWait(time) {
+        var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, result2 = wait - timeSinceLastCall;
+        return maxing ? nativeMin(result2, maxWait - timeSinceLastInvoke) : result2;
+      }
+      function shouldInvoke(time) {
+        var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
+        return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+      }
+      function timerExpired() {
+        var time = now();
+        if (shouldInvoke(time)) {
+          return trailingEdge(time);
+        }
+        timerId = setTimeout(timerExpired, remainingWait(time));
+      }
+      function trailingEdge(time) {
+        timerId = void 0;
+        if (trailing && lastArgs) {
+          return invokeFunc(time);
+        }
+        lastArgs = lastThis = void 0;
+        return result;
+      }
+      function cancel() {
+        if (timerId !== void 0) {
+          clearTimeout(timerId);
+        }
+        lastInvokeTime = 0;
+        lastArgs = lastCallTime = lastThis = timerId = void 0;
+      }
+      function flush() {
+        return timerId === void 0 ? result : trailingEdge(now());
+      }
+      function debounced() {
+        var time = now(), isInvoking = shouldInvoke(time);
+        lastArgs = arguments;
+        lastThis = this;
+        lastCallTime = time;
+        if (isInvoking) {
+          if (timerId === void 0) {
+            return leadingEdge(lastCallTime);
+          }
+          if (maxing) {
+            timerId = setTimeout(timerExpired, wait);
+            return invokeFunc(lastCallTime);
+          }
+        }
+        if (timerId === void 0) {
+          timerId = setTimeout(timerExpired, wait);
+        }
+        return result;
+      }
+      debounced.cancel = cancel;
+      debounced.flush = flush;
+      return debounced;
+    }
+    function isObject(value) {
+      var type = typeof value;
+      return !!value && (type == "object" || type == "function");
+    }
+    function isObjectLike(value) {
+      return !!value && typeof value == "object";
+    }
+    function isSymbol(value) {
+      return typeof value == "symbol" || isObjectLike(value) && objectToString.call(value) == symbolTag;
+    }
+    function toNumber(value) {
+      if (typeof value == "number") {
+        return value;
+      }
+      if (isSymbol(value)) {
+        return NAN;
+      }
+      if (isObject(value)) {
+        var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+        value = isObject(other) ? other + "" : other;
+      }
+      if (typeof value != "string") {
+        return value === 0 ? value : +value;
+      }
+      value = value.replace(reTrim, "");
+      var isBinary = reIsBinary.test(value);
+      return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+    }
+    module.exports = debounce2;
+  }
+});
+var toggleButtonTv = tcv({
+  slots: {
+    root: ["relative rounded-md"],
+    input: ["absolute inset-0 h-full w-full", "peer pointer-events-auto appearance-none opacity-0"],
+    label: [
+      "absolute inset-0 flex h-full w-full rounded-[inherit]",
+      "items-center justify-center select-none",
+      "border border-solid border-transparent",
+      "peer-focus-visible:border-selected-boundary"
+    ]
+  },
+  variants: {
+    variant: {
+      default: {},
+      secondary: {},
+      highlight: {},
+      reset: {}
+    },
+    size: {
+      default: { root: "h-6 w-6" },
+      large: { root: "h-8 w-8" }
+    },
+    checked: {
+      true: {},
+      false: {}
+    },
+    disabled: {
+      true: {
+        root: "text-secondary-foreground"
+      },
+      false: {}
+    },
+    active: {
+      true: {},
+      false: {}
+    },
+    focused: {
+      true: { label: "border-selected-boundary" },
+      false: {}
+    },
+    event: {
+      click: {},
+      mousedown: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: ["default", "highlight"],
+      active: false,
+      disabled: false,
+      class: {
+        root: "hover:bg-secondary-background"
+      }
+    },
+    {
+      variant: "default",
+      active: false,
+      event: "click",
+      disabled: false,
+      class: {
+        root: "active:bg-tertiary-background"
+      }
+    },
+    {
+      variant: ["highlight", "secondary"],
+      active: false,
+      checked: false,
+      disabled: false,
+      event: "click",
+      class: {
+        root: "active:bg-tertiary-background"
+      }
+    },
+    {
+      variant: ["highlight", "secondary"],
+      active: false,
+      checked: true,
+      disabled: false,
+      event: "click",
+      class: {
+        root: "active:bg-accent-background/10"
+      }
+    },
+    {
+      variant: ["default", "highlight"],
+      active: true,
+      disabled: false,
+      class: {
+        root: "bg-tertiary-background"
+      }
+    },
+    {
+      variant: "secondary",
+      checked: false,
+      focused: false,
+      disabled: false,
+      class: {
+        label: "border-default-boundary hover:bg-secondary-background"
+      }
+    },
+    {
+      variant: "secondary",
+      active: true,
+      disabled: false,
+      checked: false,
+      class: {
+        root: "bg-secondary-background"
+      }
+    },
+    {
+      variant: ["highlight", "secondary"],
+      active: true,
+      disabled: false,
+      checked: true,
+      class: {
+        root: "bg-accent-background/10 text-accent-foreground"
+      }
+    },
+    {
+      variant: ["highlight", "secondary"],
+      checked: true,
+      disabled: false,
+      active: false,
+      class: {
+        root: "bg-accent-background/10 text-accent-foreground hover:bg-accent-background/5"
+      }
+    },
+    {
+      variant: ["highlight", "secondary"],
+      checked: true,
+      disabled: true,
+      class: {
+        root: "bg-tertiary-background"
+      }
+    }
+  ],
+  defaultVariants: {
+    checked: false,
+    disabled: false,
+    variant: "default",
+    size: "default",
+    event: "click",
+    active: false,
+    focused: false
+  }
+});
+var toggleGroupTv = tcv({
+  slots: {
+    root: ["flex gap-1"]
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "flex-row"
+      },
+      vertical: {
+        root: "flex-col"
+      }
+    },
+    disabled: {
+      true: {
+        root: "opacity-50 pointer-events-none"
+      },
+      false: {}
+    },
+    multiple: {
+      true: {},
+      false: {}
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    disabled: false,
+    multiple: false
+  }
+});
+var ToggleButton = forwardRef(
+  function ToggleButton2(props, ref) {
+    const {
+      className,
+      variant = "default",
+      size = "default",
+      children,
+      disabled,
+      readOnly = false,
+      active,
+      focused,
+      value,
+      tooltip,
+      event = "click",
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedby,
+      onChange,
+      onMouseDown,
+      onContextMenu,
+      ...rest
+    } = props;
+    const id = useId();
+    const descriptionId = useId();
+    const tv = toggleButtonTv({
+      checked: value,
+      disabled,
+      variant,
+      active,
+      focused,
+      event,
+      size
+    });
+    const button = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: tcx(tv.root(), className),
+        role: "presentation",
+        onContextMenu,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: value ? "Enabled" : "Disabled" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id,
+              className: tv.input(),
+              tabIndex: 0,
+              type: "checkbox",
+              checked: value,
+              disabled: disabled || readOnly,
+              onChange: (e) => {
+                if (!readOnly) {
+                  onChange == null ? void 0 : onChange(e.target.checked);
+                }
+              },
+              "aria-checked": value,
+              "aria-disabled": disabled || readOnly,
+              "aria-label": ariaLabel || (typeof children === "string" ? children : void 0),
+              "aria-describedby": ariaDescribedby || (children ? descriptionId : void 0),
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: id,
+              id: descriptionId,
+              className: tv.label(),
+              onMouseDown: (e) => {
+                if (readOnly) return;
+                if (event === "mousedown") {
+                  e.preventDefault();
+                  onMouseDown == null ? void 0 : onMouseDown(e);
+                  if (!disabled) {
+                    onChange == null ? void 0 : onChange(!value);
+                  }
+                  const clickHandler = (e2) => {
+                    e2.preventDefault();
+                    e2.stopPropagation();
+                    document.removeEventListener("click", clickHandler, true);
+                  };
+                  document.addEventListener("click", clickHandler, true);
+                }
+              },
+              children
+            }
+          )
+        ]
+      }
+    );
+    return tooltip ? /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: button }) : button;
+  }
+);
+ToggleButton.displayName = "ToggleButton";
+__toESM(require_lodash());
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function useEventCallback(fn) {
+  const ref = useRef(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+  useIsomorphicLayoutEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  return useCallback((...args) => {
+    var _a;
+    return (_a = ref.current) == null ? void 0 : _a.call(ref, ...args);
+  }, [ref]);
+}
+var ToggleGroupContext = createContext(null);
+function useToggleGroupContext() {
+  const context = useContext(ToggleGroupContext);
+  if (!context) {
+    throw new Error("ToggleButton must be used within a ToggleGroup");
+  }
+  return context;
+}
+var ToggleGroupItem = memo(
+  forwardRef(function ToggleGroupItem2(props, ref) {
+    const { value: itemValue, className, disabled, children, ...rest } = props;
+    const {
+      value: groupValue,
+      onChange,
+      disabled: groupDisabled,
+      readOnly: groupReadOnly,
+      multiple
+    } = useToggleGroupContext();
+    const isPressed = multiple ? groupValue.includes(itemValue) : groupValue[0] === itemValue;
+    const handleChange = useEventCallback((checked) => {
+      if (groupReadOnly) return;
+      if (multiple) {
+        const newValue = checked ? [...groupValue, itemValue] : groupValue.filter((v) => v !== itemValue);
+        onChange(newValue);
+      } else {
+        onChange(checked ? [itemValue] : []);
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      ToggleButton,
+      {
+        value: isPressed,
+        active: isPressed,
+        disabled: disabled || groupDisabled,
+        readOnly: groupReadOnly,
+        onChange: handleChange,
+        className,
+        ...rest,
+        ref,
+        children
+      }
+    );
+  })
+);
+ToggleGroupItem.displayName = "ToggleGroup.Item";
+var ToggleGroupBase = forwardRef(
+  function ToggleGroup(props, ref) {
+    const {
+      className,
+      children,
+      defaultValue,
+      value: controlledValue,
+      onChange,
+      disabled = false,
+      readOnly = false,
+      multiple = false,
+      orientation = "horizontal",
+      loopFocus = true,
+      ...rest
+    } = props;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || []);
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const handleChange = useEventCallback((newValue) => {
+      if (readOnly) return;
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onChange == null ? void 0 : onChange(newValue);
+    });
+    const contextValue = useMemo(
+      () => ({
+        value,
+        onChange: handleChange,
+        disabled,
+        readOnly,
+        multiple,
+        orientation,
+        loopFocus
+      }),
+      [value, handleChange, disabled, readOnly, multiple, orientation, loopFocus]
+    );
+    const containerRef = useRef(null);
+    const getItems = useCallback(() => {
+      if (!containerRef.current) return [];
+      return Array.from(
+        containerRef.current.querySelectorAll('input[type="checkbox"]')
+      );
+    }, []);
+    const handleKeyDown = useEventCallback((e) => {
+      var _a;
+      if (readOnly || disabled) return;
+      const items = getItems();
+      if (items.length === 0) return;
+      const currentIndex = items.findIndex((item) => item === document.activeElement);
+      if (currentIndex === -1) return;
+      let nextIndex = currentIndex;
+      if (orientation === "horizontal") {
+        if (e.key === "ArrowLeft") {
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : loopFocus ? items.length - 1 : currentIndex;
+          e.preventDefault();
+        } else if (e.key === "ArrowRight") {
+          nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : loopFocus ? 0 : currentIndex;
+          e.preventDefault();
+        }
+      } else {
+        if (e.key === "ArrowUp") {
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : loopFocus ? items.length - 1 : currentIndex;
+          e.preventDefault();
+        } else if (e.key === "ArrowDown") {
+          nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : loopFocus ? 0 : currentIndex;
+          e.preventDefault();
+        }
+      }
+      if (nextIndex !== currentIndex) {
+        (_a = items[nextIndex]) == null ? void 0 : _a.focus();
+      }
+    });
+    const tv = toggleGroupTv({
+      orientation,
+      disabled,
+      multiple
+    });
+    const setRefs = useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref && "current" in ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRefs,
+        className: tcx(tv.root(), className),
+        role: "group",
+        "data-orientation": orientation,
+        "data-disabled": disabled ? "" : void 0,
+        "data-multiple": multiple ? "" : void 0,
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+var MemoizedToggleGroup = memo(ToggleGroupBase);
+var ToggleGroup2 = MemoizedToggleGroup;
+ToggleGroup2.Item = ToggleGroupItem;
+ToggleGroup2.displayName = "ToggleGroup";
+export {
+  ToggleButton,
+  ToggleGroup2 as ToggleGroup
+};