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

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

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { Props } from './MultiSelectDropdown.types';
+/**
+ * A dropdown component for selecting one or multiple options with search functionality.
+ * Displays selected items as badges and supports loading states.
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState<MultiSelectDropdownOption[]>([]);
+ *
+ * <MultiSelectDropdown
+ *   label="Assign team members"
+ *   placeholder="Search members..."
+ *   options={teamMembers}
+ *   value={selected}
+ *   onChange={(e) => setSelected(e.target.value)}
+ *   multiselect
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-multiselectdropdown--docs Storybook}
+ */
+export declare const MultiSelectDropdown: FC<Props>;

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

@@ -0,0 +1,78 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes } from 'react';
+import { multiSelectDropdownVariants } from './MultiSelectDropdown.variants';
+/**
+ * Configuration for a multi-select dropdown option.
+ */
+export type MultiSelectDropdownOption = {
+    /** Unique identifier for the option */
+    id: string | number;
+    /** Display label for the option */
+    label: string;
+    /** Optional badge text displayed next to the label */
+    badge?: string;
+    /** Optional value (defaults to label if not provided) */
+    value?: string;
+};
+type OnChangeFn = (params: {
+    target: {
+        value: MultiSelectDropdownOption[];
+        name: string;
+    };
+}) => void;
+type OnBlurFn = (event: {
+    target: HTMLInputElement | null;
+    type?: string;
+}) => void;
+/**
+ * Props for the MultiSelectDropdown component.
+ * A dropdown that allows selecting one or multiple options with search.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectDropdown
+ *   label="Select users"
+ *   placeholder="Search users..."
+ *   options={[
+ *     { id: 1, label: 'John Doe', badge: 'Admin' },
+ *     { id: 2, label: 'Jane Smith', badge: 'User' },
+ *   ]}
+ *   value={selectedUsers}
+ *   onChange={(e) => setSelectedUsers(e.target.value)}
+ *   multiselect
+ * />
+ * ```
+ */
+export interface Props extends VariantProps<typeof multiSelectDropdownVariants>, Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onBlur'> {
+    /** Whether the dropdown is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Label displayed above the dropdown */
+    label?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Whether multiple options can be selected */
+    multiselect?: boolean;
+    /** Form field name */
+    name?: string;
+    /** Text shown when no options match the search */
+    noOptionsText?: string;
+    /** Available options to select from */
+    options: MultiSelectDropdownOption[];
+    /** Placeholder text when no selection */
+    placeholder?: string;
+    /** Currently selected options */
+    value?: MultiSelectDropdownOption[];
+    /** Additional CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Callback fired when selection changes */
+    onChange?: OnChangeFn;
+    /** Callback fired when the input loses focus */
+    onBlur?: OnBlurFn;
+}
+/** @deprecated Use Props instead */
+export type MultiSelectDropdownProps = Props;
+export {};

package/dist/lib/components/MultiSelectDropdown/MultiSelectDropdown.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 multiSelectDropdownVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/MultiSelectDropdown/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/MultiSelectDropdown/components/Item/Item.types.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '../../../../../domain/theme';
+import { MultiSelectDropdownOption } from '../../MultiSelectDropdown.types';
+export type ItemProps = {
+    option: MultiSelectDropdownOption;
+    theme?: Theme;
+    isSelected?: boolean;
+    className?: string;
+};

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

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

package/dist/lib/components/MultiSelectDropdown/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/MultiSelectDropdown/components/List/List.types.d.ts

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

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

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

package/dist/lib/components/MultiSelectDropdown/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/MultiSelectDropdown/components/Wrapper/Wrapper.types.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+import { PropsWithChildren, RefObject } from 'react';
+import { MultiSelectDropdownOption } from '../MultiSelectDropdown.types';
+export type State = {
+    inputRef: RefObject<HTMLInputElement | null> | null;
+    isLoading?: boolean;
+    isOpen: boolean;
+    noOptionsText?: string;
+    options: MultiSelectDropdownOption[];
+    selectedOptions: MultiSelectDropdownOption[];
+    onSelectOption: (option: MultiSelectDropdownOption) => void;
+    onRemoveOption: (option: MultiSelectDropdownOption) => void;
+    onOpen: (value?: boolean) => void;
+};
+export type MultiSelectDropdownProviderProps = PropsWithChildren & {
+    defaultOptions?: MultiSelectDropdownOption[];
+    isLoading?: boolean;
+    multiselect?: boolean;
+    name?: string;
+    noOptionsText?: string;
+    value?: MultiSelectDropdownOption[];
+    onChange?: (params: {
+        target: {
+            value: MultiSelectDropdownOption[];
+            name: string;
+        };
+    }) => void;
+    onBlur?: (event: {
+        target: HTMLInputElement | null;
+        type?: string;
+    }) => void;
+};

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

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

