@trypattern/sdk 0.1.11 → 0.1.13

package/dist/components/ButtonBody.js

@@ -0,0 +1,266 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as BaseButton } from '@base-ui/react/button';
+import { Link as RouterLink } from 'react-router';
+import * as stylex from '@stylexjs/stylex';
+import { colors, controls, fontWeights, iconSizes, motion, shadows } from "../theme/tokens.stylex.js";
+import { controlSizes, focusRing } from "./controlLook.js";
+import { 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 }) {
+    const isDisabled = disabled || isPending;
+    const report = () => {
+        interact({ primitive: 'Button', event: 'click', label: textOf(children) });
+        onClick?.();
+    };
+    const className = stylex.props(styles.button, controlSizes[size], icon !== undefined && !isIconPinned && leadingIconSizes[size], trailingIcon !== undefined && trailingIconSizes[size], looks[`${variant}${toneKeys[tone]}`], !isDisabled && hovers[`${variant}${toneKeys[tone]}`], isDisabled && styles.disabled, isDisabled && variant === 'transparent' && styles.disabledTransparent, isFullWidth && styles.fullWidth, focusRing.visible, style).className;
+    const 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 }));
+    }
+    if (to !== undefined) {
+        return (_jsx(RouterLink, { to: to, onClick: report, className: className, children: content }));
+    }
+    return (_jsx(BaseButton, { type: type, disabled: isDisabled, focusableWhenDisabled: true, "aria-busy": isPending || undefined, onClick: report, className: className, children: content }));
+}
+const toneKeys = {
+    neutral: 'Neutral',
+    brand: 'Brand',
+    danger: 'Danger'
+};
+const styles = stylex.create({
+    button: {
+        position: 'relative',
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: 0,
+        fontWeight: fontWeights.medium,
+        whiteSpace: 'nowrap',
+        textDecoration: 'none',
+        touchAction: 'manipulation',
+        outlineOffset: 0,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'color, background-color, transform'
+    },
+    fullWidth: {
+        justifyContent: 'flex-start',
+        width: '100%'
+    },
+    stack: {
+        display: 'grid',
+        flexGrow: 1,
+        gridTemplateColumns: 'minmax(0, 1fr)',
+        gap: 'inherit',
+        justifyContent: 'inherit',
+        minWidth: 0,
+        overflow: 'clip'
+    },
+    content: {
+        display: 'flex',
+        gridRowStart: 1,
+        gridColumnStart: 1,
+        gap: 'inherit',
+        alignItems: 'center',
+        justifyContent: 'inherit',
+        minWidth: 0,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'opacity, transform'
+    },
+    hidden: {
+        opacity: 0,
+        transform: 'translateY(24px)'
+    },
+    pending: {
+        display: 'flex',
+        gridRowStart: 1,
+        gridColumnStart: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        pointerEvents: 'none'
+    },
+    label: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    labelBeforeShortcut: {
+        flexGrow: 1,
+        textAlign: 'start'
+    },
+    pinnedContent: {
+        justifyContent: 'flex-start'
+    },
+    labelBetweenPins: {
+        flexGrow: 1,
+        textAlign: 'center'
+    },
+    disabled: {
+        color: colors.disabledForeground,
+        backgroundColor: colors.disabled,
+        boxShadow: 'none'
+    },
+    disabledTransparent: {
+        backgroundColor: 'transparent'
+    }
+});
+const leadingIconSizes = stylex.create({
+    xs: { paddingInlineStart: `calc(${controls.paddingXs} - 2px)` },
+    sm: { paddingInlineStart: `calc(${controls.paddingSm} - 2px)` },
+    md: { paddingInlineStart: `calc(${controls.paddingMd} - 4px)` },
+    lg: { paddingInlineStart: `calc(${controls.paddingLg} - 2px)` },
+    xl: { paddingInlineStart: `calc(${controls.paddingXl} - 4px)` }
+});
+const trailingIconSizes = stylex.create({
+    xs: { paddingInlineEnd: `calc(${controls.paddingXs} - 2px)` },
+    sm: { paddingInlineEnd: `calc(${controls.paddingSm} - 2px)` },
+    md: { paddingInlineEnd: `calc(${controls.paddingMd} - 4px)` },
+    lg: { paddingInlineEnd: `calc(${controls.paddingLg} - 2px)` },
+    xl: { paddingInlineEnd: `calc(${controls.paddingXl} - 4px)` }
+});
+const looks = stylex.create({
+    primaryNeutral: {
+        color: colors.onInvertedForeground,
+        backgroundColor: colors.invertedSolid
+    },
+    primaryBrand: {
+        color: colors.onBrandSolidForeground,
+        backgroundColor: colors.brandSolid
+    },
+    primaryDanger: {
+        color: colors.onDangerSolidForeground,
+        backgroundColor: colors.dangerSolid
+    },
+    secondaryNeutral: {
+        color: colors.primaryForeground,
+        backgroundColor: colors.componentOnContainerStrong,
+        boxShadow: shadows.default
+    },
+    secondaryBrand: {
+        color: colors.brandForeground,
+        backgroundColor: colors.componentOnContainerStrong,
+        boxShadow: shadows.default
+    },
+    secondaryDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: colors.componentOnContainerStrong,
+        boxShadow: shadows.default
+    },
+    tertiaryNeutral: {
+        color: colors.secondaryForeground,
+        backgroundColor: colors.component
+    },
+    tertiaryBrand: {
+        color: colors.onBrandSubtleForeground,
+        backgroundColor: colors.brandSubtle
+    },
+    tertiaryDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: colors.dangerSubtle
+    },
+    transparentNeutral: {
+        color: colors.secondaryForeground,
+        backgroundColor: 'transparent'
+    },
+    transparentBrand: {
+        color: colors.brandForeground,
+        backgroundColor: 'transparent'
+    },
+    transparentDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: 'transparent'
+    }
+});
+const hovers = stylex.create({
+    primaryNeutral: {
+        backgroundColor: {
+            default: colors.invertedSolid,
+            ':hover': colors.invertedSolidHover,
+            ':active': colors.invertedSolidActive
+        }
+    },
+    primaryBrand: {
+        backgroundColor: {
+            default: colors.brandSolid,
+            ':hover': colors.brandSolidHover,
+            ':active': colors.brandSolidActive
+        }
+    },
+    primaryDanger: {
+        backgroundColor: {
+            default: colors.dangerSolid,
+            ':hover': colors.dangerSolidHover,
+            ':active': colors.dangerSolidActive
+        }
+    },
+    secondaryNeutral: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    secondaryBrand: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    secondaryDanger: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    tertiaryNeutral: {
+        backgroundColor: {
+            default: colors.component,
+            ':hover': colors.componentHover,
+            ':active': colors.componentActive
+        }
+    },
+    tertiaryBrand: {
+        backgroundColor: {
+            default: colors.brandSubtle,
+            ':hover': colors.brandSubtleHover
+        }
+    },
+    tertiaryDanger: {
+        backgroundColor: {
+            default: colors.dangerSubtle,
+            ':hover': colors.dangerSubtleHover,
+            ':active': colors.dangerSubtleActive
+        }
+    },
+    transparentNeutral: {
+        color: {
+            default: colors.secondaryForeground,
+            ':hover': colors.primaryForeground
+        },
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        }
+    },
+    transparentBrand: {
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        }
+    },
+    transparentDanger: {
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.dangerSubtleHover
+        }
+    }
+});
+const pinBalances = stylex.create({
+    xs: { flexShrink: 0, width: iconSizes.xs },
+    sm: { flexShrink: 0, width: iconSizes.sm },
+    md: { flexShrink: 0, width: iconSizes.md },
+    lg: { flexShrink: 0, width: iconSizes.lg },
+    xl: { flexShrink: 0, width: iconSizes.xl }
+});

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 {};