@trypattern/sdk 0.1.27 → 0.1.29

package/dist/components/ButtonBody.d.ts

@@ -17,9 +17,10 @@ export type ButtonProps = {
     disabled?: boolean;
     isPending?: boolean;
     isFullWidth?: boolean;
+    align?: 'start' | 'center';
     onClick?: () => void;
     style?: Placement;
 };
-export declare function ButtonBody({ children, variant, tone, size, to, href, icon, trailingIcon, shortcut, type, disabled, isPending, isFullWidth, onClick, style, isIconPinned }: ButtonProps & {
+export declare function ButtonBody({ children, variant, tone, size, to, href, icon, trailingIcon, shortcut, type, disabled, isPending, isFullWidth, align, onClick, style, isIconPinned }: ButtonProps & {
     isIconPinned?: boolean;
 }): import("react").JSX.Element;

package/dist/components/ButtonBody.js

@@ -3,18 +3,18 @@ import { Button as BaseButton } from '@base-ui/react/button';
 import { Link as RouterLink } from 'react-router';
 import * as stylex from '@stylexjs/stylex';
 import { colors, controls, fontWeights, iconSizes, motion, shadows } from "../theme/tokens.stylex.js";
-import { controlSizes, focusRing } from "./controlLook.js";
+import { buttonCorners, controlSizes, focusRing } from "./controlLook.js";
 import { Icon } from "./Icon.js";
 import { interact, textOf } from "./interaction.js";
 import { Kbd } from "./Kbd.js";
 import { Spinner } from "./Spinner.js";
-export function ButtonBody({ children, variant = 'primary', tone = variant === 'primary' ? 'brand' : 'neutral', size = 'md', to, href, icon, trailingIcon, shortcut, type = 'button', disabled = false, isPending = false, isFullWidth = false, onClick, style, isIconPinned = false }) {
+export function ButtonBody({ children, variant = 'primary', tone = variant === 'primary' ? 'brand' : 'neutral', size = 'md', to, href, icon, trailingIcon, shortcut, type = 'button', disabled = false, isPending = false, isFullWidth = false, align = 'center', onClick, style, isIconPinned = false }) {
     const isDisabled = disabled || isPending;
     const report = () => {
         interact({ primitive: 'Button', event: 'click', label: textOf(children) });
         onClick?.();
     };
-    const className = stylex.props(styles.button, controlSizes[size], icon !== undefined && !isIconPinned && leadingIconSizes[size], trailingIcon !== undefined && trailingIconSizes[size], looks[`${variant}${toneKeys[tone]}`], !isDisabled && hovers[`${variant}${toneKeys[tone]}`], isDisabled && styles.disabled, isDisabled && variant === 'transparent' && styles.disabledTransparent, isFullWidth && styles.fullWidth, focusRing.visible, style).className;
+    const className = stylex.props(styles.button, controlSizes[size], buttonCorners[size], icon !== undefined && !isIconPinned && leadingIconSizes[size], trailingIcon !== undefined && trailingIconSizes[size], looks[`${variant}${toneKeys[tone]}`], !isDisabled && hovers[`${variant}${toneKeys[tone]}`], isDisabled && styles.disabled, isDisabled && variant === 'transparent' && styles.disabledTransparent, isFullWidth && styles.fullWidth, align === 'start' && styles.alignStart, focusRing.visible, style).className;
     const content = (_jsxs("span", { ...stylex.props(styles.stack), children: [_jsxs("span", { ...stylex.props(styles.content, isIconPinned && styles.pinnedContent, isPending && styles.hidden), children: [icon === undefined ? null : _jsx(Icon, { name: icon, size: size }), _jsx("span", { ...stylex.props(styles.label, shortcut !== undefined && styles.labelBeforeShortcut, isIconPinned && styles.labelBetweenPins), children: children }), isIconPinned ? (_jsx("span", { "aria-hidden": "true", ...stylex.props(pinBalances[size]) })) : null, trailingIcon === undefined ? null : (_jsx(Icon, { name: trailingIcon, size: size })), shortcut === undefined ? null : _jsx(Kbd, { keys: shortcut })] }), isPending ? (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.pending), children: _jsx(Spinner, { size: size }) })) : null] }));
     if (href !== undefined) {
         return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: report, className: className, children: content }));
