components-test-pb 0.1.2 → 0.1.5

package/dist/components/Button/src/Button.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonProps } from './Button.types';
+export declare const Button: (props: ButtonProps) => import("jsx-framework-test-pb").ValidElement;

package/dist/components/Button/src/Button.js

@@ -0,0 +1,8 @@
+import { useButton } from './useButton';
+import { useButtonStyles } from './useButtonStyles.styles';
+import { renderButton } from './renderButton';
+export const Button = (props) => {
+    const state = useButton(props);
+    useButtonStyles(state);
+    return renderButton(state);
+};

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

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

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

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

package/dist/components/Button/src/index.js

@@ -0,0 +1,4 @@
+export { Button } from './Button';
+export { useButton } from './useButton';
+export { renderButton } from './renderButton';
+export { useButtonStyles, buttonClassNames } from './useButtonStyles.styles';

package/dist/components/Button/src/renderButton.d.ts

@@ -0,0 +1,3 @@
+import { JSXElement } from '../../../utilities/src';
+import type { ButtonState } from './Button.types';
+export declare const renderButton: (state: ButtonState) => JSXElement;

package/dist/components/Button/src/renderButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+import { assertSlots } from '../../../utilities/src';
+export const renderButton = (state) => {
+    assertSlots(state);
+    return (_jsx(state.root, { children: state.root.children }));
+};

package/dist/{Components/Button → components/Button/src}/useButton.d.ts

@@ -1,2 +1,2 @@
-import type { ButtonProps, ButtonState } from './Button.types.js';
+import type { ButtonProps, ButtonState } from './Button.types';
 export declare const useButton: (props: ButtonProps) => ButtonState;

package/dist/components/Button/src/useButton.js

@@ -0,0 +1,15 @@
+import { slot, useARIAButtonProps } from '../../../utilities';
+export const useButton = (props) => {
+    const { appearance = 'secondary', disabled = false, shape = 'rounded', size = 'medium', ...rest } = props;
+    const rootProps = slot.always(rest, {
+        elementType: 'button',
+    });
+    return {
+        appearance,
+        disabled,
+        shape,
+        size,
+        components: { root: 'button' },
+        root: useARIAButtonProps(rootProps.as ?? 'button', rootProps),
+    };
+};

package/dist/{Components/Button → components/Button/src}/useButtonStyles.styles.d.ts

@@ -1,4 +1,4 @@
-import { SlotClassNames } from '../../Types/compose/types.js';
-import { ButtonSlots, ButtonState } from './Button.types.js';
+import { SlotClassNames } from '../../../utilities';
+import { ButtonSlots, ButtonState } from './Button.types';
 export declare const buttonClassNames: SlotClassNames<ButtonSlots>;
 export declare const useButtonStyles: (state: ButtonState) => ButtonState;

package/dist/components/Button/src/useButtonStyles.styles.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Button, useButton, renderButton, useButtonStyles, buttonClassNames, } from './Button/src';
+export type { ButtonSlots, ButtonAppearance, ButtonShape, ButtonSize, ButtonProps, ButtonState, } from './Button/src';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { Button, useButton, renderButton, useButtonStyles, buttonClassNames, } from './Button/src';

package/dist/index.d.ts

@@ -1,10 +1,4 @@
-export { Text, useText, renderText, useTextStyles } from './Components/Text/index.js';
-export type { TextSlots, TextProps, TextPresetProps, TextState } from './Components/Text/index.js';
-export { Button, useButton, renderButton, useButtonStyles } from './Components/Button/index.js';
-export type { ButtonSlots, ButtonProps, ButtonBaseProps, ButtonState } from './Components/Button/index.js';
-export * from './Types/compose/index.js';
-export * from './Types/utils/index.js';
-export { useARIAButtonProps } from './utilities/index.js';
-export type { ARIAButtonType, ARIAButtonProps, ARIAButtonResultProps } from './utilities/index.js';
-export { Tokens } from './Theme/tokens.js';
-export type { Tokens as TokensType } from './Theme/tokens.js';
+export { assertSlots, slot, useARIAButtonProps } from './utilities';
+export { Button, useButton, renderButton, useButtonStyles, buttonClassNames, } from './components';
+export type { ButtonSlots, ButtonAppearance, ButtonShape, ButtonSize, ButtonProps, ButtonState, } from './components';
+export type { JSXIntrinsicElementKeys, JSXIntrinsicElement, SlotRenderFunction, SlotPropsRecord, SlotShorthandValue, UnknownSlotProps, WithSlotRenderFunction, WithoutSlotRenderFunction, IsSingleton, AsIntrinsicElement, Slot, ExtractSlotProps, ComponentProps, ComponentState, SlotClassNames, EventData, EventHandler, DistributiveOmit, UnionToIntersection, ARIAButtonType, ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonAlteredProps, ARIAButtonResultProps, } from './utilities';

