@konstructio/ui 0.1.2-alpha.112 → 0.1.2-alpha.113

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

@@ -1,6 +1,6 @@
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "danger" | "primary" | "secondary" | "tertiary" | null | undefined;
-    shape?: "circle" | null | undefined;
+    shape?: "circle" | "pill" | null | undefined;
     version?: "default" | "alternate" | null | undefined;
     disabled?: boolean | null | undefined;
     size?: "medium" | "large" | null | undefined;

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;

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

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { Props } from './ConfirmDialog.types';
+/**
+ * A confirmation dialog for destructive or important actions, optionally
+ * gated behind typing a confirmation text (usually the resource name).
+ *
+ * @example
+ * ```tsx
+ * <ConfirmDialog
+ *   isOpen={isOpen}
+ *   title={`Delete ${cluster.name}?`}
+ *   description="This cannot be undone. All node pools will be removed."
+ *   confirmationText={cluster.name}
+ *   confirmLabel="Yes, delete"
+ *   pendingLabel="Deleting…"
+ *   isPending={isDeleting}
+ *   onClose={() => setIsOpen(false)}
+ *   onConfirm={deleteCluster}
+ * />
+ * ```
+ */
+declare const ConfirmDialog: FC<Props>;
+export { ConfirmDialog };

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

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { Props as ButtonProps } from '../Button/Button.types';
+export type Props = {
+    /** Label of the cancel button */
+    cancelLabel?: ReactNode;
+    /** Extra content rendered below the description, e.g. an Alert */
+    children?: ReactNode;
+    /** Additional CSS classes for the dialog panel */
+    className?: string;
+    /** Additional CSS classes for the input the user types the confirmation into */
+    confirmationInputClassName?: string;
+    /** Accessible name of the confirmation input; defaults to "Type <text> to confirm" */
+    confirmationInputLabel?: string;
+    /** Custom prompt rendered above the input; defaults to "Type <text> to confirm" with a copyable chip */
+    confirmationPrompt?: ReactNode;
+    /** When set, the confirm button stays disabled until the user types this exact text */
+    confirmationText?: string;
+    /** Label of the confirm button */
+    confirmLabel?: ReactNode;
+    /** Additional CSS classes for the overlay container, e.g. to raise its z-index */
+    containerClassName?: string;
+    /** Accessible name of the copy button next to the confirmation text */
+    copyLabel?: string;
+    /** Secondary text below the title */
+    description?: ReactNode;
+    /** Icon rendered next to the title; defaults to a warning icon coloured by `variant` */
+    icon?: ReactNode;
+    /** Whether the dialog is open */
+    isOpen: boolean;
+    /** Disables both buttons and swaps the confirm label for `pendingLabel` */
+    isPending?: boolean;
+    /** Label of the confirm button while `isPending` */
+    pendingLabel?: ReactNode;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Title of the dialog */
+    title: ReactNode;
+    /** Variant of the confirm button; also colours the default icon */
+    variant?: Extract<ButtonProps['variant'], 'danger' | 'primary'>;
+    /** Called when the user cancels, presses Escape or clicks the overlay */
+    onClose: () => void;
+    /** Called when the user confirms */
+    onConfirm: () => void;
+};
+export type ConfirmDialogProps = Props;

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

@@ -22,11 +22,14 @@ import { Props } from './Counter.types';
  *   onChange={({ target }) => setNodes(target.value)}
  * />
  *
- * // Disabled increment/decrement
+ * // Stepping by 500 GB with a unit, price and helper text
  * <Counter
