@trypattern/sdk 0.1.8 → 0.1.10

package/dist/components/Checkbox.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+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 }) {
+    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" }) }) }) }));
+}
+const styles = stylex.create({
+    box: {
+        position: 'relative',
+        display: 'grid',
+        flexShrink: 0,
+        placeItems: 'center',
+        width: iconSizes.md,
+        height: iconSizes.md,
+        padding: 0,
+        color: colors.onInvertedForeground,
+        outlineOffset: borders.thin,
+        borderRadius: radii.full,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'background-color, box-shadow',
+        '::before': {
+            position: 'absolute',
+            inset: `calc(-1 * ${space.xs})`,
+            content: '""',
+            borderRadius: radii.full
+        }
+    },
+    off: {
+        backgroundColor: 'transparent',
+        boxShadow: `0 0 0 ${borders.thin} ${colors.borderStrong} inset, 0 ${borders.thin} ${borders.thin} ${colors.borderSubtle}`
+    },
+    on: {
+        backgroundColor: colors.invertedSolid,
+        backgroundImage: `linear-gradient(180deg, color-mix(in oklab, ${colors.whiteFill} 15%, transparent), transparent)`,
+        boxShadow: `0 ${borders.thin} 0 color-mix(in oklab, ${colors.whiteFill} 15%, transparent) inset, 0 ${borders.thin} 2px color-mix(in oklab, ${colors.blackFill} 20%, transparent), 0 0 0 ${borders.hairline} color-mix(in oklab, ${colors.blackFill} 40%, transparent)`
+    },
+    disabled: {
+        color: colors.disabledForeground,
+        backgroundColor: colors.disabled,
+        backgroundImage: 'none',
+        boxShadow: 'none'
+    },
+    indicator: {
+        display: 'grid',
+        placeItems: 'center'
+    },
+    tick: {
+        display: 'block',
+        width: `calc(${iconSizes.md} * 9 / 16)`,
+        height: `calc(${iconSizes.md} * 9 / 16)`
+    }
+});

package/dist/components/Choice.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+type ChoiceProps = {
+    value: string;
+    subline?: string;
+    isDisabled?: boolean;
+    children?: ReactNode;
+} & ({
+    title: string;
+    label?: string;
+} | {
+    title?: never;
+    label: string;
+});
+export declare function Choice({ value, title, label, subline, isDisabled, children }: ChoiceProps): import("react").JSX.Element;
+export {};

package/dist/components/Choice.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, fontSizes, fontWeights, lineHeights, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { useChosen } from "./choiceContext.js";
+import { focusRing } from "./controlLook.js";
+export function Choice({ value, title, label, subline, isDisabled = false, children }) {
+    const chosen = useChosen();
+    const isFaded = chosen !== null && chosen !== value;
+    const hasWords = title !== undefined || subline !== undefined;
+    return (_jsxs(BaseRadio.Root, { value: value, disabled: isDisabled, "aria-label": label, className: (state) => stylex.props(styles.choice, children !== undefined && !hasWords && styles.media, !state.disabled && styles.enabled, state.checked && styles.checked, isFaded && !state.checked && !state.disabled && styles.faded, state.disabled && styles.disabled, focusRing.visible).className, children: [children === undefined ? null : (_jsx("span", { ...stylex.props(styles.content), children: children })), title === undefined ? null : (_jsx("span", { ...stylex.props(styles.title), children: title })), subline === undefined ? null : (_jsx("span", { ...stylex.props(styles.subline, isDisabled && styles.sublineDisabled), children: subline }))] }));
+}
+const checkedRing = `inset 0 0 0 ${borders.thin} ${colors.borderInverted}, 0 0 0 ${borders.thin} ${colors.borderInverted}`;
+const styles = stylex.create({
+    choice: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs,
+        alignItems: 'flex-start',
+        minWidth: 0,
+        paddingBlock: space.sm,
+        paddingInline: space.md,
+        fontSize: fontSizes.bodySm,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.bodySm,
+        color: colors.primaryForeground,
+        textAlign: 'start',
+        outlineOffset: 0,
+        backgroundColor: colors.componentOnContainerStrong,
+        borderRadius: radii.lg,
+        boxShadow: shadows.default,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'background-color, box-shadow, opacity'
+    },
+    media: {
+        flexShrink: 0,
+        width: `calc(2 * ${space.xxxl})`,
+        padding: space.xs
+    },
+    enabled: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    checked: {
+        boxShadow: checkedRing
+    },
+    faded: {
+        opacity: {
+            default: 0.56,
+            ':hover': 1
+        }
+    },
+    disabled: {
+        color: colors.disabledForeground,
+        backgroundColor: colors.disabled,
+        boxShadow: 'none'
+    },
+    content: {
+        display: 'block',
+        alignSelf: 'stretch',
+        minWidth: 0,
+        overflow: 'hidden',
+        borderRadius: radii.md
+    },
+    title: {
+        minWidth: 0
+    },
+    subline: {
+        fontSize: fontSizes.captionLg,
+        fontWeight: fontWeights.normal,
+        lineHeight: lineHeights.caption,
+        color: colors.secondaryForeground
+    },
+    sublineDisabled: {
+        color: colors.disabledForeground
+    }
+});

