@konstructio/ui 0.1.2-alpha.99 → 0.1.4

package/dist/lib/components/Avatar/hooks/use-gravatar-url.d.ts

@@ -0,0 +1,2 @@
+export declare const buildGravatarUrl: (email: string, sizePx: number) => Promise<string | null>;
+export declare const useGravatarUrl: (email: string | undefined, sizePx: number) => string | null;

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

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { Props } from './AvatarGroup.types';
+/**
+ * A stack of overlapping avatars that collapses the ones beyond `max` into a
+ * "+N" bubble.
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup
+ *   items={members.map((member) => ({ id: member.id, alt: member.name, email: member.email, fallback: member.initials }))}
+ *   max={4}
+ * />
+ * ```
+ */
+declare const AvatarGroup: FC<Props>;
+export { AvatarGroup };

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

@@ -0,0 +1,19 @@
+import { Props as AvatarProps } from '../Avatar/Avatar.types';
+export type AvatarGroupItem = Omit<AvatarProps, 'size' | 'theme'> & {
+    id: string | number;
+};
+export type Props = Pick<AvatarProps, 'size' | 'theme'> & {
+    /** Additional CSS classes for the list */
+    className?: string;
+    /** Text shown when there are no items; renders a dashed placeholder */
+    emptyLabel?: string;
+    /** Avatars to display */
+    items: AvatarGroupItem[];
+    /** Accessible name of the list; receives the total count */
+    label?: (count: number) => string;
+    /** Maximum avatars shown before collapsing the rest into a "+N" bubble */
+    max?: number;
+    /** Accessible name of the "+N" bubble; receives the hidden count */
+    overflowLabel?: (hiddenCount: number) => string;
+};
+export type AvatarGroupProps = Props;

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { Props } from './BadgeGroup.types';
+/**
+ * Renders a row of badges and collapses the ones that do not fit into a
+ * "+N" badge whose tooltip lists the hidden labels. Limit by count with
+ * `maxVisible` or by available width with `maxWidth`.
+ *
+ * @example
+ * ```tsx
+ * <BadgeGroup items={tags} maxVisible={3} />
+ * <BadgeGroup items={regions} maxWidth={240} variant="info" />
+ * ```
+ */
+declare const BadgeGroup: FC<Props>;
+export { BadgeGroup };

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { Props as BadgeProps } from '../Badge/Badge.types';
+export type BadgeGroupItem = Pick<BadgeProps, 'variant' | 'leftIcon'> & {
+    id: string | number;
+    label: string;
+};
+export type Props = Pick<BadgeProps, 'size' | 'variant'> & {
+    /** Additional CSS classes for each badge */
+    badgeClassName?: string;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Badges to display */
+    items: BadgeGroupItem[];
+    /** Hidden labels per line inside the overflow tooltip */
+    itemsPerTooltipLine?: number;
+    /** Show as many badges as fit in this width (px); the rest collapse into the overflow badge */
+    maxWidth?: number;
+    /** Show at most this many badges; the rest collapse into the overflow badge */
+    maxVisible?: number;
+    /** Accessible name of the overflow badge button */
+    overflowLabel?: (hiddenCount: number) => string;
+    /** Custom overflow tooltip content; defaults to the hidden labels */
+    renderOverflow?: (hidden: BadgeGroupItem[]) => ReactNode;
+};
+export type BadgeGroupProps = Props;

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

@@ -0,0 +1 @@
+export * from './use-visible-badge-count/use-visible-badge-count';

package/dist/lib/components/BadgeGroup/hooks/use-visible-badge-count/use-visible-badge-count.d.ts

@@ -0,0 +1,2 @@
+import { Params } from './use-visible-badge-count.types';
+export declare const useVisibleBadgeCount: ({ containerRef, gapPx, horizontalPaddingPx, items, maxWidth, probeRef, }: Params) => number;

package/dist/lib/components/BadgeGroup/hooks/use-visible-badge-count/use-visible-badge-count.types.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+import { BadgeGroupItem } from '../../BadgeGroup.types';
+export type Params = {
+    containerRef: RefObject<HTMLElement | null>;
+    gapPx: number;
+    horizontalPaddingPx: number;
+    items: BadgeGroupItem[];
+    maxWidth?: number;
+    probeRef: RefObject<HTMLElement | null>;
+};

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

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { FC, HTMLAttributes, ReactNode } from 'react';
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 import { breadcrumbVariants } from './Breadcrumb.variants';
 /**
  * A single step in the breadcrumb navigation.
@@ -60,6 +60,10 @@ export interface Props extends VariantProps<typeof breadcrumbVariants>, HTMLAttr
     steps: Step[];
     /** Optional back button rendered before the steps */
     backButton?: BackButton;
+    /** Accessible name of the ellipsis button that reveals the collapsed steps */
+    collapsedLabel?: string;
+    /** Collapse the middle steps into an ellipsis menu when there are more steps than this; the first and the last ones stay visible */
+    maxVisibleItems?: number;
     /** CSS classes for the nav wrapper */
     wrapperClassName?: string;
     /** Theme override for this component */

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

