@trypattern/sdk 0.0.0-stage → 0.1.1

package/dist/components/Screen.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { use } from 'react';
+import { borders, colors, controls, space } from "../theme/tokens.stylex.js";
+import { FrameContext } from "./frame.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { Link } from "./Link.js";
+import { ScrollArea } from "./ScrollArea.js";
+import { Text } from "./Text.js";
+export function Screen({ title, parent, actions, children }) {
+    const frame = use(FrameContext);
+    return (_jsxs("div", { ...stylex.props(styles.screen), children: [_jsxs("header", { ...stylex.props(styles.header), children: [_jsxs("div", { ...stylex.props(styles.leading), children: [frame === null ? null : (_jsx(IconButton, { icon: "panelLeft", label: "Toggle sidebar", onClick: frame.onToggleSidebar })), _jsxs("div", { ...stylex.props(styles.breadcrumb), children: [parent === undefined ? null : (_jsxs(_Fragment, { children: [_jsx(Link, { to: parent.to, tone: "secondary", children: parent.label }), _jsx(Icon, { name: "chevronRight", tone: "tertiary" })] })), _jsx(Text, { as: "h1", variant: "label", tone: "primary", isTruncated: true, children: title })] })] }), _jsx("div", { ...stylex.props(styles.actions), children: actions })] }), _jsx(ScrollArea, { style: styles.body, children: children })] }));
+}
+const styles = stylex.create({
+    screen: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+    },
+    header: {
+        display: 'flex',
+        flexShrink: 0,
+        gap: space.md,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: `calc(${controls.heightXl} + ${space.sm})`,
+        paddingInline: space.sm,
+        borderBottomColor: colors.borderDefault,
+        borderBottomStyle: 'solid',
+        borderBottomWidth: borders.hairline
+    },
+    leading: {
+        display: 'flex',
+        gap: space.sm,
+        alignItems: 'center',
+        minWidth: 0
+    },
+    breadcrumb: {
+        display: 'flex',
+        gap: space.xs,
+        alignItems: 'center',
+        minWidth: 0
+    },
+    actions: {
+        display: 'flex',
+        flexShrink: 0,
+        gap: space.sm,
+        alignItems: 'center',
+        paddingInlineEnd: space.xs
+    },
+    body: {
+        flexGrow: 1,
+        height: 'auto'
+    }
+});

package/dist/components/Scrim.d.ts

@@ -0,0 +1,8 @@
+type ScrimProps = {
+    label: string;
+    isOpen: boolean;
+    isAnimating: boolean;
+    onClose: () => void;
+};
+export declare function Scrim({ label, isOpen, isAnimating, onClose }: ScrimProps): import("react").JSX.Element;
+export {};

package/dist/components/Scrim.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { useEffect } from 'react';
+import { breakpoints, colors, layers, motion } from "../theme/tokens.stylex.js";
+export function Scrim({ label, isOpen, isAnimating, onClose }) {
+    useEffect(() => {
+        if (!isOpen)
+            return undefined;
+        const closeOnEscape = (event) => {
+            if (event.key === 'Escape')
+                onClose();
+        };
+        window.addEventListener('keydown', closeOnEscape);
+        return () => window.removeEventListener('keydown', closeOnEscape);
+    }, [isOpen, onClose]);
+    return (_jsx("button", { type: "button", "aria-label": label, tabIndex: -1, onClick: onClose, ...stylex.props(styles.scrim, isOpen && styles.visible, isAnimating && styles.animating) }));
+}
+const styles = stylex.create({
+    scrim: {
+        position: 'fixed',
+        inset: 0,
+        zIndex: layers.scrim,
+        display: {
+            default: 'none',
+            [breakpoints.compact]: 'block'
+        },
+        visibility: 'hidden',
+        backgroundColor: colors.overlay,
+        opacity: 0
+    },
+    animating: {
+        transitionTimingFunction: motion.slideEasing,
+        transitionDuration: motion.slide,
+        transitionProperty: 'opacity, visibility'
+    },
+    visible: {
+        visibility: 'visible',
+        opacity: 1
+    }
+});

