components-test-pb 0.2.6 → 0.2.7

package/src/components/index.ts

@@ -1,35 +1 @@
-// <Button />
-
-export type {
-    ButtonSlots,
-    ButtonAppearance,
-    ButtonShape,
-    ButtonSize,
-    ButtonProps,
-    ButtonState,
-} from './Button/src';
-
-export {
-    Button,
-    useButton,
-    renderButton,
-    useButtonStyles,
-    buttonClassNames,
-} from './Button/src';
-
-// <Text />
-
-export type {
-    TextSlots,
-    TextProps,
-    TextState,
-} from './Text';
-
-export {
-    Text,
-    useText,
-    renderText,
-    useTextStyles,
-    textClassNames,
-} from './Text';
-
+export * from './src';

package/src/components/{Button/src → src/Button}/Button.tsx

@@ -1,10 +1,10 @@
-import type { ButtonProps } from './Button.types';
-import { useButton } from './useButton';
-import { useButtonStyles } from './useButtonStyles.styles';
-import { renderButton } from './renderButton';
-
-export const Button = (props: ButtonProps) => {
-    const state = useButton(props);
-    useButtonStyles(state);
-    return renderButton(state);
-};
+import type { FC } from 'jsx-framework-test-pb';
+import type { ButtonProps } from './Button.types';
+import { useButton } from './useButton';
+import { renderButton } from './renderButton';
+
+export const Button: FC<ButtonProps> = (props) => {
+    const state = useButton(props);
+
+    return renderButton(state);
+};

package/src/components/src/Button/Button.types.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps, ComponentState, Slot } from '../../../utilities';
+
+export type ButtonSlots = {
+    root: NonNullable<Slot<'a'>>;
+};
+
+export type ButtonProps = ComponentProps<ButtonSlots> & {
+    appearance?: 'primary' | 'secondary' | 'ghost';
+
+    disabled?: boolean;
+
+    shape?: 'rounded' | 'circular' | 'square';
+
+    size?: 'small' | 'medium' | 'large';
+};
+
+export type ButtonState = ComponentState<ButtonSlots> &
+    Required<
+        Pick<
+            ButtonProps,
+            'appearance' | 'disabled' | 'shape' | 'size'
+        >
+    >;

package/src/components/src/Button/index.ts

@@ -0,0 +1,5 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';
+export { renderButton } from './renderButton';
+export { useButton } from './useButton';
+export { buttonClassNames, useButtonStyles } from './useButtonStyles.styles';

package/src/components/{Button/src → src/Button}/renderButton.tsx

@@ -1,5 +1,5 @@
-import { assertSlots } from '../../../utilities/src';
-import type { JSXElement } from '../../../utilities/src';
+import { assertSlots } from '../../../utilities';
+import type { JSXElement } from '../../../utilities';
 import type { ButtonSlots, ButtonState } from './Button.types';
 
 export const renderButton = (state: ButtonState): JSXElement => {
@@ -9,5 +9,5 @@ export const renderButton = (state: ButtonState): JSXElement => {
         <state.root>
             {state.root.children}
         </state.root>
-    )
-}
+    );
+};

package/src/components/src/Button/useButton.ts

@@ -0,0 +1,24 @@
+import { getIntrinsicElementProps, slot } from '../../../utilities';
+import type { ButtonProps, ButtonState } from './Button.types';
+
+export const useButton = (props: ButtonProps): ButtonState => {
+    const { appearance, disabled, shape, size } = props;
+
+    const state: ButtonState = {
+        appearance: appearance ?? 'secondary',
+        disabled: disabled ?? false,
+        shape: shape ?? 'rounded',
+        size: size ?? 'medium',
+
+        components: { root: 'a' },
+
+        root: slot.always(
+            getIntrinsicElementProps('a', {
+                ...props
+            }),
+            { elementType: 'a' }
+        ),
+    };
+
+    return state;
+};

package/src/components/src/Button/useButtonStyles.styles.ts