package/dist/lib/components/MultiSelectDropdown/hooks/useMultiSelectDropdown.d.ts

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

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

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { Props } from './PhoneNumberInput.types';
+/**
+ * A phone number input with country code selector and automatic formatting.
+ * Uses google-libphonenumber for validation and formatting.
+ *
+ * @example
+ * ```tsx
+ * <PhoneNumberInput
+ *   label="Contact Number"
+ *   name="contactPhone"
+ *   defaultCountryCode="US"
+ *   showFlagOnSearch
+ *   showInputFilter
+ *   isRequired
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-phonenumberinput--docs Storybook}
+ */
+export declare const PhoneNumberInput: FC<Props>;

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

@@ -0,0 +1,51 @@
+import { RegionCode } from 'google-libphonenumber';
+import { InputHTMLAttributes } from 'react';
+/**
+ * Props for the PhoneNumberInput component.
+ * An input with country code selector and phone number formatting.
+ *
+ * @example
+ * ```tsx
+ * <PhoneNumberInput
+ *   label="Phone Number"
+ *   name="phone"
+ *   defaultCountryCode="US"
+ *   placeholder="Enter phone number"
+ *   showFlagOnSearch
+ * />
+ * ```
+ */
+export type Props = InputHTMLAttributes<HTMLInputElement> & {
+    /** Default country code for the selector (e.g., 'US', 'GB') */
+    defaultCountryCode?: RegionCode;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Additional CSS classes for the helper text */
+    helperTextClassName?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Label displayed above the input */
+    label?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Whether to show country flags in the search dropdown */
+    showFlagOnSearch?: boolean;
+    /** Whether to show the country filter input */
+    showInputFilter?: boolean;
+    /** Whether to show country names in the search dropdown */
+    showNameOnSearch?: boolean;
+    /** Whether to show the placeholder text */
+    showPlaceHolder?: boolean;
+    /** Additional CSS classes for the wrapper */
+    wrapperClassName?: string;
+};

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

