@usefidel/design-system 0.13.0 → 0.15.0

package/dist/index.js

@@ -571,11 +571,352 @@ var Toggle = forwardRef2(function Toggle2({ size = "medium", label, description,
     ] })
   ] });
 });
+
+// src/components/AppNav/AppNav.tsx
+import { useEffect as useEffect2, useId as useId3, useRef as useRef2, useState as useState4 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function AppNav({
+  logo,
+  actions,
+  children,
+  menuLabel = "Menu",
+  className,
+  ...rest
+}) {
+  const [open, setOpen] = useState4(false);
+  const linksId = useId3();
+  const navRef = useRef2(null);
+  const toggleRef = useRef2(null);
+  useEffect2(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        toggleRef.current?.focus();
+      }
+    };
+    const onPointer = (e) => {
+      if (!navRef.current?.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onPointer);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onPointer);
+    };
+  }, [open]);
+  const classes = ["fds-app-nav", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs6("nav", { ref: navRef, className: classes, ...rest, children: [
+    /* @__PURE__ */ jsx6("div", { className: "fds-app-nav__logo", children: logo }),
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        id: linksId,
+        className: "fds-app-nav__links",
+        "data-open": open ? "" : void 0,
+        onClick: (e) => {
+          if (e.target.closest("a, button")) setOpen(false);
+        },
+        children
+      }
+    ),
+    actions != null && /* @__PURE__ */ jsx6("div", { className: "fds-app-nav__actions", children: actions }),
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        ref: toggleRef,
+        type: "button",
+        className: "fds-app-nav__toggle",
+        "aria-label": menuLabel,
+        "aria-expanded": open,
+        "aria-controls": linksId,
+        onClick: () => setOpen((v) => !v),
+        children: /* @__PURE__ */ jsx6("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: open ? /* @__PURE__ */ jsx6("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) : /* @__PURE__ */ jsx6("path", { d: "M3 6h14M3 10h14M3 14h14", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) })
+      }
+    )
+  ] });
+}
+
+// src/components/TabNav/TabNav.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function TabNav({ children, className, ...rest }) {
+  const classes = ["fds-tab-nav", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx7("nav", { className: classes, ...rest, children });
+}
+
+// src/components/SettingsSection/SettingsSection.tsx
+import { useId as useId4 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function SettingsSection({
+  title,
+  description,
+  children,
+  className,
+  ...rest
+}) {
+  const titleId = useId4();
+  const classes = ["fds-settings-section", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs7("section", { className: classes, "aria-labelledby": titleId, ...rest, children: [
+    /* @__PURE__ */ jsxs7("div", { className: "fds-settings-section__head", children: [
+      /* @__PURE__ */ jsx8("h2", { id: titleId, className: "fds-settings-section__title", children: title }),
+      description != null && /* @__PURE__ */ jsx8("p", { className: "fds-settings-section__description", children: description })
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "fds-settings-section__body", children })
+  ] });
+}
+
+// src/components/Modal/Modal.tsx
+import { useEffect as useEffect3, useId as useId5, useRef as useRef3 } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  actions,
+  size = "small",
+  dismissible = true,
+  tone = "default",
+  className
+}) {
+  const titleId = useId5();
+  const descriptionId = useId5();
+  const dialogRef = useRef3(null);
+  const onCloseRef = useRef3(onClose);
+  onCloseRef.current = onClose;
+  const dismissibleRef = useRef3(dismissible);
+  dismissibleRef.current = dismissible;
+  useEffect3(() => {
+    if (!open) return;
+    const dialog = dialogRef.current;
+    const previouslyFocused = document.activeElement;
+    const initial = dialog?.querySelector("[data-autofocus]") ?? dialog?.querySelector(`.fds-modal__content ${FOCUSABLE}, .fds-modal__actions ${FOCUSABLE}`) ?? dialog;
+    initial?.focus();
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (e) => {
+      if (e.key === "Escape" && dismissibleRef.current) {
+        e.preventDefault();
+        onCloseRef.current();
+        return;
+      }
+      if (e.key === "Tab" && dialog) {
+        const focusable = Array.from(dialog.querySelectorAll(FOCUSABLE));
+        if (focusable.length === 0) {
+          e.preventDefault();
+          return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && (document.activeElement === first || document.activeElement === dialog)) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = previousOverflow;
+      previouslyFocused?.focus?.();
+    };
+  }, [open]);
+  if (!open || typeof document === "undefined") return null;
+  const classes = ["fds-modal", `fds-modal--${size}`, tone === "danger" && "fds-modal--danger", className].filter(Boolean).join(" ");
+  return createPortal(
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: "fds-modal__scrim",
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget && dismissible) onClose();
+        },
+        children: /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            ref: dialogRef,
+            className: classes,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": description != null ? descriptionId : void 0,
+            tabIndex: -1,
+            children: [
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  className: "fds-modal__close",
+                  onClick: onClose,
+                  disabled: !dismissible,
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ jsx9("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx9("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                }
+              ),
+              tone === "danger" && /* @__PURE__ */ jsx9("div", { className: "fds-modal__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs8("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+                /* @__PURE__ */ jsx9("path", { d: "M10 3.5L17.5 16.5H2.5L10 3.5z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+                /* @__PURE__ */ jsx9("path", { d: "M10 8.5v3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+                /* @__PURE__ */ jsx9("circle", { cx: "10", cy: "14.25", r: "0.9", fill: "currentColor" })
+              ] }) }),
+              /* @__PURE__ */ jsx9("h2", { id: titleId, className: "fds-modal__title", children: title }),
+              description != null && /* @__PURE__ */ jsx9("p", { id: descriptionId, className: "fds-modal__description", children: description }),
+              children != null && /* @__PURE__ */ jsx9("div", { className: "fds-modal__content", children }),
+              actions != null && /* @__PURE__ */ jsx9("div", { className: "fds-modal__actions", children: actions })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+import { useRef as useRef4 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const refs = useRef4([]);
+  const enabled = options.map((o, i) => o.disabled ? -1 : i).filter((i) => i >= 0);
+  const onKeyDown = (e, index) => {
+    const at = enabled.indexOf(index);
+    let next;
+    if (e.key === "ArrowRight") next = enabled[(at + 1) % enabled.length];
+    else if (e.key === "ArrowLeft") next = enabled[(at - 1 + enabled.length) % enabled.length];
+    else if (e.key === "Home") next = enabled[0];
+    else if (e.key === "End") next = enabled[enabled.length - 1];
+    if (next === void 0) return;
+    e.preventDefault();
+    onChange(options[next].value);
+    refs.current[next]?.focus();
+  };
+  const classes = ["fds-segmented", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx10("div", { role: "tablist", "aria-label": ariaLabel, className: classes, children: options.map((option, i) => {
+    const selected = option.value === value;
+    return /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        ref: (el) => {
+          refs.current[i] = el;
+        },
+        type: "button",
+        role: "tab",
+        "aria-selected": selected,
+        "aria-controls": option.controls,
+        tabIndex: selected ? 0 : -1,
+        disabled: option.disabled,
+        className: "fds-segmented__option",
+        onClick: () => onChange(option.value),
+        onKeyDown: (e) => onKeyDown(e, i),
+        children: [
+          option.label,
+          option.count != null && /* @__PURE__ */ jsx10("span", { className: "fds-segmented__count", children: option.count })
+        ]
+      },
+      option.value
+    );
+  }) });
+}
+
+// src/breakpoints.ts
+var breakpoints = {
+  /** Phones. */
+  sm: 480,
+  /** Large phones, small tablets. */
+  md: 640,
+  /** Tablets, narrow windows. */
+  lg: 900
+};
+
+// src/components/Avatar/Avatar.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function initialsFor(name) {
+  const words = name.trim().split(/[\s._@-]+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return (words[0][0] + words[1][0]).toUpperCase();
+}
+function Avatar({ name, src, size = "medium", className, ...rest }) {
+  const [failedSrc, setFailedSrc] = useState5(null);
+  const showImage = !!src && src !== failedSrc;
+  const classes = ["fds-avatar", `fds-avatar--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx11("span", { className: classes, role: "img", "aria-label": name, ...rest, children: showImage ? /* @__PURE__ */ jsx11("img", { className: "fds-avatar__img", src, alt: "", onError: () => setFailedSrc(src) }) : /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: initialsFor(name) }) });
+}
+
+// src/components/SectionHeader/SectionHeader.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function SectionHeader({
+  title,
+  description,
+  as: Heading = "h2",
+  titleId,
+  className,
+  ...rest
+}) {
+  const classes = ["fds-section-header", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs10("div", { className: classes, ...rest, children: [
+    /* @__PURE__ */ jsx12(Heading, { id: titleId, className: "fds-section-header__title", children: title }),
+    description != null && /* @__PURE__ */ jsx12("p", { className: "fds-section-header__description", children: description })
+  ] });
+}
+
+// src/components/Split/Split.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function Split({
+  aside,
+  children,
+  asideWidth = "280px",
+  sticky = false,
+  collapseBelow = "lg",
+  className,
+  style,
+  ...rest
+}) {
+  const classes = [
+    "fds-split",
+    `fds-split--collapse-${collapseBelow}`,
+    sticky && "fds-split--sticky",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: classes,
+      style: { "--fds-split-aside": asideWidth, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx13("div", { className: "fds-split__aside", children: aside }),
+        /* @__PURE__ */ jsx13("div", { className: "fds-split__main", children })
+      ]
+    }
+  );
+}
 export {
+  AppNav,
+  Avatar,
   Button,
   DiffPropertyList,
   DiffSection,
   MismatchCard,
+  Modal,
+  SectionHeader,
+  SegmentedControl,
   Select,
-  Toggle
+  SettingsSection,
+  Split,
+  TabNav,
+  Toggle,
+  breakpoints
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefidel/design-system",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Fidel brand design tokens + React component library — DTCG token source of truth, generated per-surface CSS + Tailwind-v4 parser-compatibility output, and on-brand React components (Button, MismatchCard, DiffSection).",
   "type": "module",
   "main": "./dist/index.cjs",