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

package/dist/lib/components/Breadcrumb/components/BackButton/BackButton.types.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '../../../../domain/theme';
+import { BackButton as BackButtonConfig } from '../../Breadcrumb.types';
+export interface Props extends BackButtonConfig {
+    theme?: Theme;
+}
+/** @deprecated Use Props instead */
+export type BackButtonProps = Props;

package/dist/lib/components/Breadcrumb/components/BackButton/BackButton.variants.d.ts

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

package/dist/lib/components/Breadcrumb/components/CollapsedSteps/CollapsedSteps.d.ts

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

package/dist/lib/components/Breadcrumb/components/CollapsedSteps/CollapsedSteps.types.d.ts

@@ -0,0 +1,5 @@
+import { Step } from '../../Breadcrumb.types';
+export type Props = {
+    label: string;
+    steps: Step[];
+};

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

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

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

@@ -0,0 +1,8 @@
+import { Theme } from '../../../../domain/theme';
+import { Step } from '../../Breadcrumb.types';
+export interface Props extends Step {
+    isLast: boolean;
+    theme?: Theme;
+}
+/** @deprecated Use Props instead */
+export type ItemProps = Props;

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

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

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

@@ -0,0 +1,3 @@
+export * from './BackButton/BackButton';
+export * from './Item/Item';
+export * from './CollapsedSteps/CollapsedSteps';

package/dist/lib/components/Breadcrumb/hooks/useBreadcrumb.d.ts

@@ -0,0 +1,3 @@
+export declare const useBreadcrumb: () => {
+    isInsideRouter: boolean;
+};

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

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { Props } from './Button.types';
+/**
+ * A customizable button component with multiple variants and styles.
+ *
+ * @example
+ * ```tsx
+ * // Primary button (default)
+ * <Button>Click me</Button>
+ *
+ * // Secondary button
+ * <Button variant="secondary">Secondary</Button>
+ *
+ * // Danger button
+ * <Button variant="danger">Delete</Button>
+ *
+ * // Link style button
+ * <Button variant="link">Learn more</Button>
+ *
+ * // Circle icon button
+ * <Button shape="circle" size="large"><Icon /></Button>
+ *
+ * // Compact button
+ * <Button appearance="compact">Compact</Button>
+ *
+ * // As child (renders child element with button styles)
+ * <Button asChild><a href="/page">Link</a></Button>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-button--docs Storybook}
+ */
+declare const Button: FC<Props>;
+export { Button };

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

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+import { ButtonHTMLAttributes, Ref } from 'react';
+import { Theme } from '../../domain/theme';
+import { buttonVariants } from './Button.variants';
+/**
+ * Props for the Button component.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary">Click me</Button>
+ * <Button variant="secondary" disabled>Disabled</Button>
+ * <Button variant="danger" shape="circle"><TrashIcon /></Button>
+ * ```
+ */
+export interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>, VariantProps<typeof buttonVariants> {
+    /** Ref to the underlying button element */
+    ref?: Ref<HTMLButtonElement>;
+    /** Merge props onto child element instead of rendering a button */
+    asChild?: boolean;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+}
+/** @deprecated Use Props instead */
+export type ButtonProps = Props;

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

@@ -0,0 +1,8 @@
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "danger" | "primary" | "secondary" | "tertiary" | null | undefined;
+    shape?: "circle" | "pill" | null | undefined;
+    version?: "default" | "alternate" | null | undefined;
+    disabled?: boolean | null | undefined;
+    size?: "medium" | "large" | null | undefined;
+    appearance?: "compact" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { Props } from './ButtonGroup.types';
+/**
+ * A segmented toggle button group for single selection among options.
+ *
+ * @example
+ * ```tsx
+ * // Simple button group
+ * <ButtonGroup
+ *   name="processor"
+ *   options={[
+ *     { value: 'cpu', label: 'CPU' },
+ *     { value: 'gpu', label: 'GPU' },
+ *   ]}
+ *   defaultValue="cpu"
+ *   onValueChange={(value) => setProcessor(value)}
+ * />
+ *
+ * // With descriptions
+ * <ButtonGroup
+ *   name="instance-type"
+ *   label="Instance Type"
+ *   isRequired
+ *   options={[
+ *     { value: 'standard', label: 'Standard', description: 'Balanced compute resources' },
+ *     { value: 'spot', label: 'Spot', description: 'Cost-effective for flexible workloads' },
+ *   ]}
+ *   onValueChange={setInstanceType}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-buttongroup--docs Storybook}
+ */
+export declare const ButtonGroup: FC<Props>;

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

