@usefragments/ui 1.0.0

package/dist/components/Listbox/index.js

@@ -0,0 +1,229 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Listbox.module.scss.js";
+const ListboxContext = React.createContext(null);
+function ListboxRoot({
+  children,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  tabIndex,
+  onKeyDown,
+  onFocus,
+  ...htmlProps
+}) {
+  const classes = [styles.listbox, className].filter(Boolean).join(" ");
+  const listboxRef = React.useRef(null);
+  const [activeId, setActiveId] = React.useState(null);
+  const getEnabledOptions = React.useCallback(() => {
+    const listbox = listboxRef.current;
+    if (!listbox) return [];
+    return Array.from(
+      listbox.querySelectorAll('[role="option"]')
+    ).filter((option) => option.getAttribute("aria-disabled") !== "true");
+  }, []);
+  const moveActive = React.useCallback(
+    (direction) => {
+      const options = getEnabledOptions();
+      if (options.length === 0) return;
+      if (direction === "first") {
+        setActiveId(options[0].id);
+        return;
+      }
+      if (direction === "last") {
+        setActiveId(options[options.length - 1].id);
+        return;
+      }
+      const currentIndex = activeId ? options.findIndex((option) => option.id === activeId) : -1;
+      if (direction === "next") {
+        const nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % options.length;
+        setActiveId(options[nextIndex].id);
+      } else {
+        const prevIndex = currentIndex < 0 ? options.length - 1 : (currentIndex - 1 + options.length) % options.length;
+        setActiveId(options[prevIndex].id);
+      }
+    },
+    [activeId, getEnabledOptions]
+  );
+  React.useEffect(() => {
+    if (!activeId) return;
+    const listbox = listboxRef.current;
+    if (!listbox) return;
+    const escapedId = typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(activeId) : activeId.replace(/["\\]/g, "\\$&");
+    const activeOption = listbox.querySelector(`#${escapedId}`);
+    if (!activeOption) return;
+    const frame = window.requestAnimationFrame(() => {
+      activeOption.scrollIntoView({ block: "nearest" });
+    });
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [activeId]);
+  const selectActiveItem = React.useCallback(() => {
+    if (!activeId) return;
+    const listbox = listboxRef.current;
+    if (!listbox) return;
+    const escapedId = typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(activeId) : activeId.replace(/["\\]/g, "\\$&");
+    const activeOption = listbox.querySelector(`#${escapedId}`);
+    if (activeOption && activeOption.getAttribute("aria-disabled") !== "true") {
+      activeOption.click();
+    }
+  }, [activeId]);
+  const setDefaultActiveIfNeeded = React.useCallback(() => {
+    if (activeId) return;
+    const options = getEnabledOptions();
+    if (options.length === 0) return;
+    const selectedOption = options.find((option) => option.getAttribute("aria-selected") === "true");
+    setActiveId((selectedOption ?? options[0]).id);
+  }, [activeId, getEnabledOptions]);
+  const handleKeyDown = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        moveActive("next");
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        moveActive("prev");
+        break;
+      case "Home":
+        event.preventDefault();
+        moveActive("first");
+        break;
+      case "End":
+        event.preventDefault();
+        moveActive("last");
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        selectActiveItem();
+        break;
+    }
+  };
+  const handleFocus = (event) => {
+    setDefaultActiveIfNeeded();
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const contextValue = React.useMemo(
+    () => ({
+      activeId,
+      setActiveId
+    }),
+    [activeId]
+  );
+  return /* @__PURE__ */ jsx(ListboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listboxRef,
+      ...htmlProps,
+      role: "listbox",
+      "aria-label": ariaLabel,
+      "aria-activedescendant": activeId ?? void 0,
+      tabIndex: tabIndex ?? 0,
+      className: classes,
+      style,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
+      children
+    }
+  ) });
+}
+function ListboxItem({
+  children,
+  selected = false,
+  disabled = false,
+  onClick,
+  onKeyDown,
+  onMouseEnter,
+  className,
+  style,
+  ...htmlProps
+}) {
+  const context = React.useContext(ListboxContext);
+  const generatedId = React.useId();
+  const itemId = htmlProps.id ?? `listbox-item-${generatedId}`;
+  const classes = [
+    styles.item,
+    selected && styles.itemSelected,
+    disabled && styles.itemDisabled,
+    (context == null ? void 0 : context.activeId) === itemId && styles.itemActive,
+    className
+  ].filter(Boolean).join(" ");
+  const handleMouseEnter = (event) => {
+    if (!disabled) {
+      context == null ? void 0 : context.setActiveId(itemId);
+    }
+    onMouseEnter == null ? void 0 : onMouseEnter(event);
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented || disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      id: itemId,
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": disabled,
+      "data-active": (context == null ? void 0 : context.activeId) === itemId || void 0,
+      onClick: disabled ? void 0 : onClick,
+      onKeyDown: handleKeyDown,
+      onMouseEnter: handleMouseEnter,
+      className: classes,
+      style,
+      children
+    }
+  );
+}
+function ListboxGroup({ children, label, className, ...htmlProps }) {
+  const classes = [styles.group, className].filter(Boolean).join(" ");
+  const labelId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...htmlProps,
+      role: "group",
+      "aria-labelledby": label ? labelId : void 0,
+      className: classes,
+      children: [
+        label && /* @__PURE__ */ jsx("div", { id: labelId, className: styles.groupLabel, children: label }),
+        children
+      ]
+    }
+  );
+}
+function ListboxEmpty({ children, className, ...htmlProps }) {
+  const classes = [styles.empty, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      role: "option",
+      "aria-disabled": "true",
+      "aria-selected": "false",
+      className: classes,
+      children
+    }
+  );
+}
+const Listbox = Object.assign(ListboxRoot, {
+  Item: ListboxItem,
+  Group: ListboxGroup,
+  Empty: ListboxEmpty
+});
+export {
+  Listbox,
+  ListboxEmpty,
+  ListboxGroup,
+  ListboxItem,
+  ListboxRoot
+};

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const loading = "_loading_1bpz2_1";
+const sm = "_sm_1bpz2_8";
+const md = "_md_1bpz2_12";
+const lg = "_lg_1bpz2_16";
+const xl = "_xl_1bpz2_20";
+const colorAccent = "_color-accent_1bpz2_24";
+const colorCurrent = "_color-current_1bpz2_28";
+const colorMuted = "_color-muted_1bpz2_32";
+const centered = "_centered_1bpz2_36";
+const fill = "_fill_1bpz2_42";
+const spinnerIcon = "_spinnerIcon_1bpz2_50";
+const spin = "_spin_1bpz2_50";
+const dots = "_dots_1bpz2_70";
+const dot = "_dot_1bpz2_70";
+const bounce = "_bounce_1bpz2_1";
+const pulse = "_pulse_1bpz2_109";
+const pulseRing = "_pulseRing_1bpz2_118";
+const pulseDot = "_pulseDot_1bpz2_134";
+const overlayBackdrop = "_overlayBackdrop_1bpz2_152";
+const inline = "_inline_1bpz2_162";
+const inlineSm = "_inline-sm_1bpz2_168";
+const inlineMd = "_inline-md_1bpz2_172";
+const inlineSpinner = "_inlineSpinner_1bpz2_176";
+const screen = "_screen_1bpz2_189";
+const screenLabel = "_screenLabel_1bpz2_201";
+const styles = {
+  loading,
+  sm,
+  md,
+  lg,
+  xl,
+  "color-accent": "_color-accent_1bpz2_24",
+  colorAccent,
+  "color-current": "_color-current_1bpz2_28",
+  colorCurrent,
+  "color-muted": "_color-muted_1bpz2_32",
+  colorMuted,
+  centered,
+  fill,
+  spinnerIcon,
+  spin,
+  dots,
+  dot,
+  bounce,
+  pulse,
+  pulseRing,
+  pulseDot,
+  overlayBackdrop,
+  inline,
+  "inline-sm": "_inline-sm_1bpz2_168",
+  inlineSm,
+  "inline-md": "_inline-md_1bpz2_172",
+  inlineMd,
+  inlineSpinner,
+  screen,
+  screenLabel
+};
+exports.bounce = bounce;
+exports.centered = centered;
+exports.colorAccent = colorAccent;
+exports.colorCurrent = colorCurrent;
+exports.colorMuted = colorMuted;
+exports.default = styles;
+exports.dot = dot;
+exports.dots = dots;
+exports.fill = fill;
+exports.inline = inline;
+exports.inlineMd = inlineMd;
+exports.inlineSm = inlineSm;
+exports.inlineSpinner = inlineSpinner;
+exports.lg = lg;
+exports.loading = loading;
+exports.md = md;
+exports.overlayBackdrop = overlayBackdrop;
+exports.pulse = pulse;
+exports.pulseDot = pulseDot;
+exports.pulseRing = pulseRing;
+exports.screen = screen;
+exports.screenLabel = screenLabel;
+exports.sm = sm;
+exports.spin = spin;
+exports.spinnerIcon = spinnerIcon;
+exports.xl = xl;

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

