@trypattern/sdk 0.0.0-stage → 0.1.1

package/dist/components/Spinner.d.ts

@@ -0,0 +1,6 @@
+import type { Size } from './Size.ts';
+type SpinnerProps = {
+    size?: Size;
+};
+export declare function Spinner({ size }: SpinnerProps): import("react").JSX.Element;
+export {};

package/dist/components/Spinner.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { breakpoints, iconSizes, motion, radii } from "../theme/tokens.stylex.js";
+export function Spinner({ size = 'md' }) {
+    return (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.spinner, sizes[size]), children: _jsx("span", { ...stylex.props(styles.inner), children: BARS.map((bar) => (_jsx("span", { ...stylex.props(styles.bar(bar)) }, bar))) }) }));
+}
+const BARS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+const fade = stylex.keyframes({
+    '0%': { opacity: 1 },
+    '100%': { opacity: 0.15 }
+});
+const styles = stylex.create({
+    spinner: {
+        display: 'block',
+        flexShrink: 0
+    },
+    inner: {
+        position: 'relative',
+        insetBlockStart: '50%',
+        insetInlineStart: '50%',
+        display: 'block',
+        width: '100%',
+        height: '100%'
+    },
+    bar: (bar) => ({
+        position: 'absolute',
+        insetBlockStart: '-3.9%',
+        insetInlineStart: '-10%',
+        width: '24%',
+        height: '8%',
+        backgroundColor: 'currentColor',
+        borderRadius: radii.full,
+        opacity: {
+            default: null,
+            [breakpoints.reducedMotion]: 0.5
+        },
+        transform: `rotate(${bar * 30 + 0.0001}deg) translate(146%)`,
+        animationName: {
+            default: fade,
+            [breakpoints.reducedMotion]: 'none'
+        },
+        animationDuration: motion.spin,
+        animationTimingFunction: 'linear',
+        animationDelay: `calc(${motion.spin} * ${(bar - 12) / 12})`,
+        animationIterationCount: 'infinite'
+    })
+});
+const sizes = stylex.create({
+    xs: { width: iconSizes.xs, height: iconSizes.xs },
+    sm: { width: iconSizes.sm, height: iconSizes.sm },
+    md: { width: iconSizes.md, height: iconSizes.md },
+    lg: { width: iconSizes.lg, height: iconSizes.lg },
+    xl: { width: iconSizes.xl, height: iconSizes.xl }
+});

package/dist/components/Stack.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { Placement } from './Placement.ts';
+import type { SpaceName } from './spacing.ts';
+type StackProps = {
+    children: ReactNode;
+    gap?: SpaceName;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    padding?: SpaceName;
+    paddingBlock?: SpaceName;
+    paddingInline?: SpaceName;
+    style?: Placement;
+};
+export declare function Stack({ children, gap, align, padding, paddingBlock, paddingInline, style }: StackProps): import("react").JSX.Element;
+export {};

package/dist/components/Stack.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { gaps, paddingBlocks, paddingInlines, paddings } from "./spacing.js";
+export function Stack({ children, gap = 'none', align = 'stretch', padding = 'none', paddingBlock, paddingInline, style }) {
+    return (_jsx("div", { ...stylex.props(styles.stack, alignments[align], gaps[gap], paddings[padding], paddingBlock !== undefined && paddingBlocks[paddingBlock], paddingInline !== undefined && paddingInlines[paddingInline], style), children: children }));
+}
+const styles = stylex.create({
+    stack: {
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 0
+    }
+});
+const alignments = stylex.create({
+    start: { alignItems: 'flex-start' },
+    center: { alignItems: 'center' },
+    end: { alignItems: 'flex-end' },
+    stretch: { alignItems: 'stretch' }
+});

package/dist/components/Switch.d.ts

@@ -0,0 +1,10 @@
+import type { Placement } from './Placement.ts';
+type SwitchProps = {
+    label: string;
+    checked: boolean;
+    disabled?: boolean;
+    onChange: (checked: boolean) => void;
+    style?: Placement;
+};
+export declare function Switch({ label, checked, disabled, onChange, style }: SwitchProps): import("react").JSX.Element;
+export {};

