@ngrr/ds 0.1.5 → 0.1.7

package/dist/components/atoms/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+export interface PhoneCountryOption {
+    label: string;
+    value: string;
+}
+export interface PhoneInputProps {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    helperIcon?: React.ReactNode;
+    countryCode?: string;
+    defaultCountryCode?: string;
+    countryOptions?: PhoneCountryOption[];
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onCountryCodeChange?: (countryCode: string) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    countryCodeAriaLabel?: string;
+    autoComplete?: string;
+    name?: string;
+    className?: string;
+}
+export declare function PhoneInput({ id, label, placeholder, value, defaultValue, disabled, error, required, helperText, errorMessage, helperIcon, countryCode, defaultCountryCode, countryOptions, onChange, onCountryCodeChange, onBlur, onFocus, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, countryCodeAriaLabel, autoComplete, name, className, }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+export default PhoneInput;

package/dist/components/atoms/PhoneInput/index.d.ts

@@ -0,0 +1,2 @@
+export { PhoneInput } from './PhoneInput';
+export type { PhoneInputProps, PhoneCountryOption } from './PhoneInput';

package/dist/components/atoms/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,16 @@
+export interface ProgressBarProps {
+    /**
+     * Current progress as a percentage, 0–100. Values are clamped to [0, 100]
+     * internally, so out-of-range values are safe to pass.
+     */
+    value: number;
+    /**
+     * Accessible label describing **what** is progressing.
+     * Required when there is no visible label in the surrounding UI.
+     * Example: `aria-label="Uploading file"`.
+     */
+    label?: string;
+    /** Additional CSS class names merged onto the root element. */
+    className?: string;
+}
+export declare function ProgressBar({ value, label, className }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/ProgressBar/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from './ProgressBar';
+export type { ProgressBarProps } from './ProgressBar';

package/dist/components/atoms/ProgressRing/ProgressRing.d.ts

@@ -0,0 +1,29 @@
+export type ProgressRingSize = 'sm' | 'lg' | 'xl' | 'xxl';
+export interface ProgressRingProps {
+    /**
+     * Current progress as a percentage (0–100). Clamped internally.
+     *
+     * - **Omit** → **indeterminate** mode: a 270° arc spins continuously
+     *   against a grey track ring. No `aria-valuenow` is set.
+     * - **Provide** → **determinate** mode: the ring fills clockwise from
+     *   12 o'clock to the given percentage. `aria-valuenow` is set.
+     */
+    value?: number;
+    /**
+     * Visual size of the ring — pixel-identical to Spinner sizes.
+     * - `sm`  — 16 px
+     * - `lg`  — 32 px (default)
+     * - `xl`  — 48 px
+     * - `xxl` — 64 px
+     * @default 'lg'
+     */
+    size?: ProgressRingSize;
+    /**
+     * Accessible label describing what is progressing / loading.
+     * Required when there is no visible label in the surrounding UI.
+     */
+    label?: string;
+    /** Additional CSS class names merged onto the root element. */
+    className?: string;
+}
+export declare function ProgressRing({ value, size, label, className, }: ProgressRingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/ProgressRing/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressRing } from './ProgressRing';
+export type { ProgressRingProps, ProgressRingSize } from './ProgressRing';

package/dist/components/atoms/Radio/Radio.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { AvatarProps } from '../Avatar';
+import { BadgeSize, BadgeVariant } from '../Badge';
+import { TagVariant } from '../Tag';
+export type RadioSize = 'md' | 'sm';
+/**
+ * Radio atom: row-level single-select control for composition in lists,
+ * cells, and form wrappers. Field-level label/helper/error anatomy belongs
+ * to dedicated form-field wrappers.
+ */
+export interface RadioProps {
+    size?: RadioSize;
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+    descriptionRight?: string;
+    showContent?: boolean;
+    showLabel?: boolean;
+    showDescription?: boolean;
+    showDescriptionRight?: boolean;
+    showAvatar?: boolean;
+    avatarProps?: AvatarProps;
+    showLeadingIcon?: boolean;
+    leadingIcon?: React.ReactNode;
+    showTrailingIcon?: boolean;
+    trailingIcon?: React.ReactNode;
+    showBadge?: boolean;
+    badgeCount?: number;
+    badgeSize?: BadgeSize;
+    badgeVariant?: BadgeVariant;
+    showTag?: boolean;
+    tagLabel?: string;
+    tagVariant?: TagVariant;
+    showButtons?: boolean;
+    actionAriaLabel?: string;
+    onActionClick?: React.MouseEventHandler<HTMLButtonElement>;
+    showSwitcherRight?: boolean;
+    switcherChecked?: boolean;
+    onSwitcherChange?: (checked: boolean) => void;
+    onCheckedChange?: (checked: boolean) => void;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function Radio({ size, checked, disabled, label, description, descriptionRight, showContent, showLabel, showDescription, showDescriptionRight, showAvatar, avatarProps, showLeadingIcon, leadingIcon, showTrailingIcon, trailingIcon, showBadge, badgeCount, badgeSize, badgeVariant, showTag, tagLabel, tagVariant, showButtons, actionAriaLabel, onActionClick, showSwitcherRight, switcherChecked, onSwitcherChange, onCheckedChange, className, 'aria-label': ariaLabel, }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export default Radio;

package/dist/components/atoms/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export type { RadioProps, RadioSize } from './Radio';

package/dist/components/atoms/SearchBar/SearchBar.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+export type SearchBarVariant = 'default' | 'ghost';
+export interface SearchBarProps {
+    id?: string;
+    variant?: SearchBarVariant;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    error?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    maxLength?: number;
+    required?: boolean;
+    helperIcon?: React.ReactNode;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onClear?: () => void;
+    className?: string;
+    name?: string;
+    autoComplete?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+export declare function SearchBar({ id, variant, label, placeholder, value, defaultValue, disabled, error, helperText, errorMessage, maxLength, required, helperIcon, onChange, onFocus, onBlur, onClear, className, name, autoComplete, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export default SearchBar;

package/dist/components/atoms/SearchBar/index.d.ts

@@ -0,0 +1,2 @@
+export { SearchBar } from './SearchBar';
+export type { SearchBarProps, SearchBarVariant } from './SearchBar';

package/dist/components/atoms/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export type SectionHeaderSize = 'large' | 'medium' | 'small' | 'xsmall';
+export interface SectionHeaderProps {
+    title: string;
+    description?: string;
+    size?: SectionHeaderSize;
+    leadingControl?: React.ReactNode;
+    trailingControl?: React.ReactNode;
+    className?: string;
+}
+export declare function SectionHeader({ title, description, size, leadingControl, trailingControl, className, }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default SectionHeader;

package/dist/components/atoms/SectionHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { SectionHeader } from './SectionHeader';
+export type { SectionHeaderProps, SectionHeaderSize } from './SectionHeader';

package/dist/components/atoms/SegmentControl/SegmentControl.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export interface SegmentControlOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    showLeadingIcon?: boolean;
+    leadingIcon?: React.ReactNode;
+    showTrailingIcon?: boolean;
+    trailingIcon?: React.ReactNode;
+    'aria-label'?: string;
+}
+export interface SegmentControlProps {
+    options: SegmentControlOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    fullWidth?: boolean;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function SegmentControl({ options, value, defaultValue, onChange, fullWidth, className, 'aria-label': ariaLabel, }: SegmentControlProps): import("react/jsx-runtime").JSX.Element;
+export default SegmentControl;

package/dist/components/atoms/SegmentControl/SegmentControlSelector.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+interface SegmentControlSelectorProps {
+    id: string;
+    label: string;
+    active: boolean;
+    disabled: boolean;
+    tabIndex: number;
+    showLeadingIcon?: boolean;
+    leadingIcon?: React.ReactNode;
+    showTrailingIcon?: boolean;
+    trailingIcon?: React.ReactNode;
+    onSelect: () => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    onFocus: () => void;
+    buttonRef: (node: HTMLButtonElement | null) => void;
+    ariaLabel?: string;
+}
+export declare function SegmentControlSelector({ id, label, active, disabled, tabIndex, showLeadingIcon, leadingIcon, showTrailingIcon, trailingIcon, onSelect, onKeyDown, onFocus, buttonRef, ariaLabel, }: SegmentControlSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/atoms/SegmentControl/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentControl } from './SegmentControl';
+export type { SegmentControlProps, SegmentControlOption } from './SegmentControl';

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

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+export interface SelectOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    options?: SelectOption[];
+    value?: string;
+    defaultValue?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    required?: boolean;
+    helperIcon?: React.ReactNode;
+    className?: string;
+    name?: string;
+    onChange?: (value: string, option: SelectOption) => void;
+    onOpenChange?: (open: boolean) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+export declare function Select({ id, label, placeholder, options, value, defaultValue, open, defaultOpen, disabled, error, helperText, errorMessage, required, helperIcon, className, name, onChange, onOpenChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/components/atoms/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';

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

@@ -0,0 +1,20 @@
+export type SeparatorDirection = 'horizontal' | 'vertical';
+export interface SeparatorProps {
+    /**
+     * Orientation of the separator line.
+     * - `horizontal` — spans the full width of its container (default)
+     * - `vertical`   — spans the full height of its container
+     * @default 'horizontal'
+     */
+    direction?: SeparatorDirection;
+    /**
+     * When `true`, marks the separator as purely decorative (`aria-hidden="true"`).
+     * Use this when the separator has no semantic meaning and is just visual rhythm.
+     * When `false` (default), the separator is exposed to assistive technology.
+     * @default false
+     */
+    decorative?: boolean;
+    /** Additional CSS class names merged onto the root element. */
+    className?: string;
+}
+export declare function Separator({ direction, decorative, className, }: SeparatorProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/atoms/Shortcut/Shortcut.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Controls text (and border) colour so the badge stays legible
+ * on any background it sits on.
+ *
+ * Maps to Figma "Content Color" property.
+ * - `'default'`  → muted grey text + subtle border. Use on light surfaces
+ *                  (secondary buttons, menu cells, help text).
+ * - `'inverted'` → white text at 80 % opacity. Use on filled/dark surfaces
+ *                  (primary button, dark tooltips, inverted panels).
+ */
+export type ShortcutContentColor = 'default' | 'inverted';
+export interface ShortcutProps {
+    /**
+     * The keyboard shortcut string displayed inside the badge.
+     * Use platform-standard notation:
+     * - Mac:           `⌘K`, `⌥⇧P`, `⌃⇧Z`
+     * - Windows/Linux: `Ctrl+K`, `Alt+Shift+P`
+     *
+     * Keep to key characters only — no descriptive text inside the badge.
+     *
+     * Maps to Figma "Label" property.
+     * @default '⌘ ↵'
+     */
+    label?: string;
+    /**
+     * Screen-reader equivalent of `label`.
+     * Required because symbol characters (⌘, ⇧, ⌥, ⌃) are not reliably
+     * announced by assistive technologies.
+     *
+     * Write out the key names in plain English:
+     * e.g. `"Command K"`, `"Option Shift P"`, `"Control Shift Z"`
+     */
+    'aria-label': string;
+    /**
+     * Colour treatment of the badge content.
+     * Maps to Figma "Content Color" property.
+     * - `'default'`  — for light surfaces (secondary buttons, menus, help text).
+     * - `'inverted'` — for filled/dark surfaces (primary button, dark tooltips).
+     *
+     * @default 'default'
+     */
+    contentColor?: ShortcutContentColor;
+    /** Extra CSS class names merged onto the root element. */
+    className?: string;
+}
+/**
+ * **Shortcut** — a non-interactive display badge for keyboard shortcuts.
+ *
+ * Used inline within tooltips, menus, button labels, and help text to surface
+ * available keyboard shortcuts. Never interactive — display element only.
+ *
+ * Styles live in `Shortcut.css` alongside this file. All CSS values reference
+ * `tokens.css` via `var()`.
+ *
+ * ### Usage
+ * ```tsx
+ * // Default — on light surfaces (secondary buttons, menus)
+ * <Shortcut label="⌘K" aria-label="Command K" />
+ *
+ * // Inverted — sitting on a Primary button or dark surface
+ * <Shortcut label="⌘K" aria-label="Command K" contentColor="inverted" />
+ * ```
+ *
+ * ### Accessibility
+ * Always supply `aria-label` with plain-English key names — symbol characters
+ * (⌘, ⇧, ⌥, ⌃) are not reliably announced by screen readers.
+ */
+export declare function Shortcut({ label, 'aria-label': ariaLabel, contentColor, className, }: ShortcutProps): import("react/jsx-runtime").JSX.Element;
+export default Shortcut;

package/dist/components/atoms/Shortcut/index.d.ts

@@ -0,0 +1,2 @@
+export { Shortcut } from './Shortcut';
+export type { ShortcutProps, ShortcutContentColor } from './Shortcut';

package/dist/components/atoms/SkeletonLoading/SkeletonLoading.d.ts

@@ -0,0 +1,7 @@
+export type SkeletonLoadingType = 'avatar' | 'pill' | 'image' | 'card';
+export interface SkeletonLoadingProps {
+    type?: SkeletonLoadingType;
+    className?: string;
+}
+export declare function SkeletonLoading({ type, className }: SkeletonLoadingProps): import("react/jsx-runtime").JSX.Element;
+export default SkeletonLoading;

package/dist/components/atoms/SkeletonLoading/index.d.ts

@@ -0,0 +1,2 @@
+export { SkeletonLoading } from './SkeletonLoading';
+export type { SkeletonLoadingProps, SkeletonLoadingType } from './SkeletonLoading';

package/dist/components/atoms/Stat/Stat.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export type StatVariant = 'default' | 'card';
+export interface StatProps {
+    /** Short label describing the metric. */
+    title: string;
+    /** Main metric value. Keep concise (e.g. 1234, 84%, 1.2k). */
+    value: React.ReactNode;
+    /** Layout treatment: plain or card-contained. */
+    variant?: StatVariant;
+    /** Additional CSS class names merged on root. */
+    className?: string;
+    /** Optional aria-label for standalone accessibility context. */
+    'aria-label'?: string;
+}
+export declare function Stat({ title, value, variant, className, 'aria-label': ariaLabel, }: StatProps): import("react/jsx-runtime").JSX.Element;
+export default Stat;

package/dist/components/atoms/Stat/index.d.ts

@@ -0,0 +1,2 @@
+export { Stat } from './Stat';
+export type { StatProps, StatVariant } from './Stat';

package/dist/components/atoms/Switcher/Switcher.d.ts

@@ -0,0 +1,46 @@
+export type SwitcherSize = 'md' | 'sm';
+export interface SwitcherProps {
+    /**
+     * Whether the switcher is currently on (true) or off (false).
+     * This is a **controlled** prop — the consumer must update it in `onChange`.
+     */
+    checked: boolean;
+    /**
+     * Called when the user toggles the switcher. Receives the new value.
+     * ```tsx
+     * <Switcher checked={on} onChange={setOn} />
+     * ```
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * When true, the switcher is non-interactive and removed from tab order.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Visual size.
+     * - `md` — default (48 × 32 px); use in standard settings panels
+     * - `sm` — compact layouts (36 × 24 px)
+     * @default 'md'
+     */
+    size?: SwitcherSize;
+    /**
+     * Native `id` forwarded to the root `<button>`, allowing a visible `<label>`
+     * to associate via `htmlFor`. Prefer `aria-labelledby` when the label is a
+     * sibling rendered by the same component.
+     */
+    id?: string;
+    /**
+     * Accessible label used when there is **no visible label element**.
+     * When a visible label exists, use `aria-labelledby` instead.
+     */
+    'aria-label'?: string;
+    /**
+     * Points to the `id` of the visible label element. Preferred over
+     * `aria-label` when a visible text label is present.
+     */
+    'aria-labelledby'?: string;
+    /** Additional CSS class names merged onto the root `<button>`. */
+    className?: string;
+}
+export declare function Switcher({ checked, onChange, disabled, size, id, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: SwitcherProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Switcher/index.d.ts

@@ -0,0 +1,2 @@
+export { Switcher } from './Switcher';
+export type { SwitcherProps, SwitcherSize } from './Switcher';

package/dist/components/atoms/Tab/Tab.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface TabItem {
+    value: string;
+    label: string;
+    panel?: React.ReactNode;
+    disabled?: boolean;
+    showLeadingIcon?: boolean;
+    leadingIcon?: React.ReactNode;
+    showTrailingIcon?: boolean;
+    trailingIcon?: React.ReactNode;
+    'aria-label'?: string;
+}
+export interface TabProps {
+    tabs: TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    showPanels?: boolean;
+    panelClassName?: string;
+    'aria-label'?: string;
+}
+export declare function Tab({ tabs, value, defaultValue, onChange, className, showPanels, panelClassName, 'aria-label': ariaLabel, }: TabProps): import("react/jsx-runtime").JSX.Element;
+export default Tab;

package/dist/components/atoms/Tab/index.d.ts

@@ -0,0 +1,2 @@
+export { Tab } from './Tab';
+export type { TabProps, TabItem } from './Tab';

package/dist/components/atoms/Tag/Tag.d.ts

@@ -0,0 +1,50 @@
+import { LucideIcon } from 'lucide-react';
+export type TagVariant = 'highlight' | 'warning' | 'error' | 'success' | 'neutral';
+export type TagSize = 'md' | 'sm';
+export interface TagProps {
+    /**
+     * The text label displayed inside the tag.
+     * Keep to 1–3 words. Use sentence case ("In review", not "In Review").
+     */
+    label: string;
+    /**
+     * Semantic colour variant — choose based on meaning, not visual preference.
+     * - `highlight` — notable but not urgent (featured, active)
+     * - `warning`   — caution, approaching an issue
+     * - `error`     — something has gone wrong or is blocked
+     * - `success`   — completed, healthy, approved
+     * - `neutral`   — no semantic weight, purely categorical
+     * @default 'neutral'
+     */
+    variant?: TagVariant;
+    /**
+     * Visual size.
+     * - `md` — default; use in most contexts
+     * - `sm` — dense layouts, tight rows, or when multiple tags appear per item
+     * @default 'md'
+     */
+    size?: TagSize;
+    /**
+     * Replaces the default diamond indicator with any Lucide icon.
+     * Pass the component reference, not a rendered element:
+     *   `icon={Star}` ✓   `icon={<Star />}` ✗
+     * When omitted the built-in CSS diamond shape is rendered.
+     */
+    icon?: LucideIcon;
+    /**
+     * When `false`, the icon (default diamond or custom) is hidden and only the
+     * label text is shown. Defaults to `true`.
+     */
+    showIcon?: boolean;
+    /** Additional CSS class names merged onto the root element. */
+    className?: string;
+    /**
+     * Accessible label for the tag. Tags should not rely on colour alone —
+     * the `label` text is the primary semantic signal.
+     *
+     * When multiple tags appear on the same item, use `aria-describedby` on the
+     * host element instead of setting `aria-label` here.
+     */
+    'aria-label'?: string;
+}
+export declare function Tag({ label, variant, size, icon, showIcon, className, 'aria-label': ariaLabel, }: TagProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Tag/index.d.ts

@@ -0,0 +1,2 @@
+export { Tag } from './Tag';
+export type { TagProps, TagVariant, TagSize } from './Tag';

package/dist/components/atoms/TextArea/TextArea.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface TextAreaProps {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    maxLength?: number;
+    minRows?: number;
+    helperIcon?: React.ReactNode;
+    leadingIcon?: React.ReactNode;
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    autoComplete?: string;
+    name?: string;
+    className?: string;
+}
+export declare function TextArea({ id, label, placeholder, value, defaultValue, disabled, error, required, helperText, errorMessage, maxLength, minRows, helperIcon, leadingIcon, onChange, onBlur, onFocus, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, autoComplete, name, className, }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+export default TextArea;

package/dist/components/atoms/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export { TextArea } from './TextArea';
+export type { TextAreaProps } from './TextArea';

package/dist/components/atoms/TextInput/TextInput.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+export interface TextInputProps {
+    /** Unique id — wires <label htmlFor> ↔ <input id>. Auto-generated via useId() if omitted. */
+    id?: string;
+    /** Visible label above the control. Omit only when aria-label / aria-labelledby is provided. */
+    label?: string;
+    placeholder?: string;
+    /** Controlled value. */
+    value?: string;
+    /** Uncontrolled default value. */
+    defaultValue?: string;
+    disabled?: boolean;
+    /** Enables the error visual state on the control, label, and helper row. */
+    error?: boolean;
+    required?: boolean;
+    /** Shown below the control; replaced by errorMessage when error=true. */
+    helperText?: string;
+    /** Shown below the control only when error=true. */
+    errorMessage?: string;
+    /** Enables "N/maxLength" character counter in the helper row. */
+    maxLength?: number;
+    /** Optional 16×16 icon inside the control on the left. */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Optional 16×16 icon inside the control on the right.
+     * Hidden when maxLength is set (counter occupies that slot conceptually).
+     */
+    trailingIcon?: React.ReactNode;
+    /** Optional 16×16 icon rendered at the start of the helper / error text row. */
+    helperIcon?: React.ReactNode;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    autoComplete?: string;
+    name?: string;
+    className?: string;
+}
+export declare function TextInput({ id, label, placeholder, value, defaultValue, disabled, error, required, helperText, errorMessage, maxLength, leadingIcon, trailingIcon, helperIcon, onChange, onBlur, onFocus, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, autoComplete, name, className, }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+export default TextInput;

package/dist/components/atoms/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from './TextInput';
+export type { TextInputProps } from './TextInput';

package/dist/components/atoms/UploadArea/UploadArea.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface UploadAreaProps {
+    id?: string;
+    label?: string;
+    helperText?: string;
+    helperIcon?: React.ReactNode;
+    disabled?: boolean;
+    accept?: string;
+    multiple?: boolean;
+    maxSizeText?: string;
+    dragText?: string;
+    dropText?: string;
+    onFilesSelected?: (files: File[]) => void;
+    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function UploadArea({ id, label, helperText, helperIcon, disabled, accept, multiple, maxSizeText, dragText, dropText, onFilesSelected, onFocus, onBlur, className, 'aria-label': ariaLabel, }: UploadAreaProps): import("react/jsx-runtime").JSX.Element;
+export default UploadArea;