package/dist/components/ChoiceGroup.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { Placement } from './Placement.ts';
+type ChoiceGroupProps<Value extends string> = {
+    label: string;
+    value: Value | null;
+    onChange: (value: Value) => void;
+    children: ReactNode;
+    style?: Placement;
+};
+export declare function ChoiceGroup<Value extends string>({ label, value, onChange, children, style }: ChoiceGroupProps<Value>): import("react").JSX.Element;
+export {};

package/dist/components/ChoiceGroup.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import * as stylex from '@stylexjs/stylex';
+import { Children, isValidElement } from 'react';
+import { space } from "../theme/tokens.stylex.js";
+import { ChoiceContext } from "./choiceContext.js";
+import { interact, textOf } from "./interaction.js";
+export function ChoiceGroup({ label, value, onChange, children, style }) {
+    return (_jsx(ChoiceContext, { value: { value }, children: _jsx(BaseRadioGroup, { "aria-label": label, value: value, onValueChange: (next) => {
+                if (typeof next !== 'string')
+                    return;
+                interact({
+                    primitive: 'ChoiceGroup',
+                    event: 'change',
+                    label: labelOf(children, next)
+                });
+                onChange(next);
+            }, className: stylex.props(styles.group, style).className, children: children }) }));
+}
+function labelOf(children, value) {
+    for (const child of Children.toArray(children)) {
+        if (!isValidElement(child))
+            continue;
+        const { props } = child;
+        if (props['value'] !== value)
+            continue;
+        for (const name of ['title', 'label']) {
+            const text = props[name];
+            if (typeof text === 'string' && text !== '')
+                return text;
+        }
+        return textOf(props['children']) || value;
+    }
+    return value;
+}
+const styles = stylex.create({
+    group: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: space.sm,
+        alignItems: 'stretch',
+        minWidth: 0
+    }
+});

package/dist/components/Icon.d.ts

@@ -5,6 +5,7 @@ type IconProps = {
     name: IconName;
     size?: Size;
     tone?: Tone;
+    weight?: 'regular' | 'light';
 };
-export declare function Icon({ name, size, tone }: IconProps): import("react").JSX.Element;
+export declare function Icon({ name, size, tone, weight }: IconProps): import("react").JSX.Element;
 export {};

package/dist/components/Icon.js

@@ -3,9 +3,9 @@ import * as stylex from '@stylexjs/stylex';
 import { iconSizes } from "../theme/tokens.stylex.js";
 import { shapeOf } from "./icons.js";
 import { tones } from "./tones.js";
