@usefragments/ui 1.0.0

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const wrapper = "_wrapper_3b0fp_1";
+const table = "_table_3b0fp_6";
+const caption = "_caption_3b0fp_14";
+const captionHidden = "_captionHidden_3b0fp_23";
+const sm = "_sm_3b0fp_35";
+const th = "_th_3b0fp_35";
+const td = "_td_3b0fp_36";
+const md = "_md_3b0fp_41";
+const compact = "_compact_3b0fp_47";
+const tabular = "_tabular_3b0fp_62";
+const thead = "_thead_3b0fp_66";
+const headerContent = "_headerContent_3b0fp_89";
+const row = "_row_3b0fp_95";
+const selected = "_selected_3b0fp_109";
+const tfoot = "_tfoot_3b0fp_123";
+const striped = "_striped_3b0fp_131";
+const tbody = "_tbody_3b0fp_131";
+const bordered = "_bordered_3b0fp_139";
+const styles = {
+  wrapper,
+  table,
+  caption,
+  captionHidden,
+  sm,
+  th,
+  td,
+  md,
+  compact,
+  tabular,
+  thead,
+  headerContent,
+  row,
+  selected,
+  tfoot,
+  striped,
+  tbody,
+  bordered
+};
+exports.bordered = bordered;
+exports.caption = caption;
+exports.captionHidden = captionHidden;
+exports.compact = compact;
+exports.default = styles;
+exports.headerContent = headerContent;
+exports.md = md;
+exports.row = row;
+exports.selected = selected;
+exports.sm = sm;
+exports.striped = striped;
+exports.table = table;
+exports.tabular = tabular;
+exports.tbody = tbody;
+exports.td = td;
+exports.tfoot = tfoot;
+exports.th = th;
+exports.thead = thead;
+exports.wrapper = wrapper;

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

@@ -0,0 +1,59 @@
+const wrapper = "_wrapper_3b0fp_1";
+const table = "_table_3b0fp_6";
+const caption = "_caption_3b0fp_14";
+const captionHidden = "_captionHidden_3b0fp_23";
+const sm = "_sm_3b0fp_35";
+const th = "_th_3b0fp_35";
+const td = "_td_3b0fp_36";
+const md = "_md_3b0fp_41";
+const compact = "_compact_3b0fp_47";
+const tabular = "_tabular_3b0fp_62";
+const thead = "_thead_3b0fp_66";
+const headerContent = "_headerContent_3b0fp_89";
+const row = "_row_3b0fp_95";
+const selected = "_selected_3b0fp_109";
+const tfoot = "_tfoot_3b0fp_123";
+const striped = "_striped_3b0fp_131";
+const tbody = "_tbody_3b0fp_131";
+const bordered = "_bordered_3b0fp_139";
+const styles = {
+  wrapper,
+  table,
+  caption,
+  captionHidden,
+  sm,
+  th,
+  td,
+  md,
+  compact,
+  tabular,
+  thead,
+  headerContent,
+  row,
+  selected,
+  tfoot,
+  striped,
+  tbody,
+  bordered
+};
+export {
+  bordered,
+  caption,
+  captionHidden,
+  compact,
+  styles as default,
+  headerContent,
+  md,
+  row,
+  selected,
+  sm,
+  striped,
+  table,
+  tabular,
+  tbody,
+  td,
+  tfoot,
+  th,
+  thead,
+  wrapper
+};

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

