@trypattern/sdk 0.1.31 → 0.1.33

package/dist/bookings.d.ts

@@ -205,7 +205,7 @@ export declare const bookingServices: {
                 closed: "closed";
                 full: "full";
             }>;
-        }, z.core.$strip>>>>;
+        }, z.core.$strip>>, false>>;
         readonly windows: NoInfer<import("./services.ts").ServiceCall<"/bookings/windows", {
             date: z.ZodString;
         }, z.ZodArray<z.ZodObject<{
@@ -214,7 +214,7 @@ export declare const bookingServices: {
             start: z.ZodString;
             end: z.ZodString;
             remaining: z.ZodNumber;
-        }, z.core.$strip>>>>;
+        }, z.core.$strip>>, false>>;
         readonly request: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests", {
             offering: z.ZodString;
             date: z.ZodString;
@@ -242,7 +242,7 @@ export declare const bookingServices: {
                 declined: "declined";
                 cancelled: "cancelled";
             }>;
-        }, z.core.$strip>>>;
+        }, z.core.$strip>, false>>;
         readonly requests: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests", {}, z.ZodArray<z.ZodObject<{
             id: z.ZodString;
             createdAt: z.ZodString;
@@ -261,7 +261,7 @@ export declare const bookingServices: {
                 declined: "declined";
                 cancelled: "cancelled";
             }>;
-        }, z.core.$strip>>>>;
+        }, z.core.$strip>>, false>>;
         readonly accept: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests/:id/accept", {}, z.ZodObject<{
             id: z.ZodString;
             createdAt: z.ZodString;
@@ -280,7 +280,7 @@ export declare const bookingServices: {
                 declined: "declined";
                 cancelled: "cancelled";
             }>;
-        }, z.core.$strip>>>;
+        }, z.core.$strip>, false>>;
         readonly decline: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests/:id/decline", {}, z.ZodObject<{
             id: z.ZodString;
             createdAt: z.ZodString;
@@ -299,7 +299,7 @@ export declare const bookingServices: {
                 declined: "declined";
                 cancelled: "cancelled";
             }>;
-        }, z.core.$strip>>>;
+        }, z.core.$strip>, false>>;
         readonly rules: NoInfer<import("./services.ts").ServiceCall<"/bookings/rules", {}, z.ZodObject<{
             windows: z.ZodArray<z.ZodObject<{
                 weekday: z.ZodEnum<{
@@ -323,7 +323,7 @@ export declare const bookingServices: {
                 date: z.ZodString;
                 reason: z.ZodString;
             }, z.core.$strip>>;
-        }, z.core.$strip>>>;
+        }, z.core.$strip>, false>>;
         readonly saveRules: NoInfer<import("./services.ts").ServiceCall<"/bookings/rules", {
             windows: z.ZodArray<z.ZodObject<{
                 weekday: z.ZodEnum<{
@@ -370,7 +370,7 @@ export declare const bookingServices: {
                 date: z.ZodString;
                 reason: z.ZodString;
             }, z.core.$strip>>;
-        }, z.core.$strip>>>;
+        }, z.core.$strip>, false>>;
     };
 };
 export declare const FULL = "That window was just taken. Choose another window or another day.";

package/dist/bookingsStore.d.ts

@@ -98,7 +98,7 @@ declare const Bookings_base: import("./store.ts").StoreClass<{
                 closed: "closed";
                 full: "full";
             }>;
-        }, z.core.$strip>>>>;
+        }, z.core.$strip>>, false>>;
         readonly windows: NoInfer<import("./services.ts").ServiceCall<"/bookings/windows", {
             date: z.ZodString;
         }, z.ZodArray<z.ZodObject<{
@@ -107,7 +107,7 @@ declare const Bookings_base: import("./store.ts").StoreClass<{
             start: z.ZodString;
             end: z.ZodString;
             remaining: z.ZodNumber;
-        }, z.core.$strip>>>>;
+        }, z.core.$strip>>, false>>;
         readonly request: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests", {
             offering: z.ZodString;
             date: z.ZodString;
