@trypattern/sdk 0.1.28 → 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

@@ -8,13 +8,13 @@ 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], 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, 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, corners } 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
     }

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/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/package.json

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