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

package/dist/ui/atoms/NavLink/hooks/useNavLink.d.ts

@@ -0,0 +1,64 @@
+/**
+ * useNavLink Hook
+ *
+ * Custom hook for NavLink active state detection and Next.js integration.
+ *
+ * @see RFC-001: NavLink Hook Strategy (APPROVED - Hybrid approach)
+ * @see RFC-002: Next.js Integration Strategy (APPROVED - Auto-detect)
+ * @see ADR-001: Active State Detection (ACCEPTED - Hybrid strategy)
+ */
+/**
+ * useNavLink Hook Options
+ */
+export interface UseNavLinkOptions {
+    /**
+     * URL of the navigation link
+     */
+    href: string;
+    /**
+     * Manual active state (has priority over auto-detect)
+     *
+     * Priority: manual active > auto-detect > false
+     * @see ADR-001
+     */
+    active?: boolean;
+}
+/**
+ * useNavLink Hook Result
+ */
+export interface UseNavLinkResult {
+    /**
+     * Whether the link is active
+     */
+    isActive: boolean;
+    /**
+     * Next.js Link component (if available)
+     */
+    NextLink?: React.ComponentType<{
+        href: string;
+        children?: React.ReactNode;
+        [key: string]: unknown;
+    }>;
+}
+/**
+ * useNavLink Hook
+ *
+ * Detects active state and provides Next.js Link integration.
+ *
+ * @param options - Hook options
+ * @returns Hook result with active state and Next.js Link
+ *
+ * @example
+ * ```tsx
+ * const { isActive, NextLink } = useNavLink({ href: '/home' });
+ *
+ * const LinkComponent = NextLink || 'a';
+ *
+ * return (
+ *   <LinkComponent href={href} className={isActive ? 'active' : ''}>
+ *     {children}
+ *   </LinkComponent>
+ * );
+ * ```
+ */
+export declare function useNavLink({ href: _href, active }: UseNavLinkOptions): UseNavLinkResult;

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

@@ -0,0 +1,10 @@
+/**
+ * NavLink Exports
+ *
+ * Exports for the NavLink component and related types.
+ */
+export { default as NavLink } from './NavLink';
+export { NavLink as NavLinkComponent } from './NavLink';
+export type { NavLinkProps, NavLinkVariant, NavLinkSize } from './types';
+export { useNavLink } from './hooks/useNavLink';
+export type { UseNavLinkOptions, UseNavLinkResult } from './hooks/useNavLink';

package/dist/ui/atoms/NavLink/types.d.ts

@@ -0,0 +1,60 @@
+/**
+ * NavLink Types
+ *
+ * Type definitions for the NavLink component.
+ */
+import type { ReactNode, ElementType, AnchorHTMLAttributes } from 'react';
+/**
+ * NavLink Variants
+ */
+export type NavLinkVariant = 'default' | 'underline' | 'background';
+/**
+ * NavLink Sizes
+ */
+export type NavLinkSize = 'sm' | 'md' | 'lg';
+/**
+ * NavLink Props
+ *
+ * @see ADR-001 for active state detection strategy
+ * @see RFC-002 for Next.js integration strategy
+ */
+export interface NavLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'as' | 'href'> {
+    /**
+     * URL of the navigation link
+     */
+    href: string;
+    /**
+     * Link content
+     */
+    children: ReactNode;
+    /**
+     * Manual active state (has priority over auto-detect)
+     *
+     * @see ADR-001: Active state detection strategy
+     */
+    active?: boolean;
+    /**
+     * Whether the link is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Visual variant
+     * @default 'default'
+     */
+    variant?: NavLinkVariant;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: NavLinkSize;
+    /**
+     * Custom element type (for Next.js Link integration)
+     *
+     * @see RFC-002: Next.js integration strategy
+     */
+    as?: ElementType;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}

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,15 @@
+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;
+}
+declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Progress;

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Progress from './Progress';
+declare const meta: Meta<typeof Progress>;
+export declare const DeterminateState: Story;
+export declare const IndeterminateState: Story;
+export declare const ZeroPercentState: Story;
+export declare const CompleteState: Story;
+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/Radio/Radio.d.ts