package/dist/index.js

@@ -1,6 +1,2 @@
-export { Text, useText, renderText, useTextStyles } from './Components/Text/index.js';
-export { Button, useButton, renderButton, useButtonStyles } from './Components/Button/index.js';
-export * from './Types/compose/index.js';
-export * from './Types/utils/index.js';
-export { useARIAButtonProps } from './utilities/index.js';
-export { Tokens } from './Theme/tokens.js';
+export { assertSlots, slot, useARIAButtonProps } from './utilities';
+export { Button, useButton, renderButton, useButtonStyles, buttonClassNames, } from './components';

package/dist/utilities/index.d.ts

@@ -1,2 +1,2 @@
-export { useARIAButtonProps } from './useARIAButtonProps.js';
-export type { ARIAButtonType, ARIAButtonProps, ARIAButtonResultProps } from './useARIAButtonProps.js';
+export { assertSlots, slot, useARIAButtonProps } from './src';
+export type { JSXIntrinsicElementKeys, JSXIntrinsicElement, SlotRenderFunction, SlotPropsRecord, SlotShorthandValue, UnknownSlotProps, WithSlotRenderFunction, WithoutSlotRenderFunction, IsSingleton, AsIntrinsicElement, Slot, ExtractSlotProps, ComponentProps, ComponentState, SlotClassNames, EventData, EventHandler, DistributiveOmit, UnionToIntersection, ARIAButtonType, ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonAlteredProps, ARIAButtonResultProps, } from './src';

package/dist/utilities/index.js

@@ -1 +1 @@
-export { useARIAButtonProps } from './useARIAButtonProps.js';
+export { assertSlots, slot, useARIAButtonProps } from './src';

package/dist/utilities/src/ARIA/index.d.ts

@@ -0,0 +1,2 @@
+export { useARIAButtonProps } from './useARIAButtonProps';
+export type { ARIAButtonType, ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonAlteredProps, ARIAButtonResultProps, } from './types';

package/dist/utilities/src/ARIA/index.js

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

package/dist/utilities/src/ARIA/types.d.ts

@@ -0,0 +1,18 @@
+import type { DistributiveOmit, ExtractSlotProps, Slot, UnionToIntersection, JSXIntrinsicElement } from '../compose/types';
+export type ARIAButtonType = 'button' | 'a' | 'div';
+export type ARIAButtonElement<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = HTMLButtonElement | (AlternateAs extends 'a' ? HTMLAnchorElement : never) | (AlternateAs extends 'div' ? HTMLDivElement : never);
+export type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = UnionToIntersection<ARIAButtonElement<AlternateAs>>;
+export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = DistributiveOmit<JSXIntrinsicElement<Type>, 'children'> & {
+    disabled?: boolean;
+    /**
+     * When set, allows the button to be focusable even when it has been disabled.
+     * This is used in scenarios where it is important to keep a consistent tab order
+     * for screen reader and keyboard users.
+     *
+     * @default false
+     */
+    disabledFocusable?: boolean;
+};
+export type ARIAButtonSlotProps<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = ExtractSlotProps<Slot<'button', AlternateAs>> & Pick<ARIAButtonProps<ARIAButtonType>, 'disabled' | 'disabledFocusable'>;
+export type ARIAButtonAlteredProps<Type extends ARIAButtonType> = (Type extends 'button' ? Pick<JSXIntrinsicElement<'button'>, 'onClick' | 'onKeyDown' | 'onKeyUp' | 'disabled' | 'aria-disabled' | 'tabIndex'> : never) | (Type extends 'a' ? Pick<JSXIntrinsicElement<'a'>, 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role' | 'href'> : never) | (Type extends 'div' ? Pick<JSXIntrinsicElement<'div'>, 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role'> : never);
+export type ARIAButtonResultProps<Type extends ARIAButtonType, Props> = Props & UnionToIntersection<ARIAButtonAlteredProps<Type>>;

