@usefidel/design-system 0.25.1 → 0.27.0

package/dist/index.js

@@ -950,12 +950,23 @@ function Badge({ tone = "neutral", icon, className, children, ...rest }) {
 }
 
 // src/components/Tag/Tag.tsx
+import { X } from "lucide-react";
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
-function Tag({ dot, icon, className, children, ...rest }) {
+function Tag({ dot, icon, onRemove, removeLabel, className, children, ...rest }) {
   return /* @__PURE__ */ jsxs14("span", { className: ["fds-tag", className].filter(Boolean).join(" "), ...rest, children: [
     dot && /* @__PURE__ */ jsx16("span", { className: `fds-dot fds-dot--${dot}`, "aria-hidden": "true" }),
     icon != null && /* @__PURE__ */ jsx16("span", { className: "fds-tag__icon", "aria-hidden": "true", children: icon }),
-    children
+    children,
+    onRemove && /* @__PURE__ */ jsx16(
+      "button",
+      {
+        type: "button",
+        className: "fds-tag__remove",
+        "aria-label": `Remove ${removeLabel ?? (typeof children === "string" ? children : "")}`.trim(),
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsx16(X, { "aria-hidden": "true" })
+      }
+    )
   ] });
 }
 
@@ -2288,13 +2299,17 @@ var AppLayout = Object.assign(AppLayoutRoot, { Panel: AppLayoutPanel });
 
 // src/components/PageHeader/PageHeader.tsx
 import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
-function PageHeader({ title, description, breadcrumb, actions, className, children, ...rest }) {
+function PageHeader({ title, description, leading, meta, breadcrumb, actions, className, children, ...rest }) {
   return /* @__PURE__ */ jsxs38("header", { className: ["fds-page-header", className].filter(Boolean).join(" "), ...rest, children: [
+    breadcrumb != null && /* @__PURE__ */ jsx47("div", { className: "fds-page-header__breadcrumb", children: breadcrumb }),
     /* @__PURE__ */ jsxs38("div", { className: "fds-page-header__row", children: [
-      /* @__PURE__ */ jsxs38("div", { className: "fds-page-header__text", children: [
-        breadcrumb != null && /* @__PURE__ */ jsx47("div", { className: "fds-page-header__breadcrumb", children: breadcrumb }),
-        /* @__PURE__ */ jsx47("h1", { className: "fds-page-header__title", children: title }),
-        description != null && /* @__PURE__ */ jsx47("p", { className: "fds-page-header__description", children: description })
+      /* @__PURE__ */ jsxs38("div", { className: "fds-page-header__lead", children: [
+        leading != null && /* @__PURE__ */ jsx47("div", { className: "fds-page-header__leading", children: leading }),
+        /* @__PURE__ */ jsxs38("div", { className: "fds-page-header__text", children: [
+          /* @__PURE__ */ jsx47("h1", { className: "fds-page-header__title", children: title }),
+          description != null && /* @__PURE__ */ jsx47("p", { className: "fds-page-header__description", children: description }),
+          meta != null && /* @__PURE__ */ jsx47("div", { className: "fds-page-header__meta", children: meta })
+        ] })
       ] }),
       actions != null && /* @__PURE__ */ jsx47("div", { className: "fds-page-header__actions", children: actions })
     ] }),
@@ -2304,7 +2319,7 @@ function PageHeader({ title, description, breadcrumb, actions, className, childr
 
 // src/components/Toast/Toast.tsx
 import { useEffect as useEffect9 } from "react";
-import { X } from "lucide-react";
+import { X as X2 } from "lucide-react";
 import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
 function ToastRegion({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx48("div", { className: ["fds-toast-region", className].filter(Boolean).join(" "), "aria-live": "polite", ...rest, children });
@@ -2318,7 +2333,509 @@ function Toast({ children, action, onDismiss, duration, className, ...rest }) {
   return /* @__PURE__ */ jsxs39("div", { role: "status", className: ["fds-toast", className].filter(Boolean).join(" "), ...rest, children: [
     /* @__PURE__ */ jsx48("span", { className: "fds-toast__message", children }),
     action && /* @__PURE__ */ jsx48("button", { type: "button", className: "fds-toast__action", onClick: action.onClick, children: action.label }),
-    onDismiss && /* @__PURE__ */ jsx48("button", { type: "button", className: "fds-toast__close", "aria-label": "Dismiss", onClick: onDismiss, children: /* @__PURE__ */ jsx48(X, { "aria-hidden": "true" }) })
+    onDismiss && /* @__PURE__ */ jsx48("button", { type: "button", className: "fds-toast__close", "aria-label": "Dismiss", onClick: onDismiss, children: /* @__PURE__ */ jsx48(X2, { "aria-hidden": "true" }) })
+  ] });
+}
+
+// src/components/Stepper/Stepper.tsx
+import { Children, isValidElement } from "react";
+import { Check as Check2 } from "lucide-react";
+import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
+function StepperStep(_) {
+  return null;
+}
+function StepperRoot({ className, children, ...rest }) {
+  const steps = Children.toArray(children).filter(isValidElement);
+  return /* @__PURE__ */ jsx49("ol", { className: ["fds-stepper", className].filter(Boolean).join(" "), ...rest, children: steps.map((step, i) => {
+    const { status, children: label } = step.props;
+    return /* @__PURE__ */ jsxs40(
+      "li",
+      {
+        className: `fds-stepper__step fds-stepper__step--${status}`,
+        "aria-current": status === "current" ? "step" : void 0,
+        children: [
+          /* @__PURE__ */ jsx49("span", { className: "fds-stepper__marker", "aria-hidden": "true", children: status === "done" ? /* @__PURE__ */ jsx49(Check2, {}) : i + 1 }),
+          /* @__PURE__ */ jsx49("span", { className: "fds-stepper__label", children: label })
+        ]
+      },
+      i
+    );
+  }) });
+}
+var Stepper = Object.assign(StepperRoot, { Step: StepperStep });
+
+// src/components/NumberedSteps/NumberedSteps.tsx
+import { Children as Children2 } from "react";
+import { jsx as jsx50, jsxs as jsxs41 } from "react/jsx-runtime";
+function NumberedStepsRoot({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx50("ol", { className: ["fds-numbered-steps", className].filter(Boolean).join(" "), ...rest, children: Children2.toArray(children) });
+}
+function NumberedStepsItem({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs41("li", { className: ["fds-numbered-steps__item", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx50("span", { className: "fds-numbered-steps__marker", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx50("div", { className: "fds-numbered-steps__body", children })
+  ] });
+}
+var NumberedSteps = Object.assign(NumberedStepsRoot, { Item: NumberedStepsItem });
+
+// src/components/OptionList/OptionList.tsx
+import { jsx as jsx51, jsxs as jsxs42 } from "react/jsx-runtime";
+function OptionListRoot({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx51("div", { className: ["fds-option-list", className].filter(Boolean).join(" "), ...rest, children });
+}
+function OptionListLabel({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx51("div", { className: ["fds-option-list__label", className].filter(Boolean).join(" "), ...rest, children });
+}
+function OptionRow({ control = "radio", title, description, meta, className, checked, disabled, ...rest }) {
+  const Control = control === "checkbox" ? Checkbox : Radio;
+  return /* @__PURE__ */ jsxs42(
+    "div",
+    {
+      className: ["fds-option-row", checked ? "fds-option-row--checked" : "", className].filter(Boolean).join(" "),
+      "data-disabled": disabled ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx51(Control, { label: title, description, checked, disabled, ...rest }),
+        meta != null && /* @__PURE__ */ jsx51("span", { className: "fds-option-row__meta", children: meta })
+      ]
+    }
+  );
+}
+var OptionList = Object.assign(OptionListRoot, { Label: OptionListLabel, Row: OptionRow });
+
+// src/components/Checklist/Checklist.tsx
+import { Check as Check3 } from "lucide-react";
+import { jsx as jsx52, jsxs as jsxs43 } from "react/jsx-runtime";
+function ChecklistRoot({ title, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs43("section", { className: ["fds-checklist", className].filter(Boolean).join(" "), ...rest, children: [
+    title != null && /* @__PURE__ */ jsx52("h3", { className: "fds-checklist__title", children: title }),
+    /* @__PURE__ */ jsx52("ul", { className: "fds-checklist__items", children })
+  ] });
+}
+function ChecklistItem({ done, label, value }) {
+  return /* @__PURE__ */ jsxs43("li", { className: ["fds-checklist__item", done ? "fds-checklist__item--done" : ""].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx52("span", { className: "fds-checklist__mark", "aria-hidden": "true", children: done && /* @__PURE__ */ jsx52(Check3, {}) }),
+    /* @__PURE__ */ jsxs43("span", { className: "fds-checklist__text", children: [
+      /* @__PURE__ */ jsx52("span", { className: "fds-checklist__label", children: label }),
+      /* @__PURE__ */ jsx52("span", { className: "fds-checklist__value", children: value })
+    ] })
+  ] });
+}
+var Checklist = Object.assign(ChecklistRoot, { Item: ChecklistItem });
+
+// src/components/Drawer/Drawer.tsx
+import { useEffect as useEffect10, useId as useId14, useRef as useRef10 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { X as X3 } from "lucide-react";
+import { jsx as jsx53, jsxs as jsxs44 } from "react/jsx-runtime";
+var FOCUSABLE2 = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Drawer({ open, onClose, title, description, children, footer, dismissible = true }) {
+  const titleId = useId14();
+  const descriptionId = useId14();
+  const panelRef = useRef10(null);
+  const onCloseRef = useRef10(onClose);
+  onCloseRef.current = onClose;
+  const dismissibleRef = useRef10(dismissible);
+  dismissibleRef.current = dismissible;
+  useEffect10(() => {
+    if (!open) return;
+    const panel = panelRef.current;
+    const previouslyFocused = document.activeElement;
+    (panel?.querySelector("[data-autofocus]") ?? panel?.querySelector(`.fds-drawer__body ${FOCUSABLE2}`) ?? panel)?.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" && panel) {
+        const focusable = Array.from(panel.querySelectorAll(FOCUSABLE2));
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && (document.activeElement === first || document.activeElement === panel)) {
+          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;
+  return createPortal3(
+    /* @__PURE__ */ jsx53(
+      "div",
+      {
+        className: "fds-drawer__scrim",
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget && dismissible) onClose();
+        },
+        children: /* @__PURE__ */ jsxs44(
+          "div",
+          {
+            ref: panelRef,
+            className: "fds-drawer",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": description != null ? descriptionId : void 0,
+            tabIndex: -1,
+            children: [
+              /* @__PURE__ */ jsxs44("header", { className: "fds-drawer__header", children: [
+                /* @__PURE__ */ jsxs44("div", { className: "fds-drawer__heading", children: [
+                  /* @__PURE__ */ jsx53("h2", { id: titleId, className: "fds-drawer__title", children: title }),
+                  description != null && /* @__PURE__ */ jsx53("p", { id: descriptionId, className: "fds-drawer__description", children: description })
+                ] }),
+                /* @__PURE__ */ jsx53("button", { type: "button", className: "fds-drawer__close", onClick: onClose, disabled: !dismissible, "aria-label": "Close", children: /* @__PURE__ */ jsx53(X3, { "aria-hidden": "true" }) })
+              ] }),
+              /* @__PURE__ */ jsx53("div", { className: "fds-drawer__body", children }),
+              footer != null && /* @__PURE__ */ jsx53("footer", { className: "fds-drawer__footer", children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/ResourceCard/ResourceCard.tsx
+import { jsx as jsx54, jsxs as jsxs45 } from "react/jsx-runtime";
+function ResourceCard({ icon, title, badge, meta, stats, action, variant = "default", className, ...rest }) {
+  return /* @__PURE__ */ jsxs45("div", { className: ["fds-resource-card", `fds-resource-card--${variant}`, className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs45("div", { className: "fds-resource-card__main", children: [
+      /* @__PURE__ */ jsxs45("div", { className: "fds-resource-card__title", children: [
+        icon != null && /* @__PURE__ */ jsx54("span", { className: "fds-resource-card__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx54("span", { children: title }),
+        badge
+      ] }),
+      meta?.map((line, i) => /* @__PURE__ */ jsx54("div", { className: "fds-resource-card__meta", children: line }, i))
+    ] }),
+    stats && stats.length > 0 && /* @__PURE__ */ jsx54("dl", { className: "fds-resource-card__stats", children: stats.map((s, i) => /* @__PURE__ */ jsxs45("div", { className: "fds-resource-card__stat", children: [
+      /* @__PURE__ */ jsx54("dt", { children: s.label }),
+      /* @__PURE__ */ jsx54("dd", { children: s.value })
+    ] }, i)) }),
+    action != null && /* @__PURE__ */ jsx54("div", { className: "fds-resource-card__action", children: action })
+  ] });
+}
+
+// src/components/PageSkeleton/PageSkeleton.tsx
+import { jsx as jsx55, jsxs as jsxs46 } from "react/jsx-runtime";
+function PageSkeletonRoot({ label = "Loading", children }) {
+  return /* @__PURE__ */ jsx55(SkeletonGroup, { label, className: "fds-page-skeleton", children });
+}
+function PageSkeletonHeader({ title, description, breadcrumb, action, tabs = 0 }) {
+  return /* @__PURE__ */ jsx55(
+    PageHeader,
+    {
+      breadcrumb: breadcrumb ? /* @__PURE__ */ jsx55(Skeleton, { shape: "text", width: 140 }) : void 0,
+      title: title ?? /* @__PURE__ */ jsx55(Skeleton, { width: 220, height: 28 }),
+      description: description === true ? /* @__PURE__ */ jsx55(Skeleton, { shape: "text", width: 320 }) : description || void 0,
+      actions: action ? /* @__PURE__ */ jsx55(Skeleton, { width: 128, height: 36 }) : void 0,
+      children: tabs > 0 && /* @__PURE__ */ jsx55("div", { className: "fds-page-skeleton__tabs", children: Array.from({ length: tabs }, (_, i) => /* @__PURE__ */ jsx55(Skeleton, { shape: "text", width: 80 }, i)) })
+    }
+  );
+}
+function PageSkeletonToolbar({ filters = 2 }) {
+  return /* @__PURE__ */ jsxs46("div", { className: "fds-page-skeleton__toolbar", children: [
+    /* @__PURE__ */ jsx55(Skeleton, { width: 280, height: 36 }),
+    Array.from({ length: filters }, (_, i) => /* @__PURE__ */ jsx55(Skeleton, { width: 140, height: 36 }, i))
+  ] });
+}
+function PageSkeletonTable({ rows = 5, columns = 5 }) {
+  const cells = (key, width) => Array.from({ length: columns }, (_, c) => /* @__PURE__ */ jsx55(Skeleton, { shape: "text", width: c === 0 ? "60%" : width }, `${key}-${c}`));
+  return /* @__PURE__ */ jsxs46("div", { className: "fds-page-skeleton__table", style: { ["--fds-page-skeleton-columns"]: columns }, children: [
+    /* @__PURE__ */ jsx55("div", { className: "fds-page-skeleton__row fds-page-skeleton__row--head", children: cells("h", "40%") }),
+    Array.from({ length: rows }, (_, r) => /* @__PURE__ */ jsx55("div", { className: "fds-page-skeleton__row", children: cells(`r${r}`, "50%") }, r))
+  ] });
+}
+function PageSkeletonCards({ count = 3, height = 120, columns = 3 }) {
+  return /* @__PURE__ */ jsx55("div", { className: "fds-page-skeleton__cards", style: { ["--fds-page-skeleton-columns"]: columns }, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx55(Skeleton, { height, className: "fds-page-skeleton__card" }, i)) });
+}
+function PageSkeletonForm({ fields = 3 }) {
+  return /* @__PURE__ */ jsx55("div", { className: "fds-page-skeleton__form", children: Array.from({ length: fields }, (_, i) => /* @__PURE__ */ jsxs46("div", { className: "fds-page-skeleton__field", children: [
+    /* @__PURE__ */ jsx55(Skeleton, { shape: "text", width: 120 }),
+    /* @__PURE__ */ jsx55(Skeleton, { height: 36 })
+  ] }, i)) });
+}
+function PageSkeletonSplit({ children, aside }) {
+  return /* @__PURE__ */ jsxs46("div", { className: "fds-page-skeleton__split", children: [
+    /* @__PURE__ */ jsx55("div", { className: "fds-page-skeleton__main", children }),
+    /* @__PURE__ */ jsx55("div", { className: "fds-page-skeleton__aside", children: aside })
+  ] });
+}
+var PageSkeleton = Object.assign(PageSkeletonRoot, {
+  Header: PageSkeletonHeader,
+  Toolbar: PageSkeletonToolbar,
+  Table: PageSkeletonTable,
+  Cards: PageSkeletonCards,
+  Form: PageSkeletonForm,
+  Split: PageSkeletonSplit
+});
+
+// src/components/PreviewCard/PreviewCard.tsx
+import { jsx as jsx56, jsxs as jsxs47 } from "react/jsx-runtime";
+function PreviewCardRoot({ as, variant = "default", className, ...rest }) {
+  const Root = as ?? "div";
+  return /* @__PURE__ */ jsx56(Root, { className: ["fds-preview-card", `fds-preview-card--${variant}`, className].filter(Boolean).join(" "), ...rest });
+}
+function PreviewCardPreview({ label, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs47("div", { className: ["fds-preview-card__preview", className].filter(Boolean).join(" "), ...rest, children: [
+    label != null && /* @__PURE__ */ jsx56("span", { className: "fds-preview-card__label", children: label }),
+    children
+  ] });
+}
+function PreviewCardTitle({ aside, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs47("div", { className: ["fds-preview-card__title", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx56("span", { className: "fds-preview-card__name", children }),
+    aside != null && /* @__PURE__ */ jsx56("span", { className: "fds-preview-card__aside", children: aside })
+  ] });
+}
+function part(name) {
+  return function PreviewCardPart({ className, ...rest }) {
+    return /* @__PURE__ */ jsx56("div", { className: [`fds-preview-card__${name}`, className].filter(Boolean).join(" "), ...rest });
+  };
+}
+var PreviewCard = Object.assign(PreviewCardRoot, {
+  Preview: PreviewCardPreview,
+  Body: part("body"),
+  Title: PreviewCardTitle,
+  Meta: part("meta"),
+  Footer: part("footer")
+});
+
+// src/components/Tile/Tile.tsx
+import { jsx as jsx57, jsxs as jsxs48 } from "react/jsx-runtime";
+function Tile({ label, aside, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs48("section", { className: ["fds-tile", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs48("header", { className: "fds-tile__head", children: [
+      /* @__PURE__ */ jsx57("span", { className: "fds-tile__label", children: label }),
+      aside
+    ] }),
+    /* @__PURE__ */ jsx57("div", { className: "fds-tile__body", children })
+  ] });
+}
+
+// src/components/ListCard/ListCard.tsx
+import { jsx as jsx58, jsxs as jsxs49 } from "react/jsx-runtime";
+function ListCardRoot({ title, count, aside, footer, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs49("section", { className: ["fds-list-card", className].filter(Boolean).join(" "), ...rest, children: [
+    (title != null || aside != null) && /* @__PURE__ */ jsxs49("header", { className: "fds-list-card__head", children: [
+      /* @__PURE__ */ jsxs49("span", { className: "fds-list-card__title", children: [
+        title,
+        count != null && /* @__PURE__ */ jsx58("span", { className: "fds-list-card__count", children: count })
+      ] }),
+      aside != null && /* @__PURE__ */ jsx58("span", { className: "fds-list-card__aside", children: aside })
+    ] }),
+    /* @__PURE__ */ jsx58("ul", { className: "fds-list-card__rows", children }),
+    footer != null && /* @__PURE__ */ jsx58("footer", { className: "fds-list-card__footer", children: footer })
+  ] });
+}
+function ListCardRow({ icon, tone = "neutral", title, description, trailing, muted, className, ...rest }) {
+  return /* @__PURE__ */ jsxs49("li", { className: ["fds-list-card__row", muted ? "fds-list-card__row--muted" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    icon != null && /* @__PURE__ */ jsx58("span", { className: `fds-list-card__icon fds-list-card__icon--${tone}`, "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs49("span", { className: "fds-list-card__text", children: [
+      /* @__PURE__ */ jsx58("span", { className: "fds-list-card__row-title", children: title }),
+      description != null && /* @__PURE__ */ jsx58("span", { className: "fds-list-card__description", children: description })
+    ] }),
+    trailing != null && /* @__PURE__ */ jsx58("span", { className: "fds-list-card__trailing", children: trailing })
+  ] });
+}
+var ListCard = Object.assign(ListCardRoot, { Row: ListCardRow });
+
+// src/components/DescriptionList/DescriptionList.tsx
+import { jsx as jsx59, jsxs as jsxs50 } from "react/jsx-runtime";
+function DescriptionList({ title, action, items = [], note, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs50("section", { className: ["fds-description-list", className].filter(Boolean).join(" "), ...rest, children: [
+    (title != null || action != null) && /* @__PURE__ */ jsxs50("header", { className: "fds-description-list__head", children: [
+      /* @__PURE__ */ jsx59("span", { className: "fds-description-list__title", children: title }),
+      action != null && /* @__PURE__ */ jsx59("span", { className: "fds-description-list__action", children: action })
+    ] }),
+    items.length > 0 && /* @__PURE__ */ jsx59("dl", { className: "fds-description-list__items", children: items.map((item, i) => /* @__PURE__ */ jsxs50("div", { className: "fds-description-list__item", children: [
+      /* @__PURE__ */ jsx59("dt", { children: item.label }),
+      /* @__PURE__ */ jsx59("dd", { children: item.value })
+    ] }, i)) }),
+    children,
+    note != null && /* @__PURE__ */ jsx59("p", { className: "fds-description-list__note", children: note })
+  ] });
+}
+
+// src/components/ColorRamp/ColorRamp.tsx
+import { jsx as jsx60 } from "react/jsx-runtime";
+function ColorRamp({ colors, size = "md", className, ...rest }) {
+  return /* @__PURE__ */ jsx60("div", { className: ["fds-color-ramp", `fds-color-ramp--${size}`, className].filter(Boolean).join(" "), "aria-hidden": "true", ...rest, children: colors.map((c, i) => /* @__PURE__ */ jsx60("span", { className: "fds-color-ramp__step", style: { "--fds-ramp-color": c } }, i)) });
+}
+
+// src/components/SwatchList/SwatchList.tsx
+import { jsx as jsx61, jsxs as jsxs51 } from "react/jsx-runtime";
+function SwatchList({ items, className, ...rest }) {
+  return /* @__PURE__ */ jsx61("ul", { className: ["fds-swatch-list", className].filter(Boolean).join(" "), ...rest, children: items.map((item, i) => /* @__PURE__ */ jsxs51("li", { className: "fds-swatch-list__item", children: [
+    /* @__PURE__ */ jsx61(
+      "span",
+      {
+        className: ["fds-swatch-list__dot", item.color ? "" : "fds-swatch-list__dot--empty"].filter(Boolean).join(" "),
+        style: item.color ? { "--fds-swatch-list-color": item.color } : void 0,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx61("span", { className: "fds-swatch-list__name", children: item.name }),
+    /* @__PURE__ */ jsx61("span", { className: "fds-swatch-list__value", children: item.value })
+  ] }, i)) });
+}
+
+// src/components/TypeSpecimen/TypeSpecimen.tsx
+import { jsx as jsx62, jsxs as jsxs52 } from "react/jsx-runtime";
+var ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789";
+function TypeSpecimen({ family, fontFamily, tokens, sample, weights = [], footer, className, ...rest }) {
+  const face = { "--fds-specimen-font": fontFamily };
+  return /* @__PURE__ */ jsxs52("section", { className: ["fds-type-specimen", className].filter(Boolean).join(" "), style: face, ...rest, children: [
+    /* @__PURE__ */ jsxs52("header", { className: "fds-type-specimen__head", children: [
+      /* @__PURE__ */ jsxs52("div", { className: "fds-type-specimen__titles", children: [
+        /* @__PURE__ */ jsx62("h3", { className: "fds-type-specimen__family", children: family }),
+        tokens != null && /* @__PURE__ */ jsx62("div", { className: "fds-type-specimen__tokens", children: tokens })
+      ] }),
+      /* @__PURE__ */ jsx62("span", { className: "fds-type-specimen__glyph", "aria-hidden": "true", children: "Aa" })
+    ] }),
+    sample != null && /* @__PURE__ */ jsx62("p", { className: "fds-type-specimen__sample", children: sample }),
+    /* @__PURE__ */ jsx62("p", { className: "fds-type-specimen__alphabet", children: ALPHABET }),
+    weights.length > 0 && /* @__PURE__ */ jsx62("ul", { className: "fds-type-specimen__weights", children: weights.map((w) => /* @__PURE__ */ jsxs52("li", { children: [
+      /* @__PURE__ */ jsx62("span", { style: { fontWeight: w.weight }, children: "Ag" }),
+      /* @__PURE__ */ jsx62("small", { children: w.label })
+    ] }, w.label)) }),
+    footer != null && /* @__PURE__ */ jsx62("footer", { className: "fds-type-specimen__footer", children: footer })
+  ] });
+}
+function TypeSample({ fontFamily, caption, className, ...rest }) {
+  return /* @__PURE__ */ jsxs52("div", { className: ["fds-type-sample", className].filter(Boolean).join(" "), style: { "--fds-specimen-font": fontFamily }, ...rest, children: [
+    /* @__PURE__ */ jsx62("span", { className: "fds-type-sample__glyph", "aria-hidden": "true", children: "Aa" }),
+    caption != null && /* @__PURE__ */ jsx62("span", { className: "fds-type-sample__caption", children: caption })
+  ] });
+}
+
+// src/components/TypeScale/TypeScale.tsx
+import { jsx as jsx63, jsxs as jsxs53 } from "react/jsx-runtime";
+function TypeScaleRoot({ className, ...rest }) {
+  return /* @__PURE__ */ jsx63("ul", { className: ["fds-type-scale", className].filter(Boolean).join(" "), ...rest });
+}
+function TypeScaleRow({ name, detail, sampleStyle, sample = "Check every pull request", className, ...rest }) {
+  return /* @__PURE__ */ jsxs53("li", { className: ["fds-type-scale__row", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs53("span", { className: "fds-type-scale__label", children: [
+      /* @__PURE__ */ jsx63("span", { className: "fds-type-scale__name", children: name }),
+      detail != null && /* @__PURE__ */ jsx63("span", { className: "fds-type-scale__detail", children: detail })
+    ] }),
+    /* @__PURE__ */ jsx63("span", { className: "fds-type-scale__sample", style: sampleStyle, children: sample })
+  ] });
+}
+var TypeScale = Object.assign(TypeScaleRoot, { Row: TypeScaleRow });
+
+// src/components/MeasureList/MeasureList.tsx
+import { jsx as jsx64, jsxs as jsxs54 } from "react/jsx-runtime";
+function MeasureList({ items, max, tone = "accent", className, ...rest }) {
+  const top = max ?? Math.max(1, ...items.map((i) => i.amount));
+  return /* @__PURE__ */ jsx64("ul", { className: ["fds-measure-list", `fds-measure-list--${tone}`, className].filter(Boolean).join(" "), ...rest, children: items.map((item, i) => /* @__PURE__ */ jsxs54("li", { className: "fds-measure-list__item", children: [
+    /* @__PURE__ */ jsx64("span", { className: "fds-measure-list__name", children: item.name }),
+    /* @__PURE__ */ jsx64("span", { className: "fds-measure-list__value", children: item.value }),
+    /* @__PURE__ */ jsx64("span", { className: "fds-measure-list__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx64("span", { className: "fds-measure-list__bar", style: { "--fds-measure": `${Math.min(100, item.amount / top * 100)}%` } }) })
+  ] }, i)) });
+}
+
+// src/components/TokenSample/TokenSample.tsx
+import { jsx as jsx65, jsxs as jsxs55 } from "react/jsx-runtime";
+function TokenSample({ kind, value, name, detail, className, ...rest }) {
+  const style = { [kind === "radius" ? "--fds-sample-radius" : "--fds-sample-shadow"]: value };
+  return /* @__PURE__ */ jsxs55("div", { className: ["fds-token-sample", `fds-token-sample--${kind}`, className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx65("span", { className: "fds-token-sample__shape", style, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx65("span", { className: "fds-token-sample__name", children: name }),
+    detail != null && /* @__PURE__ */ jsx65("span", { className: "fds-token-sample__detail", children: detail })
+  ] });
+}
+
+// src/components/EasingCurve/EasingCurve.tsx
+import { jsx as jsx66, jsxs as jsxs56 } from "react/jsx-runtime";
+var BEZIER = /cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/;
+var W = 120;
+var H = 72;
+var PAD = 12;
+function easingPath(value) {
+  const m = BEZIER.exec(value);
+  const [x1, y1, x2, y2] = m ? m.slice(1).map(Number) : [0, 0, 1, 1];
+  const x = (t) => PAD + t * (W - PAD * 2);
+  const y = (t) => H - PAD - t * (H - PAD * 2);
+  return `M${x(0)},${y(0)} C${x(x1)},${y(y1)} ${x(x2)},${y(y2)} ${x(1)},${y(1)}`;
+}
+function EasingCurve({ value, name, className, ...rest }) {
+  return /* @__PURE__ */ jsxs56("div", { className: ["fds-easing-curve", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx66("svg", { className: "fds-easing-curve__plot", viewBox: `0 0 ${W} ${H}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx66("path", { d: easingPath(value) }) }),
+    /* @__PURE__ */ jsx66("span", { className: "fds-easing-curve__name", children: name }),
+    /* @__PURE__ */ jsx66("span", { className: "fds-easing-curve__value", children: value })
+  ] });
+}
+
+// src/components/FilterChips/FilterChips.tsx
+import { useRef as useRef11 } from "react";
+import { jsx as jsx67, jsxs as jsxs57 } from "react/jsx-runtime";
+function FilterChips({ options, value, onChange, "aria-label": ariaLabel, className }) {
+  const refs = useRef11([]);
+  const onKeyDown = (e, index) => {
+    const step = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+    if (!step) return;
+    e.preventDefault();
+    const next = (index + step + options.length) % options.length;
+    onChange(options[next].value);
+    refs.current[next]?.focus();
+  };
+  return /* @__PURE__ */ jsx67("div", { role: "radiogroup", "aria-label": ariaLabel, className: ["fds-filter-chips", className].filter(Boolean).join(" "), children: options.map((o, i) => {
+    const selected = o.value === value;
+    return /* @__PURE__ */ jsxs57(
+      "button",
+      {
+        ref: (el) => {
+          refs.current[i] = el;
+        },
+        type: "button",
+        role: "radio",
+        "aria-checked": selected,
+        tabIndex: selected ? 0 : -1,
+        className: ["fds-filter-chips__chip", selected ? "fds-filter-chips__chip--selected" : ""].filter(Boolean).join(" "),
+        onClick: () => onChange(o.value),
+        onKeyDown: (e) => onKeyDown(e, i),
+        children: [
+          o.label,
+          o.count != null && /* @__PURE__ */ jsx67("span", { className: "fds-filter-chips__count", children: o.count })
+        ]
+      },
+      o.value
+    );
+  }) });
+}
+
+// src/components/Meter/Meter.tsx
+import { jsx as jsx68, jsxs as jsxs58 } from "react/jsx-runtime";
+function Meter({ value, max, label, className, ...rest }) {
+  const pct = max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
+  return /* @__PURE__ */ jsxs58("div", { className: ["fds-meter", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx68(
+      "span",
+      {
+        className: "fds-meter__track",
+        role: "meter",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        "aria-label": typeof label === "string" ? label : void 0,
+        children: /* @__PURE__ */ jsx68("span", { className: "fds-meter__fill", style: { "--fds-meter": `${pct}%` } })
+      }
+    ),
+    /* @__PURE__ */ jsx68("span", { className: "fds-meter__label", children: label })
   ] });
 }
 export {
@@ -2334,22 +2851,37 @@ export {
   Callout,
   Card,
   Checkbox,
+  Checklist,
+  ColorRamp,
+  DescriptionList,
   DiffPropertyList,
   DiffSection,
   Divider,
+  Drawer,
+  EasingCurve,
   EmptyState,
+  FilterChips,
   IconButton,
   Input,
+  ListCard,
   ListLabel,
+  MeasureList,
   Menu,
+  Meter,
   MismatchCard,
   Modal,
   MultiSelect,
+  NumberedSteps,
+  OptionList,
+  OptionRow,
   PageHeader,
+  PageSkeleton,
   Pagination,
+  PreviewCard,
   PricingCard,
   Radio,
   RadioCard,
+  ResourceCard,
   SearchInput,
   SectionHeader,
   SegmentedControl,
@@ -2365,14 +2897,21 @@ export {
   Stat,
   StatusDot,
   StepList,
+  Stepper,
   Swatch,
+  SwatchList,
   TabNav,
   Table,
   Tag,
+  Tile,
   Toast,
   ToastRegion,
   Toggle,
+  TokenSample,
   Tooltip,
+  TypeSample,
+  TypeScale,
+  TypeSpecimen,
   WorkspaceAvatar,
   WorkspaceSwitcher,
   breakpoints,