@usefidel/design-system 0.7.0 → 0.9.0

package/dist/admin.css

@@ -1,8 +1,8 @@
 /* GENERATED by @usefidel/design-system — do not edit. Surface: admin. */
 :root {
   --color-bg: #ffffff;
-  --color-surface: #fff7ed;
-  --color-surface-hover: #ffedd5;
+  --color-surface: #f5f5f5;
+  --color-surface-hover: #ececec;
   --color-surface-raised: #ffffff;
   --color-text: #171717;
   --color-text-secondary: #525252;
@@ -47,11 +47,14 @@
   --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
   --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
   --radius-pill: 9999px;
   --radius-full: 9999px;
   --spacing-1: 4px;

package/dist/extension.css

@@ -47,11 +47,14 @@
   --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
   --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
   --radius-pill: 20px;
   --radius-full: 9999px;
   --spacing-1: 4px;

package/dist/fidel.manifest.json

@@ -10,6 +10,6 @@
     "webapp.css"
   ],
   "storybookUrl": null,
-  "packageVersion": "0.7.0",
-  "resolvedSha": "e51d3196d9780b87d0fd4f00db40506a6288ab8c"
+  "packageVersion": "0.9.0",
+  "resolvedSha": "e41a4c4ba174007088f26caf33a5d2c8ddd43094"
 }

package/dist/icons.cjs

@@ -0,0 +1,24 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/icons.ts
+var icons_exports = {};
+module.exports = __toCommonJS(icons_exports);
+__reExport(icons_exports, require("lucide-react"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("lucide-react")
+});

package/dist/icons.d.cts

@@ -0,0 +1 @@
+export * from 'lucide-react';

package/dist/icons.d.ts

@@ -0,0 +1 @@
+export * from 'lucide-react';

package/dist/icons.js

@@ -0,0 +1,2 @@
+// src/icons.ts
+export * from "lucide-react";

package/dist/index.cjs

@@ -23,7 +23,9 @@ __export(index_exports, {
   Button: () => Button,
   DiffPropertyList: () => DiffPropertyList,
   DiffSection: () => DiffSection,
-  MismatchCard: () => MismatchCard
+  MismatchCard: () => MismatchCard,
+  Select: () => Select,
+  Toggle: () => Toggle
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -282,10 +284,274 @@ function Arrow() {
     }
   );
 }
