@moondreamsdev/dreamer-ui 1.7.10-test.99 → 1.7.12

package/dist/src/components/card/Card.d.ts

@@ -1,21 +1,21 @@
 /// <reference types="react" />
 import { CardSize } from './variants';
 export interface CardProps {
-    /** Unique identifier for the card */
+    /** The HTML id attribute for the card */
     id?: string;
-    /** Custom CSS classes */
+    /** Additional CSS classes to apply to the card */
     className?: string;
     /** React ref for the card container */
     ref?: React.Ref<HTMLDivElement>;
-    /** Card size variant. Affects text styles and internal padding. */
+    /** The size variant of the card */
     size?: CardSize;
-    /** Padding in pixels (defaults to 16). Used for card itself and spacing between its content within the card. */
+    /** The amount of padding inside the card */
     padding?: number;
-    /** Card header content */
+    /** Content to display in the card header */
     header?: React.ReactNode;
-    /** Card footer content */
+    /** Content to display in the card footer */
     footer?: React.ReactNode;
-    /** Main card content */
+    /** The main content of the card */
     children?: React.ReactNode;
     /** Image source for the card */
     imageSrc?: string;
@@ -26,4 +26,26 @@ export interface CardProps {
     /** If true, the image will extend to the edges of the card, ignoring padding. Default is false. */
     imageToEdge?: boolean;
 }
+/**
+ * A flexible container component for displaying content in a structured format.
+ * Supports headers, footers, images, and customizable padding with responsive design.
+ *
+ * @example
+ * ```tsx
+ * // Simple card
+ * <Card header="Card Title" size="lg">
+ *   <p>Your content goes here</p>
+ * </Card>
+ *
+ * // Card with image and footer
+ * <Card
+ *   imageSrc="/photo.jpg"
+ *   imageAlt="Product photo"
+ *   header={<h3>Product Name</h3>}
+ *   footer={<Button>Buy Now</Button>}
+ * >
+ *   Product description text here.
+ * </Card>
+ * ```
+ */
 export declare function Card({ id, className, ref, size, padding, header, footer, children, imageSrc, imageAlt, imageComponent, imageToEdge, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/carousel/Carousel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ScreenSize } from './useScreenSize';
 import { ButtonPosition, ButtonSize, ButtonStyle } from './variants';
+import { ScreenSize } from '../../hooks';
 export interface CarouselProps {
     children: React.ReactNode;
     id?: string;
@@ -43,4 +43,27 @@ export interface CarouselProps {
     /** Gap between carousel items in pixels */
     gap?: number;
 }
+/**
+ * A responsive carousel component for displaying multiple items in a sliding interface.
+ * Supports auto-scroll, infinite looping, responsive breakpoints, and extensive customization.
+ *
+ * @example
+ * ```tsx
+ * // Basic carousel
+ * <Carousel itemsToShow={3} autoScroll infinite>
+ *   <div>Slide 1</div>
+ *   <div>Slide 2</div>
+ *   <div>Slide 3</div>
+ * </Carousel>
+ *
+ * // Responsive carousel with breakpoints
+ * <Carousel
+ *   itemsToShow={{ xs: 1, md: 2, lg: 3 }}
+ *   gap={16}
+ *   buttonPosition="aligned"
+ * >
+ *   {products.map(product => <ProductCard key={product.id} {...product} />)}
+ * </Carousel>
+ * ```
+ */
 export declare function Carousel({ children, id, ref, className, autoScroll, scrollInterval, pauseScrollOnHover, currentIndex, onIndexChange, hidePrevNext, hideDots, itemsToShow, buttonSize, buttonVariant, buttonPosition, infinite, prevButton, nextButton, itemsClassName, containerClassName, dotsClassName, gap, }: CarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/checkbox/Checkbox.d.ts

@@ -1,11 +1,47 @@
 import React, { Ref } from 'react';
 export interface CheckboxProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Reference to the checkbox element. */
     ref?: Ref<HTMLButtonElement>;
+    /** The size of the checkbox in pixels. */
     size?: number;
+    /** CSS color value or Tailwind class for the checkbox color. */
     color?: string;
+    /** Whether to fill the checkbox background when checked. */
     filled?: boolean;
+    /** Whether the checkbox should have rounded corners. */
     rounded?: boolean;
+    /** Whether the checkbox is checked (controlled). */
     checked?: boolean;
+    /** Whether the checkbox is in an indeterminate state. */
+    indeterminate?: boolean;
+    /** Callback fired when the checkbox state changes. */
     onCheckedChange?: (checked: boolean) => void;
+    /** The display style of the checkbox. */
+    display?: 'inline' | 'block';
 }
-export declare function Checkbox({ ref, id, size, color, filled, rounded, checked, onCheckedChange, disabled, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A customizable checkbox component with support for checked, unchecked, and indeterminate states.
+ * Provides keyboard navigation and accessibility features with flexible styling options.
+ *
+ * @example
+ * ```tsx
+ * // Basic checkbox
+ * <Checkbox
+ *   checked={isChecked}
+ *   onCheckedChange={setIsChecked}
+ * />
+ *
+ * // Styled checkbox
+ * <Checkbox
+ *   size={24}
+ *   color="blue"
+ *   filled
+ *   rounded={false}
+ *   onCheckedChange={(checked) => console.log(checked)}
+ * />
+ *
+ * // Indeterminate state
+ * <Checkbox indeterminate onCheckedChange={handleSelection} />
+ * ```
+ */
+export declare function Checkbox({ ref, id, size, color, filled, rounded, checked, indeterminate, onCheckedChange, disabled, className, display, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/clickable/Clickable.d.ts

@@ -1,9 +1,37 @@
 /// <reference types="react" />
 export interface ClickableProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+    /** The content to make clickable. */
     children: React.ReactNode;
+    /** URL for link functionality. When provided, renders an anchor element. */
     linkTo?: React.HTMLProps<HTMLAnchorElement>['href'];
+    /** Additional props to pass to the anchor element when using linkTo. */
     linkProps?: Omit<React.HTMLProps<HTMLAnchorElement>, 'href'>;
+    /** Click handler for button functionality. Ignored when linkTo is provided. */
     onButtonClick?: React.HTMLProps<HTMLButtonElement>['onClick'];
+    /** Additional props to pass to the button element when using onButtonClick. */
     buttonProps?: Omit<React.HTMLProps<HTMLButtonElement>, 'onClick'>;
 }
+/**
+ * A wrapper component that makes any content clickable by overlaying an invisible button or link.
+ * Preserves the visual layout while adding interaction behavior.
+ *
+ * @example
+ * ```tsx
+ * // Make a card clickable as a link
+ * <Clickable linkTo="/product/123">
+ *   <Card>
+ *     <h3>Product Title</h3>
+ *     <p>Product description</p>
+ *   </Card>
+ * </Clickable>
+ *
+ * // Make content clickable as a button
+ * <Clickable onButtonClick={() => openModal()}>
+ *   <div className="flex items-center gap-2">
+ *     <Icon />
+ *     <span>Click me</span>
+ *   </div>
+ * </Clickable>
+ * ```
+ */
 export declare function Clickable({ children, className, linkTo, linkProps, onButtonClick, buttonProps, ...props }: ClickableProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/code/Code.d.ts

@@ -1,9 +1,27 @@
 import React from 'react';
 import { CodeVariant } from './variants';
 export interface CodeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    /** Unique identifier for the code element. */
     id?: string;
+    /** Reference to the code element. */
     ref?: React.Ref<HTMLElement>;
+    /** The code content to display. */
     content: string;
+    /** The visual style variant of the code. */
     variant?: CodeVariant;
 }
+/**
+ * An inline code component for displaying short code snippets within text.
+ * Automatically adjusts font metrics and provides different visual variants.
+ *
+ * @example
+ * ```tsx
+ * // Basic inline code
+ * <p>Use the <Code content="useState" /> hook for state management.</p>
+ *
+ * // Different variants
+ * <Code content="const foo = 'bar'" variant="muted" />
+ * <Code content="npm install react" variant="accent" />
+ * ```
+ */
 export declare function Code({ id, ref, content, variant, className, style, ...props }: CodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/code-block/CodeBlock.d.ts

@@ -1,28 +1,28 @@
 /// <reference types="react" />
 import { TokenClasses } from './types';
-export type CodeBlockLanguages = 'typescript' | 'ts' | 'tsx' | 'json' | 'bash' | 'sh' | 'css';
+export type CodeBlockLanguages = 'typescript' | 'ts' | 'tsx' | 'json' | 'bash' | 'sh' | 'css' | 'markdown' | 'md';
 export interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     /** The code content to display */
     code: string;
-    /** Programming language for syntax highlighting (TS/TSX/JSON supported) */
+    /** Programming language for syntax highlighting */
     language?: CodeBlockLanguages;
-    /** Whether to show copy button */
+    /** Enable copy to clipboard functionality */
     allowCopy?: boolean;
-    /** Whether to show download button */
+    /** Enable download as file functionality */
     allowDownload?: boolean;
-    /** Whether to allow fullscreen mode */
+    /** Enable fullscreen viewing mode */
     allowFullscreen?: boolean;
-    /** Optional filename to display in header */
+    /** Optional filename to display in the header */
     filename?: string;
-    /** Whether to show macOS-style traffic light buttons */
+    /** Show macOS-style traffic light buttons in header */
     showTrafficLights?: boolean;
-    /** Whether to show line numbers */
+    /** Whether to show line numbers on the left side */
     showLineNumbers?: boolean;
-    /** Whether to hide the header bar (buttons will appear in top-right corner) */
+    /** Hide the header completely for a minimal appearance */
     hideHeader?: boolean;
     /** Whether to hide the file type label */
     hideFiletype?: boolean;
-    /** Maximum height in pixels before scrolling */
+    /** Maximum height in pixels before showing scroll */
     maxHeight?: number;
     /** Custom token classes for syntax highlighting */
     tokenClasses?: TokenClasses;
@@ -33,4 +33,29 @@ export interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement
     /** Ref to the container element */
     ref?: React.Ref<HTMLDivElement>;
 }
+/**
+ * A feature-rich code block component with syntax highlighting, copy functionality,
+ * download options, and fullscreen viewing. Supports multiple programming languages.
+ *
+ * @example
+ * ```tsx
+ * // Basic code block
+ * <CodeBlock
+ *   code="const greeting = 'Hello World';"
+ *   language="typescript"
+ *   filename="example.ts"
+ * />
+ *
+ * // Full-featured block
+ * <CodeBlock
+ *   code={jsonData}
+ *   language="json"
+ *   allowCopy
+ *   allowDownload
+ *   allowFullscreen
+ *   showLineNumbers
+ *   maxHeight={400}
+ * />
+ * ```
+ */
 export declare function CodeBlock({ code, language, allowCopy, allowDownload, allowFullscreen, filename, showTrafficLights, showLineNumbers, hideHeader, hideFiletype, maxHeight, tokenClasses: customTokenClasses, className, id, ref, ...props }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/code-block/classes.d.ts

@@ -1,5 +1,6 @@
-import { BashTokenClasses, CSSTokenClasses, JsonTokenClasses, TSTokenClasses } from './types';
+import { BashTokenClasses, CSSTokenClasses, JsonTokenClasses, MarkdownTokenClasses, TSTokenClasses } from './types';
 export declare const defaultBashTokenClasses: BashTokenClasses;
 export declare const defaultCSSTokenClasses: CSSTokenClasses;
 export declare const defaultJsonTokenClasses: JsonTokenClasses;
+export declare const defaultMarkdownTokenClasses: MarkdownTokenClasses;
 export declare const defaultTSTokenClasses: TSTokenClasses;

package/dist/src/components/code-block/format.d.ts

@@ -1,5 +1,6 @@
-import { BashTokenClasses, CSSTokenClasses, JsonTokenClasses, TSTokenClasses } from './types';
+import { BashTokenClasses, CSSTokenClasses, JsonTokenClasses, MarkdownTokenClasses, TSTokenClasses } from './types';
 export declare function formatBash(codeLines: string[], customTokenClasses?: BashTokenClasses): import("react/jsx-runtime").JSX.Element[];
 export declare function formatCSS(codeLines: string[], customTokenClasses?: CSSTokenClasses): import("react/jsx-runtime").JSX.Element[];
 export declare function formatJson(codeLines: string[], customTokenClasses?: JsonTokenClasses): import("react/jsx-runtime").JSX.Element[];
 export declare function formatTypescript(codeLines: string[], customTokenClasses?: TSTokenClasses): import("react/jsx-runtime").JSX.Element[];
+export declare function formatMarkdown(codeLines: string[], customTokenClasses?: MarkdownTokenClasses): import("react/jsx-runtime").JSX.Element[];

package/dist/src/components/code-block/index.d.ts

@@ -1,2 +1,2 @@
 export { CodeBlock, type CodeBlockLanguages, type CodeBlockProps } from './CodeBlock';
-export type { JsonTokenClasses as CodeBlockJsonTokenClasses, TokenClasses as CodeBlockTokenClasses, TSTokenClasses as CodeBlockTSTokenClasses } from './types';
+export type { JsonTokenClasses as CodeBlockJsonTokenClasses, MarkdownTokenClasses as CodeBlockMarkdownTokenClasses, TokenClasses as CodeBlockTokenClasses, TSTokenClasses as CodeBlockTSTokenClasses } from './types';

package/dist/src/components/code-block/tokenize.d.ts

@@ -1,4 +1,4 @@
-import { BashTokenType, CSSTokenClasses, JsonTokenClasses, TSTokenType } from './types';
+import { BashTokenType, CSSTokenClasses, JsonTokenClasses, MarkdownTokenType, TSTokenType } from './types';
 export declare function tokenizeBash(codeLine: string): {
     text: string;
     type: BashTokenType;
@@ -14,7 +14,11 @@ export declare function tokenizeJSON(codeLine: string): {
     text: string;
     type: keyof JsonTokenClasses;
 }[];
-export declare function tokenizeTypeScript(codeLine: string, inheritedJSXContext?: boolean, inheritedBraceDepth?: number): {
+export declare function tokenizeTypeScript(codeLine: string, inheritedJSXContext?: boolean, inheritedBraceDepth?: number, inTemplateLiteral?: boolean): {
     text: string;
     type: TSTokenType;
 }[];
+export declare function tokenizeMarkdown(codeLine: string): {
+    text: string;
+    type: MarkdownTokenType;
+}[];

package/dist/src/components/code-block/types.d.ts

@@ -33,6 +33,29 @@ export interface JsonTokenClasses {
     plain?: string;
 }
 export type JsonTokenType = keyof JsonTokenClasses;
+export interface MarkdownTokenClasses {
+    heading?: string;
+    'heading-hash'?: string;
+    bold?: string;
+    italic?: string;
+    'bold-marker'?: string;
+    'italic-marker'?: string;
+    link?: string;
+    'link-text'?: string;
+    'link-url'?: string;
+    'link-bracket'?: string;
+    'link-paren'?: string;
+    code?: string;
+    'code-marker'?: string;
+    'code-block'?: string;
+    'code-block-marker'?: string;
+    'list-marker'?: string;
+    'list-item'?: string;
+    blockquote?: string;
+    'blockquote-marker'?: string;
+    plain?: string;
+}
+export type MarkdownTokenType = keyof MarkdownTokenClasses;
 export interface TSTokenClasses {
     keyword?: string;
     type?: string;
@@ -51,4 +74,4 @@ export interface TSTokenClasses {
     plain?: string;
 }
 export type TSTokenType = keyof TSTokenClasses;
-export type TokenClasses = TSTokenClasses | JsonTokenClasses | BashTokenClasses | CSSTokenClasses;
+export type TokenClasses = TSTokenClasses | JsonTokenClasses | BashTokenClasses | CSSTokenClasses | MarkdownTokenClasses;

package/dist/src/components/disclosure/Disclosure.d.ts

@@ -1,22 +1,43 @@
 import React from 'react';
 export interface DisclosureProps {
-    /** The content to show/hide when disclosure is open.*/
+    /** The content to show/hide */
     children: React.ReactNode;
-    /** The label for the disclosure button. */
+    /** The label text or content for the disclosure button */
     label: React.ReactNode;
-    /** Controls the open state (uncontrolled if not provided).*/
+    /** Controls the open state (uncontrolled if not provided) */
     isOpen?: boolean;
-    /**Called when disclosure is toggled.*/
+    /** Called when disclosure is toggled */
     onToggle?: (open: boolean) => void;
-    /** Optional id for accessibility and testing. */
+    /** Optional id for accessibility and testing */
     id?: string;
-    /** Optional ref to the root div. */
+    /** Optional ref to the root div */
     ref?: React.Ref<HTMLDivElement>;
-    /** Disabled state for the button. */
+    /** Whether the disclosure is disabled */
     disabled?: boolean;
-    /** Optional class name for the root div. */
+    /** Additional CSS classes to apply to the disclosure */
     className?: string;
-    /** Optional class name for the button. */
+    /** Additional CSS classes to apply to the disclosure button */
     buttonClassName?: string;
 }
+/**
+ * A simple disclosure component for showing and hiding content sections.
+ * Provides keyboard navigation and accessibility features with expand/collapse functionality.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled disclosure
+ * <Disclosure label="Show Details">
+ *   <p>Hidden content that will be revealed when expanded.</p>
+ * </Disclosure>
+ *
+ * // Controlled disclosure
+ * <Disclosure
+ *   label="Advanced Options"
+ *   isOpen={showAdvanced}
+ *   onToggle={setShowAdvanced}
+ * >
+ *   <div>Advanced configuration options...</div>
+ * </Disclosure>
+ * ```
+ */
 export declare function Disclosure({ children, label, isOpen: open, onToggle, id, ref, disabled, className, buttonClassName, }: DisclosureProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/drawer/Drawer.d.ts

@@ -1,27 +1,28 @@
 import React from 'react';
 export interface DrawerProps {
+    /** Reference to the drawer element */
     ref?: React.Ref<HTMLDivElement>;
     /** Unique identifier for the drawer */
     id?: string;
     /** Whether the drawer is open */
     isOpen: boolean;
-    /** Callback when drawer should close */
+    /** Callback fired when the drawer should close */
     onClose: () => void;
-    /** Drawer title - can be a string or React node */
+    /** Optional title for the drawer header */
     title?: React.ReactNode;
-    /** Drawer content */
+    /** The content to display inside the drawer */
     children: React.ReactNode;
-    /** Drawer footer - can be a string or React node */
+    /** Optional footer content for the drawer */
     footer?: React.ReactNode;
-    /** Additional CSS classes for the drawer */
+    /** Additional CSS classes to apply to the drawer */
     className?: string;
-    /** Additional CSS classes for the overlay */
+    /** Additional CSS classes to apply to the overlay */
     overlayClassName?: string;
-    /** Whether to show the close button */
+    /** Whether to show the close button in the top-right corner */
     showCloseButton?: boolean;
     /** Whether to disable closing when clicking the overlay */
     disableCloseOnOverlayClick?: boolean;
-    /** Whether to enable drag gestures on the notch */
+    /** Whether to enable drag gestures on the notch for closing */
     enableDragGestures?: boolean;
     /** ARIA labelledby attribute */
     ariaLabelledBy?: string;
@@ -29,7 +30,31 @@ export interface DrawerProps {
     ariaDescribedBy?: string;
 }
 /**
- * Drawer component that slides in from the bottom of the screen.
- * Provides an overlay and slide-in animation for bottom sheet content display.
+ * A bottom-slide drawer component for mobile-friendly overlays and forms.
+ * Includes drag gestures, focus management, and smooth animations.
+ *
+ * @example
+ * ```tsx
+ * // Basic drawer
+ * <Drawer
+ *   isOpen={showDrawer}
+ *   onClose={() => setShowDrawer(false)}
+ *   title="Settings"
+ * >
+ *   <p>Drawer content goes here</p>
+ * </Drawer>
+ *
+ * // Full-featured drawer
+ * <Drawer
+ *   isOpen={showForm}
+ *   onClose={handleClose}
+ *   title="Edit Profile"
+ *   footer={<Button onClick={save}>Save Changes</Button>}
+ *   enableDragGestures
+ *   showCloseButton
+ * >
+ *   <ProfileForm />
+ * </Drawer>
+ * ```
  */
 export declare function Drawer({ ref, id, isOpen, onClose, title, children, footer, className, overlayClassName, showCloseButton, disableCloseOnOverlayClick, enableDragGestures, ariaLabelledBy, ariaDescribedBy, }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/dropdown-menu/DropdownMenu.d.ts

@@ -6,4 +6,38 @@ export interface DropdownMenuProps extends Omit<PopoverProps, 'children'> {
     /** Callback when an item is selected, returns the value of the selected item */
     onItemSelect?: (value: string) => void;
 }
+/**
+ * A fully-featured dropdown menu with keyboard navigation, nested submenus, and flexible item types.
+ * Supports separators, groups, and custom content with accessibility features.
+ *
+ * @example
+ * ```tsx
+ * // Basic dropdown menu
+ * <DropdownMenu
+ *   trigger={<Button>Options</Button>}
+ *   items={[
+ *     { type: 'item', label: 'Edit', value: 'edit' },
+ *     { type: 'item', label: 'Delete', value: 'delete' },
+ *     { type: 'separator' }
+ *   ]}
+ *   onItemSelect={(value) => handleAction(value)}
+ * />
+ *
+ * // With nested submenus
+ * <DropdownMenu
+ *   trigger={<Button>More Actions</Button>}
+ *   items={[
+ *     {
+ *       type: 'submenu',
+ *       label: 'Export',
+ *       items: [
+ *         { type: 'item', label: 'PDF', value: 'pdf' },
+ *         { type: 'item', label: 'CSV', value: 'csv' }
+ *       ]
+ *     }
+ *   ]}
+ *   placement="bottom-end"
+ * />
+ * ```
+ */
 export declare function DropdownMenu({ id, items, onItemSelect, trigger, isOpen: open, placement, alignment, onOpenChange, className, ...popoverProps }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/dynamic-list/DynamicList.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { type DynamicListItem } from './hooks';
+import { DynamicListSize } from './variants';
+export type DynamicListMarkerType = 'disc' | 'dash' | 'decimal' | React.ReactElement;
+export interface DynamicListProps<T extends object> {
+    /** Items to display in the list */
+    items?: DynamicListItem<T>[];
+    /** Size variant */
+    size?: DynamicListSize;
+    /** Optional ID for the component */
+    id?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Reference to the list container element */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Whether items can be added */
+    allowAdd?: boolean;
+    /** Whether items can be deleted */
+    allowDelete?: boolean;
+    /** Whether items can be reordered */
+    allowReorder?: boolean;
+    /** Placeholder text for new items */
+    addPlaceholder?: string;
+    /** Callback when items change */
+    onItemsChange?: (items: DynamicListItem<T>[]) => void;
+    /** Custom render function for items */
+    renderItem?: (item: DynamicListItem<T>, index: number) => React.ReactNode;
+    /** Marker type for list items */
+    marker?: DynamicListMarkerType;
+    /** Custom item renderer function (alternative name for renderItem) */
+    itemRenderer?: (item: DynamicListItem<T>, index: number) => React.ReactNode;
+    /** Whether to show dividers between items */
+    showDividers?: boolean;
+    /** Whether to always show reorder buttons (if allowReorder is true) */
+    showReorderButtons?: boolean;
+    /** Optional title for the list */
+    title?: string | React.ReactElement;
+    /** Whether to truncate long text in items (default: true) */
+    truncateText?: boolean;
+}
+/**
+ * An interactive list component with add, delete, and reorder functionality.
+ * Supports drag-and-drop reordering, keyboard navigation, and custom item rendering.
+ *
+ * @example
+ * ```tsx
+ * // Basic dynamic list
+ * <DynamicList
+ *   items={[
+ *     { id: '1', content: 'First item' },
+ *     { id: '2', content: 'Second item' }
+ *   ]}
+ *   onItemsChange={(items) => setListItems(items)}
+ *   title="My Tasks"
+ * />
+ *
+ * // Custom rendering with limited functionality
+ * <DynamicList
+ *   items={todos}
+ *   renderItem={(item, index) => (
+ *     <TodoItem {...item} onToggle={() => toggleTodo(item.id)} />
+ *   )}
+ *   allowDelete={false}
+ *   marker="decimal"
+ * />
+ * ```
+ */
+export declare function DynamicList<T extends object>({ items: initialItems, size, id, className, ref, allowAdd, allowDelete, allowReorder, addPlaceholder, onItemsChange, renderItem, marker, itemRenderer, showDividers, showReorderButtons, title, truncateText, }: DynamicListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/dynamic-list/hooks.d.ts

@@ -0,0 +1,19 @@
+export type DynamicListItem<T extends object> = T & {
+    id: string;
+    content: string;
+};
+export declare function useDynamicList<T extends object>(initialItems?: DynamicListItem<T>[]): {
+    items: DynamicListItem<T>[];
+    visualItems: DynamicListItem<T>[];
+    addItem: (content: string, extra?: Partial<T>) => DynamicListItem<T>;
+    deleteItem: (id: string) => void;
+    moveItem: (fromIndex: number, toIndex: number) => void;
+    moveItemUp: (index: number) => void;
+    moveItemDown: (index: number) => void;
+    draggedItem: DynamicListItem<T> | null;
+    draggedOverIndex: number | null;
+    handleDragStart: (item: DynamicListItem<T>, index: number) => void;
+    handleDragOver: (e: React.DragEvent, index: number) => void;
+    handleDragEnd: () => void;
+    handleDrop: (e: React.DragEvent) => void;
+};

package/dist/src/components/dynamic-list/index.d.ts

@@ -0,0 +1,2 @@
+export { DynamicList, type DynamicListProps, type DynamicListMarkerType } from './DynamicList';
+export { type DynamicListItem } from './hooks';

package/dist/src/components/dynamic-list/markers.d.ts

@@ -0,0 +1,8 @@
+export declare function DiscMarker({ size, className }: {
+    size?: number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DashMarker({ size, className }: {
+    size?: number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/dynamic-list/variants.d.ts

@@ -0,0 +1,4 @@
+export type DynamicListSize = 'sm' | 'md' | 'lg';
+export declare const titleVariants: Record<DynamicListSize, string>;
+export declare const listVariants: Record<DynamicListSize, string>;
+export declare const iconSize: Record<DynamicListSize, number>;