components-test-pb 0.1.3 → 0.1.5

package/dist/utilities/useARIAButtonProps.js

@@ -1,75 +0,0 @@
-const noop = () => { };
-export const useARIAButtonProps = (tag, props = {}) => {
-    const { disabled, disabledFocusable, onClick, onKeyDown, onKeyUp, ...rest } = props;
-    const isDisabled = disabled || disabledFocusable;
-    const handleClick = (e) => {
-        if (isDisabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        onClick?.(e);
-    };
-    if (tag === 'button') {
-        const result = {
-            ...rest,
-            onClick: handleClick,
-            onKeyDown: isDisabled ? (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-            } : onKeyDown,
-            onKeyUp: isDisabled ? (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-            } : onKeyUp,
-        };
-        if (disabled && !disabledFocusable) {
-            result.disabled = '';
-        }
-        else if (disabledFocusable) {
-            result['aria-disabled'] = 'true';
-        }
-        return result;
-    }
-    const handleKeyDown = (e) => {
-        if (isDisabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            e.target?.click();
-        }
-        onKeyDown?.(e);
-    };
-    const handleKeyUp = (e) => {
-        if (isDisabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        if (e.key === ' ') {
-            e.preventDefault();
-            e.target?.click();
-        }
-        onKeyUp?.(e);
-    };
-    const result = {
-        ...rest,
-        role: 'button',
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        onKeyUp: handleKeyUp,
-    };
-    if (isDisabled) {
-        result['aria-disabled'] = 'true';
-        if (tag === 'a') {
-            delete result.href;
-        }
-    }
-    if (!disabled || disabledFocusable) {
-        result.tabIndex = rest.tabIndex ?? 0;
-    }
-    return result;
-};

package/src/Components/Button/Button.tsx

@@ -1,13 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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;
-    disabledFocusable?: 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' | 'disabledFocusable' | 'shape' | 'size'
-        >
-    >;

package/src/Components/Button/index.ts

@@ -1,11 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,198 +0,0 @@
-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: {
-        backgroundColor: Tokens.colorNeutralBackgroundDisabled,
-        ...shorthands.borderColor(Tokens.colorNeutralStrokeDisabled),
-        color: Tokens.colorNeutralForegroundDisabled,
-
-        cursor: 'not-allowed',
-
-        ':hover': {
-            backgroundColor: Tokens.colorNeutralBackgroundDisabled,
-            ...shorthands.borderColor(Tokens.colorNeutralStrokeDisabled),
-            color: Tokens.colorNeutralForegroundDisabled,
-
-            cursor: 'not-allowed'
-        },
-
-        ':hover:active,:active:focus-visible': {
-            backgroundColor: Tokens.colorNeutralBackgroundDisabled,
-            ...shorthands.borderColor(Tokens.colorNeutralStrokeDisabled),
-            color: Tokens.colorNeutralForegroundDisabled,
-
-            cursor: 'not-allowed'
-        }
-    },
-    primary: {
-        ...shorthands.borderColor('transparent'),
-
-        ':hover': {
-            ...shorthands.borderColor('transparent')
-        },
-
-        ':hover:active,:active:focus-visible': {
-            ...shorthands.borderColor('transparent')
-        }
-    },
-    secondary: {},
-    tertiary: {
-        backgroundColor: 'transparent',
-        ...shorthands.borderColor('transparent'),
-
-        ':hover': {
-            backgroundColor: 'transparent',
-            ...shorthands.borderColor('transparent')
-        },
-
-        ':hover:active,:active:focus-visible': {
-            backgroundColor: 'transparent',
-            ...shorthands.borderColor('transparent')
-        }
-    }
-});
-
-export const useButtonStyles = (state: ButtonState): ButtonState => {
-
-    const rootBaseClassName = useRootBaseClassName();
-
-    const rootStyles = useRootStyles();
-    const rootDisabledStyles = useRootDisabledstyles();
-
-    const { appearance, disabled, disabledFocusable, shape, size } = state;
-
-    const isDisabled = disabled || disabledFocusable;
-
-    state.root.className = mergeClasses(
-        buttonClassNames.root,
-        rootBaseClassName,
-
-        appearance && rootStyles[appearance],
-
-        rootStyles[size],
-        rootStyles[shape],
-
-        isDisabled && rootDisabledStyles.base,
-        appearance && isDisabled && rootDisabledStyles[appearance],
-
-        state.root.className,
-    );
-
-    return state;
-};

package/src/Components/Table/Table.tsx