@@ -0,0 +1,59 @@
+import { makeResetStyles, makeStyles, mergeClasses } from 'css-engine-test-pb';
+import type { SlotClassNames } from '../../../utilities';
+import type { ButtonSlots, ButtonState } from './Button.types';
+import { textClassNames } from '../Text';
+
+export const buttonClassNames: SlotClassNames<ButtonSlots> = {
+    root: 'c-button'
+};
+
+const useResetStyles = makeResetStyles({
+
+});
+
+const useVariationStyles = makeStyles({
+    primary: {},
+    secondary: {},
+    ghost: {},
+
+    circular: {},
+    rounded: {},
+    square: {},
+
+    small: {},
+    medium: {},
+    large: {}
+});
+
+const useDisabledStyles = makeStyles({
+    base: {},
+    primary: {},
+    secondary: {},
+    ghost: {}
+});
+
+export const useButtonStyles = (state: ButtonState): ButtonState => {
+
+    const resetStyles = useResetStyles();
+    const variationStyles = useVariationStyles();
+    const disabledStyles = useDisabledStyles();
+
+    const { appearance, disabled, shape, size } = state;
+
+    state.root.className = mergeClasses(
+        textClassNames.root,
+        resetStyles,
+
+        appearance && variationStyles[appearance],
+
+        variationStyles[shape],
+        variationStyles[size],
+
+        disabled && disabledStyles.base,
+        appearance && disabled && disabledStyles[appearance],
+
+        state.root.className
+    );
+
+    return state;
+};

package/src/components/{Text → src/Text}/Text.tsx

@@ -1,10 +1,13 @@
-import type { TextProps } from './Text.types';
-import { useText } from './useText';
-import { useTextStyles } from './useTextStyles.styles';
-import { renderText } from './renderText';
-
-export const Text = (props: TextProps) => {
-    const state = useText(props);
-    useTextStyles(state);
-    return renderText(state);
-};
+import type { FC } from 'jsx-framework-test-pb';
+import type { TextProps } from './Text.types';
+import { useText } from './useText';
+import { renderText } from './renderText';
+import { useTextStyles } from './useTextStyles.styles';
+
+export const Text: FC<TextProps> = (props) => {
+    const state = useText(props);
+
+    useTextStyles(state);
+
+    return renderText(state);
+};

package/src/components/{Text → src/Text}/Text.types.ts