package/dist/components/ScrollArea.d.ts

@@ -0,0 +1,15 @@
+import type { StyleXStyles } from '@stylexjs/stylex';
+import type { ReactNode } from 'react';
+import type { PlacementProperties } from './Placement.ts';
+type ScrollAreaProps = {
+    children: ReactNode;
+    style?: StyleXStyles<PlacementProperties & {
+        height?: number | string;
+        maxHeight?: number | string;
+        padding?: number | string;
+        paddingBlock?: number | string;
+        paddingInline?: number | string;
+    }>;
+};
+export declare function ScrollArea({ children, style }: ScrollAreaProps): import("react").JSX.Element;
+export {};

package/dist/components/ScrollArea.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+export function ScrollArea({ children, style }) {
+    return _jsx("div", { ...stylex.props(styles.scroll, style), children: children });
+}
+const styles = stylex.create({
+    scroll: {
+        height: '100%',
+        minHeight: 0,
+        overflowY: 'auto',
+        overscrollBehavior: 'contain'
+    }
+});

package/dist/components/SegmentedControl.d.ts

@@ -0,0 +1,17 @@
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+export type SegmentedOption<Value extends string> = {
+    value: Value;
+    label: string;
+};
+type SegmentedControlProps<Value extends string> = {
+    label: string;
+    value: Value;
+    options: readonly SegmentedOption<Value>[];
+    size?: Size;
+    disabled?: boolean;
+    onChange: (value: Value) => void;
+    style?: Placement;
+};
+export declare function SegmentedControl<Value extends string>({ label, value, options, size, disabled, onChange, style }: SegmentedControlProps<Value>): import("react").JSX.Element;
+export {};

package/dist/components/SegmentedControl.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup } from '@base-ui/react/radio-group';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, fontWeights, motion, radii } from "../theme/tokens.stylex.js";
+import { interact } from "./interaction.js";
+import { controlSizes, focusRing } from "./controlLook.js";
+export function SegmentedControl({ label, value, options, size = 'md', disabled = false, onChange, style }) {
+    const index = Math.max(0, options.findIndex((option) => option.value === value));
+    return (_jsxs(RadioGroup, { "aria-label": label, value: value, disabled: disabled, onValueChange: (next) => {
+            interact({ primitive: 'SegmentedControl', event: 'change', label });
+            onChange(next);
+        }, className: stylex.props(styles.group, style).className, children: [_jsx("span", { ...stylex.props(styles.indicator(index, options.length)) }), options.map((option) => (_jsx(Radio.Root, { value: option.value, className: (state) => stylex.props(styles.option, controlSizes[size], !disabled && styles.hoverable, state.checked && styles.optionChecked, disabled && styles.disabled, focusRing.visible).className, children: option.label }, option.value)))] }));
+}
+const styles = stylex.create({
+    group: {
+        position: 'relative',
+        display: 'grid',
+        gridAutoColumns: '1fr',
+        gridAutoFlow: 'column',
+        alignItems: 'center',
+        fontWeight: fontWeights.medium,
+        backgroundColor: colors.component,
+        borderRadius: radii.md
+    },
+    indicator: (index, count) => ({
+        position: 'absolute',
+        insetBlockStart: 0,
+        insetInlineStart: 0,
+        width: `calc(100% / ${count})`,
+        height: '100%',
+        pointerEvents: 'none',
+        backgroundColor: colors.componentOnContainerStrong,
+        borderColor: colors.indicatorBorder,
+        borderStyle: 'solid',
+        borderWidth: borders.thin,
+        borderRadius: radii.md,
+        transform: `translateX(${index * 100}%)`,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'transform'
+    }),
+    option: {
+        position: 'relative',
+        zIndex: 1,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: colors.secondaryForeground,
+        whiteSpace: 'nowrap',
+        outlineOffset: 0,
+        transitionTimingFunction: motion.easeInOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'color'
+    },
+    hoverable: {
+        color: {
+            default: colors.secondaryForeground,
+            ':hover': colors.primaryForeground
+        }
+    },
+    optionChecked: {
+        color: colors.primaryForeground
+    },
+    disabled: {
+        color: colors.disabledForeground
+    }
+});

