@easemate/web-kit 0.3.0 → 0.3.2

package/build/{init-B7gNNyTd.d.ts → init-CaP7khA2.d.ts}

@@ -1,4 +1,4 @@
-import { d as ThemeInput } from './registry-9GX9KTG1.js';
+import { c as ThemeInput } from './registry-YCv1Ctoe.js';
 
 /**
  * Font loading utilities.

package/build/{init-DwVGVxkx.d.cts → init-DmqoRv6_.d.cts}

@@ -1,4 +1,4 @@
-import { d as ThemeInput } from './registry-9GX9KTG1.cjs';
+import { c as ThemeInput } from './registry-YCv1Ctoe.cjs';
 
 /**
  * Font loading utilities.

package/build/jsx.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react/jsx.ts"],"sourcesContent":["/**\n * JSX type declarations for @easemate/web-kit\n *\n * Import this module to get JSX IntrinsicElements type support:\n * ```ts\n * import '@easemate/web-kit/react/jsx';\n * ```\n */\n\n// Import React types to enable proper module augmentation\n// This ensures 'react' and 'react/jsx-runtime' are resolvable for augmentation\nimport type {} from 'react';\nimport type {} from 'react/jsx-dev-runtime';\nimport type {} from 'react/jsx-runtime';\nimport type { StateChangeEventDetail } from '../elements/state/index';\n\n// Re-export for convenience\nexport type { StateChangeEventDetail };\n\n// Event detail types\nexport interface TabChangeEventDetail {\n  index: number;\n  id: string;\n  event: Event;\n}\n\nexport interface ControlEventDetail<T = unknown> {\n  name?: string;\n  value: T;\n  event: Event;\n}\n\n// Ref types\ntype RefCallback<T> = (instance: T | null) => void;\ntype RefObject<T> = { current: T | null };\ntype Ref<T> = RefCallback<T> | RefObject<T> | null;\n\n// Event handler type\ntype CustomEventHandler<T = unknown> = (event: CustomEvent<T>) => void;\n\n// Base HTML attributes shared by all elements\ninterface BaseHTMLAttributes {\n  id?: string;\n  class?: string;\n  className?: string;\n  style?: string | Partial<CSSStyleDeclaration>;\n  slot?: string;\n  hidden?: boolean;\n  tabIndex?: number;\n  title?: string;\n  name?: string;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  'aria-hidden'?: boolean | 'true' | 'false';\n  'aria-disabled'?: boolean | 'true' | 'false';\n  'data-testid'?: string;\n  onClick?: (event: MouseEvent) => void;\n  onFocus?: (event: FocusEvent) => void;\n  onBlur?: (event: FocusEvent) => void;\n  onKeyDown?: (event: KeyboardEvent) => void;\n  onKeyUp?: (event: KeyboardEvent) => void;\n  children?: unknown;\n}\n\n// Element ref interfaces\nexport interface StateElement extends HTMLElement {\n  getState(): Record<string, unknown>;\n  get(name: string): unknown;\n  set(name: string, value: unknown): void;\n  reset(): void;\n}\n\nexport interface PanelElement extends HTMLElement {\n  collapsed?: boolean;\n  setActiveTab(indexOrId: number | string): void;\n  getActiveTab(): { index: number; id: string } | null;\n}\n\nexport interface SliderElement extends HTMLElement {\n  value?: number | null;\n  min?: number | null;\n  max?: number | null;\n  step?: number | null;\n  disabled?: boolean;\n}\n\nexport interface ToggleElement extends HTMLElement {\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport interface CheckboxElement extends HTMLElement {\n  checked?: boolean;\n  disabled?: boolean;\n  indeterminate?: boolean;\n}\n\nexport interface InputElement extends HTMLElement {\n  value?: string | null;\n  placeholder?: string;\n  disabled?: boolean;\n  type?: string;\n  focus(): void;\n  blur(): void;\n}\n\nexport interface NumberInputElement extends HTMLElement {\n  value?: number | null;\n  min?: number | null;\n  max?: number | null;\n  step?: number | null;\n  disabled?: boolean;\n}\n\nexport interface ColorInputElement extends HTMLElement {\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface DropdownElement extends HTMLElement {\n  value?: string;\n  disabled?: boolean;\n  open?: boolean;\n}\n\nexport interface ButtonElement extends HTMLElement {\n  disabled?: boolean;\n  type?: string;\n  variant?: string;\n}\n\nexport interface FieldElement extends HTMLElement {\n  label?: string;\n}\n\nexport interface TooltipElement extends HTMLElement {\n  content?: string;\n  placement?: string;\n}\n\nexport interface PopoverElement extends HTMLElement {\n  open?: boolean;\n  placement?: string;\n}\n\nexport interface OriginElement extends HTMLElement {\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface RadioGroupElement extends HTMLElement {\n  value?: string;\n}\n\nexport interface CurveElement extends HTMLElement {\n  name?: string;\n  easingType?: 'cubic-bezier' | 'linear';\n  showGrid?: boolean;\n  snapToGrid?: boolean;\n}\n\n// Props interfaces\nexport interface StateProps extends BaseHTMLAttributes {\n  ref?: Ref<StateElement>;\n  onStateChange?: CustomEventHandler<StateChangeEventDetail>;\n}\n\nexport interface PanelProps extends BaseHTMLAttributes {\n  ref?: Ref<PanelElement>;\n  collapsed?: boolean;\n  onTabChange?: CustomEventHandler<TabChangeEventDetail>;\n}\n\nexport interface SliderProps extends BaseHTMLAttributes {\n  ref?: Ref<SliderElement>;\n  value?: number | string;\n  min?: number | string;\n  max?: number | string;\n  step?: number | string;\n  disabled?: boolean;\n  onInput?: CustomEventHandler<ControlEventDetail<number>>;\n  onChange?: CustomEventHandler<ControlEventDetail<number>>;\n}\n\nexport interface ToggleProps extends BaseHTMLAttributes {\n  ref?: Ref<ToggleElement>;\n  checked?: boolean;\n  disabled?: boolean;\n  onToggle?: CustomEventHandler<ControlEventDetail<boolean>>;\n  onChange?: CustomEventHandler<ControlEventDetail<boolean>>;\n}\n\nexport interface CheckboxProps extends BaseHTMLAttributes {\n  ref?: Ref<CheckboxElement>;\n  checked?: boolean;\n  disabled?: boolean;\n  indeterminate?: boolean;\n  onChange?: CustomEventHandler<ControlEventDetail<boolean>>;\n}\n\nexport interface InputProps extends BaseHTMLAttributes {\n  ref?: Ref<InputElement>;\n  value?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  type?: string;\n  onInput?: CustomEventHandler<ControlEventDetail<string>>;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface NumberInputProps extends BaseHTMLAttributes {\n  ref?: Ref<NumberInputElement>;\n  value?: number | string;\n  min?: number | string;\n  max?: number | string;\n  step?: number | string;\n  disabled?: boolean;\n  onInput?: CustomEventHandler<ControlEventDetail<number>>;\n  onChange?: CustomEventHandler<ControlEventDetail<number>>;\n}\n\nexport interface ColorInputProps extends BaseHTMLAttributes {\n  ref?: Ref<ColorInputElement>;\n  value?: string;\n  disabled?: boolean;\n  onInput?: CustomEventHandler<ControlEventDetail<string>>;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface DropdownProps extends BaseHTMLAttributes {\n  ref?: Ref<DropdownElement>;\n  value?: string;\n  disabled?: boolean;\n  open?: boolean;\n  placement?: string;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface ButtonProps extends BaseHTMLAttributes {\n  ref?: Ref<ButtonElement>;\n  disabled?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  variant?: 'primary' | 'secondary' | 'ghost';\n  pill?: boolean;\n  block?: string;\n  fullWidth?: boolean;\n}\n\nexport interface FieldProps extends BaseHTMLAttributes {\n  ref?: Ref<FieldElement>;\n  label?: string;\n  inline?: boolean;\n}\n\nexport interface TooltipProps extends BaseHTMLAttributes {\n  ref?: Ref<TooltipElement>;\n  content?: string;\n  placement?: string;\n  delay?: number | string;\n}\n\nexport interface PopoverProps extends BaseHTMLAttributes {\n  ref?: Ref<PopoverElement>;\n  open?: boolean;\n  placement?: string;\n}\n\nexport interface OriginProps extends BaseHTMLAttributes {\n  ref?: Ref<OriginElement>;\n  value?: string;\n  disabled?: boolean;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface RadioGroupProps extends BaseHTMLAttributes {\n  ref?: Ref<RadioGroupElement>;\n  value?: string;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface RadioInputProps extends BaseHTMLAttributes {\n  value?: string;\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport interface CurveProps extends BaseHTMLAttributes {\n  ref?: Ref<CurveElement>;\n  name?: string;\n  easingType?: 'cubic-bezier' | 'linear';\n  'easing-type'?: 'cubic-bezier' | 'linear';\n  showGrid?: boolean;\n  'show-grid'?: boolean;\n  snapToGrid?: boolean;\n  'snap-to-grid'?: boolean;\n  gridSize?: number | string;\n  'grid-size'?: number | string;\n}\n\nexport interface CodeProps extends BaseHTMLAttributes {\n  language?: string;\n}\n\nexport interface MonitorProps extends BaseHTMLAttributes {}\n\nexport interface MonitorFpsProps extends BaseHTMLAttributes {\n  interval?: number | string;\n}\n\nexport interface LogoLoaderProps extends BaseHTMLAttributes {\n  intro?: 'none' | 'simple' | 'full';\n  playing?: boolean;\n}\n\n// JSX IntrinsicElements\nexport interface EaseElements {\n  'ease-state': StateProps;\n  'ease-panel': PanelProps;\n  'ease-slider': SliderProps;\n  'ease-toggle': ToggleProps;\n  'ease-checkbox': CheckboxProps;\n  'ease-input': InputProps;\n  'ease-number-input': NumberInputProps;\n  'ease-color-input': ColorInputProps;\n  'ease-color-picker': ColorInputProps;\n  'ease-dropdown': DropdownProps;\n  'ease-button': ButtonProps;\n  'ease-field': FieldProps;\n  'ease-tooltip': TooltipProps;\n  'ease-popover': PopoverProps;\n  'ease-origin': OriginProps;\n  'ease-radio-group': RadioGroupProps;\n  'ease-radio-input': RadioInputProps;\n  'ease-curve': CurveProps;\n  'ease-code': CodeProps;\n  'ease-monitor': MonitorProps;\n  'ease-monitor-fps': MonitorFpsProps;\n  'ease-logo-loader': LogoLoaderProps;\n}\n\n// Augment global JSX namespace\n// This provides type support in both React and non-React environments\ndeclare global {\n  namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Augment React's JSX namespace for React 17/18/19 (classic JSX transform)\ndeclare module 'react' {\n  namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Augment React's jsx-runtime for React 17+ (new JSX transform)\n// This is required for Next.js App Router and other projects using the new transform\ndeclare module 'react/jsx-runtime' {\n  export namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Augment React's jsx-dev-runtime for development mode\ndeclare module 'react/jsx-dev-runtime' {\n  export namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Runtime marker to ensure this module is processed by TypeScript\n// This is needed because purely type-only modules may not trigger augmentation\nexport const __JSX_TYPES_LOADED__ = true;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;AAqXO,IAAMA,uBAAuB;","names":["__JSX_TYPES_LOADED__"]}
+{"version":3,"sources":["../src/react/jsx.ts"],"sourcesContent":["/**\n * JSX type declarations for @easemate/web-kit\n *\n * Import this module to get JSX IntrinsicElements type support:\n * ```ts\n * import '@easemate/web-kit/react/jsx';\n * ```\n */\n\n// Import React types to enable proper module augmentation\n// This ensures 'react' and 'react/jsx-runtime' are resolvable for augmentation\nimport type {} from 'react';\nimport type {} from 'react/jsx-dev-runtime';\nimport type {} from 'react/jsx-runtime';\nimport type { StateChangeEventDetail } from '../elements/state/index';\n\n// Re-export for convenience\nexport type { StateChangeEventDetail };\n\n// Event detail types\nexport interface TabChangeEventDetail {\n  index: number;\n  id: string;\n  event: Event;\n}\n\nexport interface ControlEventDetail<T = unknown> {\n  name?: string;\n  value: T;\n  event: Event;\n}\n\n// Ref types\ntype RefCallback<T> = (instance: T | null) => void;\ntype RefObject<T> = { current: T | null };\ntype Ref<T> = RefCallback<T> | RefObject<T> | null;\n\n// Event handler type\ntype CustomEventHandler<T = unknown> = (event: CustomEvent<T>) => void;\n\n// Base HTML attributes shared by all elements\ninterface BaseHTMLAttributes {\n  // React's key prop for list rendering\n  key?: string | number | null;\n  id?: string;\n  class?: string;\n  className?: string;\n  style?: string | Partial<CSSStyleDeclaration>;\n  slot?: string;\n  hidden?: boolean;\n  tabIndex?: number;\n  title?: string;\n  name?: string;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  'aria-hidden'?: boolean | 'true' | 'false';\n  'aria-disabled'?: boolean | 'true' | 'false';\n  'data-testid'?: string;\n  onClick?: (event: MouseEvent) => void;\n  onFocus?: (event: FocusEvent) => void;\n  onBlur?: (event: FocusEvent) => void;\n  onKeyDown?: (event: KeyboardEvent) => void;\n  onKeyUp?: (event: KeyboardEvent) => void;\n  children?: unknown;\n}\n\n// Element ref interfaces\nexport interface StateElement extends HTMLElement {\n  getState(): Record<string, unknown>;\n  get(name: string): unknown;\n  set(name: string, value: unknown): void;\n  reset(): void;\n}\n\nexport interface PanelElement extends HTMLElement {\n  collapsed?: boolean;\n  setActiveTab(indexOrId: number | string): void;\n  getActiveTab(): { index: number; id: string } | null;\n}\n\nexport interface SliderElement extends HTMLElement {\n  value?: number | null;\n  min?: number | null;\n  max?: number | null;\n  step?: number | null;\n  disabled?: boolean;\n}\n\nexport interface ToggleElement extends HTMLElement {\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport interface CheckboxElement extends HTMLElement {\n  checked?: boolean;\n  disabled?: boolean;\n  indeterminate?: boolean;\n}\n\nexport interface InputElement extends HTMLElement {\n  value?: string | null;\n  placeholder?: string;\n  disabled?: boolean;\n  type?: string;\n  focus(): void;\n  blur(): void;\n}\n\nexport interface NumberInputElement extends HTMLElement {\n  value?: number | null;\n  min?: number | null;\n  max?: number | null;\n  step?: number | null;\n  disabled?: boolean;\n}\n\nexport interface ColorInputElement extends HTMLElement {\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface DropdownElement extends HTMLElement {\n  value?: string;\n  disabled?: boolean;\n  open?: boolean;\n}\n\nexport interface ButtonElement extends HTMLElement {\n  disabled?: boolean;\n  type?: string;\n  variant?: string;\n}\n\nexport interface FieldElement extends HTMLElement {\n  label?: string;\n}\n\nexport interface TooltipElement extends HTMLElement {\n  content?: string;\n  placement?: string;\n}\n\nexport interface PopoverElement extends HTMLElement {\n  open?: boolean;\n  placement?: string;\n}\n\nexport interface OriginElement extends HTMLElement {\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface RadioGroupElement extends HTMLElement {\n  value?: string;\n}\n\nexport interface CurveElement extends HTMLElement {\n  name?: string;\n  easingType?: 'cubic-bezier' | 'linear';\n  showGrid?: boolean;\n  snapToGrid?: boolean;\n}\n\n// Props interfaces\nexport interface StateProps extends BaseHTMLAttributes {\n  ref?: Ref<StateElement>;\n  onStateChange?: CustomEventHandler<StateChangeEventDetail>;\n}\n\nexport interface PanelProps extends BaseHTMLAttributes {\n  ref?: Ref<PanelElement>;\n  collapsed?: boolean;\n  onTabChange?: CustomEventHandler<TabChangeEventDetail>;\n}\n\nexport interface SliderProps extends BaseHTMLAttributes {\n  ref?: Ref<SliderElement>;\n  value?: number | string;\n  min?: number | string;\n  max?: number | string;\n  step?: number | string;\n  disabled?: boolean;\n  onInput?: CustomEventHandler<ControlEventDetail<number>>;\n  onChange?: CustomEventHandler<ControlEventDetail<number>>;\n}\n\nexport interface ToggleProps extends BaseHTMLAttributes {\n  ref?: Ref<ToggleElement>;\n  checked?: boolean;\n  disabled?: boolean;\n  onToggle?: CustomEventHandler<ControlEventDetail<boolean>>;\n  onChange?: CustomEventHandler<ControlEventDetail<boolean>>;\n}\n\nexport interface CheckboxProps extends BaseHTMLAttributes {\n  ref?: Ref<CheckboxElement>;\n  checked?: boolean;\n  disabled?: boolean;\n  indeterminate?: boolean;\n  onChange?: CustomEventHandler<ControlEventDetail<boolean>>;\n}\n\nexport interface InputProps extends BaseHTMLAttributes {\n  ref?: Ref<InputElement>;\n  value?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  type?: string;\n  onInput?: CustomEventHandler<ControlEventDetail<string>>;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface NumberInputProps extends BaseHTMLAttributes {\n  ref?: Ref<NumberInputElement>;\n  value?: number | string;\n  min?: number | string;\n  max?: number | string;\n  step?: number | string;\n  disabled?: boolean;\n  onInput?: CustomEventHandler<ControlEventDetail<number>>;\n  onChange?: CustomEventHandler<ControlEventDetail<number>>;\n}\n\nexport interface ColorInputProps extends BaseHTMLAttributes {\n  ref?: Ref<ColorInputElement>;\n  value?: string;\n  disabled?: boolean;\n  onInput?: CustomEventHandler<ControlEventDetail<string>>;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface DropdownProps extends BaseHTMLAttributes {\n  ref?: Ref<DropdownElement>;\n  value?: string;\n  disabled?: boolean;\n  open?: boolean;\n  placement?: string;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface ButtonProps extends BaseHTMLAttributes {\n  ref?: Ref<ButtonElement>;\n  disabled?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  variant?: 'primary' | 'secondary' | 'ghost';\n  pill?: boolean;\n  block?: string;\n  fullWidth?: boolean;\n}\n\nexport interface FieldProps extends BaseHTMLAttributes {\n  ref?: Ref<FieldElement>;\n  label?: string;\n  inline?: boolean;\n}\n\nexport interface TooltipProps extends BaseHTMLAttributes {\n  ref?: Ref<TooltipElement>;\n  content?: string;\n  placement?: string;\n  delay?: number | string;\n}\n\nexport interface PopoverProps extends BaseHTMLAttributes {\n  ref?: Ref<PopoverElement>;\n  open?: boolean;\n  placement?: string;\n}\n\nexport interface OriginProps extends BaseHTMLAttributes {\n  ref?: Ref<OriginElement>;\n  value?: string;\n  disabled?: boolean;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface RadioGroupProps extends BaseHTMLAttributes {\n  ref?: Ref<RadioGroupElement>;\n  value?: string;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface RadioInputProps extends BaseHTMLAttributes {\n  value?: string;\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport interface CurveProps extends BaseHTMLAttributes {\n  ref?: Ref<CurveElement>;\n  name?: string;\n  easingType?: 'cubic-bezier' | 'linear';\n  'easing-type'?: 'cubic-bezier' | 'linear';\n  showGrid?: boolean;\n  'show-grid'?: boolean;\n  snapToGrid?: boolean;\n  'snap-to-grid'?: boolean;\n  gridSize?: number | string;\n  'grid-size'?: number | string;\n}\n\nexport interface CodeProps extends BaseHTMLAttributes {\n  language?: string;\n}\n\nexport interface MonitorProps extends BaseHTMLAttributes {}\n\nexport interface MonitorFpsProps extends BaseHTMLAttributes {\n  interval?: number | string;\n}\n\nexport interface LogoLoaderProps extends BaseHTMLAttributes {\n  intro?: 'none' | 'simple' | 'full';\n  playing?: boolean;\n}\n\n// JSX IntrinsicElements\nexport interface EaseElements {\n  'ease-state': StateProps;\n  'ease-panel': PanelProps;\n  'ease-slider': SliderProps;\n  'ease-toggle': ToggleProps;\n  'ease-checkbox': CheckboxProps;\n  'ease-input': InputProps;\n  'ease-number-input': NumberInputProps;\n  'ease-color-input': ColorInputProps;\n  'ease-color-picker': ColorInputProps;\n  'ease-dropdown': DropdownProps;\n  'ease-button': ButtonProps;\n  'ease-field': FieldProps;\n  'ease-tooltip': TooltipProps;\n  'ease-popover': PopoverProps;\n  'ease-origin': OriginProps;\n  'ease-radio-group': RadioGroupProps;\n  'ease-radio-input': RadioInputProps;\n  'ease-curve': CurveProps;\n  'ease-code': CodeProps;\n  'ease-monitor': MonitorProps;\n  'ease-monitor-fps': MonitorFpsProps;\n  'ease-logo-loader': LogoLoaderProps;\n}\n\n// Augment global JSX namespace\n// This provides type support in both React and non-React environments\ndeclare global {\n  namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Augment React's JSX namespace for React 17/18/19 (classic JSX transform)\ndeclare module 'react' {\n  namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Augment React's jsx-runtime for React 17+ (new JSX transform)\n// This is required for Next.js App Router and other projects using the new transform\ndeclare module 'react/jsx-runtime' {\n  export namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Augment React's jsx-dev-runtime for development mode\ndeclare module 'react/jsx-dev-runtime' {\n  export namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Runtime marker to ensure this module is processed by TypeScript\n// This is needed because purely type-only modules may not trigger augmentation\nexport const __JSX_TYPES_LOADED__ = true;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;AAuXO,IAAMA,uBAAuB;","names":["__JSX_TYPES_LOADED__"]}

package/build/jsx.d.cts

@@ -27,6 +27,7 @@ type RefObject<T> = {
 type Ref<T> = RefCallback<T> | RefObject<T> | null;
 type CustomEventHandler<T = unknown> = (event: CustomEvent<T>) => void;
 interface BaseHTMLAttributes {
+    key?: string | number | null;
     id?: string;
     class?: string;
     className?: string;

package/build/jsx.d.ts

@@ -27,6 +27,7 @@ type RefObject<T> = {
 type Ref<T> = RefCallback<T> | RefObject<T> | null;
 type CustomEventHandler<T = unknown> = (event: CustomEvent<T>) => void;
 interface BaseHTMLAttributes {
+    key?: string | number | null;
     id?: string;
     class?: string;
     className?: string;

package/build/jsx.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react/jsx.ts"],"sourcesContent":["/**\n * JSX type declarations for @easemate/web-kit\n *\n * Import this module to get JSX IntrinsicElements type support:\n * ```ts\n * import '@easemate/web-kit/react/jsx';\n * ```\n */\n\n// Import React types to enable proper module augmentation\n// This ensures 'react' and 'react/jsx-runtime' are resolvable for augmentation\nimport type {} from 'react';\nimport type {} from 'react/jsx-dev-runtime';\nimport type {} from 'react/jsx-runtime';\nimport type { StateChangeEventDetail } from '../elements/state/index';\n\n// Re-export for convenience\nexport type { StateChangeEventDetail };\n\n// Event detail types\nexport interface TabChangeEventDetail {\n  index: number;\n  id: string;\n  event: Event;\n}\n\nexport interface ControlEventDetail<T = unknown> {\n  name?: string;\n  value: T;\n  event: Event;\n}\n\n// Ref types\ntype RefCallback<T> = (instance: T | null) => void;\ntype RefObject<T> = { current: T | null };\ntype Ref<T> = RefCallback<T> | RefObject<T> | null;\n\n// Event handler type\ntype CustomEventHandler<T = unknown> = (event: CustomEvent<T>) => void;\n\n// Base HTML attributes shared by all elements\ninterface BaseHTMLAttributes {\n  id?: string;\n  class?: string;\n  className?: string;\n  style?: string | Partial<CSSStyleDeclaration>;\n  slot?: string;\n  hidden?: boolean;\n  tabIndex?: number;\n  title?: string;\n  name?: string;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  'aria-hidden'?: boolean | 'true' | 'false';\n  'aria-disabled'?: boolean | 'true' | 'false';\n  'data-testid'?: string;\n  onClick?: (event: MouseEvent) => void;\n  onFocus?: (event: FocusEvent) => void;\n  onBlur?: (event: FocusEvent) => void;\n  onKeyDown?: (event: KeyboardEvent) => void;\n  onKeyUp?: (event: KeyboardEvent) => void;\n  children?: unknown;\n}\n\n// Element ref interfaces\nexport interface StateElement extends HTMLElement {\n  getState(): Record<string, unknown>;\n  get(name: string): unknown;\n  set(name: string, value: unknown): void;\n  reset(): void;\n}\n\nexport interface PanelElement extends HTMLElement {\n  collapsed?: boolean;\n  setActiveTab(indexOrId: number | string): void;\n  getActiveTab(): { index: number; id: string } | null;\n}\n\nexport interface SliderElement extends HTMLElement {\n  value?: number | null;\n  min?: number | null;\n  max?: number | null;\n  step?: number | null;\n  disabled?: boolean;\n}\n\nexport interface ToggleElement extends HTMLElement {\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport interface CheckboxElement extends HTMLElement {\n  checked?: boolean;\n  disabled?: boolean;\n  indeterminate?: boolean;\n}\n\nexport interface InputElement extends HTMLElement {\n  value?: string | null;\n  placeholder?: string;\n  disabled?: boolean;\n  type?: string;\n  focus(): void;\n  blur(): void;\n}\n\nexport interface NumberInputElement extends HTMLElement {\n  value?: number | null;\n  min?: number | null;\n  max?: number | null;\n  step?: number | null;\n  disabled?: boolean;\n}\n\nexport interface ColorInputElement extends HTMLElement {\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface DropdownElement extends HTMLElement {\n  value?: string;\n  disabled?: boolean;\n  open?: boolean;\n}\n\nexport interface ButtonElement extends HTMLElement {\n  disabled?: boolean;\n  type?: string;\n  variant?: string;\n}\n\nexport interface FieldElement extends HTMLElement {\n  label?: string;\n}\n\nexport interface TooltipElement extends HTMLElement {\n  content?: string;\n  placement?: string;\n}\n\nexport interface PopoverElement extends HTMLElement {\n  open?: boolean;\n  placement?: string;\n}\n\nexport interface OriginElement extends HTMLElement {\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface RadioGroupElement extends HTMLElement {\n  value?: string;\n}\n\nexport interface CurveElement extends HTMLElement {\n  name?: string;\n  easingType?: 'cubic-bezier' | 'linear';\n  showGrid?: boolean;\n  snapToGrid?: boolean;\n}\n\n// Props interfaces\nexport interface StateProps extends BaseHTMLAttributes {\n  ref?: Ref<StateElement>;\n  onStateChange?: CustomEventHandler<StateChangeEventDetail>;\n}\n\nexport interface PanelProps extends BaseHTMLAttributes {\n  ref?: Ref<PanelElement>;\n  collapsed?: boolean;\n  onTabChange?: CustomEventHandler<TabChangeEventDetail>;\n}\n\nexport interface SliderProps extends BaseHTMLAttributes {\n  ref?: Ref<SliderElement>;\n  value?: number | string;\n  min?: number | string;\n  max?: number | string;\n  step?: number | string;\n  disabled?: boolean;\n  onInput?: CustomEventHandler<ControlEventDetail<number>>;\n  onChange?: CustomEventHandler<ControlEventDetail<number>>;\n}\n\nexport interface ToggleProps extends BaseHTMLAttributes {\n  ref?: Ref<ToggleElement>;\n  checked?: boolean;\n  disabled?: boolean;\n  onToggle?: CustomEventHandler<ControlEventDetail<boolean>>;\n  onChange?: CustomEventHandler<ControlEventDetail<boolean>>;\n}\n\nexport interface CheckboxProps extends BaseHTMLAttributes {\n  ref?: Ref<CheckboxElement>;\n  checked?: boolean;\n  disabled?: boolean;\n  indeterminate?: boolean;\n  onChange?: CustomEventHandler<ControlEventDetail<boolean>>;\n}\n\nexport interface InputProps extends BaseHTMLAttributes {\n  ref?: Ref<InputElement>;\n  value?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  type?: string;\n  onInput?: CustomEventHandler<ControlEventDetail<string>>;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface NumberInputProps extends BaseHTMLAttributes {\n  ref?: Ref<NumberInputElement>;\n  value?: number | string;\n  min?: number | string;\n  max?: number | string;\n  step?: number | string;\n  disabled?: boolean;\n  onInput?: CustomEventHandler<ControlEventDetail<number>>;\n  onChange?: CustomEventHandler<ControlEventDetail<number>>;\n}\n\nexport interface ColorInputProps extends BaseHTMLAttributes {\n  ref?: Ref<ColorInputElement>;\n  value?: string;\n  disabled?: boolean;\n  onInput?: CustomEventHandler<ControlEventDetail<string>>;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface DropdownProps extends BaseHTMLAttributes {\n  ref?: Ref<DropdownElement>;\n  value?: string;\n  disabled?: boolean;\n  open?: boolean;\n  placement?: string;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface ButtonProps extends BaseHTMLAttributes {\n  ref?: Ref<ButtonElement>;\n  disabled?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  variant?: 'primary' | 'secondary' | 'ghost';\n  pill?: boolean;\n  block?: string;\n  fullWidth?: boolean;\n}\n\nexport interface FieldProps extends BaseHTMLAttributes {\n  ref?: Ref<FieldElement>;\n  label?: string;\n  inline?: boolean;\n}\n\nexport interface TooltipProps extends BaseHTMLAttributes {\n  ref?: Ref<TooltipElement>;\n  content?: string;\n  placement?: string;\n  delay?: number | string;\n}\n\nexport interface PopoverProps extends BaseHTMLAttributes {\n  ref?: Ref<PopoverElement>;\n  open?: boolean;\n  placement?: string;\n}\n\nexport interface OriginProps extends BaseHTMLAttributes {\n  ref?: Ref<OriginElement>;\n  value?: string;\n  disabled?: boolean;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface RadioGroupProps extends BaseHTMLAttributes {\n  ref?: Ref<RadioGroupElement>;\n  value?: string;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface RadioInputProps extends BaseHTMLAttributes {\n  value?: string;\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport interface CurveProps extends BaseHTMLAttributes {\n  ref?: Ref<CurveElement>;\n  name?: string;\n  easingType?: 'cubic-bezier' | 'linear';\n  'easing-type'?: 'cubic-bezier' | 'linear';\n  showGrid?: boolean;\n  'show-grid'?: boolean;\n  snapToGrid?: boolean;\n  'snap-to-grid'?: boolean;\n  gridSize?: number | string;\n  'grid-size'?: number | string;\n}\n\nexport interface CodeProps extends BaseHTMLAttributes {\n  language?: string;\n}\n\nexport interface MonitorProps extends BaseHTMLAttributes {}\n\nexport interface MonitorFpsProps extends BaseHTMLAttributes {\n  interval?: number | string;\n}\n\nexport interface LogoLoaderProps extends BaseHTMLAttributes {\n  intro?: 'none' | 'simple' | 'full';\n  playing?: boolean;\n}\n\n// JSX IntrinsicElements\nexport interface EaseElements {\n  'ease-state': StateProps;\n  'ease-panel': PanelProps;\n  'ease-slider': SliderProps;\n  'ease-toggle': ToggleProps;\n  'ease-checkbox': CheckboxProps;\n  'ease-input': InputProps;\n  'ease-number-input': NumberInputProps;\n  'ease-color-input': ColorInputProps;\n  'ease-color-picker': ColorInputProps;\n  'ease-dropdown': DropdownProps;\n  'ease-button': ButtonProps;\n  'ease-field': FieldProps;\n  'ease-tooltip': TooltipProps;\n  'ease-popover': PopoverProps;\n  'ease-origin': OriginProps;\n  'ease-radio-group': RadioGroupProps;\n  'ease-radio-input': RadioInputProps;\n  'ease-curve': CurveProps;\n  'ease-code': CodeProps;\n  'ease-monitor': MonitorProps;\n  'ease-monitor-fps': MonitorFpsProps;\n  'ease-logo-loader': LogoLoaderProps;\n}\n\n// Augment global JSX namespace\n// This provides type support in both React and non-React environments\ndeclare global {\n  namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Augment React's JSX namespace for React 17/18/19 (classic JSX transform)\ndeclare module 'react' {\n  namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Augment React's jsx-runtime for React 17+ (new JSX transform)\n// This is required for Next.js App Router and other projects using the new transform\ndeclare module 'react/jsx-runtime' {\n  export namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Augment React's jsx-dev-runtime for development mode\ndeclare module 'react/jsx-dev-runtime' {\n  export namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Runtime marker to ensure this module is processed by TypeScript\n// This is needed because purely type-only modules may not trigger augmentation\nexport const __JSX_TYPES_LOADED__ = true;\n"],"mappings":";AAqXO,IAAMA,uBAAuB;","names":["__JSX_TYPES_LOADED__"]}
+{"version":3,"sources":["../src/react/jsx.ts"],"sourcesContent":["/**\n * JSX type declarations for @easemate/web-kit\n *\n * Import this module to get JSX IntrinsicElements type support:\n * ```ts\n * import '@easemate/web-kit/react/jsx';\n * ```\n */\n\n// Import React types to enable proper module augmentation\n// This ensures 'react' and 'react/jsx-runtime' are resolvable for augmentation\nimport type {} from 'react';\nimport type {} from 'react/jsx-dev-runtime';\nimport type {} from 'react/jsx-runtime';\nimport type { StateChangeEventDetail } from '../elements/state/index';\n\n// Re-export for convenience\nexport type { StateChangeEventDetail };\n\n// Event detail types\nexport interface TabChangeEventDetail {\n  index: number;\n  id: string;\n  event: Event;\n}\n\nexport interface ControlEventDetail<T = unknown> {\n  name?: string;\n  value: T;\n  event: Event;\n}\n\n// Ref types\ntype RefCallback<T> = (instance: T | null) => void;\ntype RefObject<T> = { current: T | null };\ntype Ref<T> = RefCallback<T> | RefObject<T> | null;\n\n// Event handler type\ntype CustomEventHandler<T = unknown> = (event: CustomEvent<T>) => void;\n\n// Base HTML attributes shared by all elements\ninterface BaseHTMLAttributes {\n  // React's key prop for list rendering\n  key?: string | number | null;\n  id?: string;\n  class?: string;\n  className?: string;\n  style?: string | Partial<CSSStyleDeclaration>;\n  slot?: string;\n  hidden?: boolean;\n  tabIndex?: number;\n  title?: string;\n  name?: string;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  'aria-hidden'?: boolean | 'true' | 'false';\n  'aria-disabled'?: boolean | 'true' | 'false';\n  'data-testid'?: string;\n  onClick?: (event: MouseEvent) => void;\n  onFocus?: (event: FocusEvent) => void;\n  onBlur?: (event: FocusEvent) => void;\n  onKeyDown?: (event: KeyboardEvent) => void;\n  onKeyUp?: (event: KeyboardEvent) => void;\n  children?: unknown;\n}\n\n// Element ref interfaces\nexport interface StateElement extends HTMLElement {\n  getState(): Record<string, unknown>;\n  get(name: string): unknown;\n  set(name: string, value: unknown): void;\n  reset(): void;\n}\n\nexport interface PanelElement extends HTMLElement {\n  collapsed?: boolean;\n  setActiveTab(indexOrId: number | string): void;\n  getActiveTab(): { index: number; id: string } | null;\n}\n\nexport interface SliderElement extends HTMLElement {\n  value?: number | null;\n  min?: number | null;\n  max?: number | null;\n  step?: number | null;\n  disabled?: boolean;\n}\n\nexport interface ToggleElement extends HTMLElement {\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport interface CheckboxElement extends HTMLElement {\n  checked?: boolean;\n  disabled?: boolean;\n  indeterminate?: boolean;\n}\n\nexport interface InputElement extends HTMLElement {\n  value?: string | null;\n  placeholder?: string;\n  disabled?: boolean;\n  type?: string;\n  focus(): void;\n  blur(): void;\n}\n\nexport interface NumberInputElement extends HTMLElement {\n  value?: number | null;\n  min?: number | null;\n  max?: number | null;\n  step?: number | null;\n  disabled?: boolean;\n}\n\nexport interface ColorInputElement extends HTMLElement {\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface DropdownElement extends HTMLElement {\n  value?: string;\n  disabled?: boolean;\n  open?: boolean;\n}\n\nexport interface ButtonElement extends HTMLElement {\n  disabled?: boolean;\n  type?: string;\n  variant?: string;\n}\n\nexport interface FieldElement extends HTMLElement {\n  label?: string;\n}\n\nexport interface TooltipElement extends HTMLElement {\n  content?: string;\n  placement?: string;\n}\n\nexport interface PopoverElement extends HTMLElement {\n  open?: boolean;\n  placement?: string;\n}\n\nexport interface OriginElement extends HTMLElement {\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface RadioGroupElement extends HTMLElement {\n  value?: string;\n}\n\nexport interface CurveElement extends HTMLElement {\n  name?: string;\n  easingType?: 'cubic-bezier' | 'linear';\n  showGrid?: boolean;\n  snapToGrid?: boolean;\n}\n\n// Props interfaces\nexport interface StateProps extends BaseHTMLAttributes {\n  ref?: Ref<StateElement>;\n  onStateChange?: CustomEventHandler<StateChangeEventDetail>;\n}\n\nexport interface PanelProps extends BaseHTMLAttributes {\n  ref?: Ref<PanelElement>;\n  collapsed?: boolean;\n  onTabChange?: CustomEventHandler<TabChangeEventDetail>;\n}\n\nexport interface SliderProps extends BaseHTMLAttributes {\n  ref?: Ref<SliderElement>;\n  value?: number | string;\n  min?: number | string;\n  max?: number | string;\n  step?: number | string;\n  disabled?: boolean;\n  onInput?: CustomEventHandler<ControlEventDetail<number>>;\n  onChange?: CustomEventHandler<ControlEventDetail<number>>;\n}\n\nexport interface ToggleProps extends BaseHTMLAttributes {\n  ref?: Ref<ToggleElement>;\n  checked?: boolean;\n  disabled?: boolean;\n  onToggle?: CustomEventHandler<ControlEventDetail<boolean>>;\n  onChange?: CustomEventHandler<ControlEventDetail<boolean>>;\n}\n\nexport interface CheckboxProps extends BaseHTMLAttributes {\n  ref?: Ref<CheckboxElement>;\n  checked?: boolean;\n  disabled?: boolean;\n  indeterminate?: boolean;\n  onChange?: CustomEventHandler<ControlEventDetail<boolean>>;\n}\n\nexport interface InputProps extends BaseHTMLAttributes {\n  ref?: Ref<InputElement>;\n  value?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  type?: string;\n  onInput?: CustomEventHandler<ControlEventDetail<string>>;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface NumberInputProps extends BaseHTMLAttributes {\n  ref?: Ref<NumberInputElement>;\n  value?: number | string;\n  min?: number | string;\n  max?: number | string;\n  step?: number | string;\n  disabled?: boolean;\n  onInput?: CustomEventHandler<ControlEventDetail<number>>;\n  onChange?: CustomEventHandler<ControlEventDetail<number>>;\n}\n\nexport interface ColorInputProps extends BaseHTMLAttributes {\n  ref?: Ref<ColorInputElement>;\n  value?: string;\n  disabled?: boolean;\n  onInput?: CustomEventHandler<ControlEventDetail<string>>;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface DropdownProps extends BaseHTMLAttributes {\n  ref?: Ref<DropdownElement>;\n  value?: string;\n  disabled?: boolean;\n  open?: boolean;\n  placement?: string;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface ButtonProps extends BaseHTMLAttributes {\n  ref?: Ref<ButtonElement>;\n  disabled?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  variant?: 'primary' | 'secondary' | 'ghost';\n  pill?: boolean;\n  block?: string;\n  fullWidth?: boolean;\n}\n\nexport interface FieldProps extends BaseHTMLAttributes {\n  ref?: Ref<FieldElement>;\n  label?: string;\n  inline?: boolean;\n}\n\nexport interface TooltipProps extends BaseHTMLAttributes {\n  ref?: Ref<TooltipElement>;\n  content?: string;\n  placement?: string;\n  delay?: number | string;\n}\n\nexport interface PopoverProps extends BaseHTMLAttributes {\n  ref?: Ref<PopoverElement>;\n  open?: boolean;\n  placement?: string;\n}\n\nexport interface OriginProps extends BaseHTMLAttributes {\n  ref?: Ref<OriginElement>;\n  value?: string;\n  disabled?: boolean;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface RadioGroupProps extends BaseHTMLAttributes {\n  ref?: Ref<RadioGroupElement>;\n  value?: string;\n  onChange?: CustomEventHandler<ControlEventDetail<string>>;\n}\n\nexport interface RadioInputProps extends BaseHTMLAttributes {\n  value?: string;\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport interface CurveProps extends BaseHTMLAttributes {\n  ref?: Ref<CurveElement>;\n  name?: string;\n  easingType?: 'cubic-bezier' | 'linear';\n  'easing-type'?: 'cubic-bezier' | 'linear';\n  showGrid?: boolean;\n  'show-grid'?: boolean;\n  snapToGrid?: boolean;\n  'snap-to-grid'?: boolean;\n  gridSize?: number | string;\n  'grid-size'?: number | string;\n}\n\nexport interface CodeProps extends BaseHTMLAttributes {\n  language?: string;\n}\n\nexport interface MonitorProps extends BaseHTMLAttributes {}\n\nexport interface MonitorFpsProps extends BaseHTMLAttributes {\n  interval?: number | string;\n}\n\nexport interface LogoLoaderProps extends BaseHTMLAttributes {\n  intro?: 'none' | 'simple' | 'full';\n  playing?: boolean;\n}\n\n// JSX IntrinsicElements\nexport interface EaseElements {\n  'ease-state': StateProps;\n  'ease-panel': PanelProps;\n  'ease-slider': SliderProps;\n  'ease-toggle': ToggleProps;\n  'ease-checkbox': CheckboxProps;\n  'ease-input': InputProps;\n  'ease-number-input': NumberInputProps;\n  'ease-color-input': ColorInputProps;\n  'ease-color-picker': ColorInputProps;\n  'ease-dropdown': DropdownProps;\n  'ease-button': ButtonProps;\n  'ease-field': FieldProps;\n  'ease-tooltip': TooltipProps;\n  'ease-popover': PopoverProps;\n  'ease-origin': OriginProps;\n  'ease-radio-group': RadioGroupProps;\n  'ease-radio-input': RadioInputProps;\n  'ease-curve': CurveProps;\n  'ease-code': CodeProps;\n  'ease-monitor': MonitorProps;\n  'ease-monitor-fps': MonitorFpsProps;\n  'ease-logo-loader': LogoLoaderProps;\n}\n\n// Augment global JSX namespace\n// This provides type support in both React and non-React environments\ndeclare global {\n  namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Augment React's JSX namespace for React 17/18/19 (classic JSX transform)\ndeclare module 'react' {\n  namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Augment React's jsx-runtime for React 17+ (new JSX transform)\n// This is required for Next.js App Router and other projects using the new transform\ndeclare module 'react/jsx-runtime' {\n  export namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Augment React's jsx-dev-runtime for development mode\ndeclare module 'react/jsx-dev-runtime' {\n  export namespace JSX {\n    interface IntrinsicElements extends EaseElements {}\n  }\n}\n\n// Runtime marker to ensure this module is processed by TypeScript\n// This is needed because purely type-only modules may not trigger augmentation\nexport const __JSX_TYPES_LOADED__ = true;\n"],"mappings":";AAuXO,IAAMA,uBAAuB;","names":["__JSX_TYPES_LOADED__"]}