package/dist/components/Switch.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import * as stylex from '@stylexjs/stylex';
+import { colors, lineHeights, motion, radii, space } from "../theme/tokens.stylex.js";
+import { interact } from "./interaction.js";
+import { focusRing } from "./controlLook.js";
+export function Switch({ label, checked, disabled = false, onChange, style }) {
+    return (_jsx(BaseSwitch.Root, { "aria-label": label, checked: checked, disabled: disabled, onCheckedChange: (next) => {
+            interact({ primitive: 'Switch', event: 'change', label });
+            onChange(next);
+        }, className: (state) => stylex.props(styles.track, state.checked ? styles.on : styles.off, !disabled && (state.checked ? hovers.on : hovers.off), disabled && styles.disabled, focusRing.visible, style).className, children: _jsx(BaseSwitch.Thumb, { className: stylex.props(styles.thumb, disabled && styles.thumbDisabled).className }) }));
+}
+const styles = stylex.create({
+    track: {
+        position: 'relative',
+        display: 'inline-flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        width: `calc(${lineHeights.caption} * 1.5)`,
+        height: lineHeights.caption,
+        padding: space.xxs,
+        outlineOffset: 0,
+        borderRadius: radii.full,
+        transitionTimingFunction: motion.easeInOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'background-color',
+        '::before': {
+            position: 'absolute',
+            inset: `calc(-2 * ${space.xxs})`,
+            content: '""',
+            borderRadius: radii.full
+        }
+    },
+    off: {
+        justifyContent: 'flex-start',
+        backgroundColor: colors.component
+    },
+    on: {
+        justifyContent: 'flex-end',
+        backgroundColor: colors.brandSolid
+    },
+    disabled: {
+        backgroundColor: colors.disabled
+    },
+    thumb: {
+        display: 'block',
+        flexShrink: 0,
+        width: `calc(${lineHeights.caption} - 2 * ${space.xxs})`,
+        height: `calc(${lineHeights.caption} - 2 * ${space.xxs})`,
+        backgroundColor: colors.onBrandSolidForeground,
+        borderRadius: radii.full
+    },
+    thumbDisabled: {
+        backgroundColor: colors.disabledForeground
+    }
+});
+const hovers = stylex.create({
+    off: {
+        backgroundColor: {
+            default: colors.component,
+            ':hover': colors.componentHover,
+            ':active': colors.componentActive
+        }
+    },
+    on: {
+        backgroundColor: {
+            default: colors.brandSolid,
+            ':hover': colors.brandSolidHover,
+            ':active': colors.brandSolidActive
+        }
+    }
+});

package/dist/components/Text.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { Placement } from './Placement.ts';
+import type { Tone } from './tones.ts';
+type TextProps = {
+    children: ReactNode;
+    variant?: 'heading' | 'subheading' | 'title' | 'label' | 'body' | 'caption' | 'code';
+    tone?: Tone;
+    align?: 'start' | 'center' | 'end';
+    as?: 'span' | 'p' | 'h1' | 'h2' | 'h3';
+    isTruncated?: boolean;
+    isSelectable?: boolean;
+    style?: Placement;
+};
+export declare function Text({ children, variant, tone, align, as, isTruncated, isSelectable, style }: TextProps): import("react").DetailedReactHTMLElement<Readonly<{
+    className?: string;
+    'data-style-src'?: string;
+    style?: Readonly<{
+        [$$Key$$: string]: string | number;
+    }>;
+}>, HTMLElement>;
+export {};

package/dist/components/Text.js

@@ -0,0 +1,77 @@
+import * as stylex from '@stylexjs/stylex';
+import { createElement } from 'react';
+import { breakpoints, fontSizes, fontWeights, fonts, lineHeights } from "../theme/tokens.stylex.js";
+import { tones } from "./tones.js";
+export function Text({ children, variant = 'body', tone = 'inherit', align, as = 'span', isTruncated = false, isSelectable = false, style }) {
+    return createElement(as, stylex.props(as !== 'span' && styles.block, variants[variant], tones[tone], align !== undefined && alignments[align], isTruncated && styles.truncated, isSelectable && styles.selectable, style), children);
+}
+const styles = stylex.create({
+    block: {
+        display: 'block'
+    },
+    truncated: {
+        display: 'block',
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    },
+    selectable: {
+        userSelect: 'text'
+    }
+});
+const variants = stylex.create({
+    heading: {
+        fontSize: fontSizes.heading5,
+        fontWeight: fontWeights.semibold,
+        lineHeight: lineHeights.heading5
+    },
+    subheading: {
+        fontSize: fontSizes.heading6,
+        fontWeight: fontWeights.semibold,
+        lineHeight: lineHeights.heading6
+    },
+    title: {
+        fontSize: fontSizes.bodyBase,
+        fontWeight: fontWeights.semibold,
+        lineHeight: lineHeights.body
+    },
+    label: {
+        fontSize: {
+            default: fontSizes.bodySm,
+            [breakpoints.compact]: fontSizes.bodyBase
+        },
+        fontWeight: fontWeights.medium,
+        lineHeight: {
+            default: lineHeights.bodySm,
+            [breakpoints.compact]: lineHeights.body
+        }
+    },
+    body: {
+        fontSize: {
+            default: fontSizes.bodySm,
+            [breakpoints.compact]: fontSizes.bodyBase
+        },
+        fontWeight: fontWeights.normal,
+        lineHeight: {
+            default: lineHeights.bodySm,
+            [breakpoints.compact]: lineHeights.body
+        }
+    },
+    caption: {
+        fontSize: fontSizes.captionLg,
+        fontWeight: fontWeights.normal,
+        lineHeight: lineHeights.caption
+    },
+    code: {
+        fontFamily: fonts.mono,
+        fontSize: fontSizes.bodySm,
+        fontWeight: fontWeights.normal,
+        lineHeight: lineHeights.bodySm
+    }
+});
+const alignments = stylex.create({
+    start: { textAlign: 'start' },
+    center: { textAlign: 'center' },
+    end: { textAlign: 'end' }
+});

