cekat-ui 1.2.8 → 1.3.0

package/dist/index.d.mts

@@ -0,0 +1,864 @@
+import { ClassValue } from 'clsx';
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { Key } from 'react-aria-components';
+import * as React_2 from 'react';
+import { ReactNode } from 'react';
+
+export declare const Alert: {
+    ({ title, description, color, layout, background, icon, iconVariant, showIcon, primaryAction, secondaryAction, actionVariant, actions, onClose, closeLabel, className, ...props }: AlertProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface AlertAction {
+    label: React_2.ReactNode;
+    onClick?: React_2.MouseEventHandler<HTMLButtonElement>;
+}
+
+export declare type AlertActionVariant = 'link' | 'button';
+
+/**
+ * Card surface. `white` is the Figma default; `light` tints the card with the
+ * light shade of the current `color`.
+ */
+export declare type AlertBackground = 'white' | 'light';
+
+export declare type AlertColor = 'default' | 'brand' | 'gray' | 'error' | 'warning' | 'success';
+
+/**
+ * `featured` wraps the icon in the Figma "Featured icon" badge (fixed size, tinted
+ * fill, rounded shape). `plain` drops the badge so a custom illustration can be
+ * dropped straight in at its own size.
+ */
+export declare type AlertIconVariant = 'featured' | 'plain';
+
+/** Figma "Size" variant: a rounded floating card, or an edge-to-edge page banner. */
+export declare type AlertLayout = 'floating' | 'full-width';
+
+export declare interface AlertProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {
+    title: React_2.ReactNode;
+    /** Supporting text rendered under (floating) or beside (full-width) the title. */
+    description?: React_2.ReactNode;
+    color?: AlertColor;
+    layout?: AlertLayout;
+    /** Set to `light` to fill the card with the light shade of `color`. Defaults to `white`. */
+    background?: AlertBackground;
+    /** Overrides the default featured icon for the current `color`. */
+    icon?: React_2.ReactNode;
+    /** Set to `plain` to render `icon` without the featured-icon badge. Defaults to `featured`. */
+    iconVariant?: AlertIconVariant;
+    showIcon?: boolean;
+    /** Emphasised action, e.g. "View changes". */
+    primaryAction?: AlertAction;
+    /** Low-emphasis action, e.g. "Dismiss". */
+    secondaryAction?: AlertAction;
+    /** Defaults to `link` for `floating` and `button` for `full-width`. */
+    actionVariant?: AlertActionVariant;
+    /** Replaces the rendered actions entirely, ignoring `primaryAction`/`secondaryAction`. */
+    actions?: React_2.ReactNode;
+    /** Renders the close (X) button when provided. */
+    onClose?: () => void;
+    closeLabel?: string;
+    className?: string;
+}
+
+export declare const Avatar: {
+    ({ src, alt, initials, size, status, statusIcon, contrastBorder, className, }: AvatarProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare const AvatarGroup: {
+    ({ avatars, max, size, onAdd, className }: AvatarGroupProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface AvatarGroupItem {
+    src?: string;
+    alt?: string;
+    initials?: React_2.ReactNode;
+    /** Tooltip content shown on hover. */
+    label?: React_2.ReactNode;
+}
+
+export declare interface AvatarGroupProps {
+    avatars: AvatarGroupItem[];
+    /** Max avatars to show before collapsing the rest into a "+N" badge. */
+    max?: number;
+    size?: AvatarGroupSize;
+    /** Shows a dashed "add" button after the avatars when provided. */
+    onAdd?: () => void;
+    className?: string;
+}
+
+export declare type AvatarGroupSize = 'xs' | 'sm' | 'md';
+
+export declare const AvatarLabelGroup: {
+    ({ name, subtitle, src, initials, size, status, statusIcon, className, }: AvatarLabelGroupProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface AvatarLabelGroupProps {
+    name: React_2.ReactNode;
+    subtitle?: React_2.ReactNode;
+    src?: string;
+    initials?: React_2.ReactNode;
+    size?: AvatarLabelGroupSize;
+    status?: AvatarStatus;
+    /** Custom content for the "company" status badge (e.g. a logo image). */
+    statusIcon?: React_2.ReactNode;
+    className?: string;
+}
+
+export declare type AvatarLabelGroupSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare const AvatarProfilePhoto: {
+    ({ src, alt, initials, size, verified, contrastBorder, className, }: AvatarProfilePhotoProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface AvatarProfilePhotoProps {
+    src?: string;
+    alt?: string;
+    /** Renders centered initials instead of a photo/placeholder icon. */
+    initials?: React_2.ReactNode;
+    size?: AvatarProfilePhotoSize;
+    verified?: boolean;
+    contrastBorder?: boolean;
+    className?: string;
+}
+
+export declare type AvatarProfilePhotoSize = 'sm' | 'md' | 'lg';
+
+export declare interface AvatarProps {
+    /** Image URL. When provided, renders the photo. */
+    src?: string;
+    alt?: string;
+    /** Renders centered initials instead of a photo/placeholder icon. */
+    initials?: React_2.ReactNode;
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    /** Custom content for the "company" status badge (e.g. a logo image). */
+    statusIcon?: React_2.ReactNode;
+    contrastBorder?: boolean;
+    className?: string;
+}
+
+export declare type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export declare type AvatarStatus = 'none' | 'online' | 'company' | 'verified';
+
+export declare const Badge: {
+    ({ children, size, shape, variant, color, customColor, modern, icon, trailingIcon, checked, onCheckedChange, onClose, iconOnly, disabled, className, }: BadgeProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare type BadgeColor = 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'blue-gray' | 'blue-light' | 'indigo' | 'purple' | 'blue' | 'pink' | 'orange';
+
+export declare const BadgeGroup: {
+    ({ badgeLabel, children, size, theme, color, badgePosition, icon, onClick, className, }: BadgeGroupProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare type BadgeGroupBadgePosition = 'leading' | 'trailing';
+
+export declare type BadgeGroupColor = 'brand' | 'gray' | 'error' | 'warning' | 'success';
+
+export declare interface BadgeGroupProps {
+    /** Text shown inside the small inner chip, e.g. "New" */
+    badgeLabel: React_2.ReactNode;
+    /** The announcement message */
+    children: React_2.ReactNode;
+    size?: BadgeGroupSize;
+    theme?: BadgeGroupTheme;
+    color?: BadgeGroupColor;
+    badgePosition?: BadgeGroupBadgePosition;
+    /** Optional trailing icon (e.g. an arrow) */
+    icon?: React_2.ReactNode;
+    onClick?: () => void;
+    className?: string;
+}
+
+export declare type BadgeGroupSize = 'md' | 'lg';
+
+export declare type BadgeGroupTheme = 'light' | 'outline' | 'modern';
+
+export declare interface BadgeProps {
+    children?: React_2.ReactNode;
+    size?: BadgeSize;
+    shape?: BadgeShape;
+    variant?: BadgeVariant;
+    color?: BadgeColor;
+    /** Custom accent color as a 6-digit hex (e.g. "#13a8bf"), applied to border, background/tint and text. Overrides `color` when set. Ignored if not a valid 6-digit hex. */
+    customColor?: string;
+    modern?: boolean;
+    icon?: React_2.ReactNode;
+    trailingIcon?: React_2.ReactNode;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    onClose?: () => void;
+    iconOnly?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+
+export declare type BadgeShape = 'pill' | 'badge';
+
+export declare type BadgeSize = 'sm' | 'md' | 'lg';
+
+export declare type BadgeVariant = 'solid' | 'outline';
+
+export declare const Button: ButtonCompound;
+
+/** `ForwardRefExoticComponent` rather than `FC`: the base forwards a ref to its `<button>`. */
+declare type ButtonCompound = React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>> & {
+    Icon: React_2.FC<ButtonSubComponentProps>;
+    Text: React_2.FC<ButtonSubComponentProps>;
+};
+
+declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    iconOnly?: boolean;
+}
+
+declare type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+declare interface ButtonSubComponentProps {
+    children: React_2.ReactNode;
+}
+
+declare type ButtonTone = 'primary' | 'destructive';
+
+declare type ButtonVariant = 'solid' | 'outline' | 'outline-primary' | 'ghost' | 'ghost-primary' | 'plain' | 'plain-black';
+
+export declare function CardNumberInput({ size, label, required, hint, error, disabled, placeholder, value, onChange, rightIcon, prefix, className, wrapperClassName, }: CardNumberInputProps): JSX_2.Element;
+
+declare interface CardNumberInputProps {
+    size?: 'sm' | 'md';
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    value?: string;
+    onChange?: default_2.ChangeEventHandler<HTMLInputElement>;
+    rightIcon?: default_2.ReactNode;
+    prefix?: default_2.ReactNode;
+    className?: InputProps['className'];
+    wrapperClassName?: InputProps['wrapperClassName'];
+}
+
+export declare const Checkbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface CheckboxProps {
+    id?: string;
+    checked: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: CheckboxSize;
+    onCheckedChange?: (value: boolean) => void;
+    className?: string;
+}
+
+declare type CheckboxSize = 'sm' | 'md'
+/** @deprecated `lg` is no longer a distinct size — it now renders identically to `md` and will be removed in a future major version. Migrate to `md`. */
+| 'lg';
+
+export declare function Dropdown({ trigger, label, icon, avatarSrc, avatarInitials, header, items, open: openProp, defaultOpen, onOpenChange, disabled, align, className, menuClassName, }: DropdownProps): JSX_2.Element;
+
+export declare interface DropdownHeader {
+    name: React_2.ReactNode;
+    subtitle?: React_2.ReactNode;
+    avatarSrc?: string;
+    avatarInitials?: React_2.ReactNode;
+    status?: AvatarStatus;
+}
+
+export declare interface DropdownMenuItem {
+    id: string;
+    /** Renders a horizontal divider instead of an item when true. */
+    divider?: boolean;
+    label?: string;
+    icon?: React_2.ReactNode;
+    /** Trailing shortcut hint (e.g. "⌘C"). */
+    shortcut?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+
+export declare interface DropdownProps {
+    /** "button" shows a labeled trigger, "icon" a kebab trigger, "avatar" the user's avatar. */
+    trigger?: DropdownTriggerType;
+    /** Label for the "button" trigger. */
+    label?: string;
+    /** Custom icon for the "icon" trigger (defaults to a vertical-dots icon). */
+    icon?: React_2.ReactNode;
+    /** Avatar image for the "avatar" trigger. */
+    avatarSrc?: string;
+    avatarInitials?: React_2.ReactNode;
+    /** Optional user summary rendered at the top of the menu. */
+    header?: DropdownHeader;
+    items: DropdownMenuItem[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** Which edge of the trigger the menu aligns to. */
+    align?: 'start' | 'end';
+    className?: ClassValue;
+    menuClassName?: ClassValue;
+}
+
+export declare type DropdownTriggerType = 'button' | 'icon' | 'avatar';
+
+export declare const Input: InputCompound;
+
+/**
+ * Forwards its ref to the inner `<input>`, so callers can focus, select, or measure
+ * the field — inline-edit affordances and autofocus need this.
+ */
+declare const Input_2: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
+
+declare type InputCompound = typeof Input_2 & {
+    Prefix: typeof InputPrefix;
+    Suffix: typeof InputSuffix;
+};
+
+export declare function InputCounter({ size, label, required, hint, disabled, error, className, wrapperClassName, value, maxLength, placeholder, onChange, }: InputCounterProps): JSX_2.Element;
+
+declare interface InputCounterProps {
+    size?: 'sm' | 'md';
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    disabled?: boolean;
+    error?: boolean;
+    className?: InputProps['className'];
+    wrapperClassName?: InputProps['wrapperClassName'];
+    value: string;
+    maxLength: number;
+    placeholder?: string;
+    onChange?: default_2.ChangeEventHandler<HTMLInputElement>;
+}
+
+export declare function InputDropdown({ size, type, label, required, helpIcon, hint, placeholder, disabled, compact, leadingIcon, options, value, onChange, values, onValuesChange, className, wrapperClassName, }: InputDropdownProps): JSX_2.Element;
+
+export declare interface InputDropdownOption {
+    id: string;
+    label: string;
+    /** Muted secondary text rendered after the label (e.g. "@nicholas"). */
+    supportingText?: string;
+    /** Leading icon rendered before the label. */
+    icon?: React_2.ReactNode;
+    /** Avatar image URL rendered before the label. */
+    avatar?: string;
+    /** Dot color rendered before the label (any CSS color). */
+    dot?: string;
+    disabled?: boolean;
+}
+
+export declare interface InputDropdownProps {
+    size?: InputDropdownSize;
+    /**
+     * "default" is a click-to-select dropdown, "search" adds a filter input,
+     * "tags" is a searchable multi-select with removable tags.
+     */
+    type?: InputDropdownType;
+    label?: string;
+    required?: boolean;
+    /** Tighter padding/height/radius and a smaller semibold label, independent of `size`'s font scale. Opt-in, does not affect default styling. */
+    compact?: boolean;
+    /** Rendered after the label (e.g. a help tooltip icon). */
+    helpIcon?: React_2.ReactNode;
+    hint?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Leading ornament shown on the trigger while no option is selected (e.g. a user icon or dot). */
+    leadingIcon?: React_2.ReactNode;
+    options: InputDropdownOption[];
+    /** Selected option id ("default" / "search" types). */
+    value?: string | null;
+    onChange?: (option: InputDropdownOption) => void;
+    /** Selected option ids ("tags" type). */
+    values?: string[];
+    onValuesChange?: (ids: string[]) => void;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}
+
+export declare type InputDropdownSize = 'xs' | 'sm' | 'md';
+
+declare interface InputDropdownSlot {
+    value: React_2.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+
+export declare type InputDropdownType = 'default' | 'search' | 'tags';
+
+declare function InputPrefix({ children }: {
+    children: ReactNode;
+}): JSX_2.Element;
+
+declare interface InputProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'className'> {
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    rightIcon?: React_2.ReactNode;
+    size?: InputSize;
+    error?: boolean;
+    /** Tighter padding/height/radius and a smaller semibold label, independent of `size`'s font scale. Opt-in, does not affect default styling. */
+    compact?: boolean;
+    /** Hides the browser-native calendar icon on `type="date"` inputs (e.g. when a custom `prefix` icon already covers that affordance). Opt-in, no effect on other input types or existing consumers. */
+    hideCalendarIcon?: boolean;
+    prefix?: React_2.ReactNode;
+    suffix?: React_2.ReactNode;
+    /** Renders a separately-boxed add-on (e.g. "http://") divided from the input by its own border. */
+    leadingAddon?: React_2.ReactNode;
+    /** Renders a clickable value+chevron trigger sharing the input's border, no divider (e.g. country code). */
+    leadingDropdown?: InputDropdownSlot;
+    /** Renders a clickable value+chevron trigger sharing the input's border, no divider (e.g. currency). */
+    trailingDropdown?: InputDropdownSlot;
+    /** Renders a button fused to the input's trailing edge, sharing the outer border (e.g. "Copy"). */
+    trailingButton?: InputTrailingButtonSlot;
+    maxLength?: number;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}
+
+declare type InputSize = 'xs' | 'sm' | 'md';
+
+declare function InputSuffix({ children }: {
+    children: ReactNode;
+}): JSX_2.Element;
+
+declare interface InputTrailingButtonSlot {
+    label: React_2.ReactNode;
+    icon?: React_2.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+}
+
+export declare const Loading: {
+    ({ size, style, supportingText, label, className, }: LoadingProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface LoadingProps {
+    size?: LoadingSize;
+    style?: LoadingStyle;
+    supportingText?: boolean;
+    label?: React_2.ReactNode;
+    className?: string;
+}
+
+export declare type LoadingSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export declare type LoadingStyle = 'line-simple' | 'line-spinner' | 'dot-circle';
+
+export declare function MultiSelectInput({ size, label, required, hint, error, disabled, placeholder, rightIcon, className, wrapperClassName, options, value, onChange, }: MultiSelectInputProps): JSX_2.Element;
+
+declare interface MultiSelectInputProps {
+    size?: 'sm' | 'md';
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    rightIcon?: default_2.ReactNode;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+    options: MultiSelectOption[];
+    value?: MultiSelectOption[];
+    onChange?: (value: MultiSelectOption[]) => void;
+}
+
+declare interface MultiSelectOption {
+    id: string;
+    label: string;
+    avatar?: string;
+}
+
+export declare function PhoneInput({ size, label, required, hint, error, disabled, placeholder, rightIcon, value, onChange, className, wrapperClassName, }: PhoneInputProps): JSX_2.Element;
+
+declare interface PhoneInputProps {
+    size?: 'sm' | 'md';
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    rightIcon?: default_2.ReactNode;
+    value?: string;
+    onChange?: default_2.ChangeEventHandler<HTMLInputElement>;
+    className?: InputProps['className'];
+    wrapperClassName?: InputProps['wrapperClassName'];
+}
+
+export declare const RadioGroup: ({ value, defaultValue, onValueChange, children, className, }: RadioGroupProps) => JSX_2.Element;
+
+export declare const RadioGroupItem: React_2.ForwardRefExoticComponent<RadioGroupItemProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface RadioGroupItemProps {
+    id?: string;
+    value: string;
+    disabled?: boolean;
+    size?: RadioSize;
+    className?: string;
+}
+
+export declare interface RadioGroupProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    children: React.ReactNode;
+    className?: string;
+}
+
+declare type RadioSize = 'sm' | 'md'
+/** @deprecated `lg` is no longer a distinct size — it now renders identically to `md` and will be removed in a future major version. Migrate to `md`. */
+| 'lg';
+
+export declare function SaleAmountInput({ size, label, required, hint, error, disabled, value, placeholder, currency, onCurrencyChange, rightIcon, onChange, className, wrapperClassName, }: SaleAmountInputProps): JSX_2.Element;
+
+declare interface SaleAmountInputProps {
+    size?: 'sm' | 'md';
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: boolean;
+    disabled?: boolean;
+    value?: string;
+    placeholder?: string;
+    currency?: string;
+    onCurrencyChange?: () => void;
+    rightIcon?: default_2.ReactNode;
+    onChange?: default_2.ChangeEventHandler<HTMLInputElement>;
+    className?: InputProps['className'];
+    wrapperClassName?: InputProps['wrapperClassName'];
+}
+
+/**
+ * Renders on react-aria-components' `<Tab>`, so it only works inside a `TabList` (which
+ * supplies the `<Tabs>` context). `active`/`onClick` stay the public API — `TabList` reads
+ * `active` off each child to derive RAC's `selectedKey`, and reaches back into `onClick` when
+ * a press or arrow-key navigation changes the selection — so callers keep driving state
+ * exactly as before and get roving-tabindex keyboard nav for free.
+ */
+export declare const Tab: {
+    ({ children, variant, size, fullWidth, count, iconLeft, iconRight, disabled, onClick, className, id, active: _active, }: TabProps): JSX_2.Element;
+    displayName: string;
+};
+
+/**
+ * Renders on react-aria-components' `<Tab>`, so it only works inside a `TabBrowserBar`
+ * (which supplies the `<Tabs>`/`<TabList>` context). `active`/`onClick` stay the public API —
+ * TabBrowserBar reads `active` off each child to derive RAC's `selectedKey`, and reaches back
+ * into `onClick` when a press or arrow-key navigation changes the selection — so callers keep
+ * driving state exactly as before and get roving-tabindex keyboard nav for free.
+ */
+export declare const TabBrowser: React_2.ForwardRefExoticComponent<TabBrowserProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Backed by react-aria-components' `<Tabs>` for roving-tabindex arrow-key navigation and
+ * focus management. Selection still lives with the caller: each `TabBrowser` child's own
+ * `active`/`onClick` stay the source of truth — this derives RAC's `selectedKey` from
+ * whichever child is `active`, and reaches back into that child's `onClick` when RAC changes
+ * the selection (arrow keys, click, or press), so the caller's state — and therefore
+ * `selectedKey` on the next render — stays in sync.
+ *
+ * Deliberately draws no divider — that belongs to whatever surface hosts the row, so it can
+ * span the full header width.
+ *
+ * No `gap` either: each tab reserves its own breathing room (see TAB_PADDING_X), which keeps
+ * spacing identical whether or not a tab is selected. A flex gap on top would read as dead
+ * space beside the selected tab only.
+ *
+ * Nor any height or leading space — how far the row sits from what's above it depends on the
+ * surface, so that stays with the caller.
+ */
+export declare const TabBrowserBar: {
+    ({ children, separators, trailingSlot, overflow, overflowLabel, className, }: TabBrowserBarProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface TabBrowserBarProps {
+    children: React_2.ReactNode;
+    /** Renders a vertical divider between adjacent tabs. */
+    separators?: boolean;
+    /** Extra content pinned to the end of the row, e.g. a "+" add button or CTA buttons. */
+    trailingSlot?: React_2.ReactNode;
+    /**
+     * Collapses whichever tabs don't fit the row's measured width into a trailing "+N" menu,
+     * instead of letting the row overflow. Off by default — enable it once the bar sits in a
+     * container with a real width constraint (a flex/grid item, not one that grows to fit its
+     * content).
+     */
+    overflow?: boolean;
+    /** Customizes the overflow trigger's label. Defaults to `+${hiddenCount}`. */
+    overflowLabel?: (hiddenCount: number) => React_2.ReactNode;
+    className?: string;
+}
+
+/**
+ * A visual-only clone of `TabBrowser`, for places with no `TabBrowserBar` above them to
+ * supply react-aria-components' `Tabs`/`TabList` context — a dnd-kit drag-overlay clone of a
+ * tab is the motivating case. Same silhouette, same clip-path outline, driven off `active`
+ * directly instead of RAC's `isSelected` render prop.
+ *
+ * `TabBrowser` can't grow this fallback itself: RAC's `TabList` walks its children through a
+ * hidden collection-scan pass before the real commit, and that pass runs before
+ * `TabListStateContext` is populated — so a context check inside `TabBrowser` reads "not in a
+ * bar" even when it is, and the whole row comes up empty. Keeping this as its own component
+ * sidesteps that scan entirely.
+ *
+ * No keyboard nav, no selection wiring, no roving tabindex — this renders a picture of a tab,
+ * not a functioning one. Don't reach for it inside a `TabBrowserBar`; use `TabBrowser` there.
+ */
+export declare const TabBrowserPreview: React_2.ForwardRefExoticComponent<TabBrowserPreviewProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TabBrowserPreviewProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Whether this preview renders in its selected/active look. */
+    active?: boolean;
+    /** Sizing variant — see `TabBrowserType`. */
+    type?: TabBrowserType;
+    disabled?: boolean;
+    /**
+     * Removes the browser-tab silhouette and fixed sizing so `className` can fully control
+     * padding, dimensions, borders, and hover states.
+     */
+    unstyled?: boolean;
+    /** Icon rendered before the label. */
+    iconLeft?: React_2.ReactNode;
+    /** Rendered after the label, e.g. a status Badge. */
+    trailing?: React_2.ReactNode;
+    /** Shorthand for the native `title`, which wins if both are given. */
+    tooltip?: string;
+    /** Classes applied to the tab's inner content element. */
+    contentClassName?: string;
+    /** Inline styles applied to the tab's inner content element. */
+    contentStyle?: React_2.CSSProperties;
+    children: React_2.ReactNode;
+}
+
+/**
+ * Everything a `<button>` takes comes through — `id`, `aria-controls`, `tabIndex`,
+ * `onKeyDown`, `data-*`. The tab carries `role="tab"` but leaves selection and panel wiring
+ * to the caller, so those are the props they build it out of.
+ *
+ * `type` is the exception: it names the sizing variant here, and the rendered button is
+ * pinned to `type="button"` so it never submits a form it happens to sit in.
+ */
+export declare interface TabBrowserProps extends Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** Whether this tab is the currently selected one. */
+    active?: boolean;
+    /** Sizing variant — see `TabBrowserType`. */
+    type?: TabBrowserType;
+    /**
+     * Removes the browser-tab silhouette and fixed sizing so `className` can fully control
+     * padding, dimensions, borders, and hover states.
+     */
+    unstyled?: boolean;
+    /** Icon rendered before the label. */
+    iconLeft?: React_2.ReactNode;
+    /** Rendered after the label, e.g. a status Badge. */
+    trailing?: React_2.ReactNode;
+    /** Shorthand for the native `title`, which wins if both are given. */
+    tooltip?: string;
+    /** Classes applied to the tab's inner content element. */
+    contentClassName?: string;
+    /** Inline styles applied to the tab's inner content element. */
+    contentStyle?: React_2.CSSProperties;
+    children: React_2.ReactNode;
+}
+
+/**
+ * Sizing variant, mirroring the design system's Tab Browser Base. `default` sizes each tab
+ * to its own label; `max-width` makes them equal-width and lets the row divide itself
+ * between them, which also runs them shorter.
+ */
+export declare type TabBrowserType = 'default' | 'max-width';
+
+/**
+ * Backed by react-aria-components' `<Tabs>` for roving-tabindex arrow-key navigation and
+ * focus management. Selection still lives with the caller: each `Tab` child's own
+ * `active`/`onClick` stay the source of truth — this derives RAC's `selectedKey` from
+ * whichever child is `active`, and reaches back into that child's `onClick` when RAC changes
+ * the selection (arrow keys, click, or press), so the caller's state — and therefore
+ * `selectedKey` on the next render — stays in sync.
+ */
+export declare const TabList: {
+    ({ children, variant, orientation, boxed, "aria-label": ariaLabel, keyboardActivation, disabledKeys, className, }: TabListProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare type TabListOrientation = 'horizontal' | 'vertical';
+
+export declare interface TabListProps {
+    /** `Tab` elements to render; selection is read from each child's `active` prop. */
+    children: React_2.ReactNode;
+    /** Controls the default gap and whether a bottom hairline is drawn under the row. */
+    variant?: TabVariant;
+    /** Arrow-key axis: horizontal moves with Left/Right, vertical with Up/Down. */
+    orientation?: TabListOrientation;
+    /** Wraps the tabs in a padded gray card (used by the "boxed" button-tab treatments). */
+    boxed?: boolean;
+    /** Accessible name for the tab row, read by screen readers. */
+    'aria-label'?: string;
+    /** Whether arrow-key focus also selects ("automatic", RAC's default) or only Enter/Space does ("manual"). */
+    keyboardActivation?: 'automatic' | 'manual';
+    /** Keys of `Tab` children (their index as a string) to remove from selection and keyboard navigation. */
+    disabledKeys?: Iterable<Key>;
+    className?: string;
+}
+
+export declare interface TabProps {
+    /** Tab label content. */
+    children: React_2.ReactNode;
+    /** Visual style; should match the parent TabList's variant. */
+    variant?: TabVariant;
+    size?: TabSize;
+    /** Whether this tab is the current selection. */
+    active?: boolean;
+    /** Stretches the tab to fill available row width. */
+    fullWidth?: boolean;
+    /** Count badge rendered after the label. */
+    count?: number | string;
+    /** Icon rendered before the label. */
+    iconLeft?: React_2.ReactNode;
+    /** Icon rendered after the badge, e.g. a chevron. */
+    iconRight?: React_2.ReactNode;
+    /** Removes the tab from RAC's keyboard/selection order. */
+    disabled?: boolean;
+    /** Fires on select, including via keyboard navigation. */
+    onClick?: () => void;
+    className?: string;
+    /** Set internally by `TabList` to key the tab for RAC's roving-tabindex selection. */
+    id?: string;
+}
+
+export declare type TabSize = 'sm' | 'md';
+
+export declare type TabVariant = 'button-gray' | 'button-white' | 'button-primary' | 'underline' | 'underline-filled' | 'line';
+
+export declare const Tag: {
+    ({ children, size, shape, icon, checked, onCheckedChange, onClose, count, disabled, className, color, customColor, }: TagProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare type TagColor = 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'blue-gray' | 'blue-light' | 'indigo' | 'purple' | 'blue' | 'pink' | 'orange';
+
+export declare interface TagProps {
+    children: React_2.ReactNode;
+    size?: TagSize;
+    /** Corner style. 'rounded' = rounded-md (default), 'pill' = fully rounded. */
+    shape?: TagShape;
+    icon?: React_2.ReactNode;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    onClose?: () => void;
+    count?: number | string;
+    disabled?: boolean;
+    className?: string;
+    /** Named accent color token for the border, background and text. Defaults to 'gray'. */
+    color?: TagColor;
+    /** Custom accent color as a 6-digit hex (e.g. "#13a8bf"), applied to border, background tint and text. Overrides `color` when set. Ignored if not a valid 6-digit hex. */
+    customColor?: string;
+}
+
+export declare type TagShape = 'rounded' | 'pill';
+
+export declare type TagSize = 'sm' | 'md' | 'lg';
+
+export declare const Textarea: React_2.ForwardRefExoticComponent<TextareaProps & React_2.RefAttributes<HTMLTextAreaElement>>;
+
+export declare interface TextareaProps extends Omit<React_2.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    helpIcon?: React_2.ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    resizable?: boolean;
+    /** Tighter padding/min-height and a smaller semibold label, for compact form layouts (e.g. a multi-field grid). Opt-in, does not affect default styling. */
+    compact?: boolean;
+    /** Number of visible text lines. Drives an explicit min-height (rows × 20px line-height) that overrides the default/compact min-height, instead of just being a floor the browser's intrinsic sizing can exceed unpredictably. */
+    rows?: number;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}
+
+export declare const Toggle: React_2.ForwardRefExoticComponent<ToggleProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface ToggleProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    checked?: boolean;
+    size?: ToggleSize;
+    variant?: ToggleVariant;
+    onCheckedChange?: (checked: boolean) => void;
+}
+
+declare type ToggleSize = 'sm' | 'md'
+/** @deprecated `lg` is no longer a distinct size — it now renders identically to `md` and will be removed in a future major version. Migrate to `md`. */
+| 'lg';
+
+declare type ToggleVariant = 'default' | 'success';
+
+export declare const Tooltip: {
+    ({ content, supportingText, side, open, defaultOpen, disabled, delay, className, children, }: TooltipProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface TooltipProps {
+    content: React_2.ReactNode;
+    supportingText?: React_2.ReactNode;
+    children: React_2.ReactElement;
+    side?: TooltipSide;
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    delay?: number;
+    className?: string;
+}
+
+declare type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+
+export declare function WebsiteCopyInput({ size, label, required, hint, error, disabled, placeholder, value, rightIcon, suffix, onChange, className, wrapperClassName, }: WebsiteCopyInputProps): JSX_2.Element;
+
+declare interface WebsiteCopyInputProps {
+    size?: 'sm' | 'md';
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    value?: string;
+    rightIcon?: default_2.ReactNode;
+    suffix?: default_2.ReactNode;
+    onChange?: default_2.ChangeEventHandler<HTMLInputElement>;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}
+
+export declare function WebsiteInput({ size, label, required, hint, error, disabled, placeholder, value, rightIcon, onChange, className, wrapperClassName, }: WebsiteInputProps): JSX_2.Element;
+
+declare interface WebsiteInputProps {
+    size?: 'sm' | 'md';
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    value?: string;
+    rightIcon?: default_2.ReactNode;
+    onChange?: default_2.ChangeEventHandler<HTMLInputElement>;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}
+
+export { }