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

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/{devices-A6SFNGE4.cjs → devices-POZXTP7X.cjs}

@@ -11,24 +11,24 @@ require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunk22ZK7BA3cjs = require('./chunk-22ZK7BA3.cjs');
-require('./chunk-QMTC3BK3.cjs');
-require('./chunk-MEDDKM3A.cjs');
-require('./chunk-G37LT2ID.cjs');
+var _chunk3KGICRH7cjs = require('./chunk-3KGICRH7.cjs');
+require('./chunk-ZJNYWNCB.cjs');
+require('./chunk-3HPB4H4C.cjs');
+require('./chunk-L4ZNR5V7.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-SJRR745G.cjs');
-require('./chunk-GID62YEN.cjs');
+require('./chunk-BP6R5WDW.cjs');
+require('./chunk-AAFW4STC.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
 require('./chunk-OXJ57643.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-6KDGIOLP.cjs');
-require('./chunk-ZWMPAFGB.cjs');
-require('./chunk-HH4BMYDX.cjs');
+require('./chunk-3UTPZW36.cjs');
+require('./chunk-YIXKH2JO.cjs');
+require('./chunk-ZRYKDN2J.cjs');
 require('./chunk-HZJRERJW.cjs');
-require('./chunk-E3N24573.cjs');
+require('./chunk-DUXLZPMJ.cjs');
 require('./chunk-MJGX357L.cjs');
 require('./chunk-ZOZR3QI2.cjs');
 require('./chunk-OMV5S5PI.cjs');
@@ -1818,20 +1818,20 @@ require('./chunk-LMBYZITR.cjs');
 require('./chunk-TMVC7S2R.cjs');
 require('./chunk-IYHH5EIO.cjs');
 require('./chunk-XIBCMGBW.cjs');
-require('./chunk-RIXGLS5Y.cjs');
-require('./chunk-CC3LINHF.cjs');
-require('./chunk-HELVKMRG.cjs');
+require('./chunk-DUVOQHQI.cjs');
+require('./chunk-SA7LDEVJ.cjs');
+require('./chunk-NTJE6SM6.cjs');
 require('./chunk-JKX2C3I2.cjs');
 require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-TLDCSTTQ.cjs');
-require('./chunk-XOQ2UUVS.cjs');
-require('./chunk-AEVGCB3Y.cjs');
+require('./chunk-J7JKPTGO.cjs');
+require('./chunk-P3R23TOE.cjs');
+require('./chunk-FCGLSWKR.cjs');
 require('./chunk-YADG5Q7C.cjs');
-require('./chunk-NYY25425.cjs');
-require('./chunk-KLXHCNDC.cjs');
+require('./chunk-MYBTNOS6.cjs');
+require('./chunk-FTTLBMHU.cjs');
 require('./chunk-S5C3OZCO.cjs');
 require('./chunk-32ASZMTV.cjs');
 require('./chunk-OOYBIS7D.cjs');
@@ -1843,8 +1843,8 @@ require('./chunk-BLH2SFOO.cjs');
 require('./chunk-EAY6ZUES.cjs');
 require('./chunk-PX7FY655.cjs');
 require('./chunk-CW3ML76U.cjs');
-require('./chunk-7DUXR4HL.cjs');
-require('./chunk-MANNIJ42.cjs');
+require('./chunk-GVTDVS5U.cjs');
+require('./chunk-FICJS5OA.cjs');
 require('./chunk-VOX4E6AX.cjs');
 require('./chunk-UR4K2NSL.cjs');
 require('./chunk-UJ7AXHRZ.cjs');
@@ -1865,14 +1865,14 @@ require('./chunk-3ATAYP36.cjs');
 // src/components/product-demo/screens/devices.tsx
 var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
-var TOOLBAR = { ..._chunk22ZK7BA3cjs.IDLE_DEVICES_TOOLBAR, searchValue: _chunkWFPCCBOMcjs.DEVICES_SEARCH_QUERY };
+var TOOLBAR = { ..._chunk3KGICRH7cjs.IDLE_DEVICES_TOOLBAR, searchValue: _chunkWFPCCBOMcjs.DEVICES_SEARCH_QUERY };
 var NO_HEADER = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {});
 var HIDDEN_WHEN_COMPACT = ["organization"];
 function DevicesScreen({ compact = false }) {
   const cast = _chunkII4QMH26cjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => _chunkWFPCCBOMcjs.buildWindowsDevicesFixture.call(void 0, cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk22ZK7BA3cjs.DevicesPanelView,
+    _chunk3KGICRH7cjs.DevicesPanelView,
     {
       className: "p-[var(--spacing-system-l)]",
       headerSlot: NO_HEADER,