@vellira-ui/react 2.126.9 → 2.126.11

package/dist/managers/OverlayManager/types.d.ts

@@ -0,0 +1,42 @@
+import { lightTheme } from '@vellira-ui/tokens';
+import { ReactNode } from 'react';
+export type OverlayZIndexLevel = keyof typeof lightTheme.tokens.zIndex;
+export type OverlayEntry = {
+    id: string;
+    zIndexLevel: OverlayZIndexLevel;
+    order: number;
+    zIndex?: number;
+};
+export type OverlayRegistration = {
+    id: string;
+    zIndexLevel?: OverlayZIndexLevel;
+    zIndex?: number;
+};
+export type OverlayEscapeHandler = (event: KeyboardEvent) => void;
+export type OverlayPointerDownOutsideHandler = (event: PointerEvent) => void;
+export type OverlaySnapshot = {
+    registry: ReadonlyMap<string, OverlayEntry>;
+    stack: readonly OverlayEntry[];
+    topmost: OverlayEntry | null;
+};
+export type OverlayManager = {
+    register: (registration: OverlayRegistration) => OverlayEntry;
+    unregister: (id: string) => void;
+    update: (registration: OverlayRegistration) => OverlayEntry | null;
+    getSnapshot: () => OverlaySnapshot;
+    getEntry: (id: string) => OverlayEntry | null;
+    getStack: () => readonly OverlayEntry[];
+    getTopmost: () => OverlayEntry | null;
+    isTopmost: (id: string) => boolean;
+    getZIndex: (id: string) => number | undefined;
+    registerEscapeHandler: (id: string, handler: OverlayEscapeHandler) => () => void;
+    dispatchEscapeKeyDown: (event: KeyboardEvent) => boolean;
+    registerPointerDownOutsideHandler: (id: string, handler: OverlayPointerDownOutsideHandler) => () => void;
+    dispatchPointerDownOutside: (event: PointerEvent) => boolean;
+    subscribe: (listener: () => void) => () => void;
+    clear: () => void;
+};
+export type OverlayManagerProviderProps = {
+    children: ReactNode;
+    manager?: OverlayManager;
+};

package/dist/managers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FloatingManager';
+export * from './OverlayManager';

package/dist/patterns/FormField/FormField.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { FormFieldControlProps, FormFieldDescriptionProps, FormFieldLabelProps, FormFieldMessageProps, FormFieldProps } from './types';
+type FormFieldSlot = 'label' | 'description' | 'control' | 'message';
+type FormFieldSlotComponent<TProps> = ((props: TProps) => ReactElement | null) & {
+    __velliraFormFieldPart?: FormFieldSlot;
+    displayName?: string;
+};
+export declare const FormField: (({ id, label, description, error, message, messageTone, messageLive, required, disabled, invalid, orientation, labelPosition, size, labelInfo, labelAction, optionalText, children, bindControl, className, controlClassName, labelClassName, descriptionClassName, errorClassName, messageClassName, ...rest }: FormFieldProps) => import('react').JSX.Element) & {
+    Label: FormFieldSlotComponent<FormFieldLabelProps>;
+    Description: FormFieldSlotComponent<FormFieldDescriptionProps>;
+    Control: FormFieldSlotComponent<FormFieldControlProps>;
+    Message: FormFieldSlotComponent<FormFieldMessageProps>;
+    displayName: string;
+};
+export {};

package/dist/patterns/FormField/FormFieldContext.d.ts

@@ -0,0 +1,16 @@
+import { InputSize } from '@vellira-ui/types';
+export type FormFieldContextValue = {
+    controlId: string;
+    labelId?: string;
+    descriptionId?: string;
+    errorId?: string;
+    messageId?: string;
+    required: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    size: InputSize;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+};
+export declare const FormFieldContext: import('react').Context<FormFieldContextValue | null>;
+export declare const useFormFieldContext: () => FormFieldContextValue | null;

package/dist/patterns/FormField/index.d.ts

@@ -0,0 +1,3 @@
+export { FormField } from './FormField';
+export { useFormFieldContext } from './FormFieldContext';
+export type { FormFieldControlProps, FormFieldDescriptionProps, FormFieldLabelProps, FormFieldMessageProps, FormFieldProps, } from './types';