package/dist/utilities/src/ARIA/useARIAButtonProps.d.ts

@@ -0,0 +1,2 @@
+import type { ARIAButtonProps, ARIAButtonResultProps, ARIAButtonType } from './types';
+export declare function useARIAButtonProps<Type extends ARIAButtonType>(type: Type, props: ARIAButtonProps<Type>): ARIAButtonResultProps<Type, ARIAButtonProps<Type>>;

package/dist/utilities/src/ARIA/useARIAButtonProps.js

@@ -0,0 +1,61 @@
+export function useARIAButtonProps(type, props) {
+    const { disabled, disabledFocusable, onClick, onKeyDown, onKeyUp, ...rest } = props;
+    const isDisabled = disabled || disabledFocusable;
+    if (type === 'button') {
+        return {
+            ...rest,
+            disabled: isDisabled && !disabledFocusable,
+            onClick: isDisabled
+                ? (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+                : onClick,
+            onKeyDown,
+            onKeyUp,
+            ...(isDisabled && { 'aria-disabled': true }),
+        };
+    }
+    // Non-native: 'a' | 'div'
+    const handleClick = isDisabled
+        ? (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        : onClick;
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        if (isDisabled)
+            return;
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.currentTarget.click();
+        }
+        else if (e.key === ' ') {
+            e.preventDefault(); // Prevent scroll
+        }
+    };
+    const handleKeyUp = (e) => {
+        onKeyUp?.(e);
+        if (e.defaultPrevented)
+            return;
+        if (isDisabled)
+            return;
+        if (e.key === ' ') {
+            e.preventDefault();
+            e.currentTarget.click();
+        }
+    };
+    return {
+        ...rest,
+        role: 'button',
+        tabIndex: isDisabled && !disabledFocusable ? undefined : rest.tabIndex ?? 0,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        ...(isDisabled && { 'aria-disabled': true }),
+        ...(type === 'a' && isDisabled && { href: undefined }),
+    };
+}

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

@@ -0,0 +1,5 @@
+import type { FC } from 'jsx-framework-test-pb';
+import type { ComponentState, SlotPropsRecord } from './types';
+export declare function assertSlots<Slots extends SlotPropsRecord>(state: ComponentState<Slots>): asserts state is ComponentState<Slots> & {
+    [K in keyof Slots]: FC<any>;
+};

package/dist/utilities/src/compose/assertSlots.js

