@trypattern/sdk 0.0.0-stage → 0.1.0

package/dist/components/Sidebar.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { NavLink } from 'react-router';
+import { breakpoints, colors, controls, iconSizes, layers, motion, radii, shadows, space, widths } from "../theme/tokens.stylex.js";
+import { Badge } from "./Badge.js";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+import { interact } from "./interaction.js";
+import { Menu } from "./Menu.js";
+import { ScrollArea } from "./ScrollArea.js";
+import { Text } from "./Text.js";
+export function Sidebar({ workspace, workspaceMenu, links, isToggled, isAnimating, onFollowLink, onSearch }) {
+    const followLink = (link) => {
+        interact({ primitive: 'AppFrame', event: 'navigate', label: link.label });
+        onFollowLink();
+    };
+    return (_jsxs("nav", { ...stylex.props(styles.sidebar, isToggled && styles.sidebarToggled, isAnimating && styles.sidebarAnimating), children: [_jsx("div", { ...stylex.props(styles.header), children: _jsx(Menu, { trigger: _jsxs(_Fragment, { children: [_jsx("span", { ...stylex.props(styles.logo), children: _jsx(Text, { variant: "caption", children: workspace.charAt(0) }) }), _jsx(Text, { variant: "label", isTruncated: true, children: workspace }), _jsx(Icon, { name: "chevronDown" })] }), items: workspaceMenu }) }), onSearch === undefined ? null : (_jsx(Button, { variant: "secondary", icon: "search", shortcut: ['mod', 'k'], isFullWidth: true, onClick: onSearch, children: "Search" })), _jsx("div", { ...stylex.props(styles.body), children: _jsx(ScrollArea, { children: _jsxs("div", { ...stylex.props(styles.group), children: [_jsx("span", { ...stylex.props(styles.groupLabel), children: _jsx(Text, { variant: "label", tone: "tertiary", children: "Workspace" }) }), links.map((item) => (_jsxs(NavLink, { onClick: () => followLink(item), to: item.to, end: item.to === '/', className: ({ isActive }) => stylex.props(styles.item, isActive && styles.itemCurrent)
+                                    .className ?? '', children: [_jsx(Icon, { name: item.icon }), _jsx(Text, { variant: "label", isTruncated: true, style: styles.itemLabel, children: item.label }), typeof item.count !== 'number' ? null : (_jsx(Badge, { variant: "transparent", children: item.count }))] }, item.to)))] }) }) })] }));
+}
+const styles = stylex.create({
+    sidebar: {
+        position: {
+            default: 'relative',
+            [breakpoints.compact]: 'fixed'
+        },
+        insetBlock: {
+            default: null,
+            [breakpoints.compact]: 0
+        },
+        insetInlineStart: {
+            default: null,
+            [breakpoints.compact]: 0
+        },
+        zIndex: {
+            default: null,
+            [breakpoints.compact]: layers.sidebar
+        },
+        display: 'flex',
+        visibility: {
+            default: null,
+            [breakpoints.compact]: 'hidden'
+        },
+        flexShrink: 0,
+        flexDirection: 'column',
+        gap: space.lg,
+        width: widths.sidebar,
+        height: '100%',
+        padding: space.lg,
+        backgroundColor: {
+            default: null,
+            [breakpoints.compact]: colors.shell
+        },
+        boxShadow: {
+            default: null,
+            [breakpoints.compact]: shadows.extraLarge
+        },
+        transform: {
+            default: null,
+            [breakpoints.compact]: 'translateX(-100%)'
+        }
+    },
+    sidebarAnimating: {
+        transitionTimingFunction: motion.slideEasing,
+        transitionDuration: motion.slide,
+        transitionProperty: 'transform, visibility'
+    },
+    sidebarToggled: {
+        display: {
+            default: 'none',
+            [breakpoints.compact]: 'flex'
+        },
+        visibility: {
+            default: null,
+            [breakpoints.compact]: 'visible'
+        },
+        transform: {
+            default: null,
+            [breakpoints.compact]: 'translateX(0)'
+        }
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        height: controls.heightLg
+    },
+    logo: {
+        display: 'grid',
+        flexShrink: 0,
+        placeItems: 'center',
+        width: iconSizes.xl,
+        height: iconSizes.xl,
+        color: colors.onInvertedForeground,
+        backgroundColor: colors.invertedSolid,
+        borderRadius: radii.md
+    },
+    body: {
+        flexGrow: 1,
+        minHeight: 0
+    },
+    group: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs
+    },
+    groupLabel: {
+        display: 'block',
+        paddingBlock: controls.paddingXs,
+        paddingInline: controls.paddingSm
+    },
+    item: {
+        display: 'flex',
+        gap: space.sm,
+        alignItems: 'center',
+        height: {
+            default: controls.heightMd,
+            [breakpoints.compact]: controls.heightXl
+        },
+        paddingInline: controls.paddingSm,
+        color: {
+            default: colors.secondaryForeground,
+            ':hover': colors.primaryForeground
+        },
+        textDecoration: 'none',
+        outlineOffset: 0,
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        },
+        borderRadius: radii.md
+    },
+    itemCurrent: {
+        color: colors.primaryForeground,
+        backgroundColor: colors.transparentHover
+    },
+    itemLabel: {
+        flexGrow: 1
+    }
+});

package/dist/components/SignInScreen.d.ts

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