-export function Icon({ name, size = 'md', tone = 'inherit' }) {
+export function Icon({ name, size = 'md', tone = 'inherit', weight = 'regular' }) {
     const shape = shapeOf(name);
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: shape.isFilled ? 'currentColor' : 'none', fillRule: shape.rule, stroke: shape.isFilled ? 'none' : 'currentColor', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...stylex.props(styles.icon, sizes[size], tones[tone]), children: shape.paths.map((path) => (_jsx("path", { d: path }, path))) }));
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: shape.isFilled ? 'currentColor' : 'none', fillRule: shape.rule, stroke: shape.isFilled ? 'none' : 'currentColor', strokeWidth: weight === 'light' ? '1.5' : '2', strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...stylex.props(styles.icon, sizes[size], tones[tone]), children: shape.paths.map((path) => (_jsx("path", { d: path }, path))) }));
 }
 const styles = stylex.create({
     icon: {

package/dist/components/Image.d.ts

@@ -0,0 +1,11 @@
+import type { MediaImage } from '../media.ts';
+import type { Placement } from './Placement.ts';
+type ImageProps = {
+    image: MediaImage | null | undefined;
+    sizes: string;
+    priority?: boolean;
+    aspect?: number;
+    style?: Placement;
+};
+export declare function Image({ image, sizes, priority, aspect, style }: ImageProps): import("react").JSX.Element;
+export {};

package/dist/components/Image.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { imageSources, transformsOn } from "../media.js";
+import { colors, motion } from "../theme/tokens.stylex.js";
+export function Image({ image, sizes, priority = false, aspect, style }) {
+    const key = image?.key ?? null;
+    const [seen, setSeen] = useState({
+        key,
+        status: 'loading'
+    });
+    const status = seen.key === key ? seen.status : 'loading';
+    if (image === null || image === undefined) {
+        return (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.frame, styles.ratio(aspect ?? MISSING_ASPECT), style) }));
+    }
+    const ratio = aspect ?? image.width / image.height;
+    if (status === 'failed') {
+        return (_jsx("span", { role: "img", "aria-label": image.alt, ...stylex.props(styles.frame, styles.ratio(ratio), style) }));
+    }
+    const sources = imageSources(image, {
+        aspect,
+        transforms: servedWithTransforms()
+    });
+    return (_jsxs("span", { ...stylex.props(styles.frame, styles.ratio(ratio), style), children: [image.placeholder === null ? null : (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.placeholder(image.placeholder)) })), _jsx("img", { ref: (element) => {
+                    if (status === 'loading' &&
+                        element !== null &&
+                        element.complete &&
+                        element.naturalWidth > 0) {
+                        setSeen({ key, status: 'shown' });
+                    }
+                }, alt: image.alt, width: sources.width, height: sources.height, loading: priority ? 'eager' : 'lazy', decoding: priority ? 'auto' : 'async', fetchPriority: priority ? 'high' : 'auto', sizes: sizes, srcSet: sources.srcSet, src: sources.src, onLoad: () => setSeen((current) => current.key === key && current.status === 'shown'
+                    ? current
+                    : { key, status: 'fading' }), onError: () => setSeen({ key, status: 'failed' }), ...stylex.props(styles.image, status === 'fading' && styles.fading, status === 'shown' && styles.shown) })] }));
+}
+const MISSING_ASPECT = 4 / 3;
+function servedWithTransforms() {
+    return typeof location !== 'undefined' && transformsOn(location.hostname);
+}
+const styles = stylex.create({
+    frame: {
+        position: 'relative',
+        display: 'block',
+        width: '100%',
+        overflow: 'hidden',
+        backgroundColor: colors.component
+    },
+    ratio: (ratio) => ({
+        aspectRatio: String(ratio)
+    }),
+    placeholder: (url) => ({
+        position: 'absolute',
+        inset: 0,
+        backgroundImage: `url("${url}")`,
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        filter: 'blur(16px)',
+        transform: 'scale(1.1)'
+    }),
+    image: {
+        position: 'relative',
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        opacity: 0
+    },
+    fading: {
+        opacity: 1,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'opacity'
+    },
+    shown: {
+        opacity: 1
+    }
+});

package/dist/components/Link.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
 import { Link as RouterLink } from 'react-router';
