components-test-pb 0.0.1

package/dist/Components/Text/Text.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TextProps } from './Text.types.js';
+export declare const Text: FC<TextProps>;

package/dist/Components/Text/Text.js

@@ -0,0 +1,8 @@
+import { useText } from './useText.js';
+import { renderText } from './renderText.js';
+import { useTextStyles } from './useTextStyles.styles.js';
+export const Text = (props) => {
+    const state = useText(props);
+    useTextStyles(state);
+    return renderText(state);
+};

package/dist/Components/Text/Text.types.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+export type TextSlots = {
+    root: Slot<'span', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre' | 'strong' | 'b' | 'em' | 'i'>;
+};
+export type TextProps = ComponentProps<TextSlots> & {
+    font?: 'base' | 'monospace' | 'numeric';
+    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
+    weight?: 'regular' | 'medium' | 'semibold' | 'bold';
+};
+export type TextPresetProps = Omit<TextProps, 'font' | 'size' | 'weight'>;
+export type TextState = ComponentState<TextSlots> & Required<Pick<TextProps, 'font' | 'size' | 'weight'>>;

package/dist/Components/Text/Text.types.js

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

package/dist/Components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export type { TextSlots, TextPresetProps, TextState } from './Text.types.js';
+export { useText } from './useText.js';

package/dist/Components/Text/index.js

@@ -0,0 +1 @@
+export { useText } from './useText.js';

package/dist/Components/Text/renderText.d.ts

@@ -0,0 +1,3 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TextState } from './Text.types.js';
+export declare const renderText: (state: TextState) => Element;

package/dist/Components/Text/renderText.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+export const renderText = (state) => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+    return _jsx(Root, { ...rootProps });
+};

package/dist/Components/Text/useText.d.ts

@@ -0,0 +1,2 @@
+import type { TextProps, TextState } from './Text.types.js';
+export declare const useText: (props: TextProps) => TextState;

package/dist/Components/Text/useText.js

@@ -0,0 +1,10 @@
+export const useText = (props) => {
+    const { font, size, weight, ...rest } = props;
+    return {
+        font: font ?? 'base',
+        size: size ?? 300,
+        weight: weight ?? 'regular',
+        components: { root: rest.as ?? 'span' },
+        root: { as: rest.as ?? 'span', ...rest },
+    };
+};

package/dist/Components/Text/useTextStyles.styles.d.ts

@@ -0,0 +1,4 @@
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TextSlots, TextState } from './Text.types.js';
+export declare const textClassNames: SlotClassNames<TextSlots>;
+export declare const useTextStyles: (state: TextState) => TextState;

package/dist/Components/Text/useTextStyles.styles.js

@@ -0,0 +1,42 @@
+import { makeStyles, mergeClasses } from 'css-engine-test-pb';
+export const textClassNames = {
+    root: 'Text'
+};
+const useStyles = makeStyles({
+    root: {
+        fontFamily: 'Neue Montreal',
+        fontSize: '14px',
+        lineHeight: '20px',
+        fontWeight: 450,
+        display: 'inline',
+        whiteSpace: 'normal',
+        overflow: 'visible',
+        textOverflow: 'clip'
+    },
+    size100: {},
+    size200: {},
+    size300: {},
+    size400: {},
+    size500: {},
+    size600: {},
+    size700: {},
+    size800: {},
+    size900: {},
+    size1000: {},
+    monospace: {},
+    numeric: {},
+    weightMedium: {
+        fontWeight: 530
+    },
+    weightSemibold: {
+        fontWeight: 700
+    },
+    weightBold: {
+        fontWeight: 800
+    }
+});
+export const useTextStyles = (state) => {
+    const styles = useStyles();
+    state.root.className = mergeClasses(textClassNames.root, styles.root, state.size === 100 && styles.size100, state.size === 200 && styles.size200, state.size === 300 && styles.size300, state.size === 400 && styles.size400, state.size === 500 && styles.size500, state.size === 600 && styles.size600, state.size === 700 && styles.size700, state.size === 800 && styles.size800, state.size === 900 && styles.size900, state.size === 1000 && styles.size1000, state.font === 'monospace' && styles.monospace, state.font === 'numeric' && styles.numeric, state.weight === 'medium' && styles.weightMedium, state.weight === 'semibold' && styles.weightSemibold, state.weight === 'bold' && styles.weightBold);
+    return state;
+};