- *   value={5}
- *   canIncrement={value < max}
- *   canDecrement={value > min}
+ *   label="Size"
+ *   value={size}
+ *   step={500}
+ *   unit="GB"
+ *   labelAction={<span>$12.00/mo</span>}
+ *   helperText="Increments of 500 GB"
  *   onChange={handleChange}
  * />
  * ```

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

@@ -1,4 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
 import { Theme } from '../../domain/theme';
 import { counterVariants } from './Counter.variants';
 /**
@@ -24,16 +25,34 @@ export interface Props extends VariantProps<typeof counterVariants> {
     className?: string;
     /** CSS classes for decrement button */
     decrementButtonClassName?: string;
+    /** Accessible label of the decrement button */
+    decrementLabel?: string;
+    /** Disable the whole control */
+    disabled?: boolean;
     /** Allow typing values directly into the input. Defaults to false (read-only) */
     editable?: boolean;
+    /** Error message displayed below the control */
+    error?: string;
+    /** Additional CSS classes for the error message */
+    errorClassName?: string;
+    /** Stretch the control to the width of its container */
+    fullWidth?: boolean;
+    /** Helper text displayed below the control when there is no error */
+    helperText?: string;
+    /** Additional CSS classes for the helper text */
+    helperTextClassName?: string;
     /** CSS classes for increment button */
     incrementButtonClassName?: string;
+    /** Accessible label of the increment button */
+    incrementLabel?: string;
     /** Initial value (deprecated, use value) */
     init?: number;
     /** Show required indicator */
     isRequired?: boolean;
     /** Label displayed above the counter */
     label?: string;
+    /** Content displayed at the right end of the label row */
+    labelAction?: ReactNode;
     /** Additional CSS classes for the label wrapper */
     labelWrapperClassName?: string;
     /** Maximum allowed value */
@@ -42,8 +61,12 @@ export interface Props extends VariantProps<typeof counterVariants> {
     min?: number;
     /** Form field name */
     name?: string;
+    /** Amount added or subtracted by the buttons. Defaults to 1 */
+    step?: number;
     /** Theme override for this component */
     theme?: Theme;
+    /** Unit displayed inside the field, after the value */
+    unit?: ReactNode;
     /** Current numeric value */
     value?: number;
     /** Callback when value changes */

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

@@ -1,6 +1,15 @@
-export declare const counterVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const fieldVariants: (props?: ({
+    fullWidth?: boolean | null | undefined;
+    hasError?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const counterVariants: (props?: ({
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const unitVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const buttonVariants: (props?: ({
     button?: "left" | "rigth" | null | undefined;
+    hasError?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const labelVariants: (props?: ({
     variant?: "default" | null | undefined;

package/dist/lib/components/DateRangePicker/components/CalendarPanel/components/CalendarMonth/components/CalendarMonthContent/CalendarMonthContent.d.ts

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

package/dist/lib/components/Datepicker/components/DatePickerContent/DatePickerContent.d.ts

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

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Props as ButtonProps } from '../Button/Button.types';
 /**
  * Configuration for a dropdown menu option.
  */
@@ -23,10 +24,16 @@ export type Option = {
  * ```
  */
 export type Props = {
+    /** Appearance of the trigger button */
+    appearance?: ButtonProps['appearance'];
     /** Additional CSS classes for the trigger button */
     buttonClassName?: string;
     /** Additional CSS classes for the wrapper container */
     className?: string;
+    /** Disable the trigger and keep the menu closed */
+    disabled?: boolean;
+    /** Show a spinner in place of the chevron and disable the trigger */
+    isLoading?: boolean;
     /** Additional CSS classes for each dropdown item */
     itemClassName?: string;
     /** Content of the trigger button */
@@ -35,4 +42,8 @@ export type Props = {
     listClassName?: string;
     /** Array of options to display in the dropdown */
     options: Option[];
+    /** Variant of the trigger button */
+    variant?: ButtonProps['variant'];
+    /** Version of the trigger button */
+    version?: ButtonProps['version'];
 };

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

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

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/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/Modal/Modal.types.d.ts

@@ -19,6 +19,8 @@ import { modalVariants } from './components/Wrapper/Wrapper.variants';
  */
 export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     /** CSS classes for the close button */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
     buttonCloseClassName?: string;
     /** Additional CSS classes for the modal */
     className?: string;

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

@@ -4,6 +4,8 @@ import { PropsWithChildren } from 'react';
 import { Theme } from '../../../../domain/theme';
 import { modalVariants } from './Wrapper.variants';
 export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
     buttonCloseClassName?: string;
     className?: string;
     containerClassName?: string;

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 */

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/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/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/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,3 +1,4 @@
+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/Sidebar/Sidebar.types.d.ts

@@ -2,6 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { CSSProperties, FC, PropsWithChildren } from 'react';
 import { ClassNames as DrawerClassNames } from '../Drawer/Drawer.types';
 import { Theme } from '../../domain/theme';
+import { SidebarMode } from './contexts';
 import { SidebarModeProp } from './hooks/useSidebarMode';
 import { wrapperSiderbarVariants } from './Sidebar.variants';
 import { CollapseTriggerProps, FooterProps, LabelProps, LogoProps, NavigationGroupProps, NavigationOptionProps, NavigationProps, NavigationSeparatorProps } from './components';
@@ -114,7 +115,10 @@ export interface Props extends Omit<VariantProps<typeof wrapperSiderbarVariants>
      * micro-frontends.
      */
     style?: CSSProperties;
+    /** Fired when the effective mode changes, because the user toggled it or the viewport crossed a breakpoint */
+    onModeChange?: (mode: SidebarMode, source: SidebarModeChangeSource) => void;
 }
