@inshorts/glint-ui 0.5.4 → 0.6.1

package/dist/segmented-control.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  SegmentedControl
+} from "./chunk-MLRSOTFI.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  SegmentedControl
+};
+//# sourceMappingURL=segmented-control.js.map

package/dist/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/select.cjs

@@ -0,0 +1,648 @@
+"use client";
+"use strict";
+"use client";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/select.tsx
+var select_exports = {};
+__export(select_exports, {
+  Select: () => Select
+});
+module.exports = __toCommonJS(select_exports);
+var React3 = __toESM(require("react"), 1);
+
+// src/autocomplete.tsx
+var React2 = __toESM(require("react"), 1);
+var import_react_dom2 = require("react-dom");
+var import_lucide_react = require("lucide-react");
+
+// src/modal.tsx
+var React = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/modal.tsx
+var import_jsx_runtime = (
+  /*
+    `overflow-y-auto` on the overlay, `my-auto` on the panel — not
+    `items-center`. A flex item centred with `align-items` overflows equally
+    in both directions once it is taller than its container, and the half
+    above the top edge cannot be scrolled to: with the page behind it locked,
+    an over-tall dialog was simply unreachable at both ends. Auto margins
+    centre a short panel the same way and collapse to zero on a tall one,
+    which scrolls.
+  */
+  require("react/jsx-runtime")
+);
+var emptySubscribe = () => () => {
+};
+function useHasMounted() {
+  return React.useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false
+  );
+}
+
+// src/autocomplete.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PREFERRED_LIST_HEIGHT = 224;
+var MIN_LIST_HEIGHT = 120;
+var VIEWPORT_MARGIN = 8;
+var ANCHOR_GAP = 4;
+function normalizeQuery(query) {
+  return query.trim().toLowerCase();
+}
+function filterOptions(options, query) {
+  const normalized = normalizeQuery(query);
+  if (!normalized) return options;
+  return options.filter(
+    (option) => option.label.toLowerCase().includes(normalized) || option.value.toLowerCase().includes(normalized)
+  );
+}
+function getOptionLabel(options, value) {
+  return options.find((option) => option.value === value)?.label ?? value;
+}
+function parseTagTokens(raw) {
+  const seen = /* @__PURE__ */ new Set();
+  const tokens = [];
+  for (const part of raw.split(/[\s,]+/)) {
+    const token = part.trim();
+    if (!token || seen.has(token)) continue;
+    seen.add(token);
+    tokens.push(token);
+  }
+  return tokens;
+}
+function Autocomplete(props) {
+  const {
+    options,
+    placeholder = "Search\u2026",
+    disabled = false,
+    className,
+    emptyMessage = "No results found",
+    id,
+    ariaLabel,
+    size = "default",
+    creatable = false,
+    clearable = true
+  } = props;
+  const multiple = props.multiple ?? false;
+  const singleValue = multiple ? void 0 : props.value;
+  const multipleValue = multiple ? props.value : void 0;
+  const selectedValues = React2.useMemo(() => {
+    if (multiple) return multipleValue ?? [];
+    return singleValue ? [singleValue] : [];
+  }, [multiple, multipleValue, singleValue]);
+  const onSingleChange = !multiple ? props.onChange : void 0;
+  const onMultipleChange = multiple ? props.onChange : void 0;
+  const containerRef = React2.useRef(null);
+  const dropdownRef = React2.useRef(null);
+  const inputRef = React2.useRef(null);
+  const listRef = React2.useRef(null);
+  const ignoreBlurRef = React2.useRef(false);
+  const mounted = useHasMounted();
+  const [open, setOpen] = React2.useState(false);
+  const [position, setPosition] = React2.useState(null);
+  const [query, setQuery] = React2.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React2.useState(0);
+  const filteredOptions = React2.useMemo(
+    () => filterOptions(options, query),
+    [options, query]
+  );
+  const safeHighlightedIndex = highlightedIndex >= filteredOptions.length ? Math.max(filteredOptions.length - 1, 0) : highlightedIndex;
+  const close = React2.useCallback(() => {
+    setOpen(false);
+    setQuery("");
+    setHighlightedIndex(0);
+  }, []);
+  const openDropdown = React2.useCallback(() => {
+    if (disabled) return;
+    setOpen(true);
+    setHighlightedIndex(0);
+  }, [disabled]);
+  const commitSingleValue = React2.useCallback(
+    (value) => {
+      if (!multiple) {
+        onSingleChange?.(value);
+        close();
+      }
+    },
+    [close, multiple, onSingleChange]
+  );
+  const toggleMultipleValue = React2.useCallback(
+    (value) => {
+      if (!multiple || !onMultipleChange) return;
+      onMultipleChange(
+        selectedValues.includes(value) ? selectedValues.filter((item) => item !== value) : [...selectedValues, value]
+      );
+      setQuery("");
+      setHighlightedIndex(0);
+    },
+    [multiple, onMultipleChange, selectedValues]
+  );
+  const commitCustomValues = React2.useCallback(
+    (raw) => {
+      if (!creatable) return;
+      if (!multiple) {
+        const value = raw.trim();
+        if (!value) return;
+        commitSingleValue(value);
+        return;
+      }
+      if (!onMultipleChange) return;
+      const tokens = parseTagTokens(raw);
+      if (!tokens.length) return;
+      const next = [...selectedValues];
+      for (const token of tokens) {
+        if (!next.includes(token)) next.push(token);
+      }
+      onMultipleChange(next);
+      setQuery("");
+      setHighlightedIndex(0);
+    },
+    [commitSingleValue, creatable, multiple, onMultipleChange, selectedValues]
+  );
+  const removeValue = React2.useCallback(
+    (value) => {
+      if (!multiple || !onMultipleChange) return;
+      onMultipleChange(selectedValues.filter((item) => item !== value));
+      window.requestAnimationFrame(() => inputRef.current?.focus());
+    },
+    [multiple, onMultipleChange, selectedValues]
+  );
+  const selectOption = React2.useCallback(
+    (option) => {
+      if (option.disabled) return;
+      ignoreBlurRef.current = true;
+      window.setTimeout(() => {
+        ignoreBlurRef.current = false;
+      }, 0);
+      if (multiple) {
+        toggleMultipleValue(option.value);
+        window.requestAnimationFrame(() => inputRef.current?.focus());
+        return;
+      }
+      commitSingleValue(option.value);
+    },
+    [commitSingleValue, multiple, toggleMultipleValue]
+  );
+  const selectHighlighted = React2.useCallback(() => {
+    const option = filteredOptions[safeHighlightedIndex];
+    if (!option) return;
+    selectOption(option);
+  }, [filteredOptions, safeHighlightedIndex, selectOption]);
+  React2.useEffect(() => {
+    if (!open) return;
+    function handlePointerDown(event) {
+      const target = event.target;
+      if (containerRef.current?.contains(target) || dropdownRef.current?.contains(target)) {
+        return;
+      }
+      close();
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [close, open]);
+  React2.useLayoutEffect(() => {
+    if (!open) return;
+    const update = () => {
+      const anchor = containerRef.current;
+      if (!anchor) return;
+      const rect = anchor.getBoundingClientRect();
+      const below = window.innerHeight - rect.bottom - ANCHOR_GAP - VIEWPORT_MARGIN;
+      const above = rect.top - ANCHOR_GAP - VIEWPORT_MARGIN;
+      const flip = below < Math.min(PREFERRED_LIST_HEIGHT, MIN_LIST_HEIGHT) && above > below;
+      const room = flip ? above : below;
+      const width = Math.max(rect.width, size === "compact" ? 220 : 0);
+      const left = Math.max(
+        VIEWPORT_MARGIN,
+        Math.min(rect.left, window.innerWidth - width - VIEWPORT_MARGIN)
+      );
+      setPosition({
+        left,
+        width,
+        maxHeight: Math.max(
+          MIN_LIST_HEIGHT,
+          Math.min(PREFERRED_LIST_HEIGHT, room)
+        ),
+        ...flip ? { bottom: window.innerHeight - rect.top + ANCHOR_GAP } : { top: rect.bottom + ANCHOR_GAP }
+      });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, size]);
+  React2.useEffect(() => {
+    if (!open || !listRef.current) return;
+    const highlighted = listRef.current.children[safeHighlightedIndex];
+    highlighted?.scrollIntoView({ block: "nearest" });
+  }, [safeHighlightedIndex, open]);
+  function handleInputKeyDown(event) {
+    if (disabled) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) {
+          openDropdown();
+          return;
+        }
+        setHighlightedIndex(
+          Math.min(safeHighlightedIndex + 1, filteredOptions.length - 1)
+        );
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) {
+          openDropdown();
+          return;
+        }
+        setHighlightedIndex(Math.max(safeHighlightedIndex - 1, 0));
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (creatable && query.trim()) {
+          if (multiple || filteredOptions.length === 0) {
+            commitCustomValues(query);
+            return;
+          }
+        }
+        if (!open) {
+          openDropdown();
+          return;
+        }
+        selectHighlighted();
+        break;
+      case ",":
+        if (creatable && multiple && query.trim()) {
+          event.preventDefault();
+          commitCustomValues(query);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        break;
+      case "Backspace":
+        if (multiple && query.length === 0 && selectedValues.length > 0) {
+          event.preventDefault();
+          removeValue(selectedValues[selectedValues.length - 1]);
+        }
+        break;
+      case "Tab":
+        close();
+        break;
+      default:
+        break;
+    }
+  }
+  const displayValue = !multiple && !open && !query && selectedValues[0] ? getOptionLabel(options, selectedValues[0]) : query;
+  const inputPlaceholder = multiple && selectedValues.length > 0 ? "" : placeholder;
+  const createLabel = query.trim();
+  const canCreate = creatable && Boolean(createLabel) && !selectedValues.includes(createLabel);
+  const listboxId = id ? `${id}-listbox` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative",
+        size === "compact" ? "w-auto min-w-24" : "w-full",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            className: cn(
+              "border-border bg-background flex w-full cursor-pointer items-center rounded-md border transition-colors",
+              "focus-within:border-ring focus-within:ring-ring/30 focus-within:ring-2",
+              size === "compact" ? "min-h-0 gap-0.5 border-transparent bg-transparent px-1 py-0.5 text-xs shadow-none" : "min-h-9 gap-1.5 px-2 py-1.5 text-sm shadow-sm",
+              disabled && "cursor-not-allowed opacity-50",
+              open && "border-ring ring-ring/30 ring-2"
+            ),
+            onPointerDown: (event) => {
+              if (disabled) return;
+              if (event.target.closest("[data-option]")) return;
+              if (event.target.closest("[data-chip-remove]"))
+                return;
+              if (!event.target.closest("input")) {
+                event.preventDefault();
+                inputRef.current?.focus();
+              }
+              openDropdown();
+            },
+            children: [
+              size === "compact" ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Search, { className: "text-muted-foreground size-4 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: [
+                multiple && selectedValues.map((value) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "span",
+                  {
+                    className: "bg-primary/10 text-primary inline-flex max-w-full items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: getOptionLabel(options, value) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          "data-chip-remove": true,
+                          className: "text-primary/70 hover:bg-primary/15 hover:text-primary rounded-sm transition",
+                          onPointerDown: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            removeValue(value);
+                          },
+                          "aria-label": `Remove ${getOptionLabel(options, value)}`,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.X, { className: "size-3" })
+                        }
+                      )
+                    ]
+                  },
+                  value
+                )),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "input",
+                  {
+                    ref: inputRef,
+                    id,
+                    type: "text",
+                    role: "combobox",
+                    "aria-label": ariaLabel,
+                    "aria-expanded": open,
+                    "aria-controls": listboxId,
+                    "aria-autocomplete": "list",
+                    disabled,
+                    value: displayValue,
+                    placeholder: inputPlaceholder,
+                    className: cn(
+                      "placeholder:text-muted-foreground flex-1 bg-transparent outline-none",
+                      size === "compact" ? "min-w-0" : "min-w-[6rem]"
+                    ),
+                    onFocus: openDropdown,
+                    onBlur: () => {
+                      if (ignoreBlurRef.current) return;
+                      close();
+                    },
+                    onChange: (event) => {
+                      setQuery(event.target.value);
+                      setHighlightedIndex(0);
+                      if (!open) setOpen(true);
+                    },
+                    onKeyDown: handleInputKeyDown,
+                    onPaste: (event) => {
+                      if (!creatable || !multiple) return;
+                      const text = event.clipboardData.getData("text");
+                      if (!/[\s,]/.test(text)) return;
+                      event.preventDefault();
+                      commitCustomValues(text);
+                    }
+                  }
+                )
+              ] }),
+              clearable && !multiple && selectedValues[0] && !disabled && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "text-muted-foreground hover:bg-muted hover:text-foreground rounded-sm p-0.5 transition",
+                  onPointerDown: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onSingleChange?.("");
+                    setQuery("");
+                    inputRef.current?.focus();
+                  },
+                  "aria-label": "Clear selection",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.X, { className: "size-3.5" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_lucide_react.ChevronDown,
+                {
+                  className: cn(
+                    "text-muted-foreground shrink-0 transition-transform",
+                    size === "compact" ? "size-3" : "size-4",
+                    open && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        open && mounted && position ? (0, import_react_dom2.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              ref: dropdownRef,
+              "data-autocomplete-dropdown": true,
+              style: {
+                position: "fixed",
+                left: position.left,
+                width: position.width,
+                top: position.top,
+                bottom: position.bottom,
+                // Above the modal shell (z-100) it is usually opened inside.
+                zIndex: 200
+              },
+              className: "border-border bg-background overflow-hidden rounded-md border shadow-lg",
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "ul",
+                {
+                  ref: listRef,
+                  id: listboxId,
+                  role: "listbox",
+                  "aria-multiselectable": multiple || void 0,
+                  className: "overflow-y-auto p-1",
+                  style: { maxHeight: position.maxHeight },
+                  children: filteredOptions.length === 0 && !canCreate ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { className: "text-muted-foreground px-3 py-6 text-center text-sm", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                    filteredOptions.map((option, index) => {
+                      const isSelected = selectedValues.includes(option.value);
+                      const isHighlighted = index === safeHighlightedIndex;
+                      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        "li",
+                        {
+                          "data-option": true,
+                          role: "option",
+                          "aria-selected": isSelected,
+                          "aria-disabled": option.disabled || void 0,
+                          className: cn(
+                            "flex cursor-pointer items-center gap-2 rounded-sm transition-colors",
+                            size === "compact" ? "px-2 py-1 text-xs" : "px-2.5 py-2 text-sm",
+                            isHighlighted && "bg-muted",
+                            option.disabled && "cursor-not-allowed opacity-50"
+                          ),
+                          onMouseEnter: () => setHighlightedIndex(index),
+                          onPointerDown: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            selectOption(option);
+                          },
+                          children: [
+                            multiple ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "span",
+                              {
+                                className: cn(
+                                  "border-border flex size-4 shrink-0 items-center justify-center rounded border",
+                                  isSelected && "border-primary bg-primary text-primary-foreground"
+                                ),
+                                children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Check, { className: "size-3" }) : null
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_lucide_react.Check,
+                              {
+                                className: cn(
+                                  "text-primary size-4 shrink-0",
+                                  isSelected ? "opacity-100" : "opacity-0"
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: option.label })
+                          ]
+                        },
+                        option.value
+                      );
+                    }),
+                    canCreate ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "li",
+                      {
+                        "data-option": true,
+                        role: "option",
+                        "aria-selected": false,
+                        className: "hover:bg-muted flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-2 text-sm transition-colors",
+                        onPointerDown: (event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          ignoreBlurRef.current = true;
+                          window.setTimeout(() => {
+                            ignoreBlurRef.current = false;
+                          }, 0);
+                          commitCustomValues(query);
+                          window.requestAnimationFrame(
+                            () => inputRef.current?.focus()
+                          );
+                        },
+                        children: [
+                          "Add \u201C",
+                          createLabel,
+                          "\u201D"
+                        ]
+                      }
+                    ) : null
+                  ] })
+                }
+              )
+            }
+          ),
+          document.body
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/select.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function optionText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(optionText).join("");
+  if (React3.isValidElement(node)) {
+    return optionText(node.props.children);
+  }
+  return "";
+}
+function optionsFromChildren(children) {
+  const options = [];
+  React3.Children.forEach(children, (child) => {
+    if (!React3.isValidElement(child)) return;
+    if (child.type === React3.Fragment) {
+      options.push(
+        ...optionsFromChildren(
+          child.props.children
+        )
+      );
+      return;
+    }
+    const props = child.props;
+    const value = props.value == null ? "" : String(props.value);
+    options.push({
+      value,
+      label: optionText(props.children).trim() || value,
+      disabled: Boolean(props.disabled)
+    });
+  });
+  return options;
+}
+function Select({
+  id,
+  className,
+  disabled,
+  value,
+  placeholder,
+  children,
+  onChange,
+  size = "default",
+  "aria-label": ariaLabel
+}) {
+  const options = optionsFromChildren(children);
+  const current = Array.isArray(value) ? String(value[0] ?? "") : value == null ? "" : String(value);
+  const blank = options.find((option) => option.value === "");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Autocomplete,
+    {
+      id,
+      className,
+      disabled: Boolean(disabled),
+      ariaLabel,
+      size,
+      options,
+      value: current,
+      clearable: false,
+      placeholder: placeholder ?? blank?.label ?? "Search\u2026",
+      onChange: (next) => onChange?.({
+        target: { value: next },
+        currentTarget: { value: next }
+      })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Select
+});
+//# sourceMappingURL=select.cjs.map