@@ -23,4 +23,5 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * />
  * ```
  */
-export default function Radio({ id, label, error, helperText, className, disabled, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+declare const Radio: import("react").NamedExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Radio;

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

@@ -8,3 +8,13 @@ export declare const Checked: Story;
 export declare const WithError: Story;
 export declare const Disabled: Story;
 export declare const RadioGroup: Story;
+export declare const Controlled: Story;
+export declare const Uncontrolled: Story;
+export declare const FunctionalGroup: Story;
+export declare const KeyboardNavigation: Story;
+export declare const AllStates: Story;
+export declare const WithEvents: Story;
+export declare const UnselectedState: Story;
+export declare const SelectedState: Story;
+export declare const DisabledStateStory: Story;
+export declare const FocusState: Story;

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").NamedExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+export default Select;

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

@@ -1,10 +1,24 @@
-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;
+export declare const Controlled: Story;
+export declare const Uncontrolled: Story;
+export declare const WithDisabledOptions: Story;
+export declare const KeyboardNavigation: Story;
+export declare const WithEvents: Story;
+export declare const ClosedState: Story;
+export declare const OpenState: Story;
+export declare const FocusState: Story;
+export declare const DisabledState: Story;
+export declare const ErrorState: Story;
+export declare const SuccessState: Story;

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

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react';
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+export type SeparatorVariant = 'solid' | 'dashed' | 'dotted';
+export interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
+    orientation?: SeparatorOrientation;
+    variant?: SeparatorVariant;
+}
+/**
+ * Separator Component
+ *
+ * A visual separator component for dividing content.
+ * Follows Atomic Design principles as an Atom component.
+ * Optimized with React.memo to prevent unnecessary re-renders.
+ *
+ * @example
+ * ```tsx
+ * <Separator />
+ *
+ * <Separator orientation="vertical" variant="dashed" />
+ * ```
+ */
+declare const Separator: import("react").NamedExoticComponent<SeparatorProps>;
+export default Separator;

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Separator from './Separator';
+declare const meta: Meta<typeof Separator>;
+export default meta;
+type Story = StoryObj<typeof Separator>;
+export declare const Default: Story;
+export declare const Horizontal: Story;
+export declare const Vertical: Story;
+export declare const Variants: Story;
+export declare const AllCombinations: Story;
+export declare const InContext: Story;
+export declare const HorizontalState: Story;
+export declare const VerticalState: Story;
+export declare const SolidState: Story;
+export declare const DashedState: Story;
+export declare const DottedState: Story;

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

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

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

@@ -0,0 +1,2 @@
+export { default } from './Separator';
+export type { SeparatorProps, SeparatorOrientation, SeparatorVariant } from './Separator';

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

@@ -17,4 +17,4 @@ export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
  * <Skeleton variant="text" lines={3} />
  * ```
  */
