@number10/phaserjsx 0.1.0

package/dist/components/custom/Icon.d.ts

@@ -0,0 +1,75 @@
+import { ImageProps } from './Image';
+/**
+ * Icon loader function type
+ * Takes an icon type string and returns a promise resolving to SVG string
+ */
+export interface IconLoaderFn<T extends string = string> {
+    (type: T): Promise<string>;
+}
+/**
+ * Props for the generic Icon component
+ */
+export interface IconProps<T extends string = string> extends Omit<ImageProps, 'texture' | 'displayWidth' | 'displayHeight'> {
+    /** The icon type/name to load */
+    type: T | undefined;
+    /** Loader function that fetches the icon SVG */
+    loader: IconLoaderFn<T>;
+    /** Icon size in pixels (default: 32) */
+    size?: number;
+}
+/**
+ * Generic Icon component
+ * Loads and displays an icon using the provided loader function
+ *
+ * @example
+ * ```tsx
+ * <Icon
+ *   type="check"
+ *   loader={myIconLoader}
+ *   size={24}
+ * />
+ * ```
+ */
+export declare function Icon<T extends string = string>(props: IconProps<T>): any;
+/**
+ * Factory function to create a typed Icon component with a specific loader
+ * This allows creating strongly-typed icon components for specific icon libraries
+ *
+ * @param loader - The icon loader function
+ * @returns A typed Icon component that doesn't require the loader prop
+ *
+ * @example
+ * ```tsx
+ * // Define your loader
+ * async function myIconLoader(type: MyIconType): Promise<string> {
+ *   const module = await import(`./icons/${type}.svg`)
+ *   return module.default
+ * }
+ *
+ * // Create typed component
+ * export const MyIcon = createIconComponent<MyIconType>(myIconLoader)
+ *
+ * // Use without loader prop
+ * <MyIcon type="check" size={24} />
+ * ```
+ */
+export declare function createIconComponent<T extends string>(loader: IconLoaderFn<T>): (props: Omit<IconProps<T>, "loader">) => any;
+/**
+ * Hook to preload an icon and check if it's ready
+ * Useful for loading icons before they're displayed
+ *
+ * @param type - The icon type to load
+ * @param loader - The icon loader function
+ * @returns true when the icon is loaded and ready to use
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const iconReady = useIconPreload('check', myIconLoader)
+ *
+ *   return iconReady ? <Icon type="check" loader={myIconLoader} /> : <Text text="Loading..." />
+ * }
+ * ```
+ */
+export declare function useIconPreload<T extends string>(type: T, loader: IconLoaderFn<T>): boolean;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/custom/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/custom/Icon.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAEhD;;;GAGG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAClD,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,cAAc,GAAG,eAAe,CAAC;IACtE,iCAAiC;IACjC,IAAI,EAAE,CAAC,GAAG,SAAS,CAAA;IACnB,gDAAgD;IAChD,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IACvB,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,OAgBlE;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,IACjD,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,SAG9D;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,CAU1F"}

package/dist/components/custom/Image.d.ts

@@ -0,0 +1,50 @@
+import { default as Phaser } from 'phaser';
+import { LayoutProps, PhaserProps, TransformProps } from '../../core-props';
+import { ChildrenType, PropsDefaultExtension } from '../../types';
+/**
+ * Props for Image component
+ * Explicitly defined to ensure type safety in JSX usage
+ */
+export interface ImageProps extends Omit<TransformProps, 'scaleX' | 'scaleY' | 'scale'>, PhaserProps, Omit<LayoutProps, 'direction' | 'justifyContent' | 'alignItems' | 'gap' | 'flexWrap'>, PropsDefaultExtension<Phaser.GameObjects.Image> {
+    /** Texture key (loaded via Phaser's texture manager) */
+    texture: string;
+    /** Optional frame from texture atlas */
+    frame?: string | number;
+    /** Tint color applied to image (0xRRGGBB) */
+    tint?: number | undefined;
+    /**
+     * How image should fit within bounds (if width/height set)
+     * - 'fill': Stretch to fill (default, may distort aspect ratio)
+     * - 'contain': Scale to fit within bounds, preserve aspect ratio
+     * - 'cover': Scale to cover bounds, preserve aspect ratio (may crop)
+     */
+    fit?: 'fill' | 'contain' | 'cover';
+    /** Origin X (0-1, default based on headless: 0 for layout, 0.5 for headless) */
+    originX?: number;
+    /** Origin Y (0-1, default based on headless: 0 for layout, 0.5 for headless) */
+    originY?: number;
+    /** Children are not supported for Image component */
+    children?: ChildrenType;
+}
+/**
+ * Image component
+ * Displays Phaser textures as visual elements
+ *
+ * @example
+ * ```tsx
+ * // Basic image with layout size
+ * <Image texture="avatar" width={64} height={64} />
+ *
+ * // Atlas frame
+ * <Image texture="sprites" frame="player" width={32} height={32} />
+ *
+ * // Tinted image
+ * <Image texture="icon" width={48} height={48} tint={0xff0000} />
+ *
+ * // Fit modes
+ * <Image texture="photo" width={200} height={200} fit="cover" />
+ * <Image texture="logo" width={100} height={100} fit="contain" />
+ * ```
+ */
+export declare function Image(props: ImageProps): any;
+//# sourceMappingURL=Image.d.ts.map

