@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.81

package/dist/lib/components/Stepper/hooks/useStepItemLogic.types.d.ts

@@ -0,0 +1,16 @@
+import { Slot } from '@radix-ui/react-slot';
+import { KeyboardEvent } from 'react';
+import { Step, StepStatus } from '../Stepper.types';
+export type UseStepItemLogicProps = {
+    clickable: boolean;
+    step: Step;
+    onClick?: () => void;
+};
+export type UseStepItemLogicReturn = {
+    isClickable: boolean;
+    isDisabled: boolean;
+    LabelComponent: typeof Slot | 'span';
+    status: StepStatus;
+    handleClick: () => void;
+    handleKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+};

package/dist/lib/components/Stepper/utils/index.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+import { StepStatus } from '../Stepper.types';
+export declare function getStepAriaLabel(index: number, label: ReactNode, status: StepStatus): string;

package/dist/lib/components/Switch/Switch.d.ts

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { Props } from './Switch.types';
+/**
+ * A toggle switch component built on Radix UI primitives.
+ * Supports horizontal and vertical layouts with label and helper text.
+ *
+ * @example
+ * ```tsx
+ * // Basic switch
+ * <Switch label="Enable feature" />
+ *
+ * // Controlled switch
+ * <Switch
+ *   label="Dark mode"
+ *   value={isDarkMode}
+ *   onChange={(enabled) => setIsDarkMode(enabled)}
+ * />
+ *
+ * // Vertical layout with helper text
+ * <Switch
+ *   label="Notifications"
+ *   helperText="Receive email notifications"
+ *   alignment="vertical"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-switch--docs Storybook}
+ */
+export declare const Switch: FC<Props>;

package/dist/lib/components/Switch/Switch.types.d.ts

@@ -0,0 +1,45 @@
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../../domain/theme';
+import { switchVariants } from './Switch.variants';
+/**
+ * Props for the Switch component.
+ *
+ * @example
+ * ```tsx
+ * <Switch label="Enable notifications" onChange={(enabled) => setEnabled(enabled)} />
+ * <Switch label="Dark mode" value={isDark} onChange={setIsDark} />
+ * <Switch label="Feature" helperText="Enable experimental features" alignment="vertical" />
+ * ```
+ */
+export interface Props extends VariantProps<typeof switchVariants> {
+    /** Layout direction: horizontal (default) or vertical */
+    alignment?: 'horizontal' | 'vertical';
+    /** Additional CSS classes */
+    className?: string;
+    /** Initial checked state */
+    defaultChecked?: boolean;
+    /** Whether the switch is disabled */
+    disabled?: boolean;
+    /** Helper text displayed below the label */
+    helperText?: string;
+    /** CSS classes for helper text */
+    helperTextClassName?: string;
+    /** Label text displayed next to switch */
+    label?: string;
+    /** CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** CSS classes for the thumb element */
+    thumbClassName?: string;
+    /** Controlled checked state */
+    value?: boolean;
+    /** Callback when checked state changes */
+    onChange?: (e: boolean) => void;
+}
+/** @deprecated Use Props instead */
+export type SwitchProps = Props;

package/dist/lib/components/Switch/Switch.variants.d.ts

@@ -0,0 +1,2 @@
+export declare const switchVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const thumbVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/Table/Table.d.ts

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { BodyProps, FilterProps, HeadProps, RowProps, TableProps } from './Table.types';
+/**
+ * A composable table component with Head, Body, Row, and Filter sub-components.
+ * For large datasets, consider using VirtualizedTable instead.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <Table.Filter placeholder="Search..." />
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <th>Name</th>
+ *       <th>Email</th>
+ *       <th>Role</th>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     {users.map((user) => (
+ *       <Table.Row key={user.id}>
+ *         <td>{user.name}</td>
+ *         <td>{user.email}</td>
+ *         <td>{user.role}</td>
+ *       </Table.Row>
+ *     ))}
+ *   </Table.Body>
+ * </Table>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-table--docs Storybook}
+ */
+declare const Table: FC<TableProps> & {
+    Head: FC<HeadProps>;
+    Row: FC<RowProps>;
+    Filter: FC<FilterProps>;
+    Body: FC<BodyProps>;
+};
+export { Table };