@@ -135,7 +135,7 @@ declare const Bookings_base: import("./store.ts").StoreClass<{
                 declined: "declined";
                 cancelled: "cancelled";
             }>;
-        }, z.core.$strip>>>;
+        }, z.core.$strip>, false>>;
         readonly requests: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests", {}, z.ZodArray<z.ZodObject<{
             id: z.ZodString;
             createdAt: z.ZodString;
@@ -154,7 +154,7 @@ declare const Bookings_base: import("./store.ts").StoreClass<{
                 declined: "declined";
                 cancelled: "cancelled";
             }>;
-        }, z.core.$strip>>>>;
+        }, z.core.$strip>>, false>>;
         readonly accept: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests/:id/accept", {}, z.ZodObject<{
             id: z.ZodString;
             createdAt: z.ZodString;
@@ -173,7 +173,7 @@ declare const Bookings_base: import("./store.ts").StoreClass<{
                 declined: "declined";
                 cancelled: "cancelled";
             }>;
-        }, z.core.$strip>>>;
+        }, z.core.$strip>, false>>;
         readonly decline: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests/:id/decline", {}, z.ZodObject<{
             id: z.ZodString;
             createdAt: z.ZodString;
@@ -192,7 +192,7 @@ declare const Bookings_base: import("./store.ts").StoreClass<{
                 declined: "declined";
                 cancelled: "cancelled";
             }>;
-        }, z.core.$strip>>>;
+        }, z.core.$strip>, false>>;
         readonly rules: NoInfer<import("./services.ts").ServiceCall<"/bookings/rules", {}, z.ZodObject<{
             windows: z.ZodArray<z.ZodObject<{
                 weekday: z.ZodEnum<{
@@ -216,7 +216,7 @@ declare const Bookings_base: import("./store.ts").StoreClass<{
                 date: z.ZodString;
                 reason: z.ZodString;
             }, z.core.$strip>>;
-        }, z.core.$strip>>>;
+        }, z.core.$strip>, false>>;
         readonly saveRules: NoInfer<import("./services.ts").ServiceCall<"/bookings/rules", {
             windows: z.ZodArray<z.ZodObject<{
                 weekday: z.ZodEnum<{
@@ -263,7 +263,7 @@ declare const Bookings_base: import("./store.ts").StoreClass<{
                 date: z.ZodString;
                 reason: z.ZodString;
             }, z.core.$strip>>;
-        }, z.core.$strip>>>;
+        }, z.core.$strip>, false>>;
     };
 }>>;
 export declare class Bookings extends Bookings_base {
@@ -346,7 +346,7 @@ export declare const bookings: {
                     closed: "closed";
                     full: "full";
                 }>;
-            }, z.core.$strip>>>>;
+            }, z.core.$strip>>, false>>;
             readonly windows: NoInfer<import("./services.ts").ServiceCall<"/bookings/windows", {
                 date: z.ZodString;
             }, z.ZodArray<z.ZodObject<{
@@ -355,7 +355,7 @@ export declare const bookings: {
                 start: z.ZodString;
                 end: z.ZodString;
                 remaining: z.ZodNumber;
-            }, z.core.$strip>>>>;
+            }, z.core.$strip>>, false>>;
             readonly request: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests", {
                 offering: z.ZodString;
                 date: z.ZodString;
@@ -383,7 +383,7 @@ export declare const bookings: {
                     declined: "declined";
                     cancelled: "cancelled";
                 }>;
-            }, z.core.$strip>>>;
+            }, z.core.$strip>, false>>;
             readonly requests: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests", {}, z.ZodArray<z.ZodObject<{
                 id: z.ZodString;
                 createdAt: z.ZodString;
