@flamingo-stack/openframe-frontend-core 0.0.731 → 0.0.733

package/dist/components/ui/numbered-step.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function StepNumber({ number, current = false, accent, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "grid h-6 w-6 shrink-0 place-items-center rounded-full border-2 font-bold transition-colors duration-200 text-h6 motion-reduce:transition-none",
+        current ? !accent && "border-ods-accent text-ods-accent" : "border-ods-text-secondary text-ods-text-secondary",
+        className
+      ),
+      style: current && accent ? { borderColor: accent, color: accent } : void 0,
+      children: number
+    }
+  );
+}
+function NumberedStep({
+  number,
+  title,
+  description,
+  current = false,
+  accent,
+  titleAs: Title = "h3",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-[var(--spacing-system-xs)]", className), children: [
+    /* @__PURE__ */ jsx(StepNumber, { number, current, accent }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
+      /* @__PURE__ */ jsx(
+        Title,
+        {
+          className: cn(
+            "m-0 transition-colors duration-200 text-h3 motion-reduce:transition-none",
+            current ? !accent && "text-ods-accent" : "text-ods-text-primary"
+          ),
+          style: current && accent ? { color: accent } : void 0,
+          children: title
+        }
+      ),
+      description && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "m-0 transition-colors duration-200 text-h4 motion-reduce:transition-none",
+            current ? "text-ods-text-primary" : "text-ods-text-secondary"
+          ),
+          children: description
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  NumberedStep,
+  StepNumber
+};

package/dist/components/ui/phone-frame.d.ts

@@ -1,20 +1,25 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface PhoneFrameProps {
-    /** Lock-screen date line, e.g. "Thursday, October 1". */
+    /** A fixed lock-screen date line ("Thursday, October 1"). Omitted, it is today's, in the visitor's own locale. */
     dateLabel?: string;
-    /** Lock-screen clock, e.g. "5:09". */
+    /** A fixed lock-screen clock ("5:09"). Omitted, it is the visitor's own time, kept current. */
     timeLabel?: string;
-    /** The notification slot, directly under the clock. One at a time. */
+    /** The notifications, right under the clock, the newest first (`NotificationStack`). */
     children?: ReactNode;
     className?: string;
 }
 /**
- * A phone lock screen: island, date, clock, and one notification slot directly
- * under the clock, where a notification that has just arrived is read first
- * (it drops in from the top of the screen). Decorative chrome for showing what
- * lands on a phone.
+ * A phone lock screen: the status bar and island, the date and clock on the
+ * device wallpaper (`DEVICE_WALLPAPER_CLASS`, the one every drawn device
+ * shares), the notifications stacked under the clock, then the two
+ * shortcuts and the home indicator. Decorative chrome for showing what lands
+ * on a phone.
  *
- * It is sized by its class (default 236 x 480), never scaled, so the text
+ * The clock is REAL: the visitor's own date and time, kept current, unless a
+ * caller fixes them. The server draws neither (it cannot know them); their
+ * lines keep their height, so nothing moves when they appear.
+ *
+ * It is sized by its class (default 299 x 617), never scaled, so the text
  * inside stays the size the page set.
  */
 export declare function PhoneFrame({ dateLabel, timeLabel, children, className }: PhoneFrameProps): import("react").JSX.Element;

package/dist/components/ui/phone-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/phone-frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,eAAe;IAC9B,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,+BAiBxF"}
+{"version":3,"file":"phone-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/phone-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO7D,MAAM,WAAW,eAAe;IAC9B,kHAAkH;IAClH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,+BAsCxF"}

package/dist/components/ui/phone-frame.js

@@ -1,16 +1,60 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
 import { cn } from "../../utils/cn.js";
+import { DEVICE_WALLPAPER_CLASS } from "./device-wallpaper.js";
+import { LockCameraGlyph } from "./phone-glyphs/lock-camera-glyph.js";
+import { LockFlashlightGlyph } from "./phone-glyphs/lock-flashlight-glyph.js";
+import { StatusBarGlyphs } from "./phone-glyphs/status-bar-glyphs.js";
+const CLOCK_TICK_MS = 1e3;
+function subscribeToClock(onTick) {
+  const timer = setInterval(onTick, CLOCK_TICK_MS);
+  return () => clearInterval(timer);
+}
+function readClock() {
+  const parts = new Intl.DateTimeFormat(void 0, { hour: "numeric", minute: "2-digit" }).formatToParts(/* @__PURE__ */ new Date());
+  const part = (type) => parts.find((p) => p.type === type)?.value ?? "";
+  return `${part("hour")}:${part("minute")}`;
+}
+function readDate() {
+  return new Intl.DateTimeFormat(void 0, { weekday: "long", month: "long", day: "numeric" }).format(/* @__PURE__ */ new Date());
+}
+const noTime = () => "";
+function LockShortcut({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "grid size-[34px] place-items-center rounded-full bg-ods-text-primary/35 text-ods-text-primary backdrop-blur-md", children });
+}
 function PhoneFrame({ dateLabel, timeLabel, children, className }) {
+  const liveTime = useSyncExternalStore(subscribeToClock, readClock, noTime);
+  const liveDate = useSyncExternalStore(subscribeToClock, readDate, noTime);
+  const time = timeLabel ?? liveTime;
+  const date = dateLabel ?? liveDate;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("h-[480px] w-[236px] shrink-0 rounded-[44px] border border-ods-border bg-black p-2.5", className),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center rounded-[36px] bg-ods-bg px-2.5 py-3.5", children: [
-        /* @__PURE__ */ jsx("span", { className: "h-6 w-20 rounded-full bg-black", "aria-hidden": true }),
-        dateLabel && /* @__PURE__ */ jsx("span", { className: "mt-4 text-ods-text-secondary text-h6", children: dateLabel }),
-        timeLabel && /* @__PURE__ */ jsx("span", { className: "text-[56px] font-medium leading-[60px] tracking-tight text-ods-text-primary", children: timeLabel }),
-        /* @__PURE__ */ jsx("div", { className: "mt-4 flex min-h-0 w-full flex-1 flex-col gap-1.5", children })
+      className: cn("h-[617px] w-[299px] shrink-0 rounded-[48px] border border-ods-border bg-black p-2.5", className),
+      children: /* @__PURE__ */ jsxs("div", { className: cn("relative flex h-full flex-col overflow-hidden rounded-[38px]", DEVICE_WALLPAPER_CLASS), children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "grid shrink-0 grid-cols-[1fr_auto_1fr] items-center px-5 pt-2.5 text-ods-text-primary",
+            "aria-hidden": true,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums text-h6", children: time }),
+              /* @__PURE__ */ jsx("span", { className: "h-6 w-20 rounded-full bg-black" }),
+              /* @__PURE__ */ jsx(StatusBarGlyphs, { className: "h-2.5 w-[54px] justify-self-end" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-center pt-4 text-ods-text-primary", children: [
+          /* @__PURE__ */ jsx("span", { className: "min-h-[var(--font-line-space-h4-body)] text-h4", children: date }),
+          /* @__PURE__ */ jsx("span", { className: "h-[68px] text-[64px] font-bold tabular-nums leading-[68px] tracking-tight", children: time })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 w-full flex-1 flex-col justify-start overflow-hidden px-2.5 pb-3 pt-4", children }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between px-8", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx(LockShortcut, { children: /* @__PURE__ */ jsx(LockFlashlightGlyph, { className: "size-[34px]" }) }),
+          /* @__PURE__ */ jsx(LockShortcut, { children: /* @__PURE__ */ jsx(LockCameraGlyph, { className: "size-[34px]" }) })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "mx-auto mb-2 mt-3 h-1 w-24 shrink-0 rounded-full bg-ods-text-primary", "aria-hidden": true })
       ] })
     }
   );

