@usefidel/design-system 0.6.0 → 0.8.0

package/dist/index.js

@@ -174,14 +174,7 @@ function ElementRow({
       /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__element-count", children: plural(element.properties.length, "property", "properties") }),
       hasDetail && /* @__PURE__ */ jsx3(Chevron2, { open, className: "fds-diff-section__element-caret" })
     ] }),
-    /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__lines", children: element.properties.map((line, li) => /* @__PURE__ */ jsxs3("div", { className: "fds-diff-section__line", children: [
-      /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__prop", children: line.property }),
-      /* @__PURE__ */ jsxs3("span", { className: "fds-diff-section__delta", children: [
-        /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__live", children: line.live }),
-        /* @__PURE__ */ jsx3(Arrow, {}),
-        /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__design", children: line.design })
-      ] })
-    ] }, `${line.property}-${li}`)) })
+    /* @__PURE__ */ jsx3(DiffPropertyList, { properties: element.properties })
   ] });
   return /* @__PURE__ */ jsxs3(
     "div",
@@ -208,6 +201,18 @@ function ElementRow({
     }
   );
 }
+function DiffPropertyList({ properties, className, ...rest }) {
+  const classes = ["fds-diff-section__lines", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx3("div", { className: classes, ...rest, children: properties.map((line, li) => /* @__PURE__ */ jsxs3("div", { className: "fds-diff-section__line", children: [
+    /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__prop", children: line.property }),
+    /* @__PURE__ */ jsxs3("span", { className: "fds-diff-section__delta", children: [
+      /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__live", children: line.live }),
+      /* @__PURE__ */ jsx3(Arrow, {}),
+      /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__design", children: line.design })
+    ] }),
+    line.trailing != null && /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__trailing", children: line.trailing })
+  ] }, `${line.property}-${li}`)) });
+}
 function Chevron2({ open, className }) {
   const classes = [
     "fds-diff-section__chevron",
@@ -248,8 +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

@@ -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

@@ -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

@@ -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.6.0",
+  "version": "0.8.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

@@ -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",