@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.120

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

@@ -0,0 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
+import { HTMLAttributes, ReactNode } from 'react';
+import { Props as TypographyProps } from '../Typography/Typography.types';
+import { Theme } from '../../domain/theme';
+import { spinnerVariants } from './Spinner.variants';
+export type Props = HTMLAttributes<HTMLDivElement> & VariantProps<typeof spinnerVariants> & {
+    spinnerClassName?: string;
+    textClassName?: string;
+    textVariant?: TypographyProps['variant'];
+    text?: string | ReactNode;
+    srLabel?: string;
+    theme?: Theme;
+};
+/** @deprecated Use Props instead */
+export type SpinnerProps = Props;

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

@@ -0,0 +1,6 @@
+export declare const spinnerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const spinnerIconVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,51 @@
+import { FC } from 'react';
+import { Props } from './Stepper.types';
+/**
+ * A stepper component for displaying multi-step processes.
+ * Supports vertical and horizontal orientations with various step states.
+ *
+ * @example
+ * ```tsx
+ * // Basic vertical stepper (inline variant - text beside indicator)
+ * <Stepper
+ *   steps={[
+ *     { id: 1, label: 'Select platform', status: 'completed' },
+ *     { id: 2, label: 'Set up cluster', status: 'active' },
+ *     { id: 3, label: 'Preparing', status: 'pending' },
+ *   ]}
+ * />
+ *
+ * // Stacked variant (text below indicator, larger circles)
+ * <Stepper
+ *   variant="stacked"
+ *   steps={[
+ *     { id: 1, label: 'Step 1', status: 'completed' },
+ *     { id: 2, label: 'Step 2', status: 'active' },
+ *     { id: 3, label: 'Step 3', status: 'pending' },
+ *   ]}
+ * />
+ *
+ * // Horizontal stepper
+ * <Stepper
+ *   orientation="horizontal"
+ *   steps={[
+ *     { id: 1, label: 'Step 1', status: 'completed' },
+ *     { id: 2, label: 'Step 2', status: 'active' },
+ *     { id: 3, label: 'Step 3', status: 'pending' },
+ *   ]}
+ * />
+ *
+ * // Auto-calculated statuses with currentStep
+ * <Stepper
+ *   steps={[
+ *     { id: 1, label: 'Step 1' },
+ *     { id: 2, label: 'Step 2' },
+ *     { id: 3, label: 'Step 3' },
+ *   ]}
+ *   currentStep={1}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-stepper--docs Storybook}
+ */
+export declare const Stepper: FC<Props>;

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

@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { stepperVariants } from './Stepper.variants';
+export type StepStatus = 'completed' | 'active' | 'pending' | 'error';
+export type StepSize = 'sm' | 'md' | 'lg';
+export type StepVariant = 'inline' | 'stacked' | 'horizontal';
+export type Step = {
+    /** Optional description for the step */
+    description?: string;
+    /** Whether this step is disabled (not clickable) */
+    disabled?: boolean;
+    /** Unique identifier for the step */
+    id: string | number;
+    /** Label displayed for the step (can be a string or ReactNode) */
+    label?: ReactNode;
+    /** Callback when this specific step is clicked */
+    onClick?: () => void;
+    /** Status of the step */
+    status?: StepStatus;
+};
+export type StepperClassNames = {
+    /** Class for the connector line */
+    connector?: string;
+    /** Class for the step content wrapper (contains label + description) */
+    content?: string;
+    /** Class for the step description */
+    description?: string;
+    /** Class for the step indicator circle */
+    indicator?: string;
+    /** Class for the content inside the indicator (number, icon) */
+    indicatorContent?: string;
+    /** Class for each li item element */
+    item?: string;
+    /** Class for the step label */
+    label?: string;
+    /** Class for the ol list element */
+    list?: string;
+    /** Class for the root nav element */
+    root?: string;
+    /** Class for the step wrapper (contains indicator + content) */
+    stepWrapper?: string;
+};
+export type StepperIcons = {
+    /** Custom icon for completed status */
+    completed?: ReactNode;
+    /** Custom icon for error status */
+    error?: ReactNode;
+};
+export type Props = VariantProps<typeof stepperVariants> & {
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Custom class names for each element */
+    classNames?: StepperClassNames;
+    /** Whether steps are clickable */
+    clickable?: boolean;
+    /** Index of the current active step (0-based). When provided, step statuses are auto-calculated. */
+    currentStep?: number;
+    /** Stretch the stepper to its container, distributing horizontal steps evenly */
+    fullWidth?: boolean;
+    /** Custom icons for step statuses */
+    icons?: StepperIcons;
+    /** Show connector lines between steps */
+    showConnector?: boolean;
+    /** Size of the step indicators */
+    size?: StepSize;
+    /** Array of steps to display */
+    steps: Step[];
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Layout variant: 'inline' (text beside indicator) or 'stacked' (text below indicator) */
+    variant?: StepVariant;
+    /** Callback when a step is clicked */
+    onStepClick?: (step: Step, index: number) => void;
+};
+/** @deprecated Use Props instead */
+export type StepperProps = Props;

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

