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

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

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentRef, ReactNode, RefObject } from 'react';
+import { Option } from '../../Autocomplete.types';
+import { autocompleteVariants } from '../../Autocomplete.variants';
+export interface Props extends VariantProps<typeof autocompleteVariants> {
+    className?: string;
+    inputRef: RefObject<ComponentRef<'input'> | null>;
+    wrapperRef: RefObject<ComponentRef<'div'> | null>;
+    options: Option[];
+    placeholder: string | ReactNode;
+    placeholderClassName?: string;
+    onClick(value: string): void;
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+export * from './useAutocomplete';
+export * from './useNavigationList';

package/dist/lib/components/Autocomplete/hooks/useAutocomplete.d.ts

@@ -0,0 +1,17 @@
+import { ChangeEvent, ComponentRef, RefObject } from 'react';
+import { Option } from '../Autocomplete.types';
+type UseAutocompleteProps = {
+    options: Option[];
+    inputRef: RefObject<ComponentRef<'input'> | null>;
+    wrapperRef: RefObject<ComponentRef<'div'> | null>;
+    onChange(value: string): void;
+};
+export declare const useAutocomplete: ({ options, inputRef, wrapperRef, onChange, }: UseAutocompleteProps) => {
+    inputRef: RefObject<HTMLInputElement | null>;
+    newOptions: Option[];
+    showOptions: boolean;
+    value: string;
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleSelectValue: (value: string) => void;
+};
+export {};

package/dist/lib/components/Autocomplete/hooks/useNavigationList.d.ts

@@ -0,0 +1,10 @@
+import { ComponentRef, RefObject } from 'react';
+import { Option } from '../Autocomplete.types';
+type UseNavigationListProps = {
+    ulRef: RefObject<ComponentRef<'ul'> | null>;
+    inputRef: RefObject<ComponentRef<'input'> | null>;
+    wrapperRef: RefObject<ComponentRef<'div'> | null>;
+    options: Option[];
+};
+export declare const useNavigationUlList: ({ ulRef, inputRef, wrapperRef, options, }: UseNavigationListProps) => void;
+export {};

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

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { Props } from './Badge.types';
+/**
+ * A badge/tag component for status indicators and labels.
+ * Supports multiple variants, icons, loading state, and dismissible mode.
+ *
+ * @example
+ * ```tsx
+ * // Basic badge
+ * <Badge label="Active" variant="success" />
+ *
+ * // Badge with icon
+ * <Badge label="Settings" leftIcon={<SettingsIcon />} />
+ *
+ * // Dismissible badge
+ * <Badge
+ *   label="Tag"
+ *   dismissible
+ *   onDismiss={() => removeTag()}
+ * />
+ *
+ * // Clickable badge
+ * <Badge
+ *   label="Filter"
+ *   onClick={() => applyFilter()}
+ * />
+ *
+ * // Loading badge
+ * <Badge label="Processing" loading />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-badge--docs Storybook}
+ */
+export declare const Badge: FC<Props>;

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

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
+import { badgeVariants } from './Badge.variants';
+/**
+ * Props for the Badge component.
+ *
+ * @example
+ * ```tsx
+ * <Badge label="New" variant="success" />
+ * <Badge label="Pending" variant="warning" />
+ * <Badge label="Error" variant="error" dismissible onDismiss={() => {}} />
+ * <Badge label="With Icon" leftIcon={<Icon />} />
+ * ```
+ */
+export type Props = VariantProps<typeof badgeVariants> & {
+    /** Additional CSS classes */
+    className?: string;
+    /** Show dismiss button */
+    dismissible?: true;
+    /** Allow text selection (default: true) */
+    isSelectable?: boolean;
+    /** Badge text content */
+    label: string;
+    /** Icon displayed on the left */
+    leftIcon?: ReactNode;
+    /** Show loading spinner */
+    loading?: boolean;
+    /** Icon displayed on the right (when not dismissible) */
+    rightIcon?: ReactNode;
+    /** Click handler (makes badge interactive) */
+    onClick?: VoidFunction;
+    /** Callback when dismiss button clicked */
+    onDismiss?: VoidFunction;
+};
+/** @deprecated Use Props instead */
+export type BadgeProps = Props;

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

@@ -0,0 +1,8 @@
+export declare const badgeVariants: (props?: ({
+    variant?: "success" | "info" | "warning" | "danger" | "default" | "violet" | "orange" | null | undefined;
+    size?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const buttonDismissVariants: (props?: ({
+    variant?: "success" | "info" | "warning" | "danger" | "default" | "violet" | "orange" | null | undefined;
+    size?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { Props } from './Breadcrumb.types';
+/**
+ * A breadcrumb navigation component showing the current location in a hierarchy.
+ *
+ * @example
+ * ```tsx
+ * // Basic breadcrumb
+ * <Breadcrumb
+ *   steps={[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Settings', to: '/settings' },
+ *     { label: 'Profile', isActive: true },
+ *   ]}
+ * />
+ *
+ * // With custom Link component (e.g., react-router)
+ * <Breadcrumb
+ *   steps={[
+ *     { label: 'Dashboard', to: '/dashboard', component: Link },
+ *     { label: 'Users', to: '/users', component: Link },
+ *     { label: 'Edit User', isActive: true },
+ *   ]}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-breadcrumb--docs Storybook}
+ */
+export declare const Breadcrumb: FC<Props>;

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

@@ -0,0 +1,43 @@
+import { VariantProps } from 'class-variance-authority';
+import { FC, HTMLAttributes } from 'react';
+import { Theme } from '../../../domain/theme';
+import { breadcrumbVariants } from './Breadcrumb.variants';
+/**
+ * A single step in the breadcrumb navigation.
+ */
+export type Step = {
+    /** Display text for the breadcrumb item */
+    label: string;
+    /** URL to navigate to when clicked */
+    to?: string;
+    /** Link target (_self or _blank) */
+    target?: '_self' | '_blank';
+    /** Whether this step is the current/active page */
+    isActive?: boolean;
+    /** Custom component to render (e.g., Link from react-router) */
+    component?: FC<any>;
+};
+/**
+ * Props for the Breadcrumb component.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   steps={[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Products', to: '/products' },
+ *     { label: 'Current Page', isActive: true },
+ *   ]}
+ * />
+ * ```
+ */
+export interface Props extends VariantProps<typeof breadcrumbVariants>, HTMLAttributes<HTMLOListElement> {
+    /** Array of breadcrumb steps */
+    steps: Step[];
+    /** CSS classes for the nav wrapper */
+    wrapperClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+}
+/** @deprecated Use Props instead */
+export type BreadcrumbProps = Props;

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

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

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 @@
+export * from './Item/Item';

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" | 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;
+    htmlFor: 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,6 @@
+export type Props = {
+    error?: string;
+    errorClassName?: string;
+    helperText?: string;
+    helperTextClassName?: 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 };