-import { colors, motion, radii } from "../theme/tokens.stylex.js";
+import { borders, colors, motion, radii } from "../theme/tokens.stylex.js";
 import { focusRing } from "./controlLook.js";
 import { interact, textOf } from "./interaction.js";
 export function Link({ to, href, tone = 'brand', children }) {
-    const className = stylex.props(styles.link, looks[tone], focusRing.visible).className;
+    const className = stylex.props(styles.link, looks[tone], href !== undefined && styles.leaves, focusRing.visible).className;
     if (href !== undefined) {
         return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: () => interact({
                 primitive: 'Link',
@@ -21,11 +21,16 @@ export function Link({ to, href, tone = 'brand', children }) {
 }
 const styles = stylex.create({
     link: {
-        textDecoration: 'none',
+        textDecorationLine: 'none',
         borderRadius: radii.xs,
         transitionTimingFunction: motion.easeOut,
         transitionDuration: motion.fast,
         transitionProperty: 'color'
+    },
+    leaves: {
+        textDecorationLine: 'underline',
+        textDecorationThickness: borders.thin,
+        textUnderlineOffset: '0.25em'
     }
 });
 const looks = stylex.create({

package/dist/components/ListRow.d.ts

@@ -4,9 +4,10 @@ type ListRowProps = {
     to?: AppPath;
     onClick?: () => void;
     isMuted?: boolean;
+    isCurrent?: boolean;
     leading?: ReactNode;
     trailing?: ReactNode;
     children: ReactNode;
 };
-export declare function ListRow({ to, onClick, isMuted, leading, trailing, children }: ListRowProps): import("react").JSX.Element;
+export declare function ListRow({ to, onClick, isMuted, isCurrent, leading, trailing, children }: ListRowProps): import("react").JSX.Element;
 export {};

package/dist/components/ListRow.js

@@ -5,9 +5,9 @@ import { Link as RouterLink } from 'react-router';
 import { colors, controls, radii, space } from "../theme/tokens.stylex.js";
 import { focusRing } from "./controlLook.js";
 import { interact, textOf } from "./interaction.js";
-export function ListRow({ to, onClick, isMuted = false, leading, trailing, children }) {
+export function ListRow({ to, onClick, isMuted = false, isCurrent = false, leading, trailing, children }) {
     const content = (_jsxs(_Fragment, { children: [leading, _jsx("span", { ...stylex.props(styles.main), children: children }), trailing === undefined ? null : (_jsx("span", { ...stylex.props(styles.trailing), children: trailing }))] }));
-    const look = stylex.props(styles.row, (to !== undefined || onClick !== undefined) && styles.interactive, isMuted && styles.muted, focusRing.visible, focusRing.inside);
+    const look = stylex.props(styles.row, (to !== undefined || onClick !== undefined) && styles.interactive, isMuted && styles.muted, isCurrent && styles.current, focusRing.visible, focusRing.inside);
     const report = () => {
         interact({
             primitive: 'ListRow',
@@ -17,10 +17,10 @@ export function ListRow({ to, onClick, isMuted = false, leading, trailing, child
         onClick?.();
     };
     if (to !== undefined) {
-        return (_jsx(RouterLink, { to: to, onClick: report, ...look, children: content }));
+        return (_jsx(RouterLink, { to: to, onClick: report, "aria-current": isCurrent ? 'page' : undefined, ...look, children: content }));
     }
     if (onClick !== undefined) {
-        return (_jsx(BaseButton, { onClick: report, className: look.className, children: content }));
+        return (_jsx(BaseButton, { onClick: report, "aria-pressed": isCurrent, className: look.className, children: content }));
     }
     return _jsx("div", { ...look, children: content });
 }
@@ -46,6 +46,9 @@ const styles = stylex.create({
     muted: {
         color: colors.tertiaryForeground
     },
+    current: {
+        backgroundColor: colors.transparentHover
+    },
     main: {
         display: 'flex',
         flexGrow: 1,

package/dist/components/PlainScreen.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { AppPath } from '../registered.ts';
+type PlainScreenProps = {
+    title: string;
+    eyebrow: string | undefined;
+    parent: {
+        label: string;
+        to: AppPath;
+    } | undefined;
+    actions: ReactNode;
+    width: 'xs' | 'sm' | 'md' | 'lg' | 'full';
+    onToggleSidebar: () => void;
+    children: ReactNode;
+};
+export declare function PlainScreen({ title, eyebrow, parent, actions, width, onToggleSidebar, children }: PlainScreenProps): import("react").JSX.Element;
+export {};

package/dist/components/PlainScreen.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { breakpoints, controls, space, widths } from "../theme/tokens.stylex.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 PlainScreen({ title, eyebrow, parent, actions, width, onToggleSidebar, children }) {
+    return (_jsxs("div", { ...stylex.props(styles.screen), children: [_jsx("div", { ...stylex.props(styles.bar), children: _jsx(IconButton, { icon: "panelLeft", label: "Toggle sidebar", onClick: onToggleSidebar }) }), _jsx(ScrollArea, { style: styles.body, children: _jsx("div", { ...stylex.props(styles.page), children: _jsxs("div", { ...stylex.props(styles.column, columnWidths[width]), children: [_jsxs("header", { ...stylex.props(styles.header), children: [_jsxs("div", { ...stylex.props(styles.heading), children: [parent === undefined ? null : (_jsxs("span", { ...stylex.props(styles.parent), children: [_jsx(Link, { to: parent.to, tone: "secondary", children: parent.label }), _jsx(Icon, { name: "chevronRight", tone: "tertiary" })] })), parent !== undefined || eyebrow === undefined ? null : (_jsx(Text, { tone: "secondary", children: eyebrow })), _jsx(Text, { as: "h1", variant: "heading", tone: "primary", isSelectable: true, children: title })] }), actions === undefined || actions === null ? null : (_jsx("div", { ...stylex.props(styles.actions), children: actions }))] }), children] }) }) })] }));
+}
+const styles = stylex.create({
+    screen: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+    },
+    bar: {
+        display: {
+            default: 'none',
+            [breakpoints.compact]: 'flex'
+        },
+        flexShrink: 0,
+        alignItems: 'center',
+        height: `calc(${controls.heightXl} + ${space.sm})`,
+        paddingInline: space.sm
+    },
+    body: {
+        flexGrow: 1,
+        height: 'auto'
+    },
+    page: {
+        paddingInline: {
+            default: space.xxxl,
+            [breakpoints.compact]: space.lg
+        },
+        paddingTop: {
+            default: `calc(${space.xxxl} + ${space.sm})`,
+            [breakpoints.compact]: space.sm
+        },
+        paddingBottom: `calc(${space.xxxl} * 2)`
+    },
+    column: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xl,
+        width: '100%',
+        marginInline: 'auto'
+    },
+    header: {
+        display: 'flex',
+        gap: space.md,
+        alignItems: 'flex-end',
+        justifyContent: 'space-between'
+    },
+    heading: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs,
+        minWidth: 0
+    },
+    parent: {
+        display: 'flex',
+        gap: space.xs,
+        alignItems: 'center'
+    },
+    actions: {
+        display: 'flex',
+        flexShrink: 0,
+        gap: space.sm,
+        alignItems: 'center'
+    }
+});
+const columnWidths = stylex.create({
+    xs: { maxWidth: widths.contentXs },
+    sm: { maxWidth: widths.contentSm },
+    md: { maxWidth: widths.contentMd },
+    lg: { maxWidth: widths.contentLg },
+    full: { maxWidth: 'none' }
+});

package/dist/components/PlainSidebar.d.ts

@@ -0,0 +1,15 @@
+import type { User } from '../auth/user.ts';
+import type { MenuEntry } from './MenuItems.tsx';
+import type { SidebarLink } from './Sidebar.tsx';
+type PlainSidebarProps = {
+    title: string;
+    user: User | null;
+    accountMenu: readonly MenuEntry[];
+    links: readonly SidebarLink[];
+    isToggled: boolean;
+    isAnimating: boolean;
+    onFollowLink: () => void;
+    onSearch: (() => void) | undefined;
+};
+export declare function PlainSidebar({ title, user, accountMenu, links, isToggled, isAnimating, onFollowLink, onSearch }: PlainSidebarProps): import("react").JSX.Element;
+export {};