@usefragments/ui 1.0.0

package/dist/components/Command/index.cjs

@@ -0,0 +1,415 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Command_module = require("./Command.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function defaultFilter(value, search, keywords) {
+  if (!search) return 1;
+  const searchLower = search.toLowerCase();
+  const valueLower = value.toLowerCase();
+  if (valueLower.includes(searchLower)) return 1;
+  if (keywords) {
+    for (const keyword of keywords) {
+      if (keyword.toLowerCase().includes(searchLower)) return 1;
+    }
+  }
+  return 0;
+}
+function getTextContent(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(getTextContent).join(" ");
+  if (React__namespace.isValidElement(node)) {
+    const childProps = node.props;
+    return getTextContent(childProps.children);
+  }
+  return "";
+}
+const CommandContext = React__namespace.createContext(null);
+function useCommandContext() {
+  const ctx = React__namespace.useContext(CommandContext);
+  if (!ctx) throw new Error("Command sub-components must be used within <Command>");
+  return ctx;
+}
+function SearchIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+      ]
+    }
+  );
+}
+function CommandRoot({
+  children,
+  search: controlledSearch,
+  defaultSearch = "",
+  onSearchChange,
+  filter = defaultFilter,
+  loop = true,
+  className,
+  ...htmlProps
+}) {
+  const [uncontrolledSearch, setUncontrolledSearch] = React__namespace.useState(defaultSearch);
+  const isControlled = controlledSearch !== void 0;
+  const search = isControlled ? controlledSearch : uncontrolledSearch;
+  const [items, setItems] = React__namespace.useState(/* @__PURE__ */ new Map());
+  const [activeId, setActiveId] = React__namespace.useState(null);
+  const listRef = React__namespace.useRef(null);
+  const generatedListId = React__namespace.useId();
+  const listId = `command-list-${generatedListId}`;
+  const setSearch = React__namespace.useCallback(
+    (value) => {
+      if (!isControlled) {
+        setUncontrolledSearch(value);
+      }
+      onSearchChange == null ? void 0 : onSearchChange(value);
+    },
+    [isControlled, onSearchChange]
+  );
+  const registerItem = React__namespace.useCallback((id, registration) => {
+    setItems((prev) => {
+      const next = new Map(prev);
+      next.set(id, registration);
+      return next;
+    });
+  }, []);
+  const unregisterItem = React__namespace.useCallback((id) => {
+    setItems((prev) => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  const scores = React__namespace.useMemo(() => {
+    const result = /* @__PURE__ */ new Map();
+    for (const [id, registration] of items) {
+      const score = filter(registration.value, search, registration.keywords);
+      result.set(id, score);
+    }
+    return result;
+  }, [items, search, filter]);
+  const visibleCount = React__namespace.useMemo(() => {
+    let count = 0;
+    for (const score of scores.values()) {
+      if (score > 0) count++;
+    }
+    return count;
+  }, [scores]);
+  React__namespace.useEffect(() => {
+    setActiveId(null);
+  }, [search]);
+  const contextValue = React__namespace.useMemo(
+    () => ({
+      search,
+      setSearch,
+      filter,
+      scores,
+      registerItem,
+      unregisterItem,
+      activeId,
+      setActiveId,
+      loop,
+      listRef,
+      visibleCount,
+      listId
+    }),
+    [search, setSearch, filter, scores, registerItem, unregisterItem, activeId, loop, visibleCount, listId]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CommandContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlProps,
+      className: [Command_module.default.command, className].filter(Boolean).join(" "),
+      role: "search",
+      children
+    }
+  ) });
+}
+function CommandInput({
+  className,
+  onChange,
+  onKeyDown,
+  ...htmlProps
+}) {
+  const { search, setSearch, listRef, setActiveId, activeId, loop, listId } = useCommandContext();
+  const inputRef = React__namespace.useRef(null);
+  const getEnabledItems = React__namespace.useCallback(() => {
+    const list = listRef.current;
+    if (!list) return [];
+    return Array.from(
+      list.querySelectorAll('[data-command-item]:not([data-disabled="true"])')
+    ).filter((el) => el.style.display !== "none");
+  }, [listRef]);
+  const handleKeyDown = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    const items = getEnabledItems();
+    if (items.length === 0) return;
+    const currentIndex = activeId ? items.findIndex((item) => item.id === activeId) : -1;
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        if (currentIndex < 0) {
+          setActiveId(items[0].id);
+        } else if (currentIndex < items.length - 1) {
+          setActiveId(items[currentIndex + 1].id);
+        } else if (loop) {
+          setActiveId(items[0].id);
+        }
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        if (currentIndex < 0) {
+          setActiveId(items[items.length - 1].id);
+        } else if (currentIndex > 0) {
+          setActiveId(items[currentIndex - 1].id);
+        } else if (loop) {
+          setActiveId(items[items.length - 1].id);
+        }
+        break;
+      }
+      case "Home": {
+        event.preventDefault();
+        setActiveId(items[0].id);
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        setActiveId(items[items.length - 1].id);
+        break;
+      }
+      case "Enter": {
+        event.preventDefault();
+        if (activeId) {
+          const activeItem = items.find((item) => item.id === activeId);
+          if (activeItem) {
+            activeItem.click();
+          }
+        }
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Command_module.default.inputWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        role: "combobox",
+        "aria-expanded": true,
+        "aria-controls": listId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeId ?? void 0,
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: false,
+        value: search,
+        ...htmlProps,
+        onChange: (e) => {
+          onChange == null ? void 0 : onChange(e);
+          if (e.defaultPrevented) return;
+          setSearch(e.target.value);
+        },
+        onKeyDown: handleKeyDown,
+        className: [Command_module.default.input, className].filter(Boolean).join(" ")
+      }
+    )
+  ] });
+}
+function CommandList({ children, className, ...htmlProps }) {
+  const { listRef, listId } = useCommandContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: listRef,
+      ...htmlProps,
+      id: listId,
+      role: "listbox",
+      className: [Command_module.default.list, className].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+function CommandItem({
+  children,
+  value: valueProp,
+  keywords,
+  disabled = false,
+  onItemSelect,
+  className,
+  onClick,
+  onKeyDown,
+  onMouseEnter,
+  style,
+  ...htmlProps
+}) {
+  const { scores, registerItem, unregisterItem, activeId, setActiveId } = useCommandContext();
+  const generatedId = React__namespace.useId();
+  const itemId = htmlProps.id ?? `command-item-${generatedId}`;
+  const itemRef = React__namespace.useRef(null);
+  const textValue = React__namespace.useMemo(() => {
+    if (valueProp) return valueProp;
+    return getTextContent(children).trim();
+  }, [valueProp, children]);
+  React__namespace.useEffect(() => {
+    registerItem(itemId, { value: textValue, keywords });
+    return () => unregisterItem(itemId);
+  }, [itemId, textValue, keywords, registerItem, unregisterItem]);
+  const score = scores.get(itemId) ?? 1;
+  const isVisible = score > 0;
+  const isActive = activeId === itemId;
+  React__namespace.useEffect(() => {
+    if (isActive && itemRef.current) {
+      itemRef.current.scrollIntoView({ block: "nearest" });
+    }
+  }, [isActive]);
+  const activateItem = (event) => {
+    if (disabled) return;
+    onItemSelect == null ? void 0 : onItemSelect(textValue, event);
+  };
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    if (event.defaultPrevented) return;
+    activateItem(event);
+  };
+  const handleMouseEnter = (event) => {
+    onMouseEnter == null ? void 0 : onMouseEnter(event);
+    if (event.defaultPrevented) return;
+    if (!disabled) {
+      setActiveId(itemId);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: itemRef,
+      ...htmlProps,
+      id: itemId,
+      role: "option",
+      "aria-selected": isActive,
+      "aria-disabled": disabled,
+      "data-command-item": "",
+      "data-active": isActive || void 0,
+      "data-disabled": disabled || void 0,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        onKeyDown == null ? void 0 : onKeyDown(e);
+        if (e.defaultPrevented) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          activateItem(e);
+        }
+      },
+      onMouseEnter: handleMouseEnter,
+      className: [
+        Command_module.default.item,
+        isActive && Command_module.default.itemActive,
+        disabled && Command_module.default.itemDisabled,
+        className
+      ].filter(Boolean).join(" "),
+      style: { ...style, display: isVisible ? void 0 : "none" },
+      children
+    }
+  );
+}
+function CommandGroup({ children, heading, className, ...htmlProps }) {
+  const labelId = React__namespace.useId();
+  const groupRef = React__namespace.useRef(null);
+  const { scores } = useCommandContext();
+  const [hasVisibleChildren, setHasVisibleChildren] = React__namespace.useState(true);
+  React__namespace.useEffect(() => {
+    if (!groupRef.current) return;
+    const items = groupRef.current.querySelectorAll("[data-command-item]");
+    const anyVisible = Array.from(items).some((item) => item.style.display !== "none");
+    setHasVisibleChildren(anyVisible);
+  }, [scores]);
+  const { style, ...restHtmlProps } = htmlProps;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: groupRef,
+      ...restHtmlProps,
+      role: "group",
+      "aria-labelledby": heading ? labelId : void 0,
+      className: [Command_module.default.group, className].filter(Boolean).join(" "),
+      style: { ...style, display: hasVisibleChildren ? void 0 : "none" },
+      children: [
+        heading && /* @__PURE__ */ jsxRuntime.jsx("div", { id: labelId, className: Command_module.default.groupHeading, children: heading }),
+        children
+      ]
+    }
+  );
+}
+function CommandEmpty({ children, className, ...htmlProps }) {
+  const { visibleCount } = useCommandContext();
+  if (visibleCount > 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlProps,
+      role: "option",
+      "aria-disabled": "true",
+      "aria-selected": "false",
+      className: [Command_module.default.empty, className].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+function CommandSeparator({ className, ...htmlProps }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlProps,
+      role: "separator",
+      className: [Command_module.default.separator, className].filter(Boolean).join(" ")
+    }
+  );
+}
+const Command = Object.assign(CommandRoot, {
+  Input: CommandInput,
+  List: CommandList,
+  Item: CommandItem,
+  Group: CommandGroup,
+  Empty: CommandEmpty,
+  Separator: CommandSeparator
+});
+exports.Command = Command;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandList = CommandList;
+exports.CommandRoot = CommandRoot;
+exports.CommandSeparator = CommandSeparator;