package/dist/components/TextField.d.ts

@@ -0,0 +1,25 @@
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+type TextFieldProps = {
+    label: string;
+    isLabelHidden?: boolean;
+    description?: string;
+    error?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    inputMode?: 'text' | 'email' | 'numeric' | 'decimal' | 'tel' | 'url' | 'search';
+    maxLength?: number;
+    pattern?: string;
+    size?: Size;
+    style?: Placement;
+};
+export declare function TextField({ label, isLabelHidden, description, error, onChange, size, style, ...input }: TextFieldProps): import("react").JSX.Element;
+export {};

package/dist/components/TextField.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } from '@base-ui/react/field';
+import * as stylex from '@stylexjs/stylex';
+import { useRef } from 'react';
+import { borders, colors, fontSizes, fontWeights, lineHeights, motion, shadows, space } from "../theme/tokens.stylex.js";
+import { controlSizes } from "./controlLook.js";
+import { interact } from "./interaction.js";
+export function TextField({ label, isLabelHidden = false, description, error, onChange, size = 'md', style, ...input }) {
+    const isInvalid = error !== undefined;
+    const valueOnFocus = useRef('');
+    return (_jsxs(Field.Root, { invalid: isInvalid, disabled: input.disabled ?? false, className: stylex.props(styles.field, style).className, children: [isLabelHidden ? null : (_jsx(Field.Label, { className: stylex.props(styles.label).className, children: label })), _jsx(Field.Control, { ...input, "aria-label": isLabelHidden ? label : undefined, onChange: (event) => onChange?.(event.currentTarget.value), onFocus: (event) => {
+                    valueOnFocus.current = event.currentTarget.value;
+                }, onBlur: (event) => {
+                    if (event.currentTarget.value !== valueOnFocus.current) {
+                        interact({ primitive: 'TextField', event: 'change', label });
+                    }
+                }, className: stylex.props(styles.input, controlSizes[size], isInvalid && styles.invalid).className }), description === undefined ? null : (_jsx(Field.Description, { className: stylex.props(styles.note).className, children: description })), error === undefined ? null : (_jsx(Field.Error, { match: true, className: stylex.props(styles.error).className, children: error }))] }));
+}
+const focusRing = `inset 0 0 0 ${borders.hairline} ${colors.brandBorderFocus}, 0 0 0 ${borders.thin} ${colors.brandBorderFocus}, ${shadows.default}`;
+const invalidRing = `inset 0 0 0 ${borders.hairline} ${colors.dangerBorderDefault}, 0 0 0 ${borders.thin} ${colors.dangerBorderDefault}, ${shadows.default}`;
+const styles = stylex.create({
+    field: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xs,
+        minWidth: 0
+    },
+    label: {
+        fontWeight: fontWeights.medium,
+        color: colors.primaryForeground
+    },
+    input: {
+        minWidth: 0,
+        fontFamily: 'inherit',
+        fontWeight: fontWeights.normal,
+        fontFeatureSettings: 'inherit',
+        color: colors.primaryForeground,
+        outline: 'none',
+        backgroundColor: colors.componentOnContainerStrong,
+        borderWidth: 0,
+        boxShadow: {
+            default: shadows.default,
+            ':focus-visible': focusRing
+        },
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.instant,
+        transitionProperty: 'box-shadow',
+        '::placeholder': {
+            color: colors.tertiaryForeground
+        }
+    },
+    invalid: {
+        boxShadow: {
+            default: invalidRing,
+            ':focus-visible': invalidRing
+        }
+    },
+    note: {
+        fontSize: fontSizes.captionLg,
+        lineHeight: lineHeights.caption,
+        color: colors.secondaryForeground
+    },
+    error: {
+        fontSize: fontSizes.captionLg,
+        lineHeight: lineHeights.caption,
+        color: colors.dangerText
+    }
+});