@@ -1,13 +0,0 @@
-import type { FC } from '../../Types/utils/types.js';
-import type { TableProps } from './Table.types.js';
-import { useTable } from './useTable.js';
-import { renderTable } from './renderTable.js';
-import { useTableStyles } from './useTableStyles.styles.js';
-
-export const Table: FC<TableProps> = (props) => {
-    const state = useTable(props);
-
-    useTableStyles(state);
-
-    return renderTable(state);
-};

package/src/Components/Table/Table.types.ts

@@ -1,13 +0,0 @@
-import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
-
-export type TableSlots = {
-    root: NonNullable<Slot<'table'>>;
-};
-
-export type TableProps = ComponentProps<TableSlots> & {
-    size?: 'small' | 'medium';
-    sortable?: boolean;
-};
-
-export type TableState = ComponentState<TableSlots> &
-    Required<Pick<TableProps, 'size' | 'sortable'>>;

package/src/Components/Table/TableBody.tsx

@@ -1,13 +0,0 @@
-import type { FC } from '../../Types/utils/types.js';
-import type { TableBodyProps } from './TableBody.types.js';
-import { useTableBody } from './useTableBody.js';
-import { renderTableBody } from './renderTableBody.js';
-import { useTableBodyStyles } from './useTableBodyStyles.styles.js';
-
-export const TableBody: FC<TableBodyProps> = (props) => {
-    const state = useTableBody(props);
-
-    useTableBodyStyles(state);
-
-    return renderTableBody(state);
-};

package/src/Components/Table/TableBody.types.ts

@@ -1,9 +0,0 @@
-import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
-
-export type TableBodySlots = {
-    root: NonNullable<Slot<'tbody'>>;
-};
-
-export type TableBodyProps = ComponentProps<TableBodySlots>;
-
-export type TableBodyState = ComponentState<TableBodySlots>;

package/src/Components/Table/TableCell.tsx

@@ -1,13 +0,0 @@
-import type { FC } from '../../Types/utils/types.js';
-import type { TableCellProps } from './TableCell.types.js';
-import { useTableCell } from './useTableCell.js';
-import { renderTableCell } from './renderTableCell.js';
-import { useTableCellStyles } from './useTableCellStyles.styles.js';
-
-export const TableCell: FC<TableCellProps> = (props) => {
-    const state = useTableCell(props);
-
-    useTableCellStyles(state);
-
-    return renderTableCell(state);
-};

package/src/Components/Table/TableCell.types.ts

@@ -1,9 +0,0 @@
-import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
-
-export type TableCellSlots = {
-    root: NonNullable<Slot<'td'>>;
-};
-
-export type TableCellProps = ComponentProps<TableCellSlots>;
-
-export type TableCellState = ComponentState<TableCellSlots>;

package/src/Components/Table/TableHeader.tsx

@@ -1,13 +0,0 @@
-import type { FC } from '../../Types/utils/types.js';
-import type { TableHeaderProps } from './TableHeader.types.js';
-import { useTableHeader } from './useTableHeader.js';
-import { renderTableHeader } from './renderTableHeader.js';
-import { useTableHeaderStyles } from './useTableHeaderStyles.styles.js';
-
-export const TableHeader: FC<TableHeaderProps> = (props) => {
-    const state = useTableHeader(props);
-
-    useTableHeaderStyles(state);
-
-    return renderTableHeader(state);
-};

package/src/Components/Table/TableHeader.types.ts

@@ -1,9 +0,0 @@
-import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
-
-export type TableHeaderSlots = {
-    root: NonNullable<Slot<'thead'>>;
-};
-
-export type TableHeaderProps = ComponentProps<TableHeaderSlots>;
-
-export type TableHeaderState = ComponentState<TableHeaderSlots>;

package/src/Components/Table/TableHeaderCell.tsx

@@ -1,13 +0,0 @@
-import type { FC } from '../../Types/utils/types.js';
-import type { TableHeaderCellProps } from './TableHeaderCell.types.js';
-import { useTableHeaderCell } from './useTableHeaderCell.js';
-import { renderTableHeaderCell } from './renderTableHeaderCell.js';
-import { useTableHeaderCellStyles } from './useTableHeaderCellStyles.styles.js';
-
-export const TableHeaderCell: FC<TableHeaderCellProps> = (props) => {
-    const state = useTableHeaderCell(props);
-
-    useTableHeaderCellStyles(state);
-
-    return renderTableHeaderCell(state);
-};

package/src/Components/Table/TableHeaderCell.types.ts

