@ledgerhq/lumen-ui-react 0.0.57 → 0.0.59

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

@@ -1,52 +1,9 @@
 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
-     */
+    icon: NonNullable<import('..').BaseButtonProps["icon"]>;
     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
-     */
+    tooltipPlacement?: import('@radix-ui/react-tooltip').TooltipContentProps["side"];
     tooltipText?: string;
-} & Omit<BaseButtonProps, "isFull"> & React.RefAttributes<HTMLButtonElement>>;
+} & Omit<import('..').BaseButtonProps, "isFull"> & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=IconButton.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,UAAU;;;;;;0FAoCtB,CAAC"}

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { BaseButtonProps } from '../Button/types';
+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'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/IconButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,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"}

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

@@ -1,51 +1,5 @@
-import { VariantProps } from 'class-variance-authority';
 import { default as React } from 'react';
-import { IconSize } from '../Icon/Icon';
-declare const linkVariants: (props?: ({
-    appearance?: "base" | "inherit" | "accent" | null | undefined;
-    size?: "inherit" | "sm" | "md" | null | undefined;
-    underline?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type LinkProps = {
-    /**
-     * The visual style of the link.
-     * @default inherit
-     */
-    appearance?: 'base' | 'accent' | 'inherit';
-    /**
-     * The size variant of the link.
-     * @default inherit
-     */
-    size?: 'sm' | 'md' | 'inherit';
-    /**
-     * Whether to underline the link text.
-     * @default true
-     */
-    underline?: boolean;
-    /**
-     * An optional icon component to render inside the link.
-     * The icon styles are defined by the link. Please do not override them.
-     */
-    icon?: React.ComponentType<{
-        size?: IconSize;
-        className?: string;
-    }>;
-    /**
-     * If true, adds target="_blank" and rel="noopener noreferrer" for external links.
-     * @default false
-     */
-    isExternal?: boolean;
-    /**
-     * If true, renders the child element directly with link styles instead of wrapping in an anchor element.
-     * Useful for creating router links or other semantic elements with link appearance.
-     * @default false
-     */
-    asChild?: boolean;
-    /**
-     * The link's content, typically text.
-     */
-    children: React.ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement> & VariantProps<typeof linkVariants>;
+import { IconSize } from '../Icon/types';
 /**
  * A customizable link component that supports base and accent color appearances, optional underline, sizes, icons, and external link handling.
  *
@@ -86,48 +40,15 @@ export type LinkProps = {
  * // Icons and other Link props like 'icon' are ignored when asChild is true - handle these in the child if needed.
  */
 export declare const Link: React.ForwardRefExoticComponent<{
-    /**
-     * The visual style of the link.
-     * @default inherit
-     */
     appearance?: "base" | "accent" | "inherit";
-    /**
-     * The size variant of the link.
-     * @default inherit
-     */
     size?: "sm" | "md" | "inherit";
-    /**
-     * Whether to underline the link text.
-     * @default true
-     */
     underline?: boolean;
-    /**
-     * An optional icon component to render inside the link.
-     * The icon styles are defined by the link. Please do not override them.
-     */
     icon?: React.ComponentType<{
         size?: IconSize;
         className?: string;
     }>;
-    /**
-     * If true, adds target="_blank" and rel="noopener noreferrer" for external links.
-     * @default false
-     */
     isExternal?: boolean;
-    /**
-     * If true, renders the child element directly with link styles instead of wrapping in an anchor element.
-     * Useful for creating router links or other semantic elements with link appearance.
-     * @default false
-     */
     asChild?: boolean;
-    /**
-     * The link's content, typically text.
-     */
     children: React.ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement> & VariantProps<(props?: ({
-    appearance?: "base" | "inherit" | "accent" | null | undefined;
-    size?: "inherit" | "sm" | "md" | null | undefined;
-    underline?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLAnchorElement>>;
-export {};
+} & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
 //# sourceMappingURL=Link.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAA,MAAM,YAAY;;;;8EA0BjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;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,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAC/C,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,IAAI;IA7Ef;;;OAGG;iBACU,MAAM,GAAG,QAAQ,GAAG,SAAS;IAC1C;;;OAGG;WACI,IAAI,GAAG,IAAI,GAAG,SAAS;IAC9B;;;OAGG;gBACS,OAAO;IACnB;;;OAGG;WACI,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE;;;OAGG;iBACU,OAAO;IACpB;;;;OAIG;cACO,OAAO;IACjB;;OAEG;cACO,KAAK,CAAC,SAAS;;;;;yHA0G1B,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Link/Link.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA+BzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,IAAI;;;;;YA9DoB,CAAC;iBAAqB,CAAC;;;;;2FA6H3D,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Link/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,42 @@
+import { IconSize } from '../Icon/types';
+export type LinkProps = {
+    /**
+     * The visual style of the link.
+     * @default inherit
+     */
+    appearance?: 'base' | 'accent' | 'inherit';
+    /**
+     * The size variant of the link.
+     * @default inherit
+     */
+    size?: 'sm' | 'md' | 'inherit';
+    /**
+     * Whether to underline the link text.
+     * @default true
+     */
+    underline?: boolean;
+    /**
+     * An optional icon component to render inside the link.
+     * The icon styles are defined by the link. Please do not override them.
+     */
+    icon?: React.ComponentType<{
+        size?: IconSize;
+        className?: string;
+    }>;
+    /**
+     * If true, adds target="_blank" and rel="noopener noreferrer" for external links.
+     * @default false
+     */
+    isExternal?: boolean;
+    /**
+     * If true, renders the child element directly with link styles instead of wrapping in an anchor element.
+     * Useful for creating router links or other semantic elements with link appearance.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * The link's content, typically text.
+     */
+    children: React.ReactNode;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Link/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;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,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC"}

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

@@ -1,92 +1,88 @@
 import { default as React } from 'react';
-import { Tag } from '../Tag';
-export type ListItemProps = {
-    /**
-     * The main title of the list item.
-     */
-    title: string;
-    /**
-     * Optional descriptive text below the title.
-     */
-    description?: string;
-    /**
-     * Optional content to display on the left, usually a Spot component.
-     * @example leadingContent={<Spot appearance="icon" icon={Settings} />}
-     */
-    leadingContent?: React.ReactNode;
-    /**
-     * Optional Tag component displayed next to the description.
-     * @example descriptionTag={<Tag label="New" appearance="accent" size="sm" />}
-     */
-    descriptionTag?: React.ReactElement<typeof Tag>;
-    /**
-     * Custom content to render on the right side of the list item.
-     * @example trailingContent={<Icon />}
-     */
-    trailingContent?: React.ReactNode;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
+import { ListItemSpotProps, ListItemTruncateProps } from './types';
 /**
- * A flexible list item component that displays a required title and optional description (with possible tag), leading and trailing content.
- * It functions as a clickable button with hover and active states.
+ * A flexible list item component that provides a composable structure for displaying
+ * interactive list items with leading content, title, description, and trailing content.
  *
  * @see {@link https://ldls.vercel.app/?path=/docs/containment-listitem--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/containment-listitem--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 list item's core appearance (colors, padding, etc).
- *
  * @example
- * // Basic item
- * import { ListItem } from '@ledgerhq/lumen-ui-react';
- *
- * <ListItem
- *   title="Basic Item"
- *   description="Optional description"
- *   onClick={() => console.log('Clicked!')}
- * />
- *
- * // Icon trailing content with leading Spot
- * import { ListItem, Spot } from '@ledgerhq/lumen-ui-react';
- * import { Wallet, Settings } from '@ledgerhq/lumen-ui-react/symbols';
- *
- * <ListItem
- *   title="Balance"
- *   leadingContent={<Spot appearance="icon" icon={Wallet} />}
- *   trailingContent={<Settings />}
- * />
- *
- * // Chevron trailing content
- * import { ListItem } from '@ledgerhq/lumen-ui-react';
- * import { ChevronRight } from '@ledgerhq/lumen-ui-react/symbols';
  *
- * <ListItem
- *   title="Settings"
- *   trailingContent={<ChevronRight size={24} />}
- * />
+ * <ListItem onClick={() => console.log('Clicked!')}>
+ *   <ListItemLeading>
+ *     <ListItemSpot appearance="icon" icon={Wallet} />
+ *     <ListItemContent>
+ *       <ListItemTitle>Balance</ListItemTitle>
+ *       <ListItemDescription>Optional description</ListItemDescription>
+ *     </ListItemContent>
+ *   </ListItemLeading>
+ *   <ListItemTrailing>
+ *     <ChevronRight size={24} />
+ *   </ListItemTrailing>
+ * </ListItem>
  */
 export declare const ListItem: React.ForwardRefExoticComponent<{
-    /**
-     * The main title of the list item.
-     */
-    title: string;
-    /**
-     * Optional descriptive text below the title.
-     */
-    description?: string;
-    /**
-     * Optional content to display on the left, usually a Spot component.
-     * @example leadingContent={<Spot appearance="icon" icon={Settings} />}
-     */
-    leadingContent?: React.ReactNode;
-    /**
-     * Optional Tag component displayed next to the description.
-     * @example descriptionTag={<Tag label="New" appearance="accent" size="sm" />}
-     */
-    descriptionTag?: React.ReactElement<typeof Tag>;
-    /**
-     * Custom content to render on the right side of the list item.
-     * @example trailingContent={<Icon />}
-     */
-    trailingContent?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onClick?: React.ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Container for the leading (left) part of the list item.
+ * Contains the visual element (ListItemSpot, Avatar, Icon) and the content (title + description).
+ */
+export declare const ListItemLeading: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Container for the text content (title and description) within the leading area.
+ */
+export declare const ListItemContent: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The main title of the list item.
+ */
+export declare const ListItemTitle: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Optional description text below the title. Can include inline elements like Tag.
+ * Automatically applies disabled styling when the parent ListItem is disabled.
+ */
+export declare const ListItemDescription: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Container for the trailing (right) content of the list item.
+ * Used for icons, switches, values, tags, chevrons, etc.
+ */
+export declare const ListItemTrailing: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Spot adapter for ListItem. Automatically inherits disabled state from parent ListItem.
+ */
+export declare const ListItemSpot: {
+    (props: ListItemSpotProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Icon adapter for ListItem. Automatically applies disabled styling from parent ListItem.
+ * Fixed at size 24 for consistent list item appearance.
+ */
+export declare const ListItemIcon: React.ForwardRefExoticComponent<{
+    icon: React.ComponentType<any>;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ListItemTruncate: {
+    ({ children, className, }: ListItemTruncateProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=ListItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ListItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,QAAQ;IAhEnB;;OAEG;WACI,MAAM;IACb;;OAEG;kBACW,MAAM;IACpB;;;OAGG;qBACc,KAAK,CAAC,SAAS;IAChC;;;OAGG;qBACc,KAAK,CAAC,YAAY,CAAC,OAAO,GAAG,CAAC;IAC/C;;;OAGG;sBACe,KAAK,CAAC,SAAS;6GA6FlC,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ListItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAOL,iBAAiB,EAGjB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAUjB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ;;;;;6GAuBpB,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,eAAe;;;+EAY1B,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,eAAe;;;+EAY1B,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,aAAa;;;+EAqBxB,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;+EA0B9B,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;+EAuB3B,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,YAAY;YAAW,iBAAiB;;CAOpD,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,YAAY;;;+EAiBxB,CAAC;AAIF,eAAO,MAAM,gBAAgB;+BAG1B,qBAAqB;;CAEvB,CAAC"}

package/dist/lib/Components/ListItem/ListItem.js

@@ -1,56 +1,149 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { cn as r } from "../../../libs/utils-shared/dist/index.js";
-import b from "react";
-const f = b.forwardRef(
-  (s, l) => {
-    const {
-      title: n,
-      description: a,
-      leadingContent: d,
-      descriptionTag: i,
-      trailingContent: c,
-      className: o,
-      ...m
-    } = s;
-    return /* @__PURE__ */ e(
+import { jsx as i } from "react/jsx-runtime";
+import { createSafeContext as d, cn as a } from "../../../libs/utils-shared/dist/index.js";
+import n from "react";
+import { Spot as u } from "../Spot/Spot.js";
+const [f, m] = d("ListItem", {}), [I, l] = d("ListItemTrailing", {
+  isInTrailing: !1
+}), p = n.forwardRef(
+  (e, t) => {
+    const { children: s, className: r, disabled: o, ...c } = e;
+    return /* @__PURE__ */ i(f, { value: { disabled: o }, children: /* @__PURE__ */ i(
       "button",
       {
-        ref: l,
+        ref: t,
         type: "button",
-        className: r(
-          "flex h-64 w-full cursor-pointer items-center gap-16 rounded-md bg-base-transparent px-8 py-12 text-base transition-colors",
-          "hover:bg-base-transparent-hover focus-visible:outline-2 focus-visible:outline-focus active:bg-base-transparent-pressed",
-          "disabled:cursor-default disabled:bg-base-transparent disabled:text-disabled",
-          o
+        disabled: o,
+        className: a(
+          "bg-base-transparent flex h-64 w-full cursor-pointer items-center gap-16 rounded-md px-8 py-12 text-base transition-colors",
+          "hover:bg-base-transparent-hover focus-visible:outline-focus active:bg-base-transparent-pressed focus-visible:outline-2",
+          "disabled:bg-base-transparent disabled:text-disabled disabled:cursor-default",
+          r
         ),
-        ...m,
-        children: [
-          /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 items-center gap-12", children: [
-            d,
-            /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 flex-col gap-4 text-left", children: [
-              /* @__PURE__ */ t("div", { className: "truncate body-2-semi-bold", children: n }),
-              a && /* @__PURE__ */ e("div", { className: "flex items-center gap-4", children: [
-                /* @__PURE__ */ t(
-                  "div",
-                  {
-                    className: r(
-                      "truncate text-muted body-3",
-                      s.disabled && "text-disabled"
-                    ),
-                    children: a
-                  }
-                ),
-                i && /* @__PURE__ */ t("div", { className: "flex h-16 shrink-0 items-center", children: i })
-              ] })
-            ] })
-          ] }),
-          c
-        ]
+        ...c,
+        children: s
+      }
+    ) });
+  }
+);
+p.displayName = "ListItem";
+const L = n.forwardRef(({ children: e, className: t }, s) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: s,
+    className: a("flex min-w-0 flex-1 items-center gap-12", t),
+    children: e
+  }
+));
+L.displayName = "ListItemLeading";
+const b = n.forwardRef(({ children: e, className: t }, s) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: s,
+    className: a("flex min-w-0 flex-1 flex-col gap-4", t),
+    children: e
+  }
+));
+b.displayName = "ListItemContent";
+const x = n.forwardRef(({ children: e, className: t }, s) => {
+  const { isInTrailing: r } = l({
+    consumerName: "ListItemTitle",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: s,
+      className: a(
+        "body-2-semi-bold w-full truncate",
+        r ? "justify-end text-end" : "justify-start text-start",
+        t
+      ),
+      children: e
+    }
+  );
+});
+x.displayName = "ListItemTitle";
+const N = n.forwardRef(({ children: e, className: t }, s) => {
+  const { disabled: r } = m({
+    consumerName: "ListItemDescription",
+    contextRequired: !0
+  }), { isInTrailing: o } = l({
+    consumerName: "ListItemDescription",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: s,
+      className: a(
+        "text-muted body-3 w-full items-center truncate",
+        o ? "justify-end text-end" : "justify-start text-start",
+        r && "text-disabled",
+        t
+      ),
+      children: e
+    }
+  );
+});
+N.displayName = "ListItemDescription";
+const g = n.forwardRef(({ children: e, className: t }, s) => {
+  const { disabled: r } = m({
+    consumerName: "ListItemTrailing",
+    contextRequired: !0
+  });
+  return /* @__PURE__ */ i(I, { value: { isInTrailing: !0 }, children: /* @__PURE__ */ i(
+    "div",
+    {
+      ref: s,
+      className: a(
+        "flex shrink-0 items-center",
+        r && "text-disabled",
+        t
+      ),
+      children: e
+    }
+  ) });
+});
+g.displayName = "ListItemTrailing";
+const y = (e) => {
+  const { disabled: t } = m({
+    consumerName: "ListItemSpot",
+    contextRequired: !0
+  });
+  return /* @__PURE__ */ i(u, { ...e, size: 48, disabled: t });
+};
+y.displayName = "ListItemSpot";
+const v = n.forwardRef(
+  ({ icon: e, className: t, ...s }, r) => {
+    const { disabled: o } = m({
+      consumerName: "ListItemIcon",
+      contextRequired: !0
+    });
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ref: r,
+        className: a("shrink-0", o && "text-disabled", t),
+        ...s,
+        children: /* @__PURE__ */ i(e, { size: 24 })
       }
     );
   }
 );
-f.displayName = "ListItem";
+v.displayName = "ListItemIcon";
+const T = ({
+  children: e,
+  className: t
+}) => /* @__PURE__ */ i("div", { className: a("min-w-0 truncate", t), children: e });
+T.displayName = "ListItemTruncate";
 export {
-  f as ListItem
+  p as ListItem,
+  b as ListItemContent,
+  N as ListItemDescription,
+  v as ListItemIcon,
+  L as ListItemLeading,
+  y as ListItemSpot,
+  x as ListItemTitle,
+  g as ListItemTrailing,
+  T as ListItemTruncate
 };

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

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

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

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