@@ -0,0 +1,13 @@
+import { jsx } from 'jsx-framework-test-pb/jsx-runtime';
+export function assertSlots(state) {
+    const components = state.components;
+    for (const name of Object.keys(components)) {
+        const Component = components[name];
+        const slotProps = state[name];
+        if (slotProps != null) {
+            state[name] = (jsxProps) => {
+                return jsx(Component, { ...slotProps, ...jsxProps });
+            };
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+export { assertSlots } from './assertSlots';
+export { slot } from './slot';
+export type { JSXIntrinsicElementKeys, JSXIntrinsicElement, SlotRenderFunction, SlotPropsRecord, SlotShorthandValue, UnknownSlotProps, WithSlotRenderFunction, WithoutSlotRenderFunction, IsSingleton, AsIntrinsicElement, Slot, ExtractSlotProps, ComponentProps, ComponentState, SlotClassNames, EventData, EventHandler, DistributiveOmit, UnionToIntersection, JSXElement, } from './types';

package/dist/utilities/src/compose/index.js

@@ -0,0 +1,2 @@
+export { assertSlots } from './assertSlots';
+export { slot } from './slot';

package/dist/utilities/src/compose/slot.d.ts

@@ -0,0 +1,11 @@
+import type { SlotShorthandValue, UnknownSlotProps } from './types';
+type SlotValue = UnknownSlotProps | SlotShorthandValue | null | undefined;
+interface SlotOptions<Props extends UnknownSlotProps> {
+    elementType: string;
+    defaultProps?: Partial<Props>;
+}
+export declare const slot: {
+    always<Props extends UnknownSlotProps>(value: SlotValue, options: SlotOptions<Props>): Props;
+    optional<Props extends UnknownSlotProps>(value: SlotValue, options: SlotOptions<Props>): Props | undefined;
+};
+export {};

package/dist/utilities/src/compose/slot.js

@@ -0,0 +1,25 @@
+import { isElement } from 'jsx-framework-test-pb';
+function isShorthand(value) {
+    return typeof value === 'string' || typeof value === 'number' || isElement(value);
+}
+function resolveSlot(value, options) {
+    const { defaultProps } = options;
+    if (value == null) {
+        return (defaultProps ?? {});
+    }
+    if (isShorthand(value)) {
+        return { ...defaultProps, children: value };
+    }
+    return { ...defaultProps, ...value };
+}
+export const slot = {
+    always(value, options) {
+        return resolveSlot(value, options);
+    },
+    optional(value, options) {
+        if (value == null) {
+            return undefined;
+        }
+        return resolveSlot(value, options);
+    },
+};

package/dist/utilities/src/compose/types.d.ts

@@ -0,0 +1,59 @@
+import type { JSX } from 'jsx-framework-test-pb/jsx-runtime';
+import type { Element, ElementChild, FC, ValidElement } from 'jsx-framework-test-pb';
+export type JSXElement = ValidElement;
+export type JSXIntrinsicElementKeys = keyof JSX.IntrinsicElements;
+export type JSXIntrinsicElement<K extends JSXIntrinsicElementKeys> = JSX.IntrinsicElements[K];
+type PropsWithoutChildren<P> = Omit<P, 'children'>;
+type ReplaceNullWithUndefined<T> = T extends null ? undefined : T;
+type EmptyIntrinsicElements = 'area' | 'base' | 'br' | 'col' | 'embed' | 'hr' | 'img' | 'input' | 'link' | 'meta' | 'param' | 'source' | 'track' | 'wbr';
+type IntrinsicElementProps<Type extends JSXIntrinsicElementKeys> = Type extends EmptyIntrinsicElements ? PropsWithoutChildren<JSXIntrinsicElement<Type>> : JSXIntrinsicElement<Type>;
+export type SlotRenderFunction<Props> = (Component: FC<Props> | JSXIntrinsicElementKeys, props: Omit<Props, 'as'>) => ElementChild;
+export type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;
+export type SlotShorthandValue = Element | string | number;
+export type UnknownSlotProps = {
+    className?: string | number;
+    style?: Record<string, string | number>;
+    as?: JSXIntrinsicElementKeys;
+    children?: ElementChild | ElementChild[] | SlotRenderFunction<any>;
+};
+type WithSlotShorthandValue<Props> = Props | ('children' extends keyof Props ? Extract<SlotShorthandValue, Props['children']> : never);
+export type WithSlotRenderFunction<Props> = PropsWithoutChildren<Props> & {
+    children?: 'children' extends keyof Props ? Props['children'] | SlotRenderFunction<Props> : never;
+};
+export type WithoutSlotRenderFunction<Props> = Props extends unknown ? 'children' extends keyof Props ? Omit<Props, 'children'> & {
+    children?: Exclude<Props['children'], Function>;
+} : Props : never;
+export type IsSingleton<T extends string> = {
+    [K in T]: Exclude<T, K> extends never ? true : false;
+}[T];
+export type AsIntrinsicElement<As extends JSXIntrinsicElementKeys> = {
+    as?: As;
+};
+export type Slot<Type extends JSXIntrinsicElementKeys | FC<any> | UnknownSlotProps, AlternateAs extends JSXIntrinsicElementKeys = never> = IsSingleton<Extract<Type, string>> extends true ? WithSlotShorthandValue<Type extends JSXIntrinsicElementKeys ? {
+    as?: Type;
+} & WithSlotRenderFunction<IntrinsicElementProps<Type>> : Type extends FC<infer Props> ? Props extends UnknownSlotProps ? Props : WithSlotRenderFunction<Props> : Type> | (AlternateAs extends unknown ? {
+    as: AlternateAs;
+} & WithSlotRenderFunction<IntrinsicElementProps<AlternateAs>> : never) | null : 'Error: First parameter to Slot must not be a union of types. See documentation of Slot type.';
+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]-?: FC<any> | JSXIntrinsicElementKeys;
+    };
+} & {
+    [Key in keyof Slots]: ReplaceNullWithUndefined<WithoutSlotRenderFunction<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>>;
+};
+export type SlotClassNames<Slots> = {
+    [SlotName in keyof Slots]-?: string;
+};
+export type EventData<Type extends string, TEvent> = {
+    type: undefined;
+    event: Event;
+} | {
+    type: Type;
+    event: TEvent;
+};
+export type EventHandler<TData extends EventData<string, unknown>> = (ev: Event, data: TData) => void;
+export type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+export {};

