components-test-pb 0.0.3 → 0.0.5

package/dist/Components/Button/Button.d.ts

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

package/dist/Components/Button/Button.js

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

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

@@ -0,0 +1,14 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+import { DistributiveOmit } from '../../Types/utils/types.js';
+export type ButtonSlots = {
+    root: NonNullable<Slot<'a'>>;
+};
+export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonProps = ComponentProps<ButtonSlots> & {
+    appearance?: 'secondary' | 'primary' | 'tertiary';
+    disabled?: boolean;
+    shape?: 'rounded' | 'circular' | 'square';
+    size?: ButtonSize;
+};
+export type ButtonBaseProps = DistributiveOmit<ButtonProps, 'appearance' | 'size' | 'shape'>;
+export type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'disabled' | 'shape' | 'size'>>;

package/dist/Components/Button/Button.types.js

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

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

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

package/dist/Components/Button/index.js

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

package/dist/Components/Button/renderButton.d.ts

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

package/dist/Components/Button/renderButton.js

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

package/dist/Components/Button/useButton.d.ts

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

package/dist/Components/Button/useButton.js

@@ -0,0 +1,11 @@
+export const useButton = (props) => {
+    const { appearance, shape, size, disabled, ...buttonProps } = props;
+    return {
+        appearance: appearance ?? 'secondary',
+        shape: shape ?? 'rounded',
+        size: size ?? 'medium',
+        disabled: disabled ?? false,
+        components: { root: buttonProps.as ?? 'button' },
+        root: { as: buttonProps.as ?? 'button', ...buttonProps },
+    };
+};

package/dist/Components/Button/useButtonStyles.styles.d.ts

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

package/dist/Components/Button/useButtonStyles.styles.js

@@ -0,0 +1,108 @@
+import { makeStyles, makeResetStyles, mergeClasses, shorthands } from 'css-engine-test-pb';
+import { Tokens } from '../../Theme/tokens.js';
+export const buttonClassNames = {
+    root: 'Button'
+};
+const useRootBaseClassName = makeResetStyles({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    textDecorationLine: 'none',
+    verticalAlign: 'center',
+    margin: 0,
+    overflow: 'hidden',
+    backgroundColor: Tokens.colorNeutralBackground1,
+    color: Tokens.colorNeutralForeground1,
+    border: `${Tokens.strokeWidthThin} solid ${Tokens.colorNeutralStroke1}`,
+    fontFamily: Tokens.fontFamilyBase,
+    outlineStyle: 'none',
+    ':hover': {
+        backgroundColor: Tokens.colorNeutralBackground1Hover,
+        borderColor: Tokens.colorNeutralStroke1Hover,
+        color: Tokens.colorNeutralForeground1,
+        cursor: 'pointer'
+    },
+    ':hover:active,:active:focus-visible': {
+        backgroundColor: Tokens.colorNeutralBackground1Pressed,
+        borderColor: Tokens.colorNeutralStroke1Pressed,
+        color: Tokens.colorNeutralForeground1,
+        outlineStyle: 'none'
+    },
+    padding: '5px 12px',
+    minWidth: '96px',
+    borderRadius: Tokens.borderRadiusMedium,
+    fontSize: Tokens.fontSize300,
+    fontWeight: Tokens.fontWeightRegular,
+    lineHeight: Tokens.lineHeight300,
+    transitionDuration: Tokens.durationNormal,
+    transitionProperty: 'background, border, color',
+    transitionTimingFunction: Tokens.curveEasy
+});
+const useRootStyles = makeStyles({
+    primary: {
+        backgroundColor: Tokens.colorBrandBackground,
+        ...shorthands.borderColor('transparent'),
+        color: Tokens.colorBrandForeground1,
+        ':hover': {
+            backgroundColor: Tokens.colorBrandBackgroundHover,
+            ...shorthands.borderColor('transparent'),
+            color: Tokens.colorBrandForeground1Hover
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: Tokens.colorBrandBackgroundPressed,
+            ...shorthands.borderColor('transparent'),
+            color: Tokens.colorBrandForeground1Hover
+        },
+    },
+    secondary: {},
+    tertiary: {
+        backgroundColor: 'transparent',
+        ...shorthands.borderColor('transparent'),
+        color: Tokens.colorNeutralForeground1,
+        ':hover': {
+            backgroundColor: 'transparent',
+            ...shorthands.borderColor('transparent'),
+            color: Tokens.colorBrandBackground
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: 'transparent',
+            ...shorthands.borderColor('transparent'),
+            color: Tokens.colorBrandBackgroundPressed
+        },
+    },
+    circular: { borderRadius: Tokens.borderRadiusCircular },
+    rounded: {},
+    square: { borderRadius: Tokens.borderRadiusNone },
+    small: {
+        minWidth: '64px',
+        padding: '3px 8px',
+        borderRadius: Tokens.borderRadiusMedium,
+        fontSize: Tokens.fontSize200,
+        fontWeight: Tokens.fontWeightRegular,
+        lineHeight: Tokens.lineHeight200
+    },
+    medium: {},
+    large: {
+        minWidth: '96px',
+        padding: '8px 16px',
+        borderRadius: Tokens.borderRadiusMedium,
+        fontSize: Tokens.fontSize400,
+        fontWeight: Tokens.fontWeightMedium,
+        lineHeight: Tokens.lineHeight400
+    }
+});
+const useRootDisabledstyles = makeStyles({
+    base: {},
+    primary: {},
+    secondary: {},
+    tertiary: {}
+});
+export const useButtonStyles = (state) => {
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    const rootDisabledStyles = useRootDisabledstyles();
+    const { appearance, disabled, shape, size } = state;
+    state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], disabled && rootDisabledStyles.base, appearance && disabled && rootDisabledStyles[appearance], state.root.className);
+    return state;
+};

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