+
+// src/components/Select/Select.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ChevronIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", "aria-hidden": "true", className: "fds-select__chevronIcon", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function CheckIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4.5 10.5l3 3 8-8.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+var Select = (0, import_react3.forwardRef)(function Select2({
+  options,
+  value,
+  onChange,
+  placeholder = "Select\u2026",
+  label,
+  hint,
+  error,
+  disabled = false,
+  searchable = false,
+  searchPlaceholder = "Search\u2026",
+  leadingIcon,
+  id,
+  name,
+  className,
+  containerClassName
+}, ref) {
+  const genId = (0, import_react3.useId)();
+  const triggerId = id ?? genId;
+  const listId = `${genId}-list`;
+  const msgId = `${genId}-msg`;
+  const rootRef = (0, import_react3.useRef)(null);
+  const triggerRef = (0, import_react3.useRef)(null);
+  const listRef = (0, import_react3.useRef)(null);
+  const searchRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useImperativeHandle)(ref, () => triggerRef.current, []);
+  const [open, setOpen] = (0, import_react3.useState)(false);
+  const [query, setQuery] = (0, import_react3.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react3.useState)(-1);
+  const selected = options.find((o) => o.value === value) ?? null;
+  const filtered = (0, import_react3.useMemo)(() => {
+    if (!searchable || !query.trim()) return options;
+    const q = query.trim().toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || (o.secondary?.toLowerCase().includes(q) ?? false)
+    );
+  }, [options, searchable, query]);
+  const hasMessage = Boolean(error ?? hint);
+  const firstEnabled = (list) => list.findIndex((o) => !o.disabled);
+  (0, import_react3.useEffect)(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open]);
+  (0, import_react3.useEffect)(() => {
+    if (!open) {
+      setQuery("");
+      return;
+    }
+    const selIdx = filtered.findIndex((o) => o.value === value);
+    setActiveIndex(selIdx >= 0 ? selIdx : firstEnabled(filtered));
+    const raf = requestAnimationFrame(() => {
+      if (searchable) searchRef.current?.focus();
+      else listRef.current?.focus();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [open]);
+  const close = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  const move = (dir) => {
+    setActiveIndex((prev) => {
+      if (filtered.length === 0) return -1;
+      let i = prev;
+      for (let k = 0; k < filtered.length; k++) {
+        i = (i + dir + filtered.length) % filtered.length;
+        if (!filtered[i].disabled) return i;
+      }
+      return prev;
+    });
+  };
+  const choose = (i) => {
+    const o = filtered[i];
+    if (o && !o.disabled) {
+      onChange?.(o.value);
+      close();
+    }
+  };
+  const onKeyDown = (e) => {
+    if (!open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        setOpen(true);
+      }
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      move(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      move(-1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActiveIndex(firstEnabled(filtered));
+    } else if (e.key === "End") {
+      e.preventDefault();
+      for (let i = filtered.length - 1; i >= 0; i--) {
+        if (!filtered[i].disabled) {
+          setActiveIndex(i);
+          break;
+        }
+      }
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      choose(activeIndex);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+    }
+  };
+  const triggerClasses = [
+    "fds-select__trigger",
+    error ? "fds-select__trigger--error" : "",
+    open ? "fds-select__trigger--open" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ref: rootRef,
+      className: ["fds-select-field", containerClassName].filter(Boolean).join(" "),
+      children: [
+        label != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { htmlFor: triggerId, className: "fds-select__label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fds-select", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "button",
+            {
+              type: "button",
+              id: triggerId,
+              ref: triggerRef,
+              className: triggerClasses,
+              disabled,
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-controls": open ? listId : void 0,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": hasMessage ? msgId : void 0,
+              onClick: () => !disabled && setOpen((o) => !o),
+              onKeyDown,
+              children: [
+                (selected?.avatar ?? leadingIcon) != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-select__lead", children: selected?.avatar ?? leadingIcon }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "span",
+                  {
+                    className: `fds-select__value${selected ? "" : " fds-select__value--placeholder"}`,
+                    children: selected ? selected.label : placeholder
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-select__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronIcon, {}) })
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fds-select__popover", children: [
+            searchable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fds-select__search", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                ref: searchRef,
+                className: "fds-select__searchInput",
+                placeholder: searchPlaceholder,
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                onKeyDown,
+                role: "combobox",
+                "aria-expanded": true,
+                "aria-controls": listId,
+                "aria-autocomplete": "list"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
+              {
+                ref: listRef,
+                id: listId,
+                role: "listbox",
+                tabIndex: searchable ? -1 : 0,
+                className: "fds-select__list",
+                "aria-activedescendant": activeIndex >= 0 ? `${listId}-opt-${activeIndex}` : void 0,
+                onKeyDown: searchable ? void 0 : onKeyDown,
+                children: [
+                  filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fds-select__empty", children: "No results" }),
+                  filtered.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                    "div",
+                    {
+                      id: `${listId}-opt-${i}`,
+                      role: "option",
+                      "aria-selected": o.value === value,
+                      "aria-disabled": o.disabled || void 0,
+                      className: [
+                        "fds-select__option",
+                        i === activeIndex ? "fds-select__option--active" : "",
+                        o.disabled ? "fds-select__option--disabled" : ""
+                      ].filter(Boolean).join(" "),
+                      onMouseEnter: () => !o.disabled && setActiveIndex(i),
+                      onMouseDown: (e) => e.preventDefault(),
+                      onClick: () => choose(i),
+                      children: [
+                        o.avatar != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-select__optAvatar", children: o.avatar }),
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "fds-select__optText", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-select__optLabel", children: o.label }),
+                          o.secondary != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-select__optSecondary", children: o.secondary })
+                        ] }),
+                        o.value === value && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-select__check", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckIcon, {}) })
+                      ]
+                    },
+                    o.value
+                  ))
+                ]
+              }
+            )
+          ] })
+        ] }),
+        hasMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { id: msgId, className: error ? "fds-select__error" : "fds-select__hint", children: error ?? hint }),
+        name != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "hidden", name, value: value ?? "" })
+      ]
+    }
+  );
+});
+
+// src/components/Toggle/Toggle.tsx
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Toggle = (0, import_react4.forwardRef)(function Toggle2({ size = "medium", label, description, className, id, disabled, ...rest }, ref) {
+  const generatedId = (0, import_react4.useId)();
+  const inputId = id ?? generatedId;
+  const classes = ["fds-toggle", `fds-toggle--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: classes, "data-disabled": disabled ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "input",
+      {
+        ...rest,
+        id: inputId,
+        ref,
+        type: "checkbox",
+        role: "switch",
+        disabled,
+        className: "fds-toggle__input"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { htmlFor: inputId, className: "fds-toggle__control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-toggle__track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-toggle__thumb" }) }),
+      (label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "fds-toggle__text", children: [
+        label != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-toggle__label", children: label }),
+        description != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-toggle__description", children: description })
+      ] })
+    ] })
+  ] });
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   DiffPropertyList,
   DiffSection,
-  MismatchCard
+  MismatchCard,
+  Select,
+  Toggle
 });

package/dist/index.css

@@ -416,3 +416,285 @@
 .fds-diff-section__design {
   color: #1e8902;
 }
+
+/* src/components/Select/select.css */
+.fds-select-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 8px);
+  width: 100%;
+}
+.fds-select__label {
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-label-sm, 14px);
+  line-height: var(--line-height-label-sm, 22px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-select {
+  position: relative;
+  width: 100%;
+}
+.fds-select__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  width: 100%;
+  min-height: 44px;
+  padding: 0 var(--spacing-3, 12px);
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-md, 6px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-md, 16px);
+  color: var(--color-text, #171717);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color var(--duration-instant, 80ms) ease, box-shadow var(--duration-instant, 80ms) ease;
+}
+.fds-select__trigger:focus-visible,
+.fds-select__trigger--open {
+  outline: none;
+  border-color: var(--color-accent, #ea580c);
+  box-shadow: inset 0 0 0 1px var(--color-accent, #ea580c);
+}
+.fds-select__trigger--error {
+  border-color: var(--color-error, #b91c1c);
+}
+.fds-select__trigger--error.fds-select__trigger--open,
+.fds-select__trigger--error:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--color-error, #b91c1c);
+}
+.fds-select__trigger:disabled {
+  background: var(--color-surface-muted, #fafafa);
+  color: var(--color-text-muted, #a3a3a3);
+  cursor: not-allowed;
+}
+.fds-select__lead {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.fds-select__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fds-select__value--placeholder {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-select__chevron {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-select__popover {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 50;
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-md, 6px);
+  box-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1));
+  overflow: hidden;
+}
+.fds-select__search {
+  padding: var(--spacing-2, 8px);
+  border-bottom: 1px solid var(--color-border-light, #f5f5f5);
+}
+.fds-select__searchInput {
+  width: 100%;
+  padding: 8px var(--spacing-3, 12px);
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-sm, 4px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  color: var(--color-text, #171717);
+}
+.fds-select__searchInput:focus {
+  outline: none;
+  border-color: var(--color-accent, #ea580c);
+  box-shadow: inset 0 0 0 1px var(--color-accent, #ea580c);
+}
+.fds-select__list {
+  max-height: 280px;
+  overflow-y: auto;
+  padding: var(--spacing-1, 4px);
+}
+.fds-select__list:focus {
+  outline: none;
+}
+.fds-select__empty {
+  padding: var(--spacing-3, 12px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  color: var(--color-text-muted, #a3a3a3);
+  text-align: center;
+}
+.fds-select__option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  padding: 8px var(--spacing-2, 8px);
+  border-radius: var(--radius-sm, 4px);
+  cursor: pointer;
+}
+.fds-select__option--active {
+  background: var(--color-surface, #fff7ed);
+}
+.fds-select__option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.fds-select__optAvatar {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-select__optText {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.fds-select__optLabel {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  color: var(--color-text, #171717);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fds-select__optSecondary {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  color: var(--color-text-muted, #a3a3a3);
+  white-space: nowrap;
+}
+.fds-select__check {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-accent, #ea580c);
+}
+.fds-select__hint,
+.fds-select__error {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+}
+.fds-select__hint {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-select__error {
+  color: var(--color-error, #b91c1c);
+}
+
+/* src/components/Toggle/toggle.css */
+.fds-toggle {
+  display: inline-flex;
+  position: relative;
+}
+.fds-toggle__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.fds-toggle__input:disabled {
+  cursor: not-allowed;
+}
+.fds-toggle__control {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-2, 8px);
+  cursor: pointer;
+}
+.fds-toggle__input:disabled ~ .fds-toggle__control {
+  cursor: not-allowed;
+}
+.fds-toggle__track {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  background-color: var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-pill, 9999px);
+  transition: background-color var(--duration-quick, 150ms) var(--ease-out, ease);
+}
+.fds-toggle__thumb {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #ffffff;
+  border-radius: var(--radius-full, 9999px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  transition: left var(--duration-quick, 150ms) var(--ease-out, ease);
+}
+.fds-toggle__input:checked ~ .fds-toggle__control .fds-toggle__track {
+  background-color: var(--color-accent, #ea580c);
+}
+.fds-toggle__input:focus-visible ~ .fds-toggle__control .fds-toggle__track {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: 2px;
+}
+.fds-toggle[data-disabled] .fds-toggle__track {
+  opacity: 0.5;
+}
+.fds-toggle[data-disabled] .fds-toggle__label,
+.fds-toggle[data-disabled] .fds-toggle__description {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-toggle--medium .fds-toggle__track {
+  width: 44px;
+  height: 24px;
+}
+.fds-toggle--medium .fds-toggle__thumb {
+  width: 20px;
+  height: 20px;
+  left: 2px;
+}
+.fds-toggle--medium .fds-toggle__input:checked ~ .fds-toggle__control .fds-toggle__thumb {
+  left: 22px;
+}
+.fds-toggle--small .fds-toggle__track {
+  width: 36px;
+  height: 20px;
+}
+.fds-toggle--small .fds-toggle__thumb {
+  width: 16px;
+  height: 16px;
+  left: 2px;
+}
+.fds-toggle--small .fds-toggle__input:checked ~ .fds-toggle__control .fds-toggle__thumb {
+  left: 18px;
+}
+.fds-toggle__text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fds-toggle__label {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: var(--line-height-text-sm, 22px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-toggle__description {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: var(--line-height-text-sm, 22px);
+  color: var(--color-text-secondary, #525252);
+}

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral';
 type ButtonSize = 'x-small' | 'small' | 'medium' | 'big';
@@ -177,4 +177,59 @@ interface DiffPropertyListProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function DiffPropertyList({ properties, className, ...rest }: DiffPropertyListProps): react.JSX.Element;
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty };
+interface SelectOption {
+    value: string;
+    label: string;
+    /** Secondary line, e.g. an @handle. */
+    secondary?: string;
+    /** Leading node (avatar / icon) shown in the option and, when selected, the trigger. */
+    avatar?: ReactNode;
+    disabled?: boolean;
+}
+interface SelectProps {
+    options: SelectOption[];
+    value?: string | null;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    disabled?: boolean;
+    /** Show a filter input at the top of the list. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Leading node in the trigger; a selected option's `avatar` takes precedence. */
+    leadingIcon?: ReactNode;
+    id?: string;
+    /** When set, renders a hidden input so the value posts with a form. */
+    name?: string;
+    className?: string;
+    containerClassName?: string;
+}
+/**
+ * Fidel design-system Select — a listbox (optionally searchable) with avatar +
+ * secondary-line options and a checkmark on the selected row. Controlled via
+ * `value`/`onChange`. Keyboard: type/Enter/Space/↓ open; ↑/↓/Home/End move;
+ * Enter selects; Esc closes; click-outside closes. Measured from Figma "Fidel
+ * Library" Select (node 3521:5948).
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+type ToggleSize = 'small' | 'medium';
+interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Size step. @default 'medium' */
+    size?: ToggleSize;
+    /** Text beside the switch. */
+    label?: ReactNode;
+    /** Secondary line under the label. */
+    description?: ReactNode;
+}
+/**
+ * Fidel design-system Toggle (switch). Renders a native checkbox with
+ * `role="switch"`; on/off/disabled are handled in CSS, so all standard input
+ * attributes (checked, defaultChecked, onChange, disabled, aria-*, …) pass
+ * through. Measured from Figma "Fidel Library" Toggle (node 3528:8473).
+ */
+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 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral';
 type ButtonSize = 'x-small' | 'small' | 'medium' | 'big';
@@ -177,4 +177,59 @@ interface DiffPropertyListProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function DiffPropertyList({ properties, className, ...rest }: DiffPropertyListProps): react.JSX.Element;
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty };
+interface SelectOption {
+    value: string;
+    label: string;
+    /** Secondary line, e.g. an @handle. */
+    secondary?: string;
+    /** Leading node (avatar / icon) shown in the option and, when selected, the trigger. */
+    avatar?: ReactNode;
+    disabled?: boolean;
+}
+interface SelectProps {
+    options: SelectOption[];
+    value?: string | null;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    disabled?: boolean;
+    /** Show a filter input at the top of the list. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Leading node in the trigger; a selected option's `avatar` takes precedence. */
+    leadingIcon?: ReactNode;
+    id?: string;
+    /** When set, renders a hidden input so the value posts with a form. */
+    name?: string;
+    className?: string;
+    containerClassName?: string;
+}
+/**
+ * Fidel design-system Select — a listbox (optionally searchable) with avatar +
+ * secondary-line options and a checkmark on the selected row. Controlled via
+ * `value`/`onChange`. Keyboard: type/Enter/Space/↓ open; ↑/↓/Home/End move;
+ * Enter selects; Esc closes; click-outside closes. Measured from Figma "Fidel
+ * Library" Select (node 3521:5948).
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+type ToggleSize = 'small' | 'medium';
+interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Size step. @default 'medium' */
+    size?: ToggleSize;
+    /** Text beside the switch. */
+    label?: ReactNode;
+    /** Secondary line under the label. */
+    description?: ReactNode;
+}
+/**
+ * Fidel design-system Toggle (switch). Renders a native checkbox with
+ * `role="switch"`; on/off/disabled are handled in CSS, so all standard input
+ * attributes (checked, defaultChecked, onChange, disabled, aria-*, …) pass
+ * through. Measured from Figma "Fidel Library" Toggle (node 3528:8473).
+ */
+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 };

package/dist/index.js

@@ -253,9 +253,281 @@ function Arrow() {
     }
   );
 }
+
+// src/components/Select/Select.tsx
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState as useState3
+} from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ChevronIcon() {
+  return /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", "aria-hidden": "true", className: "fds-select__chevronIcon", children: /* @__PURE__ */ jsx4("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M4.5 10.5l3 3 8-8.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+var Select = forwardRef(function Select2({
+  options,
+  value,
+  onChange,
+  placeholder = "Select\u2026",
+  label,
+  hint,
+  error,
+  disabled = false,
+  searchable = false,
+  searchPlaceholder = "Search\u2026",
+  leadingIcon,
+  id,
+  name,
+  className,
+  containerClassName
+}, ref) {
+  const genId = useId();
+  const triggerId = id ?? genId;
+  const listId = `${genId}-list`;
+  const msgId = `${genId}-msg`;
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const searchRef = useRef(null);
+  useImperativeHandle(ref, () => triggerRef.current, []);
+  const [open, setOpen] = useState3(false);
+  const [query, setQuery] = useState3("");
+  const [activeIndex, setActiveIndex] = useState3(-1);
+  const selected = options.find((o) => o.value === value) ?? null;
+  const filtered = useMemo(() => {
+    if (!searchable || !query.trim()) return options;
+    const q = query.trim().toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || (o.secondary?.toLowerCase().includes(q) ?? false)
+    );
+  }, [options, searchable, query]);
+  const hasMessage = Boolean(error ?? hint);
+  const firstEnabled = (list) => list.findIndex((o) => !o.disabled);
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      return;
+    }
+    const selIdx = filtered.findIndex((o) => o.value === value);
+    setActiveIndex(selIdx >= 0 ? selIdx : firstEnabled(filtered));
+    const raf = requestAnimationFrame(() => {
+      if (searchable) searchRef.current?.focus();
+      else listRef.current?.focus();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [open]);
+  const close = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  const move = (dir) => {
+    setActiveIndex((prev) => {
+      if (filtered.length === 0) return -1;
+      let i = prev;
+      for (let k = 0; k < filtered.length; k++) {
+        i = (i + dir + filtered.length) % filtered.length;
+        if (!filtered[i].disabled) return i;
+      }
+      return prev;
+    });
+  };
+  const choose = (i) => {
+    const o = filtered[i];
+    if (o && !o.disabled) {
+      onChange?.(o.value);
+      close();
+    }
+  };
+  const onKeyDown = (e) => {
+    if (!open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        setOpen(true);
+      }
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      move(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      move(-1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActiveIndex(firstEnabled(filtered));
+    } else if (e.key === "End") {
+      e.preventDefault();
+      for (let i = filtered.length - 1; i >= 0; i--) {
+        if (!filtered[i].disabled) {
+          setActiveIndex(i);
+          break;
+        }
+      }
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      choose(activeIndex);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+    }
+  };
+  const triggerClasses = [
+    "fds-select__trigger",
+    error ? "fds-select__trigger--error" : "",
+    open ? "fds-select__trigger--open" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref: rootRef,
+      className: ["fds-select-field", containerClassName].filter(Boolean).join(" "),
+      children: [
+        label != null && /* @__PURE__ */ jsx4("label", { htmlFor: triggerId, className: "fds-select__label", children: label }),
+        /* @__PURE__ */ jsxs4("div", { className: "fds-select", children: [
+          /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              id: triggerId,
+              ref: triggerRef,
+              className: triggerClasses,
+              disabled,
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-controls": open ? listId : void 0,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": hasMessage ? msgId : void 0,
+              onClick: () => !disabled && setOpen((o) => !o),
+              onKeyDown,
+              children: [
+                (selected?.avatar ?? leadingIcon) != null && /* @__PURE__ */ jsx4("span", { className: "fds-select__lead", children: selected?.avatar ?? leadingIcon }),
+                /* @__PURE__ */ jsx4(
+                  "span",
+                  {
+                    className: `fds-select__value${selected ? "" : " fds-select__value--placeholder"}`,
+                    children: selected ? selected.label : placeholder
+                  }
+                ),
+                /* @__PURE__ */ jsx4("span", { className: "fds-select__chevron", children: /* @__PURE__ */ jsx4(ChevronIcon, {}) })
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsxs4("div", { className: "fds-select__popover", children: [
+            searchable && /* @__PURE__ */ jsx4("div", { className: "fds-select__search", children: /* @__PURE__ */ jsx4(
+              "input",
+              {
+                ref: searchRef,
+                className: "fds-select__searchInput",
+                placeholder: searchPlaceholder,
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                onKeyDown,
+                role: "combobox",
+                "aria-expanded": true,
+                "aria-controls": listId,
+                "aria-autocomplete": "list"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                ref: listRef,
+                id: listId,
+                role: "listbox",
+                tabIndex: searchable ? -1 : 0,
+                className: "fds-select__list",
+                "aria-activedescendant": activeIndex >= 0 ? `${listId}-opt-${activeIndex}` : void 0,
+                onKeyDown: searchable ? void 0 : onKeyDown,
+                children: [
+                  filtered.length === 0 && /* @__PURE__ */ jsx4("div", { className: "fds-select__empty", children: "No results" }),
+                  filtered.map((o, i) => /* @__PURE__ */ jsxs4(
+                    "div",
+                    {
+                      id: `${listId}-opt-${i}`,
+                      role: "option",
+                      "aria-selected": o.value === value,
+                      "aria-disabled": o.disabled || void 0,
+                      className: [
+                        "fds-select__option",
+                        i === activeIndex ? "fds-select__option--active" : "",
+                        o.disabled ? "fds-select__option--disabled" : ""
+                      ].filter(Boolean).join(" "),
+                      onMouseEnter: () => !o.disabled && setActiveIndex(i),
+                      onMouseDown: (e) => e.preventDefault(),
+                      onClick: () => choose(i),
+                      children: [
+                        o.avatar != null && /* @__PURE__ */ jsx4("span", { className: "fds-select__optAvatar", children: o.avatar }),
+                        /* @__PURE__ */ jsxs4("span", { className: "fds-select__optText", children: [
+                          /* @__PURE__ */ jsx4("span", { className: "fds-select__optLabel", children: o.label }),
+                          o.secondary != null && /* @__PURE__ */ jsx4("span", { className: "fds-select__optSecondary", children: o.secondary })
+                        ] }),
+                        o.value === value && /* @__PURE__ */ jsx4("span", { className: "fds-select__check", children: /* @__PURE__ */ jsx4(CheckIcon, {}) })
+                      ]
+                    },
+                    o.value
+                  ))
+                ]
+              }
+            )
+          ] })
+        ] }),
+        hasMessage && /* @__PURE__ */ jsx4("p", { id: msgId, className: error ? "fds-select__error" : "fds-select__hint", children: error ?? hint }),
+        name != null && /* @__PURE__ */ jsx4("input", { type: "hidden", name, value: value ?? "" })
+      ]
+    }
+  );
+});
+
+// src/components/Toggle/Toggle.tsx
+import { forwardRef as forwardRef2, useId as useId2 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var Toggle = forwardRef2(function Toggle2({ size = "medium", label, description, className, id, disabled, ...rest }, ref) {
+  const generatedId = useId2();
+  const inputId = id ?? generatedId;
+  const classes = ["fds-toggle", `fds-toggle--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs5("div", { className: classes, "data-disabled": disabled ? "" : void 0, children: [
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        ...rest,
+        id: inputId,
+        ref,
+        type: "checkbox",
+        role: "switch",
+        disabled,
+        className: "fds-toggle__input"
+      }
+    ),
+    /* @__PURE__ */ jsxs5("label", { htmlFor: inputId, className: "fds-toggle__control", children: [
+      /* @__PURE__ */ jsx5("span", { className: "fds-toggle__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("span", { className: "fds-toggle__thumb" }) }),
+      (label != null || description != null) && /* @__PURE__ */ jsxs5("span", { className: "fds-toggle__text", children: [
+        label != null && /* @__PURE__ */ jsx5("span", { className: "fds-toggle__label", children: label }),
+        description != null && /* @__PURE__ */ jsx5("span", { className: "fds-toggle__description", children: description })
+      ] })
+    ] })
+  ] });
+});
 export {
   Button,
   DiffPropertyList,
   DiffSection,
-  MismatchCard
+  MismatchCard,
+  Select,
+  Toggle
 };

package/dist/landing.css

@@ -1,8 +1,8 @@
 /* GENERATED by @usefidel/design-system — do not edit. Surface: landing. */
 :root {
   --color-bg: #ffffff;
-  --color-surface: #fff7ed;
-  --color-surface-hover: #ffedd5;
+  --color-surface: #f5f5f5;
+  --color-surface-hover: #ececec;
   --color-surface-raised: #ffffff;
   --color-text: #171717;
   --color-text-secondary: #525252;
@@ -47,11 +47,14 @@
   --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
   --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
   --radius-pill: 9999px;
   --radius-full: 9999px;
   --spacing-1: 4px;

package/dist/theme.css

@@ -3,8 +3,8 @@
    NOT a source of truth. Do not edit — regenerate from tokens/tokens.json. */
 @theme {
   --color-bg: #ffffff;
-  --color-surface: #fff7ed;
-  --color-surface-hover: #ffedd5;
+  --color-surface: #f5f5f5;
+  --color-surface-hover: #ececec;
   --color-surface-raised: #ffffff;
   --color-text: #171717;
   --color-text-secondary: #525252;
@@ -49,11 +49,14 @@
   --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
   --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
   --radius-pill: 9999px;
   --radius-full: 9999px;
   --spacing-1: 4px;

package/dist/webapp.css

@@ -1,8 +1,8 @@
 /* GENERATED by @usefidel/design-system — do not edit. Surface: webapp. */
 :root {
   --color-bg: #ffffff;
-  --color-surface: #fff7ed;
-  --color-surface-hover: #ffedd5;
+  --color-surface: #f5f5f5;
+  --color-surface-hover: #ececec;
   --color-surface-raised: #ffffff;
   --color-text: #171717;
   --color-text-secondary: #525252;
@@ -47,11 +47,14 @@
   --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
   --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
   --radius-pill: 9999px;
   --radius-full: 9999px;
   --spacing-1: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefidel/design-system",
-  "version": "0.7.0",
+  "version": "0.9.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",
@@ -16,6 +16,11 @@
       "require": "./dist/index.cjs"
     },
     "./styles.css": "./dist/index.css",
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js",
+      "require": "./dist/icons.cjs"
+    },
     "./dist/*": "./dist/*"
   },
   "publishConfig": {
@@ -51,5 +56,8 @@
     "style-dictionary": "^4.3.0",
     "tsup": "^8.3.5",
     "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "lucide-react": "^1.33.0"
   }
 }

