@usefragments/ui 1.0.0

package/dist/components/Message/index.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Message.module.scss.js";
+import { Markdown } from "../../markdown.js";
+const MessageContext = React.createContext(null);
+function useMessageContext() {
+  const context = React.useContext(MessageContext);
+  if (!context) {
+    throw new Error("Message compound components must be used within a Message");
+  }
+  return context;
+}
+function formatTimestamp(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diff = now.getTime() - date.getTime();
+  const minutes = Math.floor(diff / 6e4);
+  const hours = Math.floor(diff / 36e5);
+  if (minutes < 1) return "Just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function UserIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+    }
+  );
+}
+function AssistantIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z" })
+    }
+  );
+}
+function SystemIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" })
+    }
+  );
+}
+function MessageContent({ children, markdown, className, ...htmlProps }) {
+  const { status } = useMessageContext();
+  const classes = [
+    styles.content,
+    status === "streaming" && styles.streaming,
+    className
+  ].filter(Boolean).join(" ");
+  const content = markdown && typeof children === "string" ? /* @__PURE__ */ jsx(Markdown, { content: children }) : children;
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children: content });
+}
+function MessageActions({ children, className, ...htmlProps }) {
+  const classes = [styles.actions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
+}
+function MessageTimestamp({
+  date,
+  format: customFormat,
+  className,
+  ...htmlProps
+}) {
+  const { timestamp } = useMessageContext();
+  const dateToFormat = date ?? timestamp;
+  if (!dateToFormat) return null;
+  const formatted = customFormat ? customFormat(dateToFormat) : formatTimestamp(dateToFormat);
+  const classes = [styles.timestamp, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { ...htmlProps, className: classes, children: formatted });
+}
+function MessageAvatar({ children, src, alt, className, ...htmlProps }) {
+  const { role } = useMessageContext();
+  const classes = [
+    styles.avatar,
+    styles[`avatar${role.charAt(0).toUpperCase() + role.slice(1)}`],
+    src && styles.avatarImage,
+    className
+  ].filter(Boolean).join(" ");
+  const defaultIcon = role === "user" ? /* @__PURE__ */ jsx(UserIcon, {}) : role === "assistant" ? /* @__PURE__ */ jsx(AssistantIcon, {}) : /* @__PURE__ */ jsx(SystemIcon, {});
+  const content = children ?? (src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? role, className: styles.avatarImg }) : defaultIcon);
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children: content });
+}
+function MessageRoot({
+  role,
+  children,
+  status = "complete",
+  timestamp,
+  avatar,
+  actions,
+  className,
+  ...htmlProps
+}) {
+  const contextValue = {
+    role,
+    status,
+    timestamp
+  };
+  const classes = [
+    styles.message,
+    styles[role],
+    status === "error" && styles.error,
+    status === "sending" && styles.sending,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(MessageContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...htmlProps,
+      className: classes,
+      "data-role": role,
+      "data-status": status,
+      children: [
+        avatar !== void 0 ? avatar : /* @__PURE__ */ jsx(MessageAvatar, {}),
+        /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
+          children,
+          actions && /* @__PURE__ */ jsx(MessageActions, { children: actions })
+        ] })
+      ]
+    }
+  ) });
+}
+const Message = Object.assign(MessageRoot, {
+  Content: MessageContent,
+  Actions: MessageActions,
+  Timestamp: MessageTimestamp,
+  Avatar: MessageAvatar
+});
+export {
+  Message,
+  MessageActions,
+  MessageAvatar,
+  MessageContent,
+  MessageRoot,
+  MessageTimestamp,
+  useMessageContext
+};

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

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const root = "_root_q3nts_1";
+const rootVertical = "_rootVertical_q3nts_9";
+const list = "_list_q3nts_14";
+const listVertical = "_listVertical_q3nts_28";
+const trigger = "_trigger_q3nts_33";
+const triggerChevron = "_triggerChevron_q3nts_85";
+const content = "_content_q3nts_93";
+const link = "_link_q3nts_156";
+const linkActive = "_linkActive_q3nts_197";
+const linkStructured = "_linkStructured_q3nts_203";
+const linkIcon = "_linkIcon_q3nts_216";
+const linkBody = "_linkBody_q3nts_227";
+const linkTitle = "_linkTitle_q3nts_234";
+const linkDescription = "_linkDescription_q3nts_241";
+const linkFeatured = "_linkFeatured_q3nts_247";
+const indicator = "_indicator_q3nts_257";
+const viewport = "_viewport_q3nts_267";
+const hamburger = "_hamburger_q3nts_299";
+const drawerBackdrop = "_drawerBackdrop_q3nts_346";
+const drawer = "_drawer_q3nts_346";
+const drawerHeader = "_drawerHeader_q3nts_380";
+const drawerClose = "_drawerClose_q3nts_389";
+const drawerBody = "_drawerBody_q3nts_427";
+const drawerNav = "_drawerNav_q3nts_433";
+const drawerLink = "_drawerLink_q3nts_438";
+const drawerSectionLabel = "_drawerSectionLabel_q3nts_472";
+const drawerCollapsibleTrigger = "_drawerCollapsibleTrigger_q3nts_483";
+const drawerCollapsibleContent = "_drawerCollapsibleContent_q3nts_526";
+const styles = {
+  root,
+  rootVertical,
+  list,
+  listVertical,
+  trigger,
+  triggerChevron,
+  content,
+  link,
+  linkActive,
+  linkStructured,
+  linkIcon,
+  linkBody,
+  linkTitle,
+  linkDescription,
+  linkFeatured,
+  indicator,
+  viewport,
+  hamburger,
+  drawerBackdrop,
+  drawer,
+  drawerHeader,
+  drawerClose,
+  drawerBody,
+  drawerNav,
+  drawerLink,
+  drawerSectionLabel,
+  drawerCollapsibleTrigger,
+  drawerCollapsibleContent
+};
+exports.content = content;
+exports.default = styles;
+exports.drawer = drawer;
+exports.drawerBackdrop = drawerBackdrop;
+exports.drawerBody = drawerBody;
+exports.drawerClose = drawerClose;
+exports.drawerCollapsibleContent = drawerCollapsibleContent;
+exports.drawerCollapsibleTrigger = drawerCollapsibleTrigger;
+exports.drawerHeader = drawerHeader;
+exports.drawerLink = drawerLink;
+exports.drawerNav = drawerNav;
+exports.drawerSectionLabel = drawerSectionLabel;
+exports.hamburger = hamburger;
+exports.indicator = indicator;
+exports.link = link;
+exports.linkActive = linkActive;
+exports.linkBody = linkBody;
+exports.linkDescription = linkDescription;
+exports.linkFeatured = linkFeatured;
+exports.linkIcon = linkIcon;
+exports.linkStructured = linkStructured;
+exports.linkTitle = linkTitle;
+exports.list = list;
+exports.listVertical = listVertical;
+exports.root = root;
+exports.rootVertical = rootVertical;
+exports.trigger = trigger;
+exports.triggerChevron = triggerChevron;
+exports.viewport = viewport;

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

