@usefidel/design-system 0.15.0 → 0.16.0

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import * as react from 'react';
 import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link'
+/** High-contrast near-black, for a page's main create action ("New comparison"). */
+ | 'dark'
 /** Final confirm of a destructive action ("Delete my account"). */
  | 'danger'
 /** Starts a destructive action ("Delete account", "Remove"). */
@@ -421,4 +423,143 @@ interface SplitProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function Split({ aside, children, asideWidth, sticky, collapseBelow, className, style, ...rest }: SplitProps): react.JSX.Element;
 
-export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, 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, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Split, type SplitProps, TabNav, type TabNavProps, Toggle, type ToggleProps, type ToggleSize, breakpoints };
+/** Semantic colour roles shared by status components (Badge, Tag, MultiSelect dots). */
+type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Colour role. @default 'neutral' */
+    tone?: Tone;
+    /** Leading icon, drawn at 12px. */
+    icon?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * Fidel design-system Badge: a tinted pill naming a state ("Checking",
+ * "Checked", "Failed to run"). Measured from Figma "✅Project" status-badge
+ * (node 231:59799).
+ */
+declare function Badge({ tone, icon, className, children, ...rest }: BadgeProps): react.JSX.Element;
+
+interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Colour of the leading dot. Leave out for no dot. */
+    dot?: Tone;
+    children: ReactNode;
+}
+/**
+ * Fidel design-system Tag: a quiet bordered label for a category, with an
+ * optional coloured dot. Measured from Figma "✅Project" comparison-type chip
+ * (node 231:59808).
+ */
+declare function Tag({ dot, className, children, ...rest }: TagProps): react.JSX.Element;
+
+interface MultiSelectOption {
+    value: string;
+    label: string;
+    /** Coloured dot before the label. */
+    dot?: Tone;
+    /** Trailing count, e.g. how many results the option would show. */
+    count?: number;
+    disabled?: boolean;
+}
+interface MultiSelectProps {
+    /** Trigger text, e.g. "Status". Also the list's accessible name. */
+    label: string;
+    options: MultiSelectOption[];
+    /** Selected values. An empty list means nothing is ticked. */
+    value: string[];
+    onChange: (value: string[]) => void;
+    disabled?: boolean;
+    selectAllLabel?: string;
+    clearLabel?: string;
+    id?: string;
+    className?: string;
+}
+/**
+ * Fidel design-system MultiSelect: a filter menu of checkbox options, each
+ * with an optional dot and count, and Select all / Clear in the footer. The
+ * trigger shows "n/m" once anything is ticked. Keyboard: Enter/Space/↓ open;
+ * ↑/↓/Home/End move; Enter/Space toggle; Esc closes. Measured from Figma
+ * "✅Project" filter Select (node 231:60682).
+ */
+declare function MultiSelect({ label, options, value, onChange, disabled, selectAllLabel, clearLabel, id, className, }: MultiSelectProps): react.JSX.Element;
+
+interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Keyboard hint shown at the end while the field is empty, e.g. "/". */
+    shortcut?: string;
+    /** Class for the wrapper; `className` goes on the input. */
+    containerClassName?: string;
+}
+/**
+ * Fidel design-system SearchInput: a 44px search field with a leading
+ * magnifier. Measured from Figma "✅Project" toolbar search (node 231:59687).
+ */
+declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface PaginationProps {
+    /** Current page, 1-based. */
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** With `pageSize`, adds "Showing 1–20 of 45" (full variant only). */
+    total?: number;
+    pageSize?: number;
+    /** full: range text + page numbers. compact: "Page 2 of 3" between arrows. @default 'full' */
+    variant?: 'full' | 'compact';
+    className?: string;
+}
+/**
+ * Fidel design-system Pagination. Renders nothing when there is one page.
+ */
+declare function Pagination({ page, pageCount, onPageChange, total, pageSize, variant, className }: PaginationProps): react.JSX.Element | null;
+
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Picture above the title, e.g. <StackedCardsIllustration />. */
+    illustration?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Primary action, usually a Button. */
+    action?: ReactNode;
+    /** Secondary line under the action, e.g. a help link. */
+    footer?: ReactNode;
+}
+/**
+ * Fidel design-system EmptyState: a centred illustration, title, description,
+ * action and footer, for a list or page with nothing in it yet. Measured from
+ * Figma "✅Project" Empty State Container (node 231:59661).
+ */
+declare function EmptyState({ illustration, title, description, action, footer, className, ...rest }: EmptyStateProps): react.JSX.Element;
+/**
+ * Two tilted cards with a search badge: "nothing found yet". Drawn from the
+ * Figma "Stacked Cards" layers (node 80:49887), 240×160.
+ */
+declare function StackedCardsIllustration({ className }: {
+    className?: string;
+}): react.JSX.Element;
+
+type SkeletonShape = 'rect' | 'text' | 'circle';
+interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** rect: a block. text: line(s) at text height. circle: an avatar or icon. @default 'rect' */
+    shape?: SkeletonShape;
+    /** CSS width; a number is px. Text defaults to 100%, circle to its height. */
+    width?: number | string;
+    /** CSS height; a number is px. Text defaults to one line (1em). @default 16 for rect and circle */
+    height?: number | string;
+    /** Text only: how many lines. The last of several is shorter, as text usually is. @default 1 */
+    lines?: number;
+}
+/**
+ * Fidel design-system Skeleton: a placeholder shape that pulses while content
+ * loads. Pages compose these into the shape of what's coming (rows, cards,
+ * headers). Purely visual and hidden from assistive tech; wrap a layout in
+ * SkeletonGroup so it's announced once as loading.
+ */
+declare function Skeleton({ shape, width, height, lines, className, style, ...rest }: SkeletonProps): react.JSX.Element;
+interface SkeletonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** What's loading, for screen readers. @default 'Loading' */
+    label?: string;
+    children: ReactNode;
+}
+/** Wraps a skeleton layout and announces it once as loading (role="status"). */
+declare function SkeletonGroup({ label, className, children, ...rest }: SkeletonGroupProps): react.JSX.Element;
+
+export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, TabNav, type TabNavProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };

package/dist/index.js

@@ -903,20 +903,337 @@ function Split({
     }
   );
 }
+
+// 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.15.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",