entangle-ui 0.3.0 → 0.4.0

package/dist/types/components/layout/Spacer/Spacer.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Theme } from '../../../theme/types.js';
 
 /**
  * A flexible spacer component that expands to fill available space.
@@ -42,7 +41,12 @@ import { Theme } from '../../../theme/types.js';
  */
 declare const Spacer: React.NamedExoticComponent<{
     size?: string | number | undefined | undefined;
-    css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    id?: string | undefined | undefined;
+    className?: string | undefined | undefined;
+    testId?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: React.Ref<HTMLDivElement> | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -50,19 +54,16 @@ declare const Spacer: React.NamedExoticComponent<{
     accessKey?: string | undefined | undefined;
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
     autoFocus?: boolean | undefined | undefined;
-    className?: string | undefined | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     hidden?: boolean | undefined | undefined;
-    id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     slot?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: React.CSSProperties | undefined;
     tabIndex?: number | undefined | undefined;
     title?: string | undefined | undefined;
     translate?: "yes" | "no" | undefined | undefined;
@@ -90,7 +91,6 @@ declare const Spacer: React.NamedExoticComponent<{
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
     popoverTarget?: string | undefined | undefined;
     inert?: boolean | undefined | undefined;
@@ -170,18 +170,18 @@ declare const Spacer: React.NamedExoticComponent<{
     onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
     onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
@@ -322,8 +322,6 @@ declare const Spacer: React.NamedExoticComponent<{
     onTransitionRunCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStart?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStartCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-    testId?: string | undefined;
-    ref?: React.Ref<HTMLDivElement> | undefined;
 }>;
 
 export { Spacer };

package/dist/types/components/navigation/Menu/Menu.types.d.ts

@@ -68,7 +68,7 @@ type MenuSelection = Record<string, string[]>;
 /**
  * Base props for the Menu component.
  */
-interface MenuBaseProps extends Omit<BaseComponent<HTMLElement>, 'onChange'> {
+interface MenuBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'onChange'> {
     /** Menu configuration object */
     config: MenuConfig;
     /** Currently selected items organized by group */

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Theme } from '../../../theme/types.js';
 import { Prettify } from '../../../types/utilities.js';
-import { Size, Variant, BaseComponent } from '../../../types/common.js';
+import { Size, Variant } from '../../../types/common.js';
 
 /**
  * Button sizes optimized for editor interfaces
@@ -14,7 +13,7 @@ type ButtonVariant = Variant;
 /**
  * Base props for the Button component
  */
-interface ButtonBaseProps extends BaseComponent<HTMLButtonElement> {
+interface ButtonBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'css'> {
     /**
      * Button content — text, icons, or other React elements
      * @example "Save", <><SaveIcon /> Save</>
@@ -60,11 +59,16 @@ interface ButtonBaseProps extends BaseComponent<HTMLButtonElement> {
      * @default false
      */
     fullWidth?: boolean;
+    /**
+     * Test identifier for automated testing
+     */
+    testId?: string;
     /**
      * Click event handler
      * Called when button is clicked (not when disabled/loading)
      */
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    ref?: React.Ref<HTMLButtonElement>;
 }
 /**
  * Props for the Button component with prettified type for better IntelliSense
@@ -104,13 +108,13 @@ declare const Button: React.NamedExoticComponent<{
     loading?: boolean | undefined;
     icon?: React.ReactNode;
     fullWidth?: boolean | undefined;
+    testId?: string | undefined;
     onClick?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+    ref?: React.Ref<HTMLButtonElement> | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
     id?: string | undefined | undefined;
     className?: string | undefined | undefined;
-    testId?: string | undefined;
     style?: React.CSSProperties | undefined;
-    css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
-    ref?: React.Ref<HTMLButtonElement> | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -155,7 +159,6 @@ declare const Button: React.NamedExoticComponent<{
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
     popoverTarget?: string | undefined | undefined;
     inert?: boolean | undefined | undefined;
@@ -235,18 +238,18 @@ declare const Button: React.NamedExoticComponent<{
     onFocusCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
     onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
     onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
     onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
     onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
     onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
     onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -386,6 +389,15 @@ declare const Button: React.NamedExoticComponent<{
     onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+    form?: string | undefined | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
+    formEncType?: string | undefined | undefined;
+    formMethod?: string | undefined | undefined;
+    formNoValidate?: boolean | undefined | undefined;
+    formTarget?: string | undefined | undefined;
+    name?: string | undefined | undefined;
+    type?: "submit" | "reset" | "button" | undefined | undefined;
+    value?: string | number | readonly string[] | undefined;
 }>;
 
 export { Button };

package/dist/types/components/primitives/Icon/Icon.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { LiteralUnion, Prettify } from '../../../types/utilities.js';
 import { Size } from '../../../types/common.js';
-import { Theme } from '../../../theme/types.js';
 
 type IconSize = Size;
 type IconColor = LiteralUnion<'primary' | 'secondary' | 'muted' | 'accent' | 'success' | 'warning' | 'error'>;
@@ -12,11 +11,6 @@ interface IconBaseProps {
     className?: string;
     title?: string;
     decorative?: boolean;
-    /**
-     * Custom CSS styles included in styled-components
-     * Can be an object of CSS properties or a function that receives theme and returns CSS properties
-     */
-    css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
     /**
      * Test identifier for automated testing
      */
@@ -31,7 +25,6 @@ declare const Icon: React.NamedExoticComponent<{
     className?: string | undefined;
     title?: string | undefined;
     decorative?: boolean | undefined;
-    css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
     testId?: string | undefined;
     ref?: React.Ref<SVGSVGElement> | undefined;
 }>;

package/dist/types/components/primitives/IconButton/IconButton.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Theme } from '../../../theme/types.js';
 import { Size, Variant } from '../../../types/common.js';
 
 /**
@@ -68,7 +67,12 @@ declare const IconButton: React.NamedExoticComponent<{
     pressed?: boolean | undefined;
     'aria-label': string;
     onClick?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
-    css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<HTMLButtonElement> | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    id?: string | undefined | undefined;
+    className?: string | undefined | undefined;
+    style?: React.CSSProperties | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -76,19 +80,16 @@ declare const IconButton: React.NamedExoticComponent<{
     accessKey?: string | undefined | undefined;
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
     autoFocus?: boolean | undefined | undefined;
-    className?: string | undefined | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     hidden?: boolean | undefined | undefined;
-    id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     slot?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: React.CSSProperties | undefined;
     tabIndex?: number | undefined | undefined;
     title?: string | undefined | undefined;
     translate?: "yes" | "no" | undefined | undefined;
@@ -116,7 +117,6 @@ declare const IconButton: React.NamedExoticComponent<{
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
     popoverTarget?: string | undefined | undefined;
     inert?: boolean | undefined | undefined;
@@ -195,18 +195,18 @@ declare const IconButton: React.NamedExoticComponent<{
     onFocusCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
     onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
     onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
     onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLButtonElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
     onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
     onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
     onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -346,8 +346,15 @@ declare const IconButton: React.NamedExoticComponent<{
     onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
-    testId?: string | undefined;
-    ref?: React.Ref<HTMLButtonElement> | undefined;
+    form?: string | undefined | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
+    formEncType?: string | undefined | undefined;
+    formMethod?: string | undefined | undefined;
+    formNoValidate?: boolean | undefined | undefined;
+    formTarget?: string | undefined | undefined;
+    name?: string | undefined | undefined;
+    type?: "submit" | "reset" | "button" | undefined | undefined;
+    value?: string | number | readonly string[] | undefined;
 }>;
 
 export { IconButton };

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

@@ -1,4 +1,4 @@
-import { BaseComponent, Size } from '../../../types/common.js';
+import { Size } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
 import React from 'react';
 
@@ -6,7 +6,7 @@ import React from 'react';
  * Standard input sizes using library sizing.
  */
 type InputSize = Size;
-interface InputBaseProps extends Omit<BaseComponent<HTMLInputElement>, 'onChange'> {
+interface InputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'css'> {
     /**
      * Input value (controlled)
      */
@@ -87,6 +87,11 @@ interface InputBaseProps extends Omit<BaseComponent<HTMLInputElement>, 'onChange
      * Key down event handler
      */
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Test identifier for automated testing
+     */
+    testId?: string;
+    ref?: React.Ref<HTMLInputElement>;
 }
 /**
  * Props for the Input component with prettified type for better IntelliSense

package/dist/types/components/primitives/Paper/Paper.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
 import { Prettify } from '../../../types/utilities.js';
-import { BaseComponent } from '../../../types/common.js';
-import { Theme } from '../../../theme/types.js';
 
 /**
  * Paper elevation levels (shadow intensity)
@@ -16,7 +14,7 @@ type PaperNestLevel = 0 | 1 | 2 | 3;
  * Paper spacing variants based on theme spacing tokens
  */
 type PaperSpacing = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
-interface PaperBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'children'> {
+interface PaperBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'css'> {
     /**
      * Paper content - any React elements
      */
@@ -70,6 +68,11 @@ interface PaperBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'children'>
      * @example "8px", "50%", "0"
      */
     customRadius?: string | number;
+    /**
+     * Test identifier for automated testing
+     */
+    testId?: string;
+    ref?: React.Ref<HTMLDivElement>;
 }
 /**
  * Props for the Paper component with prettified type for better IntelliSense
@@ -131,7 +134,12 @@ declare const Paper: React.NamedExoticComponent<{
     nestLevel?: PaperNestLevel | undefined;
     expand?: boolean | undefined;
     customRadius?: string | number | undefined;
-    css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<HTMLDivElement> | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    id?: string | undefined | undefined;
+    className?: string | undefined | undefined;
+    style?: React.CSSProperties | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -139,19 +147,16 @@ declare const Paper: React.NamedExoticComponent<{
     accessKey?: string | undefined | undefined;
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
     autoFocus?: boolean | undefined | undefined;
-    className?: string | undefined | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     hidden?: boolean | undefined | undefined;
-    id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     slot?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: React.CSSProperties | undefined;
     tabIndex?: number | undefined | undefined;
     title?: string | undefined | undefined;
     translate?: "yes" | "no" | undefined | undefined;
@@ -179,7 +184,6 @@ declare const Paper: React.NamedExoticComponent<{
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
     popoverTarget?: string | undefined | undefined;
     inert?: boolean | undefined | undefined;
@@ -259,18 +263,18 @@ declare const Paper: React.NamedExoticComponent<{
     onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
     onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
@@ -411,8 +415,6 @@ declare const Paper: React.NamedExoticComponent<{
     onTransitionRunCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStart?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStartCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-    testId?: string | undefined;
-    ref?: React.Ref<HTMLDivElement> | undefined;
 }>;
 
 export { Paper };

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Prettify } from '../../../types/utilities.js';
-import { BaseComponent, Size } from '../../../types/common.js';
+import { Size } from '../../../types/common.js';
 
 type SwitchSize = Size;
-interface SwitchBaseProps extends Omit<BaseComponent<HTMLButtonElement>, 'onChange'> {
+interface SwitchBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'css'> {
     /**
      * Whether the switch is on (controlled)
      */
@@ -57,6 +57,11 @@ interface SwitchBaseProps extends Omit<BaseComponent<HTMLButtonElement>, 'onChan
      * @param checked - The new on/off state
      */
     onChange?: (checked: boolean) => void;
+    /**
+     * Test identifier for automated testing
+     */
+    testId?: string;
+    ref?: React.Ref<HTMLButtonElement>;
 }
 type SwitchProps = Prettify<SwitchBaseProps>;
 /**

package/dist/types/components/primitives/Text/Text.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Theme } from '../../../theme/types.js';
 import { Prettify } from '../../../types/utilities.js';
-import { BaseComponent } from '../../../types/common.js';
 
 /**
  * HTML element types that Text component can render as
@@ -34,7 +32,7 @@ type TextLineHeight = 'tight' | 'normal' | 'relaxed';
 /**
  * Base props for Text component
  */
-interface TextBaseProps extends BaseComponent<HTMLElement> {
+interface TextBaseProps extends Omit<React.HTMLAttributes<HTMLElement>, 'css' | 'color'> {
     /**
      * Text content
      */
@@ -105,6 +103,11 @@ interface TextBaseProps extends BaseComponent<HTMLElement> {
      * Additional CSS class name
      */
     className?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    testId?: string;
+    ref?: React.Ref<HTMLElement>;
 }
 /**
  * Props for the Text component with prettified type for better IntelliSense
@@ -156,11 +159,11 @@ declare const Text: React.NamedExoticComponent<{
     nowrap?: boolean | undefined;
     mono?: boolean | undefined;
     className?: string | undefined;
-    id?: string | undefined | undefined;
     testId?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
     ref?: React.Ref<HTMLElement> | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    id?: string | undefined | undefined;
+    style?: React.CSSProperties | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -204,7 +207,6 @@ declare const Text: React.NamedExoticComponent<{
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
     popoverTarget?: string | undefined | undefined;
     inert?: boolean | undefined | undefined;
@@ -284,18 +286,18 @@ declare const Text: React.NamedExoticComponent<{
     onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
     onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
     onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLElement, Element> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLElement, Element> | undefined;
     onBeforeInput?: React.InputEventHandler<HTMLElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLElement> | undefined;
     onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
     onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
     onError?: React.ReactEventHandler<HTMLElement> | undefined;

package/dist/types/components/primitives/Tooltip/Tooltip.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
-import { BaseComponent } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
 import { TooltipPlacement, TooltipCollisionStrategy, TooltipCollisionConfig, TooltipPositioner, TooltipAnimation, BaseTooltipRootProps, BaseTooltipPositionerProps } from './types.js';
 
-interface TooltipBaseProps extends Omit<BaseComponent, 'title'> {
+interface TooltipBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'css' | 'title'> {
     /**
      * The trigger element that will show the tooltip on hover.
      * Must be a single React element or component.
@@ -76,6 +75,11 @@ interface TooltipBaseProps extends Omit<BaseComponent, 'title'> {
      * For power users who need full control
      */
     positionerProps?: Partial<BaseTooltipPositionerProps>;
+    /**
+     * Test identifier for automated testing
+     */
+    testId?: string;
+    ref?: React.Ref<HTMLDivElement>;
 }
 /**
  * Props for the Tooltip component with prettified type for better IntelliSense
@@ -84,7 +88,7 @@ type TooltipProps = Prettify<TooltipBaseProps>;
 /**
  * A tooltip component that displays contextual information on hover.
  *
- * Built on @base-ui-components/react for robust accessibility and positioning.
+ * Built on @base-ui/react for robust accessibility and positioning.
  * Provides an intuitive API similar to MUI with advanced positioning and collision handling.
  * Supports both simple text and complex React nodes for advanced tooltip content.
  *

package/dist/types/components/primitives/Tooltip/types.d.ts

@@ -1,4 +1,4 @@
-import { Tooltip } from '@base-ui-components/react/tooltip';
+import { Tooltip } from '@base-ui/react/tooltip';
 
 type BaseTooltipRootProps = Tooltip.Root.Props;
 type BaseTooltipPositionerProps = Parameters<typeof Tooltip.Positioner>[0];

package/dist/types/components/primitives/canvas/canvas.types.d.ts

@@ -0,0 +1,27 @@
+/** A 2D point in domain (logical) coordinates */
+interface Point2D {
+    x: number;
+    y: number;
+}
+/** A viewport mapping domain coordinates to canvas pixels */
+interface CanvasViewport {
+    /** Visible domain X range [min, max] */
+    viewX: [number, number];
+    /** Visible domain Y range [min, max] */
+    viewY: [number, number];
+}
+/** Information passed to custom background renderers */
+interface CanvasBackgroundInfo {
+    /** Canvas width in CSS pixels */
+    width: number;
+    /** Canvas height in CSS pixels */
+    height: number;
+    /** Current viewport mapping (use with domainToCanvas) */
+    viewport: CanvasViewport;
+    /** Domain X range */
+    domainX: [number, number];
+    /** Domain Y range */
+    domainY: [number, number];
+}
+
+export type { CanvasBackgroundInfo, CanvasViewport, Point2D };