@ansh-ui/react 0.2.0

package/dist/chunk-OLTS6G5M.js

@@ -0,0 +1,606 @@
+import { useControllableState } from './chunk-LXCIXR5T.js';
+import { cx } from './chunk-H34OXXJU.js';
+import { useId, useRef, useState, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function Tabs({
+  items,
+  value,
+  defaultValue,
+  onChange,
+  variant = "underline",
+  orientation = "horizontal",
+  size = "md",
+  fitted = false,
+  activateOnFocus = true,
+  label,
+  className,
+  children
+}) {
+  const [active, setActive] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? items.find((item) => !item.disabled)?.id ?? "",
+    onChange
+  });
+  const baseId = useId();
+  const tabRefs = useRef([]);
+  const activeIndex = items.findIndex((item) => item.id === active);
+  const activeItem = items[activeIndex];
+  const move = (delta) => {
+    if (items.length === 0) return;
+    let next = activeIndex < 0 ? 0 : activeIndex;
+    for (let attempts = 0; attempts < items.length; attempts++) {
+      next = (next + delta + items.length) % items.length;
+      if (!items[next]?.disabled) break;
+    }
+    tabRefs.current[next]?.focus();
+    if (activateOnFocus) setActive(items[next].id);
+  };
+  const onKeyDown = (event) => {
+    const forward = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+    const backward = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+    switch (event.key) {
+      case forward:
+        event.preventDefault();
+        move(1);
+        break;
+      case backward:
+        event.preventDefault();
+        move(-1);
+        break;
+      case "Home": {
+        event.preventDefault();
+        const first = items.findIndex((item) => !item.disabled);
+        if (first >= 0) {
+          tabRefs.current[first]?.focus();
+          if (activateOnFocus) setActive(items[first].id);
+        }
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        for (let i = items.length - 1; i >= 0; i--) {
+          if (!items[i]?.disabled) {
+            tabRefs.current[i]?.focus();
+            if (activateOnFocus) setActive(items[i].id);
+            break;
+          }
+        }
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "ansh-tabs",
+        `ansh-tabs--${variant}`,
+        `ansh-tabs--${orientation}`,
+        `ansh-tabs--${size}`,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "tablist",
+            "aria-label": label,
+            "aria-orientation": orientation,
+            className: cx("ansh-tabs__list", fitted && "ansh-tabs__list--fitted"),
+            onKeyDown,
+            children: items.map((item, index) => {
+              const selected = item.id === active;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: (node) => {
+                    tabRefs.current[index] = node;
+                  },
+                  type: "button",
+                  role: "tab",
+                  id: `${baseId}-tab-${item.id}`,
+                  "aria-selected": selected,
+                  "aria-controls": `${baseId}-panel-${item.id}`,
+                  tabIndex: selected ? 0 : -1,
+                  disabled: item.disabled,
+                  className: cx(
+                    "ansh-tabs__tab",
+                    selected && "ansh-tabs__tab--active",
+                    "ansh-focusable"
+                  ),
+                  onClick: () => setActive(item.id),
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsx("span", { className: "ansh-tabs__icon", children: item.icon }) : null,
+                    /* @__PURE__ */ jsx("span", { children: item.label }),
+                    item.badge !== void 0 ? /* @__PURE__ */ jsx("span", { className: "ansh-tabs__badge", children: item.badge }) : null
+                  ]
+                },
+                item.id
+              );
+            })
+          }
+        ),
+        activeItem?.content !== void 0 || children ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "tabpanel",
+            id: `${baseId}-panel-${active}`,
+            "aria-labelledby": `${baseId}-tab-${active}`,
+            tabIndex: 0,
+            className: "ansh-tabs__panel ansh-focusable",
+            children: activeItem?.content ?? children
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function Breadcrumbs({
+  items,
+  maxItems = Number.POSITIVE_INFINITY,
+  separator,
+  className
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const collapsed = !expanded && items.length > maxItems && maxItems >= 2;
+  const shown = collapsed ? [items[0], ...items.slice(-2)] : items;
+  const gapAfter = collapsed ? 0 : -1;
+  const chevron = separator ?? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M4.5 2.5L8 6l-3.5 3.5",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: cx("ansh-breadcrumbs", className), children: /* @__PURE__ */ jsx("ol", { className: "ansh-breadcrumbs__list", children: shown.map((crumb, index) => {
+    const isLast = index === shown.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "ansh-breadcrumbs__item", children: [
+      index > 0 ? /* @__PURE__ */ jsx("span", { className: "ansh-breadcrumbs__separator", "aria-hidden": "true", children: chevron }) : null,
+      isLast ? /* @__PURE__ */ jsxs("span", { className: "ansh-breadcrumbs__current", "aria-current": "page", children: [
+        crumb.icon,
+        crumb.label
+      ] }) : /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: crumb.href ?? "#",
+          className: "ansh-breadcrumbs__link ansh-focusable",
+          onClick: crumb.onClick ? (event) => {
+            event.preventDefault();
+            crumb.onClick();
+          } : void 0,
+          children: [
+            crumb.icon,
+            crumb.label
+          ]
+        }
+      ),
+      index === gapAfter ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "ansh-breadcrumbs__separator", "aria-hidden": "true", children: chevron }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ansh-breadcrumbs__more ansh-focusable",
+            "aria-label": `Show ${items.length - 3} hidden breadcrumbs`,
+            "aria-expanded": false,
+            onClick: () => setExpanded(true),
+            children: "\u2026"
+          }
+        )
+      ] }) : null
+    ] }, index);
+  }) }) });
+}
+function Stepper({
+  steps,
+  current,
+  onStepChange,
+  orientation = "horizontal",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cx("ansh-stepper", `ansh-stepper--${orientation}`, className),
+      "aria-label": "Progress",
+      children: /* @__PURE__ */ jsx("ol", { className: "ansh-stepper__list", children: steps.map((step, index) => {
+        const complete = index < current;
+        const active = index === current;
+        const state = step.error ? "error" : complete ? "complete" : active ? "current" : "upcoming";
+        const interactive = step.clickable && onStepChange && index !== current;
+        const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cx("ansh-stepper__marker", `ansh-stepper__marker--${state}`),
+              "aria-hidden": "true",
+              children: step.error ? "!" : complete ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width: "12", height: "12", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M2.5 7.5l3 3 6-6.5",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  fill: "none"
+                }
+              ) }) : index + 1
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "ansh-stepper__text", children: [
+            /* @__PURE__ */ jsx("span", { className: "ansh-stepper__label", children: step.label }),
+            step.description ? /* @__PURE__ */ jsx("span", { className: "ansh-stepper__description", children: step.description }) : null,
+            /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", children: step.error ? " \u2014 has errors" : complete ? " \u2014 completed" : active ? " \u2014 current step" : " \u2014 not started" })
+          ] })
+        ] });
+        return /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: cx("ansh-stepper__item", `ansh-stepper__item--${state}`),
+            "aria-current": active ? "step" : void 0,
+            children: interactive ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ansh-stepper__button ansh-focusable",
+                onClick: () => onStepChange(index),
+                children: inner
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "ansh-stepper__button", children: inner })
+          },
+          step.id
+        );
+      }) })
+    }
+  );
+}
+function NavigationMenu({
+  items,
+  label = "Main navigation",
+  className
+}) {
+  const [openId, setOpenId] = useState(null);
+  const timerRef = useRef(void 0);
+  const rootRef = useRef(null);
+  const baseId = useId();
+  const schedule = (next, delay) => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setOpenId(next), delay);
+  };
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  useEffect(() => {
+    if (!openId) return;
+    const root = rootRef.current;
+    if (!root) return;
+    const onFocusOut = (event) => {
+      const next = event.relatedTarget;
+      if (next && root.contains(next)) return;
+      setOpenId(null);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      setOpenId(null);
+      root.querySelector(`[aria-expanded="true"]`)?.focus();
+    };
+    root.addEventListener("focusout", onFocusOut);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      root.removeEventListener("focusout", onFocusOut);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [openId]);
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref: rootRef,
+      className: cx("ansh-navmenu", className),
+      "aria-label": label,
+      onMouseLeave: () => schedule(null, 200),
+      children: /* @__PURE__ */ jsx("ul", { className: "ansh-navmenu__list", children: items.map((item) => {
+        const hasPanel = Boolean(item.columns?.length);
+        const open = openId === item.id;
+        const panelId = `${baseId}-${item.id}`;
+        if (!hasPanel) {
+          return /* @__PURE__ */ jsx("li", { className: "ansh-navmenu__item", children: /* @__PURE__ */ jsx("a", { href: item.href ?? "#", className: "ansh-navmenu__link ansh-focusable", children: item.label }) }, item.id);
+        }
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cx("ansh-navmenu__item", open && "ansh-navmenu__item--open"),
+            onMouseEnter: () => schedule(item.id, 80),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "ansh-navmenu__link ansh-navmenu__link--trigger ansh-focusable",
+                  "aria-expanded": open,
+                  "aria-controls": panelId,
+                  onClick: () => setOpenId(open ? null : item.id),
+                  onKeyDown: (event) => {
+                    if (event.key === "ArrowDown") {
+                      event.preventDefault();
+                      setOpenId(item.id);
+                      requestAnimationFrame(() => {
+                        document.getElementById(panelId)?.querySelector("a, button")?.focus();
+                      });
+                    }
+                  },
+                  children: [
+                    item.label,
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cx("ansh-navmenu__chevron", open && "ansh-navmenu__chevron--open"),
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "10", height: "10", children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M3 4.5L6 7.5l3-3",
+                            stroke: "currentColor",
+                            strokeWidth: "1.5",
+                            fill: "none",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        ) })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: panelId,
+                  className: "ansh-navmenu__panel",
+                  hidden: !open,
+                  onMouseEnter: () => clearTimeout(timerRef.current),
+                  children: /* @__PURE__ */ jsxs("div", { className: "ansh-navmenu__grid", children: [
+                    item.columns.map((column) => /* @__PURE__ */ jsxs("div", { className: "ansh-navmenu__column", children: [
+                      column.heading ? /* @__PURE__ */ jsx("p", { className: "ansh-navmenu__heading", children: column.heading }) : null,
+                      /* @__PURE__ */ jsx("ul", { className: "ansh-navmenu__links", children: column.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                        "a",
+                        {
+                          href: link.href ?? "#",
+                          className: "ansh-navmenu__entry ansh-focusable",
+                          onClick: link.onClick ? (event) => {
+                            event.preventDefault();
+                            link.onClick();
+                            setOpenId(null);
+                          } : () => setOpenId(null),
+                          children: [
+                            link.icon ? /* @__PURE__ */ jsx("span", { className: "ansh-navmenu__icon", "aria-hidden": "true", children: link.icon }) : null,
+                            /* @__PURE__ */ jsxs("span", { className: "ansh-navmenu__entry-text", children: [
+                              /* @__PURE__ */ jsx("span", { className: "ansh-navmenu__entry-label", children: link.label }),
+                              link.description ? /* @__PURE__ */ jsx("span", { className: "ansh-navmenu__entry-description", children: link.description }) : null
+                            ] })
+                          ]
+                        }
+                      ) }, link.id)) })
+                    ] }, column.id)),
+                    item.feature ? /* @__PURE__ */ jsx("div", { className: "ansh-navmenu__feature", children: item.feature }) : null
+                  ] })
+                }
+              )
+            ]
+          },
+          item.id
+        );
+      }) })
+    }
+  );
+}
+function Collapsible({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  trigger,
+  bare = false,
+  className,
+  children
+}) {
+  const [isOpen, setOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-collapsible", className), "data-state": isOpen ? "open" : "closed", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cx(
+          bare ? "ansh-collapsible__bare" : "ansh-collapsible__trigger",
+          "ansh-focusable"
+        ),
+        "aria-expanded": isOpen,
+        "aria-controls": id,
+        onClick: () => setOpen(!isOpen),
+        children: [
+          trigger,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cx("ansh-collapsible__chevron", isOpen && "ansh-collapsible__chevron--open"),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M3 4.5L6 7.5l3-3",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  fill: "none",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ansh-collapsible__region",
+        id,
+        role: "region",
+        "data-state": isOpen ? "open" : "closed",
+        children: /* @__PURE__ */ jsx("div", { className: "ansh-collapsible__inner", ...isOpen ? null : { inert: true }, children })
+      }
+    )
+  ] });
+}
+function Accordion({
+  items,
+  multiple = false,
+  value,
+  defaultValue = [],
+  onChange,
+  variant = "bordered",
+  className
+}) {
+  const [openIds, setOpenIds] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const baseId = useId();
+  const headerRefs = useRef([]);
+  const toggle = (id) => {
+    if (openIds.includes(id)) {
+      setOpenIds(openIds.filter((entry) => entry !== id));
+    } else {
+      setOpenIds(multiple ? [...openIds, id] : [id]);
+    }
+  };
+  const onKeyDown = (index) => (event) => {
+    const enabled = items.map((item, i) => ({ item, i })).filter(({ item }) => !item.disabled).map(({ i }) => i);
+    const position = enabled.indexOf(index);
+    let next;
+    switch (event.key) {
+      case "ArrowDown":
+        next = enabled[(position + 1) % enabled.length];
+        break;
+      case "ArrowUp":
+        next = enabled[(position - 1 + enabled.length) % enabled.length];
+        break;
+      case "Home":
+        next = enabled[0];
+        break;
+      case "End":
+        next = enabled[enabled.length - 1];
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    if (next !== void 0) headerRefs.current[next]?.focus();
+  };
+  return /* @__PURE__ */ jsx("div", { className: cx("ansh-accordion", `ansh-accordion--${variant}`, className), children: items.map((item, index) => {
+    const open = openIds.includes(item.id);
+    const panelId = `${baseId}-panel-${item.id}`;
+    const headerId = `${baseId}-header-${item.id}`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx("ansh-accordion__item", open && "ansh-accordion__item--open"),
+        "data-state": open ? "open" : "closed",
+        children: [
+          /* @__PURE__ */ jsx("h3", { className: "ansh-accordion__heading", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (node) => {
+                headerRefs.current[index] = node;
+              },
+              type: "button",
+              id: headerId,
+              className: "ansh-accordion__trigger ansh-focusable",
+              "aria-expanded": open,
+              "aria-controls": panelId,
+              disabled: item.disabled,
+              onClick: () => toggle(item.id),
+              onKeyDown: onKeyDown(index),
+              children: [
+                item.icon ? /* @__PURE__ */ jsx("span", { className: "ansh-accordion__icon", children: item.icon }) : null,
+                /* @__PURE__ */ jsxs("span", { className: "ansh-accordion__text", children: [
+                  /* @__PURE__ */ jsx("span", { className: "ansh-accordion__title", children: item.title }),
+                  item.subtitle ? /* @__PURE__ */ jsx("span", { className: "ansh-accordion__subtitle", children: item.subtitle }) : null
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cx("ansh-accordion__chevron", open && "ansh-accordion__chevron--open"),
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M3 4.5L6 7.5l3-3",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        fill: "none",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) })
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ansh-accordion__region",
+              id: panelId,
+              role: "region",
+              "aria-labelledby": headerId,
+              "data-state": open ? "open" : "closed",
+              children: /* @__PURE__ */ jsx("div", { className: "ansh-accordion__panel", ...open ? null : { inert: true }, children: item.content })
+            }
+          )
+        ]
+      },
+      item.id
+    );
+  }) });
+}
+function DisclosureList({
+  items,
+  initial = 3,
+  moreLabel = (hidden) => `Show ${hidden} more`,
+  lessLabel = "Show less",
+  className
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const id = useId();
+  const hidden = items.length - initial;
+  if (hidden <= 0) {
+    return /* @__PURE__ */ jsx("ul", { className: cx("ansh-disclosure-list", className), children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: item }, index)) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("ul", { className: "ansh-disclosure-list", id, children: (expanded ? items : items.slice(0, initial)).map((item, index) => /* @__PURE__ */ jsx("li", { children: item }, index)) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ansh-disclosure-list__toggle ansh-focusable",
+        "aria-expanded": expanded,
+        "aria-controls": id,
+        onClick: () => setExpanded((v) => !v),
+        children: expanded ? lessLabel : moreLabel(hidden)
+      }
+    )
+  ] });
+}
+
+export { Accordion, Breadcrumbs, Collapsible, DisclosureList, NavigationMenu, Stepper, Tabs };
+//# sourceMappingURL=chunk-OLTS6G5M.js.map
+//# sourceMappingURL=chunk-OLTS6G5M.js.map