@@ -402,7 +402,7 @@ export declare const bookings: {
                     declined: "declined";
                     cancelled: "cancelled";
                 }>;
-            }, z.core.$strip>>>>;
+            }, z.core.$strip>>, false>>;
             readonly accept: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests/:id/accept", {}, z.ZodObject<{
                 id: z.ZodString;
                 createdAt: z.ZodString;
@@ -421,7 +421,7 @@ export declare const bookings: {
                     declined: "declined";
                     cancelled: "cancelled";
                 }>;
-            }, z.core.$strip>>>;
+            }, z.core.$strip>, false>>;
             readonly decline: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests/:id/decline", {}, z.ZodObject<{
                 id: z.ZodString;
                 createdAt: z.ZodString;
@@ -440,7 +440,7 @@ export declare const bookings: {
                     declined: "declined";
                     cancelled: "cancelled";
                 }>;
-            }, z.core.$strip>>>;
+            }, z.core.$strip>, false>>;
             readonly rules: NoInfer<import("./services.ts").ServiceCall<"/bookings/rules", {}, z.ZodObject<{
                 windows: z.ZodArray<z.ZodObject<{
                     weekday: z.ZodEnum<{
@@ -464,7 +464,7 @@ export declare const bookings: {
                     date: z.ZodString;
                     reason: z.ZodString;
                 }, z.core.$strip>>;
-            }, z.core.$strip>>>;
+            }, z.core.$strip>, false>>;
             readonly saveRules: NoInfer<import("./services.ts").ServiceCall<"/bookings/rules", {
                 windows: z.ZodArray<z.ZodObject<{
                     weekday: z.ZodEnum<{
@@ -511,7 +511,7 @@ export declare const bookings: {
                     date: z.ZodString;
                     reason: z.ZodString;
                 }, z.core.$strip>>;
-            }, z.core.$strip>>>;
+            }, z.core.$strip>, false>>;
         };
     };
     readonly memory: import("./services.ts").ServiceMemory<{
@@ -525,7 +525,7 @@ export declare const bookings: {
                     closed: "closed";
                     full: "full";
                 }>;
-            }, z.core.$strip>>>>;
+            }, z.core.$strip>>, false>>;
             readonly windows: NoInfer<import("./services.ts").ServiceCall<"/bookings/windows", {
                 date: z.ZodString;
             }, z.ZodArray<z.ZodObject<{
@@ -534,7 +534,7 @@ export declare const bookings: {
                 start: z.ZodString;
                 end: z.ZodString;
                 remaining: z.ZodNumber;
-            }, z.core.$strip>>>>;
+            }, z.core.$strip>>, false>>;
             readonly request: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests", {
                 offering: z.ZodString;
                 date: z.ZodString;
@@ -562,7 +562,7 @@ export declare const bookings: {
                     declined: "declined";
                     cancelled: "cancelled";
                 }>;
-            }, z.core.$strip>>>;
+            }, z.core.$strip>, false>>;
             readonly requests: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests", {}, z.ZodArray<z.ZodObject<{
                 id: z.ZodString;
                 createdAt: z.ZodString;
@@ -581,7 +581,7 @@ export declare const bookings: {
                     declined: "declined";
                     cancelled: "cancelled";
                 }>;
-            }, z.core.$strip>>>>;
+            }, z.core.$strip>>, false>>;
             readonly accept: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests/:id/accept", {}, z.ZodObject<{
                 id: z.ZodString;
                 createdAt: z.ZodString;
@@ -600,7 +600,7 @@ export declare const bookings: {
                     declined: "declined";
                     cancelled: "cancelled";
                 }>;
