@usefidel/design-system 0.14.0 → 0.16.0

package/dist/index.js

@@ -838,17 +838,402 @@ var breakpoints = {
   /** 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 })
+      ]
+    }
+  );
+}
+
+// src/components/Badge/Badge.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function Badge({ tone = "neutral", icon, className, children, ...rest }) {
+  const classes = ["fds-badge", `fds-badge--${tone}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs12("span", { className: classes, ...rest, children: [
+    icon != null && /* @__PURE__ */ jsx14("span", { className: "fds-badge__icon", "aria-hidden": "true", children: icon }),
+    children
+  ] });
+}
+
+// src/components/Tag/Tag.tsx
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function Tag({ dot, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs13("span", { className: ["fds-tag", className].filter(Boolean).join(" "), ...rest, children: [
+    dot && /* @__PURE__ */ jsx15("span", { className: `fds-dot fds-dot--${dot}`, "aria-hidden": "true" }),
+    children
+  ] });
+}
+
+// src/components/MultiSelect/MultiSelect.tsx
+import { useEffect as useEffect4, useId as useId6, useRef as useRef5, useState as useState6 } from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function ChevronIcon2() {
+  return /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", className: "fds-multiselect__chevronIcon", children: /* @__PURE__ */ jsx16("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function CheckIcon2() {
+  return /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx16("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function MultiSelect({
+  label,
+  options,
+  value,
+  onChange,
+  disabled = false,
+  selectAllLabel = "Select all",
+  clearLabel = "Clear",
+  id,
+  className
+}) {
+  const genId = useId6();
+  const triggerId = id ?? genId;
+  const listId = `${genId}-list`;
+  const rootRef = useRef5(null);
+  const triggerRef = useRef5(null);
+  const listRef = useRef5(null);
+  const [open, setOpen] = useState6(false);
+  const [activeIndex, setActiveIndex] = useState6(0);
+  const selected = new Set(value);
+  const enabled = options.filter((o) => !o.disabled);
+  useEffect4(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    const raf = requestAnimationFrame(() => listRef.current?.focus());
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      cancelAnimationFrame(raf);
+    };
+  }, [open]);
+  const close = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  const toggle = (o) => {
+    if (!o || o.disabled) return;
+    const next = selected.has(o.value) ? value.filter((v) => v !== o.value) : options.filter((x) => x.value === o.value || selected.has(x.value)).map((x) => x.value);
+    onChange(next);
+  };
+  const onTriggerKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setActiveIndex(0);
+      setOpen(true);
+    }
+  };
+  const onListKeyDown = (e) => {
+    const last = options.length - 1;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => i >= last ? 0 : i + 1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => i <= 0 ? last : i - 1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActiveIndex(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setActiveIndex(last);
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggle(options[activeIndex]);
+    } else if (e.key === "Escape" || e.key === "Tab") {
+      if (e.key === "Escape") e.preventDefault();
+      close();
+    }
+  };
+  const triggerClasses = ["fds-multiselect__trigger", open ? "fds-multiselect__trigger--open" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs14("div", { ref: rootRef, className: ["fds-multiselect", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs14(
+      "button",
+      {
+        type: "button",
+        id: triggerId,
+        ref: triggerRef,
+        className: triggerClasses,
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? listId : void 0,
+        onClick: () => setOpen((o) => !o),
+        onKeyDown: onTriggerKeyDown,
+        children: [
+          /* @__PURE__ */ jsx16("span", { className: "fds-multiselect__label", children: label }),
+          value.length > 0 && /* @__PURE__ */ jsxs14("span", { className: "fds-multiselect__count", "aria-label": `${value.length} of ${options.length} selected`, children: [
+            value.length,
+            "/",
+            options.length
+          ] }),
+          /* @__PURE__ */ jsx16("span", { className: `fds-multiselect__chevron${open ? " fds-multiselect__chevron--open" : ""}`, children: /* @__PURE__ */ jsx16(ChevronIcon2, {}) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs14("div", { className: "fds-multiselect__popover", children: [
+      /* @__PURE__ */ jsx16(
+        "div",
+        {
+          ref: listRef,
+          id: listId,
+          role: "listbox",
+          "aria-multiselectable": "true",
+          "aria-label": label,
+          tabIndex: 0,
+          className: "fds-multiselect__list",
+          "aria-activedescendant": `${listId}-opt-${activeIndex}`,
+          onKeyDown: onListKeyDown,
+          children: options.map((o, i) => {
+            const checked = selected.has(o.value);
+            return /* @__PURE__ */ jsxs14(
+              "div",
+              {
+                id: `${listId}-opt-${i}`,
+                role: "option",
+                "aria-selected": checked,
+                "aria-disabled": o.disabled || void 0,
+                className: [
+                  "fds-multiselect__option",
+                  i === activeIndex ? "fds-multiselect__option--active" : "",
+                  o.disabled ? "fds-multiselect__option--disabled" : ""
+                ].filter(Boolean).join(" "),
+                onMouseEnter: () => setActiveIndex(i),
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => toggle(o),
+                children: [
+                  /* @__PURE__ */ jsx16("span", { className: `fds-multiselect__box${checked ? " fds-multiselect__box--checked" : ""}`, "aria-hidden": "true", children: checked && /* @__PURE__ */ jsx16(CheckIcon2, {}) }),
+                  o.dot && /* @__PURE__ */ jsx16("span", { className: `fds-dot fds-dot--${o.dot}`, "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx16("span", { className: "fds-multiselect__optLabel", children: o.label }),
+                  o.count != null && /* @__PURE__ */ jsx16("span", { className: "fds-multiselect__optCount", children: o.count })
+                ]
+              },
+              o.value
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxs14("div", { className: "fds-multiselect__footer", children: [
+        /* @__PURE__ */ jsx16("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange(enabled.map((o) => o.value)), children: selectAllLabel }),
+        /* @__PURE__ */ jsx16("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange([]), children: clearLabel })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/SearchInput/SearchInput.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var SearchInput = forwardRef3(function SearchInput2({ shortcut, containerClassName, className, value, ...rest }, ref) {
+  const empty = value === void 0 || value === "";
+  return /* @__PURE__ */ jsxs15("div", { className: ["fds-search", containerClassName].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs15("svg", { className: "fds-search__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx17("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
+      /* @__PURE__ */ jsx17("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    ] }),
+    /* @__PURE__ */ jsx17("input", { ref, type: "search", value, className: ["fds-search__input", className].filter(Boolean).join(" "), ...rest }),
+    shortcut && empty && /* @__PURE__ */ jsx17("kbd", { className: "fds-search__kbd", "aria-hidden": "true", children: shortcut })
+  ] });
+});
+
+// src/components/Pagination/Pagination.tsx
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+function pageItems(page, pageCount) {
+  if (pageCount <= 7) return Array.from({ length: pageCount }, (_, i) => i + 1);
+  const start = Math.max(2, Math.min(page - 1, pageCount - 4));
+  const end = Math.min(pageCount - 1, Math.max(page + 1, 5));
+  const items = [1];
+  if (start > 2) items.push(null);
+  for (let p = start; p <= end; p++) items.push(p);
+  if (end < pageCount - 1) items.push(null);
+  items.push(pageCount);
+  return items;
+}
+function Arrow2({ dir }) {
+  return /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx18("path", { d: dir === "prev" ? "M12 15l-5-5 5-5" : "M8 5l5 5-5 5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Pagination({ page, pageCount, onPageChange, total, pageSize, variant = "full", className }) {
+  if (pageCount <= 1) return null;
+  const go = (p) => {
+    if (p >= 1 && p <= pageCount && p !== page) onPageChange(p);
+  };
+  const showRange = variant === "full" && total != null && pageSize != null;
+  const from = (page - 1) * (pageSize ?? 0) + 1;
+  const to = Math.min(page * (pageSize ?? 0), total ?? 0);
+  return /* @__PURE__ */ jsxs16("nav", { className: ["fds-pagination", `fds-pagination--${variant}`, className].filter(Boolean).join(" "), "aria-label": "Pagination", children: [
+    showRange && /* @__PURE__ */ jsxs16("p", { className: "fds-pagination__range", children: [
+      "Showing ",
+      from,
+      "\u2013",
+      to,
+      " of ",
+      total
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "fds-pagination__controls", children: [
+      /* @__PURE__ */ jsx18("button", { type: "button", className: "fds-pagination__arrow", onClick: () => go(page - 1), disabled: page <= 1, "aria-label": "Previous page", children: /* @__PURE__ */ jsx18(Arrow2, { dir: "prev" }) }),
+      variant === "compact" ? /* @__PURE__ */ jsxs16("span", { className: "fds-pagination__status", "aria-live": "polite", children: [
+        "Page ",
+        page,
+        " of ",
+        pageCount
+      ] }) : pageItems(page, pageCount).map(
+        (p, i) => p === null ? /* @__PURE__ */ jsx18("span", { className: "fds-pagination__gap", "aria-hidden": "true", children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx18(
+          "button",
+          {
+            type: "button",
+            className: `fds-pagination__page${p === page ? " fds-pagination__page--current" : ""}`,
+            "aria-current": p === page ? "page" : void 0,
+            "aria-label": `Page ${p}`,
+            onClick: () => go(p),
+            children: p
+          },
+          p
+        )
+      ),
+      /* @__PURE__ */ jsx18("button", { type: "button", className: "fds-pagination__arrow", onClick: () => go(page + 1), disabled: page >= pageCount, "aria-label": "Next page", children: /* @__PURE__ */ jsx18(Arrow2, { dir: "next" }) })
+    ] })
+  ] });
+}
+
+// src/components/EmptyState/EmptyState.tsx
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+function EmptyState({ illustration, title, description, action, footer, className, ...rest }) {
+  return /* @__PURE__ */ jsxs17("div", { className: ["fds-empty", className].filter(Boolean).join(" "), ...rest, children: [
+    illustration != null && /* @__PURE__ */ jsx19("div", { className: "fds-empty__illustration", children: illustration }),
+    /* @__PURE__ */ jsxs17("div", { className: "fds-empty__text", children: [
+      /* @__PURE__ */ jsx19("h2", { className: "fds-empty__title", children: title }),
+      description != null && /* @__PURE__ */ jsx19("p", { className: "fds-empty__description", children: description })
+    ] }),
+    (action != null || footer != null) && /* @__PURE__ */ jsxs17("div", { className: "fds-empty__actions", children: [
+      action,
+      footer != null && /* @__PURE__ */ jsx19("div", { className: "fds-empty__footer", children: footer })
+    ] })
+  ] });
+}
+function StackedCardsIllustration({ className }) {
+  return /* @__PURE__ */ jsxs17("div", { className: ["fds-stacked-cards", className].filter(Boolean).join(" "), "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx19("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--back" }),
+    /* @__PURE__ */ jsxs17("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--front", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "fds-stacked-cards__lines", children: [
+        /* @__PURE__ */ jsx19("span", {}),
+        /* @__PURE__ */ jsx19("span", {}),
+        /* @__PURE__ */ jsx19("span", {})
+      ] }),
+      /* @__PURE__ */ jsxs17("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", className: "fds-stacked-cards__status", children: [
+        /* @__PURE__ */ jsx19("rect", { x: "0.75", y: "0.75", width: "16.5", height: "16.5", rx: "8.25", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx19("circle", { cx: "9", cy: "9", r: "3", className: "fds-stacked-cards__statusDot" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx19("div", { className: "fds-stacked-cards__badge", children: /* @__PURE__ */ jsxs17("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
+      /* @__PURE__ */ jsx19("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
+      /* @__PURE__ */ jsx19("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    ] }) })
+  ] });
+}
+
+// src/components/Skeleton/Skeleton.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var px = (v) => typeof v === "number" ? `${v}px` : v;
+function Skeleton({ shape = "rect", width, height, lines = 1, className, style, ...rest }) {
+  const classes = ["fds-skeleton", `fds-skeleton--${shape}`, className].filter(Boolean).join(" ");
+  if (shape === "text" && lines > 1) {
+    return /* @__PURE__ */ jsx20("span", { className: "fds-skeleton-lines", style: { width: px(width) }, "aria-hidden": "true", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx20(
+      "span",
+      {
+        className: classes,
+        style: { height: px(height), width: i === lines - 1 ? "60%" : void 0, ...style },
+        ...rest
+      },
+      i
+    )) });
+  }
+  const size = shape === "circle" ? { width: px(width ?? height ?? 16), height: px(height ?? width ?? 16) } : { width: px(width), height: px(height) };
+  return /* @__PURE__ */ jsx20("span", { className: classes, style: { ...size, ...style }, "aria-hidden": "true", ...rest });
+}
+function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
+  return /* @__PURE__ */ jsx20("div", { role: "status", "aria-busy": "true", "aria-label": label, className, ...rest, children });
+}
 export {
   AppNav,
+  Avatar,
+  Badge,
   Button,
   DiffPropertyList,
   DiffSection,
+  EmptyState,
   MismatchCard,
   Modal,
+  MultiSelect,
+  Pagination,
+  SearchInput,
+  SectionHeader,
   SegmentedControl,
   Select,
   SettingsSection,
+  Skeleton,
+  SkeletonGroup,
+  Split,
+  StackedCardsIllustration,
   TabNav,
+  Tag,
   Toggle,
   breakpoints
 };

package/package.json

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