+export type SidebarModeChangeSource = 'user' | 'viewport';
 /** @deprecated Use Props instead */
 export type SidebarProps = Props;
 /**

package/dist/lib/components/Sidebar/components/CollapseTrigger/CollapseTrigger.types.d.ts

@@ -1,4 +1,6 @@
 export interface Props {
     className?: string;
+    /** Fired after the sidebar toggles, with the mode it switched to */
+    onToggle?: (mode: 'collapsed' | 'expanded') => void;
 }
 export type CollapseTriggerProps = Props;

package/dist/lib/components/Sidebar/components/NavigationOption/NavigationOption.types.d.ts

@@ -2,9 +2,15 @@ import { VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
 import { navigationOptionVariants } from './NavigationOption.variants';
 type NavigationOption = VariantProps<typeof navigationOptionVariants> & {
+    /** Content rendered at the end of the option in expanded mode, e.g. a Badge */
+    badge?: ReactNode;
     className?: string;
+    /** Delay in ms before `onIntent` fires on hover. Defaults to 80 */
+    intentDelay?: number;
     isVisible?: boolean;
     isActive?: boolean;
+    /** Fired when the user shows intent to navigate: hover (debounced), focus, pointer down or touch start. Useful for prefetching */
+    onIntent?: () => void;
     /**
      * Whether clicking this option should close the drawer when the Sidebar
      * is in `drawer` mode. Defaults to `true`. Has no effect in `expanded` or

package/dist/lib/components/Sidebar/components/NavigationOption/NavigationOption.variants.d.ts

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

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

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { Props } from './Skeleton.types';
+/**
+ * Pulsing placeholder blocks shown while content loads.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton shape="text" count={3} label="Loading activity" />
+ * <Skeleton shape="circle" />
+ * <Skeleton className="h-8 w-40" />
+ * ```
+ */
+declare const Skeleton: FC<Props>;
+export { Skeleton };

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

@@ -0,0 +1,16 @@
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { skeletonVariants } from './Skeleton.variants';
+export interface Props extends VariantProps<typeof skeletonVariants> {
+    /** Additional CSS classes for each placeholder block, e.g. a width or height */
+    className?: string;
+    /** Number of placeholder blocks to render */
+    count?: number;
+    /** Accessible name announced while the content loads */
+    label?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Additional CSS classes for the wrapper */
+    wrapperClassName?: string;
+}
+export type SkeletonProps = Props;

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

@@ -0,0 +1,3 @@
+export declare const skeletonVariants: (props?: ({
+    shape?: "text" | "rect" | "circle" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -56,6 +56,8 @@ export type Props = VariantProps<typeof stepperVariants> & {
     clickable?: boolean;
     /** Index of the current active step (0-based). When provided, step statuses are auto-calculated. */
     currentStep?: number;
+    /** Stretch the stepper to its container, distributing horizontal steps evenly */
+    fullWidth?: boolean;
     /** Custom icons for step statuses */
     icons?: StepperIcons;
     /** Show connector lines between steps */