@@ -48,9 +48,11 @@ const styles = stylex.create({
         transitionProperty: 'color, background-color, transform'
     },
     fullWidth: {
-        justifyContent: 'flex-start',
         width: '100%'
     },
+    alignStart: {
+        justifyContent: 'flex-start'
+    },
     stack: {
         display: 'grid',
         flexGrow: 1,

package/dist/components/Checkbox.d.ts

@@ -3,8 +3,9 @@ type CheckboxProps = {
     label: string;
     checked: boolean;
     disabled?: boolean;
+    shape?: 'round' | 'square';
     onChange: (checked: boolean) => void;
     style?: Placement;
 };
-export declare function Checkbox({ label, checked, disabled, onChange, style }: CheckboxProps): import("react").JSX.Element;
+export declare function Checkbox({ label, checked, disabled, shape, onChange, style }: CheckboxProps): import("react").JSX.Element;
 export {};

package/dist/components/Checkbox.js

@@ -4,11 +4,11 @@ import * as stylex from '@stylexjs/stylex';
 import { borders, colors, iconSizes, motion, radii, space } from "../theme/tokens.stylex.js";
 import { focusRing } from "./controlLook.js";
 import { interact } from "./interaction.js";
-export function Checkbox({ label, checked, disabled = false, onChange, style }) {
+export function Checkbox({ label, checked, disabled = false, shape = 'round', onChange, style }) {
     return (_jsx(BaseCheckbox.Root, { "aria-label": label, checked: checked, disabled: disabled, onCheckedChange: (next) => {
             interact({ primitive: 'Checkbox', event: 'change', label });
             onChange(next);
-        }, className: (state) => stylex.props(styles.box, state.checked ? styles.on : styles.off, disabled && styles.disabled, focusRing.visible, style).className, children: _jsx(BaseCheckbox.Indicator, { className: stylex.props(styles.indicator).className, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.25", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...stylex.props(styles.tick), children: _jsx("path", { d: "M5 12.5 9.5 17 19 7.5" }) }) }) }));
+        }, className: (state) => stylex.props(styles.box, shape === 'square' && styles.square, state.checked ? styles.on : styles.off, disabled && styles.disabled, focusRing.visible, style).className, children: _jsx(BaseCheckbox.Indicator, { className: stylex.props(styles.indicator).className, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.25", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...stylex.props(styles.tick), children: _jsx("path", { d: "M5 12.5 9.5 17 19 7.5" }) }) }) }));
 }
 const styles = stylex.create({
     box: {
@@ -32,6 +32,9 @@ const styles = stylex.create({
             borderRadius: radii.full
         }
     },
+    square: {
+        borderRadius: radii.sm
+    },
     off: {
         backgroundColor: 'transparent',
         boxShadow: `0 0 0 ${borders.thin} ${colors.borderStrong} inset, 0 ${borders.thin} ${borders.thin} ${colors.borderSubtle}`

package/dist/components/IconButton.d.ts

@@ -5,10 +5,12 @@ type IconButtonProps = {
     icon: IconName;
     label: string;
     size?: Size;
+    variant?: 'transparent' | 'primary';
+    shape?: 'square' | 'round';
     shortcut?: readonly string[];
     disabled?: boolean;
     onClick: () => void;
     style?: Placement;
 };
-export declare function IconButton({ icon, label, size, shortcut, disabled, onClick, style }: IconButtonProps): import("react").JSX.Element;
+export declare function IconButton({ icon, label, size, variant, shape, shortcut, disabled, onClick, style }: IconButtonProps): import("react").JSX.Element;
 export {};

package/dist/components/IconButton.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as BaseButton } from '@base-ui/react/button';
 import * as stylex from '@stylexjs/stylex';
-import { colors, controls, radii } from "../theme/tokens.stylex.js";
+import { colors, controls, corners, radii } from "../theme/tokens.stylex.js";
 import { focusRing, transparentLook } from "./controlLook.js";
 import { Icon } from "./Icon.js";
 import { interact } from "./interaction.js";
 import { Tooltip } from "./Tooltip.js";
-export function IconButton({ icon, label, size = 'md', shortcut, disabled = false, onClick, style }) {
+export function IconButton({ icon, label, size = 'md', variant = 'transparent', shape = 'square', shortcut, disabled = false, onClick, style }) {
     return (_jsx(Tooltip, { label: label, shortcut: shortcut, children: _jsx(BaseButton, { "aria-label": label, disabled: disabled, focusableWhenDisabled: true, onClick: () => {
                 interact({ primitive: 'IconButton', event: 'click', label });
                 onClick();
-            }, className: stylex.props(styles.button, sizes[size], transparentLook.rest, !disabled && transparentLook.hoverable, disabled && styles.disabled, focusRing.visible, style).className, children: _jsx(Icon, { name: icon, size: size }) }) }));
+            }, className: stylex.props(styles.button, sizes[size], variant === 'transparent' && transparentLook.rest, variant === 'transparent' && !disabled && transparentLook.hoverable, variant === 'primary' && styles.primary, variant === 'primary' && !disabled && styles.primaryHoverable, shape === 'round' && styles.round, disabled && styles.disabled, focusRing.visible, style).className, children: _jsx(Icon, { name: icon, size: size }) }) }));
 }
 const styles = stylex.create({
     button: {
@@ -20,6 +20,20 @@ const styles = stylex.create({
         justifyContent: 'center',
         outlineOffset: 0
     },
+    primary: {
+        color: colors.onBrandSolidForeground,
+        backgroundColor: colors.brandSolid
+    },
+    primaryHoverable: {
+        backgroundColor: {
+            default: colors.brandSolid,
+            ':hover': colors.brandSolidHover,
+            ':active': colors.brandSolidActive
+        }
+    },
+    round: {
+        borderRadius: radii.full
+    },
     disabled: {
         color: colors.disabledForeground
     }
@@ -28,26 +42,26 @@ const sizes = stylex.create({
     xs: {
         width: controls.heightXs,
         height: controls.heightXs,
-        borderRadius: radii.sm
+        borderRadius: corners.buttonXs
     },
     sm: {
         width: controls.heightSm,
         height: controls.heightSm,
-        borderRadius: radii.md
+        borderRadius: corners.buttonSm
     },
     md: {
         width: controls.heightMd,
         height: controls.heightMd,
-        borderRadius: radii.md
+        borderRadius: corners.buttonMd
     },
     lg: {
         width: controls.heightLg,
         height: controls.heightLg,
-        borderRadius: radii.lg
+        borderRadius: corners.buttonLg
     },
     xl: {
         width: controls.heightXl,
         height: controls.heightXl,
-        borderRadius: radii.lg
+        borderRadius: corners.buttonXl
     }
 });

package/dist/components/PlainSidebar.js

@@ -18,7 +18,7 @@ export function PlainSidebar({ title, user, accountMenu, links, isToggled, isAni
         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("span", { ...stylex.props(styles.title), children: title }) }), 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: _jsx("div", { ...stylex.props(styles.group), children: links.map((item) => (_jsxs(NavLink, { onClick: () => followLink(item), to: item.to, end: item.to === '/' ||
+    return (_jsxs("nav", { ...stylex.props(styles.sidebar, isToggled && styles.sidebarToggled, isAnimating && styles.sidebarAnimating), children: [_jsx("div", { ...stylex.props(styles.header), children: _jsx("span", { ...stylex.props(styles.title), children: title }) }), onSearch === undefined ? null : (_jsx(Button, { variant: "secondary", icon: "search", shortcut: ['mod', 'k'], isFullWidth: true, align: "start", onClick: onSearch, children: "Search" })), _jsx("div", { ...stylex.props(styles.body), children: _jsx(ScrollArea, { children: _jsx("div", { ...stylex.props(styles.group), children: links.map((item) => (_jsxs(NavLink, { onClick: () => followLink(item), to: item.to, end: item.to === '/' ||
                                 links.some((other) => String(other.to).startsWith(`${String(item.to)}/`)), className: ({ isActive }) => stylex.props(styles.item, isActive && styles.itemCurrent, focusRing.visible, focusRing.inside).className ?? '', children: [_jsx(Icon, { name: item.icon, weight: "light" }), _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))) }) }) }), user === null ? null : (_jsxs(BaseMenu.Root, { children: [_jsxs(BaseMenu.Trigger, { className: (state) => stylex.props(styles.account, transparentLook.rest, transparentLook.hoverable, state.open && transparentLook.open, styles.accountText, focusRing.visible).className, children: [_jsx(Avatar, { name: user.name, imageUrl: user.avatarUrl }), _jsxs("span", { ...stylex.props(styles.who), children: [_jsx("span", { ...stylex.props(styles.name), children: user.name }), _jsx("span", { ...stylex.props(styles.email), children: user.email })] }), _jsx(Icon, { name: "chevronUpDown", tone: "secondary" })] }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { side: "top", align: "start", sideOffset: 4, className: stylex.props(styles.positioner).className, children: _jsx(BaseMenu.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "menu", isOpen: state.open, transitionStatus: state.transitionStatus })), children: _jsx(MenuItems, { items: accountMenu, primitive: "Menu" }) }) }) })] }))] }));
 }
 const styles = stylex.create({

package/dist/components/Select.js

@@ -2,7 +2,7 @@ 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 { fieldCorners, controlSizes } from "./controlLook.js";
 import { Icon } from "./Icon.js";
 import { interact } from "./interaction.js";
 import { Popup } from "./Popup.js";
@@ -13,7 +13,7 @@ export function Select({ label, value, options, size = 'md', disabled = false, o
                 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))) }) }) })] }));
+        }, children: [_jsxs(BaseSelect.Trigger, { "aria-label": label, className: (state) => stylex.props(styles.trigger, controlSizes[size], fieldCorners[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({

package/dist/components/Sidebar.js

@@ -15,7 +15,7 @@ export function Sidebar({ workspace, workspaceMenu, links, isToggled, isAnimatin
         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 === '/' ||
+    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, align: "start", 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 === '/' ||
                                     links.some((other) => String(other.to).startsWith(`${String(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({

package/dist/components/TextField.js

@@ -4,7 +4,7 @@ import * as stylex from '@stylexjs/stylex';
 import { useRef } from 'react';
 import { borders, colors, controls, fontSizes, fontWeights, lineHeights, motion, shadows, space } from "../theme/tokens.stylex.js";
 import { Icon } from "./Icon.js";
-import { controlSizes } from "./controlLook.js";
+import { fieldCorners, controlSizes } from "./controlLook.js";
 import { interact } from "./interaction.js";
 export function TextField({ label, isLabelHidden = false, description, error, onChange, multiline = false, rows = 3, size = 'md', icon, style, ...input }) {
     const isInvalid = error !== undefined;
@@ -15,7 +15,7 @@ export function TextField({ label, isLabelHidden = false, description, error, on
                             if (event.currentTarget.value !== valueOnFocus.current) {
                                 interact({ primitive: 'TextField', event: 'change', label });
                             }
-                        }, className: stylex.props(styles.input, controlSizes[size], multiline && styles.multiline, multiline && multilinePaddings[size], icon !== undefined && styles.withIcon, isInvalid && styles.invalid, input.disabled === true && styles.disabled).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 }))] }));
+                        }, className: stylex.props(styles.input, controlSizes[size], fieldCorners[size], multiline && styles.multiline, multiline && multilinePaddings[size], icon !== undefined && styles.withIcon, isInvalid && styles.invalid, input.disabled === true && styles.disabled).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}`;

package/dist/components/controlLook.d.ts

@@ -6,7 +6,6 @@ export declare const controlSizes: Readonly<{
         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>;
@@ -14,7 +13,6 @@ export declare const controlSizes: Readonly<{
         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>;
@@ -22,7 +20,6 @@ export declare const controlSizes: Readonly<{
         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>;
@@ -30,7 +27,6 @@ export declare const controlSizes: Readonly<{
         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>;
@@ -38,6 +34,39 @@ export declare const controlSizes: Readonly<{
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+}>;
+export declare const buttonCorners: Readonly<{
+    readonly xs: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly sm: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly md: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly lg: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly xl: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+}>;
+export declare const fieldCorners: Readonly<{
+    readonly xs: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly sm: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly md: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly lg: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly xl: Readonly<{
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
     }>;
 }>;

package/dist/components/controlLook.js

@@ -1,47 +1,56 @@
 import * as stylex from '@stylexjs/stylex';
-import { borders, colors, controls, motion, radii } from "../theme/tokens.stylex.js";
+import { borders, colors, controls, corners, motion } from "../theme/tokens.stylex.js";
 export const controlSizes = stylex.create({
     xs: {
         gap: controls.gapXs,
         height: controls.heightXs,
         paddingInline: controls.paddingXs,
         fontSize: controls.fontSizeXs,
-        lineHeight: controls.lineHeightXs,
-        borderRadius: radii.sm
+        lineHeight: controls.lineHeightXs
     },
     sm: {
         gap: controls.gapSm,
         height: controls.heightSm,
         paddingInline: controls.paddingSm,
         fontSize: controls.fontSizeSm,
-        lineHeight: controls.lineHeightSm,
-        borderRadius: radii.md
+        lineHeight: controls.lineHeightSm
     },
     md: {
         gap: controls.gapMd,
         height: controls.heightMd,
         paddingInline: controls.paddingMd,
         fontSize: controls.fontSizeMd,
-        lineHeight: controls.lineHeightMd,
-        borderRadius: radii.md
+        lineHeight: controls.lineHeightMd
     },
     lg: {
         gap: controls.gapLg,
         height: controls.heightLg,
         paddingInline: controls.paddingLg,
         fontSize: controls.fontSizeLg,
-        lineHeight: controls.lineHeightLg,
-        borderRadius: radii.lg
+        lineHeight: controls.lineHeightLg
     },
     xl: {
         gap: controls.gapXl,
         height: controls.heightXl,
         paddingInline: controls.paddingXl,
         fontSize: controls.fontSizeXl,
-        lineHeight: controls.lineHeightXl,
-        borderRadius: radii.lg
+        lineHeight: controls.lineHeightXl
     }
 });
+export const buttonCorners = stylex.create({
+    xs: { borderRadius: corners.buttonXs },
+    sm: { borderRadius: corners.buttonSm },
+    md: { borderRadius: corners.buttonMd },
+    lg: { borderRadius: corners.buttonLg },
+    xl: { borderRadius: corners.buttonXl }
+});
+export const fieldCorners = stylex.create({
+    xs: { borderRadius: corners.fieldXs },
+    sm: { borderRadius: corners.fieldSm },
+    md: { borderRadius: corners.fieldMd },
+    lg: { borderRadius: corners.fieldLg },
+    xl: { borderRadius: corners.fieldXl }
+});
 export const transparentLook = stylex.create({
     rest: {
         color: colors.secondaryForeground,

package/dist/rules/checkAllFiles.js

@@ -340,6 +340,7 @@ const SRC_ENTRY_FILES = new Set([
 ]);
 const SRC_FOLDER_PATTERNS = [
     /^theme\/(theme|icons)\.ts$/,
+    /^theme\/colors\.stylex\.ts$/,
     /^lib\/[a-z][A-Za-z]*\.ts$/,
     /^hooks\/use[A-Z][A-Za-z]*\.ts$/,
     /^screens\/[A-Z][A-Za-z]*Screen\.tsx$/,

package/dist/rules/lintPlugin.js

@@ -1,6 +1,7 @@
 import { ACTIONS_WHERE_MESSAGE, COMPONENT_FIRST_MESSAGE, COMPONENT_FILE_NAME_MESSAGE, DARK_MODE_IN_TOKENS_MESSAGE, DEV_ONLY_SIGN_IN_MESSAGE, EXPLICIT_ACCESS_MESSAGE, USE_BREAKPOINTS_MESSAGE, HOVER_USES_HIGHLIGHT_MESSAGE, NO_CLASSNAME_STRINGS_MESSAGE, NO_COMMENTS_MESSAGE, NO_INTERACTIVE_TRANSITION_MESSAGE, NO_POINTER_CURSOR_MESSAGE, NO_ROUTE_DATA_APIS_MESSAGE, ROUTES_UNDER_APP_LAYOUT_MESSAGE, SCROLL_VIEW_ONLY_MESSAGE, SELECTABLE_ONLY_MESSAGE, STATE_VIA_HOOKS_MESSAGE, MODEL_BY_NAME_MESSAGE, MODEL_MEMBERS_MESSAGE, PURE_ACTIONS_MESSAGE, PURE_GETTERS_MESSAGE, USE_MODEL_WHERE_MESSAGE, CLASSES_NOT_FACTORIES_MESSAGE, STORES_IN_APP_MESSAGE, TYPED_STYLE_PROP_MESSAGE, USE_COLOR_TOKEN_MESSAGE, USE_FONT_TOKEN_MESSAGE, USE_LINK_MESSAGE, USE_PRIMITIVES_MESSAGE, USE_IMAGE_MESSAGE, NO_WIDGET_ROLES_MESSAGE, NO_CLICK_ON_STATIC_MESSAGE, PRIMITIVE_NAMES_MESSAGE, USE_SPACE_TOKENS_MESSAGE, USE_SIZE_TOKENS_MESSAGE, TEXT_VIA_TEXT_MESSAGE, TEXT_ELEMENTS_MESSAGE, LOOSE_TEXT_MESSAGE, COMPOSE_IN_SCREENS_MESSAGE, NO_HOVER_IN_APP_MESSAGE } from "./messages.js";
 const TOKENS_FILE = 'src/theme/tokens.stylex.ts';
 const APP_THEME_FILE = 'src/theme/theme.ts';
+const APP_COLORS_FILE = 'src/theme/colors.stylex.ts';
 const SCROLL_AREA_FILE = 'src/components/ScrollArea.tsx';
 const SELECTABLE_FILE = 'src/components/Text.tsx';
 const PRIMITIVE_ELEMENTS = new Set([
@@ -322,8 +323,11 @@ const noPointerCursor = styleRule((declarations) => declarations
     .filter((d) => d.property === 'cursor' && stringValue(d.value) === 'pointer')
     .map((d) => ({ location: d.location, message: NO_POINTER_CURSOR_MESSAGE })));
 const useTokens = styleRule((declarations, context) => {
-    if (inFile(context, TOKENS_FILE) || inFile(context, APP_THEME_FILE))
+    if (inFile(context, TOKENS_FILE) ||
+        inFile(context, APP_THEME_FILE) ||
+        inFile(context, APP_COLORS_FILE)) {
         return [];
+    }
     return declarations.flatMap((d) => {
         const raw = stringValue(d.value);
         const isColorProperty = /color$/i.test(d.property) ||

package/dist/start.d.ts

@@ -5,8 +5,8 @@ import type { IconDrawing } from './components/icons.ts';
 import type { Interaction } from './components/interaction.ts';
 import type { ReactApp } from './hooks/appContext.ts';
 import type { Tables } from './table.ts';
-import { borders, colors, controls, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from './theme/tokens.stylex.ts';
-type Themeable = typeof colors | typeof radii | typeof fonts | typeof shadows | typeof space | typeof fontSizes | typeof fontWeights | typeof lineHeights | typeof trackings | typeof controls | typeof iconSizes | typeof borders | typeof widths;
+import { borders, colors, controls, corners, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from './theme/tokens.stylex.ts';
+type Themeable = typeof colors | typeof radii | typeof corners | typeof fonts | typeof shadows | typeof space | typeof fontSizes | typeof fontWeights | typeof lineHeights | typeof trackings | typeof controls | typeof iconSizes | typeof borders | typeof widths;
 export type StartOptions = {
     theme?: readonly Theme<Themeable>[];
     icons?: Readonly<Record<string, IconDrawing>>;

package/dist/start.js

@@ -12,7 +12,7 @@ import { manualClock, realClock } from "./clock.js";
 import { Gate } from "./gate.js";
 import { AppProvider } from "./hooks/appContext.js";
 import { routeObjects } from "./routes.js";
-import { borders, breakpoints, colors, controls, fontFeatures, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from "./theme/tokens.stylex.js";
+import { borders, breakpoints, colors, controls, corners, fontFeatures, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from "./theme/tokens.stylex.js";
 const TEST_SEED = 'patternSeed';
 const INLINE_DATA_ID = 'pattern-data';
 const TEST_ADMINS = 'patternAdmins';

package/dist/theme/tokens.stylex.d.ts

@@ -165,6 +165,18 @@ export declare const radii: stylex.VarGroup<Readonly<{
     xxxxl: string;
     full: string;
 }>, symbol>;
+export declare const corners: stylex.VarGroup<Readonly<{
+    buttonXs: string;
+    buttonSm: string;
+    buttonMd: string;
+    buttonLg: string;
+    buttonXl: string;
+    fieldXs: string;
+    fieldSm: string;
+    fieldMd: string;
+    fieldLg: string;
+    fieldXl: string;
+}>, symbol>;
 export declare const fontSizes: stylex.VarGroup<Readonly<{
     captionXs: string;
     captionSm: string;

package/dist/theme/tokens.stylex.js

@@ -165,6 +165,18 @@ export const radii = stylex.defineVars({
     xxxxl: '20px',
     full: '9999px'
 });
+export const corners = stylex.defineVars({
+    buttonXs: radii.sm,
+    buttonSm: radii.md,
+    buttonMd: radii.md,
+    buttonLg: radii.lg,
+    buttonXl: radii.lg,
+    fieldXs: radii.sm,
+    fieldSm: radii.md,
+    fieldMd: radii.md,
+    fieldLg: radii.lg,
+    fieldXl: radii.lg
+});
 export const fontSizes = stylex.defineVars({
     captionXs: '8px',
     captionSm: '10px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trypattern/sdk",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "type": "module",
   "files": [
     "dist",