@@ -1,13 +0,0 @@
-import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
-
-export type TableHeaderCellSlots = {
-    root: NonNullable<Slot<'th'>>;
-};
-
-export type TableHeaderCellProps = ComponentProps<TableHeaderCellSlots> & {
-    sortDirection?: 'ascending' | 'descending';
-};
-
-export type TableHeaderCellState = ComponentState<TableHeaderCellSlots> & {
-    sortDirection?: 'ascending' | 'descending';
-};

package/src/Components/Table/TableRow.tsx

@@ -1,13 +0,0 @@
-import type { FC } from '../../Types/utils/types.js';
-import type { TableRowProps } from './TableRow.types.js';
-import { useTableRow } from './useTableRow.js';
-import { renderTableRow } from './renderTableRow.js';
-import { useTableRowStyles } from './useTableRowStyles.styles.js';
-
-export const TableRow: FC<TableRowProps> = (props) => {
-    const state = useTableRow(props);
-
-    useTableRowStyles(state);
-
-    return renderTableRow(state);
-};

package/src/Components/Table/TableRow.types.ts

@@ -1,12 +0,0 @@
-import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
-
-export type TableRowSlots = {
-    root: NonNullable<Slot<'tr'>>;
-};
-
-export type TableRowProps = ComponentProps<TableRowSlots> & {
-    appearance?: 'none' | 'brand';
-};
-
-export type TableRowState = ComponentState<TableRowSlots> &
-    Required<Pick<TableRowProps, 'appearance'>>;

package/src/Components/Table/index.ts

@@ -1,35 +0,0 @@
-export type { TableSlots, TableProps, TableState } from './Table.types.js';
-export { Table } from './Table.js';
-export { useTable } from './useTable.js';
-export { renderTable } from './renderTable.js';
-export { useTableStyles } from './useTableStyles.styles.js';
-
-export type { TableHeaderSlots, TableHeaderProps, TableHeaderState } from './TableHeader.types.js';
-export { TableHeader } from './TableHeader.js';
-export { useTableHeader } from './useTableHeader.js';
-export { renderTableHeader } from './renderTableHeader.js';
-export { useTableHeaderStyles } from './useTableHeaderStyles.styles.js';
-
-export type { TableBodySlots, TableBodyProps, TableBodyState } from './TableBody.types.js';
-export { TableBody } from './TableBody.js';
-export { useTableBody } from './useTableBody.js';
-export { renderTableBody } from './renderTableBody.js';
-export { useTableBodyStyles } from './useTableBodyStyles.styles.js';
-
-export type { TableRowSlots, TableRowProps, TableRowState } from './TableRow.types.js';
-export { TableRow } from './TableRow.js';
-export { useTableRow } from './useTableRow.js';
-export { renderTableRow } from './renderTableRow.js';
-export { useTableRowStyles } from './useTableRowStyles.styles.js';
-
-export type { TableHeaderCellSlots, TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types.js';
-export { TableHeaderCell } from './TableHeaderCell.js';
-export { useTableHeaderCell } from './useTableHeaderCell.js';
-export { renderTableHeaderCell } from './renderTableHeaderCell.js';
-export { useTableHeaderCellStyles } from './useTableHeaderCellStyles.styles.js';
-
-export type { TableCellSlots, TableCellProps, TableCellState } from './TableCell.types.js';
-export { TableCell } from './TableCell.js';
-export { useTableCell } from './useTableCell.js';
-export { renderTableCell } from './renderTableCell.js';
-export { useTableCellStyles } from './useTableCellStyles.styles.js';

package/src/Components/Table/renderTable.tsx

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

package/src/Components/Table/renderTableBody.tsx

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

package/src/Components/Table/renderTableCell.tsx

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

package/src/Components/Table/renderTableHeader.tsx

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

package/src/Components/Table/renderTableHeaderCell.tsx

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

package/src/Components/Table/renderTableRow.tsx

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

package/src/Components/Table/useTable.ts

@@ -1,14 +0,0 @@
-import type { TableProps, TableState } from './Table.types.js';
-
-export const useTable = (props: TableProps): TableState => {
-    const { size, sortable, ...rest } = props;
-
-    return {
-        size: size ?? 'medium',
-        sortable: sortable ?? false,
-
-        components: { root: 'table' },
-
-        root: { ...rest } as TableState['root'],
-    };
-};

package/src/Components/Table/useTableBody.ts

@@ -1,9 +0,0 @@
-import type { TableBodyProps, TableBodyState } from './TableBody.types.js';
-
-export const useTableBody = (props: TableBodyProps): TableBodyState => {
-    return {
-        components: { root: 'tbody' },
-
-        root: { ...props } as TableBodyState['root'],
-    };
-};