@@ -1,4 +1,4 @@
-import { Theme } from '../../../../../domain/theme';
+import { Theme } from '../../../../domain/theme';
 import { BackButton as BackButtonConfig } from '../../Breadcrumb.types';
 export interface Props extends BackButtonConfig {
     theme?: Theme;

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { Theme } from '../../../../../domain/theme';
+import { Theme } from '../../../../domain/theme';
 import { Step } from '../../Breadcrumb.types';
 export interface Props extends Step {
     isLast: boolean;

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

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

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

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

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

@@ -1,7 +1,9 @@
 import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 import { buttonGroupVariants } from './ButtonGroup.variants';
+/** Visual style: animated filled pill, or bordered segments with the selected one outlined */
+export type ButtonGroupVariant = NonNullable<VariantProps<typeof buttonGroupVariants>['variant']>;
 /** Horizontal text alignment for label and description */
 export type TextAlign = 'left' | 'center' | 'right';
 /**

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

@@ -10,5 +10,6 @@ export declare const buttonGroupWrapperVariants: (props?: import('class-variance
  * Group container variants - no outer border, just flex container
  */
 export declare const buttonGroupVariants: (props?: ({
+    variant?: "pill" | "outline" | null | undefined;
     disabled?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,5 +1,5 @@
 import { KeyboardEvent } from 'react';
-import { ButtonGroupOption, TextAlign } from '../../ButtonGroup.types';
+import { ButtonGroupOption, ButtonGroupVariant, TextAlign } from '../../ButtonGroup.types';
 import { AnimationDirection } from '../../hooks';
 export type Props = {
     animationDirection: AnimationDirection;
@@ -18,6 +18,7 @@ export type Props = {
     labelClassName?: string;
     option: ButtonGroupOption;
     value: string;
+    variant?: ButtonGroupVariant;
     onKeyDown: (event: KeyboardEvent<HTMLButtonElement>, index: number) => void;
     onSelect: (value: string) => void;
 };

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

@@ -6,6 +6,15 @@ export declare const buttonGroupItemVariants: (props?: ({
     isFirst?: boolean | null | undefined;
     isLast?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Outline item variants - bordered segment, selected one outlined in aurora
+ */
+export declare const buttonGroupOutlineItemVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    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)
  */

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { HTMLAttributes, PropsWithChildren } from 'react';
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 import { cardVariants } from './Card.variants';
 /**
  * Props for the Card component.
@@ -15,6 +15,7 @@ import { cardVariants } from './Card.variants';
 export interface Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants>, PropsWithChildren {
     /** Enable hover effect */
     canHover?: boolean;
+    component?: 'div' | 'article' | 'section' | 'aside' | 'li';
     /** Show active/selected state */
     isActive?: boolean;
     /** Theme override for this component */

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

@@ -12,7 +12,7 @@ import { Props } from './Checkbox.types';
  * // Controlled checkbox
  * <Checkbox
  *   label="Subscribe to newsletter"
- *   defaultChecked={subscribed}
+ *   checked={subscribed}
  *   onChange={(checked) => setSubscribed(checked)}
  * />
  *

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

@@ -1,6 +1,6 @@
 import { CheckboxProps as CheckboxPropsPrimitive } from '@radix-ui/react-checkbox';
 import { VariantProps } from 'class-variance-authority';
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 import { checkboxVariants } from './Checkbox.variants';
 /**
  * Props for the Checkbox component.
@@ -12,9 +12,10 @@ import { checkboxVariants } from './Checkbox.variants';
  * <Checkbox label="Disabled option" disabled />
  * ```
  */
-export interface Props extends Omit<CheckboxPropsPrimitive, 'onChange'>, Omit<VariantProps<typeof checkboxVariants>, 'checked'> {
+export interface Props extends Omit<CheckboxPropsPrimitive, 'onChange' | 'checked'>, Omit<VariantProps<typeof checkboxVariants>, 'checked'> {
     /** ID of element that labels the checkbox for accessibility */
     ariaLabelledBy?: string;
+    checked?: boolean;
     /** Additional CSS classes */
     className?: string;
     /** Initial checked state */

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

@@ -1,4 +1,4 @@
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 import { DialogProps } from '@radix-ui/react-dialog';
 import { PropsWithChildren } from 'react';
 /**

package/dist/lib/components/Command/components/CommandShortcut.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 declare const CommandShortcut: {
-    ({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import('react').JSX.Element;
     displayName: string;
 };
 export { CommandShortcut };

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

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

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,48 @@
+import { ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { Props as ButtonProps } from '../Button/Button.types';
+export type Props = {
+    /** Move focus to the first focusable element when the dialog opens. Defaults to true */
+    autoFocus?: boolean;
+    /** 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/CopyButton/CopyButton.d.ts

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

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

@@ -0,0 +1,15 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+export type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'onCopy'> & {
+    arrowClassName?: string;
+    children?: ReactNode;
+    copiedLabel?: string;
+    copyLabel?: string;
+    label: string;
+    resetDelay?: number;
+    text: string;
+    theme?: Theme;
+    tooltipClassName?: string;
+    onCopy?: (text: string) => void;
+    onCopyError?: (error: unknown) => void;
+};

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

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

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

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

package/dist/lib/components/CopyButton/hooks/useCopyToClipboard/useCopyToClipboard.d.ts

@@ -0,0 +1,5 @@
+import { Options } from './useCopyToClipboard.types';
+export declare const useCopyToClipboard: ({ resetDelay, onCopy, onCopyError, }?: Options) => {
+    copied: boolean;
+    copy: (text: string) => Promise<boolean>;
+};

package/dist/lib/components/CopyButton/hooks/useCopyToClipboard/useCopyToClipboard.types.d.ts

@@ -0,0 +1,5 @@
+export type Options = {
+    resetDelay?: number;
+    onCopy?: (text: string) => void;
+    onCopyError?: (error: unknown) => void;
+};

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,5 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
-import { Theme } from '../../../domain/theme';
+import { ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
 import { counterVariants } from './Counter.variants';
 /**
  * Props for the Counter (NumberInput) component.
@@ -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;