@@ -0,0 +1,100 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { buttonGroupVariants } from './ButtonGroup.variants';
+/** Horizontal text alignment for label and description */
+export type TextAlign = 'left' | 'center' | 'right';
+/**
+ * Configuration for a single button option in the ButtonGroup.
+ */
+export type ButtonGroupOption = {
+    /** Optional description displayed below the label */
+    description?: string;
+    /** Whether this specific option is disabled */
+    disabled?: boolean;
+    /** Optional icon to display before the label */
+    icon?: ReactNode;
+    /** The label text displayed for this option */
+    label: string;
+    /** Optional secondary label displayed right-aligned on the same line as the label */
+    secondaryLabel?: string;
+    /** The value associated with this option */
+    value: string;
+};
+/**
+ * Props for the ButtonGroup component.
+ *
+ * @example
+ * ```tsx
+ * // Simple button group
+ * <ButtonGroup
+ *   name="processor"
+ *   options={[
+ *     { value: 'cpu', label: 'CPU' },
+ *     { value: 'gpu', label: 'GPU' },
+ *   ]}
+ *   defaultValue="cpu"
+ *   onValueChange={(value) => setProcessor(value)}
+ * />
+ *
+ * // With descriptions
+ * <ButtonGroup
+ *   name="instance-type"
+ *   options={[
+ *     { value: 'standard', label: 'Standard', description: 'Balanced compute resources' },
+ *     { value: 'spot', label: 'Spot', description: 'Cost-effective for flexible workloads' },
+ *   ]}
+ *   onValueChange={setInstanceType}
+ * />
+ * ```
+ */
+export type Props = VariantProps<typeof buttonGroupVariants> & {
+    /** CSS classes for the button group container */
+    className?: string;
+    /** CSS classes for the content wrapper inside each item */
+    contentClassName?: string;
+    /** Initially selected value (uncontrolled mode) */
+    defaultValue?: string;
+    /** Horizontal alignment of the description text (default: 'left') */
+    descriptionAlign?: TextAlign;
+    /** CSS classes for description text */
+    descriptionClassName?: string;
+    /** Animation duration in seconds (default: 0.3) */
+    duration?: number;
+    /** Error message to display */
+    error?: string;
+    /** CSS classes for error message */
+    errorClassName?: string;
+    /** Helper text displayed below the button group */
+    helperText?: string;
+    /** CSS classes for helper text */
+    helperTextClassName?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** CSS classes for individual button items */
+    itemClassName?: string;
+    /** CSS classes for the label text inside items */
+    itemLabelClassName?: string;
+    /** Horizontal alignment of the label text (default: 'left') */
+    labelAlign?: TextAlign;
+    /** Label displayed above the button group */
+    label?: string | ReactNode;
+    /** CSS classes for the label */
+    labelClassName?: string;
+    /** Form field name (required for form submission) */
+    name: string;
+    /** Array of button options */
+    options: ButtonGroupOption[];
+    /** CSS classes for the animated pill */
+    pillClassName?: string;
+    /** CSS classes for the required asterisk */
+    requiredClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Currently selected value (controlled mode) */
+    value?: string;
+    /** CSS classes for the outer wrapper */
+    wrapperClassName?: string;
+    /** Callback when selection changes */
+    onValueChange?: (value: string) => void;
+};

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

@@ -0,0 +1,14 @@
+/**
+ * Animated pill background (selected state indicator)
+ */
+export declare const buttonGroupPillVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Wrapper variants for the outer container with label
+ */
+export declare const buttonGroupWrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Group container variants - no outer border, just flex container
+ */
+export declare const buttonGroupVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.d.ts

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

package/dist/lib/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.types.d.ts

@@ -0,0 +1,23 @@
+import { KeyboardEvent } from 'react';
+import { ButtonGroupOption, TextAlign } from '../../ButtonGroup.types';
+import { AnimationDirection } from '../../hooks';
+export type Props = {
+    animationDirection: AnimationDirection;
+    className?: string;
+    contentClassName?: string;
+    descriptionAlign?: TextAlign;
+    descriptionClassName?: string;
+    duration?: number;
+    labelAlign?: TextAlign;
+    hasDescription: boolean;
+    index: number;
+    isDisabled: boolean;
+    isFirst: boolean;
+    isLast: boolean;
+    isSelected: boolean;
+    labelClassName?: string;
+    option: ButtonGroupOption;
+    value: string;
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>, index: number) => void;
+    onSelect: (value: string) => void;
+};