@@ -0,0 +1,43 @@
+export declare const stepperVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepListVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepItemVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "inline" | "horizontal" | "stacked" | null | undefined;
+    clickable?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepIndicatorVariants: (props?: ({
+    status?: "error" | "active" | "pending" | "completed" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepContentVariants: (props?: ({
+    variant?: "inline" | "horizontal" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepLabelVariants: (props?: ({
+    status?: "error" | "active" | "pending" | "completed" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "inline" | "horizontal" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepDescriptionVariants: (props?: ({
+    status?: "error" | "active" | "pending" | "completed" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "inline" | "horizontal" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepConnectorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    status?: "error" | "active" | "pending" | "completed" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "inline" | "horizontal" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const horizontalConnectorWrapperVariants: (props?: ({
+    variant?: "inline" | "horizontal" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/Stepper/components/HorizontalStepItem/HorizontalStepItem.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './HorizontalStepItem.types';
+export declare const HorizontalStepItem: import('react').NamedExoticComponent<Props>;

package/dist/lib/components/Stepper/components/HorizontalStepItem/HorizontalStepItem.types.d.ts

@@ -0,0 +1 @@
+export type { Props } from '../StepItem/StepItem.types';

package/dist/lib/components/Stepper/components/StepConnector/StepConnector.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './StepConnector.types';
+export declare const StepConnector: import('react').NamedExoticComponent<Props>;

package/dist/lib/components/Stepper/components/StepConnector/StepConnector.types.d.ts

@@ -0,0 +1,13 @@
+import { StepSize, StepStatus, StepVariant } from '../../Stepper.types';
+export type Props = {
+    /** Additional CSS class */
+    className?: string;
+    /** Orientation of the connector */
+    orientation: 'vertical' | 'horizontal';
+    /** Size of the connector */
+    size: StepSize;
+    /** Status of the step */
+    status: StepStatus;
+    /** Layout variant */
+    variant: StepVariant;
+};

package/dist/lib/components/Stepper/components/StepIndicatorContent/StepIndicatorContent.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './StepIndicatorContent.types';
+export declare const StepIndicatorContent: import('react').NamedExoticComponent<Props>;

package/dist/lib/components/Stepper/components/StepIndicatorContent/StepIndicatorContent.types.d.ts

@@ -0,0 +1,13 @@
+import { StepperIcons, StepSize, StepStatus } from '../../Stepper.types';
+export type Props = {
+    /** Additional CSS class for the content */
+    className?: string;
+    /** Custom icons for step statuses */
+    icons?: StepperIcons;
+    /** Step index (0-based) */
+    index: number;
+    /** Size of the indicator */
+    size: StepSize;
+    /** Status of the step */
+    status: StepStatus;
+};

package/dist/lib/components/Stepper/components/StepItem/StepItem.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './StepItem.types';
+export declare const StepItem: import('react').NamedExoticComponent<Props>;

package/dist/lib/components/Stepper/components/StepItem/StepItem.types.d.ts

@@ -0,0 +1,32 @@
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../../../domain/theme';
+import { Step, StepperClassNames, StepperIcons, StepSize, StepStatus, StepVariant } from '../../Stepper.types';
+import { stepIndicatorVariants } from '../../Stepper.variants';
+export type Props = VariantProps<typeof stepIndicatorVariants> & {
+    /** Custom class names */
+    classNames?: StepperClassNames;
+    /** Whether the step is clickable */
+    clickable: boolean;
+    /** Custom icons for step statuses */
+    icons?: StepperIcons;
+    /** Step index (0-based) */
+    index: number;
+    /** Whether this is the last step */
+    isLast: boolean;
+    /** Status of the next step (for connector coloring) */
+    nextStepStatus?: StepStatus;
+    /** Orientation of the stepper */
+    orientation: 'vertical' | 'horizontal';
+    /** Show connector lines */
+    showConnector: boolean;
+    /** Size of the step indicator */
+    size: StepSize;
+    /** Step data */
+    step: Step;
+    /** Theme override */
+    theme?: Theme;
+    /** Layout variant */
+    variant: StepVariant;
+    /** Callback when step is clicked */
+    onClick?: () => void;
+};

package/dist/lib/components/Stepper/components/VerticalStepItem/VerticalStepItem.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './VerticalStepItem.types';
+export declare const VerticalStepItem: import('react').NamedExoticComponent<Props>;

package/dist/lib/components/Stepper/components/VerticalStepItem/VerticalStepItem.types.d.ts

@@ -0,0 +1 @@
+export type { Props } from '../StepItem/StepItem.types';

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

@@ -0,0 +1,3 @@
+import { StepSize } from '../Stepper.types';
+export declare const ICON_SIZE_MAP: Record<StepSize, number>;
+export declare const CHECK_ICON_SIZE_MAP: Record<StepSize, string>;

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

@@ -0,0 +1 @@
+export { useStepItemLogic } from './useStepItemLogic';

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

@@ -0,0 +1,2 @@
+import { UseStepItemLogicProps, UseStepItemLogicReturn } from './useStepItemLogic.types';
+export declare function useStepItemLogic({ clickable, onClick, step, }: UseStepItemLogicProps): UseStepItemLogicReturn;

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,52 @@
+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;
+    /** Disable the switch and show a spinner while a change is pending */
+    isLoading?: boolean;
+    /** Label text displayed next to switch */
+    label?: string;
+    /** Label text for each state; overrides `label` visually and for assistive technology */
+    labels?: {
+        off: string;
+        on: 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,4 @@
+export declare const switchVariants: (props?: ({
+    variant?: "default" | "black" | null | undefined;
+} & 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,
+ * or a declarative `items` list.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <Tabs.List orientation="horizontal">
+ *     <Tabs.Trigger tab="overview" label="Overview" />
+ *     <Tabs.Trigger tab="settings" label="Settings" />
+ *   </Tabs.List>
+ *
+ *   <Tabs.Content value="overview">Overview content here</Tabs.Content>
+ *   <Tabs.Content value="settings">Settings content here</Tabs.Content>
+ * </Tabs>
+ *
+ * <Tabs
+ *   items={[
+ *     { value: 'overview', label: 'Overview', content: <Overview /> },
+ *     { value: 'settings', label: 'Settings', content: <Settings /> },
+ *   ]}
+ * />
+ * ```
+ *
+ * @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,55 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren, ReactNode } 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 type TabItem = {
+    content: ReactNode;
+    contentClassName?: string;
+    label: string;
+    triggerClassName?: string;
+    value: string;
+};
+export interface Props extends ReactTabs.TabsProps, PropsWithChildren {
+    /** Declarative tabs: renders the list, triggers and contents; falls back to the first item when the active one disappears */
+    items?: TabItem[];
+    /** Additional className for the generated Tabs.List when using `items` */
+    listClassName?: string;
+    /** 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; derived from the Tabs state when omitted */
+    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?: "auto" | "default" | "active" | "inactive" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;