@usefidel/design-system 0.13.0 → 0.14.0

package/dist/index.d.ts

@@ -1,7 +1,11 @@
 import * as react from 'react';
 import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
 
-type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link';
+type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link'
+/** Final confirm of a destructive action ("Delete my account"). */
+ | 'danger'
+/** Starts a destructive action ("Delete account", "Remove"). */
+ | 'danger-outlined';
 type ButtonSize = 'x-small' | 'small' | 'medium' | 'big';
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Visual style. @default 'primary' */
@@ -248,4 +252,125 @@ interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
  */
 declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Select, type SelectOption, type SelectProps, Toggle, type ToggleProps, type ToggleSize };
+interface AppNavProps extends HTMLAttributes<HTMLElement> {
+    /** Brand mark, usually a link home. */
+    logo: ReactNode;
+    /** Right-hand area (account menu, admin tools). Never shrinks. */
+    actions?: ReactNode;
+    /**
+     * The nav links (`<a>` or a router link). Mark the current page with
+     * `aria-current="page"`; React Router's `NavLink` does this itself.
+     */
+    children?: ReactNode;
+    /** Accessible label for the mobile menu button. @default 'Menu' */
+    menuLabel?: string;
+}
+/**
+ * Fidel design-system app navigation bar. Router-agnostic: it styles whatever
+ * links it is given. Below 640px the links move into a menu opened from a
+ * button at the right of the bar; picking a link, Escape, or a tap outside
+ * closes it.
+ */
+declare function AppNav({ logo, actions, children, menuLabel, className, ...rest }: AppNavProps): react.JSX.Element;
+
+interface TabNavProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The tab links (`<a>` or a router link). Mark the current tab with
+     * `aria-current="page"`; React Router's `NavLink` does this itself.
+     */
+    children: ReactNode;
+}
+/**
+ * Fidel design-system tab navigation: a row of page-level links with an
+ * underline on the current one. Labels never wrap; when the row is wider than
+ * its container it scrolls sideways. Give it an `aria-label`.
+ */
+declare function TabNav({ children, className, ...rest }: TabNavProps): react.JSX.Element;
+
+interface SettingsSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Section heading, rendered as an `h2`. */
+    title: ReactNode;
+    /** Short muted line under the heading. */
+    description?: ReactNode;
+    /** The section's controls and content. */
+    children?: ReactNode;
+}
+/**
+ * Fidel design-system settings section: heading and description on the left,
+ * content on the right, divided from the next section by a hairline. Stacks
+ * into one column below 900px.
+ */
+declare function SettingsSection({ title, description, children, className, ...rest }: SettingsSectionProps): react.JSX.Element;
+
+type ModalSize = 'small' | 'medium';
+type ModalTone = 'default' | 'danger';
+interface ModalProps {
+    /** Whether the dialog is shown. */
+    open: boolean;
+    /** Called on Escape, the close button, or a click outside the dialog. */
+    onClose: () => void;
+    /** Dialog heading; also its accessible name. */
+    title: ReactNode;
+    /** Muted line under the heading; also its accessible description. */
+    description?: ReactNode;
+    /** Body content. */
+    children?: ReactNode;
+    /** Footer buttons, primary action last. Stacked full width on phones. */
+    actions?: ReactNode;
+    /** Width step: small 420px, medium 560px. @default 'small' */
+    size?: ModalSize;
+    /** False blocks every way of closing, e.g. while an action is in flight. @default true */
+    dismissible?: boolean;
+    /** 'danger' marks a destructive confirm with a warning icon; pair it with a `danger` Button. @default 'default' */
+    tone?: ModalTone;
+    className?: string;
+}
+/**
+ * Fidel design-system Modal. Portalled to `document.body`; traps focus, locks
+ * page scroll, closes on Escape or a click outside, and returns focus to where
+ * it was. Focus starts on the element marked `data-autofocus`, else the first
+ * focusable element.
+ */
+declare function Modal({ open, onClose, title, description, children, actions, size, dismissible, tone, className, }: ModalProps): react.ReactPortal | null;
+
+interface SegmentedOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    /** Optional number shown after the label, e.g. issues in a severity. */
+    count?: number;
+    /** Id of the panel this option shows, for `aria-controls`. */
+    controls?: string;
+    disabled?: boolean;
+}
+interface SegmentedControlProps<T extends string> {
+    options: SegmentedOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /** Names the group for screen readers. */
+    'aria-label': string;
+    className?: string;
+}
+/**
+ * Fidel design-system segmented control: pick one of a few options (a mode,
+ * a filter). Tabs semantics with a roving tabindex: Arrow keys, Home and End
+ * move and select; Tab leaves the group. When the options don't fit, the row
+ * scrolls sideways instead of widening the page.
+ */
+declare function SegmentedControl<T extends string>({ options, value, onChange, 'aria-label': ariaLabel, className, }: SegmentedControlProps<T>): react.JSX.Element;
+
+/**
+ * Layout breakpoints, in px, used as `max-width` media queries.
+ * CSS custom properties can't be read inside `@media`, so component CSS and
+ * consumers write these same numbers literally: `@media (max-width: 640px)`.
+ */
+declare const breakpoints: {
+    /** Phones. */
+    readonly sm: 480;
+    /** Large phones, small tablets. */
+    readonly md: 640;
+    /** Tablets, narrow windows. */
+    readonly lg: 900;
+};
+type Breakpoint = keyof typeof breakpoints;
+
+export { AppNav, type AppNavProps, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, TabNav, type TabNavProps, Toggle, type ToggleProps, type ToggleSize, breakpoints };

package/dist/index.js

@@ -571,11 +571,284 @@ 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
+};
 export {
+  AppNav,
   Button,
   DiffPropertyList,
   DiffSection,
   MismatchCard,
+  Modal,
+  SegmentedControl,
   Select,
-  Toggle
+  SettingsSection,
+  TabNav,
+  Toggle,
+  breakpoints
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefidel/design-system",
-  "version": "0.13.0",
+  "version": "0.14.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",