package/dist/utilities/src/index.d.ts

@@ -0,0 +1,4 @@
+export { assertSlots, slot } from './compose';
+export { useARIAButtonProps } from './ARIA';
+export type { JSXIntrinsicElementKeys, JSXIntrinsicElement, SlotRenderFunction, SlotPropsRecord, SlotShorthandValue, UnknownSlotProps, WithSlotRenderFunction, WithoutSlotRenderFunction, IsSingleton, AsIntrinsicElement, Slot, ExtractSlotProps, ComponentProps, ComponentState, SlotClassNames, EventData, EventHandler, DistributiveOmit, UnionToIntersection, JSXElement, } from './compose';
+export type { ARIAButtonType, ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonAlteredProps, ARIAButtonResultProps, } from './ARIA';

package/dist/utilities/src/index.js

@@ -0,0 +1,2 @@
+export { assertSlots, slot } from './compose';
+export { useARIAButtonProps } from './ARIA';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-test-pb",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -17,12 +17,11 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "jsx-framework-test-pb": "latest",
-    "css-engine-test-pb": "latest",
+    "jsx-framework-test-pb": "^0.3.0",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "jsx-framework-test-pb": "*",
-    "css-engine-test-pb": "*"
+    "css-engine-test-pb": "*",
+    "jsx-framework-test-pb": "*"
   }
 }

package/src/components/Button/src/Button.tsx

@@ -0,0 +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);
+};

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

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

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

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

package/src/components/Button/src/renderButton.tsx

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

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

@@ -0,0 +1,26 @@
+import { slot, useARIAButtonProps } from '../../../utilities';
+import type { ARIAButtonSlotProps } from '../../../utilities';
+import type { ButtonProps, ButtonState } from './Button.types';
+
+export const useButton = (props: ButtonProps): ButtonState => {
+    const {
+        appearance = 'secondary',
+        disabled = false,
+        shape = 'rounded',
+        size = 'medium',
+        ...rest
+    } = props;
+
+    const rootProps = slot.always<ARIAButtonSlotProps<'a'>>(rest, {
+        elementType: 'button',
+    });
+
+    return {
+        appearance,
+        disabled,
+        shape,
+        size,
+        components: { root: 'button' },
+        root: useARIAButtonProps(rootProps.as ?? 'button', rootProps) as ButtonState['root'],
+    };
+};

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

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

package/src/components/index.ts

@@ -0,0 +1,16 @@
+export {
+    Button,
+    useButton,
+    renderButton,
+    useButtonStyles,
+    buttonClassNames,
+} from './Button/src';
+
+export type {
+    ButtonSlots,
+    ButtonAppearance,
+    ButtonShape,
+    ButtonSize,
+    ButtonProps,
+    ButtonState,
+} from './Button/src';