@@ -0,0 +1,61 @@
+import * as React from "react";
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+    /** Size variant. `compact` gives dense 36px-row dashboard lists with 12px
+     * text and hairline dividers — use when the table is a status surface,
+     * not a reading experience. */
+    size?: "sm" | "md" | "compact";
+    /** Show alternating row backgrounds */
+    striped?: boolean;
+    /** Wrap table in a bordered container */
+    bordered?: boolean;
+    /** Class applied to the outer wrapper element */
+    wrapperClassName?: string;
+    /** Props applied to the outer wrapper element */
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+    children?: React.ReactNode;
+}
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /** Mark row as selected */
+    selected?: boolean;
+    /** Explicit stripe band for virtualized or nested rows. Rows with the same
+     * band share the same background when the parent table is striped. */
+    band?: "default" | "alt";
+    children?: React.ReactNode;
+}
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /** Use tabular (fixed-width) numerals so digits align in columns. Ideal
+     * for numeric columns that update — counts, timestamps, currency. */
+    tabularNums?: boolean;
+    children?: React.ReactNode;
+}
+export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableHeaderCellElement> {
+    /** Scope for the header cell */
+    scope?: string;
+    children?: React.ReactNode;
+}
+export interface TableCaptionProps extends Omit<React.HTMLAttributes<HTMLTableCaptionElement>, "hidden"> {
+    /** Visually hide the caption (screen readers only) */
+    visuallyHidden?: boolean;
+    /** @deprecated Use visuallyHidden */
+    hidden?: boolean;
+    children?: React.ReactNode;
+}
+declare function TableHead({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, tabularNums, children, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+declare function TableHeaderCell({ className, scope, children, ...props }: TableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, visuallyHidden, hidden, children, ...props }: TableCaptionProps): import("react/jsx-runtime").JSX.Element;
+declare function TableRoot({ size, striped, bordered, wrapperClassName, wrapperProps, className, children, ...htmlProps }: TableProps): import("react/jsx-runtime").JSX.Element;
+export declare const Table: typeof TableRoot & {
+    Root: typeof TableRoot;
+    Head: typeof TableHead;
+    Body: typeof TableBody;
+    Footer: typeof TableFooter;
+    Row: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+    Cell: typeof TableCell;
+    HeaderCell: typeof TableHeaderCell;
+    Caption: typeof TableCaption;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxE;;mCAE+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/B,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;0EACsE;IACtE,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IAClF;yEACqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,0BAA0B,CAAC;IAC9F,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,EAC7C,QAAQ,CACT;IACC,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAM/C;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAM/C;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAM/C;AAmBD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAShF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,KAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAM9F;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,cAAc,EACd,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAYnB;AAMD,iBAAS,SAAS,CAAC,EACjB,IAAW,EACX,OAAe,EACf,QAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,2CAsBZ;AAMD,eAAO,MAAM,KAAK;;;;;;;;;CAShB,CAAC"}

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const root = "_root_17stu_1";
+const title = "_title_17stu_13";
+const list = "_list_17stu_18";
+const item = "_item_17stu_29";
+const groupHeaderRow = "_groupHeaderRow_17stu_30";
+const link = "_link_17stu_118";
+const linkLabel = "_linkLabel_17stu_145";
+const leading = "_leading_17stu_153";
+const trailing = "_trailing_17stu_154";
+const active = "_active_17stu_166";
+const groupHeader = "_groupHeader_17stu_30";
+const groupHeaderInteractive = "_groupHeaderInteractive_17stu_191";
+const groupHeaderActive = "_groupHeaderActive_17stu_204";
+const groupChevron = "_groupChevron_17stu_208";
+const groupLabel = "_groupLabel_17stu_226";
+const styles = {
+  root,
+  title,
+  list,
+  item,
+  groupHeaderRow,
+  link,
+  linkLabel,
+  leading,
+  trailing,
+  active,
+  groupHeader,
+  groupHeaderInteractive,
+  groupHeaderActive,
+  groupChevron,
+  groupLabel
+};
+exports.active = active;
+exports.default = styles;
+exports.groupChevron = groupChevron;
+exports.groupHeader = groupHeader;
+exports.groupHeaderActive = groupHeaderActive;
+exports.groupHeaderInteractive = groupHeaderInteractive;
+exports.groupHeaderRow = groupHeaderRow;
+exports.groupLabel = groupLabel;
+exports.item = item;
+exports.leading = leading;
+exports.link = link;
+exports.linkLabel = linkLabel;
+exports.list = list;
+exports.root = root;
+exports.title = title;
+exports.trailing = trailing;

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

@@ -0,0 +1,50 @@
+const root = "_root_17stu_1";
+const title = "_title_17stu_13";
+const list = "_list_17stu_18";
+const item = "_item_17stu_29";
+const groupHeaderRow = "_groupHeaderRow_17stu_30";
+const link = "_link_17stu_118";
+const linkLabel = "_linkLabel_17stu_145";
+const leading = "_leading_17stu_153";
+const trailing = "_trailing_17stu_154";
+const active = "_active_17stu_166";
+const groupHeader = "_groupHeader_17stu_30";
+const groupHeaderInteractive = "_groupHeaderInteractive_17stu_191";
+const groupHeaderActive = "_groupHeaderActive_17stu_204";
+const groupChevron = "_groupChevron_17stu_208";
+const groupLabel = "_groupLabel_17stu_226";
+const styles = {
+  root,
+  title,
+  list,
+  item,
+  groupHeaderRow,
+  link,
+  linkLabel,
+  leading,
+  trailing,
+  active,
+  groupHeader,
+  groupHeaderInteractive,
+  groupHeaderActive,
+  groupChevron,
+  groupLabel
+};
+export {
+  active,
+  styles as default,
+  groupChevron,
+  groupHeader,
+  groupHeaderActive,
+  groupHeaderInteractive,
+  groupHeaderRow,
+  groupLabel,
+  item,
+  leading,
+  link,
+  linkLabel,
+  list,
+  root,
+  title,
+  trailing
+};

package/dist/components/TableOfContents/index.cjs

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const TableOfContents_module = require("./TableOfContents.module.scss.cjs");
+const index = require("../Text/index.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);
+const TocContext = React__namespace.createContext({ depth: 0 });
+function ChevronIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "10",
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" })
+    }
+  );
+}
+function TableOfContentsRoot({
+  children,
+  label = "Table of contents",
+  title = "On This Page",
+  hideTitle = false,
+  className,
+  "aria-label": ariaLabel,
+  ...htmlProps
+}) {
+  const classes = [TableOfContents_module.default.root, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { ...htmlProps, "aria-label": ariaLabel ?? label, className: classes, children: [
+    !hideTitle && /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "p", variant: "section-label", className: TableOfContents_module.default.title, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(TocContext.Provider, { value: { depth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: TableOfContents_module.default.list, children }) })
+  ] });
+}
+function TableOfContentsItem({
+  children,
+  id,
+  active = false,
+  indent = false,
+  leading,
+  trailing,
+  className,
+  onClick,
+  href: _href,
+  ...htmlProps
+}) {
+  const { depth } = React__namespace.useContext(TocContext);
+  const effectiveDepth = depth > 0 ? depth : indent ? 1 : 0;
+  const linkClasses = [
+    TableOfContents_module.default.link,
+    active && TableOfContents_module.default.active,
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = (e) => {
+    onClick == null ? void 0 : onClick(e);
+    if (e.defaultPrevented) return;
+    e.preventDefault();
+    const el = document.getElementById(id);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth" });
+      window.history.replaceState(null, "", `#${id}`);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      className: TableOfContents_module.default.item,
+      "data-depth": effectiveDepth,
+      "data-active": active || void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "a",
+        {
+          ...htmlProps,
+          href: `#${id}`,
+          className: linkClasses,
+          onClick: handleClick,
+          "aria-current": active ? "location" : void 0,
+          children: [
+            leading != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.leading, children: leading }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.linkLabel, children }),
+            trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.trailing, children: trailing })
+          ]
+        }
+      )
+    }
+  );
+}
+function useControlledOpen(controlled, defaultValue, onChange) {
+  const [internal, setInternal] = React__namespace.useState(defaultValue);
+  const isControlled = controlled !== void 0;
+  const value = isControlled ? controlled : internal;
+  const setValue = React__namespace.useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [isControlled, onChange]
+  );
+  return [value, setValue];
+}
+function TableOfContentsGroup({
+  children,
+  label,
+  leading,
+  trailing,
+  defaultOpen = true,
+  open: controlledOpen,
+  onOpenChange,
+  collapsible = true,
+  disabled = false,
+  active = false
+}) {
+  const { depth } = React__namespace.useContext(TocContext);
+  const [open, setOpen] = useControlledOpen(controlledOpen, defaultOpen, onOpenChange);
+  const isToggleable = collapsible && !disabled;
+  const isOpen = isToggleable ? open : true;
+  const headerClasses = [
+    TableOfContents_module.default.groupHeader,
+    isToggleable && TableOfContents_module.default.groupHeaderInteractive,
+    active && TableOfContents_module.default.groupHeaderActive
+  ].filter(Boolean).join(" ");
+  const headerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isToggleable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.groupChevron, "data-open": isOpen || void 0, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, {}) }),
+    leading != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.leading, children: leading }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.groupLabel, children: label }),
+    trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.trailing, children: trailing })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        className: TableOfContents_module.default.groupHeaderRow,
+        "data-depth": depth,
+        "data-active": active || void 0,
+        children: isToggleable ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: headerClasses,
+            onClick: () => setOpen(!open),
+            "aria-expanded": isOpen,
+            children: headerContent
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headerClasses, children: headerContent })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(TocContext.Provider, { value: { depth: depth + 1 }, children })
+  ] });
+}
+const TableOfContents = Object.assign(TableOfContentsRoot, {
+  Item: TableOfContentsItem,
+  Group: TableOfContentsGroup
+});
+exports.TableOfContents = TableOfContents;
+exports.TableOfContentsGroup = TableOfContentsGroup;
+exports.TableOfContentsItem = TableOfContentsItem;
+exports.TableOfContentsRoot = TableOfContentsRoot;

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+export interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    /** Label for the nav landmark (default: "Table of contents") */
+    label?: string;
+    /** Title displayed above the list (default: "On This Page") */
+    title?: string;
+    /** Hide the title */
+    hideTitle?: boolean;
+}
+export interface TableOfContentsItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
+    children: React.ReactNode;
+    /** The heading ID to link to */
+    id: string;
+    /** Whether this item is currently active/visible */
+    active?: boolean;
+    /** Force depth=1 indent for items not nested in a Group. */
+    indent?: boolean;
+    /** Optional leading element (icon, dot, etc.) — rendered before the label */
+    leading?: React.ReactNode;
+    /** Optional trailing element (count, badge, etc.) — rendered after the label */
+    trailing?: React.ReactNode;
+}
+export interface TableOfContentsGroupProps {
+    children: React.ReactNode;
+    /** Label rendered in the group header row */
+    label: React.ReactNode;
+    /** Optional trailing element on the header row (e.g., count badge) */
+    trailing?: React.ReactNode;
+    /** Optional leading element on the header row (e.g., icon) */
+    leading?: React.ReactNode;
+    /** Whether the group is initially open (uncontrolled). Defaults to true. */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback fired when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Allow toggling open/closed via the header button. Defaults to true. */
+    collapsible?: boolean;
+    /** Disable expand/collapse — header renders as a non-interactive label */
+    disabled?: boolean;
+    /** Highlight the group label in accent — typically when a child is active. */
+    active?: boolean;
+}
+declare function TableOfContentsRoot({ children, label, title, hideTitle, className, 'aria-label': ariaLabel, ...htmlProps }: TableOfContentsProps): import("react/jsx-runtime").JSX.Element;
+declare function TableOfContentsItem({ children, id, active, indent, leading, trailing, className, onClick, href: _href, ...htmlProps }: TableOfContentsItemProps): import("react/jsx-runtime").JSX.Element;
+declare function TableOfContentsGroup({ children, label, leading, trailing, defaultOpen, open: controlledOpen, onOpenChange, collapsible, disabled, active, }: TableOfContentsGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const TableOfContents: typeof TableOfContentsRoot & {
+    Item: typeof TableOfContentsItem;
+    Group: typeof TableOfContentsGroup;
+};
+export { TableOfContentsRoot, TableOfContentsItem, TableOfContentsGroup };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableOfContents/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/G,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmCD,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,KAA2B,EAC3B,KAAsB,EACtB,SAAiB,EACjB,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAetB;AAED,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,EAAE,EACF,MAAc,EACd,MAAc,EACd,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EAAE,KAAK,EACX,GAAG,SAAS,EACb,EAAE,wBAAwB,2CAyC1B;AAuBD,iBAAS,oBAAoB,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAkB,EAClB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAkB,EAClB,QAAgB,EAChB,MAAc,GACf,EAAE,yBAAyB,2CAqD3B;AAMD,eAAO,MAAM,eAAe;;;CAG1B,CAAC;AAGH,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/TableOfContents/index.js

@@ -0,0 +1,159 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./TableOfContents.module.scss.js";
+import { Text } from "../Text/index.js";
+const TocContext = React.createContext({ depth: 0 });
+function ChevronIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "10",
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" })
+    }
+  );
+}
+function TableOfContentsRoot({
+  children,
+  label = "Table of contents",
+  title = "On This Page",
+  hideTitle = false,
+  className,
+  "aria-label": ariaLabel,
+  ...htmlProps
+}) {
+  const classes = [styles.root, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("nav", { ...htmlProps, "aria-label": ariaLabel ?? label, className: classes, children: [
+    !hideTitle && /* @__PURE__ */ jsx(Text, { as: "p", variant: "section-label", className: styles.title, children: title }),
+    /* @__PURE__ */ jsx(TocContext.Provider, { value: { depth: 0 }, children: /* @__PURE__ */ jsx("ul", { className: styles.list, children }) })
+  ] });
+}
+function TableOfContentsItem({
+  children,
+  id,
+  active = false,
+  indent = false,
+  leading,
+  trailing,
+  className,
+  onClick,
+  href: _href,
+  ...htmlProps
+}) {
+  const { depth } = React.useContext(TocContext);
+  const effectiveDepth = depth > 0 ? depth : indent ? 1 : 0;
+  const linkClasses = [
+    styles.link,
+    active && styles.active,
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = (e) => {
+    onClick == null ? void 0 : onClick(e);
+    if (e.defaultPrevented) return;
+    e.preventDefault();
+    const el = document.getElementById(id);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth" });
+      window.history.replaceState(null, "", `#${id}`);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: styles.item,
+      "data-depth": effectiveDepth,
+      "data-active": active || void 0,
+      children: /* @__PURE__ */ jsxs(
+        "a",
+        {
+          ...htmlProps,
+          href: `#${id}`,
+          className: linkClasses,
+          onClick: handleClick,
+          "aria-current": active ? "location" : void 0,
+          children: [
+            leading != null && /* @__PURE__ */ jsx("span", { className: styles.leading, children: leading }),
+            /* @__PURE__ */ jsx("span", { className: styles.linkLabel, children }),
+            trailing != null && /* @__PURE__ */ jsx("span", { className: styles.trailing, children: trailing })
+          ]
+        }
+      )
+    }
+  );
+}
+function useControlledOpen(controlled, defaultValue, onChange) {
+  const [internal, setInternal] = React.useState(defaultValue);
+  const isControlled = controlled !== void 0;
+  const value = isControlled ? controlled : internal;
+  const setValue = React.useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [isControlled, onChange]
+  );
+  return [value, setValue];
+}
+function TableOfContentsGroup({
+  children,
+  label,
+  leading,
+  trailing,
+  defaultOpen = true,
+  open: controlledOpen,
+  onOpenChange,
+  collapsible = true,
+  disabled = false,
+  active = false
+}) {
+  const { depth } = React.useContext(TocContext);
+  const [open, setOpen] = useControlledOpen(controlledOpen, defaultOpen, onOpenChange);
+  const isToggleable = collapsible && !disabled;
+  const isOpen = isToggleable ? open : true;
+  const headerClasses = [
+    styles.groupHeader,
+    isToggleable && styles.groupHeaderInteractive,
+    active && styles.groupHeaderActive
+  ].filter(Boolean).join(" ");
+  const headerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isToggleable && /* @__PURE__ */ jsx("span", { className: styles.groupChevron, "data-open": isOpen || void 0, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronIcon, {}) }),
+    leading != null && /* @__PURE__ */ jsx("span", { className: styles.leading, children: leading }),
+    /* @__PURE__ */ jsx("span", { className: styles.groupLabel, children: label }),
+    trailing != null && /* @__PURE__ */ jsx("span", { className: styles.trailing, children: trailing })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: styles.groupHeaderRow,
+        "data-depth": depth,
+        "data-active": active || void 0,
+        children: isToggleable ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: headerClasses,
+            onClick: () => setOpen(!open),
+            "aria-expanded": isOpen,
+            children: headerContent
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: headerClasses, children: headerContent })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(TocContext.Provider, { value: { depth: depth + 1 }, children })
+  ] });
+}
+const TableOfContents = Object.assign(TableOfContentsRoot, {
+  Item: TableOfContentsItem,
+  Group: TableOfContentsGroup
+});
+export {
+  TableOfContents,
+  TableOfContentsGroup,
+  TableOfContentsItem,
+  TableOfContentsRoot
+};