-export default function Skeleton({ variant, width, height, lines, className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export default function Skeleton({ variant, width, height, lines, className, 'aria-label': ariaLabel, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -5,12 +5,34 @@ declare const meta: {
     component: typeof Skeleton;
     parameters: {
         layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
     };
     tags: string[];
     argTypes: {
         variant: {
             control: "select";
             options: string[];
+            description: string;
+        };
+        width: {
+            control: "text";
+            description: string;
+        };
+        height: {
+            control: "text";
+            description: string;
+        };
+        lines: {
+            control: "number";
+            description: string;
+        };
+        'aria-label': {
+            control: "text";
+            description: string;
         };
     };
 };
@@ -22,3 +44,9 @@ export declare const Card: Story;
 export declare const List: Story;
 export declare const Circle: Story;
 export declare const CustomSize: Story;
+export declare const WithAriaLabel: Story;
+export declare const LoadingStates: Story;
+export declare const TextState: Story;
+export declare const CardState: Story;
+export declare const ListState: Story;
+export declare const CircleState: Story;

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

@@ -0,0 +1,45 @@
+import type { HTMLAttributes } from 'react';
+export type SliderVariant = 'single' | 'range';
+export type SliderSize = 'sm' | 'md' | 'lg';
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value?: number | [number, number];
+    defaultValue?: number | [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    variant?: SliderVariant;
+    size?: SliderSize;
+    disabled?: boolean;
+    showValue?: boolean;
+    marks?: number[];
+    onChange?: (value: number | [number, number]) => void;
+    onValueChange?: (value: number | [number, number]) => void;
+    label?: string;
+}
+/**
+ * Slider Component
+ *
+ * A range input component for selecting numeric values.
+ * Supports single and dual thumb (range) modes.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <Slider
+ *   value={50}
+ *   min={0}
+ *   max={100}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * <Slider
+ *   variant="range"
+ *   value={[20, 80]}
+ *   min={0}
+ *   max={100}
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Slider;

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Slider from './Slider';
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof Slider>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Range: Story;
+export declare const Sizes: Story;
+export declare const WithMarks: Story;
+export declare const WithSteps: Story;
+export declare const Disabled: Story;
+export declare const CustomRange: Story;
+export declare const Uncontrolled: Story;
+export declare const KeyboardNavigation: Story;
+export declare const RangeMode: Story;
+export declare const WithEvents: Story;
+export declare const DefaultState: Story;
+export declare const DisabledState: Story;
+export declare const SingleMode: Story;
+export declare const RangeModeState: Story;

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

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

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

@@ -0,0 +1,2 @@
+export { default } from './Slider';
+export type { SliderProps, SliderVariant, SliderSize } from './Slider';

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export type SpinnerVariant = 'primary' | 'secondary' | 'neutral';
+export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
+    size?: SpinnerSize;
+    variant?: SpinnerVariant;
+    label?: string;
+}
+declare const Spinner: import("react").NamedExoticComponent<SpinnerProps>;
+export default Spinner;

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Spinner from './Spinner';
+declare const meta: Meta<typeof Spinner>;
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+export declare const WithLabel: Story;
+export declare const AllCombinations: Story;
+export declare const Accessibility: Story;
+export declare const LoadingState: Story;
+export declare const SmallState: Story;
+export declare const MediumState: Story;
+export declare const LargeState: Story;

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

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

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

@@ -0,0 +1,28 @@
+import type { InputHTMLAttributes } from 'react';
+export type SwitchSize = 'sm' | 'md' | 'lg';
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    size?: SwitchSize;
+    label?: string;
+    description?: string;
+    error?: boolean;
+}
+/**
+ * Switch Component
+ *
+ * A toggle switch component for on/off states.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <Switch checked={isEnabled} onChange={(e) => setIsEnabled(e.target.checked)} />
+ *
+ * <Switch
+ *   label="Enable notifications"
+ *   description="Receive email notifications"
+ *   checked={notifications}
+ *   onChange={(e) => setNotifications(e.target.checked)}
+ * />
+ * ```
+ */
+declare const Switch: import("react").NamedExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Switch;

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Switch from './Switch';
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof Switch>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithDescription: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const Uncontrolled: Story;
+export declare const Accessibility: Story;
+export declare const WithEvents: Story;
+export declare const UncheckedState: Story;
+export declare const CheckedState: Story;
+export declare const DisabledState: Story;
+export declare const FocusState: Story;
+export declare const ErrorState: Story;

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

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

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

@@ -0,0 +1,2 @@
+export { default } from './Switch';
+export type { SwitchProps, SwitchSize } from './Switch';

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

@@ -1,11 +1,15 @@
 import type { ComponentPropsWithoutRef, ElementType, HTMLAttributes, JSX } from "react";
 interface Props<T extends ElementType> extends HTMLAttributes<JSX.IntrinsicElements> {
-    variant?: "heading" | "list" | "paragraph";
+    variant?: "heading" | "list" | "paragraph" | "body" | "bodySmall" | "bodyLarge" | "caption" | "label";
     as?: T;
     bold?: boolean;
     italic?: boolean;
     color?: string;
+    colorRole?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    colorShade?: 'light' | 'DEFAULT' | 'dark' | 'contrast';
 }
 type ReturnProps<P extends ElementType> = Props<P> & Omit<ComponentPropsWithoutRef<P>, keyof Props<P>>;
-export default function Text<T extends ElementType = "p">({ variant, bold, italic, className, as, color, ...rest }: ReturnProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const Text: <T extends ElementType = "p">(props: ReturnProps<T> & {
+    ref?: React.Ref<HTMLElement>;
+}) => JSX.Element;
+export default Text;

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

@@ -1,5 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import Text from "./Text";
 declare const meta: Meta<typeof Text>;
-export declare const Primary: StoryObj<typeof Text>;
 export default meta;
+type Story = StoryObj<typeof Text>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const SemanticElements: Story;
+export declare const Colors: Story;
+export declare const TypographyStyles: Story;
+export declare const Combined: Story;
+export declare const InContext: Story;
+export declare const Polymorphic: Story;
+export declare const HeadingState: Story;
+export declare const BodyState: Story;
+export declare const BodySmallState: Story;
+export declare const CaptionState: Story;

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

@@ -17,5 +17,5 @@ interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  * />
  * ```
  */
-export default function Textarea({ error, resize, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const Textarea: import("react").NamedExoticComponent<Props & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;