package/dist/patterns/FormField/types.d.ts

@@ -0,0 +1,64 @@
+import { BaseFormFieldProps, FormFieldMessageLive, FormFieldMessageTone } from '@vellira-ui/types';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface FormFieldProps extends Omit<BaseFormFieldProps, 'description' | 'error' | 'label' | 'labelAction' | 'labelInfo' | 'message' | 'optionalText'>, Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'id'> {
+    /** Field id used as the control id. Generated when omitted. */
+    id?: string;
+    /** Visible field label. */
+    label?: ReactNode;
+    /** Supporting text linked to compatible controls. */
+    description?: ReactNode;
+    /** Error content linked to compatible controls. Also implies invalid state. */
+    error?: ReactNode;
+    /** Supporting result/status message linked to compatible controls. Replaced by error when present. */
+    message?: ReactNode;
+    /** Additional label content, such as an info affordance. */
+    labelInfo?: ReactNode;
+    /** Action rendered next to the label without nesting inside the label element. */
+    labelAction?: ReactNode;
+    /** Optional marker shown for non-required fields. Do not combine with required. */
+    optionalText?: ReactNode;
+    /** Control or custom field layout content. */
+    children: ReactNode;
+    /** Automatically binds a direct native control child with generated id and aria props. */
+    bindControl?: boolean;
+    /** Class name applied to the control wrapper. */
+    controlClassName?: string;
+    /** Class name applied to the label. */
+    labelClassName?: string;
+    /** Class name applied to the description. */
+    descriptionClassName?: string;
+    /** Class name applied to the error content. */
+    errorClassName?: string;
+    /** Class name applied to the message content. */
+    messageClassName?: string;
+}
+export interface FormFieldLabelProps {
+    /** Label content. */
+    children: ReactNode;
+    /** Action rendered next to the label without nesting inside the label element. */
+    action?: ReactNode;
+    /** Additional label content, such as an info affordance. */
+    info?: ReactNode;
+    /** Optional marker shown for non-required fields. Do not combine with required. */
+    optionalText?: ReactNode;
+    /** Class name applied to the label. */
+    className?: string;
+}
+export interface FormFieldDescriptionProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'id'> {
+    /** Supporting text linked to compatible controls. */
+    children: ReactNode;
+}
+export interface FormFieldControlProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Control or custom field layout content. */
+    children: ReactNode;
+    /** Automatically binds a direct native control child with generated id and aria props. */
+    bindControl?: boolean;
+}
+export interface FormFieldMessageProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'id'> {
+    /** Supporting result/status message linked to compatible controls. Replaced by error when present. */
+    children: ReactNode;
+    /** Visual tone for message. Error always uses danger tone. */
+    tone?: FormFieldMessageTone;
+    /** Live region behavior for non-error message content. */
+    live?: FormFieldMessageLive;
+}

package/dist/patterns/index.d.ts

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

package/dist/primitives/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from './types';
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/primitives/Button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+export type * from './types';

package/dist/primitives/Button/types.d.ts

@@ -0,0 +1,22 @@
+import { BaseButtonProps, ButtonAppearance } from '@vellira-ui/types';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+export interface ButtonProps extends Omit<BaseButtonProps, 'appearance'>, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'rel' | 'download'> {
+    /** Visible button content. */
+    children?: ReactNode;
+    /** Visual appearance. `bare` preserves Button behavior while composition owns chrome and geometry. */
+    appearance?: ButtonAppearance | 'bare';
+    /** Icon rendered before the button content. */
+    iconStart?: ReactNode;
+    /** Icon rendered after the button content. */
+    iconEnd?: ReactNode;
+    /** Custom loading indicator rendered while loading. */
+    spinner?: ReactNode;
+    /** HTML title tooltip text for the button or composed child. */
+    tooltip?: string;
+    /** Compact badge rendered after the label when not icon-only. */
+    badge?: ReactNode;
+    /** Keyboard shortcut hint rendered after the label when not icon-only. */
+    shortcut?: ReactNode;
+    /** Composes Button behavior and styling onto a single child element. */
+    asChild?: boolean;
+}