package/dist/components/custom/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/custom/Image.tsx"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B;;;GAGG;AACH,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAA;AAChC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGhF,OAAO,KAAK,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEtE;;;GAGG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC,EACzD,WAAW,EACX,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,gBAAgB,GAAG,YAAY,GAAG,KAAK,GAAG,UAAU,CAAC,EACrF,qBAAqB,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC;IACjD,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAA;IAEf,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEvB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAEzB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;IAElC,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,YAAY,CAAA;CACxB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,OAqBtC"}

package/dist/components/custom/Modal.d.ts

@@ -0,0 +1,37 @@
+import { EffectFn } from '../../effects/use-effect';
+import { ChildrenType } from '../../types';
+/**
+ * ModalPortal component props
+ */
+export interface ModalProps {
+    /** Unique key for VDOM identification */
+    key?: string;
+    /** request if modal should change its open/close state */
+    show: boolean;
+    /** Callback when modal should start closing (backdrop/Escape) */
+    onRequestClose?: (() => void) | undefined;
+    /** Callback when modal has been opened (at start of animation) */
+    onOpen?: (() => void) | undefined;
+    /** Callback when modal has been closed (at end of animation) */
+    onClosed?: (() => void) | undefined;
+    /** Close on backdrop click (default: true) */
+    closeOnBackdrop?: boolean | undefined;
+    /** Close on Escape key (default: true) */
+    closeOnEscape?: boolean | undefined;
+    /** Portal depth (default: 1000) */
+    depth?: number | undefined;
+    /** Custom effect for showing modal content (default: fade in) */
+    viewOpenEffect?: EffectFn | undefined;
+    /** Custom effect for hiding modal content (default: fade out) */
+    viewCloseEffect?: EffectFn | undefined;
+    /** Modal content */
+    children?: ChildrenType;
+}
+/**
+ * Modal component with backdrop and animations
+ * Uses Portal for rendering above main UI
+ * @param props - Modal props
+ * @returns Modal component
+ */
+export declare function Modal(props: ModalProps): any;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/custom/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/custom/Modal.tsx"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B;;;;GAIG;AACH,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,0BAA0B,CAAA;AAKjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAI/C;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,IAAI,EAAE,OAAO,CAAA;IACb,iEAAiE;IACjE,cAAc,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAA;IACzC,kEAAkE;IAClE,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAA;IACjC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAA;IACnC,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,0CAA0C;IAC1C,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,iEAAiE;IACjE,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACrC,iEAAiE;IACjE,eAAe,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACtC,oBAAoB;IACpB,QAAQ,CAAC,EAAE,YAAY,CAAA;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,OAoLtC"}

package/dist/components/custom/NineSlice.d.ts