package/dist/components/SignInScreen.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { useApp, useModel } from "../hooks/appContext.js";
+import { colors, controls, radii, space, widths } from "../theme/tokens.stylex.js";
+import { Button } from "./Button.js";
+import { Form } from "./Form.js";
+import { Text } from "./Text.js";
+import { TextField } from "./TextField.js";
+export function SignInScreen() {
+    const { name } = useApp();
+    const signIn = useModel('signIn');
+    const isBusy = signIn.signingIn !== null;
+    return (_jsx("main", { ...stylex.props(styles.page), children: _jsxs("div", { ...stylex.props(styles.column), children: [_jsx("span", { ...stylex.props(styles.mark), children: _jsx(Text, { variant: "title", children: name.charAt(0) }) }), _jsxs(Text, { as: "h1", variant: "title", tone: "primary", align: "center", children: ["Sign in to ", name] }), signIn.step === 'choose' ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "lg", disabled: isBusy, isPending: signIn.signingIn === 'google', onClick: signIn.continueWithGoogle, children: "Continue with Google" }), _jsxs(Form, { onSubmit: (values) => signIn.sendEmailCode({ email: values['email'] ?? '' }), children: [_jsx(TextField, { name: "email", type: "email", required: true, autoComplete: "email", placeholder: "you@example.com", label: "Email", isLabelHidden: true, size: "lg" }), _jsx(Button, { type: "submit", variant: "secondary", size: "lg", disabled: isBusy, isPending: signIn.signingIn === 'email', children: "Email me a code" })] }), import.meta.env.DEV ? (_jsxs(Button, { variant: "tertiary", size: "lg", disabled: isBusy, isPending: signIn.signingIn === 'dev', onClick: () => signIn.signInAsDevUser({ email: DEV_USER }), children: ["Dev: sign in as ", DEV_USER] })) : null] })) : (_jsxs(_Fragment, { children: [_jsxs(Text, { as: "p", tone: "secondary", align: "center", children: ["We sent a 6-digit code to ", signIn.email, "."] }), _jsxs(Form, { onSubmit: (values) => signIn.verifyEmailCode({ code: values['code'] ?? '' }), children: [_jsx(TextField, { name: "code", required: true, autoFocus: true, inputMode: "numeric", autoComplete: "one-time-code", pattern: "[0-9]{6}", maxLength: 6, placeholder: "123456", label: "Code", isLabelHidden: true, size: "lg" }), _jsx(Button, { type: "submit", size: "lg", disabled: isBusy, isPending: signIn.signingIn === 'email', children: "Sign in" })] }), _jsx(Button, { variant: "transparent", size: "lg", disabled: isBusy, onClick: signIn.startOver, children: "Use a different email" })] })), signIn.notice === null ? null : (_jsx(Text, { as: "p", tone: "secondary", align: "center", children: signIn.notice })), _jsx(Text, { as: "p", variant: "caption", tone: "tertiary", align: "center", children: "Sign-in by Pattern" })] }) }));
+}
+const DEV_USER = 'ada@acme.test';
+const styles = stylex.create({
+    page: {
+        display: 'grid',
+        placeItems: 'center',
+        height: '100%',
+        backgroundColor: colors.shell
+    },
+    column: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.md,
+        alignItems: 'stretch',
+        width: widths.contentXs
+    },
+    mark: {
+        display: 'grid',
+        placeItems: 'center',
+        alignSelf: 'center',
+        width: controls.heightLg,
+        height: controls.heightLg,
+        color: colors.onInvertedForeground,
+        backgroundColor: colors.invertedSolid,
+        borderRadius: radii.lg
+    }
+});

package/dist/components/Size.d.ts

@@ -0,0 +1 @@
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/Size.js

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

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import type { Placement } from './Placement.ts';
+type SkeletonProps = {
+    variant?: 'text' | 'heading' | 'icon' | 'card';
+    width?: 'sm' | 'md' | 'lg' | 'full';
+    style?: Placement;
+};
+export declare function Skeleton({ variant, width, style }: SkeletonProps): import("react").JSX.Element;
+export {};

package/dist/components/Skeleton.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { breakpoints, colors, iconSizes, lineHeights, motion, radii, space } from "../theme/tokens.stylex.js";
+export function Skeleton({ variant = 'text', width = 'full', style }) {
+    return (_jsx("span", { ...stylex.props(styles.skeleton, variant !== 'icon' && widthsOf[width], variants[variant], style) }));
+}
+const pulse = stylex.keyframes({
+    '50%': { opacity: 0.5 }
+});
+const styles = stylex.create({
+    skeleton: {
+        display: 'block',
+        flexShrink: 0,
+        backgroundColor: colors.component,
+        animationName: {
+            default: pulse,
+            [breakpoints.reducedMotion]: 'none'
+        },
+        animationDuration: motion.pulse,
+        animationTimingFunction: motion.easeInOut,
+        animationIterationCount: 'infinite'
+    }
+});
+const variants = stylex.create({
+    text: {
+        height: lineHeights.caption,
+        borderRadius: radii.sm
+    },
+    heading: {
+        height: lineHeights.heading6,
+        borderRadius: radii.md
+    },
+    icon: {
+        width: iconSizes.xs,
+        height: iconSizes.xs,
+        borderRadius: radii.full
+    },
+    card: {
+        height: `calc(2 * ${space.xxxl})`,
+        borderRadius: radii.xxl
+    }
+});
+const widthsOf = stylex.create({
+    sm: { width: '25%' },
+    md: { width: '40%' },
+    lg: { width: '60%' },
+    full: { width: '100%' }
+});

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,71 @@
+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";
+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, 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;