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

package/README.md

@@ -111,14 +111,59 @@ Explore the live documentation and interactive components:
 
 [Storybook on GitHub Pages](https://fabiocaffarello.github.io/react-design-system)
 
+## Features
+
+### Accessibility
+
+- **WCAG 2.1 AA Compliance**: All components meet accessibility standards
+- **Keyboard Navigation**: Full keyboard support for all interactive components
+- **ARIA Attributes**: Proper ARIA labels, roles, and states
+- **Screen Reader Support**: Optimized for assistive technologies
+- **Focus Management**: Proper focus trapping and restoration
+
+### Testing
+
+- **High Test Coverage**: > 80% coverage for all components
+- **Accessibility Tests**: Automated a11y testing with @testing-library/jest-dom
+- **Storybook Tests**: Visual regression and interaction testing
+- **Edge Cases**: Comprehensive test coverage including error states
+
+### Documentation
+
+- **Storybook**: Interactive documentation with live examples
+- **MDX Docs**: Detailed documentation for complex components
+- **JSDoc**: Complete inline documentation
+- **Type Safety**: Full TypeScript support with strict types
+
+## Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run storybook` - Start Storybook
+- `npm run build-storybook` - Build static Storybook
+- `npm test` - Run tests
+- `npm run test:coverage` - Run tests with coverage report
+- `npm run test:watch` - Run tests in watch mode
+- `npm run lint` - Lint code
+- `npm run plop` - Generate new components
+
+## Quality Standards
+
+- **Type Safety**: Zero use of `any` (except where absolutely necessary)
+- **Test Coverage**: Minimum 80% coverage required
+- **Accessibility**: WCAG 2.1 AA compliance
+- **Code Quality**: ESLint + Prettier enforced
+- **Documentation**: All components documented in Storybook
+
 ## Roadmap
 
 - [x] Atomic Design structure
 - [x] Storybook integration
 - [x] Automated unit and story testing
 - [x] TailwindCSS theming
+- [x] Accessibility improvements (WCAG 2.1 AA)
+- [x] Comprehensive test coverage
+- [x] MDX documentation for complex components
 - [ ] Create Publish npm package cd step
-- [ ] Improve components design
-- [ ] New components (Cards, Modals, etc.)
 - [ ] Customizable themes and dark mode
-- [ ] Accessibility improvements
+- [ ] Performance optimizations (code splitting)

package/dist/docs/components/ComponentStatusTable.d.ts

@@ -0,0 +1,11 @@
+interface ComponentStatusTableProps {
+    components: Array<{
+        name: string;
+        status: string;
+        accessibility: string;
+        tests: string;
+        docs: boolean;
+    }>;
+}
+export declare function ComponentStatusTable({ components }: ComponentStatusTableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/atoms/Accordion/Accordion.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+export type AccordionType = 'single' | 'multiple';
+export interface AccordionItem {
+    id: string;
+    title: string;
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    type?: AccordionType;
+    defaultOpen?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    className?: string;
+}
+/**
+ * Accordion Component
+ *
+ * A collapsible content component that can display multiple items.
+ * Supports single and multiple selection modes.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <Accordion
+ *   type="single"
+ *   items={[
+ *     { id: '1', title: 'Item 1', content: 'Content 1' },
+ *     { id: '2', title: 'Item 2', content: 'Content 2' },
+ *   ]}
+ * />
+ * ```
+ */
+export default function Accordion({ items, type, defaultOpen, onValueChange, className, }: AccordionProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Accordion from './Accordion';
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+export declare const Default: Story;
+export declare const Multiple: Story;
+export declare const WithDefaultOpen: Story;
+export declare const WithDisabledItems: Story;
+export declare const RichContent: Story;
+export declare const LongContent: Story;

package/dist/ui/atoms/Accordion/Accordion.test.d.ts

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

package/dist/ui/atoms/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Accordion';
+export type { AccordionProps, AccordionItem, AccordionType } from './Accordion';

package/dist/ui/atoms/Avatar/Avatar.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, ReactNode } from 'react';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    src?: string;
+    alt?: string;
+    fallback?: string | ReactNode;
+    size?: AvatarSize;
+    variant?: 'circle' | 'square' | 'rounded';
+    'aria-label'?: string;
+}
+/**
+ * Avatar Component
+ *
+ * A versatile avatar component for displaying user profile images or initials.
+ * Supports fallback display when image fails to load or is not provided.
+ * Fully accessible with ARIA attributes.
+ *
+ * @example
+ * ```tsx
+ * // With image
+ * <Avatar src="/user.jpg" alt="John Doe" />
+ *
+ * // With fallback initials
+ * <Avatar fallback="JD" alt="John Doe" />
+ *
+ * // Custom size
+ * <Avatar src="/user.jpg" size="lg" />
+ * ```
+ */
+export default function Avatar({ src, alt, fallback, size, variant, 'aria-label': ariaLabel, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Avatar from './Avatar';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const Default: Story;
+export declare const WithImage: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+export declare const WithFallback: Story;
+export declare const ImageError: Story;
+export declare const Group: Story;
+export declare const GroupSpacing: Story;

package/dist/ui/atoms/Avatar/Avatar.test.d.ts

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

package/dist/ui/atoms/Avatar/AvatarGroup.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, ReactNode } from 'react';
+import { type AvatarProps } from './Avatar';
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    max?: number;
+    size?: AvatarProps['size'];
+    variant?: AvatarProps['variant'];
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+/**
+ * AvatarGroup Component
+ *
+ * Container for displaying multiple avatars in a group.
+ * Supports collapsing when there are too many avatars.
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup max={3}>
+ *   <Avatar src="/user1.jpg" alt="User 1" />
+ *   <Avatar src="/user2.jpg" alt="User 2" />
+ *   <Avatar src="/user3.jpg" alt="User 3" />
+ *   <Avatar src="/user4.jpg" alt="User 4" />
+ * </AvatarGroup>
+ * ```
+ */
+export declare function AvatarGroup({ children, max, size, variant, spacing, className, ...props }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Avatar/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Avatar Components
+ *
+ * Avatar component with fallback, sizes, and group support.
+ */
+export { default as Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize } from './Avatar';
+export { AvatarGroup } from './AvatarGroup';
+export type { AvatarGroupProps } from './AvatarGroup';

package/dist/ui/atoms/Badge/Badge.d.ts

@@ -1,18 +1,26 @@
-import type { HTMLAttributes } from "react";
-interface Props extends HTMLAttributes<HTMLSpanElement> {
-    variant?: "success" | "warning" | "error" | "info" | "neutral";
+import type { HTMLAttributes, ReactNode } from 'react';
+export type BadgeVariant = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'secondary';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeStyle = 'solid' | 'outline';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    style?: BadgeStyle;
+    children: ReactNode;
 }
 /**
  * Badge Component
  *
  * A versatile badge component for displaying status, priority, and other labels.
  * Follows Atomic Design principles as an Atom component.
+ * Uses tokens for consistent theming.
  *
  * @example
  * ```tsx
  * <Badge variant="success">Active</Badge>
- * <Badge variant="error">Critical</Badge>
+ * <Badge variant="error" size="lg">Critical</Badge>
+ * <Badge variant="info" style="outline">New</Badge>
  * ```
  */
-export default function Badge({ variant, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const Badge: import("react").NamedExoticComponent<BadgeProps>;
+export default Badge;

package/dist/ui/atoms/Badge/Badge.stories.d.ts

@@ -1,11 +1,10 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Badge from "./Badge";
+import type { Meta, StoryObj } from '@storybook/react';
+import Badge from './Badge';
 declare const meta: Meta<typeof Badge>;
-export declare const Success: StoryObj<typeof Badge>;
-export declare const Warning: StoryObj<typeof Badge>;
-export declare const Error: StoryObj<typeof Badge>;
-export declare const Info: StoryObj<typeof Badge>;
-export declare const Neutral: StoryObj<typeof Badge>;
-export declare const AllVariants: StoryObj<typeof Badge>;
-export declare const WithCustomContent: StoryObj<typeof Badge>;
 export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const Styles: Story;
+export declare const AllCombinations: Story;

package/dist/ui/atoms/BoxWrapper/BoxWrapper.d.ts

@@ -1,4 +1,4 @@
 import type { HTMLAttributes } from "react";
-type Props = HTMLAttributes<HTMLDivElement>;
-export default function BoxWrapper({ className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export interface BoxWrapperProps extends HTMLAttributes<HTMLDivElement> {
+}
+export default function BoxWrapper({ className, ...props }: BoxWrapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/BoxWrapper/BoxWrapper.test.d.ts

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

package/dist/ui/atoms/Button/Button.d.ts

@@ -1,29 +1,51 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-export type ButtonVariant = 'primary' | 'regular' | 'secondary' | 'error' | 'outline' | 'ghost';
+import type { ButtonHTMLAttributes, ReactNode, ElementType } from 'react';
+export type ButtonVariant = 'primary' | 'regular' | 'secondary' | 'error' | 'outline' | 'ghost' | 'iconOnly';
 export type ButtonSize = 'sm' | 'md' | 'lg';
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as'> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     isLoading?: boolean;
+    loadingText?: string;
+    loadingIcon?: ReactNode;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
+    fullWidth?: boolean;
+    as?: ElementType;
+    href?: string;
 }
 /**
  * Button Component
  *
- * A styled button component with variants and sizes.
+ * A styled button component with variants, sizes, and loading states.
  * Follows Atomic Design principles as an Atom component.
  * Uses Builder Pattern for class construction.
+ * Supports polymorphic `as` prop for rendering as different elements (Link, NextLink, etc.).
  *
  * @example
  * ```tsx
- * <Button
- *   variant="primary"
- *   size="md"
- *   onClick={handleClick}
- * >
+ * // Basic usage
+ * <Button variant="primary" size="md" onClick={handleClick}>
  *   Click me
  * </Button>
+ *
+ * // With icons
+ * <Button leftIcon={<Icon />} rightIcon={<Icon />}>
+ *   Action
+ * </Button>
+ *
+ * // Loading state
+ * <Button isLoading loadingText="Saving...">
+ *   Save
+ * </Button>
+ *
+ * // As Link
+ * <Button as={Link} href="/page">
+ *   Navigate
+ * </Button>
+ *
+ * // Icon only
+ * <Button variant="iconOnly" leftIcon={<Icon />} aria-label="Close" />
  * ```
  */
-export default function Button({ variant, size, isLoading, leftIcon, rightIcon, className, disabled, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/ui/atoms/Button/Button.stories.d.ts

@@ -8,6 +8,13 @@ export declare const Secondary: Story;
 export declare const Error: Story;
 export declare const Outline: Story;
 export declare const Ghost: Story;
+export declare const IconOnly: Story;
 export declare const Sizes: Story;
+export declare const WithIcons: Story;
 export declare const Loading: Story;
+export declare const LoadingWithText: Story;
 export declare const Disabled: Story;
+export declare const FullWidth: Story;
+export declare const AllVariants: Story;
+export declare const Accessibility: Story;
+export declare const KeyboardNavigation: Story;

package/dist/ui/atoms/Button/Button.test.d.ts

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

package/dist/ui/atoms/Checkbox/Checkbox.d.ts

@@ -3,6 +3,7 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     label?: ReactNode;
     error?: boolean;
     helperText?: string;
+    indeterminate?: boolean;
 }
 /**
  * Checkbox Component
@@ -21,4 +22,4 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
  * />
  * ```
  */
-export default function Checkbox({ id, label, error, helperText, className, disabled, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default function Checkbox({ id, label, error, helperText, className, disabled, indeterminate, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Collapsible/Collapsible.stories.d.ts

@@ -6,4 +6,6 @@ export declare const DefaultClosed: StoryObj<typeof Collapsible>;
 export declare const Controlled: StoryObj<typeof Collapsible>;
 export declare const WithStorage: StoryObj<typeof Collapsible>;
 export declare const Disabled: StoryObj<typeof Collapsible>;
+export declare const Accessibility: StoryObj<typeof Collapsible>;
+export declare const KeyboardNavigation: StoryObj<typeof Collapsible>;
 export default meta;

package/dist/ui/atoms/Info/Info.d.ts

@@ -1,6 +1,5 @@
 import type { HTMLAttributes } from "react";
-interface Props extends HTMLAttributes<HTMLDivElement> {
+export interface InfoProps extends HTMLAttributes<HTMLDivElement> {
     variant?: "info" | "warning" | "error";
 }
-export default function Info({ variant, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function Info({ variant, className, ...props }: InfoProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Info/Info.test.d.ts

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

package/dist/ui/atoms/Input/Input.d.ts

@@ -1,15 +1,23 @@
 import type { InputHTMLAttributes, ReactNode } from 'react';
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputVariant = 'default' | 'outlined' | 'filled';
+export type InputState = 'default' | 'error' | 'success';
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     label?: ReactNode;
     error?: boolean;
+    success?: boolean;
     helperText?: string;
-    size?: 'sm' | 'md' | 'lg';
-    variant?: 'default' | 'outlined' | 'filled';
+    size?: InputSize;
+    variant?: InputVariant;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    showClearButton?: boolean;
+    onClear?: () => void;
 }
 /**
  * Input Component
  *
- * A styled text input component with label and error support.
+ * A styled text input component with label, error/success states, icons, and clear button.
  * Follows Atomic Design principles as an Atom component.
  * Uses Composite Pattern when combined with Label and ErrorMessage.
  *
@@ -22,7 +30,9 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  *   placeholder="Enter your email"
  *   error={hasError}
  *   helperText={errorMessage}
+ *   leftIcon={<MailIcon />}
  * />
  * ```
  */
-export default function Input({ id, label, error, helperText, size, variant, className, disabled, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/ui/atoms/Input/Input.stories.d.ts

@@ -5,6 +5,12 @@ export default meta;
 type Story = StoryObj<typeof Input>;
 export declare const Default: Story;
 export declare const WithError: Story;
+export declare const WithSuccess: Story;
 export declare const Sizes: Story;
 export declare const Variants: Story;
+export declare const WithIcons: Story;
+export declare const WithClearButton: Story;
+export declare const Password: Story;
+export declare const PasswordWithIcon: Story;
 export declare const Disabled: Story;
+export declare const AllStates: Story;

package/dist/ui/atoms/Popover/Popover.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export interface PopoverProps {
+    trigger: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: PopoverPlacement;
+    showCloseButton?: boolean;
+    title?: string;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    className?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+}
+/**
+ * Popover Component
+ *
+ * A popover component that displays content in a floating panel.
+ * Supports positioning, portal rendering, and keyboard navigation.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <Popover
+ *   trigger={<Button>Open Popover</Button>}
+ *   title="Popover Title"
+ * >
+ *   <p>Popover content goes here</p>
+ * </Popover>
+ * ```
+ */
+export default function Popover({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, placement, showCloseButton, title, closeOnClickOutside, closeOnEscape, className, triggerClassName, contentClassName, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Popover/Popover.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Popover from './Popover';
+declare const meta: Meta<typeof Popover>;
+export default meta;
+type Story = StoryObj<typeof Popover>;
+export declare const Default: Story;
+export declare const WithTitle: Story;
+export declare const Placements: Story;
+export declare const RichContent: Story;
+export declare const Controlled: Story;
+export declare const WithoutCloseButton: Story;

package/dist/ui/atoms/Popover/Popover.test.d.ts

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

package/dist/ui/atoms/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Popover';
+export type { PopoverProps, PopoverPlacement } from './Popover';

package/dist/ui/atoms/Progress/Progress.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from 'react';
+import './Progress.css';
+export type ProgressVariant = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+export type ProgressSize = 'sm' | 'md' | 'lg';
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+    variant?: ProgressVariant;
+    size?: ProgressSize;
+    showLabel?: boolean;
+    label?: string;
+    'aria-label'?: string;
+}
+/**
+ * Progress Component
+ *
+ * A progress bar component for displaying progress or loading states.
+ * Supports both determinate (with value) and indeterminate (without value) modes.
+ * Fully accessible with ARIA attributes.
+ *
+ * @example
+ * ```tsx
+ * // Determinate progress
+ * <Progress value={75} variant="primary" />
+ *
+ * // Indeterminate progress
+ * <Progress variant="primary" />
+ *
+ * // With label
+ * <Progress value={50} showLabel label="Uploading..." />
+ * ```
+ */
+export default function Progress({ value, max, variant, size, showLabel, label, 'aria-label': ariaLabel, className, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Progress/Progress.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Progress from './Progress';
+declare const meta: Meta<typeof Progress>;
+export default meta;
+type Story = StoryObj<typeof Progress>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Indeterminate: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const Animated: Story;

package/dist/ui/atoms/Progress/Progress.test.d.ts

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

package/dist/ui/atoms/Select/Select.d.ts

@@ -1,23 +1,35 @@
-import type { SelectHTMLAttributes } from "react";
-interface Option {
+import type { SelectHTMLAttributes, ReactNode } from 'react';
+export type SelectSize = 'sm' | 'md' | 'lg';
+export interface SelectOption {
     value: string;
     label: string;
     disabled?: boolean;
 }
-interface Props extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"> {
-    options: Option[];
+export interface SelectOptionGroup {
+    label: string;
+    options: SelectOption[];
+}
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children' | 'size'> {
+    options: SelectOption[];
+    optionGroups?: SelectOptionGroup[];
     placeholder?: string;
+    label?: ReactNode;
     error?: boolean;
+    success?: boolean;
+    helperText?: string;
+    size?: SelectSize;
 }
 /**
  * Select Component
  *
  * A styled select dropdown component for forms.
  * Follows Atomic Design principles as an Atom component.
+ * Supports both flat options and option groups.
  *
  * @example
  * ```tsx
  * <Select
+ *   label="Choose option"
  *   options={[
  *     { value: "1", label: "Option 1" },
  *     { value: "2", label: "Option 2" }
@@ -26,5 +38,5 @@ interface Props extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"
  * />
  * ```
  */
-export default function Select({ options, placeholder, error, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+export default Select;

package/dist/ui/atoms/Select/Select.stories.d.ts

@@ -1,10 +1,13 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Select from "./Select";
+import type { Meta, StoryObj } from '@storybook/react';
+import Select from './Select';
 declare const meta: Meta<typeof Select>;
-export declare const Primary: StoryObj<typeof Select>;
-export declare const WithSelectedValue: StoryObj<typeof Select>;
-export declare const WithError: StoryObj<typeof Select>;
-export declare const WithDisabledOption: StoryObj<typeof Select>;
-export declare const StatusOptions: StoryObj<typeof Select>;
-export declare const PriorityOptions: StoryObj<typeof Select>;
 export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const WithError: Story;
+export declare const WithSuccess: Story;
+export declare const Sizes: Story;
+export declare const WithOptionGroups: Story;
+export declare const WithManyOptions: Story;
+export declare const Disabled: Story;
+export declare const AllStates: Story;