@@ -0,0 +1,85 @@
+const loading = "_loading_1bpz2_1";
+const sm = "_sm_1bpz2_8";
+const md = "_md_1bpz2_12";
+const lg = "_lg_1bpz2_16";
+const xl = "_xl_1bpz2_20";
+const colorAccent = "_color-accent_1bpz2_24";
+const colorCurrent = "_color-current_1bpz2_28";
+const colorMuted = "_color-muted_1bpz2_32";
+const centered = "_centered_1bpz2_36";
+const fill = "_fill_1bpz2_42";
+const spinnerIcon = "_spinnerIcon_1bpz2_50";
+const spin = "_spin_1bpz2_50";
+const dots = "_dots_1bpz2_70";
+const dot = "_dot_1bpz2_70";
+const bounce = "_bounce_1bpz2_1";
+const pulse = "_pulse_1bpz2_109";
+const pulseRing = "_pulseRing_1bpz2_118";
+const pulseDot = "_pulseDot_1bpz2_134";
+const overlayBackdrop = "_overlayBackdrop_1bpz2_152";
+const inline = "_inline_1bpz2_162";
+const inlineSm = "_inline-sm_1bpz2_168";
+const inlineMd = "_inline-md_1bpz2_172";
+const inlineSpinner = "_inlineSpinner_1bpz2_176";
+const screen = "_screen_1bpz2_189";
+const screenLabel = "_screenLabel_1bpz2_201";
+const styles = {
+  loading,
+  sm,
+  md,
+  lg,
+  xl,
+  "color-accent": "_color-accent_1bpz2_24",
+  colorAccent,
+  "color-current": "_color-current_1bpz2_28",
+  colorCurrent,
+  "color-muted": "_color-muted_1bpz2_32",
+  colorMuted,
+  centered,
+  fill,
+  spinnerIcon,
+  spin,
+  dots,
+  dot,
+  bounce,
+  pulse,
+  pulseRing,
+  pulseDot,
+  overlayBackdrop,
+  inline,
+  "inline-sm": "_inline-sm_1bpz2_168",
+  inlineSm,
+  "inline-md": "_inline-md_1bpz2_172",
+  inlineMd,
+  inlineSpinner,
+  screen,
+  screenLabel
+};
+export {
+  bounce,
+  centered,
+  colorAccent,
+  colorCurrent,
+  colorMuted,
+  styles as default,
+  dot,
+  dots,
+  fill,
+  inline,
+  inlineMd,
+  inlineSm,
+  inlineSpinner,
+  lg,
+  loading,
+  md,
+  overlayBackdrop,
+  pulse,
+  pulseDot,
+  pulseRing,
+  screen,
+  screenLabel,
+  sm,
+  spin,
+  spinnerIcon,
+  xl
+};

