@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/dist/ui/molecules/Dropdown/Dropdown.stories.d.ts

@@ -5,16 +5,35 @@ declare const meta: {
     component: typeof Dropdown;
     parameters: {
         layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
     };
     tags: string[];
     argTypes: {
+        trigger: {
+            control: false;
+            description: string;
+        };
+        items: {
+            control: false;
+            description: string;
+        };
         align: {
             control: "select";
             options: string[];
+            description: string;
         };
         variant: {
             control: "select";
             options: string[];
+            description: string;
+        };
+        'aria-label': {
+            control: "text";
+            description: string;
         };
     };
 };
@@ -23,3 +42,17 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithDisabledItem: Story;
 export declare const AlignedLeft: Story;
+export declare const WithAriaLabel: Story;
+export declare const KeyboardNavigation: Story;
+export declare const WithManyItems: Story;
+export declare const WithActionFeedback: Story;
+export declare const AllVariants: Story;
+export declare const States: Story;
+export declare const WithEvents: Story;
+export declare const ClosedState: Story;
+export declare const OpenState: Story;
+export declare const LeftAlignedState: Story;
+export declare const RightAlignedState: Story;
+export declare const DefaultVariantState: Story;
+export declare const MinimalVariantState: Story;
+export declare const WithDisabledItemsState: Story;

package/dist/ui/molecules/EmptyState/EmptyState.stories.d.ts

@@ -5,12 +5,35 @@ declare const meta: {
     component: typeof EmptyState;
     parameters: {
         layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
     };
     tags: string[];
     argTypes: {
         variant: {
             control: "select";
             options: string[];
+            description: string;
+        };
+        title: {
+            control: "text";
+            description: string;
+        };
+        message: {
+            control: "text";
+            description: string;
+        };
+        actionLabel: {
+            control: "text";
+            description: string;
+        };
+        onAction: {
+            action: string;
+            description: string;
+            category: string;
         };
     };
 };
@@ -19,3 +42,8 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithAction: Story;
 export declare const WithIllustration: Story;
+export declare const DifferentIllustrations: Story;
+export declare const WithEvents: Story;
+export declare const DefaultState: Story;
+export declare const WithActionState: Story;
+export declare const WithIllustrationState: Story;

package/dist/ui/molecules/FileUpload/FileUpload.d.ts

