@accelint/design-system 1.1.5 → 1.1.6

package/dist/components/radio/radio.css.d.ts

@@ -7,34 +7,34 @@ import 'react';
 declare const radioContainer: string;
 declare const radioGroupContainer: string;
 declare const radioColorVars: {
-    border: `var(--${string})`;
-    background: `var(--${string})`;
-    color: `var(--${string})`;
+    border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const radioSpaceVars: {
-    diameter: `var(--${string})`;
-    gap: `var(--${string})`;
-    elementGap: `var(--${string})`;
+    diameter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    elementGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const radioStateVars: {
-    alignInput: `var(--${string})`;
-    isDisabled: `var(--${string})`;
-    isFocused: `var(--${string})`;
-    isFocusVisible: `var(--${string})`;
-    isHovered: `var(--${string})`;
-    isPressed: `var(--${string})`;
-    isReadOnly: `var(--${string})`;
-    isSelected: `var(--${string})`;
-    isInvalid: `var(--${string})`;
-    isRequired: `var(--${string})`;
+    alignInput: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const radioGroupStateVars: {
-    alignInput: `var(--${string})`;
-    orientation: `var(--${string})`;
-    isDisabled: `var(--${string})`;
-    isReadOnly: `var(--${string})`;
-    isInvalid: `var(--${string})`;
-    isRequired: `var(--${string})`;
+    alignInput: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    orientation: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const radioClassNames: RadioClassNames;
 

package/dist/components/search-field/search-field.css.d.ts

@@ -11,17 +11,17 @@ import '../input/types.js';
 
 declare const searchFieldContainer: string;
 declare const searchFieldSpaceVars: {
-    x: `var(--${string})`;
-    y: `var(--${string})`;
+    x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const searchFieldStateVars: {
-    size: `var(--${string})`;
-    variant: `var(--${string})`;
-    isEmpty: `var(--${string})`;
-    isDisabled: `var(--${string})`;
-    isInvalid: `var(--${string})`;
-    isReadOnly: `var(--${string})`;
-    isRequired: `var(--${string})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    variant: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEmpty: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const searchFieldClassNames: SearchFieldClassNames;
 

package/dist/components/select/select.css.d.ts

@@ -12,25 +12,25 @@ import '../options/types.js';
 declare const selectContainer: string;
 declare const selectColorVars: {
     description: {
-        color: `var(--${string})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     error: {
-        color: `var(--${string})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
 };
 declare const selectSpaceVars: {
-    width: `var(--${string})`;
-    x: `var(--${string})`;
-    y: `var(--${string})`;
+    width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const selectStateVars: {
-    size: `var(--${string})`;
-    isDisabled: `var(--${string})`;
-    isInvalid: `var(--${string})`;
-    isOpen: `var(--${string})`;
-    isRequired: `var(--${string})`;
-    isFocused: `var(--${string})`;
-    isFocusVisible: `var(--${string})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isOpen: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const selectClassNames: SelectClassNames;
 

package/dist/components/slider/slider.css.d.ts

@@ -13,53 +13,53 @@ import '../icon/types.js';
 import '../input/types.js';
 
 declare const sliderColorVars: {
-    color: `var(--${string})`;
-    background: `var(--${string})`;
-    boxShadow: `var(--${string})`;
+    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     thumb: {
-        color: `var(--${string})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     track: {
-        color: `var(--${string})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     bar: {
-        color: `var(--${string})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
 };
 declare const sliderSpaceVars: {
-    gap: `var(--${string})`;
-    margin: `var(--${string})`;
+    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    margin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     track: {
-        minDimension: `var(--${string})`;
-        thickness: `var(--${string})`;
+        minDimension: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        thickness: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     thumb: {
-        height: `var(--${string})`;
-        width: `var(--${string})`;
-        borderRadius: `var(--${string})`;
+        height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     bar: {
-        height: `var(--${string})`;
-        width: `var(--${string})`;
+        height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
 };
 declare const sliderStateVars: {
-    layout: `var(--${string})`;
-    orientation: `var(--${string})`;
-    isDisabled: `var(--${string})`;
+    layout: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    orientation: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const sliderThumbStateVars: {
-    layout: `var(--${string})`;
-    isDisabled: `var(--${string})`;
-    isDragging: `var(--${string})`;
-    isFocused: `var(--${string})`;
-    isFocusVisible: `var(--${string})`;
-    isHovered: `var(--${string})`;
+    layout: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDragging: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const sliderTrackStateVars: {
-    layout: `var(--${string})`;
-    isDisabled: `var(--${string})`;
-    isHovered: `var(--${string})`;
+    layout: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const sliderClassNames: SliderClassNames;
 

package/dist/components/switch/switch.css.d.ts

@@ -5,26 +5,26 @@ import 'react';
 
 declare const switchContainer: string;
 declare const switchColorVars: {
-    border: `var(--${string})`;
-    background: `var(--${string})`;
-    color: `var(--${string})`;
-    indicator: `var(--${string})`;
+    border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    indicator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const switchSpaceVars: {
-    diameter: `var(--${string})`;
-    gutter: `var(--${string})`;
-    gap: `var(--${string})`;
-    travel: `var(--${string})`;
+    diameter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    travel: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const switchStateVars: {
-    alignInput: `var(--${string})`;
-    isDisabled: `var(--${string})`;
-    isFocused: `var(--${string})`;
-    isFocusVisible: `var(--${string})`;
-    isHovered: `var(--${string})`;
-    isPressed: `var(--${string})`;
-    isReadOnly: `var(--${string})`;
-    isSelected: `var(--${string})`;
+    alignInput: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const switchClassNames: SwitchClassNames;
 

package/dist/components/tabs/tabs.css.d.ts

@@ -12,45 +12,45 @@ declare const tabsContainers: {
     panel: string;
 };
 declare const tabColorVars: {
-    background: `var(--${string})`;
-    border: `var(--${string})`;
-    color: `var(--${string})`;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const tabSpaceVars: {
     list: {
-        gap: `var(--${string})`;
-        x: `var(--${string})`;
-        y: `var(--${string})`;
+        gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     tab: {
-        x: `var(--${string})`;
-        y: `var(--${string})`;
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
 };
 declare const tabListStateVars: {
-    align: `var(--${string})`;
-    anchor: `var(--${string})`;
-    count: `var(--${string})`;
-    orientation: `var(--${string})`;
-    size: `var(--${string})`;
-    variant: `var(--${string})`;
+    align: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    anchor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    count: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    orientation: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    variant: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const tabStateVars: {
-    isHovered: `var(--${string})`;
-    isPressed: `var(--${string})`;
-    isSelected: `var(--${string})`;
-    isFocused: `var(--${string})`;
-    isFocusVisible: `var(--${string})`;
-    isDisabled: `var(--${string})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const tabPanelsStateVars: {
-    shouldForceMount: `var(--${string})`;
+    shouldForceMount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const tabPanelStateVars: {
-    shouldForceMount: `var(--${string})`;
-    isFocused: `var(--${string})`;
-    isFocusVisible: `var(--${string})`;
-    isInert: `var(--${string})`;
+    shouldForceMount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isInert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const tabsClassNames: TabsClassNames;
 

package/dist/components/text-field/index.d.ts

@@ -1,136 +1,11 @@
-import { TextFieldClassNames, TextFieldMapping, TextFieldSizes, TextFieldProps } from './types.js';
-import * as _react_types_shared from '@react-types/shared';
 import * as react from 'react';
-import { TextFieldRenderProps, ContextValue } from 'react-aria-components';
+import { ContextValue } from 'react-aria-components';
+import { TextFieldProps } from './types.js';
 import 'type-fest';
 import '../../types/generic.js';
 import '../input/types.js';
 
 declare const TextFieldContext: react.Context<ContextValue<TextFieldProps, HTMLDivElement>>;
-declare const TextField: (props: {
-    children?: react.ReactNode | ((values: TextFieldRenderProps & {
-        defaultChildren: react.ReactNode | undefined;
-    }) => react.ReactNode);
-    slot?: string | null | undefined;
-    defaultValue?: string | undefined;
-    autoFocus?: boolean | undefined;
-    dir?: string | undefined | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-    hidden?: boolean | undefined | undefined;
-    id?: string | undefined;
-    lang?: string | undefined | undefined;
-    spellCheck?: string | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    autoCorrect?: string | undefined;
-    inert?: boolean | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-    'aria-activedescendant'?: string | undefined;
-    'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
-    'aria-controls'?: string | undefined;
-    'aria-describedby'?: string | undefined;
-    'aria-details'?: string | undefined;
-    'aria-errormessage'?: string | undefined;
-    'aria-haspopup'?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-    'aria-label'?: string | undefined;
-    'aria-labelledby'?: string | undefined;
-    onCopy?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
-    onCut?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
-    onPaste?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
-    onCompositionEnd?: react.CompositionEventHandler<HTMLInputElement> | undefined;
-    onCompositionStart?: react.CompositionEventHandler<HTMLInputElement> | undefined;
-    onCompositionUpdate?: react.CompositionEventHandler<HTMLInputElement> | undefined;
-    onFocus?: ((e: react.FocusEvent<HTMLInputElement, Element>) => void) | undefined;
-    onBlur?: ((e: react.FocusEvent<HTMLInputElement, Element>) => void) | undefined;
-    onChange?: ((value: string) => void) | undefined;
-    onBeforeInput?: react.FormEventHandler<HTMLInputElement> | undefined;
-    onInput?: react.FormEventHandler<HTMLInputElement> | undefined;
-    onKeyDown?: ((e: _react_types_shared.KeyboardEvent) => void) | undefined;
-    onKeyUp?: ((e: _react_types_shared.KeyboardEvent) => void) | undefined;
-    onAuxClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onAuxClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenu?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenuCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseDown?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseDownCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseEnter?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseLeave?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMove?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMoveCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOut?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOutCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOver?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOverCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUp?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUpCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-    onSelect?: react.ReactEventHandler<HTMLInputElement> | undefined;
-    onTouchCancel?: react.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchCancelCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEnd?: react.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEndCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMove?: react.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMoveCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStart?: react.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStartCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
-    onPointerDown?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerDownCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMove?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMoveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUp?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUpCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancel?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancelCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnter?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeave?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOver?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOverCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOut?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOutCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-    onScroll?: react.UIEventHandler<HTMLDivElement> | undefined;
-    onScrollCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
-    onWheel?: react.WheelEventHandler<HTMLDivElement> | undefined;
-    onWheelCapture?: react.WheelEventHandler<HTMLDivElement> | undefined;
-    onAnimationStart?: react.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationStartCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEnd?: react.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEndCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIteration?: react.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIterationCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
-    onTransitionCancel?: react.TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionCancelCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionEnd?: react.TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionEndCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionRun?: react.TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionRunCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionStart?: react.TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionStartCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
-    form?: string | undefined;
-    value?: string | undefined;
-    type?: "text" | "search" | "url" | "tel" | "email" | "password" | (string & {}) | undefined;
-    pattern?: string | undefined;
-    isDisabled?: boolean | undefined;
-    onFocusChange?: ((isFocused: boolean) => void) | undefined;
-    name?: string | undefined;
-    excludeFromTabOrder?: boolean | undefined;
-    isReadOnly?: boolean | undefined;
-    isInvalid?: boolean | undefined;
-    isRequired?: boolean | undefined;
-    validationBehavior?: "native" | "aria" | undefined;
-    validate?: ((value: string) => _react_types_shared.ValidationError | true | null | undefined) | undefined;
-    autoComplete?: string | undefined;
-    maxLength?: number | undefined;
-    minLength?: number | undefined;
-} & {
-    classNames?: TextFieldClassNames;
-    mapping?: Partial<TextFieldMapping>;
-    size?: TextFieldSizes;
-} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const TextField: (props: TextFieldProps, ref: React.Ref<HTMLDivElement>) => React.ReactElement;
 
 export { TextField, TextFieldContext };

package/dist/components/text-field/index.js

@@ -1,5 +1,5 @@
 import '../../chunk-PZ5AY32C.js';
-import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { createContext, useMemo, useCallback } from 'react';
 import { LabelContext, Provider, TextField as TextField$1 } from 'react-aria-components';
 import { useContextProps } from '../../hooks/use-context-props/index.js';
 import { useDefaultProps } from '../../hooks/use-defaults/index.js';
@@ -24,7 +24,7 @@ var defaultMapping = {
 };
 var defaultSize = "lg";
 var TextFieldContext = createContext(null);
-var TextField = forwardRef(function TextField2(props, ref) {
+var TextField = (props, ref) => {
   const [contextProps, contextRef] = useContextProps(
     props,
     ref,
@@ -93,7 +93,7 @@ var TextField = forwardRef(function TextField2(props, ref) {
       children
     }
   );
-});
+};
 
 export { TextField, TextFieldContext };
 //# sourceMappingURL=index.js.map

package/dist/components/text-field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/text-field/index.tsx"],"names":["TextField","RACTextField"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  createContext,\n  type ForwardedRef,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  type FieldErrorProps,\n  LabelContext,\n  type LabelProps,\n  Provider,\n  TextField as RACTextField,\n  type TextFieldRenderProps,\n  type TextProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useTheme } from '../../hooks/use-theme';\nimport { bodies } from '../../styles/typography.css';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport {\n  AriaFieldErrorContext,\n  type AriaLabelContext,\n  AriaTextContext,\n} from '../aria';\nimport { InputContext } from '../input';\nimport { textFieldClassNames, textFieldStateVars } from './text-field.css';\nimport type { InputProps } from '../input/types';\nimport type { TextFieldMapping, TextFieldProps } from './types';\n\nconst defaultMapping: TextFieldMapping = {\n  description: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  error: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n};\n\nconst defaultSize = 'lg';\n\nexport const TextFieldContext =\n  createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);\n\nexport const TextField = forwardRef(function TextField(\n  props: TextFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const [contextProps, contextRef] = useContextProps(\n    props,\n    ref,\n    TextFieldContext,\n  );\n\n  const finalProps = useDefaultProps(contextProps, 'TextField');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    size = defaultSize,\n    ...rest\n  } = finalProps;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(textFieldClassNames, theme.TextField, classNamesProp, {\n        description: mapping.description[size],\n        error: mapping.error[size],\n      }),\n    [theme.TextField, classNamesProp, mapping, size],\n  );\n\n  const style = useCallback(\n    (renderProps: TextFieldRenderProps) =>\n      inlineVars(textFieldStateVars, {\n        ...renderProps,\n        size,\n      }),\n    [size],\n  );\n  const values = useMemo<\n    [\n      [typeof InputContext, ContextValue<InputProps, HTMLInputElement>],\n      [typeof AriaLabelContext, ContextValue<LabelProps, HTMLLabelElement>],\n      [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n      [\n        typeof AriaFieldErrorContext,\n        ContextValue<FieldErrorProps, HTMLElement>,\n      ],\n    ]\n  >(\n    () => [\n      [InputContext, { classNames: classNames?.input, size }],\n      [LabelContext, { className: classNames?.label }],\n      [\n        AriaTextContext,\n        {\n          slots: {\n            description: { className: classNames?.description },\n          },\n        },\n      ],\n      [AriaFieldErrorContext, { className: classNames?.error }],\n    ],\n    [classNames, size],\n  );\n\n  const children = useCallback(\n    (renderProps: TextFieldRenderProps) => (\n      <Provider values={values}>\n        <div className={classNames?.textField}>\n          {callRenderProps(childrenProp, {\n            ...renderProps,\n            defaultChildren: null,\n          })}\n        </div>\n      </Provider>\n    ),\n    [childrenProp, classNames?.textField, values],\n  );\n  return (\n    <RACTextField\n      {...rest}\n      ref={contextRef}\n      className={classNames?.container}\n      style={style}\n    >\n      {children}\n    </RACTextField>\n  );\n});\n"]}
+{"version":3,"sources":["../../../src/components/text-field/index.tsx"],"names":["RACTextField"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { createContext, useCallback, useMemo } from 'react';\nimport {\n  type ContextValue,\n  type FieldErrorProps,\n  LabelContext,\n  type LabelProps,\n  Provider,\n  TextField as RACTextField,\n  type TextFieldRenderProps,\n  type TextProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useTheme } from '../../hooks/use-theme';\nimport { bodies } from '../../styles/typography.css';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport {\n  AriaFieldErrorContext,\n  type AriaLabelContext,\n  AriaTextContext,\n} from '../aria';\nimport { InputContext } from '../input';\nimport { textFieldClassNames, textFieldStateVars } from './text-field.css';\nimport type { InputProps } from '../input/types';\nimport type { TextFieldMapping, TextFieldProps } from './types';\n\nconst defaultMapping: TextFieldMapping = {\n  description: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  error: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n};\n\nconst defaultSize = 'lg';\n\nexport const TextFieldContext =\n  createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);\n\nexport const TextField = (\n  props: TextFieldProps,\n  ref: React.Ref<HTMLDivElement>,\n): React.ReactElement => {\n  const [contextProps, contextRef] = useContextProps(\n    props,\n    ref,\n    TextFieldContext,\n  );\n\n  const finalProps = useDefaultProps(contextProps, 'TextField');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    size = defaultSize,\n    ...rest\n  } = finalProps;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(textFieldClassNames, theme.TextField, classNamesProp, {\n        description: mapping.description[size],\n        error: mapping.error[size],\n      }),\n    [theme.TextField, classNamesProp, mapping, size],\n  );\n\n  const style = useCallback(\n    (renderProps: TextFieldRenderProps) =>\n      inlineVars(textFieldStateVars, {\n        ...renderProps,\n        size,\n      }),\n    [size],\n  );\n  const values = useMemo<\n    [\n      [typeof InputContext, ContextValue<InputProps, HTMLInputElement>],\n      [typeof AriaLabelContext, ContextValue<LabelProps, HTMLLabelElement>],\n      [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n      [\n        typeof AriaFieldErrorContext,\n        ContextValue<FieldErrorProps, HTMLElement>,\n      ],\n    ]\n  >(\n    () => [\n      [InputContext, { classNames: classNames?.input, size }],\n      [LabelContext, { className: classNames?.label }],\n      [\n        AriaTextContext,\n        {\n          slots: {\n            description: { className: classNames?.description },\n          },\n        },\n      ],\n      [AriaFieldErrorContext, { className: classNames?.error }],\n    ],\n    [classNames, size],\n  );\n\n  const children = useCallback(\n    (renderProps: TextFieldRenderProps) => (\n      <Provider values={values}>\n        <div className={classNames?.textField}>\n          {callRenderProps(childrenProp, {\n            ...renderProps,\n            defaultChildren: null,\n          })}\n        </div>\n      </Provider>\n    ),\n    [childrenProp, classNames?.textField, values],\n  );\n  return (\n    <RACTextField\n      {...rest}\n      ref={contextRef}\n      className={classNames?.container}\n      style={style}\n    >\n      {children}\n    </RACTextField>\n  );\n};\n"]}

package/dist/components/text-field/text-field.css.d.ts

@@ -7,21 +7,21 @@ import '../input/types.js';
 declare const textFieldContainer: string;
 declare const textFieldColorVars: {
     description: {
-        color: `var(--${string})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     error: {
-        color: `var(--${string})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
 };
 declare const textFieldSpaceVars: {
-    gap: `var(--${string})`;
+    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const textFieldStateVars: {
-    size: `var(--${string})`;
-    isDisabled: `var(--${string})`;
-    isInvalid: `var(--${string})`;
-    isReadOnly: `var(--${string})`;
-    isRequired: `var(--${string})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const textFieldClassNames: TextFieldClassNames;
 

package/dist/components/textarea/textarea.css.d.ts

@@ -5,32 +5,32 @@ import '../../types/generic.js';
 
 declare const textAreaContainer: string;
 declare const textAreaColorVars: {
-    background: `var(--${string})`;
-    border: `var(--${string})`;
-    color: `var(--${string})`;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const textAreaSpaceVars: {
-    minWidth: `var(--${string})`;
-    width: `var(--${string})`;
-    maxWidth: `var(--${string})`;
-    minHeight: `var(--${string})`;
-    height: `var(--${string})`;
-    maxHeight: `var(--${string})`;
-    x: `var(--${string})`;
-    y: `var(--${string})`;
+    minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    maxWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    minHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    maxHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const textAreaStateVars: {
-    resize: `var(--${string})`;
-    size: `var(--${string})`;
-    isDisabled: `var(--${string})`;
-    isEmpty: `var(--${string})`;
-    isFocused: `var(--${string})`;
-    isFocusVisible: `var(--${string})`;
-    isHovered: `var(--${string})`;
-    isInvalid: `var(--${string})`;
-    isPlaceholder: `var(--${string})`;
-    isReadOnly: `var(--${string})`;
-    isRequired: `var(--${string})`;
+    resize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEmpty: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPlaceholder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 declare const textAreaClassNames: TextAreaClassNames;