@trypattern/sdk 0.1.12 → 0.1.14

package/dist/cli/starter.js

@@ -0,0 +1,140 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { media } from "../media.js";
+import { photoFacts } from "../server/media.js";
+import { starterSql } from "../server/tables.js";
+export const STARTER_ROWS = 'starter/rows.ts';
+export const STARTER_PHOTOS = 'starter/photos';
+const PHOTO_NAME = /^[\w][\w.-]*$/;
+function record(value) {
+    return typeof value === 'object' && value !== null
+        ? value
+        : {};
+}
+function textOf(row, key) {
+    const value = row[key];
+    return typeof value === 'string' ? value.trim() : '';
+}
+async function readPhoto(root, raw) {
+    const id = textOf(raw, 'id');
+    const photo = textOf(raw, 'photo');
+    const alt = textOf(raw, 'alt');
+    const where = `${STARTER_ROWS}: the media row ${id === '' ? 'without an id' : id}`;
+    if (id === '')
+        throw new Error(`${where} needs an id`);
+    if (!PHOTO_NAME.test(photo)) {
+        throw new Error(`${where} names its photo by its file name in ${STARTER_PHOTOS}, like photo: 'peonies.jpg'`);
+    }
+    if (alt === '') {
+        throw new Error(`${where} needs alt: describe the photo for someone who can't see it`);
+    }
+    const path = `${STARTER_PHOTOS}/${photo}`;
+    if (!existsSync(join(root, path))) {
+        throw new Error(`${where} names ${path}, which isn't there`);
+    }
+    const bytes = readFileSync(join(root, path));
+    const facts = await photoFacts(bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength));
+    if ('problem' in facts)
+        throw new Error(`${path}: ${facts.problem}`);
+    return { ...facts, id, alt, path };
+}
+function readRows(name, table, rows) {
+    if (table.owned) {
+        throw new Error(`${STARTER_ROWS} can't fill ${name}: its rows belong to whoever makes them, and nobody has signed in when a site first goes live`);
+    }
+    return rows.map((raw) => {
+        const { id, ...fields } = record(raw);
+        if (typeof id !== 'string' || id === '') {
+            throw new Error(`${STARTER_ROWS}: every ${name} row needs an id`);
+        }
+        const parsed = table.fields.safeParse(fields);
+        if (!parsed.success) {
+            const issue = parsed.error.issues[0];
+            throw new Error(`${STARTER_ROWS}: the ${name} row ${id} ${issue === undefined ? 'is not valid' : `has ${issue.path.join('.') || 'a field'} wrong: ${issue.message}`}`);
+        }
+        return { id, ...parsed.data };
+    });
+}
+function refuseRepeatedIds(name, rows) {
+    const seen = new Set();
+    for (const row of rows) {
+        if (seen.has(row['id'])) {
+            throw new Error(`${name} has two rows with the id ${String(row['id'])}`);
+        }
+        seen.add(row['id']);
+    }
+}
+export async function readStarter(root, tables) {
+    const file = join(root, STARTER_ROWS);
+    if (!existsSync(file))
+        return undefined;
+    const module = await import(__rewriteRelativeImportExtension(pathToFileURL(file).href));
+    const starter = record(module)['starter'];
+    if (typeof starter !== 'object' || starter === null) {
+        throw new Error(`${STARTER_ROWS} must export \`starter\``);
+    }
+    const photos = [];
+    const rows = {};
+    for (const [name, list] of Object.entries(starter)) {
+        const table = tables[name];
+        if (table === undefined) {
+            throw new Error(`${STARTER_ROWS} has rows for ${name}, which isn't in tables in schema.ts`);
+        }
+        if (!Array.isArray(list)) {
+            throw new Error(`${STARTER_ROWS}: ${name} must be a list of rows`);
+        }
+        if (table.name === media.name) {
+            for (const raw of list)
+                photos.push(await readPhoto(root, record(raw)));
+            refuseRepeatedIds(`${STARTER_ROWS} media`, photos);
+            continue;
+        }
+        rows[name] = readRows(name, table, list);
+        refuseRepeatedIds(`${STARTER_ROWS} ${name}`, rows[name]);
+    }
+    return { photos, rows: rows };
+}
+export function withStarter(seed, starter) {
+    if (starter === undefined)
+        return seed;
+    const photoRows = starter.photos.map((photo) => ({
+        id: photo.id,
+        key: photo.key,
+        width: photo.width,
+        height: photo.height,
+        placeholder: null,
+        alt: photo.alt,
+        type: photo.type,
+        bytes: photo.bytes
+    }));
+    const added = {
+        ...starter.rows,
+        ...(photoRows.length === 0 ? {} : { media: photoRows })
+    };
+    const merged = { ...seed };
+    for (const [name, list] of Object.entries(added)) {
+        const starterRows = (list ?? []);
+        const starterIds = new Set(starterRows.map((row) => row['id']));
+        const seedRows = (merged[name] ?? []);
+        merged[name] = [
+            ...seedRows.filter((row) => !starterIds.has(row['id'])),
+            ...starterRows
+        ];
+    }
+    return merged;
+}
+export function starterContentOf(tables, starter) {
+    return {
+        photos: starter.photos.map(({ id, path, alt }) => ({ id, path, alt })),
+        sql: starterSql(tables, starter.rows)
+    };
+}