package/dist/lib/components/Table/Table.types.d.ts

@@ -0,0 +1,59 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+import { Theme } from '../../../domain/theme';
+import { bodyVariants, headVariants, rowVariants, tableVariants } from './Table.variants';
+/**
+ * Props for the Table component.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <th>Name</th>
+ *       <th>Email</th>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <td>John Doe</td>
+ *       <td>john@example.com</td>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ * ```
+ */
+export interface Props extends React.HTMLAttributes<HTMLTableElement>, PropsWithChildren, VariantProps<typeof tableVariants> {
+    /** Theme override for this component */
+    theme?: Theme;
+}
+/** @deprecated Use Props instead */
+export type TableProps = Props;
+/**
+ * Props for Table.Row component.
+ */
+export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement>, PropsWithChildren, VariantProps<typeof rowVariants> {
+    /** Width of the row */
+    width?: string;
+    /** Whether the row is selected */
+    isSelected?: boolean;
+    /** Callback when row is selected */
+    onSelect?: () => void;
+}
+/**
+ * Props for Table.Head component.
+ */
+export interface HeadProps extends React.HTMLAttributes<HTMLTableSectionElement>, PropsWithChildren, VariantProps<typeof headVariants> {
+}
+/**
+ * Props for Table.Body component.
+ */
+export interface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement>, PropsWithChildren, VariantProps<typeof bodyVariants> {
+}
+/**
+ * Props for Table.Filter component.
+ */
+export interface FilterProps extends React.InputHTMLAttributes<HTMLInputElement>, PropsWithChildren {
+    /** Placeholder text for the filter input */
+    placeholder?: string;
+}

package/dist/lib/components/Table/Table.variants.d.ts