package/dist/components/Loading/index.cjs

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Loading_module = require("./Loading.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 SpinnerIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    }
+  );
+}
+function DotsAnimation({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Loading_module.default.dot }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Loading_module.default.dot }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Loading_module.default.dot })
+  ] });
+}
+function PulseAnimation({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Loading_module.default.pulseRing }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Loading_module.default.pulseDot })
+  ] });
+}
+const LoadingRoot = React__namespace.forwardRef(
+  function LoadingRoot2({
+    size = "md",
+    variant = "spinner",
+    label = "Loading...",
+    centered = false,
+    fill = false,
+    overlay = false,
+    color = "accent",
+    className,
+    ...htmlProps
+  }, ref) {
+    const classes = [
+      Loading_module.default.loading,
+      Loading_module.default[size],
+      Loading_module.default[variant],
+      Loading_module.default[`color-${color}`],
+      centered && Loading_module.default.centered,
+      fill && Loading_module.default.fill,
+      overlay && Loading_module.default.overlay,
+      className
+    ].filter(Boolean).join(" ");
+    const animation = variant === "dots" ? /* @__PURE__ */ jsxRuntime.jsx(DotsAnimation, { className: Loading_module.default.dots }) : variant === "pulse" ? /* @__PURE__ */ jsxRuntime.jsx(PulseAnimation, { className: Loading_module.default.pulse }) : /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: Loading_module.default.spinnerIcon });
+    const content = /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: classes,
+        role: "status",
+        "aria-label": label,
+        "aria-live": "polite",
+        ...htmlProps,
+        children: animation
+      }
+    );
+    if (overlay) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Loading_module.default.overlayBackdrop, children: content });
+    }
+    return content;
+  }
+);
+function LoadingInline({
+  size = "sm",
+  label = "Loading...",
+  className,
+  ...htmlProps
+}) {
+  const classes = [
+    Loading_module.default.inline,
+    Loading_module.default[`inline-${size}`],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: classes,
+      role: "status",
+      "aria-label": label,
+      ...htmlProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: Loading_module.default.inlineSpinner })
+    }
+  );
+}
+function LoadingScreen({
+  size = "lg",
+  variant = "spinner",
+  label = "Loading...",
+  showLabel = false,
+  className,
+  ...htmlProps
+}) {
+  const classes = [
+    Loading_module.default.screen,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classes,
+      role: "status",
+      "aria-label": label,
+      "aria-live": "polite",
+      ...htmlProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LoadingRoot, { size, variant, label }),
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Loading_module.default.screenLabel, children: label })
+      ]
+    }
+  );
+}
+const Loading = Object.assign(LoadingRoot, {
+  Inline: LoadingInline,
+  Screen: LoadingScreen
+});
+exports.Loading = Loading;
+exports.LoadingInline = LoadingInline;
+exports.LoadingRoot = LoadingRoot;
+exports.LoadingScreen = LoadingScreen;

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+export type LoadingSize = 'sm' | 'md' | 'lg' | 'xl';
+export type LoadingVariant = 'spinner' | 'dots' | 'pulse';
+export interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Size of the loading indicator */
+    size?: LoadingSize;
+    /** Visual style of the loading indicator */
+    variant?: LoadingVariant;
+    /** Accessible label for screen readers */
+    label?: string;
+    /** Whether to center the loading indicator in its container */
+    centered?: boolean;
+    /** Whether to fill the parent container */
+    fill?: boolean;
+    /** Whether to show the loading indicator with a backdrop overlay */
+    overlay?: boolean;
+    /** Color variant - uses accent color by default, 'current' inherits text color */
+    color?: 'accent' | 'current' | 'muted';
+}
+export interface LoadingInlineProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Size of the loading indicator */
+    size?: 'sm' | 'md';
+    /** Accessible label */
+    label?: string;
+}
+export interface LoadingScreenProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Loading indicator size */
+    size?: LoadingSize;
+    /** Loading indicator variant */
+    variant?: LoadingVariant;
+    /** Optional label text to display */
+    label?: string;
+    /** Whether to show the label text visually */
+    showLabel?: boolean;
+}
+declare const LoadingRoot: React.ForwardRefExoticComponent<LoadingProps & React.RefAttributes<HTMLDivElement>>;
+declare function LoadingInline({ size, label, className, ...htmlProps }: LoadingInlineProps): import("react/jsx-runtime").JSX.Element;
+declare function LoadingScreen({ size, variant, label, showLabel, className, ...htmlProps }: LoadingScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare const Loading: React.ForwardRefExoticComponent<LoadingProps & React.RefAttributes<HTMLDivElement>> & {
+    Inline: typeof LoadingInline;
+    Screen: typeof LoadingScreen;
+};
+export { LoadingRoot, LoadingInline, LoadingScreen, };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,oCAAoC;IACpC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kFAAkF;IAClF,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;CACxC;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC/E,oCAAoC;IACpC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,6BAA6B;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,gCAAgC;IAChC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA+CD,QAAA,MAAM,WAAW,qFAyDhB,CAAC;AAMF,iBAAS,aAAa,CAAC,EACrB,IAAW,EACX,KAAoB,EACpB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,kBAAkB,2CAmBpB;AAMD,iBAAS,aAAa,CAAC,EACrB,IAAW,EACX,OAAmB,EACnB,KAAoB,EACpB,SAAiB,EACjB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,kBAAkB,2CAoBpB;AAMD,eAAO,MAAM,OAAO;;;CAGlB,CAAC;AAGH,OAAO,EACL,WAAW,EACX,aAAa,EACb,aAAa,GACd,CAAC"}