package/dist/components/Calendar.d.ts

@@ -0,0 +1,20 @@
+import type { Placement } from './Placement.ts';
+export type CalendarDay = {
+    date: string;
+    state: 'open' | 'closed' | 'full';
+};
+type CalendarProps = {
+    label: string;
+    month: string;
+    onMonthChange: (month: string) => void;
+    days: readonly CalendarDay[];
+    value: string | null;
+    onPick: (date: string) => void;
+    firstMonth?: string;
+    lastMonth?: string;
+    today?: string;
+    locale?: string;
+    style?: Placement;
+};
+export declare function Calendar({ label, month, onMonthChange, days, value, onPick, firstMonth, lastMonth, today, locale, style }: CalendarProps): import("react").JSX.Element;
+export {};

package/dist/components/Calendar.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as BaseButton } from '@base-ui/react/button';
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useRef, useState } from 'react';
+import { borders, colors, controls, fontSizes, fontWeights, lineHeights, motion, radii, space } from "../theme/tokens.stylex.js";
+import { addDays, addMonths, dayLabel, dayNumber, localToday, monthOf, monthTitle, weekdayIndex, weekdayNames, weeksOf } from "./calendarDates.js";
+import { focusRing } from "./controlLook.js";
+import { Icon } from "./Icon.js";
+import { interact } from "./interaction.js";
+export function Calendar({ label, month, onMonthChange, days, value, onPick, firstMonth, lastMonth, today = localToday(), locale, style }) {
+    const states = new Map(days.map((day) => [day.date, day.state]));
+    const [moved, setMoved] = useState(null);
+    const grid = useRef(null);
+    const shouldFocus = useRef(false);
+    const focused = moved !== null && monthOf(moved) === month
+        ? moved
+        : startingFocus(month, value, today, states);
+    const previous = addMonths(`${month}-01`, -1).slice(0, 7);
+    const next = addMonths(`${month}-01`, 1).slice(0, 7);
+    const canGoBack = firstMonth === undefined || previous >= firstMonth;
+    const canGoOn = lastMonth === undefined || next <= lastMonth;
+    useEffect(() => {
+        if (!shouldFocus.current)
+            return;
+        shouldFocus.current = false;
+        grid.current
+            ?.querySelector(`[data-date="${focused}"]`)
+            ?.focus();
+    });
+    const goTo = (target) => {
+        interact({
+            primitive: 'Calendar',
+            event: 'change',
+            label: `${label}: ${monthTitle(target, locale)}`
+        });
+        onMonthChange(target);
+    };
+    const pick = (date) => {
+        if ((states.get(date) ?? 'closed') !== 'open')
+            return;
+        interact({ primitive: 'Calendar', event: 'select', label });
+        onPick(date);
+    };
+    const move = (event, date) => {
+        const step = MOVES[event.key];
+        if (step === undefined)
+            return;
+        event.preventDefault();
+        const target = step(date);
+        const targetMonth = monthOf(target);
+        if (firstMonth !== undefined && targetMonth < firstMonth)
+            return;
+        if (lastMonth !== undefined && targetMonth > lastMonth)
+            return;
+        setMoved(target);
+        shouldFocus.current = true;
+        if (targetMonth !== month)
+            goTo(targetMonth);
+    };
+    return (_jsxs("div", { ...stylex.props(styles.calendar, style), children: [_jsxs("div", { ...stylex.props(styles.header), children: [_jsx("span", { ...stylex.props(styles.title), "aria-live": "polite", children: monthTitle(month, locale) }), _jsxs("span", { ...stylex.props(styles.nav), children: [_jsx(BaseButton, { "aria-label": monthTitle(previous, locale), disabled: !canGoBack, onClick: () => goTo(previous), className: stylex.props(styles.navButton, canGoBack ? styles.navEnabled : styles.navDisabled, focusRing.visible).className, children: _jsx(Icon, { name: "previous" }) }), _jsx(BaseButton, { "aria-label": monthTitle(next, locale), disabled: !canGoOn, onClick: () => goTo(next), className: stylex.props(styles.navButton, canGoOn ? styles.navEnabled : styles.navDisabled, focusRing.visible).className, children: _jsx(Icon, { name: "next" }) })] })] }), _jsxs("div", { ref: grid, role: "grid", "aria-label": `${label}, ${monthTitle(month, locale)}`, ...stylex.props(styles.grid), children: [_jsx("div", { role: "row", ...stylex.props(styles.row), children: weekdayNames(locale).map((weekday) => (_jsx("span", { role: "columnheader", "aria-label": weekday.long, ...stylex.props(styles.weekday), children: weekday.short }, weekday.long))) }), weeksOf(month).map((week, index) => (_jsx("div", { role: "row", ...stylex.props(styles.row), children: week.map((date, column) => {
+                            if (date === null) {
+                                return (_jsx("span", { role: "gridcell", ...stylex.props(styles.cell) }, `blank-${column}`));
+                            }
+                            const state = states.get(date) ?? 'closed';
+                            const isOpen = state === 'open';
+                            const isPicked = date === value;
+                            return (_jsx("span", { role: "gridcell", "aria-selected": isPicked, ...stylex.props(styles.cell), children: _jsx("button", { type: "button", "data-date": date, tabIndex: date === focused ? 0 : -1, "aria-label": dayLabel(date, locale), "aria-disabled": !isOpen, "aria-current": date === today ? 'date' : undefined, onClick: () => pick(date), onKeyDown: (event) => move(event, date), ...stylex.props(styles.day, isOpen && styles.open, !isOpen && styles.unavailable, state === 'full' && styles.full, date === today && !isPicked && styles.today, isPicked && styles.picked, focusRing.visible), children: dayNumber(date, locale) }) }, date));
+                        }) }, week.find((date) => date !== null) ?? index)))] })] }));
+}
+const MOVES = {
+    ArrowLeft: (date) => addDays(date, -1),
+    ArrowRight: (date) => addDays(date, 1),
+    ArrowUp: (date) => addDays(date, -7),
+    ArrowDown: (date) => addDays(date, 7),
+    Home: (date) => addDays(date, -weekdayIndex(date)),
+    End: (date) => addDays(date, 6 - weekdayIndex(date)),
+    PageUp: (date) => addMonths(date, -1),
+    PageDown: (date) => addMonths(date, 1)
+};
+function startingFocus(month, value, today, states) {
+    if (value !== null && monthOf(value) === month)
+        return value;
+    if (monthOf(today) === month)
+        return today;
+    const open = [...states].find(([date, state]) => monthOf(date) === month && state === 'open');
+    return open?.[0] ?? `${month}-01`;
+}
+const styles = stylex.create({
+    calendar: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs,
+        width: `calc(7 * (${space.xxxl} - ${space.xs}))`
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingInline: space.xs,
+        paddingBottom: space.sm
+    },
+    title: {
+        fontSize: fontSizes.bodyBase,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.body,
+        color: colors.primaryForeground
+    },
+    nav: {
+        display: 'flex',
+        gap: space.xs
+    },
+    navButton: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: controls.heightMd,
+        height: controls.heightMd,
+        outlineOffset: 0,
+        borderRadius: radii.full,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'color, background-color'
+    },
+    navEnabled: {
+        color: colors.primaryForeground,
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        }
+    },
+    navDisabled: {
+        color: colors.disabledForeground
+    },
+    grid: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs
+    },
+    row: {
+        display: 'grid',
+        gridTemplateColumns: `repeat(7, calc(${space.xxxl} - ${space.xs}))`
+    },
+    weekday: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: controls.heightMd,
+        fontSize: fontSizes.captionLg,
+        lineHeight: lineHeights.bodySm,
+        color: colors.secondaryForeground,
+        textAlign: 'center'
+    },
+    cell: {
+        display: 'flex',
+        width: `calc(${space.xxxl} - ${space.xs})`,
+        height: `calc(${space.xxxl} - ${space.xs})`
+    },
+    day: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        fontSize: fontSizes.bodyMd,
+        lineHeight: lineHeights.bodySm,
+        outlineOffset: 0,
+        borderRadius: radii.full,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'color, background-color'
+    },
+    open: {
+        color: colors.primaryForeground,
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        }
+    },
+    unavailable: {
+        color: colors.disabledForeground
+    },
+    full: {
+        textDecorationLine: 'line-through',
+        textDecorationThickness: borders.thin
+    },
+    today: {
+        boxShadow: `inset 0 0 0 ${borders.thin} ${colors.borderStrong}`
+    },
+    picked: {
+        fontWeight: fontWeights.medium,
+        color: colors.onInvertedForeground,
+        backgroundColor: colors.invertedSolid
+    }
+});

