@usefidel/design-system 0.13.0 → 0.14.0

package/dist/fidel.manifest.json

@@ -10,6 +10,6 @@
     "webapp.css"
   ],
   "storybookUrl": null,
-  "packageVersion": "0.13.0",
-  "resolvedSha": "a9ed7fb5a355ee414279eb17bf75df5cc18a7dc1"
+  "packageVersion": "0.14.0",
+  "resolvedSha": "2c6d6c9b1c4ca4dc54ec8a92f2a9d2d60dcaf34d"
 }

package/dist/index.cjs

@@ -20,12 +20,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AppNav: () => AppNav,
   Button: () => Button,
   DiffPropertyList: () => DiffPropertyList,
   DiffSection: () => DiffSection,
   MismatchCard: () => MismatchCard,
+  Modal: () => Modal,
+  SegmentedControl: () => SegmentedControl,
   Select: () => Select,
-  Toggle: () => Toggle
+  SettingsSection: () => SettingsSection,
+  TabNav: () => TabNav,
+  Toggle: () => Toggle,
+  breakpoints: () => breakpoints
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -594,12 +600,285 @@ var Toggle = (0, import_react4.forwardRef)(function Toggle2({ size = "medium", l
     ] })
   ] });
 });
+
+// src/components/AppNav/AppNav.tsx
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function AppNav({
+  logo,
+  actions,
+  children,
+  menuLabel = "Menu",
+  className,
+  ...rest
+}) {
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const linksId = (0, import_react5.useId)();
+  const navRef = (0, import_react5.useRef)(null);
+  const toggleRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime6.jsxs)("nav", { ref: navRef, className: classes, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fds-app-nav__logo", children: logo }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "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__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fds-app-nav__actions", children: actions }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "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__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: open ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M3 6h14M3 10h14M3 14h14", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) })
+      }
+    )
+  ] });
+}
+
+// src/components/TabNav/TabNav.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function TabNav({ children, className, ...rest }) {
+  const classes = ["fds-tab-nav", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("nav", { className: classes, ...rest, children });
+}
+
+// src/components/SettingsSection/SettingsSection.tsx
+var import_react6 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SettingsSection({
+  title,
+  description,
+  children,
+  className,
+  ...rest
+}) {
+  const titleId = (0, import_react6.useId)();
+  const classes = ["fds-settings-section", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: classes, "aria-labelledby": titleId, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "fds-settings-section__head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { id: titleId, className: "fds-settings-section__title", children: title }),
+      description != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "fds-settings-section__description", children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fds-settings-section__body", children })
+  ] });
+}
+
+// src/components/Modal/Modal.tsx
+var import_react7 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime9 = require("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 = (0, import_react7.useId)();
+  const descriptionId = (0, import_react7.useId)();
+  const dialogRef = (0, import_react7.useRef)(null);
+  const onCloseRef = (0, import_react7.useRef)(onClose);
+  onCloseRef.current = onClose;
+  const dismissibleRef = (0, import_react7.useRef)(dismissible);
+  dismissibleRef.current = dismissible;
+  (0, import_react7.useEffect)(() => {
+    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 (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: "fds-modal__scrim",
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget && dismissible) onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            ref: dialogRef,
+            className: classes,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": description != null ? descriptionId : void 0,
+            tabIndex: -1,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "fds-modal__close",
+                  onClick: onClose,
+                  disabled: !dismissible,
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                }
+              ),
+              tone === "danger" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fds-modal__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 3.5L17.5 16.5H2.5L10 3.5z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 8.5v3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "10", cy: "14.25", r: "0.9", fill: "currentColor" })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { id: titleId, className: "fds-modal__title", children: title }),
+              description != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: descriptionId, className: "fds-modal__description", children: description }),
+              children != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fds-modal__content", children }),
+              actions != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fds-modal__actions", children: actions })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+var import_react8 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const refs = (0, import_react8.useRef)([]);
+  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__ */ (0, import_jsx_runtime10.jsx)("div", { role: "tablist", "aria-label": ariaLabel, className: classes, children: options.map((option, i) => {
+    const selected = option.value === value;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "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__ */ (0, import_jsx_runtime10.jsx)("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
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AppNav,
   Button,
   DiffPropertyList,
   DiffSection,
   MismatchCard,
+  Modal,
+  SegmentedControl,
   Select,
-  Toggle
+  SettingsSection,
+  TabNav,
+  Toggle,
+  breakpoints
 });