@ledgerhq/lumen-ui-react 0.1.52 → 0.1.54

package/dist/lib/Components/core/Banner/Banner.js

@@ -0,0 +1,74 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { cn as c } from "../../../../libs/utils-shared/dist/index.js";
+import { cva as b } from "class-variance-authority";
+import { useCommonTranslation as g } from "../../../../i18n/useCommonTranslation.js";
+import { IconButton as N } from "../IconButton/IconButton.js";
+import { Close as h } from "../../symbols/icons/Close.js";
+import { DeleteCircleFill as u } from "../../symbols/icons/DeleteCircleFill.js";
+import { WarningFill as v } from "../../symbols/icons/WarningFill.js";
+import { CheckmarkCircleFill as w } from "../../symbols/icons/CheckmarkCircleFill.js";
+import { InformationFill as C } from "../../symbols/icons/InformationFill.js";
+const k = {
+  info: /* @__PURE__ */ r(C, { className: "text-base" }),
+  success: /* @__PURE__ */ r(w, { className: "text-success" }),
+  warning: /* @__PURE__ */ r(v, { className: "text-warning" }),
+  error: /* @__PURE__ */ r(u, { className: "text-error" })
+}, F = {
+  root: b("flex w-full items-start gap-8 rounded-md p-12 text-base", {
+    variants: {
+      appearance: {
+        info: "bg-surface",
+        success: "bg-success",
+        warning: "bg-warning",
+        error: "bg-error"
+      }
+    }
+  })
+}, W = ({
+  ref: m,
+  appearance: s = "info",
+  title: a,
+  description: o,
+  primaryAction: l,
+  secondaryAction: n,
+  className: t,
+  onClose: i,
+  closeAriaLabel: f,
+  ...p
+}) => {
+  const { t: x } = g(), d = k[s];
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: m,
+      className: c(F.root({ appearance: s }), t),
+      ...p,
+      children: [
+        /* @__PURE__ */ r("div", { className: "flex shrink-0 items-start py-4", children: d }),
+        /* @__PURE__ */ e("div", { className: "mr-8 flex flex-1 flex-col gap-8 py-4", children: [
+          /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: [
+            a && /* @__PURE__ */ r("h3", { className: "line-clamp-2 body-1-semi-bold", children: a }),
+            o && /* @__PURE__ */ r("div", { className: c("line-clamp-5 body-2", !a && "mt-2"), children: o })
+          ] }),
+          (l || n) && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4", children: [
+            l,
+            n
+          ] })
+        ] }),
+        i && /* @__PURE__ */ r(
+          N,
+          {
+            appearance: "transparent",
+            size: "xs",
+            icon: h,
+            onClick: () => i(),
+            "aria-label": f || x("components.banner.closeAriaLabel")
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  W as Banner
+};

package/dist/lib/Components/core/Banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Banner/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/dist/lib/Components/core/Banner/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Banner/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACzD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC"}

package/dist/lib/Components/core/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAe3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,MAAM,GAAI,uEASpB,WAAW,4CAcb,CAAC"}

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

@@ -0,0 +1,40 @@
+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 "../../internal/BaseButton/BaseButton.js";
+const l = e("", {
+  variants: {
+    size: {
+      sm: "px-16 py-10 body-2-semi-bold",
+      md: "px-16 py-12 body-1-semi-bold",
+      lg: "p-16 body-1-semi-bold"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), x = ({
+  ref: t,
+  className: m,
+  loading: s,
+  disabled: a,
+  children: r,
+  size: o,
+  icon: i,
+  ...p
+}) => /* @__PURE__ */ n(
+  b,
+  {
+    ref: t,
+    size: o,
+    disabled: a,
+    icon: i,
+    loading: s,
+    className: d(l({ size: o }), "gap-8", m),
+    ...p,
+    children: r
+  }
+);
+export {
+  x as Button
+};

package/dist/lib/Components/core/Button/index.d.ts

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

package/dist/lib/Components/core/Button/index.d.ts.map

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

package/dist/lib/Components/core/Button/types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { BaseButtonProps } from '../../internal/BaseButton/types';
+export type ButtonProps = {
+    /**
+     * The content of the button. This is required to ensure buttons always have a label.
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The size variant of the button.
+     * @default md
+     */
+    size?: 'sm' | 'md' | 'lg';
+} & Omit<BaseButtonProps, 'children' | 'size'>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/core/Button/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAEvE,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC"}

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

@@ -0,0 +1,71 @@
+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;
+/**
+ * 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;
+/**
+ * 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;
+/**
+ * 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;
+/**
+ * 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;
+/**
+ * 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;
+/**
+ * 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;
+/**
+ * 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;
+/**
+ * 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, appearance, ...props }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Horizontal row container for action buttons inside CardFooter.
+ */
+export declare const CardFooterActions: ({ ref, children, className, ...props }: CardFooterActionsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Card/Card.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAEV,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,GAAI,wCAKrC;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,gBA2BH,CAAC;AAiDF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAAI,qFAUlB,SAAS,4CAkCX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,wCAKxB,eAAe,4CA8BjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAUlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAkBlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,wCAK5B,mBAAmB,4CAmBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,wCAK9B,qBAAqB,4CAmBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,wCAKpC,2BAA2B,4CAmB7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,wCAK1B,iBAAiB,4CAqBnB,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,oDAMxB,eAAe,4CA4BjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,wCAK/B,sBAAsB,4CAQxB,CAAC"}

package/dist/lib/Components/core/Card/Card.js

@@ -0,0 +1,347 @@
+import { jsx as n, jsxs as f, Fragment as p } from "react/jsx-runtime";
+import { createSafeContext as m, DisabledProvider as g, cn as o, getButtonA11yProps as C } from "../../../../libs/utils-shared/dist/index.js";
+import { cva as v } from "class-variance-authority";
+import { useMemo as h } from "react";
+import { ChevronUp as N } from "../../symbols/icons/ChevronUp.js";
+import { ChevronDown as w } from "../../symbols/icons/ChevronDown.js";
+const k = ({
+  type: r,
+  expanded: t,
+  onClick: a,
+  disabled: e
+}) => {
+  switch (r) {
+    case "interactive":
+      return {
+        cardClickable: !!a,
+        headerClickable: !1,
+        footerExpanded: !0,
+        disabled: !!e,
+        onHeaderClick: void 0
+      };
+    case "expandable":
+      return {
+        cardClickable: !1,
+        headerClickable: !!a && !e,
+        footerExpanded: !!t,
+        disabled: !!e,
+        onHeaderClick: a
+      };
+    case "info":
+      return {
+        cardClickable: !1,
+        headerClickable: !1,
+        footerExpanded: !0,
+        disabled: !!e,
+        onHeaderClick: void 0
+      };
+  }
+}, [R, c] = m(
+  "Card",
+  {
+    cardClickable: !1,
+    headerClickable: !1,
+    footerExpanded: !0,
+    disabled: !1
+  }
+), [q, x] = m("CardContentAlign", {
+  align: "left"
+}), E = v(
+  "flex w-full flex-col overflow-clip rounded-lg bg-surface text-base transition-colors",
+  {
+    variants: {
+      interactive: {
+        true: "cursor-pointer hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus active:bg-surface-pressed",
+        false: ""
+      },
+      outlined: {
+        true: "border-2 border-active",
+        false: ""
+      },
+      disabled: {
+        true: "cursor-default",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        interactive: !0,
+        disabled: !0,
+        className: "cursor-default hover:bg-surface active:bg-surface"
+      }
+    ],
+    defaultVariants: {
+      interactive: !1,
+      outlined: !1,
+      disabled: !1
+    }
+  }
+), P = ({
+  ref: r,
+  className: t,
+  type: a = "interactive",
+  expanded: e,
+  outlined: s = !1,
+  disabled: i = !1,
+  onClick: l,
+  children: d,
+  ...b
+}) => {
+  const u = h(
+    () => k({
+      type: a,
+      expanded: e,
+      onClick: l,
+      disabled: i
+    }),
+    [a, e, l, i]
+  );
+  return /* @__PURE__ */ n(R, { value: u, children: /* @__PURE__ */ n(g, { value: { disabled: i }, children: /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      ...u.cardClickable && C({ onClick: l, disabled: i }),
+      className: o(
+        E({
+          interactive: u.cardClickable,
+          outlined: s,
+          disabled: i
+        }),
+        t
+      ),
+      ...b,
+      children: d
+    }
+  ) }) });
+}, T = ({
+  ref: r,
+  children: t,
+  className: a,
+  ...e
+}) => {
+  const { disabled: s, headerClickable: i, footerExpanded: l, onHeaderClick: d } = c({
+    consumerName: "CardHeader",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      ref: r,
+      "aria-expanded": d ? l : void 0,
+      ...C({ onClick: d, disabled: s }),
+      className: o(
+        "flex items-center gap-12 p-12",
+        i && "cursor-pointer -outline-offset-6 transition-colors hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-focus active:bg-surface-pressed",
+        a
+      ),
+      ...e,
+      children: [
+        t,
+        d && /* @__PURE__ */ f(p, { children: [
+          l && /* @__PURE__ */ n(N, { className: "text-muted", size: 20 }),
+          !l && /* @__PURE__ */ n(w, { className: "text-muted", size: 20 })
+        ] })
+      ]
+    }
+  );
+}, z = ({
+  ref: r,
+  children: t,
+  className: a,
+  ...e
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: r,
+    className: o("flex min-w-0 flex-1 items-center gap-12", a),
+    ...e,
+    children: t
+  }
+), B = ({
+  ref: r,
+  children: t,
+  className: a,
+  ...e
+}) => {
+  const { align: s } = x({
+    consumerName: "CardContent",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      className: o(
+        "flex min-w-0 flex-1 flex-col gap-4",
+        s === "right" && "items-end text-end",
+        a
+      ),
+      ...e,
+      children: t
+    }
+  );
+}, I = ({
+  ref: r,
+  children: t,
+  className: a,
+  ...e
+}) => {
+  const { align: s } = x({
+    consumerName: "CardContentRow",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      className: o(
+        "flex min-w-0 items-center gap-8",
+        s === "right" && "justify-end",
+        a
+      ),
+      ...e,
+      children: t
+    }
+  );
+}, L = ({
+  ref: r,
+  children: t,
+  className: a,
+  ...e
+}) => {
+  const { disabled: s } = c({
+    consumerName: "CardContentTitle",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      className: o(
+        "truncate body-2-semi-bold",
+        s && "text-disabled",
+        a
+      ),
+      ...e,
+      children: t
+    }
+  );
+}, M = ({
+  ref: r,
+  children: t,
+  className: a,
+  ...e
+}) => {
+  const { disabled: s } = c({
+    consumerName: "CardContentDescription",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      className: o(
+        "truncate body-3",
+        s ? "text-disabled" : "text-muted",
+        a
+      ),
+      ...e,
+      children: t
+    }
+  );
+}, S = ({
+  ref: r,
+  children: t,
+  className: a,
+  ...e
+}) => {
+  const { disabled: s } = c({
+    consumerName: "CardTrailing",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ n(q, { value: { align: "right" }, children: /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      className: o(
+        "flex shrink-0 items-center gap-12",
+        s && "text-disabled",
+        a
+      ),
+      ...e,
+      children: t
+    }
+  ) });
+}, H = v(
+  "grid flex-1 transition-[grid-template-rows] duration-300",
+  {
+    variants: {
+      appearance: {
+        plain: "bg-muted-transparent",
+        "no-background": ""
+      }
+    },
+    defaultVariants: {
+      appearance: "plain"
+    }
+  }
+), U = ({
+  ref: r,
+  children: t,
+  className: a,
+  appearance: e = "plain",
+  ...s
+}) => {
+  const { disabled: i, footerExpanded: l } = c({
+    consumerName: "CardFooter",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: o(
+        H({ appearance: e }),
+        l ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      ),
+      children: /* @__PURE__ */ n("div", { className: "overflow-hidden", children: /* @__PURE__ */ n(
+        "div",
+        {
+          ref: r,
+          className: o(
+            "flex w-full flex-col gap-8 px-12 py-10",
+            i && "text-disabled",
+            a
+          ),
+          ...s,
+          children: t
+        }
+      ) })
+    }
+  );
+}, G = ({
+  ref: r,
+  children: t,
+  className: a,
+  ...e
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: r,
+    className: o("flex flex-row justify-end gap-10", a),
+    ...e,
+    children: t
+  }
+);
+export {
+  P as Card,
+  B as CardContent,
+  M as CardContentDescription,
+  I as CardContentRow,
+  L as CardContentTitle,
+  U as CardFooter,
+  G as CardFooterActions,
+  T as CardHeader,
+  z as CardLeading,
+  S as CardTrailing,
+  k as resolveCardInnerContext
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACtB,YAAY,EACZ,UAAU,EACV,iBAAiB,GAClB,MAAM,QAAQ,CAAC;AAChB,cAAc,SAAS,CAAC"}