@@ -0,0 +1,81 @@
+import { default as Phaser } from 'phaser';
+import { LayoutProps, PhaserProps, TransformProps } from '../../core-props';
+import { ChildrenType, PropsDefaultExtension } from '../../types';
+/**
+ * Props for NineSlice component
+ * Explicitly defined to ensure type safety in JSX usage
+ */
+export interface NineSliceProps extends Omit<TransformProps, 'scaleX' | 'scaleY' | 'scale'>, PhaserProps, Omit<LayoutProps, 'direction' | 'justifyContent' | 'alignItems' | 'gap' | 'flexWrap'>, PropsDefaultExtension<Phaser.GameObjects.NineSlice> {
+    /** Texture key (loaded via Phaser's texture manager) */
+    texture: string;
+    /** Optional frame from texture atlas */
+    frame?: string | number;
+    /** Tint color applied to NineSlice (0xRRGGBB) */
+    tint?: number | undefined;
+    /**
+     * Width of the left slice (in pixels of source texture)
+     * Defines the non-stretching left border/corner area
+     */
+    leftWidth: number;
+    /**
+     * Width of the right slice (in pixels of source texture)
+     * Defines the non-stretching right border/corner area
+     */
+    rightWidth: number;
+    /**
+     * Height of the top slice (in pixels of source texture)
+     * Optional - omit for 3-slice mode (horizontal only)
+     */
+    topHeight?: number;
+    /**
+     * Height of the bottom slice (in pixels of source texture)
+     * Optional - omit for 3-slice mode (horizontal only)
+     */
+    bottomHeight?: number;
+    /** Children are not supported for NineSlice component */
+    children?: ChildrenType;
+}
+/**
+ * NineSlice component
+ * Displays scalable 9-slice textures with preserved corners
+ *
+ * @example
+ * ```tsx
+ * // Basic 9-slice panel
+ * <NineSlice
+ *   texture="ui"
+ *   frame="panel"
+ *   width={300}
+ *   height={200}
+ *   leftWidth={20}
+ *   rightWidth={20}
+ *   topHeight={20}
+ *   bottomHeight={20}
+ * />
+ *
+ * // 3-slice horizontal bar (no vertical slicing)
+ * <NineSlice
+ *   texture="ui"
+ *   frame="bar"
+ *   width={400}
+ *   height={60}
+ *   leftWidth={15}
+ *   rightWidth={15}
+ * />
+ *
+ * // Tinted panel
+ * <NineSlice
+ *   texture="ui"
+ *   frame="button"
+ *   width={250}
+ *   height={100}
+ *   leftWidth={14}
+ *   rightWidth={14}
+ *   topHeight={14}
+ *   bottomHeight={14}
+ *   tint={0xff6600}
+ * />
+ * ```
+ */
+export declare function NineSlice(props: NineSliceProps): any;
+//# sourceMappingURL=NineSlice.d.ts.map

package/dist/components/custom/NineSlice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NineSlice.d.ts","sourceRoot":"","sources":["../../../src/components/custom/NineSlice.tsx"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B;;;GAGG;AACH,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAA;AAChC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGhF,OAAO,KAAK,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEtE;;;GAGG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC,EACzD,WAAW,EACX,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,gBAAgB,GAAG,YAAY,GAAG,KAAK,GAAG,UAAU,CAAC,EACrF,qBAAqB,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC;IACrD,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAA;IAEf,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEvB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAEzB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAA;IAEjB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,YAAY,CAAA;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,OAQ9C"}

package/dist/components/custom/NineSliceButton.d.ts