package/dist/primitives/Checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxProps } from './types';
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/primitives/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './types';

package/dist/primitives/Checkbox/types.d.ts

@@ -0,0 +1,18 @@
+import { BaseCheckboxProps } from '@vellira-ui/types';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface CheckboxProps extends BaseCheckboxProps, Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'color' | 'checked' | 'defaultChecked' | 'onChange' | 'type'> {
+    /** Visible label rendered next to the control. */
+    label?: ReactNode;
+    /** Helper text rendered below the checkbox row. */
+    description?: ReactNode;
+    /** Icon rendered for the checked state. */
+    icon?: ReactNode;
+    /** Icon rendered for the indeterminate state. */
+    indeterminateIcon?: ReactNode;
+    /** Selected checkbox color. */
+    color?: BaseCheckboxProps['color'];
+    /** Position of the visible label relative to the checkbox. */
+    labelPosition?: BaseCheckboxProps['labelPosition'];
+    /** Extra CSS class for the clickable label wrapper. */
+    wrapperClassName?: string;
+}

package/dist/primitives/Input/Input.d.ts

@@ -0,0 +1,2 @@
+import { InputProps } from './types';
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/primitives/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps } from './types';

package/dist/primitives/Input/types.d.ts

@@ -0,0 +1,50 @@
+import { InputAdornmentTone, InputBaseProps, InputFormatter, InputMask, InputParser, InputVariant } from '@vellira-ui/types';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface InputProps extends Omit<InputBaseProps, 'variant'>, Omit<ComponentPropsWithoutRef<'input'>, 'color' | 'onChange' | 'prefix' | 'size'> {
+    /** Native input type. Search automatically adds a start search icon. */
+    type?: ComponentPropsWithoutRef<'input'>['type'];
+    /** Controlled value. */
+    value?: ComponentPropsWithoutRef<'input'>['value'];
+    /** Initial uncontrolled value. */
+    defaultValue?: ComponentPropsWithoutRef<'input'>['defaultValue'];
+    /** Called with the next string value. */
+    onValueChange?: (value: string) => void;
+    /** Visual variant. `bare` preserves Input behavior while composition owns field chrome. */
+    variant?: InputVariant | 'bare';
+    /** Control id. Inherits the generated FormField id when omitted. */
+    id?: string;
+    /** Native input name. */
+    name?: string;
+    /** Icon rendered at the start of the control. */
+    startIcon?: ReactNode;
+    /** Icon rendered in the right slot when no higher-priority action is active. */
+    endIcon?: ReactNode;
+    /** Segmented addon rendered before the input. */
+    startAddon?: ReactNode;
+    /** Segmented addon rendered after the input. */
+    endAddon?: ReactNode;
+    /** Inline prefix rendered inside the input chrome. */
+    prefix?: ReactNode;
+    /** Inline suffix rendered inside the input chrome. */
+    suffix?: ReactNode;
+    /** Custom clear action content. Defaults to the canonical Vellira Close icon. */
+    clearIcon?: ReactNode;
+    /** Input mask. String masks use # as a digit placeholder. */
+    mask?: InputMask;
+    /** Formats the displayed value without changing the controlled value. */
+    format?: InputFormatter;
+    /** Parses a formatted display value before mask/onValueChange. */
+    parse?: InputParser;
+    /** Tone for startIcon. */
+    startIconTone?: InputAdornmentTone;
+    /** Tone for endIcon. */
+    endIconTone?: InputAdornmentTone;
+    /** Tone for clearIcon. */
+    clearIconTone?: InputAdornmentTone;
+    /** Class name applied to the outer FormField wrapper in shorthand mode. */
+    wrapperClassName?: string;
+    /** Class name applied to the native input element. */
+    className?: string;
+    /** Native autocomplete value. When omitted, sensible values are derived from type. */
+    autoComplete?: string;
+}

package/dist/primitives/Portal/Portal.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { PortalProps, PortalProviderProps } from './types';
+type PortalComponent = ((props: PortalProps) => React.ReactElement | null) & {
+    __velliraPortal?: true;
+    displayName?: string;
+};
+export declare const PortalProvider: {
+    ({ children, container, }: PortalProviderProps): React.JSX.Element;
+    displayName: string;
+};
+export declare const Portal: PortalComponent;
+export {};