package/dist/components/ui/phone-glyphs/lock-camera-glyph.d.ts

@@ -0,0 +1,5 @@
+/** The camera shortcut's glyph, in its 34px round button's own box. */
+export declare function LockCameraGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=lock-camera-glyph.d.ts.map

package/dist/components/ui/phone-glyphs/lock-camera-glyph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lock-camera-glyph.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/phone-glyphs/lock-camera-glyph.tsx"],"names":[],"mappings":"AAGA,uEAAuE;AACvE,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BASpE"}

package/dist/components/ui/phone-glyphs/lock-camera-glyph.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+function LockCameraGlyph({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 34.0257 34.0257", fill: "none", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M10.4883 23.8176H23.5348C25.0193 23.8176 25.7758 23.0753 25.7758 21.6051V14.1326C25.7758 12.6624 25.0193 11.9273 23.5348 11.9273H21.4936C20.9297 11.9273 20.7585 11.8131 20.4373 11.4563L19.8663 10.8139C19.5095 10.4214 19.1455 10.2073 18.4104 10.2073H15.5627C14.8276 10.2073 14.4636 10.4214 14.1068 10.8139L13.5358 11.4563C13.2146 11.806 13.0362 11.9273 12.4795 11.9273H10.4883C8.99665 11.9273 8.24726 12.6624 8.24726 14.1326V21.6051C8.24726 23.0753 8.99665 23.8176 10.4883 23.8176ZM17.0115 21.7122C14.849 21.7122 13.1147 19.985 13.1147 17.8082C13.1147 15.6386 14.849 13.9114 17.0115 13.9114C19.174 13.9114 20.9012 15.6386 20.9012 17.8082C20.9012 19.985 19.1669 21.7122 17.0115 21.7122ZM21.3794 15.1818C21.3794 14.6965 21.8076 14.2682 22.3072 14.2682C22.7996 14.2682 23.2207 14.6965 23.2207 15.1818C23.2207 15.6885 22.7996 16.0953 22.3072 16.1025C21.8076 16.1025 21.3794 15.6956 21.3794 15.1818ZM17.0115 20.6273C18.5674 20.6273 19.8235 19.3784 19.8235 17.8082C19.8235 16.2452 18.5674 14.9891 17.0115 14.9891C15.4556 14.9891 14.1924 16.2452 14.1924 17.8082C14.1924 19.3784 15.4628 20.6273 17.0115 20.6273Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+export {
+  LockCameraGlyph
+};

package/dist/components/ui/phone-glyphs/lock-flashlight-glyph.d.ts

@@ -0,0 +1,5 @@
+/** The flashlight shortcut's glyph, in its 34px round button's own box. */
+export declare function LockFlashlightGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=lock-flashlight-glyph.d.ts.map

package/dist/components/ui/phone-glyphs/lock-flashlight-glyph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lock-flashlight-glyph.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/phone-glyphs/lock-flashlight-glyph.tsx"],"names":[],"mappings":"AAGA,2EAA2E;AAC3E,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BASxE"}

package/dist/components/ui/phone-glyphs/lock-flashlight-glyph.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+function LockFlashlightGlyph({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 34.0257 34.0257", fill: "none", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M13.8216 11.1597H20.8833V10.8248C20.8833 9.94557 20.4507 9.5269 19.6133 9.5269H15.0916C14.2543 9.5269 13.8216 9.94557 13.8216 10.8248V11.1597ZM16.5151 25.1505H18.1898C19.0272 25.1505 19.4528 24.7318 19.4528 23.8526V16.442C19.4528 15.7093 19.6273 15.179 19.8924 14.7743L20.346 14.1044C20.667 13.609 20.8833 13.1415 20.8833 12.5483V11.9762H13.8216V12.5483C13.8216 13.1415 14.038 13.609 14.3589 14.1044L14.8055 14.7743C15.0777 15.179 15.2451 15.7093 15.2451 16.442V23.8526C15.2451 24.7318 15.6778 25.1505 16.5151 25.1505ZM17.3525 19.7845C16.7803 19.7845 16.4105 19.3658 16.4105 18.7796V16.8677C16.4105 16.2746 16.7803 15.8768 17.3525 15.8908C17.9177 15.8978 18.2945 16.2955 18.2945 16.8677V18.7796C18.2945 19.3658 17.9177 19.7845 17.3525 19.7845ZM17.3525 19.289C17.6595 19.289 17.9247 19.0308 17.9247 18.7168C17.9247 18.4028 17.6595 18.1377 17.3525 18.1377C17.0385 18.1377 16.7733 18.4028 16.7733 18.7168C16.7733 19.0308 17.0385 19.289 17.3525 19.289Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+export {
+  LockFlashlightGlyph
+};

package/dist/components/ui/phone-glyphs/status-bar-glyphs.d.ts

@@ -0,0 +1,5 @@
+/** The status bar's right side: signal, Wi-Fi and battery, as one drawing. */
+export declare function StatusBarGlyphs({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=status-bar-glyphs.d.ts.map

package/dist/components/ui/phone-glyphs/status-bar-glyphs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar-glyphs.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/phone-glyphs/status-bar-glyphs.tsx"],"names":[],"mappings":"AAGA,8EAA8E;AAC9E,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAwCpE"}

package/dist/components/ui/phone-glyphs/status-bar-glyphs.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatusBarGlyphs({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 54.441 9.78982", fill: "none", "aria-hidden": "true", className, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M6.89491 2.89491C6.89491 2.51412 7.20361 2.20542 7.5844 2.20542H8.27389C8.65469 2.20542 8.96338 2.51412 8.96338 2.89491V8.41084C8.96338 8.79164 8.65469 9.10033 8.27389 9.10033H7.5844C7.20361 9.10033 6.89491 8.79164 6.89491 8.41084V2.89491Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M10.3424 1.51593C10.3424 1.13513 10.6511 0.826438 11.0319 0.826438H11.7213C12.1021 0.826438 12.4108 1.13513 12.4108 1.51593V8.41084C12.4108 8.79164 12.1021 9.10033 11.7213 9.10033H11.0319C10.6511 9.10033 10.3424 8.79164 10.3424 8.41084V1.51593Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M3.44746 5.30813C3.44746 4.92733 3.75615 4.61864 4.13695 4.61864H4.82644C5.20723 4.61864 5.51593 4.92733 5.51593 5.30813V8.41084C5.51593 8.79164 5.20723 9.10033 4.82644 9.10033H4.13695C3.75615 9.10033 3.44746 8.79164 3.44746 8.41084V5.30813Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M0 7.03186C0 6.65106 0.308696 6.34237 0.689491 6.34237H1.37898C1.75978 6.34237 2.06847 6.65106 2.06847 7.03186V8.41084C2.06847 8.79164 1.75978 9.10033 1.37898 9.10033H0.689491C0.308696 9.10033 0 8.79164 0 8.41084V7.03186Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M22.1436 6.97595C23.1225 6.13113 24.5563 6.13095 25.5352 6.97595C25.5844 7.02139 25.6129 7.08596 25.6143 7.15368C25.6156 7.22145 25.5894 7.28687 25.542 7.33435L24.0088 8.91345C23.9639 8.95973 23.9027 8.98571 23.8389 8.98571C23.775 8.98566 23.7138 8.9598 23.669 8.91345L22.1358 7.33435C22.0884 7.28683 22.0621 7.22144 22.0635 7.15368C22.0649 7.08593 22.0943 7.02136 22.1436 6.97595ZM20.0703 5.0863C22.1795 3.08361 25.4465 3.08362 27.5557 5.0863C27.6033 5.13326 27.6302 5.19841 27.6309 5.26599C27.6314 5.33341 27.6052 5.39784 27.5586 5.44567L26.6729 6.35974C26.5815 6.45307 26.4335 6.45548 26.3399 6.36462C25.6473 5.72459 24.7467 5.36952 23.8125 5.3695C22.8788 5.3699 21.9783 5.72488 21.2861 6.36462C21.1925 6.45548 21.0445 6.45307 20.9531 6.35974L20.0674 5.44567C20.0209 5.39792 19.9946 5.33335 19.9951 5.26599C19.9958 5.19843 20.0227 5.13325 20.0703 5.0863ZM18.001 3.19958C21.236 0.0354236 26.3393 0.0353572 29.5742 3.19958C29.6211 3.2466 29.6481 3.31125 29.6485 3.37829C29.6488 3.44529 29.6224 3.50946 29.5762 3.557L28.6895 4.47107C28.5981 4.56485 28.4493 4.56633 28.3565 4.474C27.124 3.27797 25.4887 2.61088 23.7881 2.61071C22.0873 2.61071 20.4515 3.27787 19.2188 4.474C19.126 4.56648 18.9771 4.565 18.8858 4.47107L17.9981 3.557C17.952 3.50946 17.9264 3.44515 17.9268 3.37829C17.9272 3.31125 17.9541 3.24656 18.001 3.19958Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        opacity: "0.35",
+        d: "M37.9222 0.363281H50.0277C51.3498 0.363404 52.4211 1.43566 52.4212 2.75781V6.20508C52.4212 7.5273 51.3499 8.59949 50.0277 8.59961H37.9222C36.6 8.59953 35.5277 7.52732 35.5277 6.20508V2.75781C35.5278 1.43564 36.6 0.363363 37.9222 0.363281Z",
+        stroke: "currentColor",
+        strokeWidth: "0.727473"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        opacity: "0.4",
+        d: "M53.4749 3.44746V6.35735C54.0603 6.1109 54.441 5.53758 54.441 4.9024C54.441 4.26722 54.0603 3.69391 53.4749 3.44746Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M36.5434 2.75797C36.5434 1.99638 37.1608 1.37898 37.9224 1.37898H50.0274C50.789 1.37898 51.4064 1.99637 51.4064 2.75796V6.20542C51.4064 6.96701 50.789 7.5844 50.0274 7.5844H37.9224C37.1608 7.5844 36.5434 6.96701 36.5434 6.20542V2.75797Z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+}
+export {
+  StatusBarGlyphs
+};

package/dist/components/ui/searchable-select.d.ts

@@ -2,9 +2,15 @@ import { type ReactNode } from 'react';
 export interface SearchableSelectOption {
     value: string;
     label: string;
-    /** Optional leading visual for the option row (avatar, icon, badge). */
+    /** Optional leading visual for the option row (avatar, icon, badge). The
+     *  default trigger leads with the selected option's icon too. */
     icon?: ReactNode;
+    /** Extra terms the search matches besides `label` — e.g. the stored key of a
+     *  glyph (`chart-pie`) whose label reads "Pie chart". */
+    keywords?: string[];
 }
+/** How the dropdown lays its options out — see `SearchableSelectProps.layout`. */
+export type SearchableSelectLayout = 'list' | 'grid';
 export interface SearchableSelectProps {
     options: SearchableSelectOption[];
     /** Currently selected option value; null/undefined when nothing is selected. */
@@ -24,7 +30,27 @@ export interface SearchableSelectProps {
      * is rendered.
      */
     trigger?: ReactNode;
-    /** Custom option-row renderer; default is icon + label + selected check. */
+    /** `id` of the default trigger button, which `label` names through `htmlFor`; generated when omitted. */
+    id?: string;
+    /**
+     * Label above the default trigger — the same `FieldWrapper` treatment
+     * `SelectTrigger` gives its `label`, so a searchable field lines up with the
+     * plain selects beside it. A custom `trigger` owns its own label.
+     */
+    label?: string;
+    /** Label scale forwarded to FieldWrapper ('large' = text-h4 for designs with body-scale field titles). */
+    labelVariant?: 'default' | 'large';
+    /** Validation message under the default trigger; also paints its border red. */
+    error?: string;
+    /**
+     * `'list'` (default) stacks full-width rows. `'grid'` tiles the options —
+     * icon above a centered caption, `minmax(7rem, 1fr)` columns — the
+     * icon-picker pattern. The grid fills the popover, so size it through
+     * `contentClassName` (360px fits three tiles).
+     */
+    layout?: SearchableSelectLayout;
+    /** Custom option-row renderer; default is icon + label + selected check
+     *  (icon above the caption in the grid layout). */
     renderOption?: (option: SearchableSelectOption, isSelected: boolean) => ReactNode;
     align?: 'start' | 'center' | 'end';
     /** Classes for the default trigger button. */
@@ -39,5 +65,5 @@ export interface SearchableSelectProps {
  * custom `trigger` for icon-button use cases; the default trigger looks and
  * behaves like `SelectTrigger`.
  */
-export declare function SearchableSelect({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, loadingText, isLoading, disabled, trigger, renderOption, align, className, contentClassName, }: SearchableSelectProps): import("react").JSX.Element;
+export declare function SearchableSelect(allProps: SearchableSelectProps): import("react").JSX.Element;
 //# sourceMappingURL=searchable-select.d.ts.map

package/dist/components/ui/searchable-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchable-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/searchable-select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAO1D,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAClF,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAY,EACZ,aAAa,EACb,WAAyB,EACzB,iBAA+B,EAC/B,SAA8B,EAC9B,WAAwB,EACxB,SAAiB,EACjB,QAAgB,EAChB,OAAO,EACP,YAAY,EACZ,KAAe,EACf,SAAS,EACT,gBAAgB,GACjB,EAAE,qBAAqB,+BA+HvB"}
+{"version":3,"file":"searchable-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/searchable-select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAA4B,MAAM,OAAO,CAAC;AAQjE,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;qEACiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;6DACyD;IACzD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,kFAAkF;AAClF,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yGAAyG;IACzG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0GAA0G;IAC1G,YAAY,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACnC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;uDACmD;IACnD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAClF,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,+BA8M/D"}

package/dist/components/ui/searchable-select.js

@@ -1,28 +1,40 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { useMemo, useState } from "react";
+import { useId, useMemo, useState } from "react";
 import { useKeyboardCollisionPadding } from "../../hooks/ui/use-keyboard-collision-padding.js";
 import { cn } from "../../utils/cn.js";
 import { CheckIcon, SearchIcon } from "../icons-v2-generated/index.js";
 import { Chevron02DownIcon } from "../icons-v2-generated/arrows/chevron-02-down-icon.js";
+import { FieldWrapper } from "./field-wrapper.js";
 import { Input } from "./input.js";
-function SearchableSelect({
-  options,
-  value = null,
-  onValueChange,
-  placeholder = "Select...",
-  searchPlaceholder = "Search...",
-  emptyText = "No results found",
-  loadingText = "Loading\u2026",
-  isLoading = false,
-  disabled = false,
-  trigger,
-  renderOption,
-  align = "start",
-  className,
-  contentClassName
-}) {
+function SearchableSelect(allProps) {
+  const {
+    options,
+    value = null,
+    onValueChange,
+    placeholder = "Select...",
+    searchPlaceholder = "Search...",
+    emptyText = "No results found",
+    loadingText = "Loading\u2026",
+    isLoading = false,
+    disabled = false,
+    trigger,
+    id,
+    label,
+    labelVariant,
+    error,
+    layout = "list",
+    renderOption,
+    align = "start",
+    className,
+    contentClassName
+  } = allProps;
+  const errorSlot = "error" in allProps;
+  const isInvalid = !!error;
+  const isGrid = layout === "grid";
+  const generatedId = useId();
+  const triggerId = id ?? generatedId;
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState("");
   const keyboardPadding = useKeyboardCollisionPadding();
@@ -30,7 +42,9 @@ function SearchableSelect({
   const filtered = useMemo(() => {
     const q = search.trim().toLowerCase();
     if (!q) return options;
-    return options.filter((o) => o.label.toLowerCase().includes(q));
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || (o.keywords ?? []).some((k) => k.toLowerCase().includes(q))
+    );
   }, [options, search]);
   const selectedOption = useMemo(
     () => value != null ? options.find((o) => o.value === value) : void 0,
@@ -43,8 +57,10 @@ function SearchableSelect({
   const defaultTrigger = /* @__PURE__ */ jsxs(
     "button",
     {
+      id: triggerId,
       type: "button",
       disabled,
+      "data-invalid": isInvalid || void 0,
       className: cn(
         // Mirrors SelectTrigger so the closed state is indistinguishable from
         // the regular Select.
@@ -52,24 +68,36 @@ function SearchableSelect({
         "border-ods-border bg-ods-card text-h4",
         selectedOption ? "text-ods-text-primary" : "text-ods-text-secondary",
         "enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active",
-        "data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent",
+        !isInvalid && "data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent",
         "group cursor-pointer transition-colors duration-200 disabled:!cursor-not-allowed disabled:bg-ods-bg",
+        isInvalid && "border-ods-error enabled:hover:border-ods-error enabled:active:border-ods-error data-[state=open]:border-ods-error",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: selectedOption ? selectedOption.label : placeholder }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          selectedOption?.icon,
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder })
+        ] }),
         /* @__PURE__ */ jsx(
           Chevron02DownIcon,
           {
-            className: "shrink-0 text-ods-text-secondary transition-all duration-200 group-data-[state=open]:rotate-180 group-data-[state=open]:text-ods-accent",
+            className: cn(
+              "shrink-0 text-ods-text-secondary transition-all duration-200 group-data-[state=open]:rotate-180",
+              isInvalid ? "text-ods-error" : "group-data-[state=open]:text-ods-accent"
+            ),
             size: 24
           }
         )
       ]
     }
   );
+  const triggerElement = /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: trigger ?? defaultTrigger });
+  const statusClass = cn(
+    "px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h5",
+    isGrid && "col-span-full"
+  );
   return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: isOpen, onOpenChange: disabled ? void 0 : setIsOpen, modal: false, children: [
-    /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: trigger ?? defaultTrigger }),
+    !trigger && (label !== void 0 || errorSlot) ? /* @__PURE__ */ jsx(FieldWrapper, { label, htmlFor: triggerId, labelVariant, error, errorSlot, children: triggerElement }) : triggerElement,
     /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
       PopoverPrimitive.Content,
       {
@@ -97,29 +125,57 @@ function SearchableSelect({
               className: "rounded-none border-0"
             }
           ) }),
-          /* @__PURE__ */ jsx("div", { className: "max-h-80 min-h-0 overflow-y-auto py-[var(--spacing-system-xs)]", role: "listbox", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h5", children: loadingText }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h5", children: emptyText }) : filtered.map((opt) => {
-            const isSelected = value === opt.value;
-            return /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                role: "option",
-                "aria-selected": isSelected,
-                onClick: () => handleSelect(opt.value),
-                className: cn(
-                  "flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left",
-                  "transition-colors hover:bg-ods-bg-hover",
-                  isSelected && "bg-ods-bg-hover"
-                ),
-                children: renderOption ? renderOption(opt, isSelected) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  opt.icon,
-                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-ods-text-primary text-h4", title: opt.label, children: opt.label }),
-                  isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-ods-accent" })
-                ] })
-              },
-              opt.value
-            );
-          }) })
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "max-h-80 min-h-0 overflow-y-auto",
+                // Tiles grow from 7rem: the popover's own border and a classic
+                // always-on scrollbar both eat into the track, so 7.5rem (the
+                // Figma cell) dropped a 360px popover to two columns. The column
+                // count follows the popover width. Each tile draws its own
+                // bottom/right rule, so the grid needs no gap.
+                isGrid ? "grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))]" : "py-[var(--spacing-system-xs)]"
+              ),
+              role: "listbox",
+              children: isLoading ? /* @__PURE__ */ jsx("div", { className: statusClass, children: loadingText }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: statusClass, children: emptyText }) : filtered.map((opt) => {
+                const isSelected = value === opt.value;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": isSelected,
+                    onClick: () => handleSelect(opt.value),
+                    className: cn(
+                      "transition-colors hover:bg-ods-bg-hover",
+                      isGrid ? "flex min-w-0 flex-col items-center justify-center gap-[var(--spacing-system-xxs)] border-b border-r border-ods-border p-[var(--spacing-system-xs)]" : "flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left",
+                      isSelected && "bg-ods-bg-hover"
+                    ),
+                    children: renderOption ? renderOption(opt, isSelected) : isGrid ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      opt.icon,
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "w-full truncate text-center text-h6",
+                            isSelected ? "text-ods-text-primary" : "text-ods-text-secondary"
+                          ),
+                          title: opt.label,
+                          children: opt.label
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      opt.icon,
+                      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-ods-text-primary text-h4", title: opt.label, children: opt.label }),
+                      isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-ods-accent" })
+                    ] })
+                  },
+                  opt.value
+                );
+              })
+            }
+          )
         ]
       }
     ) })