@@ -0,0 +1,128 @@
+import { ViewProps } from '..';
+import { EffectDefinition } from '../../effects';
+/**
+ * Props for NineSliceButton component
+ *
+ * @remarks
+ * This component creates a button with a NineSlice background and a content area.
+ * The content area is automatically sized to exclude the slice borders.
+ *
+ * **IMPORTANT - Atlas/Texture Configuration:**
+ *
+ * The slice dimensions (leftWidth, rightWidth, topHeight, bottomHeight) must match
+ * the actual design of your texture asset in the texture atlas. These values define
+ * which parts of the source image are the "corners" and "edges" vs the "center".
+ *
+ * **Things to consider:**
+ * - Inspect your texture atlas to determine the correct slice values
+ * - The slice values are in pixels of the SOURCE texture, not the scaled button
+ * - Sum of leftWidth + rightWidth should be less than the source texture width
+ * - Sum of topHeight + bottomHeight should be less than the source texture height
+ * - Width and height props define the FINAL size of the button after scaling
+ * - The center area will stretch, but corners and edges maintain their size
+ *
+ * @example
+ * ```tsx
+ * // For a button texture that is 64x32 in the atlas with 8px corners:
+ * <NineSliceButton
+ *   texture="ui"
+ *   frame="button-green"
+ *   width={200}          // Final button width
+ *   height={80}          // Final button height
+ *   leftWidth={8}        // Left edge is 8px in source texture
+ *   rightWidth={8}       // Right edge is 8px in source texture
+ *   topHeight={8}        // Top edge is 8px in source texture
+ *   bottomHeight={8}     // Bottom edge is 8px in source texture
+ *   onClick={() => console.log('clicked')}
+ * >
+ *   <Text text="Click Me" />
+ * </NineSliceButton>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Horizontal-only (3-slice) button - omit topHeight/bottomHeight:
+ * <NineSliceButton
+ *   texture="ui"
+ *   frame="progress-bar"
+ *   width={300}
+ *   height={40}
+ *   leftWidth={10}
+ *   rightWidth={10}
+ * >
+ *   <Text text="Progress: 75%" />
+ * </NineSliceButton>
+ * ```
+ */
+export interface NineSliceButtonProps extends ViewProps, EffectDefinition {
+    /**
+     * Texture key from the loaded texture atlas
+     * Must be loaded before use (e.g., in a preload scene)
+     */
+    texture: string;
+    /**
+     * Frame name or index within the texture atlas
+     * Optional if the texture is not an atlas
+     */
+    frame?: string | number;
+    /**
+     * Width of the left slice in pixels of the SOURCE texture
+     * This defines the non-stretching left border/corner area
+     */
+    leftWidth: number;
+    /**
+     * Width of the right slice in pixels of the SOURCE texture
+     * This defines the non-stretching right border/corner area
+     */
+    rightWidth: number;
+    /**
+     * Height of the top slice in pixels of the SOURCE texture
+     * This defines the non-stretching top border/corner area
+     * Optional - omit for 3-slice (horizontal only) mode
+     */
+    topHeight?: number;
+    /**
+     * Height of the bottom slice in pixels of the SOURCE texture
+     * This defines the non-stretching bottom border/corner area
+     * Optional - omit for 3-slice (horizontal only) mode
+     */
+    bottomHeight?: number;
+    /**
+     * Click handler for button interaction
+     */
+    onClick?: () => void;
+    disabled?: boolean;
+}
+/**
+ * NineSliceButton component - creates a scalable button with NineSlice background
+ *
+ * This is a convenience wrapper around NineSlice + View that handles:
+ * - Stack layout for background and content
+ * - Automatic inner content area calculation
+ * - Click interaction handling
+ * - Proper content alignment
+ *
+ * @param props - NineSliceButton properties
+ * @returns JSX element representing a button with NineSlice background
+ *
+ * @example
+ * ```tsx
+ * <NineSliceButton
+ *   texture="ui"
+ *   frame="button-blue"
+ *   width={250}
+ *   height={100}
+ *   leftWidth={20}
+ *   rightWidth={20}
+ *   topHeight={15}
+ *   bottomHeight={15}
+ *   onClick={() => console.log('Button clicked!')}
+ *   alignItems="center"
+ *   justifyContent="center"
+ * >
+ *   <Text text="Click Me!" style={{ fontSize: 24 }} />
+ * </NineSliceButton>
+ * ```
+ */
+export declare function NineSliceButton(props: NineSliceButtonProps): any;
+//# sourceMappingURL=NineSliceButton.d.ts.map

package/dist/components/custom/NineSliceButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NineSliceButton.d.ts","sourceRoot":"","sources":["../../../src/components/custom/NineSliceButton.tsx"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,IAAI,CAAA;AACnC,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAA;AAMtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,gBAAgB;IACvE;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEvB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAA;IAEjB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAA;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAGpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,OAgG1D"}

package/dist/components/custom/Portal.d.ts

@@ -0,0 +1,43 @@
+import { ChildrenType } from '../../types';
+/**
+ * Props for Portal component
+ */
+export interface PortalProps {
+    /** Unique key for VDOM identification */
+    key?: string | number | undefined;
+    /** Content to render in portal */
+    children: ChildrenType;
+    /** Z-depth for portal (higher = foreground) */
+    depth?: number;
+    /** Optional custom portal ID */
+    id?: string;
+    /** Block events (click-through and scrolling) - default: true */
+    blockEvents?: boolean;
+}
+/**
+ * Portal component
+ * Renders child VNode into a separate container tree at specified depth.
+ * Automatically injects event blockers to prevent click-through and scrolling.
+ *
+ * @example
+ * ```tsx
+ * // Basic portal (automatically blocks events in content area)
+ * <Portal depth={1000}>
+ *   <View>Overlay content</View>
+ * </Portal>
+ *
+ * // Non-blocking portal (allows click-through)
+ * <Portal depth={500} blockEvents={false}>
+ *   <View>Info overlay - clickable background</View>
+ * </Portal>
+ *
+ * // Portal with custom event handling (original handlers are preserved)
+ * <Portal depth={1000}>
+ *   <View onTouch={(e) => console.log('clicked')}>
+ *     Content
+ *   </View>
+ * </Portal>
+ * ```
+ */
+export declare function Portal(props: PortalProps): null;
+//# sourceMappingURL=Portal.d.ts.map