package/dist/components/Toaster.d.ts

@@ -0,0 +1 @@
+export declare function Toaster(): import("react").JSX.Element;

package/dist/components/Toaster.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { breakpoints, colors, controls, layers, lineHeights, motion, radii, shadows, space, widths } from "../theme/tokens.stylex.js";
+import { useApp } from "../hooks/appContext.js";
+import { useStoreState } from "../hooks/useStoreState.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { Text } from "./Text.js";
+export function Toaster() {
+    const store = useApp().stores.toasts;
+    const { items } = useStoreState(store);
+    return (_jsx("section", { "aria-label": "Notifications", ...stylex.props(styles.toaster), children: items.map((toast) => (_jsxs("div", { role: toast.tone === 'error' ? 'alert' : 'status', ...stylex.props(styles.toast), children: [toast.tone === 'neutral' ? null : (_jsx("span", { ...stylex.props(styles.firstLine), children: _jsx(Icon, { name: icons[toast.tone], size: "xl", tone: toast.tone === 'error' ? 'danger' : 'positive' }) })), _jsxs("div", { ...stylex.props(styles.words), children: [_jsx(Text, { variant: "label", children: toast.title }), toast.description === null ? null : (_jsx(Text, { variant: "caption", tone: "secondary", children: toast.description }))] }), _jsx(IconButton, { icon: "close", label: "Dismiss", size: "sm", onClick: () => store.dismiss(toast.id), style: styles.dismiss })] }, toast.id))) }));
+}
+const icons = { success: 'checkCircle', error: 'alertCircle' };
+const enter = stylex.keyframes({
+    from: { opacity: 0, transform: `translateY(${space.lg})` }
+});
+const styles = stylex.create({
+    toaster: {
+        position: 'fixed',
+        insetBlockEnd: {
+            default: space.xl,
+            [breakpoints.compact]: space.lg
+        },
+        insetInlineStart: {
+            default: null,
+            [breakpoints.compact]: space.lg
+        },
+        insetInlineEnd: {
+            default: space.xl,
+            [breakpoints.compact]: space.lg
+        },
+        zIndex: layers.toast,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.sm,
+        width: {
+            default: widths.toast,
+            [breakpoints.compact]: 'auto'
+        },
+        pointerEvents: 'none'
+    },
+    toast: {
+        display: 'flex',
+        gap: controls.gapMd,
+        alignItems: 'flex-start',
+        padding: space.lg,
+        color: colors.primaryForeground,
+        pointerEvents: 'auto',
+        backgroundColor: colors.page,
+        borderRadius: radii.xl,
+        boxShadow: shadows.border,
+        animationName: {
+            default: enter,
+            [breakpoints.reducedMotion]: 'none'
+        },
+        animationDuration: motion.slide,
+        animationTimingFunction: motion.easeOut
+    },
+    words: {
+        display: 'flex',
+        flexGrow: 1,
+        flexDirection: 'column',
+        gap: space.xxs,
+        minWidth: 0
+    },
+    firstLine: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        height: {
+            default: lineHeights.bodySm,
+            [breakpoints.compact]: lineHeights.body
+        }
+    },
+    dismiss: {
+        marginBlock: {
+            default: `calc((${lineHeights.bodySm} - ${controls.heightSm}) / 2)`,
+            [breakpoints.compact]: `calc((${lineHeights.body} - ${controls.heightSm}) / 2)`
+        },
+        marginInlineEnd: `calc(-1 * ${space.sm})`
+    }
+});

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from 'react';
+type TooltipProps = {
+    label: string;
+    shortcut?: readonly string[] | undefined;
+    children: ReactElement;
+};
+export declare function Tooltip({ label, shortcut, children }: TooltipProps): import("react").JSX.Element;
+export {};