package/dist/primitives/Portal/index.d.ts

@@ -0,0 +1,2 @@
+export { Portal, PortalProvider } from './Portal';
+export type { PortalProps, PortalProviderProps } from './types';

package/dist/primitives/Portal/types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export type PortalProps = {
+    /** Content rendered into the portal container. */
+    children: ReactNode;
+    /** DOM container that receives the portal content. */
+    container?: Element | DocumentFragment | null;
+};
+export type PortalProviderProps = {
+    /** Provider children that can consume the default portal container. */
+    children: ReactNode;
+    /** Default DOM container used by nested portals. */
+    container?: Element | DocumentFragment | null;
+};

package/dist/primitives/Radio/Radio.d.ts

@@ -0,0 +1,2 @@
+import { RadioProps } from './types';
+export declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/primitives/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export type { RadioProps } from './types';

package/dist/primitives/Radio/types.d.ts

@@ -0,0 +1,14 @@
+import { BaseRadioProps, RadioColor } from '@vellira-ui/types';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface RadioProps extends BaseRadioProps, Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'value' | 'checked' | 'defaultChecked' | 'disabled' | 'required' | 'onChange' | 'size' | 'color'> {
+    /** Visible label rendered next to the control. */
+    label?: ReactNode;
+    /** Helper text rendered below the label. */
+    description?: ReactNode;
+    /** Custom indicator rendered for the checked state. */
+    icon?: ReactNode;
+    /** Selected radio color. */
+    color?: RadioColor;
+    /** Extra CSS class for the clickable label wrapper. */
+    wrapperClassName?: string;
+}

package/dist/primitives/Switch/Switch.d.ts

@@ -0,0 +1,2 @@
+import { SwitchProps } from './types';
+export declare function Switch({ accessibilityLabel, checked, defaultChecked, disabled, required, invalid, onCheckedChange, }: SwitchProps): import('react').JSX.Element;

package/dist/primitives/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Switch';
+export * from './types';

package/dist/primitives/Switch/types.d.ts

@@ -0,0 +1,2 @@
+import { BaseSwitchProps } from '@vellira-ui/types';
+export type SwitchProps = BaseSwitchProps;

package/dist/primitives/Textarea/Textarea.d.ts

@@ -0,0 +1,2 @@
+import { TextareaProps } from './types';
+export declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/primitives/Textarea/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Textarea';
+export * from './types';

package/dist/primitives/Textarea/types.d.ts

@@ -0,0 +1,6 @@
+import { BaseTextareaProps } from '@vellira-ui/types';
+import { ComponentPropsWithoutRef } from 'react';
+export interface TextareaProps extends BaseTextareaProps, Omit<ComponentPropsWithoutRef<'textarea'>, 'defaultValue' | 'disabled' | 'placeholder' | 'required' | 'size' | 'value'> {
+    /** Class name applied to the outer FormField wrapper in shorthand mode. */
+    wrapperClassName?: string;
+}

package/dist/primitives/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Button';
+export * from './Checkbox';
+export * from './Input';
+export * from './Portal';
+export * from './Radio';
+export * from './Switch';
+export * from './Textarea';

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/test-utils/a11y.d.ts

@@ -0,0 +1,2 @@
+import { ElementContext, RunOptions } from 'axe-core';
+export declare function expectNoA11yViolations(context?: ElementContext, options?: RunOptions): Promise<void>;

package/dist/test-utils/render.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare function render(ui: ReactNode, host?: HTMLElement): {
+    container: HTMLDivElement;
+    rerender(nextUi: ReactNode): void;
+    unmount(): void;
+};

package/dist/theme/ThemeContext.d.ts

@@ -0,0 +1,2 @@
+import { ThemeContextValue } from './types';
+export declare const ThemeContext: import('react').Context<ThemeContextValue | null>;

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,5 @@
+import { ThemeProviderProps } from './types';
+export declare const ThemeProvider: {
+    ({ theme, defaultTheme, onThemeChange, syncDocument, children, }: ThemeProviderProps): import('react').JSX.Element;
+    displayName: string;
+};