package/dist/Types/compose/index.d.ts

@@ -0,0 +1 @@
+export type { SlotShorthandValue, SlotPropsRecord, UnknownSlotProps, Slot, IsSingleton, AsIntrinsicElement, ExtractSlotProps, ComponentProps, ComponentState, SlotClassNames, } from './types.js';

package/dist/Types/compose/index.js

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

package/dist/Types/compose/types.d.ts

@@ -0,0 +1,34 @@
+import type { ChildNode, ComponentType, IntrinsicElementKeys, IntrinsicElementProps, PropsWithoutChildren, ReplaceNullWithUndefined, HTMLAttributes, Element } from '../utils/types.js';
+export type SlotShorthandValue = Element | string | number;
+export type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;
+export type UnknownSlotProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style'> & {
+    as?: IntrinsicElementKeys;
+    children?: ChildNode;
+};
+type WithSlotShorthandValue<Props> = Props | ('children' extends keyof Props ? Extract<SlotShorthandValue, Props['children']> : never);
+type EmptyIntrinsicElements = 'area' | 'base' | 'br' | 'col' | 'embed' | 'hr' | 'img' | 'input' | 'link' | 'meta' | 'param' | 'source' | 'track' | 'wbr';
+type SlotIntrinsicElementProps<Type extends IntrinsicElementKeys> = Type extends EmptyIntrinsicElements ? PropsWithoutChildren<IntrinsicElementProps<Type>> : IntrinsicElementProps<Type>;
+export type Slot<Type extends IntrinsicElementKeys | ComponentType<any> | UnknownSlotProps, AlternateAs extends IntrinsicElementKeys = never> = IsSingleton<Extract<Type, string>> extends true ? WithSlotShorthandValue<Type extends IntrinsicElementKeys ? {
+    as?: Type;
+} & SlotIntrinsicElementProps<Type> : Type extends ComponentType<infer Props> ? Props extends UnknownSlotProps ? Props : Props : Type> | (AlternateAs extends unknown ? {
+    as: AlternateAs;
+} & SlotIntrinsicElementProps<AlternateAs> : never) | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
+export type IsSingleton<T extends string> = {
+    [K in T]: Exclude<T, K> extends never ? true : false;
+}[T];
+export type AsIntrinsicElement<As extends IntrinsicElementKeys> = {
+    as?: As;
+};
+export type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefined>;
+export type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> = Omit<Slots, Primary & 'root'> & ExtractSlotProps<Slots[Primary]>;
+export type ComponentState<Slots extends SlotPropsRecord> = {
+    components: {
+        [Key in keyof Slots]-?: IntrinsicElementKeys | ComponentType;
+    };
+} & {
+    [Key in keyof Slots]: ReplaceNullWithUndefined<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>;
+};
+export type SlotClassNames<Slots> = {
+    [SlotName in keyof Slots]-?: string;
+};
+export {};

package/dist/Types/compose/types.js

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

package/dist/Types/utils/index.d.ts

@@ -0,0 +1 @@
+export type { ElementProps, Element, ElementChild, FC, HTMLAttributes, CSSProperties, DistributiveOmit, DistributivePick, UnionToIntersection, ReplaceNullWithUndefined, PropsWithoutChildren, FunctionComponent, ComponentType, ChildNode, AnchorNativeProps, ButtonNativeProps, FormNativeProps, InputNativeProps, TextareaNativeProps, SelectNativeProps, ImgNativeProps, LabelNativeProps, IntrinsicElementKeys, IntrinsicElementProps, } from './types.js';

package/dist/Types/utils/index.js

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

package/dist/Types/utils/types.d.ts

