@usefragments/ui 1.0.0

package/dist/components/Command/index.js

@@ -0,0 +1,398 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Command.module.scss.js";
+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.isValidElement(node)) {
+    const childProps = node.props;
+    return getTextContent(childProps.children);
+  }
+  return "";
+}
+const CommandContext = React.createContext(null);
+function useCommandContext() {
+  const ctx = React.useContext(CommandContext);
+  if (!ctx) throw new Error("Command sub-components must be used within <Command>");
+  return ctx;
+}
+function SearchIcon() {
+  return /* @__PURE__ */ 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__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ 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.useState(defaultSearch);
+  const isControlled = controlledSearch !== void 0;
+  const search = isControlled ? controlledSearch : uncontrolledSearch;
+  const [items, setItems] = React.useState(/* @__PURE__ */ new Map());
+  const [activeId, setActiveId] = React.useState(null);
+  const listRef = React.useRef(null);
+  const generatedListId = React.useId();
+  const listId = `command-list-${generatedListId}`;
+  const setSearch = React.useCallback(
+    (value) => {
+      if (!isControlled) {
+        setUncontrolledSearch(value);
+      }
+      onSearchChange == null ? void 0 : onSearchChange(value);
+    },
+    [isControlled, onSearchChange]
+  );
+  const registerItem = React.useCallback((id, registration) => {
+    setItems((prev) => {
+      const next = new Map(prev);
+      next.set(id, registration);
+      return next;
+    });
+  }, []);
+  const unregisterItem = React.useCallback((id) => {
+    setItems((prev) => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  const scores = React.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.useMemo(() => {
+    let count = 0;
+    for (const score of scores.values()) {
+      if (score > 0) count++;
+    }
+    return count;
+  }, [scores]);
+  React.useEffect(() => {
+    setActiveId(null);
+  }, [search]);
+  const contextValue = React.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__ */ jsx(CommandContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      className: [styles.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.useRef(null);
+  const getEnabledItems = React.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__ */ jsxs("div", { className: styles.inputWrapper, children: [
+    /* @__PURE__ */ jsx(SearchIcon, {}),
+    /* @__PURE__ */ 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: [styles.input, className].filter(Boolean).join(" ")
+      }
+    )
+  ] });
+}
+function CommandList({ children, className, ...htmlProps }) {
+  const { listRef, listId } = useCommandContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      ...htmlProps,
+      id: listId,
+      role: "listbox",
+      className: [styles.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.useId();
+  const itemId = htmlProps.id ?? `command-item-${generatedId}`;
+  const itemRef = React.useRef(null);
+  const textValue = React.useMemo(() => {
+    if (valueProp) return valueProp;
+    return getTextContent(children).trim();
+  }, [valueProp, children]);
+  React.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.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__ */ 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: [
+        styles.item,
+        isActive && styles.itemActive,
+        disabled && styles.itemDisabled,
+        className
+      ].filter(Boolean).join(" "),
+      style: { ...style, display: isVisible ? void 0 : "none" },
+      children
+    }
+  );
+}
+function CommandGroup({ children, heading, className, ...htmlProps }) {
+  const labelId = React.useId();
+  const groupRef = React.useRef(null);
+  const { scores } = useCommandContext();
+  const [hasVisibleChildren, setHasVisibleChildren] = React.useState(true);
+  React.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__ */ jsxs(
+    "div",
+    {
+      ref: groupRef,
+      ...restHtmlProps,
+      role: "group",
+      "aria-labelledby": heading ? labelId : void 0,
+      className: [styles.group, className].filter(Boolean).join(" "),
+      style: { ...style, display: hasVisibleChildren ? void 0 : "none" },
+      children: [
+        heading && /* @__PURE__ */ jsx("div", { id: labelId, className: styles.groupHeading, children: heading }),
+        children
+      ]
+    }
+  );
+}
+function CommandEmpty({ children, className, ...htmlProps }) {
+  const { visibleCount } = useCommandContext();
+  if (visibleCount > 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      role: "option",
+      "aria-disabled": "true",
+      "aria-selected": "false",
+      className: [styles.empty, className].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+function CommandSeparator({ className, ...htmlProps }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      role: "separator",
+      className: [styles.separator, className].filter(Boolean).join(" ")
+    }
+  );
+}
+const Command = Object.assign(CommandRoot, {
+  Input: CommandInput,
+  List: CommandList,
+  Item: CommandItem,
+  Group: CommandGroup,
+  Empty: CommandEmpty,
+  Separator: CommandSeparator
+});
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandRoot,
+  CommandSeparator
+};

package/dist/components/ComponentDefaults/index.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+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);
+const DEFAULT_COMPONENT_DEFAULTS = {
+  controlSize: "md"
+};
+const ComponentDefaultsContext = React__namespace.createContext(null);
+function ComponentDefaultsProvider({
+  children,
+  value,
+  controlSize
+}) {
+  const parent = React__namespace.useContext(ComponentDefaultsContext) ?? DEFAULT_COMPONENT_DEFAULTS;
+  const resolvedValue = React__namespace.useMemo(
+    () => ({
+      ...parent,
+      ...value,
+      controlSize: controlSize ?? (value == null ? void 0 : value.controlSize) ?? parent.controlSize
+    }),
+    [controlSize, parent, value]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ComponentDefaultsContext.Provider, { value: resolvedValue, children });
+}
+function useComponentDefaults() {
+  return React__namespace.useContext(ComponentDefaultsContext) ?? DEFAULT_COMPONENT_DEFAULTS;
+}
+function useResolvedControlSize(explicitSize, fallback = DEFAULT_COMPONENT_DEFAULTS.controlSize) {
+  const defaults = React__namespace.useContext(ComponentDefaultsContext);
+  return explicitSize ?? (defaults == null ? void 0 : defaults.controlSize) ?? fallback;
+}
+exports.ComponentDefaultsProvider = ComponentDefaultsProvider;
+exports.useComponentDefaults = useComponentDefaults;
+exports.useResolvedControlSize = useResolvedControlSize;

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type ControlSize = "sm" | "md" | "lg";
+export interface ComponentDefaults {
+    /** Default size for interactive controls when no component-level size is set. */
+    controlSize?: ControlSize;
+}
+export interface ComponentDefaultsProviderProps extends ComponentDefaults {
+    children: React.ReactNode;
+    /** Object form for passing defaults from ThemeProvider. */
+    value?: ComponentDefaults;
+}
+export declare function ComponentDefaultsProvider({ children, value, controlSize, }: ComponentDefaultsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useComponentDefaults(): Required<ComponentDefaults>;
+export declare function useResolvedControlSize<TSize extends string>(explicitSize: TSize | undefined, fallback?: ControlSize): TSize | ControlSize;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ComponentDefaults/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,MAAM,WAAW,iBAAiB;IAChC,iFAAiF;IACjF,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,8BAA+B,SAAQ,iBAAiB;IACvE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAQD,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,KAAK,EACL,WAAW,GACZ,EAAE,8BAA8B,2CAgBhC;AAED,wBAAgB,oBAAoB,gCAEnC;AAED,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,MAAM,EACzD,YAAY,EAAE,KAAK,GAAG,SAAS,EAC/B,QAAQ,GAAE,WAAoD,GAC7D,KAAK,GAAG,WAAW,CAGrB"}

package/dist/components/ComponentDefaults/index.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+const DEFAULT_COMPONENT_DEFAULTS = {
+  controlSize: "md"
+};
+const ComponentDefaultsContext = React.createContext(null);
+function ComponentDefaultsProvider({
+  children,
+  value,
+  controlSize
+}) {
+  const parent = React.useContext(ComponentDefaultsContext) ?? DEFAULT_COMPONENT_DEFAULTS;
+  const resolvedValue = React.useMemo(
+    () => ({
+      ...parent,
+      ...value,
+      controlSize: controlSize ?? (value == null ? void 0 : value.controlSize) ?? parent.controlSize
+    }),
+    [controlSize, parent, value]
+  );
+  return /* @__PURE__ */ jsx(ComponentDefaultsContext.Provider, { value: resolvedValue, children });
+}
+function useComponentDefaults() {
+  return React.useContext(ComponentDefaultsContext) ?? DEFAULT_COMPONENT_DEFAULTS;
+}
+function useResolvedControlSize(explicitSize, fallback = DEFAULT_COMPONENT_DEFAULTS.controlSize) {
+  const defaults = React.useContext(ComponentDefaultsContext);
+  return explicitSize ?? (defaults == null ? void 0 : defaults.controlSize) ?? fallback;
+}
+export {
+  ComponentDefaultsProvider,
+  useComponentDefaults,
+  useResolvedControlSize
+};

package/dist/components/ConversationList/ConversationList.module.scss.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const conversationList = "_conversationList_id6ps_1";
+const content = "_content_id6ps_15";
+const loadingHistory = "_loadingHistory_id6ps_23";
+const dateSeparator = "_dateSeparator_id6ps_50";
+const dateSeparatorLine = "_dateSeparatorLine_id6ps_57";
+const dateSeparatorText = "_dateSeparatorText_id6ps_63";
+const typingIndicator = "_typingIndicator_id6ps_74";
+const typingAvatar = "_typingAvatar_id6ps_81";
+const typingContent = "_typingContent_id6ps_97";
+const typingDot = "_typingDot_id6ps_106";
+const styles = {
+  conversationList,
+  content,
+  loadingHistory,
+  dateSeparator,
+  dateSeparatorLine,
+  dateSeparatorText,
+  typingIndicator,
+  typingAvatar,
+  typingContent,
+  typingDot
+};
+exports.content = content;
+exports.conversationList = conversationList;
+exports.dateSeparator = dateSeparator;
+exports.dateSeparatorLine = dateSeparatorLine;
+exports.dateSeparatorText = dateSeparatorText;
+exports.default = styles;
+exports.loadingHistory = loadingHistory;
+exports.typingAvatar = typingAvatar;
+exports.typingContent = typingContent;
+exports.typingDot = typingDot;
+exports.typingIndicator = typingIndicator;

package/dist/components/ConversationList/ConversationList.module.scss.js

@@ -0,0 +1,35 @@
+const conversationList = "_conversationList_id6ps_1";
+const content = "_content_id6ps_15";
+const loadingHistory = "_loadingHistory_id6ps_23";
+const dateSeparator = "_dateSeparator_id6ps_50";
+const dateSeparatorLine = "_dateSeparatorLine_id6ps_57";
+const dateSeparatorText = "_dateSeparatorText_id6ps_63";
+const typingIndicator = "_typingIndicator_id6ps_74";
+const typingAvatar = "_typingAvatar_id6ps_81";
+const typingContent = "_typingContent_id6ps_97";
+const typingDot = "_typingDot_id6ps_106";
+const styles = {
+  conversationList,
+  content,
+  loadingHistory,
+  dateSeparator,
+  dateSeparatorLine,
+  dateSeparatorText,
+  typingIndicator,
+  typingAvatar,
+  typingContent,
+  typingDot
+};
+export {
+  content,
+  conversationList,
+  dateSeparator,
+  dateSeparatorLine,
+  dateSeparatorText,
+  styles as default,
+  loadingHistory,
+  typingAvatar,
+  typingContent,
+  typingDot,
+  typingIndicator
+};