components-test-pb 0.2.4 → 0.2.6

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

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

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

@@ -1,15 +1,14 @@
-import { slot, useARIAButtonProps } from '../../../utilities';
+import { getIntrinsicElementProps, 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,
+    const { appearance, disabled, shape, size } = props;
+    const rootProps = slot.always(getIntrinsicElementProps('button', props), { elementType: 'button' });
+    const state = {
+        appearance: appearance ?? 'secondary',
+        disabled: disabled ?? false,
+        shape: shape ?? 'rounded',
+        size: size ?? 'medium',
         components: { root: 'button' },
         root: useARIAButtonProps(rootProps.as ?? 'button', rootProps),
     };
+    return state;
 };

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

@@ -59,13 +59,16 @@ const useVariationStyles = makeStyles({
     ghost: {
         backgroundColor: tokens.colorTransparentBackground,
         ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForeground2,
         ':hover': {
             backgroundColor: tokens.colorTransparentBackgroundHover,
-            ...shorthands.borderColor('transparent')
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForeground2BrandHover
         },
         ':hover:active,:active:focus-visible': {
             backgroundColor: tokens.colorTransparentBackgroundPressed,
-            ...shorthands.borderColor('transparent')
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForeground2BrandPressed
         }
     },
     square: { borderRadius: 0 },

package/dist/components/Text/Text.d.ts

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

package/dist/components/Text/Text.js

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

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

@@ -0,0 +1,16 @@
+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'>;
+};
+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'>>;

package/dist/components/Text/Text.types.js

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

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

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

package/dist/components/Text/index.js

@@ -0,0 +1,4 @@
+export { Text } from './Text';
+export { useText } from './useText';
+export { renderText } from './renderText';
+export { useTextStyles, textClassNames } from './useTextStyles.styles';

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

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

package/dist/components/Text/renderText.js

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

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

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

package/dist/components/Text/useText.js

@@ -0,0 +1,19 @@
+import { getIntrinsicElementProps, slot } from '../../utilities';
+export const useText = (props) => {
+    const { wrap, truncate, italic, underline, strikethrough, size, font, weight } = props;
+    const state = {
+        font: font ?? 'base',
+        italic: italic ?? false,
+        size: size ?? 300,
+        strikethrough: strikethrough ?? false,
+        truncate: truncate ?? false,
+        underline: underline ?? false,
+        weight: weight ?? 'regular',
+        wrap: wrap ?? false,
+        components: { root: 'span' },
+        root: slot.always(getIntrinsicElementProps('span', props), {
+            elementType: 'span',
+        })
+    };
+    return state;
+};

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

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

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

@@ -0,0 +1,71 @@
+import { makeResetStyles, makeStyles, mergeClasses } from 'css-engine-test-pb';
+import { tokens } from '../../theme';
+export const textClassNames = {
+    root: 'c-text',
+};
+const useResetStyles = makeResetStyles({
+    fontFamily: tokens.fontFamilyBase,
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightRegular,
+    lineHeight: tokens.lineHeightBase300,
+    color: tokens.colorNeutralForeground1,
+    textAlign: 'start',
+    whiteSpace: 'normal',
+    overflow: 'visible',
+    textOverflow: 'clip',
+    margin: 0,
+    padding: 0,
+    display: 'inline',
+});
+const useVariationStyles = makeStyles({
+    base: { fontFamily: tokens.fontFamilyBase },
+    monospace: { fontFamily: tokens.fontFamilyMonospace },
+    numeric: { fontFamily: tokens.fontFamilyNumeric },
+    100: {
+        fontSize: tokens.fontSizeBase100,
+        lineHeight: tokens.lineHeightBase100,
+    },
+    200: {
+        fontSize: tokens.fontSizeBase200,
+        lineHeight: tokens.lineHeightBase200,
+    },
+    300: {
+        fontSize: tokens.fontSizeBase300,
+        lineHeight: tokens.lineHeightBase300,
+    },
+    400: {
+        fontSize: tokens.fontSizeBase400,
+        lineHeight: tokens.lineHeightBase400,
+    },
+    500: {
+        fontSize: tokens.fontSizeBase500,
+        lineHeight: tokens.lineHeightBase500,
+    },
+    600: {
+        fontSize: tokens.fontSizeBase600,
+        lineHeight: tokens.lineHeightBase600,
+    },
+    regular: { fontWeight: tokens.fontWeightRegular },
+    medium: { fontWeight: tokens.fontWeightMedium },
+    semibold: { fontWeight: tokens.fontWeightSemibold },
+    bold: { fontWeight: tokens.fontWeightBold },
+    italic: { fontStyle: 'italic' },
+    strikethrough: { textDecorationLine: 'line-through' },
+    underline: { textDecorationLine: 'underline' },
+    strikethroughUnderline: { textDecorationLine: 'line-through underline' },
+    truncate: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+    nowrap: {
+        whiteSpace: 'nowrap',
+    },
+});
+export const useTextStyles = (state) => {
+    const resetStyles = useResetStyles();
+    const styles = useVariationStyles();
+    const { font, italic, size, strikethrough, truncate, underline, weight, wrap } = state;
+    state.root.className = mergeClasses(textClassNames.root, resetStyles, styles[font], styles[size], styles[weight], italic && styles.italic, strikethrough && !underline && styles.strikethrough, underline && !strikethrough && styles.underline, strikethrough && underline && styles.strikethroughUnderline, truncate && styles.truncate, !wrap && styles.nowrap, state.root.className);
+    return state;
+};

package/dist/components/index.d.ts

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

package/dist/components/index.js

@@ -1 +1,3 @@
+// <Button />
 export { Button, useButton, renderButton, useButtonStyles, buttonClassNames, } from './Button/src';
+export { Text, useText, renderText, useTextStyles, textClassNames, } from './Text';

package/dist/index.d.ts

@@ -1,6 +1,8 @@
-export { assertSlots, slot, useARIAButtonProps } from './utilities';
+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 { 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,3 +1,4 @@
-export { assertSlots, slot, useARIAButtonProps } from './utilities';
+export { assertSlots, getIntrinsicElementProps, slot, useARIAButtonProps } from './utilities';
 export { tokens, defaultTheme, themeToCSS, insertTheme } from './theme';
 export { Button, useButton, renderButton, useButtonStyles, buttonClassNames, } from './components';
+export { Text, useText, renderText, useTextStyles, textClassNames, } from './components';

package/dist/theme/defaultTheme.js

@@ -16,6 +16,9 @@ export const defaultTheme = {
     colorNeutralForeground2: '#424242',
     colorNeutralForeground2Hover: '#242424',
     colorNeutralForeground2Pressed: '#242424',
+    colorNeutralForeground2BrandHover: '#0f6cbd',
+    colorNeutralForeground2BrandPressed: '#0c3b5e',
+    colorNeutralForeground2BrandSelected: '#0f548c',
     colorNeutralForeground3: '#616161',
     colorNeutralForegroundDisabled: '#bdbdbd',
     // Colors — Neutral Background

package/dist/theme/types.d.ts

@@ -14,6 +14,9 @@ export interface Theme {
     colorNeutralForeground2: string;
     colorNeutralForeground2Hover: string;
     colorNeutralForeground2Pressed: string;
+    colorNeutralForeground2BrandHover: string;
+    colorNeutralForeground2BrandPressed: string;
+    colorNeutralForeground2BrandSelected: string;
     colorNeutralForeground3: string;
     colorNeutralForegroundDisabled: string;
     colorNeutralBackground1: string;

package/dist/utilities/index.d.ts

@@ -1,2 +1,2 @@
-export { assertSlots, slot, useARIAButtonProps } from './src';
+export { assertSlots, getIntrinsicElementProps, 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 { assertSlots, slot, useARIAButtonProps } from './src';
+export { assertSlots, getIntrinsicElementProps, slot, useARIAButtonProps } from './src';

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

@@ -0,0 +1,2 @@
+import type { UnknownSlotProps, JSXIntrinsicElementKeys } from './types';
+export declare function getIntrinsicElementProps<Props extends UnknownSlotProps & Record<string, any>>(tagName: JSXIntrinsicElementKeys, props: Props): Props;

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

@@ -0,0 +1,53 @@
+// 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) {
+    return nativeProps.has(key) || key.startsWith('data-') || key.startsWith('aria-');
+}
+export function getIntrinsicElementProps(tagName, props) {
+    const result = {};
+    for (const key of Object.keys(props)) {
+        if (isNativeProp(key)) {
+            result[key] = props[key];
+        }
+    }
+    if (!result.as) {
+        result.as = tagName;
+    }
+    return result;
+}

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

@@ -1,3 +1,4 @@
 export { assertSlots } from './assertSlots';
+export { getIntrinsicElementProps } from './getIntrinsicElementProps';
 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

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

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

@@ -1,4 +1,4 @@
-export { assertSlots, slot } from './compose';
+export { assertSlots, getIntrinsicElementProps, 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

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

package/package.json

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

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

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

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

@@ -1,26 +1,25 @@
-import { slot, useARIAButtonProps } from '../../../utilities';
+import { getIntrinsicElementProps, 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 { appearance, disabled, shape, size } = props;
 
-    const rootProps = slot.always<ARIAButtonSlotProps<'a'>>(rest, {
-        elementType: 'button',
-    });
+    const rootProps = slot.always<ARIAButtonSlotProps<'a'>>(
+        getIntrinsicElementProps('button', props),
+        { elementType: 'button' },
+    );
+
+    const state: ButtonState = {
+        appearance: appearance ?? 'secondary',
+        disabled: disabled ?? false,
+        shape: shape ?? 'rounded',
+        size: size ?? 'medium',
 
-    return {
-        appearance,
-        disabled,
-        shape,
-        size,
         components: { root: 'button' },
+
         root: useARIAButtonProps(rootProps.as ?? 'button', rootProps) as ButtonState['root'],
     };
+
+    return state;
 };

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

@@ -76,15 +76,18 @@ const useVariationStyles = makeStyles({
     ghost: {
         backgroundColor: tokens.colorTransparentBackground,
         ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForeground2,
 
         ':hover': {
             backgroundColor: tokens.colorTransparentBackgroundHover,
-            ...shorthands.borderColor('transparent')
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForeground2BrandHover
         },
 
         ':hover:active,:active:focus-visible': {
             backgroundColor: tokens.colorTransparentBackgroundPressed,
-            ...shorthands.borderColor('transparent')
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForeground2BrandPressed
         }
     },
 

package/src/components/Text/Text.tsx

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

package/src/components/Text/Text.types.ts

@@ -0,0 +1,34 @@
+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'>;
+};
+
+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'
+        >
+    >;

package/src/components/Text/index.ts

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

package/src/components/Text/renderText.tsx

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

package/src/components/Text/useText.ts

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

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

@@ -0,0 +1,100 @@
+import { makeResetStyles, makeStyles, mergeClasses } from 'css-engine-test-pb';
+import type { SlotClassNames } from '../../utilities';
+import type { TextSlots, TextState } from './Text.types';
+import { tokens } from '../../theme';
+
+export const textClassNames: SlotClassNames<TextSlots> = {
+    root: 'c-text',
+};
+
+const useResetStyles = makeResetStyles({
+    fontFamily: tokens.fontFamilyBase,
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightRegular,
+    lineHeight: tokens.lineHeightBase300,
+    color: tokens.colorNeutralForeground1,
+    textAlign: 'start',
+    whiteSpace: 'normal',
+    overflow: 'visible',
+    textOverflow: 'clip',
+    margin: 0,
+    padding: 0,
+    display: 'inline',
+});
+
+const useVariationStyles = makeStyles({
+    base: { fontFamily: tokens.fontFamilyBase },
+    monospace: { fontFamily: tokens.fontFamilyMonospace },
+    numeric: { fontFamily: tokens.fontFamilyNumeric },
+
+    100: {
+        fontSize: tokens.fontSizeBase100,
+        lineHeight: tokens.lineHeightBase100,
+    },
+    200: {
+        fontSize: tokens.fontSizeBase200,
+        lineHeight: tokens.lineHeightBase200,
+    },
+    300: {
+        fontSize: tokens.fontSizeBase300,
+        lineHeight: tokens.lineHeightBase300,
+    },
+    400: {
+        fontSize: tokens.fontSizeBase400,
+        lineHeight: tokens.lineHeightBase400,
+    },
+    500: {
+        fontSize: tokens.fontSizeBase500,
+        lineHeight: tokens.lineHeightBase500,
+    },
+    600: {
+        fontSize: tokens.fontSizeBase600,
+        lineHeight: tokens.lineHeightBase600,
+    },
+
+    regular: { fontWeight: tokens.fontWeightRegular },
+    medium: { fontWeight: tokens.fontWeightMedium },
+    semibold: { fontWeight: tokens.fontWeightSemibold },
+    bold: { fontWeight: tokens.fontWeightBold },
+
+    italic: { fontStyle: 'italic' },
+    strikethrough: { textDecorationLine: 'line-through' },
+    underline: { textDecorationLine: 'underline' },
+    strikethroughUnderline: { textDecorationLine: 'line-through underline' },
+
+    truncate: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+    nowrap: {
+        whiteSpace: 'nowrap',
+    },
+});
+
+export const useTextStyles = (state: TextState): TextState => {
+    const resetStyles = useResetStyles();
+    const styles = useVariationStyles();
+
+    const { font, italic, size, strikethrough, truncate, underline, weight, wrap } = state;
+
+    state.root.className = mergeClasses(
+        textClassNames.root,
+        resetStyles,
+
+        styles[font],
+        styles[size],
+        styles[weight],
+
+        italic && styles.italic,
+        strikethrough && !underline && styles.strikethrough,
+        underline && !strikethrough && styles.underline,
+        strikethrough && underline && styles.strikethroughUnderline,
+        truncate && styles.truncate,
+        !wrap && styles.nowrap,
+
+        state.root.className,
+    );
+
+    return state;
+};

package/src/components/index.ts

@@ -1,10 +1,4 @@
-export {
-    Button,
-    useButton,
-    renderButton,
-    useButtonStyles,
-    buttonClassNames,
-} from './Button/src';
+// <Button />
 
 export type {
     ButtonSlots,
@@ -14,3 +8,28 @@ export type {
     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';
+

package/src/index.ts

@@ -1,4 +1,4 @@
-export { assertSlots, slot, useARIAButtonProps } from './utilities';
+export { assertSlots, getIntrinsicElementProps, slot, useARIAButtonProps } from './utilities';
 
 export { tokens, defaultTheme, themeToCSS, insertTheme } from './theme';
 export type { Theme } from './theme';
@@ -20,6 +20,20 @@ export type {
     ButtonState,
 } from './components';
 
+export {
+    Text,
+    useText,
+    renderText,
+    useTextStyles,
+    textClassNames,
+} from './components';
+
+export type {
+    TextSlots,
+    TextProps,
+    TextState,
+} from './components';
+
 export type {
     JSXIntrinsicElementKeys,
     JSXIntrinsicElement,

package/src/theme/defaultTheme.ts

@@ -19,6 +19,9 @@ export const defaultTheme: Theme = {
     colorNeutralForeground2: '#424242',
     colorNeutralForeground2Hover: '#242424',
     colorNeutralForeground2Pressed: '#242424',
+    colorNeutralForeground2BrandHover: '#0f6cbd',
+    colorNeutralForeground2BrandPressed: '#0c3b5e',
+    colorNeutralForeground2BrandSelected: '#0f548c',
     colorNeutralForeground3: '#616161',
     colorNeutralForegroundDisabled: '#bdbdbd',
 

package/src/theme/types.ts

@@ -17,6 +17,9 @@ export interface Theme {
     colorNeutralForeground2: string;
     colorNeutralForeground2Hover: string;
     colorNeutralForeground2Pressed: string;
+    colorNeutralForeground2BrandHover: string;
+    colorNeutralForeground2BrandPressed: string;
+    colorNeutralForeground2BrandSelected: string;
     colorNeutralForeground3: string;
     colorNeutralForegroundDisabled: string;
 

package/src/utilities/index.ts

@@ -1,4 +1,4 @@
-export { assertSlots, slot, useARIAButtonProps } from './src';
+export { assertSlots, getIntrinsicElementProps, slot, useARIAButtonProps } from './src';
 
 export type {
     JSXIntrinsicElementKeys,

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

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

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

@@ -1,4 +1,5 @@
 export { assertSlots } from './assertSlots';
+export { getIntrinsicElementProps } from './getIntrinsicElementProps';
 export { slot } from './slot';
 
 export type {

package/src/utilities/src/index.ts

@@ -1,4 +1,4 @@
-export { assertSlots, slot } from './compose';
+export { assertSlots, getIntrinsicElementProps, slot } from './compose';
 export { useARIAButtonProps } from './ARIA';
 
 export type {