@@ -0,0 +1,168 @@
+export interface ElementProps {
+    children?: ElementChild | ElementChild[];
+    [key: string]: any;
+}
+export interface Element {
+    $$typeof: symbol;
+    type: string | Function | symbol;
+    props: ElementProps;
+    key: string | null;
+}
+export type ElementChild = Element | string | number | boolean | null | undefined | (() => any);
+export type FC<P = {}> = (props: P) => Element | null;
+export interface CSSProperties {
+    [key: string]: string | number;
+}
+export interface HTMLAttributes<T = HTMLElement> {
+    className?: string;
+    id?: string;
+    style?: CSSProperties;
+    title?: string;
+    lang?: string;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    hidden?: boolean;
+    tabIndex?: number;
+    class?: never;
+    [key: `data-${string}`]: string | number | boolean | undefined;
+    role?: string;
+    [key: `aria-${string}`]: string | number | boolean | undefined;
+    onClick?: (event: MouseEvent) => void;
+    onDoubleClick?: (event: MouseEvent) => void;
+    onMouseDown?: (event: MouseEvent) => void;
+    onMouseUp?: (event: MouseEvent) => void;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onMouseLeave?: (event: MouseEvent) => void;
+    onMouseMove?: (event: MouseEvent) => void;
+    onMouseOver?: (event: MouseEvent) => void;
+    onMouseOut?: (event: MouseEvent) => void;
+    onChange?: (event: Event) => void;
+    onInput?: (event: Event) => void;
+    onSubmit?: (event: Event) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    onKeyPress?: (event: KeyboardEvent) => void;
+    onScroll?: (event: Event) => void;
+    onWheel?: (event: WheelEvent) => void;
+    onDrag?: (event: DragEvent) => void;
+    onDragEnd?: (event: DragEvent) => void;
+    onDragEnter?: (event: DragEvent) => void;
+    onDragLeave?: (event: DragEvent) => void;
+    onDragOver?: (event: DragEvent) => void;
+    onDragStart?: (event: DragEvent) => void;
+    onDrop?: (event: DragEvent) => void;
+    onTouchStart?: (event: TouchEvent) => void;
+    onTouchMove?: (event: TouchEvent) => void;
+    onTouchEnd?: (event: TouchEvent) => void;
+    onTouchCancel?: (event: TouchEvent) => void;
+    children?: ElementChild | ElementChild[];
+}
+export type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : T;
+export type DistributivePick<T, K> = T extends unknown ? Pick<T, K & keyof T> : never;
+export type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
+export type ReplaceNullWithUndefined<T> = T extends null ? Exclude<T, null> | undefined : T;
+export type PropsWithoutChildren<P> = 'children' extends keyof P ? DistributiveOmit<P, 'children'> : P;
+export interface FunctionComponent<P> {
+    (props: P): Element | null;
+    displayName?: string;
+}
+export type ComponentType<P = {}> = FunctionComponent<P>;
+export type ChildNode = ElementChild | ElementChild[];
+export interface AnchorNativeProps extends HTMLAttributes<HTMLAnchorElement> {
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    rel?: string;
+    download?: string | boolean;
+    hrefLang?: string;
+    type?: string;
+}
+export interface ButtonNativeProps extends HTMLAttributes<HTMLButtonElement> {
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    value?: string;
+    autoFocus?: boolean;
+    form?: string;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+}
+export interface FormNativeProps extends HTMLAttributes<HTMLFormElement> {
+    action?: string;
+    method?: 'get' | 'post';
+    encType?: string;
+    target?: string;
+    noValidate?: boolean;
+    autoComplete?: 'on' | 'off';
+}
+export interface InputNativeProps extends HTMLAttributes<HTMLInputElement> {
+    accept?: string;
+    alt?: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    capture?: boolean | string;
+    checked?: boolean;
+    disabled?: boolean;
+    form?: string;
+    max?: number | string;
+    maxLength?: number;
+    min?: number | string;
+    minLength?: number;
+    multiple?: boolean;
+    name?: string;
+    pattern?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    size?: number;
+    src?: string;
+    step?: number | string;
+    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'checkbox' | 'radio' | 'file' | 'submit' | 'reset' | 'button' | 'hidden' | 'image' | 'color' | 'range';
+    value?: string | number;
+}
+export interface TextareaNativeProps extends HTMLAttributes<HTMLTextAreaElement> {
+    autoComplete?: string;
+    autoFocus?: boolean;
+    cols?: number;
+    disabled?: boolean;
+    form?: string;
+    maxLength?: number;
+    minLength?: number;
+    name?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    rows?: number;
+    value?: string;
+    wrap?: 'hard' | 'soft' | 'off';
+}
+export interface SelectNativeProps extends HTMLAttributes<HTMLSelectElement> {
+    autoComplete?: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    form?: string;
+    multiple?: boolean;
+    name?: string;
+    required?: boolean;
+    size?: number;
+    value?: string | string[];
+}
+export interface ImgNativeProps extends HTMLAttributes<HTMLImageElement> {
+    alt?: string;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    decoding?: 'async' | 'auto' | 'sync';
+    height?: number | string;
+    loading?: 'eager' | 'lazy';
+    sizes?: string;
+    src?: string;
+    srcSet?: string;
+    width?: number | string;
+}
+export interface LabelNativeProps extends HTMLAttributes<HTMLLabelElement> {
+    htmlFor?: string;
+    form?: string;
+}
+export type IntrinsicElementKeys = 'a' | 'abbr' | 'address' | 'area' | 'article' | 'aside' | 'audio' | 'b' | 'base' | 'blockquote' | 'body' | 'br' | 'button' | 'canvas' | 'caption' | 'cite' | 'code' | 'col' | 'colgroup' | 'datalist' | 'del' | 'details' | 'dialog' | 'div' | 'em' | 'fieldset' | 'figcaption' | 'figure' | 'footer' | 'form' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'head' | 'header' | 'hr' | 'html' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'legend' | 'li' | 'link' | 'main' | 'mark' | 'menu' | 'meta' | 'meter' | 'nav' | 'ol' | 'optgroup' | 'option' | 'output' | 'p' | 'picture' | 'pre' | 'progress' | 'q' | 's' | 'script' | 'section' | 'select' | 'small' | 'source' | 'span' | 'strong' | 'style' | 'sub' | 'summary' | 'sup' | 'svg' | 'table' | 'tbody' | 'td' | 'template' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'title' | 'tr' | 'track' | 'u' | 'ul' | 'video' | 'wbr' | 'circle' | 'ellipse' | 'line' | 'path' | 'polygon' | 'polyline' | 'rect' | 'g' | 'defs';
+export type IntrinsicElementProps<Tag extends IntrinsicElementKeys> = Tag extends 'a' ? AnchorNativeProps : Tag extends 'button' ? ButtonNativeProps : Tag extends 'form' ? FormNativeProps : Tag extends 'input' ? InputNativeProps : Tag extends 'textarea' ? TextareaNativeProps : Tag extends 'select' ? SelectNativeProps : Tag extends 'img' ? ImgNativeProps : Tag extends 'label' ? LabelNativeProps : HTMLAttributes<HTMLElement>;