package/dist/lib/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.variants.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Individual button item variants - outer container with borders
+ */
+export declare const buttonGroupItemVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    isFirst?: boolean | null | undefined;
+    isLast?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Inner content container (the content layer above the pill)
+ */
+export declare const buttonGroupItemContentVariants: (props?: ({
+    hasDescription?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Label text variants inside button item
+ */
+export declare const buttonGroupLabelVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    labelAlign?: "center" | "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Description text variants inside button item
+ */
+export declare const buttonGroupDescriptionVariants: (props?: ({
+    descriptionAlign?: "center" | "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/ButtonGroup/components/ButtonGroupItem/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonGroupItem } from './ButtonGroupItem';
+export type { Props as ButtonGroupItemProps } from './ButtonGroupItem.types';

package/dist/lib/components/ButtonGroup/components/ButtonGroupLabel/ButtonGroupLabel.d.ts

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

package/dist/lib/components/ButtonGroup/components/ButtonGroupLabel/ButtonGroupLabel.types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type Props = {
+    className?: string;
+    id: string;
+    isRequired?: boolean;
+    label: ReactNode | string;
+    requiredClassName?: string;
+};

package/dist/lib/components/ButtonGroup/components/ButtonGroupLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonGroupLabel } from './ButtonGroupLabel';
+export type { Props as ButtonGroupLabelProps } from './ButtonGroupLabel.types';

package/dist/lib/components/ButtonGroup/components/ButtonGroupMessage/ButtonGroupMessage.d.ts

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

package/dist/lib/components/ButtonGroup/components/ButtonGroupMessage/ButtonGroupMessage.types.d.ts

@@ -0,0 +1,8 @@
+export type Props = {
+    error?: string;
+    errorClassName?: string;
+    errorId?: string;
+    helperText?: string;
+    helperTextClassName?: string;
+    helperTextId?: string;
+};

package/dist/lib/components/ButtonGroup/components/ButtonGroupMessage/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonGroupMessage } from './ButtonGroupMessage';
+export type { Props as ButtonGroupMessageProps } from './ButtonGroupMessage.types';

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

@@ -0,0 +1,3 @@
+export { ButtonGroupItem } from './ButtonGroupItem';
+export { ButtonGroupLabel } from './ButtonGroupLabel';
+export { ButtonGroupMessage } from './ButtonGroupMessage';

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

@@ -0,0 +1,2 @@
+export { useButtonGroup } from './useButtonGroup';
+export type { AnimationDirection, UseButtonGroupProps, UseButtonGroupReturn, } from './useButtonGroup.types';

package/dist/lib/components/ButtonGroup/hooks/useButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import { UseButtonGroupProps, UseButtonGroupReturn } from './useButtonGroup.types';
+export type { AnimationDirection } from './useButtonGroup.types';
+export declare const useButtonGroup: ({ defaultValue, disabled, options, value, onValueChange, }: UseButtonGroupProps) => UseButtonGroupReturn;

package/dist/lib/components/ButtonGroup/hooks/useButtonGroup.types.d.ts

@@ -0,0 +1,18 @@
+import { KeyboardEvent, RefObject } from 'react';
+import { ButtonGroupOption } from '../ButtonGroup.types';
+export type AnimationDirection = 'left' | 'right' | 'none';
+export type UseButtonGroupProps = {
+    defaultValue?: string;
+    disabled?: boolean;
+    options: ButtonGroupOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+export type UseButtonGroupReturn = {
+    animationDirection: AnimationDirection;
+    groupRef: RefObject<HTMLDivElement | null>;
+    id: string;
+    selected: string | undefined;
+    handleKeyDown: (event: KeyboardEvent<HTMLButtonElement>, currentIndex: number) => void;
+    handleSelect: (value: string) => void;
+};

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

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { Props } from './Card.types';
+/**
+ * A container card component with optional hover and active states.
+ *
+ * @example
+ * ```tsx
+ * // Basic card
+ * <Card>
+ *   <h3>Card Title</h3>
+ *   <p>Card content goes here</p>
+ * </Card>
+ *
+ * // Hoverable card
+ * <Card canHover onClick={handleClick}>
+ *   Hover to see effect
+ * </Card>
+ *
+ * // Active/selected card
+ * <Card isActive>
+ *   This card is selected
+ * </Card>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-card--docs Storybook}
+ */
+declare const Card: FC<Props>;
+export { Card };

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

@@ -0,0 +1,27 @@
+import { VariantProps } from 'class-variance-authority';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { Theme } from '../../domain/theme';
+import { cardVariants } from './Card.variants';
+/**
+ * Props for the Card component.
+ *
+ * @example
+ * ```tsx
+ * <Card>Basic card content</Card>
+ * <Card canHover>Hoverable card</Card>
+ * <Card isActive>Active/selected card</Card>
+ * ```
+ */
+export interface Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants>, PropsWithChildren {
+    /** Enable hover effect */
+    canHover?: boolean;
+    component?: 'div' | 'article' | 'section' | 'aside' | 'li';
+    /** Show active/selected state */
+    isActive?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** CSS classes for the outer wrapper */
+    wrapperClassName?: string;
+}
+/** @deprecated Use Props instead */
+export type CardProps = Props;

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

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

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

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { Props } from './Checkbox.types';
+/**
+ * A checkbox component built on Radix UI primitives.
+ * Supports controlled and uncontrolled modes with label support.
+ *
+ * @example
+ * ```tsx
+ * // Basic checkbox with label
+ * <Checkbox label="Accept terms and conditions" />
+ *
+ * // Controlled checkbox
+ * <Checkbox
+ *   label="Subscribe to newsletter"
+ *   checked={subscribed}
+ *   onChange={(checked) => setSubscribed(checked)}
+ * />
+ *
+ * // Disabled checkbox
+ * <Checkbox label="Premium feature" disabled />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-checkbox--docs Storybook}
+ */
+declare const Checkbox: FC<Props>;
+export { Checkbox };

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

@@ -0,0 +1,41 @@
+import { CheckboxProps as CheckboxPropsPrimitive } from '@radix-ui/react-checkbox';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { checkboxVariants } from './Checkbox.variants';
+/**
+ * Props for the Checkbox component.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox label="Accept terms" onChange={(checked) => setAccepted(checked)} />
+ * <Checkbox label="Remember me" defaultChecked />
+ * <Checkbox label="Disabled option" disabled />
+ * ```
+ */
+export interface Props extends Omit<CheckboxPropsPrimitive, 'onChange' | 'checked'>, Omit<VariantProps<typeof checkboxVariants>, 'checked'> {
+    /** ID of element that labels the checkbox for accessibility */
+    ariaLabelledBy?: string;
+    checked?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Initial checked state */
+    defaultChecked?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** HTML id attribute */
+    id?: string;
+    /** Label text displayed next to checkbox */
+    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;
+    /** Callback when checked state changes */
+    onChange?: (checked: boolean) => void;
+}
+/** @deprecated Use Props instead */
+export type CheckboxProps = Props;

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

@@ -0,0 +1,5 @@
+export declare const checkboxVariants: (props?: ({
+    variant?: "default" | null | undefined;
+    checked?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { Props } from './CheckboxCard.types';
+/**
+ * A card-style checkbox for multi-select options with a title and a description.
+ * The whole card is clickable and reflects the checked state on its border.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard
+ *   name="events"
+ *   value="instance.created"
+ *   label="Instance created"
+ *   description="Sent when a new instance finishes provisioning"
+ *   checked={events.includes('instance.created')}
+ *   onChange={(checked) => toggle('instance.created', checked)}
+ * />
+ * ```
+ */
+declare const CheckboxCard: FC<Props>;
+export { CheckboxCard };

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { Props as CheckboxProps } from '../Checkbox/Checkbox.types';
+export type Props = Pick<CheckboxProps, 'checked' | 'className' | 'defaultChecked' | 'disabled' | 'id' | 'name' | 'theme' | 'value' | 'onChange'> & {
+    /** Additional CSS classes for the text column */
+    contentClassName?: string;
+    /** Secondary text displayed below the label */
+    description?: ReactNode;
+    /** Primary text of the option */
+    label: ReactNode;
+    /** Additional CSS classes for the card */
+    wrapperClassName?: string;
+};
+export type CheckboxCardProps = Props;

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

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { Props } from './Collapse.types';
+/**
+ * Animates its children between a collapsed and an expanded height,
+ * respecting `prefers-reduced-motion`. Overflow is only clipped while the
+ * animation runs, so dropdowns or tooltips inside the content are never cut.
+ *
+ * @example
+ * ```tsx
+ * <Button aria-expanded={isOpen} aria-controls="advanced" onClick={toggle}>
+ *   Advanced options
+ * </Button>
+ * <Collapse id="advanced" isOpen={isOpen} keepMounted>
+ *   <AdvancedOptions />
+ * </Collapse>
+ * ```
+ */
+declare const Collapse: FC<Props>;
+export { Collapse };

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    /** Additional CSS classes for the animated wrapper */
+    className?: string;
+    /** Margin applied while collapsed, so the closed state does not leave a gap */
+    collapsedMarginTop?: number | string;
+    /** Id of the animated region, to reference it from `aria-controls` */
+    id?: string;
+    /** Whether the content is expanded */
+    isOpen: boolean;
+    /** Keep the children mounted while collapsed (hidden and inert) instead of unmounting them */
+    keepMounted?: boolean;
+    /** Fired once the collapse animation has finished and the children are unmounted */
+    onExitComplete?: () => void;
+};
+export type CollapseProps = Props;