package/dist/components/Command/index.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+export interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Controlled search value */
+    search?: string;
+    /** Default search value */
+    defaultSearch?: string;
+    /** Called when search input changes */
+    onSearchChange?: (search: string) => void;
+    /** Custom filter function. Return 0 to hide, >0 to show (higher = better match).
+        Default: case-insensitive substring match on value + keywords */
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    /** Whether to loop keyboard navigation. Default: true */
+    loop?: boolean;
+}
+export interface CommandInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    className?: string;
+}
+export interface CommandListProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export interface CommandItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    children: React.ReactNode;
+    /** Value used for filtering (falls back to text content) */
+    value?: string;
+    /** Extra keywords for filtering */
+    keywords?: string[];
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Called when item is selected (Enter or click) */
+    onItemSelect?: (value: string, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+}
+export interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Group heading text */
+    heading?: string;
+}
+export interface CommandEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export type CommandSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+declare function CommandRoot({ children, search: controlledSearch, defaultSearch, onSearchChange, filter, loop, className, ...htmlProps }: CommandProps): import("react/jsx-runtime").JSX.Element;
+declare function CommandInput({ className, onChange, onKeyDown, ...htmlProps }: CommandInputProps): import("react/jsx-runtime").JSX.Element;
+declare function CommandList({ children, className, ...htmlProps }: CommandListProps): import("react/jsx-runtime").JSX.Element;
+declare function CommandItem({ children, value: valueProp, keywords, disabled, onItemSelect, className, onClick, onKeyDown, onMouseEnter, style, ...htmlProps }: CommandItemProps): import("react/jsx-runtime").JSX.Element;
+declare function CommandGroup({ children, heading, className, ...htmlProps }: CommandGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function CommandEmpty({ children, className, ...htmlProps }: CommandEmptyProps): import("react/jsx-runtime").JSX.Element | null;
+declare function CommandSeparator({ className, ...htmlProps }: CommandSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export declare const Command: typeof CommandRoot & {
+    Input: typeof CommandInput;
+    List: typeof CommandList;
+    Item: typeof CommandItem;
+    Group: typeof CommandGroup;
+    Empty: typeof CommandEmpty;
+    Separator: typeof CommandSeparator;
+};
+export { CommandRoot, CommandInput, CommandList, CommandItem, CommandGroup, CommandEmpty, CommandSeparator, };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Command/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Command/index.tsx"],"names":[],"mappings":"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"}