-            }, z.core.$strip>>>;
+            }, z.core.$strip>, false>>;
             readonly decline: NoInfer<import("./services.ts").ServiceCall<"/bookings/requests/:id/decline", {}, z.ZodObject<{
                 id: z.ZodString;
                 createdAt: z.ZodString;
@@ -619,7 +619,7 @@ export declare const bookings: {
                     declined: "declined";
                     cancelled: "cancelled";
                 }>;
-            }, z.core.$strip>>>;
+            }, z.core.$strip>, false>>;
             readonly rules: NoInfer<import("./services.ts").ServiceCall<"/bookings/rules", {}, z.ZodObject<{
                 windows: z.ZodArray<z.ZodObject<{
                     weekday: z.ZodEnum<{
@@ -643,7 +643,7 @@ export declare const bookings: {
                     date: z.ZodString;
                     reason: z.ZodString;
                 }, z.core.$strip>>;
-            }, z.core.$strip>>>;
+            }, z.core.$strip>, false>>;
             readonly saveRules: NoInfer<import("./services.ts").ServiceCall<"/bookings/rules", {
                 windows: z.ZodArray<z.ZodObject<{
                     weekday: z.ZodEnum<{
@@ -690,7 +690,7 @@ export declare const bookings: {
                     date: z.ZodString;
                     reason: z.ZodString;
                 }, z.core.$strip>>;
-            }, z.core.$strip>>>;
+            }, z.core.$strip>, false>>;
         };
     }, unknown>;
     readonly Store: typeof Bookings;

package/dist/components/FilePicker.d.ts

@@ -0,0 +1,13 @@
+import type { PickedFile } from '../files.ts';
+import type { Placement } from './Placement.ts';
+type FilePickerProps = {
+    title: string;
+    hint?: string;
+    buttonLabel: string;
+    accept: readonly string[];
+    onPick: (file: PickedFile) => void;
+    disabled?: boolean;
+    style?: Placement;
+};
+export declare function FilePicker({ title, hint, buttonLabel, accept, onPick, disabled, style }: FilePickerProps): import("react").JSX.Element;
+export {};

package/dist/components/FilePicker.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { useRef, useState } from 'react';
+import { rememberFile } from "../files.js";
+import { borders, colors, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+import { interact } from "./interaction.js";
+import { Text } from "./Text.js";
+export function FilePicker({ title, hint, buttonLabel, accept, onPick, disabled = false, style }) {
+    const input = useRef(null);
+    const [isOver, setIsOver] = useState(false);
+    const pick = (file, event) => {
+        if (file === undefined || disabled)
+            return;
+        interact({
+            primitive: 'FilePicker',
+            event: event === 'drop' ? 'change' : 'select',
+            label: title
+        });
+        onPick(rememberFile(file));
+    };
+    const over = (event) => {
+        if (disabled || !event.dataTransfer.types.includes('Files'))
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+        setIsOver(true);
+    };
+    return (_jsxs("div", { onDragEnter: over, onDragOver: over, onDragLeave: () => setIsOver(false), onDrop: (event) => {
+            event.preventDefault();
+            setIsOver(false);
+            pick(event.dataTransfer.files[0], 'drop');
+        }, ...stylex.props(styles.zone, isOver && styles.over, style), children: [_jsx("span", { ...stylex.props(styles.mark), children: _jsx(Icon, { name: "image", size: "xl", tone: "secondary" }) }), _jsxs("span", { ...stylex.props(styles.words), children: [_jsx(Text, { variant: "label", tone: "primary", align: "center", children: title }), hint === undefined ? null : (_jsx(Text, { variant: "caption", tone: "tertiary", align: "center", children: hint }))] }), _jsx(Button, { variant: "secondary", size: "md", disabled: disabled, onClick: () => input.current?.click(), children: buttonLabel }), _jsx("input", { ref: input, type: "file", accept: accept.join(','), tabIndex: -1, "aria-hidden": true, disabled: disabled, onChange: (event) => {
+                    pick(event.target.files?.[0], 'choose');
+                    event.target.value = '';
+                }, ...stylex.props(styles.input) })] }));
+}
+const styles = stylex.create({
+    zone: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: `calc(${space.sm} + ${space.xxs})`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: `calc(${space.xxxl} * 3 + ${space.xl} + ${space.sm} + ${space.xs})`,
+        padding: `calc(${space.lg} + ${space.xs})`,
+        backgroundColor: colors.containerRecessed,
+        borderColor: colors.borderStrong,
+        borderStyle: 'dashed',
+        borderWidth: `calc(${borders.thin} + ${borders.hairline})`,
+        borderRadius: radii.lg,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'background-color, border-color'
+    },
+    over: {
+        backgroundColor: colors.brandSubtle,
+        borderColor: colors.brandBorderFocus
+    },
+    mark: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: `calc(${space.xxl} + ${space.xs})`,
+        height: `calc(${space.xxl} + ${space.xs})`,
+        backgroundColor: colors.componentOnContainerStrong,
+        borderRadius: radii.full,
+        boxShadow: shadows.default
+    },
+    words: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs,
+        alignItems: 'center'
+    },
+    input: {
+        display: 'none'
+    }
+});