package/dist/Types/utils/types.js

@@ -0,0 +1,2 @@
+// ---- Core framework types (defined here, not imported from framework) ----
+export {};

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "components-test-pb",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "jsx-framework-test-pb": "latest",
+    "css-engine-test-pb": "latest",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "jsx-framework-test-pb": "*",
+    "css-engine-test-pb": "*"
+  }
+}

package/src/Components/Text/Text.tsx

@@ -0,0 +1,13 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TextProps } from './Text.types.js';
+import { useText } from './useText.js';
+import { renderText } from './renderText.js';
+import { useTextStyles } from './useTextStyles.styles.js';
+
+export const Text: FC<TextProps> = (props) => {
+    const state = useText(props);
+
+    useTextStyles(state);
+
+    return renderText(state);
+};

package/src/Components/Text/Text.types.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+
+export type TextSlots = {
+    root: Slot<'span', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre' | 'strong' | 'b' | 'em' | 'i'>;
+};
+
+export type TextProps = ComponentProps<TextSlots> & {
+    font?: 'base' | 'monospace' | 'numeric';
+    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
+    weight?: 'regular' | 'medium' | 'semibold' | 'bold';
+}
+
+export type TextPresetProps = Omit<TextProps, 'font' | 'size' | 'weight'>;
+
+export type TextState = ComponentState<TextSlots> &
+    Required<
+        Pick<
+            TextProps,
+            'font' | 'size' | 'weight'
+        >
+    >;