package/tokens/tokens.json

@@ -5,7 +5,7 @@
       "$type": "color"
     },
     "surface": {
-      "$value": "#fff7ed",
+      "$value": "#f5f5f5",
       "$type": "color",
       "$extensions": {
         "fidel": {
@@ -17,7 +17,7 @@
       }
     },
     "surface-hover": {
-      "$value": "#ffedd5",
+      "$value": "#ececec",
       "$type": "color",
       "$extensions": {
         "fidel": {
@@ -264,26 +264,38 @@
     }
   },
   "radius": {
+    "none": {
+      "$value": "0px",
+      "$type": "dimension"
+    },
     "xs": {
-      "$value": "4px",
+      "$value": "2px",
       "$type": "dimension"
     },
     "sm": {
-      "$value": "6px",
+      "$value": "4px",
       "$type": "dimension"
     },
     "md": {
-      "$value": "8px",
+      "$value": "6px",
       "$type": "dimension"
     },
     "lg": {
-      "$value": "12px",
+      "$value": "8px",
       "$type": "dimension"
     },
     "xl": {
+      "$value": "12px",
+      "$type": "dimension"
+    },
+    "2xl": {
       "$value": "16px",
       "$type": "dimension"
     },
+    "3xl": {
+      "$value": "24px",
+      "$type": "dimension"
+    },
     "pill": {
       "$value": "9999px",
       "$type": "dimension",