package/dist/components/Card.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import type { AppPath } from '../registered.ts';
 import type { Placement } from './Placement.ts';
 type CardPadding = 'none' | 'sm' | 'md' | 'lg';
-type CardSurface = 'subtle' | 'strong' | 'container';
+type CardSurface = 'subtle' | 'strong' | 'container' | 'none';
 type CardProps = {
     children: ReactNode;
     surface?: CardSurface;

package/dist/components/Card.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as BaseButton } from '@base-ui/react/button';
 import * as stylex from '@stylexjs/stylex';
 import { Link as RouterLink } from 'react-router';
-import { colors, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { colors, radii, shadows, space } from "../theme/tokens.stylex.js";
 import { focusRing } from "./controlLook.js";
 import { interact, textOf } from "./interaction.js";
 export function Card({ children, surface = 'subtle', padding = 'lg', paddingBlock, to, href, onClick, style }) {
     const isInteractive = to !== undefined || href !== undefined || onClick !== undefined;
-    const className = stylex.props(styles.card, surfaces[surface], paddings[padding], paddingBlock !== undefined && paddingBlocks[paddingBlock], isInteractive && styles.interactive, isInteractive && hovers[surface], isInteractive && focusRing.visible, style).className;
+    const className = stylex.props(styles.card, surfaces[surface], paddings[padding], paddingBlock !== undefined && paddingBlocks[paddingBlock], isInteractive && styles.interactive, isInteractive && focusRing.visible, style).className;
     const report = (event) => {
         interact({
             primitive: 'Card',
@@ -39,14 +39,7 @@ const styles = stylex.create({
         color: 'inherit',
         textAlign: 'start',
         textDecoration: 'none',
-        outlineOffset: 0,
-        boxShadow: {
-            default: shadows.default,
-            ':hover': shadows.large
-        },
-        transitionTimingFunction: motion.easeOut,
-        transitionDuration: motion.fast,
-        transitionProperty: 'background-color, box-shadow'
+        outlineOffset: 0
     }
 });
 const surfaces = stylex.create({
@@ -58,26 +51,11 @@ const surfaces = stylex.create({
     },
     container: {
         backgroundColor: colors.container
-    }
-});
-const hovers = stylex.create({
-    subtle: {
-        backgroundColor: {
-            default: colors.componentOnContainerSubtle,
-            ':hover': colors.componentOnContainerSubtleHover
-        }
     },
-    strong: {
-        backgroundColor: {
-            default: colors.componentOnContainerStrong,
-            ':hover': colors.componentOnContainerStrongHover
-        }
-    },
-    container: {
-        backgroundColor: {
-            default: colors.container,
-            ':hover': colors.componentOnContainerStrongHover
-        }
+    none: {
+        overflow: 'visible',
+        borderRadius: 0,
+        boxShadow: 'none'
     }
 });
 const paddings = stylex.create({

package/dist/components/Choice.js

@@ -8,36 +8,37 @@ export function Choice({ value, title, label, subline, isDisabled = false, child
     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 isPhoto = children !== undefined && !hasWords;
+    return (_jsxs(BaseRadio.Root, { value: value, disabled: isDisabled, "aria-label": label, className: (state) => stylex.props(styles.choice, !state.disabled && styles.enabled, state.checked && styles.checked, isPhoto &&
+            isFaded &&
+            !state.checked &&
+            !state.disabled &&
+            styles.faded, state.disabled && styles.disabled, isPhoto && styles.photo, focusRing.visible).className, children: [children === undefined ? null : (_jsx("span", { ...stylex.props(styles.content, isPhoto && styles.photoContent), 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',
+        flexGrow: 1,
+        flexBasis: `calc(2 * ${space.xxxl})`,
         flexDirection: 'column',
-        gap: space.xxs,
         alignItems: 'flex-start',
         minWidth: 0,
-        paddingBlock: space.sm,
+        paddingBlock: `calc(${space.sm} + ${space.xxs})`,
         paddingInline: space.md,
-        fontSize: fontSizes.bodySm,
+        fontSize: fontSizes.bodyMd,
         fontWeight: fontWeights.medium,
         lineHeight: lineHeights.bodySm,
         color: colors.primaryForeground,
         textAlign: 'start',
         outlineOffset: 0,
         backgroundColor: colors.componentOnContainerStrong,
-        borderRadius: radii.lg,
+        borderRadius: radii.xl,
         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,
@@ -49,10 +50,20 @@ const styles = stylex.create({
     },
     faded: {
         opacity: {
-            default: 0.56,
+            default: 0.5,
             ':hover': 1
         }
     },
+    photo: {
+        flexGrow: 1,
+        flexBasis: 0,
+        paddingBlock: 0,
+        paddingInline: 0,
+        overflow: 'hidden',
+        backgroundColor: 'transparent',
+        borderRadius: radii.lg,
+        boxShadow: 'none'
+    },
     disabled: {
         color: colors.disabledForeground,
         backgroundColor: colors.disabled,
@@ -65,13 +76,16 @@ const styles = stylex.create({
         overflow: 'hidden',
         borderRadius: radii.md
     },
+    photoContent: {
+        borderRadius: radii.lg
+    },
     title: {
         minWidth: 0
     },
     subline: {
-        fontSize: fontSizes.captionLg,
+        fontSize: fontSizes.bodySm,
         fontWeight: fontWeights.normal,
-        lineHeight: lineHeights.caption,
+        lineHeight: lineHeights.bodySm,
         color: colors.secondaryForeground
     },
     sublineDisabled: {

package/dist/components/ChoiceGroup.d.ts

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

package/dist/components/ChoiceGroup.js

@@ -2,10 +2,10 @@ 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 }) {
+import { gaps } from "./spacing.js";
+export function ChoiceGroup({ label, value, onChange, children, gap = 'sm', style }) {
     return (_jsx(ChoiceContext, { value: { value }, children: _jsx(BaseRadioGroup, { "aria-label": label, value: value, onValueChange: (next) => {
                 if (typeof next !== 'string')
                     return;
@@ -15,7 +15,7 @@ export function ChoiceGroup({ label, value, onChange, children, style }) {
                     label: labelOf(children, next)
                 });
                 onChange(next);
-            }, className: stylex.props(styles.group, style).className, children: children }) }));
+            }, className: stylex.props(styles.group, gaps[gap], style).className, children: children }) }));
 }
 function labelOf(children, value) {
     for (const child of Children.toArray(children)) {
@@ -37,7 +37,6 @@ const styles = stylex.create({
     group: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: space.sm,
         alignItems: 'stretch',
         minWidth: 0
     }

package/dist/components/Dialog.d.ts

@@ -4,7 +4,7 @@ type DialogProps = {
     isOpen: boolean;
     onOpenChange: (isOpen: boolean) => void;
     placement?: 'center' | 'top';
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
     children: ReactNode;
 };
 export declare function Dialog({ label, isOpen, onOpenChange, placement, size, children }: DialogProps): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -45,6 +45,7 @@ const styles = stylex.create({
     frame: {
         display: 'flex',
         flexDirection: 'column',
+        maxHeight: 'calc(100dvh - 2rem)',
         overflow: 'hidden',
         color: colors.primaryForeground,
         backgroundColor: colors.componentOnSunken,
@@ -77,5 +78,6 @@ const hiddenPlacements = stylex.create({
 const widths = stylex.create({
     sm: { maxWidth: 'min(400px, calc(100% - 2rem))' },
     md: { maxWidth: 'min(560px, calc(100% - 2rem))' },
-    lg: { maxWidth: 'min(720px, calc(100% - 2rem))' }
+    lg: { maxWidth: 'min(720px, calc(100% - 2rem))' },
+    xl: { maxWidth: 'min(800px, calc(100% - 2rem))' }
 });

package/dist/components/ListRow.js

@@ -7,7 +7,8 @@ import { focusRing } from "./controlLook.js";
 import { interact, textOf } from "./interaction.js";
 export function ListRow({ to, href, onClick, isMuted = false, isCurrent = false, size = 'md', 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 || href !== undefined || onClick !== undefined) &&
+    const look = stylex.props(styles.row, size === 'sm' &&
+        (to !== undefined || href !== undefined || onClick !== undefined) &&
         styles.interactive, isMuted && styles.muted, isCurrent && styles.current, size === 'sm' && styles.small, size === 'lg' && styles.large, focusRing.visible, focusRing.inside);
     const report = () => {
         interact({

package/dist/components/RadioDescribed.d.ts

@@ -0,0 +1,4 @@
+import type { RadioOption } from './RadioGroup.tsx';
+export declare function RadioDescribed<Value extends string>({ option }: {
+    option: RadioOption<Value>;
+}): import("react").JSX.Element;

package/dist/components/RadioDescribed.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { space } from "../theme/tokens.stylex.js";
+import { Text } from "./Text.js";
+export function RadioDescribed({ option }) {
+    const tone = option.isDisabled === true ? 'tertiary' : undefined;
+    return (_jsxs("span", { ...stylex.props(styles.described), children: [_jsxs("span", { ...stylex.props(styles.labelLine), children: [_jsx(Text, { variant: "label", tone: tone ?? 'primary', children: option.label }), option.badge] }), _jsx(Text, { variant: "body", tone: tone ?? 'secondary', children: option.description })] }));
+}
+const styles = stylex.create({
+    described: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs
+    },
+    labelLine: {
+        display: 'flex',
+        gap: space.sm,
+        alignItems: 'center'
+    }
+});

package/dist/components/RadioGroup.d.ts

@@ -3,6 +3,8 @@ import type { Placement } from './Placement.ts';
 export type RadioOption<Value extends string> = {
     value: Value;
     label: string;
+    description?: string;
+    badge?: ReactNode;
     content?: ReactNode;
     trailing?: ReactNode;
     isDisabled?: boolean;
@@ -12,7 +14,8 @@ type RadioGroupProps<Value extends string> = {
     value: Value | null;
     options: readonly RadioOption<Value>[];
     onChange: (value: Value) => void;
+    size?: 'md' | 'lg';
     style?: Placement;
 };
-export declare function RadioGroup<Value extends string>({ label, value, options, onChange, style }: RadioGroupProps<Value>): import("react").JSX.Element;
+export declare function RadioGroup<Value extends string>({ label, value, options, onChange, size, style }: RadioGroupProps<Value>): import("react").JSX.Element;
 export {};