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

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

@@ -5,16 +5,27 @@ declare const meta: {
     component: typeof Dropdown;
     parameters: {
         layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
     };
     tags: string[];
     argTypes: {
         align: {
             control: "select";
             options: string[];
+            description: string;
         };
         variant: {
             control: "select";
             options: string[];
+            description: string;
+        };
+        'aria-label': {
+            control: "text";
+            description: string;
         };
     };
 };
@@ -23,3 +34,5 @@ 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;

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

@@ -5,12 +5,34 @@ 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;
         };
     };
 };

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,12 @@
+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 Disabled: 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/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: any) => 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 (backward compatible)
  * <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,6 @@ 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 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,36 @@
+import type { FieldValues, Path, RegisterOptions } from 'react-hook-form';
+import type { ReactNode } from 'react';
+export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues> {
+    name: Path<TFieldValues>;
+    label?: string;
+    children: (props: {
+        name: string;
+        register: ReturnType<ReturnType<UseFormReturn<TFieldValues>['register']>>;
+        error?: string;
+        value?: any;
+        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/Rating/Rating.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+export type RatingSize = 'sm' | 'md' | 'lg';
+export type RatingVariant = 'filled' | 'outlined';
+export interface RatingProps {
+    value?: number;
+    defaultValue?: number;
+    max?: number;
+    size?: RatingSize;
+    variant?: RatingVariant;
+    readOnly?: boolean;
+    allowHalf?: boolean;
+    showValue?: boolean;
+    onChange?: (value: number) => void;
+    onHover?: (value: number) => void;
+    className?: string;
+    icon?: ReactNode;
+    emptyIcon?: ReactNode;
+}
+/**
+ * Rating Component
+ *
+ * A rating component for displaying and selecting ratings.
+ * Supports filled and outlined variants, half ratings, and read-only mode.
+ * Follows Atomic Design principles as a Molecule component.
+ *
+ * @example
+ * ```tsx
+ * <Rating value={4} max={5} onChange={(value) => console.log(value)} />
+ *
+ * <Rating value={3.5} readOnly showValue />
+ * ```
+ */
+export default function Rating({ value: controlledValue, defaultValue, max, size, variant, readOnly, allowHalf, showValue, onChange, onHover, className, icon, emptyIcon, }: RatingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Rating from './Rating';
+declare const meta: Meta<typeof Rating>;
+export default meta;
+type Story = StoryObj<typeof Rating>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const ReadOnly: Story;
+export declare const HalfRatings: Story;
+export declare const Sizes: Story;
+export declare const CustomMax: Story;
+export declare const Variants: Story;
+export declare const InContext: Story;

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

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

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

@@ -0,0 +1,2 @@
+export { default } from './Rating';
+export type { RatingProps, RatingSize, RatingVariant } from './Rating';

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

@@ -0,0 +1,24 @@
+import type { InputHTMLAttributes } from 'react';
+export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    onSearch?: (value: string) => void;
+    onClear?: () => void;
+    loading?: boolean;
+    showClearButton?: boolean;
+    debounceMs?: number;
+}
+/**
+ * SearchInput Component
+ *
+ * A search input component with icon, clear button, and loading state.
+ * Follows Atomic Design principles as a Molecule component.
+ *
+ * @example
+ * ```tsx
+ * <SearchInput
+ *   placeholder="Search..."
+ *   onSearch={(value) => console.log(value)}
+ * />
+ * ```
+ */
+declare const SearchInput: import("react").ForwardRefExoticComponent<SearchInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default SearchInput;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SearchInput from './SearchInput';
+declare const meta: Meta<typeof SearchInput>;
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+export declare const Default: Story;
+export declare const WithLoading: Story;
+export declare const WithoutClearButton: Story;
+export declare const WithDebounce: Story;
+export declare const InForm: Story;

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

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

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

@@ -0,0 +1,2 @@
+export { default } from './SearchInput';
+export type { SearchInputProps } from './SearchInput';

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

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

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

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'react';
+export interface TableAction<T extends Record<string, unknown> = Record<string, unknown>> {
+    label: string;
+    onClick: (row: T) => void;
+    variant?: 'default' | 'danger';
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}
+export interface TableActionsProps<T extends Record<string, unknown> = Record<string, unknown>> extends HTMLAttributes<HTMLDivElement> {
+    actions: TableAction<T>[];
+    row: T;
+    align?: 'left' | 'right';
+}
+/**
+ * TableActions Component
+ *
+ * Dropdown menu for row actions in tables.
+ * Follows Atomic Design principles as a Molecule component.
+ *
+ * @example
+ * ```tsx
+ * <TableActions
+ *   row={rowData}
+ *   actions={[
+ *     { label: 'Edit', onClick: (row) => handleEdit(row) },
+ *     { label: 'Delete', onClick: (row) => handleDelete(row), variant: 'danger' },
+ *   ]}
+ * />
+ * ```
+ */
+export default function TableActions<T extends Record<string, unknown> = Record<string, unknown>>({ actions, row, align, className, ...props }: TableActionsProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import TableActions from "./TableActions";
+declare const meta: Meta<typeof TableActions>;
+export declare const Default: StoryObj<typeof TableActions>;
+export declare const WithDisabledAction: StoryObj<typeof TableActions>;
+export declare const LeftAligned: StoryObj<typeof TableActions>;
+export default meta;

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

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

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

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+export type FilterType = 'text' | 'select' | 'date';
+export interface FilterConfig {
+    key: string;
+    label: string;
+    type: FilterType;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    placeholder?: string;
+}
+export type FilterValue = string | number | boolean | null | undefined;
+export interface TableFiltersProps extends HTMLAttributes<HTMLDivElement> {
+    filters: FilterConfig[];
+    onFilter: (filters: Record<string, FilterValue>) => void;
+    initialValues?: Record<string, FilterValue>;
+    showClearAll?: boolean;
+}
+/**
+ * TableFilters Component
+ *
+ * Filter controls for tables with support for text, select, and date filters.
+ * Follows Atomic Design principles as a Molecule component.
+ *
+ * @example
+ * ```tsx
+ * <TableFilters
+ *   filters={[
+ *     { key: 'status', label: 'Status', type: 'select', options: [...] },
+ *     { key: 'search', label: 'Search', type: 'text', placeholder: 'Search...' }
+ *   ]}
+ *   onFilter={(filters) => handleFilter(filters)}
+ * />
+ * ```
+ */
+export default function TableFilters({ filters, onFilter, initialValues, showClearAll, className, ...props }: TableFiltersProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import TableFilters from "./TableFilters";
+declare const meta: Meta<typeof TableFilters>;
+export declare const Default: StoryObj<typeof TableFilters>;
+export declare const WithInitialValues: StoryObj<typeof TableFilters>;
+export declare const WithDateFilter: StoryObj<typeof TableFilters>;
+export default meta;

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

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

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

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from 'react';
+export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    pageSizeOptions?: number[];
+    showPageSizeSelector?: boolean;
+    showPageInfo?: boolean;
+}
+/**
+ * TablePagination Component
+ *
+ * Pagination controls for tables with page navigation and page size selection.
+ * Follows Atomic Design principles as a Molecule component.
+ *
+ * @example
+ * ```tsx
+ * <TablePagination
+ *   page={1}
+ *   pageSize={10}
+ *   total={100}
+ *   onPageChange={(page) => setPage(page)}
+ *   onPageSizeChange={(size) => setPageSize(size)}
+ * />
+ * ```
+ */
+export default function TablePagination({ page, pageSize, total, onPageChange, onPageSizeChange, pageSizeOptions, showPageSizeSelector, showPageInfo, className, ...props }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import TablePagination from "./TablePagination";
+declare const meta: Meta<typeof TablePagination>;
+export declare const Default: StoryObj<typeof TablePagination>;
+export declare const WithoutPageSizeSelector: StoryObj<typeof TablePagination>;
+export declare const WithoutPageInfo: StoryObj<typeof TablePagination>;
+export declare const LargeDataset: StoryObj<typeof TablePagination>;
+export default meta;

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

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

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

@@ -0,0 +1,15 @@
+import React, { type ReactNode } from 'react';
+import { type TabsProviderProps } from './TabsProvider';
+import { TabsList } from './TabsList';
+import { TabsTrigger } from './TabsTrigger';
+import { TabsContent } from './TabsContent';
+export interface TabsProps extends Omit<TabsProviderProps, 'children'> {
+    children: ReactNode;
+}
+export interface TabsComponentType extends React.FC<TabsProps> {
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
+}
+declare const Tabs: TabsComponentType;
+export default Tabs;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Tabs from './Tabs';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Default: Story;
+export declare const Vertical: Story;
+export declare const ManualActivation: Story;
+export declare const WithDisabledTab: Story;
+export declare const Controlled: Story;

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

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

package/dist/ui/molecules/Tabs/TabsContent.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    children: ReactNode;
+    forceMount?: boolean;
+}
+/**
+ * TabsContent Component
+ *
+ * Content panel for a tab.
+ * Only renders when the tab is active (unless forceMount is true).
+ * Must be used within a Tabs component.
+ */
+export declare function TabsContent({ value, children, forceMount, className, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/molecules/Tabs/TabsContext.d.ts

@@ -0,0 +1,18 @@
+export interface TabsContextValue {
+    value: string;
+    onValueChange: (value: string) => void;
+    orientation?: 'horizontal' | 'vertical';
+    activationMode?: 'automatic' | 'manual';
+}
+declare const TabsContext: import("react").Context<TabsContextValue | undefined>;
+/**
+ * Hook to access Tabs context
+ *
+ * @throws Error if used outside of Tabs component
+ */
+export declare function useTabsContext(): TabsContextValue;
+/**
+ * Hook to access Tabs context (optional, returns undefined if not in Tabs)
+ */
+export declare function useTabsContextOptional(): TabsContextValue | undefined;
+export { TabsContext };

package/dist/ui/molecules/Tabs/TabsList.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes, ReactNode } from 'react';
+export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * TabsList Component
+ *
+ * Container for tab triggers.
+ * Manages keyboard navigation between tabs.
+ * Must be used within a Tabs component.
+ */
+export declare function TabsList({ children, className, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/Tabs/TabsProvider.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export interface TabsProviderProps {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: 'horizontal' | 'vertical';
+    activationMode?: 'automatic' | 'manual';
+    children: ReactNode;
+}
+/**
+ * TabsProvider Component
+ *
+ * Provides Tabs context to children.
+ * Manages active tab state and handles controlled/uncontrolled modes.
+ */
+export declare function TabsProvider({ defaultValue, value: controlledValue, onValueChange, orientation, activationMode, children, }: TabsProviderProps): import("react/jsx-runtime").JSX.Element;