package/dist/components/Tooltip.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import * as stylex from '@stylexjs/stylex';
+import { colors, controls, fontSizes, fontWeights, layers, lineHeights, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { Kbd } from "./Kbd.js";
+export function Tooltip({ label, shortcut, children }) {
+    return (_jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: "bottom", sideOffset: 6, className: stylex.props(styles.positioner).className, children: _jsxs(BaseTooltip.Popup, { className: (state) => stylex.props(styles.popup, (!state.open || state.transitionStatus === 'starting') &&
+                            styles.hidden, !state.open && styles.exiting).className, children: [label, shortcut === undefined ? null : (_jsx(Kbd, { keys: shortcut, surface: "standout" }))] }) }) })] }));
+}
+const styles = stylex.create({
+    positioner: {
+        zIndex: layers.tooltip
+    },
+    popup: {
+        display: 'flex',
+        gap: space.sm,
+        alignItems: 'center',
+        width: 'fit-content',
+        paddingBlock: controls.paddingXs,
+        paddingInline: controls.paddingMd,
+        fontSize: fontSizes.captionLg,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.caption,
+        color: colors.onStandoutPrimaryForeground,
+        textWrap: 'balance',
+        backgroundColor: colors.standout,
+        borderRadius: radii.lg,
+        boxShadow: shadows.default,
+        transformOrigin: 'var(--transform-origin)',
+        transitionTimingFunction: motion.easeInOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'opacity, transform'
+    },
+    exiting: {
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.exit
+    },
+    hidden: {
+        pointerEvents: 'none',
+        opacity: 0,
+        transform: 'scale(0.95)'
+    }
+});

package/dist/components/controlLook.d.ts

@@ -0,0 +1,70 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const controlSizes: Readonly<{
+    readonly xs: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly sm: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly md: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly lg: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly xl: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+}>;
+export declare const transparentLook: Readonly<{
+    readonly rest: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", string>;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", string>;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "color, background-color">;
+    }>;
+    readonly hoverable: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly open: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+}>;
+export declare const focusRing: Readonly<{
+    readonly visible: Readonly<{
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", `calc(${stylex.StyleXVar<string>} + ${stylex.StyleXVar<string>})`>;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "none" | "solid">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", string>;
+    }>;
+    readonly inside: Readonly<{
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", `calc(-1 * (${stylex.StyleXVar<string>} + ${stylex.StyleXVar<string>}))`>;
+    }>;
+}>;

package/dist/components/controlLook.js

@@ -0,0 +1,80 @@
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, controls, fontSizes, lineHeights, motion, radii } from "../theme/tokens.stylex.js";
+export const controlSizes = stylex.create({
+    xs: {
+        gap: controls.gapXs,
+        height: controls.heightXs,
+        paddingInline: controls.paddingXs,
+        fontSize: fontSizes.captionLg,
+        lineHeight: lineHeights.caption,
+        borderRadius: radii.sm
+    },
+    sm: {
+        gap: controls.gapSm,
+        height: controls.heightSm,
+        paddingInline: controls.paddingSm,
+        fontSize: fontSizes.bodySm,
+        lineHeight: lineHeights.bodySm,
+        borderRadius: radii.md
+    },
+    md: {
+        gap: controls.gapMd,
+        height: controls.heightMd,
+        paddingInline: controls.paddingMd,
+        fontSize: fontSizes.bodySm,
+        lineHeight: lineHeights.bodySm,
+        borderRadius: radii.md
+    },
+    lg: {
+        gap: controls.gapLg,
+        height: controls.heightLg,
+        paddingInline: controls.paddingLg,
+        fontSize: fontSizes.bodySm,
+        lineHeight: lineHeights.bodySm,
+        borderRadius: radii.lg
+    },
+    xl: {
+        gap: controls.gapXl,
+        height: controls.heightXl,
+        paddingInline: controls.paddingXl,
+        fontSize: fontSizes.bodySm,
+        lineHeight: lineHeights.bodySm,
+        borderRadius: radii.lg
+    }
+});
+export const transparentLook = stylex.create({
+    rest: {
+        color: colors.secondaryForeground,
+        backgroundColor: 'transparent',
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'color, background-color'
+    },
+    hoverable: {
+        color: {
+            default: colors.secondaryForeground,
+            ':hover': colors.primaryForeground
+        },
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        }
+    },
+    open: {
+        color: colors.primaryForeground,
+        backgroundColor: colors.transparentHover
+    }
+});
+export const focusRing = stylex.create({
+    visible: {
+        outlineWidth: `calc(${borders.thin} + ${borders.hairline})`,
+        outlineStyle: {
+            default: 'none',
+            ':focus-visible': 'solid'
+        },
+        outlineColor: colors.brandBorderFocus
+    },
+    inside: {
+        outlineOffset: `calc(-1 * (${borders.thin} + ${borders.hairline}))`
+    }
+});