@@ -1,5 +1,4 @@
-import type { ComponentProps, ComponentState, Slot } from '../../utilities'
-
+import type { ComponentProps, ComponentState, Slot } from '../../../utilities';
 
 export type TextSlots = {
     root: Slot<'span', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre' | 'strong' | 'b' | 'em' | 'i'>;
@@ -8,27 +7,15 @@ export type TextSlots = {
 export type TextProps = ComponentProps<TextSlots> & {
     font?: 'base' | 'monospace' | 'numeric';
 
-    italic?: boolean;
-
     size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
 
-    strikethrough?: boolean;
-
-    truncate?: boolean;
-
-    underline?: boolean;
-
     weight?: 'regular' | 'medium' | 'semibold' | 'bold';
-
-    wrap?: boolean;
 };
 
-export type TextPresetprops = Omit<TextProps, 'font' | 'size' | 'weight'>;
-
 export type TextState = ComponentState<TextSlots> &
     Required<
         Pick<
             TextProps,
-            'font' | 'italic' | 'size' | 'strikethrough' | 'truncate' | 'underline' | 'weight' | 'wrap'
+            'font' | 'size' | 'weight'
         >
     >;

package/src/components/src/Text/index.ts

@@ -0,0 +1,5 @@
+export { Text } from './Text';
+export type { TextProps, TextSlots, TextState } from './Text.types';
+export { renderText } from './renderText';
+export { useText } from './useText';
+export { textClassNames, useTextStyles } from './useTextStyles.styles';

package/src/components/src/Text/renderText.tsx

@@ -0,0 +1,9 @@
+import { assertSlots } from '../../../utilities';
+import type { JSXElement } from '../../../utilities';
+import type { TextSlots, TextState } from './Text.types';
+
+export const renderText = (state: TextState): JSXElement => {
+    assertSlots<TextSlots>(state);
+
+    return <state.root />;
+};

package/src/components/src/Text/useText.ts

@@ -0,0 +1,23 @@
+import { getIntrinsicElementProps, slot } from '../../../utilities';
+import type { TextProps, TextState } from './Text.types';
+
+export const useText = (props: TextProps): TextState => {
+    const { font, size, weight } = props;
+
+    const state: TextState = {
+        font: font ?? 'base',
+        size: size ?? 300,
+        weight: weight ?? 'regular',
+
+        components: { root: 'span' },
+
+        root: slot.always(
+            getIntrinsicElementProps('span', {
+                ...props
+            }),
+            { elementType: 'span' }
+        )
+    };
+
+    return state;
+};

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

@@ -0,0 +1,62 @@
+import { makeResetStyles, makeStyles, mergeClasses } from 'css-engine-test-pb';
+import type { SlotClassNames } from '../../../utilities';
+import type { TextSlots, TextState } from './Text.types';
+
+export const textClassNames: SlotClassNames<TextSlots> = {
+    root: 'c-text'
+};
+
+const useResetStyles = makeResetStyles({
+    fontFamily: 'Neue Montreal',
+    fontSize: '14px',
+    lineHeight: '20px',
+    fontWeight: 450,
+    textAlign: 'start',
+    display: 'inline',
+    whiteSpace: 'normal',
+    overflow: 'visible',
+    textOverflow: 'clip'
+});
+
+const useVariationStyles = makeStyles({
+    base: {},
+    monospace: {},
+    numeric: {},
+
+    100: {},
+    200: {},
+    300: {},
+    400: {},
+    500: {},
+    600: {},
+    700: {},
+    800: {},
+    900: {},
+    1000: {},
+
+    regular: {},
+    medium: {},
+    semibold: {},
+    bold: {}
+});
+
+export const useTextStyles = (state: TextState): TextState => {
+
+    const resetStyles = useResetStyles();
+    const variationStyles = useVariationStyles();
+
+    const { font, size, weight } = state;
+
+    state.root.className = mergeClasses(
+        textClassNames.root,
+        resetStyles,
+
+        variationStyles[font],
+        variationStyles[size],
+        variationStyles[weight],
+
+        state.root.className
+    );
+
+    return state;
+};

package/src/components/src/index.ts

@@ -0,0 +1,5 @@
+export { Button, buttonClassNames } from './Button';
+export type { ButtonProps, ButtonSlots } from './Button';
+
+export { Text, textClassNames } from './Text';
+export type { TextProps, TextSlots } from './Text';

package/src/index.ts

@@ -1,40 +1,5 @@
-export { assertSlots, getIntrinsicElementProps, slot, useARIAButtonProps } from './utilities';
-
-export { tokens, defaultTheme, themeToCSS, insertTheme } from './theme';
-export type { Theme } from './theme';
-
-export {
-    Button,
-    useButton,
-    renderButton,
-    useButtonStyles,
-    buttonClassNames,
-} from './components';
-
-export type {
-    ButtonSlots,
-    ButtonAppearance,
-    ButtonShape,
-    ButtonSize,
-    ButtonProps,
-    ButtonState,
-} from './components';
-
-export {
-    Text,
-    useText,
-    renderText,
-    useTextStyles,
-    textClassNames,
-} from './components';
-
-export type {
-    TextSlots,
-    TextProps,
-    TextState,
-} from './components';
-
 export type {
+    JSXElement,
     JSXIntrinsicElementKeys,
     JSXIntrinsicElement,
     SlotRenderFunction,
@@ -54,11 +19,12 @@ export type {
     EventHandler,
     DistributiveOmit,
     UnionToIntersection,
-    ARIAButtonType,
-    ARIAButtonElement,
-    ARIAButtonElementIntersection,
-    ARIAButtonProps,
-    ARIAButtonSlotProps,
-    ARIAButtonAlteredProps,
-    ARIAButtonResultProps,
 } from './utilities';
+
+export { assertSlots } from './utilities';
+
+export { Button, buttonClassNames } from './components';
+export type { ButtonProps, ButtonSlots } from './components';
+
+export { Text, textClassNames } from './components';
+export type { TextProps, TextSlots } from './components';

package/src/utilities/index.ts

@@ -1,6 +1,5 @@
-export { assertSlots, getIntrinsicElementProps, slot, useARIAButtonProps } from './src';
-
 export type {
+    JSXElement,
     JSXIntrinsicElementKeys,
     JSXIntrinsicElement,
     SlotRenderFunction,
@@ -20,11 +19,6 @@ export type {
     EventHandler,
     DistributiveOmit,
     UnionToIntersection,
-    ARIAButtonType,
-    ARIAButtonElement,
-    ARIAButtonElementIntersection,
-    ARIAButtonProps,
-    ARIAButtonSlotProps,
-    ARIAButtonAlteredProps,
-    ARIAButtonResultProps,
 } from './src';
+
+export { assertSlots, getIntrinsicElementProps, slot } from './src';

package/src/utilities/src/compose/assertSlots.ts

@@ -2,21 +2,39 @@ import { jsx } from 'jsx-framework-test-pb/jsx-runtime';
 import type { FC } from 'jsx-framework-test-pb';
 import type { ComponentState, SlotPropsRecord } from './types';
 
+/**
+ * Asserts and transforms slot entries on `state` into callable JSX components.
+ *
+ * After calling this, each slot key (e.g. `state.root`, `state.icon`) becomes
+ * a function component that can be used directly in JSX: `<state.root />`.
+ *
+ * The component renders using the element type from `state.components[key]`
+ * and merges the resolved slot props with any props passed via JSX.
+ */
 export function assertSlots<Slots extends SlotPropsRecord>(
-    state: ComponentState<Slots>
-): asserts state is ComponentState<Slots> & { [K in keyof Slots]: FC<any> } {
-    const components = state.components as Record<string, FC<any> | string>;
+    state: ComponentState<Slots>,
+): asserts state is ComponentState<Slots> & {
+    [K in keyof Slots]: FC<any>;
+} {
+    for (const name of Object.keys(state.components) as (keyof Slots & string)[]) {
+        const elementType = state.components[name];
+        const slotProps = state[name];
 
-    for (const name of Object.keys(components)) {
-        const Component = components[name];
-        const slotProps = (state as any)[name];
-
-        if (slotProps != null) {
-            const fn = (jsxProps: any) => {
-                return jsx(Component, { ...slotProps, ...jsxProps });
-            };
-            fn.children = slotProps.children;
-            (state as any)[name] = fn;
+        if (slotProps === undefined) {
+            // Optional slot not provided — render nothing
+            (state as any)[name] = () => null;
+            continue;
         }
+
+        const { children, elementType: slotElementType, ...restProps } = slotProps as any;
+        const resolvedElementType = slotElementType ?? elementType;
+
+        (state as any)[name] = (jsxProps: Record<string, any>) => {
+            const mergedProps = { ...restProps, ...jsxProps };
+            if (children !== undefined) {
+                mergedProps.children = jsxProps?.children ?? children;
+            }
+            return jsx(resolvedElementType as string | Function, mergedProps);
+        };
     }
 }

package/src/utilities/src/compose/getIntrinsicElementProps.ts

@@ -1,67 +1,66 @@
-import type { UnknownSlotProps, JSXIntrinsicElementKeys } from './types';
-
-// Global HTML attributes valid on all elements
-const nativeProps = new Set([
-    // Core
-    'as', 'children', 'className', 'style', 'id', 'key',
-
-    // HTML global attributes
-    'accessKey', 'autoFocus', 'contentEditable', 'dir', 'draggable',
-    'hidden', 'lang', 'nonce', 'placeholder', 'slot', 'spellCheck',
-    'tabIndex', 'title', 'translate', 'role',
-
-    // Data & ARIA (handled separately via prefix check)
-
-    // Event handlers
-    'onAbort', 'onAnimationEnd', 'onAnimationIteration', 'onAnimationStart',
-    'onBlur', 'onChange', 'onClick', 'onCompositionEnd', 'onCompositionStart',
-    'onCompositionUpdate', 'onContextMenu', 'onCopy', 'onCut', 'onDoubleClick',
-    'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave',
-    'onDragOver', 'onDragStart', 'onDrop', 'onError', 'onFocus', 'onFocusIn',
-    'onFocusOut', 'onGotPointerCapture', 'onInput', 'onInvalid', 'onKeyDown',
-    'onKeyPress', 'onKeyUp', 'onLoad', 'onLostPointerCapture', 'onMouseDown',
-    'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver',
-    'onMouseUp', 'onPaste', 'onPointerCancel', 'onPointerDown', 'onPointerEnter',
-    'onPointerLeave', 'onPointerMove', 'onPointerOut', 'onPointerOver',
-    'onPointerUp', 'onScroll', 'onSelect', 'onSubmit', 'onTouchCancel',
-    'onTouchEnd', 'onTouchMove', 'onTouchStart', 'onTransitionEnd', 'onWheel',
-
-    // Form element attributes
-    'accept', 'acceptCharset', 'action', 'allowFullScreen', 'alt', 'async',
-    'autoCapitalize', 'autoComplete', 'autoPlay', 'capture', 'cellPadding',
-    'cellSpacing', 'charSet', 'checked', 'cite', 'colSpan', 'cols', 'controls',
-    'coords', 'crossOrigin', 'dateTime', 'default', 'defer', 'disabled',
-    'download', 'encType', 'form', 'formAction', 'formEncType', 'formMethod',
-    'formNoValidate', 'formTarget', 'frameBorder', 'headers', 'height', 'high',
-    'href', 'hrefLang', 'htmlFor', 'httpEquiv', 'icon', 'inputMode', 'integrity',
-    'is', 'kind', 'label', 'list', 'loop', 'low', 'max', 'maxLength', 'media',
-    'method', 'min', 'minLength', 'multiple', 'muted', 'name', 'noValidate',
-    'open', 'optimum', 'pattern', 'playsInline', 'poster', 'preload',
-    'readOnly', 'rel', 'required', 'reversed', 'rowSpan', 'rows', 'sandbox',
-    'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape', 'size',
-    'sizes', 'span', 'src', 'srcDoc', 'srcLang', 'srcSet', 'start', 'step',
-    'summary', 'target', 'type', 'useMap', 'value', 'width', 'wrap',
-]);
-
-function isNativeProp(key: string): boolean {
-    return nativeProps.has(key) || key.startsWith('data-') || key.startsWith('aria-');
-}
-
-export function getIntrinsicElementProps<Props extends UnknownSlotProps & Record<string, any>>(
-    tagName: JSXIntrinsicElementKeys,
-    props: Props,
-): Props {
-    const result = {} as Record<string, any>;
-
-    for (const key of Object.keys(props)) {
-        if (isNativeProp(key)) {
-            result[key] = props[key];
-        }
-    }
-
-    if (!result.as) {
-        result.as = tagName;
-    }
-
-    return result as Props;
-}
+import type { JSX } from 'jsx-framework-test-pb/jsx-runtime';
+import type { JSXIntrinsicElementKeys } from './types';
+
+// All valid HTML attribute names defined by the JSX framework's HTMLAttributes interfaces.
+// aria-* and data-* are handled by prefix checks below.
+// on* event handlers are handled by prefix check below.
+const htmlAttributeNames = new Set<string>([
+    // Global (HTMLAttributes)
+    'className', 'id', 'style', 'title', 'lang', 'dir', 'hidden', 'tabIndex', 'role',
+    'children', 'key', 'ref', 'as',
+    // Anchor (AnchorHTMLAttributes)
+    'href', 'target', 'rel', 'download', 'hrefLang',
+    // Button (ButtonHTMLAttributes)
+    'disabled', 'type', 'value', 'autoFocus', 'form',
+    'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget',
+    // Form (FormHTMLAttributes)
+    'action', 'method', 'encType', 'noValidate', 'autoComplete',
+    // Input (InputHTMLAttributes)
+    'accept', 'alt', 'capture', 'checked', 'max', 'maxLength', 'min', 'minLength',
+    'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'size',
+    'src', 'step',
+    // Textarea (TextareaHTMLAttributes)
+    'cols', 'rows', 'wrap',
+    // Select/Option
+    'selected', 'label',
+    // Img (ImgHTMLAttributes)
+    'crossOrigin', 'decoding', 'height', 'loading', 'sizes', 'srcSet', 'width',
+    // Media (VideoHTMLAttributes / AudioHTMLAttributes)
+    'autoPlay', 'controls', 'loop', 'muted', 'poster', 'preload',
+    // Table (TdHTMLAttributes / ThHTMLAttributes)
+    'cellPadding', 'cellSpacing', 'colSpan', 'rowSpan', 'headers', 'scope',
+    // Iframe (IframeHTMLAttributes)
+    'allow', 'allowFullScreen', 'sandbox', 'srcDoc',
+    // Label (LabelHTMLAttributes)
+    'htmlFor',
+    // SVG (SVGAttributes)
+    'viewBox', 'xmlns', 'fill', 'stroke', 'strokeWidth', 'strokeLinecap', 'strokeLinejoin',
+    // Meta (MetaHTMLAttributes) / Link (LinkHTMLAttributes)
+    'charSet', 'content', 'httpEquiv', 'media',
+    // Details / Dialog
+    'open',
+]);
+
+export function getIntrinsicElementProps<Tag extends JSXIntrinsicElementKeys>(
+    _elementType: Tag,
+    props: Record<string, unknown>,
+    excludedPropNames?: string[],
+): JSX.IntrinsicElements[Tag] {
+    const result: Record<string, unknown> = {};
+
+    for (const key of Object.keys(props)) {
+        if (excludedPropNames?.includes(key)) {
+            continue;
+        }
+        if (
+            htmlAttributeNames.has(key) ||
+            key.startsWith('on') ||
+            key.startsWith('aria-') ||
+            key.startsWith('data-')
+        ) {
+            result[key] = props[key];
+        }
+    }
+
+    return result as JSX.IntrinsicElements[Tag];
+}

package/src/utilities/src/compose/index.ts

@@ -1,8 +1,5 @@
-export { assertSlots } from './assertSlots';
-export { getIntrinsicElementProps } from './getIntrinsicElementProps';
-export { slot } from './slot';
-
 export type {
+    JSXElement,
     JSXIntrinsicElementKeys,
     JSXIntrinsicElement,
     SlotRenderFunction,
@@ -22,5 +19,8 @@ export type {
     EventHandler,
     DistributiveOmit,
     UnionToIntersection,
-    JSXElement,
 } from './types';
+
+export { assertSlots } from './assertSlots';
+export { getIntrinsicElementProps } from './getIntrinsicElementProps';
+export { slot } from './slot';