package/dist/components/Select.d.ts

@@ -0,0 +1,17 @@
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+export type SelectOption<Value extends string> = {
+    value: Value;
+    label: string;
+};
+type SelectProps<Value extends string> = {
+    label: string;
+    value: Value;
+    options: readonly SelectOption<Value>[];
+    size?: Size;
+    disabled?: boolean;
+    onChange: (value: Value) => void;
+    style?: Placement;
+};
+export declare function Select<Value extends string>({ label, value, options, size, disabled, onChange, style }: SelectProps<Value>): import("react").JSX.Element;
+export {};

package/dist/components/Select.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as BaseSelect } from '@base-ui/react/select';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, controls, iconSizes, layers, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { controlSizes } from "./controlLook.js";
+import { Icon } from "./Icon.js";
+import { interact } from "./interaction.js";
+import { Popup } from "./Popup.js";
+import { PopupItem } from "./PopupItem.js";
+export function Select({ label, value, options, size = 'md', disabled = false, onChange, style }) {
+    return (_jsxs(BaseSelect.Root, { items: options, value: value, disabled: disabled, onValueChange: (next) => {
+            if (next === null)
+                return;
+            interact({ primitive: 'Select', event: 'change', label });
+            onChange(next);
+        }, children: [_jsxs(BaseSelect.Trigger, { "aria-label": label, className: (state) => stylex.props(styles.trigger, controlSizes[size], triggerPaddings[size], styles.triggerLook, !disabled && styles.hoverable, state.open && styles.triggerOpen, disabled && styles.disabled, style).className, children: [_jsx("span", { ...stylex.props(styles.values), children: options.map((option) => (_jsx("span", { "aria-hidden": option.value !== value, ...stylex.props(styles.value, option.value !== value && styles.valueHidden), children: option.label }, option.value))) }), _jsx(BaseSelect.Icon, { className: stylex.props(styles.chevron).className, children: _jsx(Icon, { name: "chevronUpDown", size: size }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { alignItemWithTrigger: false, side: "bottom", align: "start", sideOffset: 4, className: stylex.props(styles.positioner).className, children: _jsx(BaseSelect.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "select", isOpen: state.open, transitionStatus: state.transitionStatus })), children: options.map((option) => (_jsxs(BaseSelect.Item, { value: option.value, render: (props, state) => (_jsx(PopupItem, { ...props, kind: "select", isHighlighted: state.highlighted })), children: [_jsx("span", { ...stylex.props(styles.indicator), children: _jsx(BaseSelect.ItemIndicator, { className: stylex.props(styles.check).className, children: _jsx(Icon, { name: "check" }) }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value))) }) }) })] }));
+}
+const focusRing = `inset 0 0 0 ${borders.hairline} ${colors.brandBorderFocus}, 0 0 0 ${borders.thin} ${colors.brandBorderFocus}, ${shadows.default}`;
+const styles = stylex.create({
+    trigger: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        whiteSpace: 'nowrap',
+        outline: 'none'
+    },
+    triggerLook: {
+        gap: space.sm,
+        color: colors.primaryForeground,
+        backgroundColor: colors.componentOnContainerStrong,
+        borderRadius: radii.lg,
+        boxShadow: {
+            default: shadows.default,
+            ':focus-visible': focusRing
+        },
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.instant,
+        transitionProperty: 'color, background-color, box-shadow'
+    },
+    hoverable: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':focus-visible': colors.componentOnContainerSubtleHover,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    triggerOpen: {
+        backgroundColor: colors.componentOnContainerSubtleHover,
+        boxShadow: focusRing
+    },
+    disabled: {
+        color: colors.disabledForeground,
+        backgroundColor: colors.disabled,
+        boxShadow: 'none'
+    },
+    values: {
+        display: 'grid',
+        textAlign: 'start'
+    },
+    value: {
+        gridRowStart: 1,
+        gridColumnStart: 1
+    },
+    valueHidden: {
+        visibility: 'hidden'
+    },
+    chevron: {
+        display: 'flex',
+        color: colors.tertiaryForeground
+    },
+    positioner: {
+        zIndex: layers.menu,
+        outline: 'none'
+    },
+    indicator: {
+        display: 'flex',
+        width: iconSizes.md,
+        height: iconSizes.md,
+        color: colors.secondaryForeground
+    },
+    check: {
+        display: 'flex'
+    }
+});
+const triggerPaddings = stylex.create({
+    xs: {
+        paddingInlineStart: `calc(${controls.paddingXs} - 2px)`,
+        paddingInlineEnd: `calc(${controls.paddingXs} - 4px)`
+    },
+    sm: {
+        paddingInlineStart: `calc(${controls.paddingSm} - 2px)`,
+        paddingInlineEnd: `calc(${controls.paddingSm} - 4px)`
+    },
+    md: {
+        paddingInlineStart: `calc(${controls.paddingMd} - 2px)`,
+        paddingInlineEnd: `calc(${controls.paddingMd} - 4px)`
+    },
+    lg: {
+        paddingInlineStart: `calc(${controls.paddingLg} - 2px)`,
+        paddingInlineEnd: `calc(${controls.paddingLg} - 4px)`
+    },
+    xl: {
+        paddingInlineStart: `calc(${controls.paddingXl} - 2px)`,
+        paddingInlineEnd: `calc(${controls.paddingXl} - 4px)`
+    }
+});

package/dist/components/SettingsRow.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+type SettingsRowProps = {
+    title: string;
+    description?: string;
+    control: ReactNode;
+};
+export declare function SettingsRow({ title, description, control }: SettingsRowProps): import("react").JSX.Element;
+export {};

package/dist/components/SettingsRow.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { breakpoints, space } from "../theme/tokens.stylex.js";
+import { Text } from "./Text.js";
+export function SettingsRow({ title, description, control }) {
+    return (_jsxs("div", { ...stylex.props(styles.row), children: [_jsxs("div", { ...stylex.props(styles.words), children: [_jsx(Text, { variant: "label", tone: "primary", children: title }), description === undefined ? null : (_jsx(Text, { tone: "secondary", children: description }))] }), control] }));
+}
+const styles = stylex.create({
+    row: {
+        display: 'flex',
+        flexDirection: {
+            default: 'row',
+            [breakpoints.compact]: 'column'
+        },
+        gap: {
+            default: space.xl,
+            [breakpoints.compact]: space.md
+        },
+        alignItems: {
+            default: 'center',
+            [breakpoints.compact]: 'flex-start'
+        },
+        justifyContent: 'space-between',
+        paddingBlock: space.lg
+    },
+    words: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs,
+        minWidth: 0
+    }
+});

package/dist/components/Sidebar.d.ts

@@ -0,0 +1,20 @@
+import type { AppPath } from '../registered.ts';
+import type { IconName } from './icons.ts';
+import type { MenuEntry } from './MenuItems.tsx';
+export type SidebarLink = {
+    label: string;
+    to: AppPath;
+    icon: IconName;
+    count?: number | null;
+};
+type SidebarProps = {
+    workspace: string;
+    workspaceMenu: readonly MenuEntry[];
+    links: readonly SidebarLink[];
+    isToggled: boolean;
+    isAnimating: boolean;
+    onFollowLink: () => void;
+    onSearch: (() => void) | undefined;
+};
+export declare function Sidebar({ workspace, workspaceMenu, links, isToggled, isAnimating, onFollowLink, onSearch }: SidebarProps): import("react").JSX.Element;
+export {};

package/dist/components/Sidebar.js

@@ -0,0 +1,137 @@
+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 { focusRing } from "./controlLook.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, focusRing.visible, focusRing.inside).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',
+        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 { 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 appSettings = useModel('appSettings');
+    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: appSettings.title.charAt(0) }) }), _jsxs(Text, { as: "h1", variant: "title", tone: "primary", align: "center", children: ["Sign in to ", appSettings.title] }), 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%' }
+});