@ledgerhq/lumen-ui-react 0.1.16 → 0.1.18

package/dist/lib/Components/Select/Select.js

@@ -1,270 +1,402 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { useDisabledContext as g, cn as o } from "../../../libs/utils-shared/dist/index.js";
-import * as l from "@radix-ui/react-select";
-import { cva as m } from "class-variance-authority";
-import { SelectProvider as f, useSelectContext as b } from "./SelectContext.js";
-import { useControllableState as h } from "../../../utils/useControllableState/useControllableState.js";
-import { Check as x } from "../../Symbols/Icons/Check.js";
-import { Divider as y } from "../Divider/Divider.js";
-import { TriggerButton as S } from "../TriggerButton/TriggerButton.js";
-import { ChevronDown as u } from "../../Symbols/Icons/ChevronDown.js";
-import { ChevronUp as N } from "../../Symbols/Icons/ChevronUp.js";
-function M({
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import { useDisabledContext as q, cn as l } from "../../../libs/utils-shared/dist/index.js";
+import { cva as z } from "class-variance-authority";
+import { useLayoutEffect as D } from "react";
+import { SelectProvider as G, useSelectContext as m } from "./SelectContext.js";
+import { useControllableState as k } from "../../../utils/useControllableState/useControllableState.js";
+import { useSelectItems as E } from "./useSelectItems/useSelectItems.js";
+import { SearchInput as B } from "../SearchInput/SearchInput.js";
+import { Check as F } from "../../Symbols/Icons/Check.js";
+import { Divider as W } from "../Divider/Divider.js";
+import { TriggerButton as A } from "../TriggerButton/TriggerButton.js";
+import { ChevronDown as H } from "../../Symbols/Icons/ChevronDown.js";
+import { ComboboxRoot as J } from "../../../node_modules/@base-ui/react/esm/combobox/root/ComboboxRoot.js";
+import { ComboboxTrigger as b } from "../../../node_modules/@base-ui/react/esm/combobox/trigger/ComboboxTrigger.js";
+import { ComboboxPortal as K } from "../../../node_modules/@base-ui/react/esm/combobox/portal/ComboboxPortal.js";
+import { ComboboxPositioner as M } from "../../../node_modules/@base-ui/react/esm/combobox/positioner/ComboboxPositioner.js";
+import { ComboboxPopup as O } from "../../../node_modules/@base-ui/react/esm/combobox/popup/ComboboxPopup.js";
+import { ComboboxInput as Q } from "../../../node_modules/@base-ui/react/esm/combobox/input/ComboboxInput.js";
+import { ComboboxList as U } from "../../../node_modules/@base-ui/react/esm/combobox/list/ComboboxList.js";
+import { ComboboxGroup as X } from "../../../node_modules/@base-ui/react/esm/combobox/group/ComboboxGroup.js";
+import { ComboboxCollection as Y } from "../../../node_modules/@base-ui/react/esm/combobox/collection/ComboboxCollection.js";
+import { ComboboxItem as Z } from "../../../node_modules/@base-ui/react/esm/combobox/item/ComboboxItem.js";
+import { ComboboxItemIndicator as _ } from "../../../node_modules/@base-ui/react/esm/combobox/item-indicator/ComboboxItemIndicator.js";
+import { ComboboxEmpty as $ } from "../../../node_modules/@base-ui/react/esm/combobox/empty/ComboboxEmpty.js";
+import { ComboboxValue as f } from "../../../node_modules/@base-ui/react/esm/combobox/value/ComboboxValue.js";
+import { ComboboxGroupLabel as ee } from "../../../node_modules/@base-ui/react/esm/combobox/group-label/ComboboxGroupLabel.js";
+function De({
   value: t,
-  defaultValue: a,
-  onValueChange: r,
-  disabled: s,
-  ...i
+  defaultValue: o,
+  onValueChange: e,
+  disabled: r,
+  items: s,
+  filter: i,
+  filteredItems: n,
+  searchValue: c,
+  defaultSearchValue: u,
+  onSearchValueChange: h,
+  open: g,
+  defaultOpen: x,
+  onOpenChange: S,
+  name: y,
+  required: C,
+  children: v
 }) {
-  const n = g({
+  const N = q({
     consumerName: "Select",
-    mergeWith: { disabled: s }
-  }), [c, p] = h({
-    prop: t,
-    defaultProp: a ?? "",
-    onChange: r
+    mergeWith: { disabled: r }
+  }), [p, w] = k(
+    {
+      prop: t,
+      defaultProp: o ?? null,
+      onChange: (j) => {
+        e?.(j);
+      }
+    }
+  ), {
+    isGrouped: I,
+    groupedItems: V,
+    filteredItemsForRoot: T,
+    resolvedSearchValue: L,
+    registerSearch: R,
+    handleSearchValueChange: P
+  } = E({
+    items: s,
+    filter: i,
+    filteredItems: n,
+    searchValue: c,
+    defaultSearchValue: u,
+    onSearchValueChange: h
   });
-  return /* @__PURE__ */ e(f, { value: { selectedValue: c }, children: /* @__PURE__ */ e(
-    l.Root,
+  return /* @__PURE__ */ a(
+    J,
     {
       "data-slot": "select",
-      value: c,
-      onValueChange: p,
-      disabled: n,
-      ...i
+      filter: null,
+      items: V ?? s,
+      filteredItems: T,
+      inputValue: L,
+      onInputValueChange: P,
+      value: p,
+      onValueChange: w,
+      open: g,
+      defaultOpen: x,
+      onOpenChange: S,
+      name: y,
+      required: C,
+      disabled: N,
+      children: /* @__PURE__ */ a(G, { value: { selectedValue: p, registerSearch: R, isGrouped: I }, children: v })
     }
-  ) });
-}
-function O({ ...t }) {
-  return /* @__PURE__ */ e(l.Group, { "data-slot": "select-group", ...t });
+  );
 }
-const v = o(
+const te = l(
   "group relative flex h-48 w-full cursor-pointer items-center justify-between gap-8",
   "rounded-sm bg-muted px-16",
   "body-2 text-base",
   "hover:bg-muted-hover",
-  "transition-colors duration-200 focus:ring-2 focus:ring-focus focus:outline-hidden",
+  "transition-colors duration-200 focus:ring-2 focus:ring-active focus:outline-hidden",
   "disabled:cursor-not-allowed disabled:text-disabled"
-), w = o(
+), oe = l(
   "pointer-events-none absolute left-16 origin-left text-muted transition-all duration-300",
   "top-10 -translate-y-4 body-4",
   "group-data-placeholder:top-14 group-data-placeholder:translate-y-0 group-data-placeholder:body-2",
-  "group-data-disabled:text-disabled disabled:text-disabled",
+  "group-data-disabled:text-disabled",
   "max-w-[calc(100%-var(--size-56))] truncate"
-), C = ({
+), ae = ({
   ref: t,
-  className: a,
-  labelClassName: r,
-  label: s,
-  selectedContent: i,
-  ...n
-}) => /* @__PURE__ */ d(
-  l.Trigger,
-  {
-    ref: t,
-    "data-slot": "select-trigger",
-    className: o(v, a),
-    ...n,
-    children: [
-      s && /* @__PURE__ */ e("label", { className: o(w, r), children: s }),
-      /* @__PURE__ */ e(
-        "span",
-        {
-          className: o(
-            "flex-1 truncate text-left",
-            s && "mt-16 opacity-100 transition-opacity delay-100 duration-300 group-data-placeholder:mt-0 group-data-placeholder:opacity-0"
-          ),
-          children: i
-        }
-      ),
-      /* @__PURE__ */ e(l.Icon, { asChild: !0, children: /* @__PURE__ */ e(
-        u,
-        {
-          size: 20,
-          className: "text-muted group-data-disabled:text-disabled"
-        }
-      ) })
-    ]
-  }
-), T = ({ render: t, disabled: a, ...r }) => {
-  const { selectedValue: s } = b({
-    consumerName: "SelectTrigger",
+  className: o,
+  labelClassName: e,
+  label: r,
+  ...s
+}) => {
+  const { selectedValue: i } = m({
+    consumerName: "SelectInputTrigger",
     contextRequired: !0
-  }), i = /* @__PURE__ */ e(l.Value, { "data-slot": "select-value" });
-  return t ? /* @__PURE__ */ e(
-    l.Trigger,
+  }), n = i != null && i !== "";
+  return /* @__PURE__ */ d(
+    b,
     {
-      disabled: a,
-      ref: r.ref,
+      ref: t,
       "data-slot": "select-trigger",
-      asChild: !0,
-      children: t({ selectedValue: s, selectedContent: i })
+      "data-placeholder": n ? void 0 : "",
+      className: l(te, o),
+      ...s,
+      children: [
+        r && /* @__PURE__ */ a("label", { className: l(oe, e), children: r }),
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: l(
+              "flex-1 truncate text-left",
+              r && "mt-16 opacity-100 transition-opacity delay-100 duration-300",
+              r && !n && "mt-0 opacity-0"
+            ),
+            children: /* @__PURE__ */ a(f, {})
+          }
+        ),
+        /* @__PURE__ */ a(
+          H,
+          {
+            size: 20,
+            className: "text-muted group-data-disabled:text-disabled"
+          }
+        )
+      ]
     }
-  ) : /* @__PURE__ */ e(
-    C,
+  );
+}, Ge = ({ render: t, disabled: o, ...e }) => {
+  const { selectedValue: r } = m({
+    consumerName: "SelectTrigger",
+    contextRequired: !0
+  }), s = /* @__PURE__ */ a(f, {});
+  return t ? /* @__PURE__ */ a(
+    b,
     {
-      ...r,
-      disabled: a,
-      selectedContent: i
+      disabled: o,
+      ref: e.ref,
+      "data-slot": "select-trigger",
+      render: t({ selectedValue: r, selectedContent: s })
     }
-  );
-};
-T.displayName = l.Trigger.displayName;
-const I = m(
+  ) : /* @__PURE__ */ a(ae, { ...e, disabled: o });
+}, re = z(
   [
-    "relative z-select max-h-(--radix-select-content-available-height) overflow-x-hidden overflow-y-auto",
-    "rounded-sm bg-muted",
-    "shadow-md",
-    "data-[side=bottom]:animate-slide-in-from-top",
-    "data-[side=top]:animate-slide-in-from-bottom",
-    "data-[side=left]:animate-slide-in-from-right",
-    "data-[side=right]:animate-slide-in-from-left"
+    "group/select-content relative z-select flex max-h-(--available-height) w-(--anchor-width) flex-col overflow-hidden",
+    "rounded-sm bg-surface",
+    "shadow-md"
   ],
   {
     variants: {
-      position: {
-        popper: "data-[side=bottom]:translate-y-8 data-[side=left]:-translate-x-8 data-[side=right]:translate-x-8 data-[side=top]:-translate-y-8",
-        "item-aligned": ""
+      side: {
+        top: [
+          "data-open:animate-slide-in-from-top",
+          "data-closed:animate-slide-out-to-top"
+        ],
+        bottom: [
+          "data-open:animate-slide-in-from-bottom",
+          "data-closed:animate-slide-out-to-bottom"
+        ],
+        left: [
+          "data-open:animate-slide-in-from-left",
+          "data-closed:animate-slide-out-to-left"
+        ],
+        right: [
+          "data-open:animate-slide-in-from-right",
+          "data-closed:animate-slide-out-to-right"
+        ]
       }
-    },
-    defaultVariants: {
-      position: "popper"
     }
   }
-), V = m("p-8", {
-  variants: {
-    position: {
-      popper: "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)",
-      "item-aligned": ""
-    }
-  },
-  defaultVariants: {
-    position: "popper"
-  }
-}), z = ({
+), ke = ({
   ref: t,
-  className: a,
-  children: r,
-  position: s = "popper",
-  ...i
-}) => /* @__PURE__ */ e(l.Portal, { "data-slot": "select-portal", children: /* @__PURE__ */ d(
-  l.Content,
+  className: o,
+  children: e,
+  side: r = "bottom",
+  sideOffset: s = 8,
+  align: i = "start",
+  autoFocusSearch: n = !1,
+  ...c
+}) => /* @__PURE__ */ a(K, { "data-slot": "select-portal", children: /* @__PURE__ */ a(
+  M,
   {
-    ref: t,
-    "data-slot": "select-content",
-    className: o(I({ position: s }), a),
-    position: s,
-    ...i,
-    children: [
-      /* @__PURE__ */ e(U, {}),
-      /* @__PURE__ */ e(l.Viewport, { className: V({ position: s }), children: r }),
-      /* @__PURE__ */ e(G, {})
-    ]
+    "data-slot": "select-positioner",
+    side: r,
+    sideOffset: s,
+    align: i,
+    children: /* @__PURE__ */ a(
+      O,
+      {
+        ref: t,
+        "data-slot": "select-content",
+        initialFocus: n ? void 0 : !1,
+        className: l(re({ side: r }), o),
+        ...c,
+        children: e
+      }
+    )
   }
-) });
-z.displayName = l.Content.displayName;
-const j = ({ ref: t, className: a, ...r }) => /* @__PURE__ */ e(
-  l.Label,
+) }), Ee = ({
+  ref: t,
+  className: o,
+  renderItem: e,
+  ...r
+}) => {
+  const { isGrouped: s } = m({
+    consumerName: "SelectList",
+    contextRequired: !0
+  });
+  return /* @__PURE__ */ a(
+    U,
+    {
+      ref: t,
+      "data-slot": "select-list",
+      className: l(
+        "min-h-0 min-w-(--anchor-width) flex-1 overflow-y-auto p-8 group-data-empty/select-content:p-0",
+        o
+      ),
+      ...r,
+      children: s ? (i, n) => /* @__PURE__ */ d(
+        X,
+        {
+          items: i.items,
+          "data-slot": "select-group",
+          children: [
+            n > 0 && /* @__PURE__ */ a(ie, {}),
+            i.label && /* @__PURE__ */ a(le, { children: i.label }),
+            /* @__PURE__ */ a(Y, { children: e })
+          ]
+        },
+        i.label
+      ) : e
+    }
+  );
+}, le = ({ ref: t, className: o, ...e }) => /* @__PURE__ */ a(
+  ee,
   {
     ref: t,
     "data-slot": "select-label",
-    className: o("mb-4 px-8 pt-8 pb-0 body-3-semi-bold text-muted", a),
-    ...r
+    className: l("mb-4 px-8 pt-8 pb-0 body-3-semi-bold text-muted", o),
+    ...e
   }
-);
-j.displayName = l.Label.displayName;
-const B = o(
-  "relative flex w-full cursor-pointer items-center bg-base-transparent select-none",
+), se = l(
+  "group/item flex w-full min-w-0 cursor-pointer items-center gap-12 bg-base-transparent select-none",
   "rounded-sm p-8",
   "body-2 text-base",
   "outline-hidden",
-  "truncate",
-  "focus:bg-base-transparent-hover",
+  "data-highlighted:bg-base-transparent-hover",
   "active:bg-base-transparent-pressed",
   "data-disabled:cursor-not-allowed data-disabled:text-disabled"
-), D = ({
+), Be = ({
   ref: t,
-  className: a,
-  children: r,
-  ...s
+  className: o,
+  children: e,
+  ...r
 }) => /* @__PURE__ */ d(
-  l.Item,
+  Z,
   {
     ref: t,
     "data-slot": "select-item",
-    className: o(B, a),
-    ...s,
+    className: l(se, o),
+    ...r,
     children: [
-      r,
-      /* @__PURE__ */ e("span", { className: "absolute right-8 flex size-24 items-center justify-center", children: /* @__PURE__ */ e(l.ItemIndicator, { children: /* @__PURE__ */ e(x, { size: 24, className: "ms-8 text-active" }) }) })
+      e,
+      /* @__PURE__ */ a(_, { className: "ml-auto flex shrink-0 items-center justify-center", children: /* @__PURE__ */ a(F, { size: 24, className: "shrink-0 text-active" }) })
     ]
   }
-);
-D.displayName = l.Item.displayName;
-const P = ({
+), ie = ({
   ref: t,
-  className: a,
-  ...r
-}) => /* @__PURE__ */ e(y, { ref: t, className: o("mx-8 my-4 w-auto", a), ...r });
-P.displayName = "SelectSeparator";
-const L = ({ ref: t, className: a, ...r }) => /* @__PURE__ */ e(
-  l.ItemText,
+  className: o,
+  ...e
+}) => /* @__PURE__ */ a(W, { ref: t, className: l("mx-8 my-4 w-auto", o), ...e }), Fe = ({ ref: t, className: o, ...e }) => /* @__PURE__ */ a(
+  "span",
   {
     ref: t,
     "data-slot": "select-item-text",
-    className: o("body-2 text-muted", a),
-    ...r
+    className: l("truncate body-2", o),
+    ...e
   }
-);
-L.displayName = l.ItemText.displayName;
-function U({
-  className: t,
-  ...a
-}) {
-  return /* @__PURE__ */ e(
-    l.ScrollUpButton,
-    {
-      "data-slot": "select-scroll-up-button",
-      className: o(
-        "flex cursor-default items-center justify-center py-1 text-muted",
-        t
-      ),
-      ...a,
-      children: /* @__PURE__ */ e(N, { className: "size-4" })
-    }
-  );
-}
-function G({
+), We = ({
+  ref: t,
+  className: o,
+  children: e,
+  ...r
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: t,
+    "data-slot": "select-item-content",
+    className: l("flex min-w-0 flex-1 flex-col gap-4", o),
+    ...r,
+    children: e
+  }
+), Ae = ({
+  ref: t,
+  className: o,
+  children: e,
+  ...r
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: t,
+    "data-slot": "select-item-description",
+    className: l(
+      "truncate body-3 text-muted",
+      "group-data-disabled/item:text-disabled",
+      o
+    ),
+    ...r,
+    children: e
+  }
+), He = ({
   className: t,
-  ...a
-}) {
-  return /* @__PURE__ */ e(
-    l.ScrollDownButton,
+  placeholder: o = "Search",
+  errorMessage: e,
+  "aria-invalid": r,
+  suffix: s,
+  onClear: i,
+  hideClearButton: n
+}) => {
+  const { registerSearch: c } = m({
+    consumerName: "SelectSearch",
+    contextRequired: !0
+  });
+  return D(() => c(), [c]), /* @__PURE__ */ a(
+    Q,
     {
-      "data-slot": "select-scroll-down-button",
-      className: o(
-        "flex cursor-default items-center justify-center py-1 text-muted",
-        t
-      ),
-      ...a,
-      children: /* @__PURE__ */ e(u, { className: "size-4" })
+      render: (u) => /* @__PURE__ */ a(
+        B,
+        {
+          ...u,
+          "aria-invalid": r,
+          errorMessage: e,
+          suffix: s,
+          onClear: i,
+          hideClearButton: n,
+          placeholder: o,
+          containerClassName: "rounded-b-none ring-inset",
+          className: l(t, "rounded-b-none ring-inset")
+        }
+      )
     }
   );
-}
-const Q = ({
-  selectedValue: t,
-  selectedContent: a,
-  label: r,
+}, Je = ({
+  ref: t,
+  className: o,
+  title: e,
+  description: r,
   ...s
-}) => /* @__PURE__ */ e(S, { ...s, children: t ? a : r });
+}) => /* @__PURE__ */ d(
+  $,
+  {
+    ref: t,
+    "data-slot": "select-empty-state",
+    className: l(
+      "hidden w-full flex-col items-center gap-8 py-24",
+      "group-data-empty/select-content:flex",
+      o
+    ),
+    ...s,
+    children: [
+      /* @__PURE__ */ a("span", { className: "heading-4-semi-bold text-base", children: e }),
+      r && /* @__PURE__ */ a("span", { className: "body-2 text-muted", children: r })
+    ]
+  }
+), Ke = ({
+  selectedValue: t,
+  selectedContent: o,
+  label: e,
+  ...r
+}) => /* @__PURE__ */ a(A, { ...r, children: t ? o : e });
 export {
-  M as Select,
-  z as SelectContent,
-  O as SelectGroup,
-  D as SelectItem,
-  L as SelectItemText,
-  j as SelectLabel,
-  P as SelectSeparator,
-  T as SelectTrigger,
-  Q as SelectTriggerButton
+  De as Select,
+  ke as SelectContent,
+  Je as SelectEmptyState,
+  Be as SelectItem,
+  We as SelectItemContent,
+  Ae as SelectItemDescription,
+  Fe as SelectItemText,
+  Ee as SelectList,
+  He as SelectSearch,
+  ie as SelectSeparator,
+  Ge as SelectTrigger,
+  Ke as SelectTriggerButton
 };

package/dist/lib/Components/Select/SelectContext.d.ts

@@ -1,5 +1,7 @@
 type SelectContextValue = {
-    selectedValue: string;
+    selectedValue: string | null;
+    registerSearch: () => () => void;
+    isGrouped: boolean;
 };
 export declare const SelectProvider: import('react').FC<{
     children: import('react').ReactNode;

package/dist/lib/Components/Select/SelectContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContext.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Select/SelectContext.tsx"],"names":[],"mappings":"AAEA,KAAK,kBAAkB,GAAG;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAO,cAAc;;;IAAE,gBAAgB;;;qFACG,CAAC"}
+{"version":3,"file":"SelectContext.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Select/SelectContext.tsx"],"names":[],"mappings":"AAEA,KAAK,kBAAkB,GAAG;IACxB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,cAAc,EAAE,MAAM,MAAM,IAAI,CAAC;IACjC,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAO,cAAc;;;IAAE,gBAAgB;;;qFACG,CAAC"}

package/dist/lib/Components/Select/index.d.ts

@@ -1,3 +1,3 @@
 export * from './Select';
-export type { SelectProps, SelectTriggerProps, SelectTriggerRenderProps, SelectContentProps, SelectGroupProps, SelectLabelProps, SelectItemTextProps, SelectItemProps, SelectSeparatorProps, SelectTriggerButtonProps, } from './types';
+export type { SelectItemData, SelectProps, SelectTriggerProps, SelectTriggerRenderProps, SelectContentProps, SelectSearchProps, SelectListProps, SelectItemTextProps, SelectItemContentProps, SelectItemDescriptionProps, SelectItemProps, SelectSeparatorProps, SelectEmptyStateProps, SelectTriggerButtonProps, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Select/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,YAAY,EACV,WAAW,EACX,kBAAkB,EAClB,wBAAwB,EACxB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Select/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,YAAY,EACV,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,wBAAwB,EACxB,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,sBAAsB,EACtB,0BAA0B,EAC1B,eAAe,EACf,oBAAoB,EACpB,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,SAAS,CAAC"}