@ledgerhq/lumen-ui-react 0.0.53

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

@@ -0,0 +1,3 @@
+export { BaseInput } from './BaseInput';
+export type { BaseInputProps } from './BaseInput';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/lib/Components/Button/BaseButton.d.ts

@@ -0,0 +1,97 @@
+import { default as React } from 'react';
+import { IconSize } from '../Icon/Icon';
+export type BaseButtonProps = {
+    /**
+     * The visual style of the button.
+     * @default base
+     */
+    appearance?: 'base' | 'gray' | 'accent' | 'transparent' | 'no-background' | 'red';
+    /**
+     * The size variant of the button.
+     * @default md
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * If true, the button expands to full width of its container.
+     * @default false
+     */
+    isFull?: boolean;
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, shows a loading spinner instead of the icon.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Additional custom CSS classes to apply.
+     */
+    className?: string;
+    /**
+     * Optional prop to render the button as a child element.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * An optional icon component to render inside the button.
+     */
+    icon?: React.ComponentType<{
+        size?: IconSize;
+        className?: string;
+    }>;
+    /**
+     * Optional children to render inside the button.
+     */
+    children?: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const BaseButton: React.ForwardRefExoticComponent<{
+    /**
+     * The visual style of the button.
+     * @default base
+     */
+    appearance?: "base" | "gray" | "accent" | "transparent" | "no-background" | "red";
+    /**
+     * The size variant of the button.
+     * @default md
+     */
+    size?: "xs" | "sm" | "md" | "lg";
+    /**
+     * If true, the button expands to full width of its container.
+     * @default false
+     */
+    isFull?: boolean;
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, shows a loading spinner instead of the icon.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Additional custom CSS classes to apply.
+     */
+    className?: string;
+    /**
+     * Optional prop to render the button as a child element.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * An optional icon component to render inside the button.
+     */
+    icon?: React.ComponentType<{
+        size?: IconSize;
+        className?: string;
+    }>;
+    /**
+     * Optional children to render inside the button.
+     */
+    children?: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=BaseButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Button/BaseButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAoDxC,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,UAAU,CAAC,EACP,MAAM,GACN,MAAM,GACN,QAAQ,GACR,aAAa,GACb,eAAe,GACf,KAAK,CAAC;IACV;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAElD,eAAO,MAAM,UAAU;IAlDrB;;;OAGG;iBAEC,MAAM,GACN,MAAM,GACN,QAAQ,GACR,aAAa,GACb,eAAe,GACf,KAAK;IACT;;;OAGG;WACI,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;IAChC;;;OAGG;aACM,OAAO;IAChB;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;cACO,OAAO;IACjB;;OAEG;gBACS,MAAM;IAClB;;;OAGG;cACO,OAAO;IACjB;;OAEG;WACI,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE;;OAEG;eACQ,KAAK,CAAC,SAAS;2FA8E3B,CAAC"}

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

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

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

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+import { BaseButtonProps } from './BaseButton';
+export type ButtonProps = {
+    /**
+     * If true, shows a loading spinner and disables the button.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * The content of the button. This is required to ensure buttons always have a label.
+     * @required
+     */
+    children: React.ReactNode;
+    /**
+     * The size variant of the button.
+     * @default md
+     */
+    size?: 'sm' | 'md' | 'lg';
+} & Omit<BaseButtonProps, 'children' | 'size'>;
+/**
+ * A customizable button component that supports various appearances, sizes, full-width mode, loading states, and optional icons.
+ *
+ * When in loading state, it displays a spinner. If an icon is provided without children, it renders as an icon-only button.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/action-button--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/action-button--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the button's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
+ * @example
+ * import { Button } from '@ledgerhq/lumen-ui-react';
+ *
+ * // Basic primary button
+ * <Button appearance="base" size="md" onClick={() => console.log('Clicked!')}>
+ *   Click Me
+ * </Button>
+ *
+ *
+ * // Full-width button with custom class
+ * <Button appearance="accent" isFull={true} className="ml-16">
+ *   Submit
+ * </Button>
+ *
+ * // Button as a link (asChild pattern)
+ * import { Link } from 'react-router-dom';
+ *
+ * <Button asChild appearance="base" size="md">
+ *   <Link to="/dashboard">Go to Dashboard</Link>
+ * </Button>
+ *
+ */
+export declare const Button: React.ForwardRefExoticComponent<{
+    /**
+     * If true, shows a loading spinner and disables the button.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * The content of the button. This is required to ensure buttons always have a label.
+     * @required
+     */
+    children: React.ReactNode;
+    /**
+     * The size variant of the button.
+     * @default md
+     */
+    size?: "sm" | "md" | "lg";
+} & Omit<BaseButtonProps, "children" | "size"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;AAe3D,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,MAAM;IAlDjB;;;OAGG;cACO,OAAO;IACjB;;;OAGG;cACO,KAAK,CAAC,SAAS;IACzB;;;OAGG;WACI,IAAI,GAAG,IAAI,GAAG,IAAI;wFAoD1B,CAAC"}

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

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

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

@@ -0,0 +1,3 @@
+export { Button, type ButtonProps } from './Button';
+export { BaseButton, type BaseButtonProps } from './BaseButton';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,87 @@
+import { default as React } from 'react';
+import { IconSize } from '../Icon/Icon';
+export type CardButtonProps = {
+    /**
+     * The visual style of the card button.
+     * @default base
+     */
+    appearance?: 'base' | 'outline';
+    /**
+     * An optional icon component to render on the left side.
+     */
+    icon?: React.ComponentType<{
+        size?: IconSize;
+        className?: string;
+    }>;
+    /**
+     * The main title of the card button.
+     * @required
+     */
+    title: string;
+    /**
+     * Optional descriptive text displayed below the title.
+     */
+    description?: string;
+    /**
+     * If true, hides the chevron arrow on the right side.
+     * @default false
+     */
+    hideChevron?: boolean;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
+/**
+ * A customizable card button component that displays an optional icon, a required title, an optional description, and an optional chevron arrow.
+ *
+ * It supports different appearances. takes full width by default. The chevron can be hidden if needed.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/action-cardbutton--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/action-cardbutton--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the card button's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
+ * @example
+ * // Basic card button
+ * import { CardButton } from '@ledgerhq/lumen-ui-react';
+ *
+ * <CardButton title="Click Me" onClick={() => console.log('Clicked!')} />
+ *
+ * // Card button with icon and description
+ * import { CardButton } from '@ledgerhq/lumen-ui-react';
+ * import { Info } from '@ledgerhq/lumen-ui-react/symbols';
+ *
+ * <CardButton
+ *   icon={Info}
+ *   title="Information"
+ *   description="Additional details here"
+ *   appearance="outline"
+ * />
+ */
+export declare const CardButton: React.ForwardRefExoticComponent<{
+    /**
+     * The visual style of the card button.
+     * @default base
+     */
+    appearance?: "base" | "outline";
+    /**
+     * An optional icon component to render on the left side.
+     */
+    icon?: React.ComponentType<{
+        size?: IconSize;
+        className?: string;
+    }>;
+    /**
+     * The main title of the card button.
+     * @required
+     */
+    title: string;
+    /**
+     * Optional descriptive text displayed below the title.
+     */
+    description?: string;
+    /**
+     * If true, hides the chevron arrow on the right side.
+     * @default false
+     */
+    hideChevron?: boolean;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=CardButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CardButton/CardButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAkBxC,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpE;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,UAAU;IArDrB;;;OAGG;iBACU,MAAM,GAAG,SAAS;IAC/B;;OAEG;WACI,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE;;;OAGG;WACI,MAAM;IACb;;OAEG;kBACW,MAAM;IACpB;;;OAGG;kBACW,OAAO;6GA6DtB,CAAC"}

package/dist/lib/Components/CardButton/CardButton.js

@@ -0,0 +1,49 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { cn as u } from "../../../libs/utils-shared/dist/index.js";
+import { cva as c } from "class-variance-authority";
+import m from "react";
+import { ChevronRight as f } from "../../Symbols/Icons/ChevronRight.js";
+const p = c(
+  "inline-flex h-fit w-full items-center gap-12 rounded-sm p-12 transition-colors focus-visible:outline-2 focus-visible:outline-focus disabled:text-disabled",
+  {
+    variants: {
+      appearance: {
+        base: "bg-muted text-base hover:bg-muted-hover active:bg-muted-pressed disabled:bg-disabled",
+        outline: "bg-base-transparent text-base outline-dashed outline-1 outline-muted-subtle hover:bg-base-transparent-hover hover:outline-muted-subtle-hover focus-visible:outline-none focus-visible:outline-offset-0 active:bg-base-transparent-pressed active:outline-muted-subtle-pressed disabled:bg-base-transparent disabled:outline-disabled"
+      }
+    },
+    defaultVariants: {
+      appearance: "base"
+    }
+  }
+), v = m.forwardRef(
+  ({ className: n, appearance: l, icon: o, title: r, description: t, hideChevron: d, ...s }, b) => {
+    const a = o;
+    return /* @__PURE__ */ i(
+      "button",
+      {
+        ref: b,
+        className: u(
+          n,
+          p({
+            appearance: l
+          })
+        ),
+        disabled: s.disabled,
+        ...s,
+        children: [
+          a && /* @__PURE__ */ e(a, { size: 24, className: "shrink-0" }),
+          /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col gap-4 text-left", children: [
+            /* @__PURE__ */ e("div", { className: "min-w-0 truncate body-1-semi-bold", children: r }),
+            t && /* @__PURE__ */ e("div", { className: "line-clamp-2 min-w-0 body-2", children: t })
+          ] }),
+          !d && /* @__PURE__ */ e(f, { size: 24, className: "shrink-0" })
+        ]
+      }
+    );
+  }
+);
+v.displayName = "CardButton";
+export {
+  v as CardButton
+};

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

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

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

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

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

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+export type CheckboxProps = {
+    /**
+     * The controlled checked state of the checkbox.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state (uncontrolled).
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback function called when the checked state changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Additional custom CSS classes to apply. Do not use this prop to modify the component's core appearance.
+     */
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'checked' | 'defaultChecked' | 'onCheckedChange' | 'asChild'>;
+/**
+ * A customizable checkbox component built on top of Radix UI Checkbox primitive.
+ *
+ * The checkbox follows the design system tokens and supports checked, unchecked,
+ * disabled, and focus states with proper hover and active interactions.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/components-checkbox-overview--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/components-checkbox-implementation--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the checkbox's core appearance.
+ *
+ * @example
+ * import { Checkbox } from '@ledgerhq/lumen-ui-react';
+ *
+ * // Basic controlled checkbox
+ * const [checked, setChecked] = useState(false);
+ * <Checkbox
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * />
+ *
+ * // Uncontrolled checkbox with default state
+ * <Checkbox defaultChecked={true} />
+ *
+ * // Disabled checkbox
+ * <Checkbox disabled checked={true} />
+ *
+ * // Form checkbox with name and value
+ * <Checkbox
+ *   name="terms"
+ *   value="accepted"
+ *   required
+ *   onCheckedChange={(checked) => console.log('Terms accepted:', checked)}
+ * />
+ *
+ * // With custom styling (layout only)
+ * <Checkbox className="mr-8" />
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<{
+    /**
+     * The controlled checked state of the checkbox.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state (uncontrolled).
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback function called when the checked state changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Additional custom CSS classes to apply. Do not use this prop to modify the component's core appearance.
+     */
+    className?: string;
+} & Omit<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref">, "defaultChecked" | "checked" | "asChild" | "onCheckedChange"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CACN,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EAC7D,SAAS,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,SAAS,CAC7D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,QAAQ;IA5DnB;;OAEG;cACO,OAAO;IACjB;;OAEG;qBACc,OAAO;IACxB;;OAEG;sBACe,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;IAC5C;;OAEG;gBACS,MAAM;uMA0DlB,CAAC"}