@@ -0,0 +1,89 @@
+const root = "_root_q3nts_1";
+const rootVertical = "_rootVertical_q3nts_9";
+const list = "_list_q3nts_14";
+const listVertical = "_listVertical_q3nts_28";
+const trigger = "_trigger_q3nts_33";
+const triggerChevron = "_triggerChevron_q3nts_85";
+const content = "_content_q3nts_93";
+const link = "_link_q3nts_156";
+const linkActive = "_linkActive_q3nts_197";
+const linkStructured = "_linkStructured_q3nts_203";
+const linkIcon = "_linkIcon_q3nts_216";
+const linkBody = "_linkBody_q3nts_227";
+const linkTitle = "_linkTitle_q3nts_234";
+const linkDescription = "_linkDescription_q3nts_241";
+const linkFeatured = "_linkFeatured_q3nts_247";
+const indicator = "_indicator_q3nts_257";
+const viewport = "_viewport_q3nts_267";
+const hamburger = "_hamburger_q3nts_299";
+const drawerBackdrop = "_drawerBackdrop_q3nts_346";
+const drawer = "_drawer_q3nts_346";
+const drawerHeader = "_drawerHeader_q3nts_380";
+const drawerClose = "_drawerClose_q3nts_389";
+const drawerBody = "_drawerBody_q3nts_427";
+const drawerNav = "_drawerNav_q3nts_433";
+const drawerLink = "_drawerLink_q3nts_438";
+const drawerSectionLabel = "_drawerSectionLabel_q3nts_472";
+const drawerCollapsibleTrigger = "_drawerCollapsibleTrigger_q3nts_483";
+const drawerCollapsibleContent = "_drawerCollapsibleContent_q3nts_526";
+const styles = {
+  root,
+  rootVertical,
+  list,
+  listVertical,
+  trigger,
+  triggerChevron,
+  content,
+  link,
+  linkActive,
+  linkStructured,
+  linkIcon,
+  linkBody,
+  linkTitle,
+  linkDescription,
+  linkFeatured,
+  indicator,
+  viewport,
+  hamburger,
+  drawerBackdrop,
+  drawer,
+  drawerHeader,
+  drawerClose,
+  drawerBody,
+  drawerNav,
+  drawerLink,
+  drawerSectionLabel,
+  drawerCollapsibleTrigger,
+  drawerCollapsibleContent
+};
+export {
+  content,
+  styles as default,
+  drawer,
+  drawerBackdrop,
+  drawerBody,
+  drawerClose,
+  drawerCollapsibleContent,
+  drawerCollapsibleTrigger,
+  drawerHeader,
+  drawerLink,
+  drawerNav,
+  drawerSectionLabel,
+  hamburger,
+  indicator,
+  link,
+  linkActive,
+  linkBody,
+  linkDescription,
+  linkFeatured,
+  linkIcon,
+  linkStructured,
+  linkTitle,
+  list,
+  listVertical,
+  root,
+  rootVertical,
+  trigger,
+  triggerChevron,
+  viewport
+};