package/dist/components/custom/Portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../src/components/custom/Portal.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAG/C;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,kCAAkC;IAClC,QAAQ,EAAE,YAAY,CAAA;IACtB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gCAAgC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,QAsGxC"}

package/dist/components/custom/Portal.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Portal.test.d.ts.map

package/dist/components/custom/Portal.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.test.d.ts","sourceRoot":"","sources":["../../../src/components/custom/Portal.test.tsx"],"names":[],"mappings":""}

package/dist/components/custom/RadioButton.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Props for RadioButton component
+ */
+export interface RadioButtonProps {
+    /** Unique key for VDOM identification */
+    key?: string | number | undefined;
+    /** Label text for the radio button */
+    label: string;
+    /** Whether this radio button is selected */
+    selected?: boolean;
+    /** Callback when radio button is clicked */
+    onClick?: () => void;
+}
+/**
+ * RadioButton component - displays a selectable circle with label
+ * @param props - RadioButton properties
+ * @returns RadioButton JSX element
+ */
+export declare function RadioButton(props: RadioButtonProps): any;
+//# sourceMappingURL=RadioButton.d.ts.map

package/dist/components/custom/RadioButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/custom/RadioButton.tsx"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,OAuClD"}

package/dist/components/custom/RadioGroup.d.ts

@@ -0,0 +1,33 @@
+/** @jsxImportSource ../.. */
+/**
+ * RadioGroup component - Manages a group of radio buttons with single-selection logic
+ */
+/**
+ * Option item for RadioGroup
+ */
+export interface RadioGroupOption {
+    /** Unique value for this option */
+    value: string;
+    /** Display label for this option */
+    label: string;
+}
+/**
+ * Props for RadioGroup component
+ */
+export interface RadioGroupProps {
+    /** Array of options to display */
+    options: RadioGroupOption[];
+    /** Currently selected value */
+    value?: string;
+    /** Callback when selection changes */
+    onChange?: (value: string) => void;
+    /** Layout direction (default: 'column') */
+    direction?: 'row' | 'column';
+}
+/**
+ * RadioGroup component - displays a group of radio buttons with single-selection
+ * @param props - RadioGroup properties
+ * @returns RadioGroup JSX element
+ */
+export declare function RadioGroup(props: RadioGroupProps): any;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/custom/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/custom/RadioGroup.tsx"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B;;GAEG;AAQH;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,kCAAkC;IAClC,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,2CAA2C;IAC3C,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,OAqDhD"}

package/dist/components/custom/RefOriginView.d.ts

@@ -0,0 +1,45 @@
+import { ChildrenType } from '../../types';
+import { ViewProps } from '..';
+/**
+ * Extended ViewProps with origin support
+ */
+export interface RefOriginViewProps extends Omit<ViewProps, 'x' | 'y' | 'children'> {
+    /**
+     * Origin X for rotation and scale (0 = left, 0.5 = center, 1 = right)
+     * @default 0.5
+     */
+    originX?: number;
+    /**
+     * Origin Y for rotation and scale (0 = top, 0.5 = center, 1 = bottom)
+     * @default 0.5
+     */
+    originY?: number;
+    /**
+     * X position of the view
+     */
+    x?: number;
+    /**
+     * Y position of the view
+     */
+    y?: number;
+    /**
+     * Children nodes.
+     */
+    children?: ChildrenType;
+}
+/**
+ * RefOriginView component - ref-based transforms around custom origin point
+ *
+ * Returns ref to middle View positioned at the origin point, enabling
+ * imperative transformations. Calculates actual dimensions after layout.
+ *
+ * Uses nested View structure internally:
+ * - Outer View: Defines bounding box and position
+ * - Middle View: Positioned at origin point, receives ref (transform target)
+ * - Inner View: Contains actual content, offset by negative padding
+ *
+ * @param props - RefOriginView props
+ * @returns JSX element
+ */
+export declare function RefOriginView({ originX, originY, x, y, width, height, ref, padding, children, ...viewProps }: RefOriginViewProps): any;
+//# sourceMappingURL=RefOriginView.d.ts.map

package/dist/components/custom/RefOriginView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefOriginView.d.ts","sourceRoot":"","sources":["../../../src/components/custom/RefOriginView.tsx"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,IAAI,CAAA;AAInC;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC;IACjF;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAA;CACxB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAa,EACb,OAAa,EACb,CAAK,EACL,CAAK,EACL,KAAK,EACL,MAAM,EACN,GAAG,EACH,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,OA4DpB"}