@@ -0,0 +1,6 @@
+export declare const tableVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const rowVariants: (props?: ({
+    isSelected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const headVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const bodyVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/Table/components/Body.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BodyProps } from '../Table.types';
+export declare const Body: FC<BodyProps>;

package/dist/lib/components/Table/components/Filter.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FilterProps } from '../Table.types';
+export declare const Filter: FC<FilterProps>;

package/dist/lib/components/Table/components/Head.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { HeadProps } from '../Table.types';
+export declare const Head: FC<HeadProps>;

package/dist/lib/components/Table/components/Row.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { RowProps } from '../Table.types';
+export declare const Row: FC<RowProps>;

package/dist/lib/components/Table/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Body';
+export * from './Filter';
+export * from './Head';
+export * from './Row';

package/dist/lib/components/Tabs/Tabs.d.ts

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { ListProps, Props as TabsProps, TriggerProps } from './Tabs.types';
+import { Content, List, Trigger } from './components';
+import * as ReactTabs from '@radix-ui/react-tabs';
+/**
+ * A tabs component built on Radix UI primitives.
+ * Supports horizontal and vertical orientations with List, Trigger, and Content sub-components.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <Tabs.List orientation="horizontal">
+ *     <Tabs.Trigger tab="overview" label="Overview" isActive />
+ *     <Tabs.Trigger tab="settings" label="Settings" isActive={false} />
+ *     <Tabs.Trigger tab="billing" label="Billing" isActive={false} />
+ *   </Tabs.List>
+ *
+ *   <Tabs.Content value="overview">
+ *     Overview content here
+ *   </Tabs.Content>
+ *   <Tabs.Content value="settings">
+ *     Settings content here
+ *   </Tabs.Content>
+ *   <Tabs.Content value="billing">
+ *     Billing content here
+ *   </Tabs.Content>
+ * </Tabs>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-tabs--docs Storybook}
+ */
+declare const Tabs: FC<TabsProps> & {
+    List: FC<ListProps>;
+    Trigger: FC<TriggerProps>;
+    Content: FC<ReactTabs.TabsContentProps>;
+};
+export { Content, List, Tabs, Trigger };

package/dist/lib/components/Tabs/Tabs.types.d.ts

@@ -0,0 +1,44 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+import { triggerVariants } from './Tabs.variants';
+import { Theme } from '../../../domain/theme';
+import * as ReactTabs from '@radix-ui/react-tabs';
+/**
+ * Props for the Tabs component.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <Tabs.List orientation="horizontal">
+ *     <Tabs.Trigger tab="tab1" label="Tab 1" isActive />
+ *     <Tabs.Trigger tab="tab2" label="Tab 2" isActive={false} />
+ *   </Tabs.List>
+ *   <Tabs.Content value="tab1">Content 1</Tabs.Content>
+ *   <Tabs.Content value="tab2">Content 2</Tabs.Content>
+ * </Tabs>
+ * ```
+ */
+export interface Props extends ReactTabs.TabsProps, PropsWithChildren {
+    /** Theme override for this component */
+    theme?: Theme;
+}
+/** @deprecated Use Props instead */
+export type TabsProps = Props;
+/**
+ * Props for Tabs.Trigger component.
+ */
+export interface TriggerProps extends VariantProps<typeof triggerVariants>, React.HTMLAttributes<HTMLDivElement> {
+    /** Tab value identifier */
+    tab: string;
+    /** Display label for the tab */
+    label: string;
+    /** Whether this tab is active */
+    isActive: boolean;
+}
+/**
+ * Props for Tabs.List component.
+ */
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement>, PropsWithChildren {
+    /** Tab list orientation */
+    orientation: 'horizontal' | 'vertical';
+}

package/dist/lib/components/Tabs/Tabs.variants.d.ts

@@ -0,0 +1,12 @@
+export declare const rootVariants: (props?: ({
+    variant?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const contentVariants: (props?: ({
+    variant?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const listVariants: (props?: ({
+    variant?: "horizontal" | "vertical" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const triggerVariants: (props?: ({
+    variant?: "default" | "active" | "inactive" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/Tabs/components/Content.d.ts

@@ -0,0 +1,4 @@
+import { TabsContentProps } from '@radix-ui/react-tabs';
+import { FC } from 'react';
+declare const Content: FC<TabsContentProps>;
+export { Content };

package/dist/lib/components/Tabs/components/List.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ListProps } from '../Tabs.types';
+declare const List: FC<ListProps>;
+export { List };

package/dist/lib/components/Tabs/components/Trigger.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TriggerProps } from '../Tabs.types';
+declare const Trigger: FC<TriggerProps>;
+export { Trigger };

package/dist/lib/components/Tabs/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Content';
+export * from './List';
+export * from './Trigger';

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

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { Props } from './Tag.types';
+/**
+ * A small label component for categorization, status display, or filtering.
+ * Supports multiple color variants and optional icons.
+ *
+ * @example
+ * ```tsx
+ * <Tag id="1" label="New" color="green" />
+ * <Tag id="2" label="Pending" color="gold" leftIcon={<Clock />} />
+ * <Tag id="3" label="Error" color="pink" rightIcon={<X />} />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-tag--docs Storybook}
+ */
+export declare const Tag: FC<Props>;

package/dist/lib/components/Tag/Tag.types.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the Tag component.
+ * A small label component for categorization or status display.
+ *
+ * @example
+ * ```tsx
+ * <Tag
+ *   id="status-active"
+ *   label="Active"
+ *   color="green"
+ *   leftIcon={<CheckIcon />}
+ * />
+ * ```
+ */
+export type Props = {
+    /** Color variant for the tag */
+    color?: 'gray' | 'gray-800' | 'cyan' | 'gold' | 'green' | 'light blue' | 'lime' | 'pink' | 'purple' | 'emerald' | 'fuscia' | 'indigo' | 'light-orange' | 'dark-sky-blue' | 'mistery';
+    /** Unique identifier for the tag */
+    id: string | number;
+    /** Text displayed in the tag */
+    label: string;
+    /** Icon displayed after the label */
+    rightIcon?: ReactNode;
+    /** Icon displayed before the label */
+    leftIcon?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Data attribute for the tag value */
+    'data-value'?: string;
+    /** Whether the tag is in a selected state */
+    isSelected?: boolean;
+};
+/** @deprecated Use Props instead */
+export type TagProps = Props;

package/dist/lib/components/Tag/Tag.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const tagVariants: (props?: ({
+    color?: "default" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "pink" | "purple" | "gray-800" | "light blue" | "emerald" | "fuscia" | "light-orange" | "dark-sky-blue" | "mistery" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/TagSelect/TagSelect.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { Props } from './TagSelect.types';
+/**
+ * An input component for selecting from a list of tag options.
+ * Supports single and multi-selection modes.
+ *
+ * @example
+ * ```tsx
+ * <TagSelect
+ *   label="Skills"
+ *   placeholder="Select skills..."
+ *   options={[
+ *     { label: 'React', color: 'blue' },
+ *     { label: 'TypeScript', color: 'purple' },
+ *     { label: 'Node.js', color: 'green' },
+ *   ]}
+ *   multiselect
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-tagselect--docs Storybook}
+ */
+export declare const TagSelect: FC<Props>;

package/dist/lib/components/TagSelect/TagSelect.types.d.ts

@@ -0,0 +1,41 @@
+import { VariantProps } from 'class-variance-authority';
+import { Props as TagProps } from '../../../components/Tag/Tag.types';
+import { tagSelectVariants } from './TagSelect.variants';
+/**
+ * Props for the TagSelect component.
+ * An input that allows selecting from a list of tags.
+ *
+ * @example
+ * ```tsx
+ * <TagSelect
+ *   label="Categories"
+ *   placeholder="Select categories..."
+ *   options={[
+ *     { label: 'Frontend', color: 'blue' },
+ *     { label: 'Backend', color: 'green' },
+ *     { label: 'DevOps', color: 'purple' },
+ *   ]}
+ *   multiselect
+ * />
+ * ```
+ */
+export interface Props extends VariantProps<typeof tagSelectVariants> {
+    /** Label displayed above the input */
+    label?: string;
+    /** Available tag options to select from */
+    options: TagProps[];
+    /** Form field name for the input */
+    name?: string;
+    /** Placeholder text when no selection */
+    placeholder?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Additional CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Whether multiple tags can be selected */
+    multiselect?: boolean;
+}
+/** @deprecated Use Props instead */
+export type TagSelectProps = Props;

package/dist/lib/components/TagSelect/TagSelect.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const wrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const tagSelectVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/TagSelect/components/Item/Item.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ItemProps } from './Item.types';
+export declare const Item: FC<ItemProps>;

package/dist/lib/components/TagSelect/components/Item/Item.types.d.ts

@@ -0,0 +1,6 @@
+import { Props as TagProps } from '../../../../../components/Tag/Tag.types';
+import { Theme } from '../../../../../domain/theme';
+export type ItemProps = {
+    option: TagProps;
+    theme?: Theme;
+};

package/dist/lib/components/TagSelect/components/Item/Item.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const wrapperVariants: (props?: ({
+    isSelected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/TagSelect/components/List/List.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ListProps } from './List.types';
+export declare const List: FC<ListProps>;

package/dist/lib/components/TagSelect/components/List/List.types.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '../../../../../domain/theme';
+export type ListProps = {
+    theme?: Theme;
+};

package/dist/lib/components/TagSelect/components/List/List.variants.d.ts

@@ -0,0 +1 @@
+export declare const wrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/TagSelect/components/Wrapper/Wrapper.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { WrapperProps } from './Wrapper.types';
+export declare const Wrapper: FC<WrapperProps>;

package/dist/lib/components/TagSelect/components/Wrapper/Wrapper.types.d.ts

@@ -0,0 +1,7 @@
+import { ForwardedRef } from 'react';
+import { Theme } from '../../../../../domain/theme';
+import { Props as TagSelectProps } from '../../TagSelect.types';
+export type WrapperProps = Omit<TagSelectProps, 'options' | 'multiselect'> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+    theme?: Theme;
+};

package/dist/lib/components/TagSelect/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Item/Item';
+export * from './List/List';
+export * from './Wrapper/Wrapper';

package/dist/lib/components/TagSelect/contexts/TagSelect.context.d.ts

@@ -0,0 +1,2 @@
+import { State } from './TagSelect.types';
+export declare const TagSelectContext: import('react').Context<State>;

package/dist/lib/components/TagSelect/contexts/TagSelect.hook.d.ts

@@ -0,0 +1 @@
+export declare const useTagSelect: () => import('./TagSelect.types').State;

package/dist/lib/components/TagSelect/contexts/TagSelect.provider.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TagSelectProviderProps } from './TagSelect.types';
+export declare const TagSelectProvider: FC<TagSelectProviderProps>;

package/dist/lib/components/TagSelect/contexts/TagSelect.types.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren, RefObject } from 'react';
+import { Props as TagProps } from '../../../../components/Tag/Tag.types';
+export type State = {
+    tags: TagProps[];
+    selectedTags: TagProps[];
+    isOpen: boolean;
+    inputRef: RefObject<HTMLInputElement | null> | null;
+    onSelectTag: (tag: TagProps) => void;
+    onRemoveTag: (tag: TagProps) => void;
+    onOpen: (value?: boolean) => void;
+};
+export type TagSelectProviderProps = PropsWithChildren & {
+    defaultOptions?: TagProps[];
+    multiselect?: boolean;
+};

package/dist/lib/components/TagSelect/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TagSelect.hook';
+export * from './TagSelect.provider';

package/dist/lib/components/TagSelect/hooks/useTagSelect.d.ts

@@ -0,0 +1,4 @@
+export declare const useTagSelect: () => {
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleOpen: (event: React.MouseEvent<HTMLElement>) => void;
+};

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

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { Props } from './TextArea.types';
+/**
+ * A multiline text input component with optional label.
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <TextArea label="Description" placeholder="Enter description..." />
+ *
+ * // Textarea with more rows
+ * <TextArea label="Notes" rows={5} />
+ *
+ * // Controlled textarea
+ * <TextArea
+ *   label="Comments"
+ *   value={comments}
+ *   onChange={(e) => setComments(e.target.value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-textarea--docs Storybook}
+ */
+export declare const TextArea: FC<Props>;

package/dist/lib/components/TextArea/TextArea.types.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../../domain/theme';
+import { textAreaVariants } from './TextArea.variants';
+/**
+ * Props for the TextArea component.
+ *
+ * @example
+ * ```tsx
+ * <TextArea label="Description" placeholder="Enter description..." />
+ * <TextArea label="Notes" rows={5} />
+ * <TextArea name="bio" initialValue="Default text" />
+ * ```
+ */
+export interface Props extends InputHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textAreaVariants> {
+    /** Number of visible text rows (default: 3) */
+    rows?: number;
+    /** Label displayed above the textarea */
+    label?: string | ReactNode;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Initial/default value */
+    initialValue?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+}
+/** @deprecated Use Props instead */
+export type TextAreaProps = Props;

package/dist/lib/components/TextArea/TextArea.variants.d.ts

@@ -0,0 +1 @@
+export declare const textAreaVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;