components-test-pb 0.1.3 → 0.1.5

package/src/Components/Table/useTableBodyStyles.styles.ts

@@ -1,23 +0,0 @@
-import { makeResetStyles, mergeClasses } from 'css-engine-test-pb';
-import { SlotClassNames } from '../../Types/compose/types.js';
-import { TableBodySlots, TableBodyState } from './TableBody.types.js';
-
-export const tableBodyClassNames: SlotClassNames<TableBodySlots> = {
-    root: 'TableBody'
-};
-
-const useRootBaseClassName = makeResetStyles({
-    display: 'table-row-group',
-});
-
-export const useTableBodyStyles = (state: TableBodyState): TableBodyState => {
-    const rootBaseClassName = useRootBaseClassName();
-
-    state.root.className = mergeClasses(
-        tableBodyClassNames.root,
-        rootBaseClassName,
-        state.root.className,
-    );
-
-    return state;
-};

package/src/Components/Table/useTableCell.ts

@@ -1,9 +0,0 @@
-import type { TableCellProps, TableCellState } from './TableCell.types.js';
-
-export const useTableCell = (props: TableCellProps): TableCellState => {
-    return {
-        components: { root: 'td' },
-
-        root: { ...props } as TableCellState['root'],
-    };
-};

package/src/Components/Table/useTableCellStyles.styles.ts

@@ -1,28 +0,0 @@
-import { makeResetStyles, mergeClasses } from 'css-engine-test-pb';
-import { SlotClassNames } from '../../Types/compose/types.js';
-import { TableCellSlots, TableCellState } from './TableCell.types.js';
-import { Tokens } from '../../Theme/tokens.js';
-
-export const tableCellClassNames: SlotClassNames<TableCellSlots> = {
-    root: 'TableCell'
-};
-
-const useRootBaseClassName = makeResetStyles({
-    textAlign: 'left',
-    paddingTop: Tokens.spacingS,
-    paddingBottom: Tokens.spacingS,
-    paddingLeft: Tokens.spacingM,
-    paddingRight: Tokens.spacingM,
-});
-
-export const useTableCellStyles = (state: TableCellState): TableCellState => {
-    const rootBaseClassName = useRootBaseClassName();
-
-    state.root.className = mergeClasses(
-        tableCellClassNames.root,
-        rootBaseClassName,
-        state.root.className,
-    );
-
-    return state;
-};

package/src/Components/Table/useTableHeader.ts

@@ -1,9 +0,0 @@
-import type { TableHeaderProps, TableHeaderState } from './TableHeader.types.js';
-
-export const useTableHeader = (props: TableHeaderProps): TableHeaderState => {
-    return {
-        components: { root: 'thead' },
-
-        root: { ...props } as TableHeaderState['root'],
-    };
-};

package/src/Components/Table/useTableHeaderCell.ts

@@ -1,19 +0,0 @@
-import type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types.js';
-
-export const useTableHeaderCell = (props: TableHeaderCellProps): TableHeaderCellState => {
-    const { sortDirection, ...rest } = props;
-
-    const root = { ...rest } as TableHeaderCellState['root'];
-
-    if (sortDirection) {
-        root['aria-sort'] = sortDirection;
-    }
-
-    return {
-        sortDirection,
-
-        components: { root: 'th' },
-
-        root,
-    };
-};

package/src/Components/Table/useTableHeaderCellStyles.styles.ts