package/dist/components/FilePreview.d.ts

@@ -0,0 +1,10 @@
+import type { PickedFile } from '../files.ts';
+import type { Placement } from './Placement.ts';
+type FilePreviewProps = {
+    file: PickedFile;
+    alt: string;
+    aspect?: number;
+    style?: Placement;
+};
+export declare function FilePreview({ file, alt, aspect, style }: FilePreviewProps): import("react").JSX.Element;
+export {};

package/dist/components/FilePreview.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useState } from 'react';
+import { pickedFileOf } from "../files.js";
+import { colors } from "../theme/tokens.stylex.js";
+export function FilePreview({ file, alt, aspect = 1, style }) {
+    const [shown, setShown] = useState(null);
+    useEffect(() => {
+        const picked = pickedFileOf(file.id);
+        if (picked === undefined || !picked.type.startsWith('image/'))
+            return;
+        const url = URL.createObjectURL(picked);
+        setShown({ id: file.id, url });
+        return () => URL.revokeObjectURL(url);
+    }, [file.id]);
+    const url = shown?.id === file.id ? shown.url : null;
+    return (_jsx("span", { ...stylex.props(styles.frame, styles.ratio(aspect), style), children: url === null ? null : (_jsx("img", { alt: alt, src: url, ...stylex.props(styles.image) })) }));
+}
+const styles = stylex.create({
+    frame: {
+        position: 'relative',
+        display: 'block',
+        width: '100%',
+        overflow: 'hidden',
+        backgroundColor: colors.component
+    },
+    ratio: (ratio) => ({
+        aspectRatio: String(ratio)
+    }),
+    image: {
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover'
+    }
+});

package/dist/components/Image.d.ts

@@ -5,7 +5,8 @@ type ImageProps = {
     sizes: string;
     priority?: boolean;
     aspect?: number;
+    origin?: string;
     style?: Placement;
 };
-export declare function Image({ image, sizes, priority, aspect, style }: ImageProps): import("react").JSX.Element;
+export declare function Image({ image, sizes, priority, aspect, origin, style }: ImageProps): import("react").JSX.Element;
 export {};

package/dist/components/Image.js

@@ -3,7 +3,7 @@ import * as stylex from '@stylexjs/stylex';
 import { useState } from 'react';
 import { imageSources, transformsOn } from "../media.js";
 import { breakpoints, colors, motion } from "../theme/tokens.stylex.js";