package/src/Components/Text/index.ts

@@ -0,0 +1,7 @@
+export type {
+    TextSlots,
+    TextPresetProps,
+    TextState
+} from './Text.types.js';
+
+export { useText } from './useText.js';

package/src/Components/Text/renderText.tsx

@@ -0,0 +1,9 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TextState } from './Text.types.js';
+
+export const renderText = (state: TextState): Element => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+
+    return <Root {...rootProps} />;
+};

package/src/Components/Text/useText.ts

@@ -0,0 +1,16 @@
+import type { TextProps, TextState } from './Text.types.js';
+
+
+export const useText = (props: TextProps): TextState => {
+    const { font, size, weight, ...rest } = props;
+
+    return {
+        font: font ?? 'base',
+        size: size ?? 300,
+        weight: weight ?? 'regular',
+
+        components: { root: rest.as ?? 'span' },
+
+        root: { as: rest.as ?? 'span', ...rest } as TextState['root'],
+    };
+};

package/src/Components/Text/useTextStyles.styles.ts

@@ -0,0 +1,93 @@
+import { makeStyles, mergeClasses } from 'css-engine-test-pb';
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TextSlots, TextState } from './Text.types.js';
+
+
+export const textClassNames: SlotClassNames<TextSlots> = {
+    root: 'Text'
+};
+
+const useStyles = makeStyles({
+    root: {
+        fontFamily: 'Neue Montreal',
+        fontSize: '14px',
+        lineHeight: '20px',
+        fontWeight: 450,
+        display: 'inline',
+        whiteSpace: 'normal',
+        overflow: 'visible',
+        textOverflow: 'clip'
+    },
+    size100: {
+
+    },
+    size200: {
+
+    },
+    size300: {
+
+    },
+    size400: {
+
+    },
+    size500: {
+
+    },
+    size600: {
+
+    },
+    size700: {
+
+    },
+    size800: {
+
+    },
+    size900: {
+
+    },
+    size1000: {
+
+    },
+    monospace: {
+
+    },
+    numeric: {
+
+    },
+    weightMedium: {
+        fontWeight: 530
+    },
+    weightSemibold: {
+        fontWeight: 700
+    },
+    weightBold: {
+        fontWeight: 800
+    }
+});
+
+export const useTextStyles = (state: TextState): TextState => {
+
+    const styles = useStyles();
+
+    state.root.className = mergeClasses(
+        textClassNames.root,
+        styles.root,
+        state.size === 100 && styles.size100,
+        state.size === 200 && styles.size200,
+        state.size === 300 && styles.size300,
+        state.size === 400 && styles.size400,
+        state.size === 500 && styles.size500,
+        state.size === 600 && styles.size600,
+        state.size === 700 && styles.size700,
+        state.size === 800 && styles.size800,
+        state.size === 900 && styles.size900,
+        state.size === 1000 && styles.size1000,
+        state.font === 'monospace' && styles.monospace,
+        state.font === 'numeric' && styles.numeric,
+        state.weight === 'medium' && styles.weightMedium,
+        state.weight === 'semibold' && styles.weightSemibold,
+        state.weight === 'bold' && styles.weightBold
+    );
+
+    return state;
+}

package/src/Types/compose/index.ts

