@konstructio/ui 0.1.2-alpha.99 → 0.1.4

package/dist/lib/components/Filter/components/DateRangeFilterDropdown/hooks/useDateRangeFilterDropdown/useDateRangeFilterDropdown.d.ts

@@ -0,0 +1,12 @@
+import { DateRange, DateRangeWithTime } from '../../../../../DateRangePicker/DateRangePicker.types';
+import { Props } from '../../DateRangeFilterDropdown.types';
+export declare const useDateRangeFilterDropdown: ({ defaultRange, onApply, countryCode, }: Pick<Props, "defaultRange" | "onApply" | "countryCode">) => {
+    id: string;
+    appliedRange: string | undefined;
+    isOpen: boolean;
+    selectedRange: DateRange | undefined;
+    handleApply: () => void;
+    handleOpenChange: (open: boolean) => void;
+    handleRangeChange: (range: DateRangeWithTime) => void;
+    handleReset: () => void;
+};

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

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

package/dist/lib/components/Filter/components/FilterDropdown/FilterDropdown.types.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export type Props = PropsWithChildren & {
+    isOpen: boolean;
+    trigger: ReactNode;
+    triggerClassName?: string;
+    position?: 'left' | 'right';
+    contentClassName?: string;
+    onOpenChange: (open: boolean) => void;
+};

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

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

package/dist/lib/components/Filter/components/ResetButton/ResetButton.types.d.ts

