@ledgerhq/lumen-ui-react 0.0.53

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

@@ -0,0 +1,81 @@
+import { DialogHeader } from './DialogHeader/DialogHeader';
+import { DialogContentProps, DialogProps } from './types';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+/**
+ * The root component that manages the dialog's open/closed state and contains the trigger and content.
+ *
+ * This component wraps the Radix UI Dialog Root. It manages the dialog's visibility
+ * state and coordinates between the trigger and content components.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/containment-dialog-overview--docs Storybook}
+ *
+ * @example
+ * import { Dialog, DialogTrigger, DialogContent, Button } from '@ledgerhq/lumen-ui-react';
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Dialog>
+ *       <DialogTrigger asChild>
+ *         <Button>Open Dialog</Button>
+ *       </DialogTrigger>
+ *       <DialogContent>
+ *         <DialogHeader
+ *           appearance='compact'
+ *           title='Dialog Title'
+ *           description='Dialog Description'
+ *           onBack={() => {}}
+ *           onClose={() => {}}
+ *         />
+ *         <p>This is a dialog!</p>
+ *       </DialogContent>
+ *     </Dialog>
+ *   );
+ * }
+ */
+export declare function Dialog({ ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The element that triggers the dialog to appear when interacted with.
+ *
+ * This component wraps any interactive element (button, link, icon, etc.) and makes it
+ * the trigger for the dialog. When users click on this element, the
+ * associated dialog content will be displayed.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/containment-dialog-overview--docs Storybook}
+ *
+ * @example
+ * import { DialogTrigger, Button } from '@ledgerhq/lumen-ui-react';
+ *
+ * <DialogTrigger asChild>
+ *   <Button>Click me for a dialog</Button>
+ * </DialogTrigger>
+ */
+export declare function DialogTrigger({ ...props }: DialogPrimitive.DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The content container that displays the dialog information.
+ *
+ * This component renders the actual dialog content with custom styling.
+ * The content is automatically positioned in the center of the viewport.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/containment-dialog-overview--docs Storybook}
+ *
+ * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the dialog's core appearance (colors, padding, etc).
+ *
+ * @example
+ * import { DialogContent } from '@ledgerhq/lumen-ui-react';
+ *
+ * <DialogContent>
+ *   <p>This is a dialog!</p>
+ * </DialogContent>
+ *
+ * // With custom styling for layout
+ * <DialogContent className="max-w-md">
+ *   <div className="space-y-4">
+ *     <h4 className="heading-4-semi-bold">Dialog Title</h4>
+ *     <p>Detailed content here.</p>
+ *   </div>
+ * </DialogContent>
+ */
+export declare function DialogContent({ className, children, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+export { DialogHeader };
+//# sourceMappingURL=Dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAsB,WAAW,EAAE,MAAM,SAAS,CAAC;AAC9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAE/C;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,kBAAkB,2CAEpC;AAsDD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAgBpB;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/lib/Components/Dialog/Dialog.js

@@ -0,0 +1,57 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { cn as n } from "../../../libs/utils-shared/dist/index.js";
+import * as o from "@radix-ui/react-dialog";
+import * as i from "react";
+function m({ ...a }) {
+  return /* @__PURE__ */ t(o.Root, { "data-slot": "dialog", ...a });
+}
+function f({
+  ...a
+}) {
+  return /* @__PURE__ */ t(o.Trigger, { "data-slot": "dialog-trigger", ...a });
+}
+function d({
+  ...a
+}) {
+  return /* @__PURE__ */ t(o.Portal, { "data-slot": "dialog-portal", ...a });
+}
+const s = i.forwardRef(
+  ({ className: a, ...e }, r) => /* @__PURE__ */ t(
+    o.Overlay,
+    {
+      ref: r,
+      "data-slot": "dialog-overlay",
+      className: n(
+        a,
+        "fixed inset-0 z-dialog-overlay bg-canvas-overlay backdrop-blur-sm data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in"
+      ),
+      ...e
+    }
+  )
+);
+function p({
+  className: a,
+  children: e,
+  ...r
+}) {
+  return /* @__PURE__ */ l(d, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ t(s, {}),
+    /* @__PURE__ */ t(
+      o.Content,
+      {
+        "data-slot": "dialog-content",
+        className: n(
+          "fixed left-[50%] top-[50%] z-dialog-content w-400 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-2xl bg-canvas-sheet px-24 pb-24 pt-0 data-[state=closed]:animate-content-hide data-[state=open]:animate-content-show",
+          a
+        ),
+        ...r,
+        children: e
+      }
+    )
+  ] });
+}
+export {
+  m as Dialog,
+  p as DialogContent,
+  f as DialogTrigger
+};

package/dist/lib/Components/Dialog/DialogHeader/DialogHeader.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { DialogHeaderProps } from '../types';
+export declare const DialogHeader: FC<DialogHeaderProps>;
+//# sourceMappingURL=DialogHeader.d.ts.map

package/dist/lib/Components/Dialog/DialogHeader/DialogHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Dialog/DialogHeader/DialogHeader.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIlC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA6I7C,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAyB9C,CAAC"}

package/dist/lib/Components/Dialog/DialogHeader/DialogHeader.js

@@ -0,0 +1,114 @@
+import { jsxs as l, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { cn as c } from "../../../../libs/utils-shared/dist/index.js";
+import * as h from "@radix-ui/react-dialog";
+import { cva as f } from "class-variance-authority";
+import { useCommonTranslation as p } from "../../../../i18n/useCommonTranslation.js";
+import { ArrowLeft as u } from "../../../Symbols/Icons/ArrowLeft.js";
+import { Close as v } from "../../../Symbols/Icons/Close.js";
+import { IconButton as x } from "../../IconButton/IconButton.js";
+const N = f(
+  "-ml-14 -mr-8 flex bg-canvas-sheet text-base",
+  {
+    variants: {
+      appearance: {
+        compact: "h-64 flex-row items-center gap-12",
+        extended: "flex-col gap-16 pb-12 pt-10"
+      }
+    }
+  }
+), m = ({ onBack: r }) => {
+  const { t: a } = p();
+  return /* @__PURE__ */ e(
+    x,
+    {
+      appearance: "no-background",
+      size: "sm",
+      icon: u,
+      onClick: r,
+      className: "shrink-0",
+      "aria-label": a("components.dialogHeader.goBackAriaLabel")
+    }
+  );
+}, d = ({ onClose: r }) => {
+  const { t: a } = p();
+  return /* @__PURE__ */ e(
+    x,
+    {
+      appearance: "gray",
+      size: "xs",
+      icon: v,
+      onClick: r,
+      className: "shrink-0",
+      "aria-label": a("components.dialogHeader.closeAriaLabel")
+    }
+  );
+}, b = ({ hidden: r, className: a, ...o }) => /* @__PURE__ */ e(
+  h.Title,
+  {
+    "data-slot": "dialog-title",
+    className: c(r && "sr-only", a),
+    ...o
+  }
+), D = ({ hidden: r, className: a, ...o }) => /* @__PURE__ */ e(
+  h.Description,
+  {
+    "data-slot": "dialog-description",
+    className: c(r && "sr-only", a),
+    ...o
+  }
+), y = ({
+  className: r,
+  appearance: a = "compact",
+  title: o,
+  description: t,
+  onClose: i,
+  onBack: n,
+  ...g
+}) => /* @__PURE__ */ l("div", { className: N({ appearance: a, className: r }), ...g, children: [
+  a === "compact" && /* @__PURE__ */ l(s, { children: [
+    n && /* @__PURE__ */ e(m, { onBack: n }),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: c("flex min-w-0 flex-1 flex-col", {
+          "pl-40": !n
+        }),
+        children: [
+          o && /* @__PURE__ */ e("div", { className: "truncate text-center heading-4-semi-bold", children: o }),
+          t && /* @__PURE__ */ e("div", { className: "truncate text-center text-muted body-2", children: t })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(d, { onClose: i })
+  ] }),
+  a === "extended" && /* @__PURE__ */ l(s, { children: [
+    /* @__PURE__ */ l("div", { className: "flex h-40 flex-row items-center", children: [
+      n && /* @__PURE__ */ e(m, { onBack: n }),
+      /* @__PURE__ */ e("div", { className: "ml-auto", children: /* @__PURE__ */ e(d, { onClose: i }) })
+    ] }),
+    (o || t) && /* @__PURE__ */ l("div", { className: "flex flex-col gap-4 ps-14", children: [
+      o && /* @__PURE__ */ e("div", { className: "heading-2-semi-bold", children: o }),
+      t && /* @__PURE__ */ e("div", { className: "text-muted body-2", children: t })
+    ] })
+  ] })
+] }), T = ({
+  title: r = "",
+  description: a,
+  appearance: o = "compact",
+  ...t
+}) => /* @__PURE__ */ l(s, { children: [
+  /* @__PURE__ */ e(
+    y,
+    {
+      title: r,
+      description: a,
+      appearance: o,
+      ...t
+    }
+  ),
+  /* @__PURE__ */ e(b, { hidden: !0, children: r }),
+  a && /* @__PURE__ */ e(D, { hidden: !0, children: a })
+] });
+export {
+  T as DialogHeader
+};

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

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

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

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

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

@@ -0,0 +1,76 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+export type DialogProps = {
+    /**
+     * Callback function to handle open state change.
+     * @param open - The new open state of the dialog.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The open state of the dialog.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * The default open state of the dialog.
+     * @default false
+     */
+    defaultOpen?: boolean;
+} & React.ComponentProps<typeof DialogPrimitive.Root>;
+export type DialogTriggerProps = {
+    /**
+     * The element that will trigger the dialog (e.g., button, icon, text).
+     */
+    children?: React.ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+    /**
+     * Additional custom CSS classes to apply. Do not use this prop to modify the component's core appearance.
+     */
+    className?: string;
+} & React.ComponentProps<typeof DialogPrimitive.Trigger>;
+export type DialogContentProps = {
+    /**
+     * The content to display inside the dialog.
+     */
+    children?: React.ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+    /**
+     * Additional custom CSS classes to apply. Do not use this prop to modify the component's core appearance.
+     */
+    className?: string;
+} & React.ComponentProps<typeof DialogPrimitive.Content>;
+export type DialogOverlayProps = {
+    /**
+     * Additional custom CSS classes to apply. Do not use this prop to modify the component's core appearance.
+     */
+    className?: string;
+} & React.ComponentProps<typeof DialogPrimitive.Overlay>;
+export type DialogHeaderProps = {
+    /**
+     * The appearance variant of the header.
+     * @default 'compact'
+     */
+    appearance?: 'compact' | 'extended';
+    /**
+     * The main title to display in the header.
+     */
+    title?: string;
+    /**
+     * Optional description text to show below or beside the title.
+     */
+    description?: string;
+    /**
+     * Callback function to handle close action.
+     */
+    onClose: () => void;
+    /**
+     * Optional callback for back navigation.
+     */
+    onBack?: () => void;
+} & React.HTMLAttributes<HTMLDivElement>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;AAEtD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAEzD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAEzD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAEzD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC"}

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

@@ -0,0 +1,8 @@
+export type IconSize = 12 | 16 | 20 | 24 | 40 | 48 | 56;
+export type IconProps = {
+    size?: IconSize;
+    className?: string;
+    children: React.ReactNode;
+} & React.SVGProps<SVGSVGElement>;
+export declare const Icon: import('react').ForwardRefExoticComponent<Omit<IconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=Icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;AAmBlC,eAAO,MAAM,IAAI,kHAgBhB,CAAC"}

package/dist/lib/Components/Icon/Icon.js

@@ -0,0 +1,37 @@
+import { cn as s } from "../../../libs/utils-shared/dist/index.js";
+import { cva as a } from "class-variance-authority";
+import { forwardRef as l, createElement as k } from "react";
+const m = a("inline-block", {
+  variants: {
+    size: {
+      12: "icon-w-12 icon-h-12 icon-stroke-12",
+      16: "icon-w-16 icon-h-16 icon-stroke-16",
+      20: "icon-w-20 icon-h-20 icon-stroke-20",
+      24: "icon-w-24 icon-h-24 icon-stroke-24",
+      40: "icon-w-40 icon-h-40 icon-stroke-40",
+      48: "icon-w-48 icon-h-48 icon-stroke-48",
+      56: "icon-w-56 icon-h-56 icon-stroke-56"
+    }
+  },
+  defaultVariants: {
+    size: 24
+  }
+}), h = l(
+  ({ size: o = 24, className: n = "", children: i, viewBox: c, xmlns: e, ...r }, t) => k(
+    "svg",
+    {
+      ref: t,
+      fill: "none",
+      "aria-hidden": "true",
+      xmlns: e,
+      viewBox: c,
+      className: s(n, m({ size: o }), "inline-block"),
+      ...r
+    },
+    i
+  )
+);
+h.displayName = "Icon";
+export {
+  h as Icon
+};

package/dist/lib/Components/Icon/createIcon.d.ts

@@ -0,0 +1,12 @@
+import { SVGProps } from 'react';
+import { IconProps } from './Icon';
+/**
+ * Create an Icon component
+ *
+ * @param iconName - The name of the icon
+ * @param iconJsx - The JSX content of the icon
+ * @returns Icon component
+ */
+declare const createIcon: (iconName: string, iconJsx: React.ReactElement<SVGProps<SVGSVGElement>>) => import('react').ForwardRefExoticComponent<Omit<Omit<IconProps, "children">, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+export default createIcon;
+//# sourceMappingURL=createIcon.d.ts.map

package/dist/lib/Components/Icon/createIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Icon/createIcon.ts"],"names":[],"mappings":"AACA,OAAO,EAA6B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC;;;;;;GAMG;AACH,QAAA,MAAM,UAAU,GACd,UAAU,MAAM,EAChB,SAAS,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,uIAgBrD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/lib/Components/Icon/createIcon.js

@@ -0,0 +1,18 @@
+import { toPascalCase as m } from "../../../libs/utils-shared/dist/index.js";
+import { forwardRef as n, createElement as c } from "react";
+import { Icon as s } from "./Icon.js";
+const d = (r, o) => {
+  const e = n(
+    ({ className: t, ...a }, p) => c(s, {
+      ref: p,
+      className: t,
+      viewBox: o.props.viewBox,
+      ...a,
+      children: o.props.children
+    })
+  );
+  return e.displayName = m(r), e;
+};
+export {
+  d as default
+};

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

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { BaseButtonProps } from '../Button';
+import type * as TooltipPrimitive from '@radix-ui/react-tooltip';
+export type IconButtonProps = {
+    /**
+     * Accessible label for the IconButton
+     */
+    'aria-label': string;
+    /**
+     * The icon to display in the button
+     */
+    icon: NonNullable<BaseButtonProps['icon']>;
+    /**
+     * Whether to show a tooltip with the aria-label on hover
+     * @default false
+     */
+    tooltip?: boolean;
+    /**
+     * The preferred position of the tooltip relative to the button
+     * @default "top"
+     */
+    tooltipPlacement?: TooltipPrimitive.TooltipContentProps['side'];
+    /**
+     * Optional text to show in the tooltip. If not provided, aria-label will be used
+     */
+    tooltipText?: string;
+} & Omit<BaseButtonProps, 'isFull'>;
+export declare const IconButton: React.ForwardRefExoticComponent<{
+    /**
+     * Accessible label for the IconButton
+     */
+    'aria-label': string;
+    /**
+     * The icon to display in the button
+     */
+    icon: NonNullable<BaseButtonProps["icon"]>;
+    /**
+     * Whether to show a tooltip with the aria-label on hover
+     * @default false
+     */
+    tooltip?: boolean;
+    /**
+     * The preferred position of the tooltip relative to the button
+     * @default "top"
+     */
+    tooltipPlacement?: TooltipPrimitive.TooltipContentProps["side"];
+    /**
+     * Optional text to show in the tooltip. If not provided, aria-label will be used
+     */
+    tooltipText?: string;
+} & Omit<BaseButtonProps, "isFull"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=IconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,eAAe,EAAE,MAAM,WAAW,CAAC;AAGxD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAChE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;AAEpC,eAAO,MAAM,UAAU;IAxBrB;;OAEG;kBACW,MAAM;IACpB;;OAEG;UACG,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IAC1C;;;OAGG;cACO,OAAO;IACjB;;;OAGG;uBACgB,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC;IAC/D;;OAEG;kBACW,MAAM;6EAuCrB,CAAC"}

package/dist/lib/Components/IconButton/IconButton.js

@@ -0,0 +1,34 @@
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import m from "react";
+import { Tooltip as c, TooltipTrigger as d, TooltipContent as u } from "../Tooltip/Tooltip.js";
+import { BaseButton as h } from "../Button/BaseButton.js";
+const B = m.forwardRef(
+  ({
+    className: e,
+    icon: i,
+    tooltip: n = !1,
+    tooltipPlacement: l = "top",
+    tooltipText: a,
+    "aria-label": t,
+    ...p
+  }, s) => {
+    const r = /* @__PURE__ */ o(
+      h,
+      {
+        ref: s,
+        icon: i,
+        className: e,
+        "aria-label": t,
+        ...p
+      }
+    );
+    return n ? /* @__PURE__ */ f(c, { children: [
+      /* @__PURE__ */ o(d, { asChild: !0, children: r }),
+      /* @__PURE__ */ o(u, { side: l, children: a || t })
+    ] }) : r;
+  }
+);
+B.displayName = "IconButton";
+export {
+  B as IconButton
+};

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

@@ -0,0 +1,2 @@
+export * from './IconButton';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+/**
+ * A specialized interactive component designed specifically for displaying clickable icons.
+ *
+ * The InteractiveIcon provides two visual styles - 'filled' and 'stroked' - optimized for different icon types and use cases.
+ * It ensures proper focus states, hover effects, and accessibility features while maintaining a minimal footprint.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/components-interactiveicon-overview--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/components-interactiveicon-implementation--docs#dos-and-donts Guidelines}
+ *
+ * @component
+ *
+ * @warning Always provide an `aria-label` prop to ensure screen reader accessibility, as the component contains only an icon without visible text.
+ * @warning The icon size should be controlled by the icon component itself, not through CSS. Use the appropriate size prop on the icon component (e.g., `size={20}`).
+ * @warning The `className` prop should only be used for layout adjustments like margins or positioning. Do not use it to modify the component's core appearance (colors, padding, etc).
+ *
+ * @example
+ * import { InteractiveIcon } from '@ledgerhq/lumen-ui-react';
+ * import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-react/symbols';
+ *
+ * // Filled interactive icon for destructive actions
+ * <InteractiveIcon iconType="filled" aria-label="Delete item" onClick={handleDelete}>
+ *   <DeleteCircleFill size={20} />
+ * </InteractiveIcon>
+ *
+ * // Stroked interactive icon for secondary actions
+ * <InteractiveIcon iconType="stroked" aria-label="Open settings" onClick={handleSettings}>
+ *   <Settings size={20} />
+ * </InteractiveIcon>
+ */
+export declare const InteractiveIcon: React.ForwardRefExoticComponent<{
+    iconType: "filled" | "stroked";
+    children: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=InteractiveIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveIcon.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/InteractiveIcon/InteractiveIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,eAAe;;;2FAW1B,CAAC"}

package/dist/lib/Components/InteractiveIcon/InteractiveIcon.js

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cn as o } from "../../../libs/utils-shared/dist/index.js";
+import { cva as a } from "class-variance-authority";
+import n from "react";
+const c = a(
+  "inline-flex size-fit items-center justify-center rounded-full text-muted transition-colors hover:text-muted-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus active:text-muted-pressed disabled:text-disabled",
+  {
+    variants: {
+      iconType: {
+        filled: "",
+        stroked: "bg-base-transparent hover:bg-base-transparent-hover active:bg-base-transparent-pressed disabled:bg-disabled"
+      }
+    }
+  }
+), d = n.forwardRef(({ className: e, iconType: t, ...s }, r) => /* @__PURE__ */ i(
+  "button",
+  {
+    ref: r,
+    className: o(e, c({ iconType: t })),
+    ...s
+  }
+));
+d.displayName = "InteractiveIcon";
+export {
+  d as InteractiveIcon
+};

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

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

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

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

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

@@ -0,0 +1,13 @@
+export type InteractiveIconProps = {
+    /**
+     * The visual style of the icon button.
+     * Choose 'filled' for icons with solid backgrounds or 'stroked' for outlined icons.
+     */
+    iconType: 'filled' | 'stroked';
+    /**
+     * The icon component to display inside the button.
+     * Should be a single icon element from the design system.
+     */
+    children: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/InteractiveIcon/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC"}