@@ -0,0 +1,12 @@
+export type {
+    SlotShorthandValue,
+    SlotPropsRecord,
+    UnknownSlotProps,
+    Slot,
+    IsSingleton,
+    AsIntrinsicElement,
+    ExtractSlotProps,
+    ComponentProps,
+    ComponentState,
+    SlotClassNames,
+} from './types.js';

package/src/Types/compose/types.ts

@@ -0,0 +1,87 @@
+import type {
+    ChildNode,
+    ComponentType,
+    IntrinsicElementKeys,
+    IntrinsicElementProps,
+    PropsWithoutChildren,
+    ReplaceNullWithUndefined,
+    HTMLAttributes,
+    Element,
+} from '../utils/types.js';
+
+export type SlotShorthandValue = Element | string | number;
+
+export type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;
+
+export type UnknownSlotProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style'> & {
+    as?: IntrinsicElementKeys;
+    children?: ChildNode;
+};
+
+type WithSlotShorthandValue<Props> =
+    | Props
+    | ('children' extends keyof Props ? Extract<SlotShorthandValue, Props['children']> : never);
+
+type EmptyIntrinsicElements =
+    | 'area'
+    | 'base'
+    | 'br'
+    | 'col'
+    | 'embed'
+    | 'hr'
+    | 'img'
+    | 'input'
+    | 'link'
+    | 'meta'
+    | 'param'
+    | 'source'
+    | 'track'
+    | 'wbr';
+
+type SlotIntrinsicElementProps<Type extends IntrinsicElementKeys> = Type extends EmptyIntrinsicElements
+    ? PropsWithoutChildren<IntrinsicElementProps<Type>>
+    : IntrinsicElementProps<Type>;
+
+export type Slot<
+    Type extends IntrinsicElementKeys | ComponentType<any> | UnknownSlotProps,
+    AlternateAs extends IntrinsicElementKeys = never,
+> = IsSingleton<Extract<Type, string>> extends true
+    ?
+    | WithSlotShorthandValue<
+        Type extends IntrinsicElementKeys
+        ? { as?: Type } & SlotIntrinsicElementProps<Type>
+        : Type extends ComponentType<infer Props>
+        ? Props extends UnknownSlotProps
+        ? Props
+        : Props
+        : Type
+    >
+    | (AlternateAs extends unknown
+        ? { as: AlternateAs } & SlotIntrinsicElementProps<AlternateAs>
+        : never)
+    | null
+    : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
+
+export type IsSingleton<T extends string> = { [K in T]: Exclude<T, K> extends never ? true : false }[T];
+
+export type AsIntrinsicElement<As extends IntrinsicElementKeys> = { as?: As };
+
+export type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefined>;
+
+export type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> =
+    Omit<Slots, Primary & 'root'> &
+    ExtractSlotProps<Slots[Primary]>;
+
+export type ComponentState<Slots extends SlotPropsRecord> = {
+    components: {
+        [Key in keyof Slots]-?: IntrinsicElementKeys | ComponentType;
+    };
+} & {
+    [Key in keyof Slots]: ReplaceNullWithUndefined<
+        Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>
+    >;
+};
+
+export type SlotClassNames<Slots> = {
+    [SlotName in keyof Slots]-?: string;
+};

package/src/Types/utils/index.ts

@@ -0,0 +1,30 @@
+export type {
+    ElementProps,
+    Element,
+    ElementChild,
+    FC,
+    HTMLAttributes,
+    CSSProperties,
+
+    DistributiveOmit,
+    DistributivePick,
+    UnionToIntersection,
+    ReplaceNullWithUndefined,
+    PropsWithoutChildren,
+
+    FunctionComponent,
+    ComponentType,
+    ChildNode,
+
+    AnchorNativeProps,
+    ButtonNativeProps,
+    FormNativeProps,
+    InputNativeProps,
+    TextareaNativeProps,
+    SelectNativeProps,
+    ImgNativeProps,
+    LabelNativeProps,
+
+    IntrinsicElementKeys,
+    IntrinsicElementProps,
+} from './types.js';

package/src/Types/utils/types.ts