@@ -1,5 +1,5 @@
-import { Props as ButtonProps } from '../../../../../components/Button/Button.types';
-export type ResetButtonProps = ButtonProps & {
+import { Props as ButtonProps } from '../../../Button/Button.types';
+export type Props = ButtonProps & {
     disabled?: boolean;
     onClick?: VoidFunction;
 };

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

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

package/dist/lib/components/Filter/components/TextMultiSelect/TextMultiSelect.types.d.ts

@@ -1,5 +1,5 @@
 import { Option } from '../../Filter.types';
-export type TextMultiSelectProps = {
+export type Props = {
     label: string;
     options: Option[];
     position?: 'left' | 'right';

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

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

package/dist/lib/components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.types.d.ts

@@ -2,7 +2,7 @@ export type TimePreset = {
     label: string;
     value: Date;
 };
-export type TimeFilterDropdownProps = {
+export type Props = {
     label: string;
     position?: 'left' | 'right';
     format?: '12' | '24';

package/dist/lib/components/Filter/components/TimeFilterDropdown/hooks/index.d.ts

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

package/dist/lib/components/Filter/components/TimeFilterDropdown/{TimeFilterDropdown.hook.d.ts → hooks/useTimeFilterDropdown/useTimeFilterDropdown.d.ts}

@@ -1,13 +1,12 @@
-import { TimeFilterDropdownProps, TimePreset } from './TimeFilterDropdown.types';
-export declare const useTimeFilterDropdown: ({ onApply, format, }: Pick<TimeFilterDropdownProps, "onApply" | "format">) => {
+import { Props, TimePreset } from '../../TimeFilterDropdown.types';
+export declare const useTimeFilterDropdown: ({ onApply, format, }: Pick<Props, "onApply" | "format">) => {
     id: string;
     appliedLabel: string | undefined;
     isOpen: boolean;
     selectedTime: Date | undefined;
     selectedPresetLabel: string | undefined;
-    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
     handleApply: () => void;
-    handleOpen: () => void;
+    handleOpenChange: (open: boolean) => void;
     handleSelectPreset: (preset: TimePreset) => void;
     handleSelectCustom: (time: Date) => void;
     handleReset: () => void;

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

@@ -1,12 +1,14 @@
 export * from './BadgeDropdown/BadgeMultiSelect';
-export * from './BadgeDropdown/BadgeMultiSelect.types';
+export type { Props as BadgeMultiSelectProps, SelectedOptions, } from './BadgeDropdown/BadgeMultiSelect.types';
+export * from './CustomDateRangeFilterDropdown/CustomDateRangeFilterDropdown';
+export type { Props as CustomDateRangeFilterDropdownProps, RollingPreset, } from './CustomDateRangeFilterDropdown/CustomDateRangeFilterDropdown.types';
 export * from './DateFilterDropdown/DateFilterDropdown';
-export * from './DateFilterDropdown/DateFilterDropdown.types';
+export type { Props as DateFilterDropdownProps } from './DateFilterDropdown/DateFilterDropdown.types';
 export * from './DateRangeFilterDropdown/DateRangeFilterDropdown';
-export * from './DateRangeFilterDropdown/DateRangeFilterDropdown.types';
+export type { Props as DateRangeFilterDropdownProps } from './DateRangeFilterDropdown/DateRangeFilterDropdown.types';
 export * from './ResetButton/ResetButton';
-export * from './ResetButton/ResetButton.types';
+export type { Props as ResetButtonProps } from './ResetButton/ResetButton.types';
 export * from './TextMultiSelect/TextMultiSelect';
-export * from './TextMultiSelect/TextMultiSelect.types';
+export type { Props as TextMultiSelectProps } from './TextMultiSelect/TextMultiSelect.types';
 export * from './TimeFilterDropdown/TimeFilterDropdown';
-export * from './TimeFilterDropdown/TimeFilterDropdown.types';
+export type { Props as TimeFilterDropdownProps, TimePreset, } from './TimeFilterDropdown/TimeFilterDropdown.types';

package/dist/lib/components/Filter/contexts/filter.context.d.ts

@@ -1,4 +1,6 @@
 export type FilterContextType = {
     closeOnApply: boolean;
+    resetScope?: string;
+    theme?: string;
 };
 export declare const FilterContext: import('react').Context<FilterContextType>;

package/dist/lib/components/Filter/events/index.d.ts

@@ -1,6 +1,14 @@
 export declare enum FilterEvent {
+    OPEN = "@konstructio/KonstructFilter/event-OPEN",
+    RESET = "@konstructio/KonstructFilter/event-RESET"
+}
+/** @deprecated Use FilterEvent instead */
+export declare enum LegacyFilterEvent {
     OPEN = "@konstrtuctio/KonstructFilter/event-OPEN",
     RESET = "@konstrtuctio/KonstructFilter/event-RESET"
 }
-export declare const sendOpenFilterEvent: (id: string) => boolean;
-export declare const resetEvent: () => boolean;
+export declare const sendOpenFilterEvent: (id: string) => void;
+export declare const resetEvent: (scope?: string) => void;
+export declare const addFilterEventListener: <T>(event: FilterEvent, handler: (event: CustomEvent<T>) => void, options: {
+    signal?: AbortSignal;
+}) => void;

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

@@ -0,0 +1,2 @@
+export * from './useFilterDropdownSync';
+export * from './useLocale';

package/dist/lib/components/Filter/hooks/useFilterDropdownSync.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './useFilterDropdownSync.types';
+export declare const useFilterDropdownSync: ({ id, onClose, onReset }: Props) => void;

package/dist/lib/components/Filter/hooks/useFilterDropdownSync.types.d.ts

@@ -0,0 +1,5 @@
+export type Props = {
+    id: string;
+    onClose: () => void;
+    onReset: () => void;
+};

package/dist/lib/components/Filter/hooks/useLocale.d.ts

@@ -0,0 +1 @@
+export declare const useLocale: (countryCode?: string) => string;

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

@@ -1 +1,2 @@
+export declare const loadLocaleMap: () => Promise<void>;
 export declare const getLocale: (countryCode?: string) => string;

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

@@ -19,7 +19,7 @@ import { Props } from './ImageUpload.types';
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-imageupload--docs Storybook}
  */
 declare const ImageUpload: {
-    ({ className, error, fileName, fileSize, fileUrl, helperText, isRequired, label, labelClassName, labelWrapperClassName, name, onChange, onRemove, status, theme, uploadButtonText, accept, maxSize, }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ className, error, fileName, fileSize, fileUrl, helperText, isRequired, label, labelClassName, labelWrapperClassName, name, onChange, onRemove, status, theme, uploadButtonText, accept, maxSize, }: Props): import('react').JSX.Element;
     displayName: string;
 };
 export { ImageUpload };

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

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { ChangeEvent, ReactNode } from 'react';
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 import { imageUploadVariants } from './ImageUpload.variants';
 /**
  * Upload status states for the ImageUpload component.

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

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { InputHTMLAttributes, ReactNode } from 'react';
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 import { inputVariants } from './Input.variants';
 /**
  * Props for the Input component.
@@ -19,6 +19,10 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement>, VariantPro
     helperText?: string;
     /** Additional CSS classes for the helper text */
     helperTextClassName?: string;
+    /** Accessible label for the password toggle while the password is visible */
+    hidePasswordLabel?: string;
+    /** Accessible label for the password toggle while the password is hidden */
+    showPasswordLabel?: string;
     /** Show required indicator (*) next to label */
     isRequired?: boolean;
     /** Show search icon inside the input */

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

@@ -1,4 +1,4 @@
-import { Props as TypographyProps } from '../../../components/Typography/Typography.types';
+import { Props as TypographyProps } from '../Typography/Typography.types';
 export interface LineChartDataset {
     /** Dataset label (used in legend) */
     label: string;

package/dist/lib/components/LineChart/components/LineChartContent/LineChartContent.d.ts

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

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

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { InputHTMLAttributes } from 'react';
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 import { loadingVariants } from './Loading.variants';
 /**
  * Props for the Loading component.

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import { Transition } from 'motion/react';
 import { PropsWithChildren, ReactNode } from 'react';
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 import { modalVariants } from './components/Wrapper/Wrapper.variants';
 /**
  * Props for the Modal component.
@@ -19,6 +19,12 @@ import { modalVariants } from './components/Wrapper/Wrapper.variants';
  */
 export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     /** CSS classes for the close button */
+    /** Animate height changes of the content, e.g. when a step is swapped. Defaults to false */
+    animateResize?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    /** Move focus to the first focusable element when the modal opens. Defaults to true */
+    autoFocus?: boolean;
     buttonCloseClassName?: string;
     /** Additional CSS classes for the modal */
     className?: string;
@@ -28,11 +34,13 @@ export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     container?: Element | DocumentFragment;
     /** Whether the modal is open */
     isOpen?: boolean;
+    /** Close when the overlay behind the modal is clicked. Defaults to true */
+    closeOnOverlayClick?: boolean;
     /** Show the X close button in the corner */
     showCloseButton?: boolean;
     /** Theme override for this component */
     theme?: Theme;
-    /** Motion transition config for the modal animation */
+    /** Motion transition used when `animateResize` is enabled */
     transition?: Transition;
     /** Callback when modal is closed (Escape key or close button) */
     onClose?: () => void;

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

@@ -1,11 +1,16 @@
 import { VariantProps } from 'class-variance-authority';
 import { Transition } from 'motion/react';
 import { PropsWithChildren } from 'react';
-import { Theme } from '../../../../../domain/theme';
+import { Theme } from '../../../../domain/theme';
 import { modalVariants } from './Wrapper.variants';
 export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
+    animateResize?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    autoFocus?: boolean;
     buttonCloseClassName?: string;
     className?: string;
+    closeOnOverlayClick?: boolean;
     containerClassName?: string;
     showCloseButton?: boolean;
     theme?: Theme;

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

@@ -1,4 +1,4 @@
 import { ReactNode } from 'react';
 export declare const ModalProvider: ({ children }: {
     children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import('react').JSX.Element;

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

@@ -44,6 +44,16 @@ type OnBlurFn = (event: {
  * ```
  */
 export interface Props extends VariantProps<typeof multiSelectDropdownVariants>, Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onBlur'> {
+    /** Disable opening the list and removing selections */
+    disabled?: boolean;
+    /** Error message displayed below the dropdown */
+    error?: string;
+    /** Additional CSS classes for the error message */
+    errorClassName?: string;
+    /** Helper text displayed below the dropdown when there is no error */
+    helperText?: string;
+    /** Additional CSS classes for the helper text */
+    helperTextClassName?: string;
     /** Whether the dropdown is in a loading state */
     isLoading?: boolean;
     /** Whether the field is required */
@@ -60,6 +70,8 @@ export interface Props extends VariantProps<typeof multiSelectDropdownVariants>,
     name?: string;
     /** Text shown when no options match the search */
     noOptionsText?: string;
+    /** Text shown in the list while options are loading */
+    loadingText?: string;
     /** Available options to select from */
     options: MultiSelectDropdownOption[];
     /** Placeholder text when no selection */

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

@@ -1,3 +1,6 @@
 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;
+export declare const multiSelectDropdownVariants: (props?: ({
+    hasError?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,4 +1,4 @@
-import { Theme } from '../../../../../domain/theme';
+import { Theme } from '../../../../domain/theme';
 import { MultiSelectDropdownOption } from '../../MultiSelectDropdown.types';
 export type ItemProps = {
     option: MultiSelectDropdownOption;

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

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

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

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

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

@@ -5,6 +5,7 @@ export type State = {
     isLoading?: boolean;
     isOpen: boolean;
     noOptionsText?: string;
+    loadingText?: string;
     options: MultiSelectDropdownOption[];
     selectedOptions: MultiSelectDropdownOption[];
     onSelectOption: (option: MultiSelectDropdownOption) => void;
@@ -17,6 +18,7 @@ export type MultiSelectDropdownProviderProps = PropsWithChildren & {
     multiselect?: boolean;
     name?: string;
     noOptionsText?: string;
+    loadingText?: string;
     value?: MultiSelectDropdownOption[];
     onChange?: (params: {
         target: {

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

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { Props } from './OtpInput.types';
+/**
+ * One-time code input split into one box per digit. The first box opts into
+ * SMS autofill (`autocomplete="one-time-code"`) and spreads a pasted or
+ * autofilled code across the boxes; Backspace, ArrowLeft and ArrowRight move
+ * between them.
+ *
+ * @example
+ * ```tsx
+ * <OtpInput
+ *   label="Verification code"
+ *   error={verifyError}
+ *   onComplete={(code) => verify(code)}
+ * />
+ * ```
+ */
+declare const OtpInput: FC<Props>;
+export { OtpInput };

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

@@ -0,0 +1,32 @@
+import { Theme } from '../../domain/theme';
+export type Props = {
+    /** Focus the first empty digit on mount */
+    autoFocus?: boolean;
+    /** Additional CSS classes for the fieldset */
+    className?: string;
+    /** Initial code for uncontrolled usage */
+    defaultValue?: string;
+    /** Accessible name of each digit input; receives the 1-based position */
+    digitLabel?: (position: number) => string;
+    /** Disable every digit input */
+    disabled?: boolean;
+    /** Error message announced below the inputs */
+    error?: string;
+    /** Additional CSS classes for each digit input */
+    inputClassName?: string;
+    /** Accessible name of the whole code field */
+    label: string;
+    /** Number of digits */
+    length?: number;
+    /** Form field name for the hidden input that carries the full code */
+    name?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Controlled code */
+    value?: string;
+    /** Fired with the current code on every change */
+    onChange?: (code: string) => void;
+    /** Fired once every digit is filled */
+    onComplete?: (code: string) => void;
+};
+export type OtpInputProps = Props;

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

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { Props } from './PasswordRules.types';
+/**
+ * Lists password requirements and marks each one as met while the user types.
+ * The list is a live region and every rule carries a screen-reader status.
+ *
+ * @example
+ * ```tsx
+ * <PasswordRules
+ *   value={password}
+ *   title="Your password must contain at least:"
+ *   rules={[
+ *     { id: 'length', label: '8 characters', test: (value) => value.length >= 8 },
+ *     { id: 'number', label: 'one number', test: (value) => /\d/.test(value) },
+ *   ]}
+ * />
+ * ```
+ */
+declare const PasswordRules: FC<Props>;
+export { PasswordRules };

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+export type PasswordRule = {
+    id: string;
+    label: ReactNode;
+    test: (value: string) => boolean;
+};
+export type Props = {
+    /** Additional CSS classes for the list wrapper */
+    className?: string;
+    /** Screen-reader status appended to a satisfied rule */
+    metLabel?: string;
+    /** Screen-reader status appended to an unsatisfied rule */
+    pendingLabel?: string;
+    /** Rules to evaluate against `value` */
+    rules: PasswordRule[];
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Heading rendered above the rules */
+    title?: ReactNode;
+    /** Current password */
+    value: string;
+};
+export type PasswordRulesProps = Props;

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

@@ -0,0 +1,18 @@
+export declare const PhoneNumberInputContent: import('react').ForwardRefExoticComponent<import('react').InputHTMLAttributes<HTMLInputElement> & {
+    defaultCountryCode?: libphonenumber.RegionCode;
+    disabled?: boolean;
+    error?: string;
+    helperText?: string;
+    helperTextClassName?: string;
+    isRequired?: boolean;
+    label?: string;
+    labelClassName?: string;
+    labelWrapperClassName?: string;
+    name?: string;
+    placeholder?: string;
+    showFlagOnSearch?: boolean;
+    showInputFilter?: boolean;
+    showNameOnSearch?: boolean;
+    showPlaceHolder?: boolean;
+    wrapperClassName?: string;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -18,7 +18,7 @@ type CSSColor = `var(--${string})` | `rgb(${number}, ${number}, ${number})` | `r
 export type Props = {
     /**
      * Array of hexadecimal colors for the borders of the pie chart segments
-     * @default ['#FFFFFF', '#FFFFFF']
+     * @default [resolveColor('--color-white'), resolveColor('--color-white')]
      */
     borderColors?: HexColor[] | CSSColor[] | (HexColor | CSSColor)[];
     /**
@@ -28,7 +28,7 @@ export type Props = {
     borderWidth?: number;
     /**
      * Array of hexadecimal colors for filling the pie chart segments
-     * @default ['#525252', '#00D492']
+     * @default [resolveColor('--color-neutral-600'), resolveColor('--color-emerald-400')]
      */
     colors?: HexColor[] | CSSColor[] | (HexColor | CSSColor)[];
     /**
@@ -43,7 +43,7 @@ export type Props = {
     redraw?: boolean;
     /**
      * Hexadecimal color for the subtitle text
-     * @default '#6B7280'
+     * @default resolveColor('--color-gray-500')
      */
     subtitleColor?: HexColor;
     /**
@@ -58,7 +58,7 @@ export type Props = {
     subtitleFontWeight?: 'bold' | 'normal';
     /**
      * Hexadecimal color for the title text
-     * @default '#111827'
+     * @default resolveColor('--color-gray-900')
      */
     titleColor?: HexColor;
     /**

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

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

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

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 import { progressBarFillVariants } from './ProgressBar.variants';
 export interface Props extends VariantProps<typeof progressBarFillVariants> {
+    /** Accessible name announced for the progress bar */
+    ariaLabel?: string;
     /** Additional CSS classes for the outer wrapper */
     className?: string;
     /** Custom CSS class for the progress bar fill (e.g., "bg-purple-500") */

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

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { InputHTMLAttributes, ReactNode } from 'react';
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 import { radioVariants } from './Radio.variants';
 /**
  * Props for the Radio component.

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

@@ -14,6 +14,17 @@ import { Props } from './RadioCard.types';
  *   checked={tier === 'enterprise'}
  *   onChange={(value) => setTier(value)}
  * />
+ *
+ * <RadioCard
+ *   name="network"
+ *   value="existing"
+ *   label="Existing network"
+ *   tag="Recommended"
+ *   hideIndicator
+ *   checked={network === 'existing'}
+ *   content={(checked) => checked && <Select options={networks} />}
+ *   onChange={setNetwork}
+ * />
  * ```
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiocard--docs Storybook}

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

@@ -1,4 +1,5 @@
-import { Theme } from '../../../domain/theme';
+import { ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
 import { Props as CardProps } from '../Card/Card.types';
 import { Props as RadioProps } from '../Radio/Radio.types';
 /**
@@ -17,8 +18,16 @@ import { Props as RadioProps } from '../Radio/Radio.types';
  * />
  * ```
  */
-export type Props = Omit<CardProps, 'canHover' | 'isActive'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName' | 'description' | 'descriptionClassName'> & {
+export type Props = Omit<CardProps, 'canHover' | 'isActive' | 'content' | 'onChange'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName' | 'description' | 'descriptionClassName'> & {
+    /** Interactive content rendered below the label, outside the selectable area; receives the checked state */
+    content?: ReactNode | ((checked: boolean) => ReactNode);
+    /** Additional CSS classes for the content wrapper */
+    contentClassName?: string;
+    /** Hide the radio indicator and let the card itself communicate the selection */
+    hideIndicator?: boolean;
     labelWrapperClassName?: string;
+    /** Short badge displayed next to the label */
+    tag?: string;
     theme?: Theme;
 };
 /** @deprecated Use Props instead */

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

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

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

@@ -1,4 +1,4 @@
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 import { Props as RadioCardProps } from '../RadioCard/RadioCard.types';
 /**
  * Props for the RadioCardGroup component.