@ledgerhq/lumen-ui-react 0.1.6 → 0.1.8

package/dist/lib/Components/Button/BaseButton.js

@@ -1,10 +1,10 @@
 import { jsxs as m, jsx as t } from "react/jsx-runtime";
 import { cn as x } from "../../../libs/utils-shared/dist/index.js";
 import { Slot as f, Slottable as h } from "@radix-ui/react-slot";
-import { cva as d } from "class-variance-authority";
+import { cva as l } from "class-variance-authority";
 import { Spinner as z } from "../Spinner/Spinner.js";
-const S = d(
-  "inline-flex size-fit cursor-pointer items-center justify-center rounded-full body-1-semi-bold transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+const S = l(
+  "inline-flex size-fit cursor-pointer items-center justify-center rounded-full transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
   {
     variants: {
       appearance: {
@@ -51,7 +51,7 @@ const S = d(
       isFull: !1
     }
   }
-), c = d("shrink-0", {
+), b = l("shrink-0", {
   variants: {
     appearance: {
       base: "text-on-interactive",
@@ -65,34 +65,34 @@ const S = d(
       true: "text-disabled"
     }
   }
-}), y = ({
-  ref: l,
+}), B = ({
+  ref: d,
   className: u,
   appearance: a = "base",
   size: s,
   isFull: v,
   disabled: e = !1,
-  asChild: i = !1,
-  icon: n,
+  asChild: n = !1,
+  icon: i,
   loading: r = !1,
   children: o,
   onClick: p,
   ...g
 }) => {
-  const b = s ? {
+  const c = s ? {
     xs: 16,
     sm: 20,
     md: 24,
     lg: 24
   }[s] : 24;
   return /* @__PURE__ */ m(
-    i ? f : "button",
+    n ? f : "button",
     {
       className: x(
         S({ disabled: e, loading: r, appearance: a, size: s, isFull: v }),
         u
       ),
-      ref: l,
+      ref: d,
       "data-disabled": e || void 0,
       disabled: e,
       onClick: p,
@@ -101,23 +101,24 @@ const S = d(
         r && /* @__PURE__ */ t(
           z,
           {
-            size: b,
-            className: c({ appearance: a, disabled: e })
+            size: c,
+            className: b({ appearance: a, disabled: e })
           }
         ),
-        !r && n && /* @__PURE__ */ t(
-          n,
+        !r && i && /* @__PURE__ */ t(
+          i,
           {
-            size: b,
-            className: c({ appearance: a, disabled: e })
+            size: c,
+            className: b({ appearance: a, disabled: e })
           }
         ),
-        o && (i ? /* @__PURE__ */ t(h, { children: o }) : /* @__PURE__ */ t("span", { className: "line-clamp-2 text-left", children: o }))
+        o && (n ? /* @__PURE__ */ t(h, { children: o }) : /* @__PURE__ */ t("span", { className: "line-clamp-2 text-left", children: o }))
       ]
     }
   );
 };
-y.displayName = "BaseButton";
+B.displayName = "BaseButton";
 export {
-  y as BaseButton
+  B as BaseButton,
+  S as baseButtonVariants
 };

package/dist/lib/Components/Button/Button.js

@@ -1,41 +1,41 @@
-import { jsx as i } from "react/jsx-runtime";
-import { cn as e } from "../../../libs/utils-shared/dist/index.js";
-import { cva as d } from "class-variance-authority";
-import { BaseButton as u } from "./BaseButton.js";
-const c = d("", {
+import { jsx as n } from "react/jsx-runtime";
+import { cn as d } from "../../../libs/utils-shared/dist/index.js";
+import { cva as e } from "class-variance-authority";
+import { BaseButton as b } from "./BaseButton.js";
+const l = e("", {
   variants: {
     size: {
       sm: "px-16 py-10 body-2-semi-bold",
-      md: "px-16 py-12",
-      lg: "p-16"
+      md: "px-16 py-12 body-1-semi-bold",
+      lg: "p-16 body-1-semi-bold"
     }
   },
   defaultVariants: {
     size: "md"
   }
-}), f = ({
+}), u = ({
   ref: o,
-  className: a,
-  loading: m,
-  disabled: r,
-  children: s,
+  className: m,
+  loading: s,
+  disabled: a,
+  children: r,
   size: t,
-  icon: p,
-  ...n
-}) => /* @__PURE__ */ i(
-  u,
+  icon: i,
+  ...p
+}) => /* @__PURE__ */ n(
+  b,
   {
     ref: o,
     size: t,
-    disabled: r,
-    icon: p,
-    loading: m,
-    className: e(c({ size: t }), "gap-8", a),
-    ...n,
-    children: s
+    disabled: a,
+    icon: i,
+    loading: s,
+    className: d(l({ size: t }), "gap-8", m),
+    ...p,
+    children: r
   }
 );
-f.displayName = "Button";
+u.displayName = "Button";
 export {
-  f as Button
+  u as Button
 };

package/dist/lib/Components/ButtonTrigger/ButtonTrigger.d.ts

@@ -0,0 +1,33 @@
+import { ButtonTriggerProps } from './types';
+/**
+ * Trigger button for select/dropdown components. Displays a label with an optional
+ * leading icon and a trailing chevron indicator.
+ *
+ * This component is intended to be used exclusively as the trigger inside a Select or
+ * dropdown pattern. It should not be used as a standalone action button — use `Button`
+ * or `IconButton` instead.
+ *
+ * @see {@link https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6389-45680 Figma}
+ *
+ * @example
+ * import { ButtonTrigger } from '@ledgerhq/lumen-ui-react';
+ * import { Settings } from '@ledgerhq/lumen-ui-react/symbols';
+ *
+ * // With flat interface icon
+ * <ButtonTrigger icon={<Settings size={20} />} iconType="flat">
+ *   Network
+ * </ButtonTrigger>
+ *
+ * // With rounded crypto icon
+ * <ButtonTrigger icon={<CryptoIcon ledgerId="bitcoin" size="32px" />} iconType="rounded">
+ *   Bitcoin
+ * </ButtonTrigger>
+ *
+ * // Without icon
+ * <ButtonTrigger>All accounts</ButtonTrigger>
+ */
+export declare const ButtonTrigger: {
+    ({ ref, className, appearance, size, disabled, asChild, icon, iconType, children, ...props }: ButtonTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=ButtonTrigger.d.ts.map

package/dist/lib/Components/ButtonTrigger/ButtonTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonTrigger.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ButtonTrigger/ButtonTrigger.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA4BlD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,aAAa;kGAWvB,kBAAkB;;CA+BpB,CAAC"}

package/dist/lib/Components/ButtonTrigger/ButtonTrigger.js

@@ -0,0 +1,73 @@
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { cn as y } from "../../../libs/utils-shared/dist/index.js";
+import { Slot as f, Slottable as T } from "@radix-ui/react-slot";
+import { cva as g } from "class-variance-authority";
+import { baseButtonVariants as u } from "../Button/BaseButton.js";
+import { ChevronDown as x } from "../../Symbols/Icons/ChevronDown.js";
+const z = g("gap-8 body-2-semi-bold", {
+  variants: {
+    size: {
+      sm: "",
+      md: ""
+    },
+    iconType: {
+      flat: "",
+      rounded: "",
+      none: ""
+    }
+  },
+  compoundVariants: [
+    { size: "md", iconType: "flat", class: "px-16 py-12" },
+    { size: "md", iconType: "rounded", class: "py-8 pr-16 pl-8" },
+    { size: "md", iconType: "none", class: "px-16 py-14" },
+    { size: "sm", iconType: "flat", class: "px-12 py-10" },
+    { size: "sm", iconType: "rounded", class: "py-8 pr-10 pl-8" },
+    { size: "sm", iconType: "none", class: "px-12 py-10" }
+  ],
+  defaultVariants: {
+    size: "md",
+    iconType: "none"
+  }
+}), N = ({
+  ref: p,
+  className: i,
+  appearance: r = "gray",
+  size: m = "md",
+  disabled: e = !1,
+  asChild: o = !1,
+  icon: n,
+  iconType: c = "flat",
+  children: a,
+  ...l
+}) => {
+  const d = n ? c : "none";
+  return /* @__PURE__ */ t(
+    o ? f : "button",
+    {
+      ref: p,
+      className: y(
+        u({
+          appearance: r,
+          disabled: e,
+          loading: !1
+        }),
+        z({ size: m, iconType: d }),
+        i
+      ),
+      "data-disabled": e || void 0,
+      disabled: e,
+      ...l,
+      children: [
+        n && /* @__PURE__ */ s("span", { className: "shrink-0", children: n }),
+        /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
+          o ? /* @__PURE__ */ s(T, { children: a }) : /* @__PURE__ */ s("span", { className: "line-clamp-2 text-left", children: a }),
+          /* @__PURE__ */ s(x, { size: 20, className: "shrink-0" })
+        ] })
+      ]
+    }
+  );
+};
+N.displayName = "ButtonTrigger";
+export {
+  N as ButtonTrigger
+};

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

@@ -0,0 +1,3 @@
+export { ButtonTrigger } from './ButtonTrigger';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ButtonTrigger/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,cAAc,SAAS,CAAC"}

package/dist/lib/Components/ButtonTrigger/types.d.ts

@@ -0,0 +1,33 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { BaseButtonProps } from '../Button/types';
+export type ButtonTriggerProps = {
+    /**
+     * The visual style of the trigger button.
+     * @default 'gray'
+     */
+    appearance?: 'gray' | 'transparent' | 'no-background';
+    /**
+     * The size variant of the trigger button.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md';
+    /**
+     * An optional pre-rendered icon to display as leading content.
+     * Consumer is responsible for sizing the icon (typically 20px).
+     */
+    icon?: ReactNode;
+    /**
+     * Determines the padding scheme when an icon is present.
+     * - `'flat'`: Standard padding for line/interface icons.
+     * - `'rounded'`: Tighter left padding for circular icons with their own background (e.g., crypto icons).
+     *
+     * Only relevant when `icon` is provided.
+     * @default 'flat'
+     */
+    iconType?: 'flat' | 'rounded';
+    /**
+     * The label content of the trigger button.
+     */
+    children: ReactNode;
+} & Pick<BaseButtonProps, 'disabled' | 'className' | 'asChild'> & ComponentPropsWithRef<'button'>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/ButtonTrigger/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ButtonTrigger/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,eAAe,CAAC;IACtD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,WAAW,GAAG,SAAS,CAAC,GAC7D,qBAAqB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/lib/Components/Card/Card.d.ts

@@ -0,0 +1,101 @@
+import { CardContentDescriptionProps, CardContentProps, CardContentRowProps, CardContentTitleProps, CardContextValue, CardFooterActionsProps, CardFooterProps, CardHeaderProps, CardLeadingProps, CardProps, CardTrailingProps, CardType } from './types';
+export declare const resolveCardInnerContext: ({ type, expanded, onClick, disabled, }: {
+    type: CardType;
+    expanded: CardProps["expanded"];
+    onClick: CardProps["onClick"];
+    disabled: CardProps["disabled"];
+}) => CardContextValue;
+/**
+ * A flexible card component that uses a composite pattern for maximum customization.
+ *
+ * - `type="interactive"` (default): whole card is clickable with hover/pressed states.
+ * - `type="expandable"`: only CardHeader is clickable, toggles footer visibility.
+ * - `type="info"`: data-display only, no built-in click handling.
+ *
+ * @example
+ * <Card onClick={handleClick}>
+ *   <CardHeader>
+ *     <CardLeading>
+ *       <CryptoIcon ledgerId="bitcoin" ticker="BTC" size="40px" />
+ *       <CardContent>
+ *         <CardContentTitle>Bitcoin</CardContentTitle>
+ *         <CardContentDescription>BTC</CardContentDescription>
+ *       </CardContent>
+ *     </CardLeading>
+ *   </CardHeader>
+ * </Card>
+ */
+export declare const Card: {
+    ({ ref, className, type, expanded, outlined, disabled, onClick, children, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Header row container for the card. Lays out CardLeading and CardTrailing horizontally.
+ * When the card `type` is `"expandable"`, the header becomes the click target with hover/pressed states.
+ */
+export declare const CardHeader: {
+    ({ ref, children, className, ...props }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Leading section container. Wraps icon + CardContent.
+ * Reusable inside both CardHeader and CardFooter.
+ */
+export declare const CardLeading: {
+    ({ ref, children, className, ...props }: CardLeadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Flex column wrapper for CardContentTitle and CardContentDescription.
+ * Supports right alignment via the `align` prop for trailing value displays.
+ */
+export declare const CardContent: {
+    ({ ref, children, className, ...props }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Horizontal row wrapper for placing a CardContentTitle or CardContentDescription
+ * alongside additional inline content (e.g. Tag) while preserving text truncation.
+ */
+export declare const CardContentRow: {
+    ({ ref, children, className, ...props }: CardContentRowProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Primary text of the card. Inherits the disabled state from the parent Card via context.
+ */
+export declare const CardContentTitle: {
+    ({ ref, children, className, ...props }: CardContentTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Secondary text of the card. Inherits the disabled state from the parent Card via context.
+ */
+export declare const CardContentDescription: {
+    ({ ref, children, className, ...props }: CardContentDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Trailing content container in the header. Used for Button, Tag, or right-aligned CardContent.
+ * Inherits the disabled state from the parent Card via context.
+ */
+export declare const CardTrailing: {
+    ({ ref, children, className, ...props }: CardTrailingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Footer container for the card. Collapses with a 300ms transition
+ * when `footerExpanded` is `false` (only happens in `"expandable"` mode).
+ */
+export declare const CardFooter: {
+    ({ ref, children, className, ...props }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Horizontal row container for action buttons inside CardFooter.
+ */
+export declare const CardFooterActions: {
+    ({ ref, children, className, ...props }: CardFooterActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Card.d.ts.map

package/dist/lib/Components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Card/Card.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,2BAA2B,EAC3B,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACT,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,uBAAuB,2CAKjC;IACD,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAChC,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CACjC,KAAG,gBAwBH,CAAC;AAgDF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI;0FAUd,SAAS;;CAkCX,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,UAAU;6CAKpB,eAAe;;CAgCjB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,WAAW;6CAKrB,gBAAgB;;CAUlB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,WAAW;6CAKrB,gBAAgB;;CAkBlB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,cAAc;6CAKxB,mBAAmB;;CAmBrB,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,gBAAgB;6CAK1B,qBAAqB;;CAkBvB,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,sBAAsB;6CAKhC,2BAA2B;;CAkB7B,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,YAAY;6CAKtB,iBAAiB;;CAoBnB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,UAAU;6CAKpB,eAAe;;CAgCjB,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,iBAAiB;6CAK3B,sBAAsB;;CAQxB,CAAC"}