@usefidel/design-system 0.6.0 → 0.8.0

package/dist/admin.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/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.6.0",
-  "resolvedSha": "e08dca273c717cf832900a20e846f8e5e955a1e3"
+  "packageVersion": "0.8.0",
+  "resolvedSha": "1a2e0a8e9eade08e784d399b84e42bea85723137"
 }

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

@@ -21,8 +21,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  DiffPropertyList: () => DiffPropertyList,
   DiffSection: () => DiffSection,
-  MismatchCard: () => MismatchCard
+  MismatchCard: () => MismatchCard,
+  Select: () => Select,
+  Toggle: () => Toggle
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -202,14 +205,7 @@ function ElementRow({
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__element-count", children: plural(element.properties.length, "property", "properties") }),
       hasDetail && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chevron2, { open, className: "fds-diff-section__element-caret" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__lines", children: element.properties.map((line, li) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-diff-section__line", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__prop", children: line.property }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fds-diff-section__delta", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__live", children: line.live }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Arrow, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__design", children: line.design })
-      ] })
-    ] }, `${line.property}-${li}`)) })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DiffPropertyList, { properties: element.properties })
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
@@ -236,6 +232,18 @@ function ElementRow({
     }
   );
 }
+function DiffPropertyList({ properties, className, ...rest }) {
+  const classes = ["fds-diff-section__lines", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: classes, ...rest, children: properties.map((line, li) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-diff-section__line", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__prop", children: line.property }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fds-diff-section__delta", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__live", children: line.live }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Arrow, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__design", children: line.design })
+    ] }),
+    line.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__trailing", children: line.trailing })
+  ] }, `${line.property}-${li}`)) });
+}
 function Chevron2({ open, className }) {
   const classes = [
     "fds-diff-section__chevron",
@@ -276,9 +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
 });