package/dist/components/NavigationMenu/NavigationMenuContext.cjs

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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 NavigationMenuContext = React__namespace.createContext(null);
+function useNavigationMenuContext() {
+  const ctx = React__namespace.useContext(NavigationMenuContext);
+  if (!ctx) {
+    throw new Error("NavigationMenu compound components must be used within NavigationMenu");
+  }
+  return ctx;
+}
+const NavigationMenuItemContext = React__namespace.createContext(null);
+function useNavigationMenuItemContext() {
+  const ctx = React__namespace.useContext(NavigationMenuItemContext);
+  if (!ctx) {
+    throw new Error("NavigationMenu.Trigger/Content must be used within NavigationMenu.Item");
+  }
+  return ctx;
+}
+exports.NavigationMenuContext = NavigationMenuContext;
+exports.NavigationMenuItemContext = NavigationMenuItemContext;
+exports.useNavigationMenuContext = useNavigationMenuContext;
+exports.useNavigationMenuItemContext = useNavigationMenuItemContext;

package/dist/components/NavigationMenu/NavigationMenuContext.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+export interface NavigationMenuItemInfo {
+    value: string;
+    triggerLabel: string;
+    contentChildren: React.ReactNode;
+    linkHref?: string;
+}
+export interface NavigationMenuIconRenderState {
+    slot: 'triggerChevron' | 'mobileMenu' | 'mobileClose' | 'drawerClose';
+    open?: boolean;
+    isMobile?: boolean;
+}
+export type NavigationMenuIconSlot = React.ReactNode | ((state: NavigationMenuIconRenderState) => React.ReactNode);
+export type NavigationMenuIcons = Partial<Record<NavigationMenuIconRenderState['slot'], NavigationMenuIconSlot>>;
+export interface NavigationMenuContextValue {
+    value: string;
+    setValue: (value: string) => void;
+    orientation: 'horizontal' | 'vertical';
+    delayDuration: number;
+    skipDelayDuration: number;
+    openTimerRef: React.MutableRefObject<ReturnType<typeof setTimeout> | null>;
+    closeTimerRef: React.MutableRefObject<ReturnType<typeof setTimeout> | null>;
+    isRecentlyOpenRef: React.MutableRefObject<boolean>;
+    skipDelayTimerRef: React.MutableRefObject<ReturnType<typeof setTimeout> | null>;
+    triggerRefs: React.MutableRefObject<Map<string, HTMLButtonElement>>;
+    triggerOrder: React.MutableRefObject<string[]>;
+    itemOrder: React.MutableRefObject<string[]>;
+    itemInfoMap: React.MutableRefObject<Map<string, NavigationMenuItemInfo>>;
+    viewportSize: {
+        width: number;
+        height: number;
+    };
+    setViewportSize: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+    previousValue: React.MutableRefObject<string>;
+    isMobile: boolean;
+    mobileOpen: boolean;
+    setMobileOpen: (open: boolean) => void;
+    mobileContentChildren: React.ReactNode;
+    setMobileContentChildren: (children: React.ReactNode) => void;
+    mobileBrandChildren: React.ReactNode;
+    setMobileBrandChildren: (children: React.ReactNode) => void;
+    rootId: string;
+    icons?: NavigationMenuIcons;
+}
+export declare const NavigationMenuContext: React.Context<NavigationMenuContextValue | null>;
+export declare function useNavigationMenuContext(): NavigationMenuContextValue;
+export interface NavigationMenuItemContextValue {
+    value: string;
+    triggerId: string;
+    contentId: string;
+}
+export declare const NavigationMenuItemContext: React.Context<NavigationMenuItemContextValue | null>;
+export declare function useNavigationMenuItemContext(): NavigationMenuItemContextValue;
+//# sourceMappingURL=NavigationMenuContext.d.ts.map

package/dist/components/NavigationMenu/NavigationMenuContext.d.ts.map

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

package/dist/components/NavigationMenu/NavigationMenuContext.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+const NavigationMenuContext = React.createContext(null);
+function useNavigationMenuContext() {
+  const ctx = React.useContext(NavigationMenuContext);
+  if (!ctx) {
+    throw new Error("NavigationMenu compound components must be used within NavigationMenu");
+  }
+  return ctx;
+}
+const NavigationMenuItemContext = React.createContext(null);
+function useNavigationMenuItemContext() {
+  const ctx = React.useContext(NavigationMenuItemContext);
+  if (!ctx) {
+    throw new Error("NavigationMenu.Trigger/Content must be used within NavigationMenu.Item");
+  }
+  return ctx;
+}
+export {
+  NavigationMenuContext,
+  NavigationMenuItemContext,
+  useNavigationMenuContext,
+  useNavigationMenuItemContext
+};