@@ -1,38 +1,66 @@
 import { makeStyles, mergeClasses } from 'css-engine-test-pb';
+import { Tokens } from '../../Theme/tokens.js';
 export const textClassNames = {
     root: 'Text'
 };
 const useStyles = makeStyles({
     root: {
         fontFamily: 'Neue Montreal',
-        fontSize: '14px',
-        lineHeight: '20px',
-        fontWeight: 450,
+        fontSize: Tokens.fontSize300,
+        lineHeight: Tokens.lineHeight300,
+        fontWeight: Tokens.fontWeightRegular,
         display: 'inline',
         whiteSpace: 'normal',
         overflow: 'visible',
         textOverflow: 'clip'
     },
-    size100: {},
-    size200: {},
+    size100: {
+        fontSize: Tokens.fontSize100,
+        lineHeight: Tokens.lineHeight100
+    },
+    size200: {
+        fontSize: Tokens.fontSize200,
+        lineHeight: Tokens.lineHeight200
+    },
     size300: {},
-    size400: {},
-    size500: {},
-    size600: {},
-    size700: {},
-    size800: {},
-    size900: {},
-    size1000: {},
+    size400: {
+        fontSize: Tokens.fontSize400,
+        lineHeight: Tokens.lineHeight400
+    },
+    size500: {
+        fontSize: Tokens.fontSize500,
+        lineHeight: Tokens.lineHeight500
+    },
+    size600: {
+        fontSize: Tokens.fontSize600,
+        lineHeight: Tokens.lineHeight600
+    },
+    size700: {
+        fontSize: Tokens.fontSize700,
+        lineHeight: Tokens.lineHeight700
+    },
+    size800: {
+        fontSize: Tokens.fontSize800,
+        lineHeight: Tokens.lineHeight800
+    },
+    size900: {
+        fontSize: Tokens.fontSize900,
+        lineHeight: Tokens.lineHeight900
+    },
+    size1000: {
+        fontSize: Tokens.fontSize1000,
+        lineHeight: Tokens.lineHeight1000
+    },
     monospace: {},
     numeric: {},
     weightMedium: {
-        fontWeight: 530
+        fontWeight: Tokens.fontWeightMedium
     },
     weightSemibold: {
-        fontWeight: 700
+        fontWeight: Tokens.fontWeightSemibold
     },
     weightBold: {
-        fontWeight: 800
+        fontWeight: Tokens.fontWeightBold
     }
 });
 export const useTextStyles = (state) => {

package/dist/Theme/tokens.d.ts

@@ -0,0 +1,81 @@
+export declare const Tokens: {
+    readonly fontFamilyBase: "Neue Montreal";
+    readonly fontFamilyMonospace: "'Courier New', Courier, monospace";
+    readonly fontFamilyNumeric: "Neue Montreal";
+    readonly fontSize100: "10px";
+    readonly fontSize200: "12px";
+    readonly fontSize300: "14px";
+    readonly fontSize400: "16px";
+    readonly fontSize500: "20px";
+    readonly fontSize600: "24px";
+    readonly fontSize700: "28px";
+    readonly fontSize800: "32px";
+    readonly fontSize900: "40px";
+    readonly fontSize1000: "68px";
+    readonly lineHeight100: "14px";
+    readonly lineHeight200: "16px";
+    readonly lineHeight300: "20px";
+    readonly lineHeight400: "22px";
+    readonly lineHeight500: "28px";
+    readonly lineHeight600: "32px";
+    readonly lineHeight700: "36px";
+    readonly lineHeight800: "40px";
+    readonly lineHeight900: "52px";
+    readonly lineHeight1000: "92px";
+    readonly fontWeightRegular: 450;
+    readonly fontWeightMedium: 530;
+    readonly fontWeightSemibold: 700;
+    readonly fontWeightBold: 800;
+    readonly borderRadiusNone: "0px";
+    readonly borderRadiusSmall: "2px";
+    readonly borderRadiusMedium: "4px";
+    readonly borderRadiusLarge: "6px";
+    readonly borderRadiusXLarge: "8px";
+    readonly borderRadiusCircular: "9999px";
+    readonly strokeWidthThin: "1px";
+    readonly strokeWidthThick: "2px";
+    readonly strokeWidthThicker: "4px";
+    readonly spacingXXS: "2px";
+    readonly spacingXS: "4px";
+    readonly spacingSNudge: "6px";
+    readonly spacingS: "8px";
+    readonly spacingMNudge: "10px";
+    readonly spacingM: "12px";
+    readonly spacingL: "16px";
+    readonly spacingXL: "20px";
+    readonly spacingXXL: "24px";
+    readonly spacingXXXL: "32px";
+    readonly colorNeutralForeground1: "#242424";
+    readonly colorNeutralForegroundDisabled: "#bdbdbd";
+    readonly colorNeutralForegroundOnBrand: "#ffffff";
+    readonly colorNeutralBackground1: "#ffffff";
+    readonly colorNeutralBackground1Hover: "#f5f5f5";
+    readonly colorNeutralBackground1Pressed: "#e0e0e0";
+    readonly colorNeutralBackground3: "#f5f5f5";
+    readonly colorNeutralBackgroundDisabled: "#f0f0f0";
+    readonly colorNeutralStroke1: "#cccccc";
+    readonly colorNeutralStroke1Hover: "#b3b3b3";
+    readonly colorNeutralStroke1Pressed: "#999999";
+    readonly colorNeutralStrokeDisabled: "#e0e0e0";
+    readonly colorBrandBackground: "#312dfb";
+    readonly colorBrandBackgroundHover: "#2b28e2";
+    readonly colorBrandBackgroundPressed: "#2522c9";
+    readonly colorBrandStroke1: "#312dfb";
+    readonly colorBrandStroke1Hover: "#2b28e2";
+    readonly colorBrandStroke1Pressed: "#2522c9";
+    readonly colorBrandForeground1: "#ffffff";
+    readonly colorBrandForeground1Hover: "#ffffff";
+    readonly colorBrandForeground1Pressed: "#ffffff";
+    readonly colorSubtleBackground: "transparent";
+    readonly colorSubtleBackgroundHover: "#f5f5f5";
+    readonly colorSubtleBackgroundPressed: "#e0e0e0";
+    readonly colorTransparentBackground: "transparent";
+    readonly colorTransparentStroke: "transparent";
+    readonly durationNormal: "150ms";
+    readonly durationFast: "100ms";
+    readonly durationSlow: "300ms";
+    readonly curveEasy: "cubic-bezier(0.33,0,0.67,1)";
+    readonly curveDecelerate: "cubic-bezier(0,0,0,1)";
+    readonly curveAccelerate: "cubic-bezier(1,0,1,1)";
+};
+export type Tokens = typeof Tokens;

package/dist/Theme/tokens.js

@@ -0,0 +1,80 @@
+export const Tokens = {
+    fontFamilyBase: 'Neue Montreal',
+    fontFamilyMonospace: "'Courier New', Courier, monospace",
+    fontFamilyNumeric: 'Neue Montreal',
+    fontSize100: '10px',
+    fontSize200: '12px',
+    fontSize300: '14px',
+    fontSize400: '16px',
+    fontSize500: '20px',
+    fontSize600: '24px',
+    fontSize700: '28px',
+    fontSize800: '32px',
+    fontSize900: '40px',
+    fontSize1000: '68px',
+    lineHeight100: '14px',
+    lineHeight200: '16px',
+    lineHeight300: '20px',
+    lineHeight400: '22px',
+    lineHeight500: '28px',
+    lineHeight600: '32px',
+    lineHeight700: '36px',
+    lineHeight800: '40px',
+    lineHeight900: '52px',
+    lineHeight1000: '92px',
+    fontWeightRegular: 450,
+    fontWeightMedium: 530,
+    fontWeightSemibold: 700,
+    fontWeightBold: 800,
+    borderRadiusNone: '0px',
+    borderRadiusSmall: '2px',
+    borderRadiusMedium: '4px',
+    borderRadiusLarge: '6px',
+    borderRadiusXLarge: '8px',
+    borderRadiusCircular: '9999px',
+    strokeWidthThin: '1px',
+    strokeWidthThick: '2px',
+    strokeWidthThicker: '4px',
+    spacingXXS: '2px',
+    spacingXS: '4px',
+    spacingSNudge: '6px',
+    spacingS: '8px',
+    spacingMNudge: '10px',
+    spacingM: '12px',
+    spacingL: '16px',
+    spacingXL: '20px',
+    spacingXXL: '24px',
+    spacingXXXL: '32px',
+    colorNeutralForeground1: '#242424',
+    colorNeutralForegroundDisabled: '#bdbdbd',
+    colorNeutralForegroundOnBrand: '#ffffff',
+    colorNeutralBackground1: '#ffffff',
+    colorNeutralBackground1Hover: '#f5f5f5',
+    colorNeutralBackground1Pressed: '#e0e0e0',
+    colorNeutralBackground3: '#f5f5f5',
+    colorNeutralBackgroundDisabled: '#f0f0f0',
+    colorNeutralStroke1: '#cccccc',
+    colorNeutralStroke1Hover: '#b3b3b3',
+    colorNeutralStroke1Pressed: '#999999',
+    colorNeutralStrokeDisabled: '#e0e0e0',
+    colorBrandBackground: '#312dfb',
+    colorBrandBackgroundHover: '#2b28e2',
+    colorBrandBackgroundPressed: '#2522c9',
+    colorBrandStroke1: '#312dfb',
+    colorBrandStroke1Hover: '#2b28e2',
+    colorBrandStroke1Pressed: '#2522c9',
+    colorBrandForeground1: '#ffffff',
+    colorBrandForeground1Hover: '#ffffff',
+    colorBrandForeground1Pressed: '#ffffff',
+    colorSubtleBackground: 'transparent',
+    colorSubtleBackgroundHover: '#f5f5f5',
+    colorSubtleBackgroundPressed: '#e0e0e0',
+    colorTransparentBackground: 'transparent',
+    colorTransparentStroke: 'transparent',
+    durationNormal: '150ms',
+    durationFast: '100ms',
+    durationSlow: '300ms',
+    curveEasy: 'cubic-bezier(0.33,0,0.67,1)',
+    curveDecelerate: 'cubic-bezier(0,0,0,1)',
+    curveAccelerate: 'cubic-bezier(1,0,1,1)',
+};

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 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';

package/dist/index.js

@@ -1,3 +1,4 @@
 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-test-pb",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/Components/Button/Button.tsx

@@ -0,0 +1,13 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { ButtonProps } from './Button.types.js';
+import { useButton } from './useButton.js';
+import { renderButton } from './renderButton.js';
+import { useButtonStyles } from './useButtonStyles.styles.js';
+
+export const Button: FC<ButtonProps> = (props) => {
+    const state = useButton(props);
+
+    useButtonStyles(state);
+
+    return renderButton(state);
+};

package/src/Components/Button/Button.types.ts

@@ -0,0 +1,25 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+import { DistributiveOmit } from '../../Types/utils/types.js';
+
+export type ButtonSlots = {
+    root: NonNullable<Slot<'a'>>;
+};
+
+export type ButtonSize = 'small' | 'medium' | 'large';
+
+export type ButtonProps = ComponentProps<ButtonSlots> & {
+    appearance?: 'secondary' | 'primary' | 'tertiary';
+    disabled?: boolean;
+    shape?: 'rounded' | 'circular' | 'square';
+    size?: ButtonSize;
+};
+
+export type ButtonBaseProps = DistributiveOmit<ButtonProps, 'appearance' | 'size' | 'shape'>;
+
+export type ButtonState = ComponentState<ButtonSlots> &
+    Required<
+        Pick<
+            ButtonProps,
+            'appearance' | 'disabled' | 'shape' | 'size'
+        >
+    >;

package/src/Components/Button/index.ts

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

package/src/Components/Button/renderButton.tsx

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

package/src/Components/Button/useButton.ts

@@ -0,0 +1,16 @@
+import type { ButtonProps, ButtonState } from './Button.types.js';
+
+export const useButton = (props: ButtonProps): ButtonState => {
+    const { appearance, shape, size, disabled, ...buttonProps } = props;
+
+    return {
+        appearance: appearance ?? 'secondary',
+        shape: shape ?? 'rounded',
+        size: size ?? 'medium',
+        disabled: disabled ?? false,
+
+        components: { root: buttonProps.as ?? 'button' },
+
+        root: { as: buttonProps.as ?? 'button', ...buttonProps } as ButtonState['root'],
+    };
+};

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

@@ -0,0 +1,151 @@
+import { makeStyles, makeResetStyles, mergeClasses, shorthands } from 'css-engine-test-pb';
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { ButtonSlots, ButtonState } from './Button.types.js';
+import { Tokens } from '../../Theme/tokens.js';
+
+export const buttonClassNames: SlotClassNames<ButtonSlots> = {
+    root: 'Button'
+};
+
+const useRootBaseClassName = makeResetStyles({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    textDecorationLine: 'none',
+    verticalAlign: 'center',
+
+    margin: 0,
+    overflow: 'hidden',
+
+    backgroundColor: Tokens.colorNeutralBackground1,
+    color: Tokens.colorNeutralForeground1,
+    border: `${Tokens.strokeWidthThin} solid ${Tokens.colorNeutralStroke1}`,
+
+    fontFamily: Tokens.fontFamilyBase,
+    outlineStyle: 'none',
+
+    ':hover': {
+        backgroundColor: Tokens.colorNeutralBackground1Hover,
+        borderColor: Tokens.colorNeutralStroke1Hover,
+        color: Tokens.colorNeutralForeground1,
+
+        cursor: 'pointer'
+    },
+
+    ':hover:active,:active:focus-visible': {
+        backgroundColor: Tokens.colorNeutralBackground1Pressed,
+        borderColor: Tokens.colorNeutralStroke1Pressed,
+        color: Tokens.colorNeutralForeground1,
+
+        outlineStyle: 'none'
+    },
+
+    padding: '5px 12px',
+    minWidth: '96px',
+    borderRadius: Tokens.borderRadiusMedium,
+
+    fontSize: Tokens.fontSize300,
+    fontWeight: Tokens.fontWeightRegular,
+    lineHeight: Tokens.lineHeight300,
+
+    transitionDuration: Tokens.durationNormal,
+    transitionProperty: 'background, border, color',
+    transitionTimingFunction: Tokens.curveEasy
+});
+
+const useRootStyles = makeStyles({
+    primary: {
+        backgroundColor: Tokens.colorBrandBackground,
+        ...shorthands.borderColor('transparent'),
+        color: Tokens.colorBrandForeground1,
+
+        ':hover': {
+            backgroundColor: Tokens.colorBrandBackgroundHover,
+            ...shorthands.borderColor('transparent'),
+            color: Tokens.colorBrandForeground1Hover
+        },
+
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: Tokens.colorBrandBackgroundPressed,
+            ...shorthands.borderColor('transparent'),
+            color: Tokens.colorBrandForeground1Hover
+        },
+    },
+    secondary: {},
+    tertiary: {
+        backgroundColor: 'transparent',
+        ...shorthands.borderColor('transparent'),
+        color: Tokens.colorNeutralForeground1,
+
+        ':hover': {
+            backgroundColor: 'transparent',
+            ...shorthands.borderColor('transparent'),
+            color: Tokens.colorBrandBackground
+        },
+
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: 'transparent',
+            ...shorthands.borderColor('transparent'),
+            color: Tokens.colorBrandBackgroundPressed
+        },
+    },
+
+    circular: { borderRadius: Tokens.borderRadiusCircular },
+    rounded: {},
+    square: { borderRadius: Tokens.borderRadiusNone },
+
+    small: {
+        minWidth: '64px',
+        padding: '3px 8px',
+        borderRadius: Tokens.borderRadiusMedium,
+
+        fontSize: Tokens.fontSize200,
+        fontWeight: Tokens.fontWeightRegular,
+        lineHeight: Tokens.lineHeight200
+    },
+    medium: {},
+    large: {
+        minWidth: '96px',
+        padding: '8px 16px',
+        borderRadius: Tokens.borderRadiusMedium,
+
+        fontSize: Tokens.fontSize400,
+        fontWeight: Tokens.fontWeightMedium,
+        lineHeight: Tokens.lineHeight400
+    }
+});
+
+const useRootDisabledstyles = makeStyles({
+    base: {},
+    primary: {},
+    secondary: {},
+    tertiary: {}
+});
+
+export const useButtonStyles = (state: ButtonState): ButtonState => {
+
+    const rootBaseClassName = useRootBaseClassName();
+
+    const rootStyles = useRootStyles();
+    const rootDisabledStyles = useRootDisabledstyles();
+
+    const { appearance, disabled, shape, size } = state;
+
+    state.root.className = mergeClasses(
+        buttonClassNames.root,
+        rootBaseClassName,
+
+        appearance && rootStyles[appearance],
+
+        rootStyles[size],
+        rootStyles[shape],
+
+        disabled && rootDisabledStyles.base,
+        appearance && disabled && rootDisabledStyles[appearance],
+
+        state.root.className,
+    );
+
+    return state;
+};