package/dist/lib/Components/Checkbox/Checkbox.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as d } from "../../../libs/utils-shared/dist/index.js";
+import * as t from "@radix-ui/react-checkbox";
+import i from "react";
+import { Check as o } from "../../Symbols/Icons/Check.js";
+const r = [
+  "h-20 w-20 shrink-0 rounded-xs transition-colors",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2",
+  "data-[state=unchecked]:border data-[state=unchecked]:border-muted data-[state=unchecked]:bg-base",
+  "data-[state=unchecked]:hover:bg-base-hover",
+  "data-[state=unchecked]:active:bg-base-pressed",
+  "data-[state=unchecked]:disabled:border-disabled data-[state=unchecked]:disabled:bg-base",
+  "data-[state=checked]:bg-active data-[state=checked]:text-on-accent",
+  "data-[state=checked]:hover:bg-active-hover",
+  "data-[state=checked]:active:bg-active-pressed",
+  "data-[state=checked]:disabled:bg-disabled data-[state=checked]:disabled:text-disabled"
+].join(" "), b = i.forwardRef(({ className: a, ...s }, c) => /* @__PURE__ */ e(
+  t.Root,
+  {
+    ref: c,
+    className: d(r, a),
+    ...s,
+    children: /* @__PURE__ */ e(t.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(o, { size: 16 }) })
+  }
+));
+b.displayName = t.Root.displayName;
+export {
+  b as Checkbox
+};

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

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

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

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

package/dist/lib/Components/Design-tokens/shared.d.ts

@@ -0,0 +1,20 @@
+export declare const ColorSwatch: ({ name, className, textClassName, category, }: {
+    name: string;
+    className: string;
+    textClassName?: string;
+    category?: "background" | "text" | "border";
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionHeader: ({ title, description, }: {
+    title: string;
+    description?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ColorSection: ({ title, tokens, category, }: {
+    title?: string;
+    tokens: Array<{
+        name: string;
+        className: string;
+        textClassName?: string;
+    }>;
+    category?: "background" | "text" | "border";
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=shared.d.ts.map

package/dist/lib/Components/Design-tokens/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Design-tokens/shared.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,GAAI,+CAKzB;IACD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,YAAY,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC7C,4CAsDA,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,yBAG3B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,4CAKA,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,8BAI1B;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,YAAY,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC7C,4CAeA,CAAC"}