@@ -0,0 +1,37 @@
+export interface FileUploadFile {
+    file: File;
+    id: string;
+    preview?: string;
+    progress?: number;
+    error?: string;
+}
+export interface FileUploadProps {
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    onFilesChange?: (files: FileUploadFile[]) => void;
+    onFileRemove?: (fileId: string) => void;
+    showPreview?: boolean;
+    showProgress?: boolean;
+    disabled?: boolean;
+    className?: string;
+    label?: string;
+    description?: string;
+}
+/**
+ * FileUpload Component
+ *
+ * A file upload component with drag and drop, preview, validation, and progress.
+ * Follows Atomic Design principles as a Molecule component.
+ *
+ * @example
+ * ```tsx
+ * <FileUpload
+ *   accept="image/*"
+ *   maxSize={5 * 1024 * 1024} // 5MB
+ *   onFilesChange={(files) => console.log(files)}
+ * />
+ * ```
+ */
+export default function FileUpload({ accept, multiple, maxSize, maxFiles, onFilesChange, onFileRemove, showPreview, showProgress, disabled, className, label, description, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/FileUpload/FileUpload.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import FileUpload from './FileUpload';
+declare const meta: Meta<typeof FileUpload>;
+export default meta;
+type Story = StoryObj<typeof FileUpload>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const ImageUpload: Story;
+export declare const MultipleFiles: Story;
+export declare const WithProgress: Story;
+export declare const WithValidation: Story;
+export declare const WithFileRemoval: Story;
+export declare const ImagePreview: Story;
+export declare const Disabled: Story;
+export declare const RealWorldUpload: Story;
+export declare const DragAndDrop: Story;
+export declare const WithEvents: Story;
+export declare const EmptyState: Story;
+export declare const WithFilesState: Story;
+export declare const DisabledState: Story;

package/dist/ui/molecules/FileUpload/FileUpload.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/molecules/FileUpload/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FileUpload';
+export type { FileUploadProps, FileUploadFile } from './FileUpload';

package/dist/ui/molecules/Flow/CustomEdge.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type EdgeProps } from '@xyflow/react';
+import type { FlowEdgeData } from '../../organisms/Flow/FlowTypes';
+/**
+ * CustomEdge Component
+ *
+ * Custom edge component that follows the design system.
+ * Uses BaseEdge from React Flow and adds design system styling.
+ * Uses React.memo for performance optimization.
+ */
+export type CustomEdgeProps = EdgeProps<FlowEdgeData>;
+export declare const CustomEdge: React.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, selected, style, markerEnd, markerStart, ...props }: CustomEdgeProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/ui/molecules/Flow/CustomNode.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type NodeProps } from '@xyflow/react';
+import type { FlowNodeData } from '../../organisms/Flow/FlowTypes';
+/**
+ * CustomNode Component
+ *
+ * Custom node component that follows the design system.
+ * Composes atoms (FlowNodeWrapper, FlowHandle) into a reusable node.
+ * Uses React.memo for performance optimization.
+ */
+export type CustomNodeProps = NodeProps<FlowNodeData>;
+export declare const CustomNode: React.MemoExoticComponent<({ data, selected, }: CustomNodeProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/ui/molecules/Flow/CustomNode.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/molecules/Flow/FlowNodeContent.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { FlowNodeData, NodeHeaderProps, NodeBodyProps, NodeFooterProps } from '../../organisms/Flow/FlowTypes';
+/**
+ * FlowNodeContent Component
+ *
+ * Content wrapper for nodes with support for render props pattern.
+ * Single Responsibility: Structure node content with header, body, footer.
+ */
+export interface FlowNodeContentProps {
+    children?: ReactNode;
+    renderHeader?: (data: FlowNodeData) => ReactNode;
+    renderBody?: (data: FlowNodeData) => ReactNode;
+    renderFooter?: (data: FlowNodeData) => ReactNode;
+    HeaderComponent?: React.ComponentType<NodeHeaderProps>;
+    BodyComponent?: React.ComponentType<NodeBodyProps>;
+    FooterComponent?: React.ComponentType<NodeFooterProps>;
+    headerSlot?: ReactNode;
+    bodySlot?: ReactNode;
+    footerSlot?: ReactNode;
+}
+export declare function FlowNodeContent({ children, renderHeader, renderBody, renderFooter, HeaderComponent, BodyComponent, FooterComponent, headerSlot, bodySlot, footerSlot, }: FlowNodeContentProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/molecules/Flow/FlowNodeToolbar.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type NodeToolbarProps as ReactFlowNodeToolbarProps } from '@xyflow/react';
+/**
+ * FlowNodeToolbar Component
+ *
+ * Wrapper for React Flow's NodeToolbar with design system components.
+ * Single Responsibility: Render toolbar with design system Button components.
+ */
+export interface FlowNodeToolbarProps extends Omit<ReactFlowNodeToolbarProps, 'children'> {
+    actions?: Array<{
+        label: string;
+        icon?: React.ReactNode;
+        onClick: () => void;
+        variant?: 'primary' | 'regular' | 'secondary' | 'error' | 'outline' | 'ghost';
+    }>;
+    children?: React.ReactNode;
+}
+export declare function FlowNodeToolbar({ actions, children, ...props }: FlowNodeToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/Flow/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Flow Molecules
+ *
+ * Composed components that combine atoms into reusable molecules.
+ */
+export { CustomNode, type CustomNodeProps } from './CustomNode';
+export { CustomEdge, type CustomEdgeProps } from './CustomEdge';
+export { FlowNodeToolbar, type FlowNodeToolbarProps } from './FlowNodeToolbar';
+export { FlowNodeContent, type FlowNodeContentProps } from './FlowNodeContent';

package/dist/ui/molecules/Form/Form.d.ts

@@ -1,24 +1,49 @@
 import type { FormHTMLAttributes, ReactNode } from "react";
-interface Props extends FormHTMLAttributes<HTMLFormElement> {
+import type { FieldValues, UseFormReturn } from 'react-hook-form';
+interface SimpleFormProps extends FormHTMLAttributes<HTMLFormElement> {
     children: ReactNode;
     onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
     loading?: boolean;
     error?: string | null;
     success?: string | null;
+    form?: never;
 }
+interface ReactHookFormProps<TFieldValues extends FieldValues = FieldValues> extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+    children: ReactNode;
+    form: UseFormReturn<TFieldValues>;
+    onSubmit: (data: TFieldValues) => void | Promise<void>;
+    loading?: boolean;
+    error?: string | null;
+    success?: string | null;
+    onSubmitError?: (errors: unknown) => void;
+}
+type FormProps<TFieldValues extends FieldValues = FieldValues> = SimpleFormProps | ReactHookFormProps<TFieldValues>;
 /**
  * Form Component
  *
- * A wrapper component for forms with validation states and layout.
- * Follows Atomic Design principles as a Molecule component.
+ * A flexible form component that supports both simple forms and react-hook-form integration.
  *
  * @example
  * ```tsx
+ * // Simple form
  * <Form onSubmit={handleSubmit} loading={isSubmitting}>
  *   <Input name="email" />
  *   <Button type="submit">Submit</Button>
  * </Form>
+ *
+ * // With react-hook-form
+ * const form = useForm({ resolver: zodResolver(schema) });
+ * <Form form={form} onSubmit={handleSubmit}>
+ *   <FormField name="email">
+ *     {({ register, error }) => (
+ *       <>
+ *         <Input {...register('email')} />
+ *         {error && <ErrorMessage>{error}</ErrorMessage>}
+ *       </>
+ *     )}
+ *   </FormField>
+ * </Form>
  * ```
  */
-export default function Form({ children, onSubmit, loading, error, success, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Form<TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, loading, error, success, className, ...props }: FormProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/molecules/Form/Form.stories.d.ts

@@ -6,4 +6,15 @@ export declare const WithError: StoryObj<typeof Form>;
 export declare const WithSuccess: StoryObj<typeof Form>;
 export declare const Loading: StoryObj<typeof Form>;
 export declare const CompleteForm: StoryObj<typeof Form>;
+export declare const RegistrationForm: StoryObj<typeof Form>;
+export declare const ContactForm: StoryObj<typeof Form>;
+export declare const MultipleErrors: StoryObj<typeof Form>;
+export declare const Accessibility: StoryObj<typeof Form>;
+export declare const WithReactHookForm: StoryObj<typeof Form>;
+export declare const ReactHookFormWithComplexValidation: StoryObj<typeof Form>;
+export declare const WithEvents: StoryObj<typeof Form>;
+export declare const DefaultState: StoryObj<typeof Form>;
+export declare const LoadingState: StoryObj<typeof Form>;
+export declare const ErrorState: StoryObj<typeof Form>;
+export declare const SuccessState: StoryObj<typeof Form>;
 export default meta;

package/dist/ui/molecules/Form/FormContext.d.ts

@@ -0,0 +1,17 @@
+import type { FieldValues, UseFormReturn } from 'react-hook-form';
+export interface FormContextValue<TFieldValues extends FieldValues = FieldValues> {
+    form?: UseFormReturn<TFieldValues>;
+    loading?: boolean;
+}
+declare const FormContext: import("react").Context<FormContextValue<FieldValues> | undefined>;
+/**
+ * Hook to access Form context
+ *
+ * @throws Error if used outside of Form component with react-hook-form
+ */
+export declare function useFormContext<TFieldValues extends FieldValues = FieldValues>(): FormContextValue<TFieldValues>;
+/**
+ * Hook to access Form context (optional, returns undefined if not in Form)
+ */
+export declare function useFormContextOptional<TFieldValues extends FieldValues = FieldValues>(): FormContextValue<TFieldValues> | undefined;
+export { FormContext };

package/dist/ui/molecules/Form/FormField.d.ts

@@ -0,0 +1,37 @@
+import type { FieldValues, Path, RegisterOptions } from 'react-hook-form';
+import type { ReactNode } from 'react';
+import type { UseFormReturn } from 'react-hook-form';
+export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues> {
+    name: Path<TFieldValues>;
+    label?: string;
+    children: (props: {
+        name: string;
+        register: (fieldName: Path<TFieldValues>) => ReturnType<UseFormReturn<TFieldValues>['register']>;
+        error?: string;
+        value?: unknown;
+        onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+        onBlur?: () => void;
+    }) => ReactNode;
+    rules?: RegisterOptions<TFieldValues>;
+    className?: string;
+}
+/**
+ * FormField Component
+ *
+ * A wrapper component for form fields that integrates with react-hook-form.
+ * Provides register, error, and validation state to children.
+ *
+ * @example
+ * ```tsx
+ * <FormField name="email" label="Email">
+ *   {({ register, error }) => (
+ *     <>
+ *       <Label htmlFor="email">Email</Label>
+ *       <Input id="email" {...register('email')} />
+ *       {error && <ErrorMessage>{error}</ErrorMessage>}
+ *     </>
+ *   )}
+ * </FormField>
+ * ```
+ */
+export declare function FormField<TFieldValues extends FieldValues = FieldValues>({ name, label, children, rules, className, }: FormFieldProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/Form/FormProvider.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { FieldValues, UseFormReturn } from 'react-hook-form';
+export interface FormProviderProps<TFieldValues extends FieldValues = FieldValues> {
+    form?: UseFormReturn<TFieldValues>;
+    loading?: boolean;
+    children: ReactNode;
+}
+/**
+ * FormProvider Component
+ *
+ * Provides react-hook-form context to form children.
+ * Used internally by Form component when react-hook-form is integrated.
+ */
+export declare function FormProvider<TFieldValues extends FieldValues = FieldValues>({ form, loading, children, }: FormProviderProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/Form/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Form Components
+ *
+ * Form components with optional react-hook-form and Zod integration.
+ */
+export { default as Form } from './Form';
+export { FormContext, useFormContext, useFormContextOptional } from './FormContext';
+export type { FormContextValue } from './FormContext';
+export { FormProvider } from './FormProvider';
+export type { FormProviderProps } from './FormProvider';
+export { FormField } from './FormField';
+export type { FormFieldProps } from './FormField';
+export { useFormFieldArray } from './useFormFieldArray';

package/dist/ui/molecules/Form/useFormFieldArray.d.ts

@@ -0,0 +1,28 @@
+import type { FieldValues, Path, UseFieldArrayProps } from 'react-hook-form';
+/**
+ * Hook for managing field arrays in forms
+ *
+ * Wrapper around react-hook-form's useFieldArray that integrates with Form context.
+ *
+ * @example
+ * ```tsx
+ * const { fields, append, remove } = useFormFieldArray({
+ *   name: 'items',
+ * });
+ *
+ * return (
+ *   <>
+ *     {fields.map((field, index) => (
+ *       <div key={field.id}>
+ *         <FormField name={`items.${index}.name`}>
+ *           {({ register }) => <Input {...register(`items.${index}.name`)} />}
+ *         </FormField>
+ *         <Button onClick={() => remove(index)}>Remove</Button>
+ *       </div>
+ *     ))}
+ *     <Button onClick={() => append({ name: '' })}>Add Item</Button>
+ *   </>
+ * );
+ * ```
+ */
+export declare function useFormFieldArray<TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends Path<TFieldValues> = Path<TFieldValues>>(props: Omit<UseFieldArrayProps<TFieldValues, TFieldArrayName>, 'control'>): import("react-hook-form").UseFieldArrayReturn<TFieldValues, TFieldArrayName, "id">;

package/dist/ui/molecules/InputWithLabel/InputWithLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/molecules/Menu/Menu.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react';
+import MenuTrigger from './MenuTrigger';
+import MenuContent from './MenuContent';
+import MenuItem from './MenuItem';
+import MenuSeparator from './MenuSeparator';
+export type MenuPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface MenuProps {
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: MenuPlacement;
+}
+/**
+ * Menu Component
+ *
+ * A dropdown menu component with keyboard navigation and portal rendering.
+ * Follows Atomic Design principles as an Atom component.
+ * Uses Compound Component pattern.
+ *
+ * @example
+ * ```tsx
+ * <Menu>
+ *   <MenuTrigger>
+ *     <Button>Open Menu</Button>
+ *   </MenuTrigger>
+ *   <MenuContent>
+ *     <MenuItem onClick={handleClick}>Item 1</MenuItem>
+ *     <MenuItem onClick={handleClick}>Item 2</MenuItem>
+ *     <MenuSeparator />
+ *     <MenuItem onClick={handleClick}>Item 3</MenuItem>
+ *   </MenuContent>
+ * </Menu>
+ * ```
+ */
+declare function Menu({ children, open: controlledOpen, defaultOpen, onOpenChange, placement, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Menu {
+    var Trigger: import("react").ForwardRefExoticComponent<import("./MenuTrigger").MenuTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+    var Content: typeof MenuContent;
+    var Item: import("react").ForwardRefExoticComponent<import("./MenuItem").MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    var Separator: typeof MenuSeparator;
+}
+export default Menu;
+export { MenuTrigger, MenuContent, MenuItem, MenuSeparator };

package/dist/ui/molecules/Menu/Menu.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Menu } from './index';
+declare const meta: Meta<typeof Menu>;
+export default meta;
+type Story = StoryObj<typeof Menu>;
+export declare const Default: Story;
+export declare const WithIcons: Story;
+export declare const WithSeparators: Story;
+export declare const WithDisabledItems: Story;
+export declare const WithSubmenu: Story;
+export declare const Placements: Story;
+export declare const TableActions: Story;
+export declare const Controlled: Story;
+export declare const WithOnClick: Story;
+export declare const WithEvents: Story;
+export declare const ClosedState: Story;
+export declare const OpenState: Story;

package/dist/ui/molecules/Menu/MenuContent.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export interface MenuContentProps {
+    children: ReactNode;
+    className?: string;
+    align?: 'start' | 'end' | 'center';
+}
+/**
+ * MenuContent Component
+ *
+ * The content container for menu items.
+ * Renders in a portal and positions itself relative to the trigger.
+ */
+export default function MenuContent({ children, className, align, }: MenuContentProps): import("react").ReactPortal | null;

package/dist/ui/molecules/Menu/MenuContext.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+interface MenuContextValue {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    closeMenu: () => void;
+    placement: 'top' | 'bottom' | 'left' | 'right';
+}
+export declare function MenuProvider({ children, value, }: {
+    children: ReactNode;
+    value: MenuContextValue;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useMenuContext(): MenuContextValue;
+export {};

package/dist/ui/molecules/Menu/MenuItem.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode, type HTMLAttributes } from 'react';
+export interface MenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    children: ReactNode;
+    icon?: ReactNode;
+    rightIcon?: ReactNode;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onSelect?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    hasSubmenu?: boolean;
+}
+/**
+ * MenuItem Component
+ *
+ * A single menu item. Supports icons, disabled state, and submenu indicator.
+ *
+ * @example
+ * ```tsx
+ * <MenuItem onClick={handleClick} icon={<Icon />}>
+ *   Menu Item
+ * </MenuItem>
+ * ```
+ */
+declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export default MenuItem;

package/dist/ui/molecules/Menu/MenuSeparator.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes } from 'react';
+export interface MenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * MenuSeparator Component
+ *
+ * A visual separator for menu items.
+ *
+ * @example
+ * ```tsx
+ * <MenuSeparator />
+ * ```
+ */
+export default function MenuSeparator({ className, ...props }: MenuSeparatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/Menu/MenuTrigger.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode, type HTMLAttributes } from 'react';
+export interface MenuTriggerProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    asChild?: boolean;
+}
+/**
+ * MenuTrigger Component
+ *
+ * The trigger element that opens/closes the menu.
+ * Must be used within a Menu component.
+ */
+declare const MenuTrigger: import("react").ForwardRefExoticComponent<MenuTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default MenuTrigger;

package/dist/ui/molecules/Menu/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Menu } from './Menu';
+export type { MenuProps, MenuPlacement } from './Menu';
+export { default as MenuTrigger } from './MenuTrigger';
+export type { MenuTriggerProps } from './MenuTrigger';
+export { default as MenuContent } from './MenuContent';
+export type { MenuContentProps } from './MenuContent';
+export { default as MenuItem } from './MenuItem';
+export type { MenuItemProps } from './MenuItem';
+export { default as MenuSeparator } from './MenuSeparator';
+export type { MenuSeparatorProps } from './MenuSeparator';

package/dist/ui/molecules/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,36 @@
+import type { AutocompleteOptionType } from '../Autocomplete/AutocompleteOption';
+export interface MultiSelectProps {
+    options: AutocompleteOptionType[];
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (values: string[]) => void;
+    onSelect?: (options: AutocompleteOptionType[]) => void;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    emptyMessage?: string;
+    maxSelected?: number;
+    showSelectAll?: boolean;
+    className?: string;
+    inputClassName?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * MultiSelect Component
+ *
+ * A multi-select component with chips for selected items.
+ * Supports keyboard navigation, loading states, and custom filtering.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect
+ *   options={[
+ *     { value: '1', label: 'Option 1' },
+ *     { value: '2', label: 'Option 2' },
+ *   ]}
+ *   onSelect={(options) => console.log(options)}
+ * />
+ * ```
+ */
+declare const MultiSelect: import("react").ForwardRefExoticComponent<MultiSelectProps & import("react").RefAttributes<HTMLInputElement>>;
+export default MultiSelect;

package/dist/ui/molecules/MultiSelect/MultiSelect.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MultiSelect from './MultiSelect';
+declare const meta: Meta<typeof MultiSelect>;
+export default meta;
+type Story = StoryObj<typeof MultiSelect>;
+export declare const Default: Story;
+export declare const WithInitialValues: Story;
+export declare const WithMaxSelected: Story;
+export declare const WithSelectAll: Story;
+export declare const Controlled: Story;
+export declare const WithSearch: Story;
+export declare const ManyOptions: Story;
+export declare const KeyboardNavigation: Story;
+export declare const RealTimeSearch: Story;
+export declare const EdgeCases: Story;
+export declare const SelectAllAndDeselectAll: Story;
+export declare const WithEvents: Story;
+export declare const EmptyState: Story;
+export declare const WithSelectionState: Story;
+export declare const DisabledState: Story;
+export declare const LoadingState: Story;