@@ -0,0 +1,223 @@
+// ---- Core framework types (defined here, not imported from framework) ----
+
+export interface ElementProps {
+    children?: ElementChild | ElementChild[];
+    [key: string]: any;
+}
+
+export interface Element {
+    $$typeof: symbol;
+    type: string | Function | symbol;
+    props: ElementProps;
+    key: string | null;
+}
+
+export type ElementChild = Element | string | number | boolean | null | undefined | (() => any);
+
+export type FC<P = {}> = (props: P) => Element | null;
+
+export interface CSSProperties {
+    [key: string]: string | number;
+}
+
+export interface HTMLAttributes<T = HTMLElement> {
+    className?: string;
+    id?: string;
+    style?: CSSProperties;
+    title?: string;
+    lang?: string;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    hidden?: boolean;
+    tabIndex?: number;
+    class?: never;
+    [key: `data-${string}`]: string | number | boolean | undefined;
+    role?: string;
+    [key: `aria-${string}`]: string | number | boolean | undefined;
+    onClick?: (event: MouseEvent) => void;
+    onDoubleClick?: (event: MouseEvent) => void;
+    onMouseDown?: (event: MouseEvent) => void;
+    onMouseUp?: (event: MouseEvent) => void;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onMouseLeave?: (event: MouseEvent) => void;
+    onMouseMove?: (event: MouseEvent) => void;
+    onMouseOver?: (event: MouseEvent) => void;
+    onMouseOut?: (event: MouseEvent) => void;
+    onChange?: (event: Event) => void;
+    onInput?: (event: Event) => void;
+    onSubmit?: (event: Event) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    onKeyPress?: (event: KeyboardEvent) => void;
+    onScroll?: (event: Event) => void;
+    onWheel?: (event: WheelEvent) => void;
+    onDrag?: (event: DragEvent) => void;
+    onDragEnd?: (event: DragEvent) => void;
+    onDragEnter?: (event: DragEvent) => void;
+    onDragLeave?: (event: DragEvent) => void;
+    onDragOver?: (event: DragEvent) => void;
+    onDragStart?: (event: DragEvent) => void;
+    onDrop?: (event: DragEvent) => void;
+    onTouchStart?: (event: TouchEvent) => void;
+    onTouchMove?: (event: TouchEvent) => void;
+    onTouchEnd?: (event: TouchEvent) => void;
+    onTouchCancel?: (event: TouchEvent) => void;
+    children?: ElementChild | ElementChild[];
+}
+
+export type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : T;
+
+export type DistributivePick<T, K> = T extends unknown ? Pick<T, K & keyof T> : never;
+
+export type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
+
+export type ReplaceNullWithUndefined<T> = T extends null ? Exclude<T, null> | undefined : T;
+
+export type PropsWithoutChildren<P> = 'children' extends keyof P ? DistributiveOmit<P, 'children'> : P;
+
+export interface FunctionComponent<P> {
+    (props: P): Element | null;
+    displayName?: string;
+}
+
+export type ComponentType<P = {}> = FunctionComponent<P>;
+
+export type ChildNode = ElementChild | ElementChild[];
+
+export interface AnchorNativeProps extends HTMLAttributes<HTMLAnchorElement> {
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    rel?: string;
+    download?: string | boolean;
+    hrefLang?: string;
+    type?: string;
+}
+
+export interface ButtonNativeProps extends HTMLAttributes<HTMLButtonElement> {
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    value?: string;
+    autoFocus?: boolean;
+    form?: string;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+}
+
+export interface FormNativeProps extends HTMLAttributes<HTMLFormElement> {
+    action?: string;
+    method?: 'get' | 'post';
+    encType?: string;
+    target?: string;
+    noValidate?: boolean;
+    autoComplete?: 'on' | 'off';
+}
+
+export interface InputNativeProps extends HTMLAttributes<HTMLInputElement> {
+    accept?: string;
+    alt?: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    capture?: boolean | string;
+    checked?: boolean;
+    disabled?: boolean;
+    form?: string;
+    max?: number | string;
+    maxLength?: number;
+    min?: number | string;
+    minLength?: number;
+    multiple?: boolean;
+    name?: string;
+    pattern?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    size?: number;
+    src?: string;
+    step?: number | string;
+    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'checkbox' | 'radio' | 'file' | 'submit' | 'reset' | 'button' | 'hidden' | 'image' | 'color' | 'range';
+    value?: string | number;
+}
+
+export interface TextareaNativeProps extends HTMLAttributes<HTMLTextAreaElement> {
+    autoComplete?: string;
+    autoFocus?: boolean;
+    cols?: number;
+    disabled?: boolean;
+    form?: string;
+    maxLength?: number;
+    minLength?: number;
+    name?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    rows?: number;
+    value?: string;
+    wrap?: 'hard' | 'soft' | 'off';
+}
+
+export interface SelectNativeProps extends HTMLAttributes<HTMLSelectElement> {
+    autoComplete?: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    form?: string;
+    multiple?: boolean;
+    name?: string;
+    required?: boolean;
+    size?: number;
+    value?: string | string[];
+}
+
+export interface ImgNativeProps extends HTMLAttributes<HTMLImageElement> {
+    alt?: string;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    decoding?: 'async' | 'auto' | 'sync';
+    height?: number | string;
+    loading?: 'eager' | 'lazy';
+    sizes?: string;
+    src?: string;
+    srcSet?: string;
+    width?: number | string;
+}
+
+export interface LabelNativeProps extends HTMLAttributes<HTMLLabelElement> {
+    htmlFor?: string;
+    form?: string;
+}
+
+export type IntrinsicElementKeys =
+    | 'a' | 'abbr' | 'address' | 'area' | 'article' | 'aside' | 'audio'
+    | 'b' | 'base' | 'blockquote' | 'body' | 'br' | 'button'
+    | 'canvas' | 'caption' | 'cite' | 'code' | 'col' | 'colgroup'
+    | 'datalist' | 'del' | 'details' | 'dialog' | 'div'
+    | 'em'
+    | 'fieldset' | 'figcaption' | 'figure' | 'footer' | 'form'
+    | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'head' | 'header' | 'hr' | 'html'
+    | 'i' | 'iframe' | 'img' | 'input' | 'ins'
+    | 'kbd'
+    | 'label' | 'legend' | 'li' | 'link'
+    | 'main' | 'mark' | 'menu' | 'meta' | 'meter'
+    | 'nav'
+    | 'ol' | 'optgroup' | 'option' | 'output'
+    | 'p' | 'picture' | 'pre' | 'progress'
+    | 'q'
+    | 's' | 'script' | 'section' | 'select' | 'small' | 'source' | 'span' | 'strong' | 'style' | 'sub' | 'summary' | 'sup' | 'svg'
+    | 'table' | 'tbody' | 'td' | 'template' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'title' | 'tr' | 'track'
+    | 'u' | 'ul'
+    | 'video'
+    | 'wbr'
+    | 'circle' | 'ellipse' | 'line' | 'path' | 'polygon' | 'polyline' | 'rect' | 'g' | 'defs';
+
+export type IntrinsicElementProps<Tag extends IntrinsicElementKeys> =
+    Tag extends 'a' ? AnchorNativeProps :
+    Tag extends 'button' ? ButtonNativeProps :
+    Tag extends 'form' ? FormNativeProps :
+    Tag extends 'input' ? InputNativeProps :
+    Tag extends 'textarea' ? TextareaNativeProps :
+    Tag extends 'select' ? SelectNativeProps :
+    Tag extends 'img' ? ImgNativeProps :
+    Tag extends 'label' ? LabelNativeProps :
+    HTMLAttributes<HTMLElement>;

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "NodeNext",
+        "jsx": "react-jsx",
+        "jsxImportSource": "jsx-framework-test-pb",
+        "moduleResolution": "NodeNext",
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "declaration": true,
+        "outDir": "./dist",
+        "rootDir": "./src"
+    },
+    "include": [
+        "src/**/*"
+    ]
+}