package/dist/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ThemeProvider';
+export * from './types';
+export * from './useTheme';

package/dist/theme/types.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export type ThemeName = 'light' | 'dark' | 'high-contrast' | 'highContrast';
+export interface ThemeContextValue {
+    /** Current resolved theme name. */
+    theme: ThemeName;
+    /** Updates the current theme. */
+    setTheme: (theme: ThemeName) => void;
+}
+export interface ThemeProviderProps {
+    /** Controlled theme name. */
+    theme?: ThemeName;
+    /** Initial theme name for uncontrolled usage. */
+    defaultTheme?: ThemeName;
+    /** Called when the active theme changes. */
+    onThemeChange?: (theme: ThemeName) => void;
+    /** Synchronizes the active theme to document attributes. */
+    syncDocument?: boolean;
+    /** Application content rendered with theme context. */
+    children: ReactNode;
+}

package/dist/theme/useTheme.d.ts

@@ -0,0 +1 @@
+export declare function useTheme(): import('./types').ThemeContextValue;

package/dist/utils/VisuallyHidden.d.ts

@@ -0,0 +1,3 @@
+export declare const VisuallyHidden: ({ children }: {
+    children: string;
+}) => import('react').JSX.Element;

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare const cn: (...classes: ClassValue[]) => string;

package/dist/utils/compose.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'react';
+export declare function composeEventHandlers<TEvent extends {
+    defaultPrevented?: boolean;
+}>(userHandler: ((event: TEvent) => void) | undefined, ownHandler: (event: TEvent) => void): (event: TEvent) => void;
+export declare function composeRefs<T>(...refs: Array<Ref<T> | undefined>): (node: T | null) => void;

package/dist/utils/devWarning.d.ts

@@ -0,0 +1 @@
+export declare const devWarning: (condition: boolean, message: string) => void;

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './cn';
+export * from './devWarning';
+export * from './VisuallyHidden';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react",
-  "version": "2.126.9",
+  "version": "2.126.11",
   "description": "Web components for Vellira Design System",
   "keywords": [
     "vellira",
@@ -37,7 +37,10 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./styles": "./dist/styles.css"
+    "./styles": {
+      "types": "./styles.d.ts",
+      "default": "./dist/styles.css"
+    }
   },
   "imports": {
     "#hooks": "./src/hooks/index.ts",
@@ -51,10 +54,8 @@
     "#utils/*": "./src/utils/*.ts"
   },
   "files": [
-    "dist/index.js",
-    "dist/index.cjs",
-    "dist/index.d.ts",
-    "dist/styles.css",
+    "dist",
+    "styles.d.ts",
     "README.md",
     "LICENSE"
   ],
@@ -66,10 +67,10 @@
     "@floating-ui/react": "^0.27.19",
     "clsx": "^2.1.1",
     "focus-trap-react": "^12.0.2",
-    "@vellira-ui/core": "2.126.9",
-    "@vellira-ui/tokens": "2.126.9",
-    "@vellira-ui/types": "2.126.9",
-    "@vellira-ui/icons": "2.126.9"
+    "@vellira-ui/core": "2.126.11",
+    "@vellira-ui/icons": "2.126.11",
+    "@vellira-ui/tokens": "2.126.11",
+    "@vellira-ui/types": "2.126.11"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -95,7 +96,7 @@
   },
   "scripts": {
     "clean": "node --input-type=module -e \"import fs from 'node:fs'; fs.rmSync('dist', { recursive: true, force: true })\"",
-    "build": "pnpm run clean && vite build",
+    "build": "pnpm run clean && vite build && node scripts/rewrite-declaration-imports.mjs",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
     "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
     "typecheck": "tsc -p tsconfig.typecheck.json --noEmit && tsc -p tsconfig.test.json --noEmit && tsc -p tsconfig.stories.json --noEmit && tsc -p tsconfig.tooling.json --noEmit",

package/styles.d.ts

@@ -0,0 +1,2 @@
+// Type-only module for the public side-effect stylesheet export.
+export {};