package/dist/components/ui/snap-carousel.d.ts

@@ -15,9 +15,6 @@ export interface SnapCarouselProps<T> {
     label: string;
     /** Move to the next slide after this long. `0` turns auto-advance off. Default 5000. */
     autoAdvanceMs?: number;
-    /** Names of the stop/start control. */
-    playLabel?: string;
-    pauseLabel?: string;
     /** Width of one slide. Default `basis-[300px]`. */
     slideClassName?: string;
     prevLabel?: string;
@@ -32,10 +29,10 @@ export interface SnapCarouselProps<T> {
  *
  * WHEN IT ADVANCES is `useAutoplay`'s rule, the same one the looping demos
  * use: mostly on screen, tab visible, not paused, motion allowed. A swipe or
- * an arrow moves it and it carries on from there after a full interval; it
- * waits only while a finger or the mouse button is actually down on it. The
- * small pause control stops it for good, and starts it again. While it is
- * auto-playing the active dot fills over the interval, so the wait is visible.
+ * an arrow moves it and it carries on from there after a full interval. It
+ * waits while the visitor holds it (`useAutoplay`'s hold: a finger or the
+ * mouse button down on it, the keyboard inside it); there is no pause button. While it is auto-playing the active dot fills over the
+ * interval, so the wait is visible.
  */
-export declare function SnapCarousel<T>({ items, renderItem, getKey, label, autoAdvanceMs, playLabel, pauseLabel, slideClassName, prevLabel, nextLabel, focusIndex, className, }: SnapCarouselProps<T>): import("react").JSX.Element | null;
+export declare function SnapCarousel<T>({ items, renderItem, getKey, label, autoAdvanceMs, slideClassName, prevLabel, nextLabel, focusIndex, className, }: SnapCarouselProps<T>): import("react").JSX.Element | null;
 //# sourceMappingURL=snap-carousel.d.ts.map

package/dist/components/ui/snap-carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snap-carousel.d.ts","sourceRoot":"","sources":["../../../src/components/ui/snap-carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAWjF;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAEjF;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACrD,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2HAA2H;IAC3H,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,UAAU,EACV,MAAM,EACN,KAAK,EACL,aAAoB,EACpB,SAAS,EACT,UAAU,EACV,cAAgC,EAChC,SAAsB,EACtB,SAAkB,EAClB,UAAU,EACV,SAAS,GACV,EAAE,iBAAiB,CAAC,CAAC,CAAC,sCA4JtB"}
+{"version":3,"file":"snap-carousel.d.ts","sourceRoot":"","sources":["../../../src/components/ui/snap-carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAUjF;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAEjF;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACrD,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2HAA2H;IAC3H,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,UAAU,EACV,MAAM,EACN,KAAK,EACL,aAAoB,EACpB,cAAgC,EAChC,SAAsB,EACtB,SAAkB,EAClB,UAAU,EACV,SAAS,GACV,EAAE,iBAAiB,CAAC,CAAC,CAAC,sCAkItB"}