package/src/Components/Text/useText.ts

@@ -1,6 +1,5 @@
 import type { TextProps, TextState } from './Text.types.js';
 
-
 export const useText = (props: TextProps): TextState => {
     const { font, size, weight, ...rest } = props;
 

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

@@ -1,6 +1,7 @@
 import { makeStyles, mergeClasses } from 'css-engine-test-pb';
 import { SlotClassNames } from '../../Types/compose/types.js';
 import { TextSlots, TextState } from './Text.types.js';
+import { Tokens } from '../../Theme/tokens.js';
 
 
 export const textClassNames: SlotClassNames<TextSlots> = {
@@ -10,43 +11,52 @@ export const textClassNames: SlotClassNames<TextSlots> = {
 const useStyles = makeStyles({
     root: {
         fontFamily: 'Neue Montreal',
-        fontSize: '14px',
-        lineHeight: '20px',
-        fontWeight: 450,
+        fontSize: Tokens.fontSize300,
+        lineHeight: Tokens.lineHeight300,
+        fontWeight: Tokens.fontWeightRegular,
         display: 'inline',
         whiteSpace: 'normal',
         overflow: 'visible',
         textOverflow: 'clip'
     },
     size100: {
-
+        fontSize: Tokens.fontSize100,
+        lineHeight: Tokens.lineHeight100
     },
     size200: {
-
+        fontSize: Tokens.fontSize200,
+        lineHeight: Tokens.lineHeight200
     },
     size300: {
 
     },
     size400: {
-
+        fontSize: Tokens.fontSize400,
+        lineHeight: Tokens.lineHeight400
     },
     size500: {
-
+        fontSize: Tokens.fontSize500,
+        lineHeight: Tokens.lineHeight500
     },
     size600: {
-
+        fontSize: Tokens.fontSize600,
+        lineHeight: Tokens.lineHeight600
     },
     size700: {
-
+        fontSize: Tokens.fontSize700,
+        lineHeight: Tokens.lineHeight700
     },
     size800: {
-
+        fontSize: Tokens.fontSize800,
+        lineHeight: Tokens.lineHeight800
     },
     size900: {
-
+        fontSize: Tokens.fontSize900,
+        lineHeight: Tokens.lineHeight900
     },
     size1000: {
-
+        fontSize: Tokens.fontSize1000,
+        lineHeight: Tokens.lineHeight1000
     },
     monospace: {
 
@@ -55,13 +65,13 @@ const useStyles = makeStyles({
 
     },
     weightMedium: {
-        fontWeight: 530
+        fontWeight: Tokens.fontWeightMedium
     },
     weightSemibold: {
-        fontWeight: 700
+        fontWeight: Tokens.fontWeightSemibold
     },
     weightBold: {
-        fontWeight: 800
+        fontWeight: Tokens.fontWeightBold
     }
 });
 

package/src/Theme/tokens.ts

@@ -0,0 +1,98 @@
+export const Tokens = {
+    fontFamilyBase: 'Neue Montreal',
+    fontFamilyMonospace: "'Courier New', Courier, monospace",
+    fontFamilyNumeric: 'Neue Montreal',
+
+    fontSize100: '10px',
+    fontSize200: '12px',
+    fontSize300: '14px',
+    fontSize400: '16px',
+    fontSize500: '20px',
+    fontSize600: '24px',
+    fontSize700: '28px',
+    fontSize800: '32px',
+    fontSize900: '40px',
+    fontSize1000: '68px',
+
+    lineHeight100: '14px',
+    lineHeight200: '16px',
+    lineHeight300: '20px',
+    lineHeight400: '22px',
+    lineHeight500: '28px',
+    lineHeight600: '32px',
+    lineHeight700: '36px',
+    lineHeight800: '40px',
+    lineHeight900: '52px',
+    lineHeight1000: '92px',
+
+    fontWeightRegular: 450,
+    fontWeightMedium: 530,
+    fontWeightSemibold: 700,
+    fontWeightBold: 800,
+
+    borderRadiusNone: '0px',
+    borderRadiusSmall: '2px',
+    borderRadiusMedium: '4px',
+    borderRadiusLarge: '6px',
+    borderRadiusXLarge: '8px',
+    borderRadiusCircular: '9999px',
+
+    strokeWidthThin: '1px',
+    strokeWidthThick: '2px',
+    strokeWidthThicker: '4px',
+
+    spacingXXS: '2px',
+    spacingXS: '4px',
+    spacingSNudge: '6px',
+    spacingS: '8px',
+    spacingMNudge: '10px',
+    spacingM: '12px',
+    spacingL: '16px',
+    spacingXL: '20px',
+    spacingXXL: '24px',
+    spacingXXXL: '32px',
+
+    colorNeutralForeground1: '#242424',
+    colorNeutralForegroundDisabled: '#bdbdbd',
+    colorNeutralForegroundOnBrand: '#ffffff',
+
+    colorNeutralBackground1: '#ffffff',
+    colorNeutralBackground1Hover: '#f5f5f5',
+    colorNeutralBackground1Pressed: '#e0e0e0',
+    colorNeutralBackground3: '#f5f5f5',
+    colorNeutralBackgroundDisabled: '#f0f0f0',
+
+    colorNeutralStroke1: '#cccccc',
+    colorNeutralStroke1Hover: '#b3b3b3',
+    colorNeutralStroke1Pressed: '#999999',
+    colorNeutralStrokeDisabled: '#e0e0e0',
+
+    colorBrandBackground: '#312dfb',
+    colorBrandBackgroundHover: '#2b28e2',
+    colorBrandBackgroundPressed: '#2522c9',
+
+    colorBrandStroke1: '#312dfb',
+    colorBrandStroke1Hover: '#2b28e2',
+    colorBrandStroke1Pressed: '#2522c9',
+
+    colorBrandForeground1: '#ffffff',
+    colorBrandForeground1Hover: '#ffffff',
+    colorBrandForeground1Pressed: '#ffffff',
+
+    colorSubtleBackground: 'transparent',
+    colorSubtleBackgroundHover: '#f5f5f5',
+    colorSubtleBackgroundPressed: '#e0e0e0',
+
+    colorTransparentBackground: 'transparent',
+    colorTransparentStroke: 'transparent',
+
+    durationNormal: '150ms',
+    durationFast: '100ms',
+    durationSlow: '300ms',
+    curveEasy: 'cubic-bezier(0.33,0,0.67,1)',
+    curveDecelerate: 'cubic-bezier(0,0,0,1)',
+    curveAccelerate: 'cubic-bezier(1,0,1,1)',
+
+} as const;
+
+export type Tokens = typeof Tokens;

package/src/index.ts

@@ -11,5 +11,18 @@ export type {
     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';