@@ -1,40 +0,0 @@
-import { makeStyles, makeResetStyles, mergeClasses } from 'css-engine-test-pb';
-import { SlotClassNames } from '../../Types/compose/types.js';
-import { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types.js';
-import { Tokens } from '../../Theme/tokens.js';
-
-export const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {
-    root: 'TableHeaderCell'
-};
-
-const useRootBaseClassName = makeResetStyles({
-    fontWeight: Tokens.fontWeightSemibold,
-    textAlign: 'left',
-    paddingTop: Tokens.spacingS,
-    paddingBottom: Tokens.spacingS,
-    paddingLeft: Tokens.spacingM,
-    paddingRight: Tokens.spacingM,
-});
-
-const useRootStyles = makeStyles({
-    ascending: {
-        cursor: 'pointer',
-    },
-    descending: {
-        cursor: 'pointer',
-    },
-});
-
-export const useTableHeaderCellStyles = (state: TableHeaderCellState): TableHeaderCellState => {
-    const rootBaseClassName = useRootBaseClassName();
-    const rootStyles = useRootStyles();
-
-    state.root.className = mergeClasses(
-        tableHeaderCellClassNames.root,
-        rootBaseClassName,
-        state.sortDirection && rootStyles[state.sortDirection],
-        state.root.className,
-    );
-
-    return state;
-};

package/src/Components/Table/useTableHeaderStyles.styles.ts

@@ -1,23 +0,0 @@
-import { makeResetStyles, mergeClasses } from 'css-engine-test-pb';
-import { SlotClassNames } from '../../Types/compose/types.js';
-import { TableHeaderSlots, TableHeaderState } from './TableHeader.types.js';
-
-export const tableHeaderClassNames: SlotClassNames<TableHeaderSlots> = {
-    root: 'TableHeader'
-};
-
-const useRootBaseClassName = makeResetStyles({
-    display: 'table-header-group',
-});
-
-export const useTableHeaderStyles = (state: TableHeaderState): TableHeaderState => {
-    const rootBaseClassName = useRootBaseClassName();
-
-    state.root.className = mergeClasses(
-        tableHeaderClassNames.root,
-        rootBaseClassName,
-        state.root.className,
-    );
-
-    return state;
-};

package/src/Components/Table/useTableRow.ts

@@ -1,13 +0,0 @@
-import type { TableRowProps, TableRowState } from './TableRow.types.js';
-
-export const useTableRow = (props: TableRowProps): TableRowState => {
-    const { appearance, ...rest } = props;
-
-    return {
-        appearance: appearance ?? 'none',
-
-        components: { root: 'tr' },
-
-        root: { ...rest } as TableRowState['root'],
-    };
-};

package/src/Components/Table/useTableRowStyles.styles.ts

@@ -1,45 +0,0 @@
-import { makeStyles, makeResetStyles, mergeClasses } from 'css-engine-test-pb';
-import { SlotClassNames } from '../../Types/compose/types.js';
-import { TableRowSlots, TableRowState } from './TableRow.types.js';
-import { Tokens } from '../../Theme/tokens.js';
-
-export const tableRowClassNames: SlotClassNames<TableRowSlots> = {
-    root: 'TableRow'
-};
-
-const useRootBaseClassName = makeResetStyles({
-    borderBottom: `${Tokens.strokeWidthThin} solid ${Tokens.colorNeutralStroke1}`,
-    transitionDuration: Tokens.durationNormal,
-    transitionProperty: 'background',
-    transitionTimingFunction: Tokens.curveEasy,
-});
-
-const useRootStyles = makeStyles({
-    none: {
-        ':hover': {
-            backgroundColor: Tokens.colorNeutralBackground1Hover,
-        },
-    },
-    brand: {
-        backgroundColor: Tokens.colorBrandBackground,
-        color: Tokens.colorBrandForeground1,
-
-        ':hover': {
-            backgroundColor: Tokens.colorBrandBackgroundHover,
-        },
-    },
-});
-
-export const useTableRowStyles = (state: TableRowState): TableRowState => {
-    const rootBaseClassName = useRootBaseClassName();
-    const rootStyles = useRootStyles();
-
-    state.root.className = mergeClasses(
-        tableRowClassNames.root,
-        rootBaseClassName,
-        rootStyles[state.appearance],
-        state.root.className,
-    );
-
-    return state;
-};

package/src/Components/Table/useTableStyles.styles.ts

@@ -1,35 +0,0 @@
-import { makeStyles, makeResetStyles, mergeClasses } from 'css-engine-test-pb';
-import { SlotClassNames } from '../../Types/compose/types.js';
-import { TableSlots, TableState } from './Table.types.js';
-import { Tokens } from '../../Theme/tokens.js';
-
-export const tableClassNames: SlotClassNames<TableSlots> = {
-    root: 'Table'
-};
-
-const useRootBaseClassName = makeResetStyles({
-    borderCollapse: 'collapse',
-    width: '100%',
-    fontFamily: Tokens.fontFamilyBase,
-    fontSize: Tokens.fontSize300,
-    lineHeight: Tokens.lineHeight300,
-});
-
-const useRootStyles = makeStyles({
-    small: {},
-    medium: {},
-});
-
-export const useTableStyles = (state: TableState): TableState => {
-    const rootBaseClassName = useRootBaseClassName();
-    const rootStyles = useRootStyles();
-
-    state.root.className = mergeClasses(
-        tableClassNames.root,
-        rootBaseClassName,
-        rootStyles[state.size],
-        state.root.className,
-    );
-
-    return state;
-};

package/src/Components/Text/Text.tsx

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

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

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

package/src/Components/Text/index.ts

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

package/src/Components/Text/renderText.tsx

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

package/src/Components/Text/useText.ts

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

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

@@ -1,103 +0,0 @@
-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> = {
-    root: 'Text'
-};
-
-const useStyles = makeStyles({
-    root: {
-        fontFamily: 'Neue Montreal',
-        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: {
-        fontFamily: Tokens.fontFamilyMonospace
-    },
-    numeric: {
-        fontFamily: Tokens.fontFamilyNumeric
-    },
-    weightMedium: {
-        fontWeight: Tokens.fontWeightMedium
-    },
-    weightSemibold: {
-        fontWeight: Tokens.fontWeightSemibold
-    },
-    weightBold: {
-        fontWeight: Tokens.fontWeightBold
-    }
-});
-
-export const useTextStyles = (state: TextState): TextState => {
-
-    const styles = useStyles();
-
-    state.root.className = mergeClasses(
-        textClassNames.root,
-        styles.root,
-        state.size === 100 && styles.size100,
-        state.size === 200 && styles.size200,
-        state.size === 300 && styles.size300,
-        state.size === 400 && styles.size400,
-        state.size === 500 && styles.size500,
-        state.size === 600 && styles.size600,
-        state.size === 700 && styles.size700,
-        state.size === 800 && styles.size800,
-        state.size === 900 && styles.size900,
-        state.size === 1000 && styles.size1000,
-        state.font === 'monospace' && styles.monospace,
-        state.font === 'numeric' && styles.numeric,
-        state.weight === 'medium' && styles.weightMedium,
-        state.weight === 'semibold' && styles.weightSemibold,
-        state.weight === 'bold' && styles.weightBold
-    );
-
-    return state;
-}

package/src/Theme/tokens.ts

@@ -1,98 +0,0 @@
-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/Types/compose/index.ts

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

package/src/Types/compose/types.ts

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

package/src/Types/utils/index.ts

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