@@ -0,0 +1,4 @@
+export declare const phoneNumberInputVariants: (props?: ({
+    variant?: "error" | "default" | 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/PhoneNumberInput/components/FlagContent/FlagContent.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const FlagContent: FC;

package/dist/lib/components/PhoneNumberInput/components/FlagSelectorList/FlagSelectorList.d.ts

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

package/dist/lib/components/PhoneNumberInput/components/FlagSelectorList/FlagSelectorList.types.d.ts

@@ -0,0 +1,5 @@
+import { Props as PhoneNumberProps } from '../../PhoneNumberInput.types';
+export type Props = {
+    showFlagOnSearch: Required<PhoneNumberProps>['showFlagOnSearch'];
+    showNameOnSearch: Required<PhoneNumberProps>['showNameOnSearch'];
+};

package/dist/lib/components/PhoneNumberInput/components/FlagSelectorWrapper/FlagSelectorWrapper.d.ts

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

package/dist/lib/components/PhoneNumberInput/components/FlagSelectorWrapper/FlagSelectorWrapper.types.d.ts

@@ -0,0 +1,8 @@
+import { Props as PhoneNumberProps } from '../../PhoneNumberInput.types';
+export type Props = {
+    placeholder: PhoneNumberProps['placeholder'];
+    showFlagOnSearch: Required<PhoneNumberProps>['showFlagOnSearch'];
+    showInputFilter: Required<PhoneNumberProps>['showInputFilter'];
+    showNameOnSearch: Required<PhoneNumberProps>['showNameOnSearch'];
+    showPlaceHolder: PhoneNumberProps['showPlaceHolder'];
+};

package/dist/lib/components/PhoneNumberInput/components/TruncateText/TruncateText.d.ts

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

package/dist/lib/components/PhoneNumberInput/components/TruncateText/TruncateText.types.d.ts

@@ -0,0 +1,4 @@
+export type Props = {
+    text: string;
+    prefix: string;
+};

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

@@ -0,0 +1,3 @@
+import { ComponentRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { Props } from '../PhoneNumberInput.types';
+export declare const Wrapper: ForwardRefExoticComponent<Props & RefAttributes<ComponentRef<'input'>>>;

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

@@ -0,0 +1,2 @@
+export { FlagSelectorList } from './FlagSelectorList/FlagSelectorList';
+export { Wrapper } from './Wrapper';

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

@@ -0,0 +1,3 @@
+export * from './phone-number.context';
+export * from './phone-number.provider';
+export * from './phone-number.hook';

package/dist/lib/components/PhoneNumberInput/contexts/phone-number.context.d.ts

@@ -0,0 +1,20 @@
+import { RegionCode } from 'google-libphonenumber';
+import { FC } from 'react';
+export type Country = {
+    code: RegionCode;
+    flag: FC;
+    name: string;
+    prefix: string;
+};
+export type ContextType = {
+    countries: Country[];
+    isOpenSelector: boolean;
+    selectedCountry: Country;
+    termOfSearch: string;
+    value: string;
+    handleOpenSelector: (status?: boolean) => void;
+    handleSelectCountry: (country: Country) => void;
+    onChangeTermOfSearch: (term: string) => void;
+    onChangeValue: (value: string) => void;
+};
+export declare const PhoneNumberContext: import('react').Context<ContextType>;

package/dist/lib/components/PhoneNumberInput/contexts/phone-number.hook.d.ts

@@ -0,0 +1,2 @@
+import { ContextType } from './phone-number.context';
+export declare const usePhoneNumberContext: () => ContextType;

package/dist/lib/components/PhoneNumberInput/contexts/phone-number.provider.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+type Props = PropsWithChildren & {
+    defaultCountryCode: string;
+};
+export declare const PhoneNumberProvider: FC<Props>;
+export {};

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

@@ -0,0 +1,2 @@
+import { Country } from '../contexts';
+export declare const getPhoneMask: (country: Country) => string | undefined;

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

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { Props } from './PieChart.types';
+/**
+ * A doughnut/pie chart component for data visualization.
+ * Built on Chart.js with support for center text labels.
+ *
+ * @example
+ * ```tsx
+ * <PieChart
+ *   values={[25, 75]}
+ *   colors={['#94a3b8', '#22c55e']}
+ *   title="75%"
+ *   subtitle="Progress"
+ *   cutoutPercentage={80}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-piechart--docs Storybook}
+ */
+export declare const PieChart: FC<Props>;

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

@@ -0,0 +1,90 @@
+type HexColor = `#${string}`;
+type CSSColor = `var(--${string})` | `rgb(${number}, ${number}, ${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})`;
+/**
+ * Props for the PieChart component.
+ * A doughnut/pie chart built on Chart.js for data visualization.
+ *
+ * @example
+ * ```tsx
+ * <PieChart
+ *   values={[30, 70]}
+ *   colors={['#ef4444', '#22c55e']}
+ *   title="70%"
+ *   subtitle="Complete"
+ *   cutoutPercentage={75}
+ * />
+ * ```
+ */
+export type Props = {
+    /**
+     * Array of hexadecimal colors for the borders of the pie chart segments
+     * @default ['#FFFFFF', '#FFFFFF']
+     */
+    borderColors?: HexColor[] | CSSColor[] | (HexColor | CSSColor)[];
+    /**
+     * Width of the border for pie chart segments in pixels
+     * @default 0
+     */
+    borderWidth?: number;
+    /**
+     * Array of hexadecimal colors for filling the pie chart segments
+     * @default ['#525252', '#00D492']
+     */
+    colors?: HexColor[] | CSSColor[] | (HexColor | CSSColor)[];
+    /**
+     * Percentage of the pie chart's center that should be cut out, creating a donut chart effect
+     * @default 80
+     */
+    cutoutPercentage?: number;
+    /**
+     * Whether to redraw the entire chart when props change
+     * @default true
+     */
+    redraw?: boolean;
+    /**
+     * Hexadecimal color for the subtitle text
+     * @default '#6B7280'
+     */
+    subtitleColor?: HexColor;
+    /**
+     * Font size for the subtitle in pixels
+     * @default 14
+     */
+    subtitleFontSize?: number;
+    /**
+     * Font weight for the subtitle
+     * @default 'normal'
+     */
+    subtitleFontWeight?: 'bold' | 'normal';
+    /**
+     * Hexadecimal color for the title text
+     * @default '#111827'
+     */
+    titleColor?: HexColor;
+    /**
+     * Font size for the title in pixels
+     * @default 16
+     */
+    titleFontSize?: number;
+    /**
+     * Font weight for the title
+     * @default 'bold'
+     */
+    titleFontWeight?: 'bold' | 'normal';
+    /**
+     * Array of numeric values representing data for each segment of the pie chart
+     * @required
+     */
+    values: number[];
+} /**
+ * Union type that enforces either:
+ * - No title and no subtitle
+ * - Title with optional subtitle
+ */ & ({
+    title?: undefined;
+    subtitle?: never;
+} | {
+    title: string;
+    subtitle?: string;
+});
+export {};

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

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

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../../domain/theme';
+import { progressBarFillVariants } from './ProgressBar.variants';
+export interface Props extends VariantProps<typeof progressBarFillVariants> {
+    /** Additional CSS classes for the outer wrapper */
+    className?: string;
+    /** Custom CSS class for the progress bar fill (e.g., "bg-purple-500") */
+    fillClassName?: string;
+    /** Content displayed on the left side (e.g., "26%") */
+    leftContent?: ReactNode;
+    /** Progress percentage (0-100) */
+    percent: number;
+    /** Content displayed on the right side (e.g., "130/500 GB") */
+    rightContent?: ReactNode;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Custom CSS class for the track background (e.g., "bg-gray-200") */
+    trackClassName?: string;
+}
+/** @deprecated Use Props instead */
+export type ProgressBarProps = Props;

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

@@ -0,0 +1,4 @@
+export declare const progressBarTrackVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const progressBarFillVariants: (props?: ({
+    status?: "success" | "warning" | "error" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { Props } from './Radio.types';
+/**
+ * A radio button component with label and optional description.
+ * Use RadioGroup to manage a group of radio buttons.
+ *
+ * @example
+ * ```tsx
+ * <Radio
+ *   name="plan"
+ *   value="basic"
+ *   label="Basic Plan"
+ *   description="Free forever"
+ *   checked={plan === 'basic'}
+ *   onChange={(value) => setPlan(value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radio--docs Storybook}
+ */
+declare const Radio: FC<Props>;
+export { Radio };

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

@@ -0,0 +1,46 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../../domain/theme';
+import { radioVariants } from './Radio.variants';
+/**
+ * Props for the Radio component.
+ *
+ * @example
+ * ```tsx
+ * <Radio
+ *   name="plan"
+ *   value="basic"
+ *   label="Basic Plan"
+ *   checked={selected === 'basic'}
+ *   onChange={(value) => setSelected(value)}
+ * />
+ * ```
+ */
+export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'>, VariantProps<typeof radioVariants> {
+    /** Whether the radio is checked */
+    checked?: boolean;
+    /** Initial checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Whether the radio is disabled */
+    disabled?: boolean;
+    /** Label text or element */
+    label?: string | ReactNode;
+    /** CSS classes for the label text */
+    labelTextClassName?: string;
+    /** Form field name (groups radios together) */
+    name: string;
+    /** Description text below the label */
+    description?: string | ReactNode;
+    /** CSS classes for the description */
+    descriptionClassName?: string;
+    /** Value submitted when selected */
+    value: string;
+    /** CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Callback when selected */
+    onChange?: (value: string) => void;
+}
+/** @deprecated Use Props instead */
+export type RadioProps = Props;

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

@@ -0,0 +1,8 @@
+export declare const wrapperRadioVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const radioVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const labelRadioVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { Props } from './RadioCard.types';
+/**
+ * A card-style radio button for visually prominent selection options.
+ * Use RadioCardGroup to manage a group of radio cards.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard
+ *   name="tier"
+ *   value="enterprise"
+ *   label="Enterprise"
+ *   description="Custom pricing"
+ *   checked={tier === 'enterprise'}
+ *   onChange={(value) => setTier(value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiocard--docs Storybook}
+ */
+declare const RadioCard: FC<Props>;
+export { RadioCard };