-export function Image({ image, sizes, priority = false, aspect, style }) {
+export function Image({ image, sizes, priority = false, aspect, origin, style }) {
     const key = image?.key ?? null;
     const [seen, setSeen] = useState({
         key,
@@ -19,7 +19,10 @@ export function Image({ image, sizes, priority = false, aspect, style }) {
     }
     const sources = imageSources(image, {
         aspect,
-        transforms: servedWithTransforms()
+        transforms: origin === undefined
+            ? servedWithTransforms()
+            : transformsOn(new URL(origin).hostname),
+        ...(origin === undefined ? {} : { origin: new URL(origin).origin })
     });
     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' &&

package/dist/components/Menu.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import * as stylex from '@stylexjs/stylex';
 import { colors, controls, layers, space } from "../theme/tokens.stylex.js";
-import { controlSizes, focusRing, transparentLook } from "./controlLook.js";
+import { buttonCorners, controlSizes, focusRing, transparentLook } from "./controlLook.js";
 import { MenuItems } from "./MenuItems.js";
 import { Popup } from "./Popup.js";
 export function Menu({ trigger, items, size = 'md', style }) {
-    return (_jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { className: (state) => stylex.props(styles.trigger, controlSizes[size], triggerPaddings[size], transparentLook.rest, transparentLook.hoverable, state.open && transparentLook.open, styles.triggerText, focusRing.visible, style).className, children: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { side: "bottom", 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: items, primitive: "Menu" }) }) }) })] }));
+    return (_jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { className: (state) => stylex.props(styles.trigger, controlSizes[size], buttonCorners[size], triggerPaddings[size], transparentLook.rest, transparentLook.hoverable, state.open && transparentLook.open, styles.triggerText, focusRing.visible, style).className, children: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { side: "bottom", 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: items, primitive: "Menu" }) }) }) })] }));
 }
 const styles = stylex.create({
     trigger: {

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+import type { Placement } from './Placement.ts';
+type ProgressBarProps = {
+    label: string;
+    value: number;
+    style?: Placement;
+};
+export declare function ProgressBar({ label, value, style }: ProgressBarProps): import("react").JSX.Element;
+export {};

package/dist/components/ProgressBar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { colors, motion, radii, space } from "../theme/tokens.stylex.js";
+export function ProgressBar({ label, value, style }) {
+    const percent = Math.round(Math.min(1, Math.max(0, value)) * 100);
+    return (_jsx("div", { role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, ...stylex.props(styles.track, style), children: _jsx("div", { ...stylex.props(styles.fill, fills.width(`${percent}%`)) }) }));
+}
+const styles = stylex.create({
+    track: {
+        display: 'flex',
+        flexShrink: 0,
+        width: '100%',
+        height: space.xs,
+        overflow: 'clip',
+        backgroundColor: colors.component,
+        borderRadius: radii.full
+    },
+    fill: {
+        height: '100%',
+        backgroundColor: colors.brandSolid,
+        borderRadius: radii.full,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'width'
+    }
+});
+const fills = stylex.create({
+    width: (width) => ({ width })
+});

package/dist/components/SegmentedControl.js

@@ -4,13 +4,13 @@ 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";
+import { buttonCorners, 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)))] }));
+        }, 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], buttonCorners[size], !disabled && styles.hoverable, state.checked && styles.optionChecked, disabled && styles.disabled, focusRing.visible).className, children: option.label }, option.value)))] }));
 }
 const styles = stylex.create({
     group: {

package/dist/components/TableRow.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+type TableRowProps = {
+    label: string;
+    isCurrent?: boolean;
+    onClick: () => void;
+    children: ReactNode;
+};
+export declare function TableRow({ label, isCurrent, onClick, children }: TableRowProps): import("react").JSX.Element;
+export {};

package/dist/components/TableRow.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as BaseButton } from '@base-ui/react/button';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, space } from "../theme/tokens.stylex.js";
+import { focusRing } from "./controlLook.js";
+import { interact } from "./interaction.js";
+export function TableRow({ label, isCurrent = false, onClick, children }) {
+    return (_jsx(BaseButton, { "aria-label": label, "aria-pressed": isCurrent, onClick: () => {
+            interact({ primitive: 'TableRow', event: 'click', label });
+            onClick();
+        }, className: stylex.props(styles.row, isCurrent && styles.current, focusRing.visible, focusRing.inside).className, children: children }));
+}
+const styles = stylex.create({
+    row: {
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        height: `calc(${space.xxl} + ${space.xs})`,
+        paddingInline: space.xs,
+        color: colors.primaryForeground,
+        textAlign: 'start',
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        },
+        borderBottomColor: {
+            default: colors.borderDefault,
+            ':last-child': colors.transparent
+        },
+        borderBottomStyle: 'solid',
+        borderBottomWidth: borders.thin
+    },
+    current: {
+        backgroundColor: colors.transparentHover
+    }
+});