package/dist/components/custom/ScrollSlider.d.ts

@@ -0,0 +1,36 @@
+/** Size variants for the scroll slider */
+export type SliderSize = 'large' | 'medium' | 'small' | 'tiny' | undefined;
+/**
+ * Calculate slider dimensions based on size variant and theme
+ * @param size - Size variant
+ * @returns Calculated dimensions
+ */
+export declare function calculateSliderSize(size: SliderSize): {
+    border: number;
+    outer: number;
+    dimension: number;
+};
+/**
+ * Props for ScrollSlider component
+ */
+export interface ScrollSliderProps {
+    /** Direction of the slider */
+    direction: 'vertical' | 'horizontal';
+    /** Whether to a size variant, default is medium */
+    size?: SliderSize;
+    /** Current scroll position in pixels */
+    scrollPosition: number;
+    /** Viewport size in pixels */
+    viewportSize: number;
+    /** Content size in pixels */
+    contentSize: number;
+    /** Callback when slider is scrolled, returns new scroll position in pixels */
+    onScroll: (scrollPosition: number) => void;
+}
+/**
+ * ScrollSlider component providing slider functionality for ScrollView
+ * @param props - ScrollSlider properties
+ * @returns JSX element
+ */
+export declare function ScrollSlider(props: ScrollSliderProps): any;
+//# sourceMappingURL=ScrollSlider.d.ts.map

package/dist/components/custom/ScrollSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollSlider.d.ts","sourceRoot":"","sources":["../../../src/components/custom/ScrollSlider.tsx"],"names":[],"mappings":"AAWA,0CAA0C;AAC1C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAE1E;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,UAAU;;;;EAQnD;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,8BAA8B;IAC9B,SAAS,EAAE,UAAU,GAAG,YAAY,CAAA;IACpC,mDAAmD;IACnD,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wCAAwC;IACxC,cAAc,EAAE,MAAM,CAAA;IACtB,8BAA8B;IAC9B,YAAY,EAAE,MAAM,CAAA;IACpB,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,8EAA8E;IAC9E,QAAQ,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3C;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,OAyHpD"}

package/dist/components/custom/ScrollView.d.ts

@@ -0,0 +1,48 @@
+import { ViewProps } from '..';
+import { SliderSize } from './ScrollSlider';
+/**
+ * Scroll information data
+ */
+export interface ScrollInfo {
+    /** Current horizontal scroll position */
+    dx: number;
+    /** Current vertical scroll position */
+    dy: number;
+    /** Viewport width */
+    viewportWidth: number;
+    /** Viewport height */
+    viewportHeight: number;
+    /** Content width */
+    contentWidth: number;
+    /** Content height */
+    contentHeight: number;
+    /** Maximum horizontal scroll */
+    maxScrollX: number;
+    /** Maximum vertical scroll */
+    maxScrollY: number;
+}
+/**
+ * Props for ScrollView component
+ */
+export interface ScrollViewProps extends ViewProps {
+    /** Whether to show the vertical scroll slider (default: auto) */
+    showVerticalSlider?: boolean | 'auto' | undefined;
+    /** Whether to show the vertical scroll slider (default: auto) */
+    showHorizontalSlider?: boolean | 'auto' | undefined;
+    /** Size variant for the scroll sliders */
+    sliderSize?: SliderSize;
+    /** Initial scroll position */
+    scroll?: {
+        dx: number;
+        dy: number;
+    };
+    /** Callback when scroll information changes */
+    onScrollInfoChange?: (info: ScrollInfo) => void;
+}
+/**
+ * ScrollView component providing a scrollable area with an optional vertical slider
+ * @param props - ScrollView properties
+ * @returns JSX element
+ */
+export declare function ScrollView(props: ScrollViewProps): any;
+//# sourceMappingURL=ScrollView.d.ts.map

package/dist/components/custom/ScrollView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../src/components/custom/ScrollView.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,IAAI,CAAA;AAKnC,OAAO,EAAqC,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAEnF;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAA;IACV,qBAAqB;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,sBAAsB;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,oBAAoB;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,qBAAqB;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,gCAAgC;IAChC,UAAU,EAAE,MAAM,CAAA;IAClB,8BAA8B;IAC9B,UAAU,EAAE,MAAM,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;IACjD,iEAAiE;IACjE,oBAAoB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;IACnD,0CAA0C;IAC1C,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,8BAA8B;IAC9B,MAAM,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IACnC,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;CAChD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,OAwQhD"}