package/dist/components/icons.d.ts

@@ -28,6 +28,7 @@ declare const builtInIcons: {
     chevronUpDown: string;
     check: string;
     plus: string;
+    image: string[];
     trash: string[];
     checkCircle: string[];
     alertCircle: string[];

package/dist/components/icons.js

@@ -46,6 +46,11 @@ const builtInIcons = {
     chevronUpDown: 'M8 9.5 12 5.5l4 4M8 14.5l4 4 4-4',
     check: 'M5 12.5 9.5 17 19 7.5',
     plus: 'M12 5v14M5 12h14',
+    image: [
+        'M6.25 4.75h11.5a2.5 2.5 0 0 1 2.5 2.5v9.5a2.5 2.5 0 0 1-2.5 2.5H6.25a2.5 2.5 0 0 1-2.5-2.5v-9.5a2.5 2.5 0 0 1 2.5-2.5z',
+        'M7.25 10a1.75 1.75 0 1 0 3.5 0a1.75 1.75 0 1 0 -3.5 0',
+        'M4.5 17.5l4.5-4.25 3 2.75 3.5-3.75 4 4'
+    ],
     trash: [
         'M4.75 6.75h14.5',
         'M9.75 6.75v-1a2 2 0 0 1 2-2h.5a2 2 0 0 1 2 2v1',

package/dist/components/interaction.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 export type Interaction = {
-    primitive: 'AppFrame' | 'Button' | 'Card' | 'IconButton' | 'Link' | 'ListRow' | 'Select' | 'Switch' | 'Checkbox' | 'SegmentedControl' | 'Menu' | 'ContextMenu' | 'CommandMenu' | 'TextField' | 'Form' | 'Dialog' | 'RadioGroup' | 'ChoiceGroup' | 'Calendar' | 'Gallery';
+    primitive: 'AppFrame' | 'Button' | 'Card' | 'IconButton' | 'Link' | 'ListRow' | 'Select' | 'Switch' | 'Checkbox' | 'SegmentedControl' | 'Menu' | 'ContextMenu' | 'CommandMenu' | 'TextField' | 'Form' | 'Dialog' | 'RadioGroup' | 'ChoiceGroup' | 'Calendar' | 'Gallery' | 'FilePicker' | 'TableRow';
     event: 'click' | 'change' | 'select' | 'open' | 'close' | 'submit' | 'navigate';
     label: string;
     page: string | null;

package/dist/files.d.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+export declare const pickedFile: z.ZodObject<{
+    id: z.ZodString;
+    name: z.ZodString;
+    type: z.ZodString;
+    size: z.ZodNumber;
+}, z.core.$strip>;
+export type PickedFile = z.output<typeof pickedFile>;
+export declare function rememberFile(file: File): PickedFile;
+export declare function pickedFileOf(id: string): File | undefined;
+export declare function forgetFile(id: string): void;

package/dist/files.js

@@ -0,0 +1,19 @@
+import { z } from 'zod';
+export const pickedFile = z.object({
+    id: z.string(),
+    name: z.string(),
+    type: z.string(),
+    size: z.number()
+});
+const picked = new Map();
+export function rememberFile(file) {
+    const id = crypto.randomUUID();
+    picked.set(id, file);
+    return { id, name: file.name, type: file.type, size: file.size };
+}
+export function pickedFileOf(id) {
+    return picked.get(id);
+}
+export function forgetFile(id) {
+    picked.delete(id);
+}