@trypattern/sdk 0.0.0-stage → 0.1.1

package/dist/components/Kbd.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { isApplePlatform } from "../platform.js";
+import { borders, breakpoints, colors, controls, fontFeatures, fontSizes, fontWeights, lineHeights, radii, space } from "../theme/tokens.stylex.js";
+import { Icon } from "./Icon.js";
+export function Kbd({ keys, surface = 'default' }) {
+    return (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.keys), children: keys.map((key, index) => {
+            const icon = keyIcons[key];
+            const symbol = symbolFor(key);
+            return (_jsx("kbd", { ...stylex.props(styles.key, surface === 'standout' && styles.standout, icon === undefined && symbol.length > 1 && styles.word), children: icon === undefined ? symbol : _jsx(Icon, { name: icon, size: "xs" }) }, `${index}-${key}`));
+        }) }));
+}
+const keyIcons = {
+    enter: 'enter',
+    arrowup: 'arrowUp',
+    arrowdown: 'arrowDown'
+};
+const keyWords = {
+    escape: 'esc',
+    tab: 'tab'
+};
+function symbolFor(key) {
+    if (key === 'mod')
+        return isApplePlatform() ? '⌘' : 'ctrl';
+    return keyWords[key] ?? key;
+}
+const styles = stylex.create({
+    keys: {
+        display: {
+            default: 'flex',
+            [breakpoints.coarsePointer]: 'none'
+        },
+        flexShrink: 0,
+        gap: space.xxs,
+        alignItems: 'center'
+    },
+    key: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: lineHeights.caption,
+        height: lineHeights.caption,
+        fontFamily: 'inherit',
+        fontSize: fontSizes.captionBase,
+        fontWeight: fontWeights.medium,
+        fontFeatureSettings: fontFeatures.kbd,
+        lineHeight: lineHeights.caption,
+        color: colors.secondaryForeground,
+        textTransform: 'uppercase',
+        pointerEvents: 'none',
+        backgroundColor: colors.component,
+        borderColor: colors.borderDefault,
+        borderStyle: 'solid',
+        borderWidth: borders.hairline,
+        borderRadius: radii.sm
+    },
+    standout: {
+        color: colors.onStandoutSecondaryForeground,
+        backgroundColor: colors.borderOnStandout,
+        borderColor: colors.borderOnStandout
+    },
+    word: {
+        paddingBlockEnd: space.xxs,
+        paddingInline: controls.paddingXs,
+        textTransform: 'lowercase'
+    }
+});

package/dist/components/Link.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { AppPath } from '../registered.ts';
+type LinkProps = {
+    tone?: 'brand' | 'secondary';
+    children: ReactNode;
+} & ({
+    to: AppPath;
+    href?: never;
+} | {
+    href: string;
+    to?: never;
+});
+export declare function Link({ to, href, tone, children }: LinkProps): import("react").JSX.Element;
+export {};

package/dist/components/Link.js

@@ -0,0 +1,44 @@
+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 { 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;
+    if (href !== undefined) {
+        return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: () => interact({
+                primitive: 'Link',
+                event: 'open',
+                label: textOf(children) || href
+            }), className: className, children: children }));
+    }
+    return (_jsx(RouterLink, { to: to, onClick: () => interact({
+            primitive: 'Link',
+            event: 'navigate',
+            label: textOf(children) || to
+        }), className: className, children: children }));
+}
+const styles = stylex.create({
+    link: {
+        textDecoration: 'none',
+        borderRadius: radii.xs,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'color'
+    }
+});
+const looks = stylex.create({
+    brand: {
+        color: {
+            default: colors.brandForeground,
+            ':hover': colors.brandSolidHover
+        }
+    },
+    secondary: {
+        color: {
+            default: colors.secondaryForeground,
+            ':hover': colors.primaryForeground
+        }
+    }
+});

package/dist/components/ListRow.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { AppPath } from '../registered.ts';
+type ListRowProps = {
+    to?: AppPath;
+    onClick?: () => void;
+    isMuted?: boolean;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    children: ReactNode;
+};
+export declare function ListRow({ to, onClick, isMuted, leading, trailing, children }: ListRowProps): import("react").JSX.Element;
+export {};

package/dist/components/ListRow.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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, 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 }) {
+    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 report = () => {
+        interact({
+            primitive: 'ListRow',
+            event: to === undefined ? 'click' : 'navigate',
+            label: textOf(children) || (to ?? '')
+        });
+        onClick?.();
+    };
+    if (to !== undefined) {
+        return (_jsx(RouterLink, { to: to, onClick: report, ...look, children: content }));
+    }
+    if (onClick !== undefined) {
+        return (_jsx(BaseButton, { onClick: report, className: look.className, children: content }));
+    }
+    return _jsx("div", { ...look, children: content });
+}
+const styles = stylex.create({
+    row: {
+        display: 'flex',
+        gap: space.md,
+        alignItems: 'center',
+        width: '100%',
+        height: controls.heightXl,
+        paddingInline: space.md,
+        color: colors.primaryForeground,
+        textAlign: 'start',
+        textDecoration: 'none',
+        borderRadius: radii.md
+    },
+    interactive: {
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        }
+    },
+    muted: {
+        color: colors.tertiaryForeground
+    },
+    main: {
+        display: 'flex',
+        flexGrow: 1,
+        gap: space.sm,
+        alignItems: 'center',
+        minWidth: 0
+    },
+    trailing: {
+        display: 'flex',
+        flexShrink: 0,
+        gap: space.sm,
+        alignItems: 'center'
+    }
+});

package/dist/components/LoadingRows.d.ts

@@ -0,0 +1,5 @@
+type LoadingRowsProps = {
+    count: number;
+};
+export declare function LoadingRows({ count }: LoadingRowsProps): import("react").JSX.Element[];
+export {};

package/dist/components/LoadingRows.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListRow } from "./ListRow.js";
+import { Skeleton } from "./Skeleton.js";
+export function LoadingRows({ count }) {
+    return Array.from({ length: count }, (_, row) => (_jsx(ListRow, { leading: _jsx(Skeleton, { variant: "icon" }), children: _jsx(Skeleton, { width: "md" }) }, row)));
+}

package/dist/components/Menu.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { MenuEntry } from './MenuItems.tsx';
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+type MenuProps = {
+    trigger: ReactNode;
+    items: readonly MenuEntry[];
+    size?: Size;
+    style?: Placement;
+};
+export declare function Menu({ trigger, items, size, style }: MenuProps): import("react").JSX.Element;
+export {};

package/dist/components/Menu.js

@@ -0,0 +1,33 @@
+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 { 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" }) }) }) })] }));
+}
+const styles = stylex.create({
+    trigger: {
+        display: 'flex',
+        alignItems: 'center',
+        minWidth: 0,
+        outlineOffset: 0
+    },
+    triggerText: {
+        gap: space.sm,
+        color: colors.primaryForeground
+    },
+    positioner: {
+        zIndex: layers.menu,
+        outline: 'none'
+    }
+});
+const triggerPaddings = stylex.create({
+    xs: { paddingInline: `calc(${controls.paddingXs} - 2px)` },
+    sm: { paddingInline: `calc(${controls.paddingSm} - 2px)` },
+    md: { paddingInline: `calc(${controls.paddingMd} - 2px)` },
+    lg: { paddingInline: `calc(${controls.paddingLg} - 2px)` },
+    xl: { paddingInline: `calc(${controls.paddingXl} - 2px)` }
+});

package/dist/components/MenuItems.d.ts

@@ -0,0 +1,21 @@
+import type { AppPath } from '../registered.ts';
+import type { IconName } from './icons.ts';
+type MenuAction = {
+    id: string;
+    label: string;
+    icon?: IconName;
+    isDanger?: boolean;
+} & ({
+    onSelect: () => void;
+    to?: never;
+} | {
+    to: AppPath;
+    onSelect?: never;
+});
+export type MenuEntry = MenuAction | 'separator';
+type MenuItemsProps = {
+    items: readonly MenuEntry[];
+    primitive: 'Menu' | 'ContextMenu';
+};
+export declare function MenuItems({ items, primitive }: MenuItemsProps): import("react").JSX.Element[];
+export {};

package/dist/components/MenuItems.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import { useNavigate } from 'react-router';
+import * as stylex from '@stylexjs/stylex';
+import { colors, space } from "../theme/tokens.stylex.js";
+import { Divider } from "./Divider.js";
+import { Icon } from "./Icon.js";
+import { interact } from "./interaction.js";
+import { PopupItem } from "./PopupItem.js";
+export function MenuItems({ items, primitive }) {
+    const navigate = useNavigate();
+    return items.map((entry, index) => entry === 'separator' ? (_jsx(Divider, { style: styles.separator }, `separator-${index}`)) : (_jsxs(BaseMenu.Item, { onClick: () => {
+            interact({ primitive, event: 'select', label: entry.label });
+            if (entry.onSelect !== undefined)
+                entry.onSelect();
+            else
+                void navigate(entry.to);
+        }, render: (props, state) => (_jsx(PopupItem, { ...props, kind: "menu", isHighlighted: state.highlighted, isDanger: entry.isDanger ?? false })), children: [entry.icon === undefined ? null : (_jsx("span", { ...stylex.props(styles.icon, entry.isDanger && styles.dangerIcon), children: _jsx(Icon, { name: entry.icon }) })), entry.label] }, entry.id)));
+}
+const styles = stylex.create({
+    separator: {
+        marginBlock: space.xs,
+        marginInline: `calc(-1 * ${space.xs})`
+    },
+    icon: {
+        display: 'flex',
+        color: colors.secondaryForeground
+    },
+    dangerIcon: {
+        color: 'inherit'
+    }
+});

package/dist/components/Placement.d.ts

@@ -0,0 +1,21 @@
+import type { StyleXStyles } from '@stylexjs/stylex';
+export type PlacementProperties = {
+    display?: 'none' | null;
+    alignSelf?: string;
+    justifySelf?: string;
+    gridArea?: string;
+    gridColumn?: string;
+    gridRow?: string;
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    marginBlock?: number | string;
+    marginBlockStart?: number | string;
+    marginBlockEnd?: number | string;
+    marginInline?: number | string;
+    marginInlineStart?: number | string;
+    marginInlineEnd?: number | string;
+};
+export type Placement = StyleXStyles<PlacementProperties>;

package/dist/components/Placement.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Popup.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from 'react';
+type PopupProps = Omit<ComponentPropsWithRef<'div'>, 'className' | 'style'> & {
+    isOpen: boolean;
+    transitionStatus: 'starting' | 'ending' | 'idle' | undefined;
+    kind: 'menu' | 'select';
+};
+export declare function Popup({ isOpen, transitionStatus, kind, ...popupProps }: PopupProps): import("react").JSX.Element;
+export {};

package/dist/components/Popup.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { colors, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
+export function Popup({ isOpen, transitionStatus, kind, ...popupProps }) {
+    const isHidden = !isOpen || transitionStatus === 'starting';
+    return (_jsx("div", { ...popupProps, ...stylex.props(styles.popup, kinds[kind], isHidden && (kind === 'menu' ? styles.hiddenMenu : styles.hiddenSelect), !isOpen && styles.exiting) }));
+}
+const styles = stylex.create({
+    popup: {
+        padding: space.xs,
+        color: colors.primaryForeground,
+        outline: 'none',
+        backgroundColor: colors.componentOnSunken,
+        borderRadius: radii.xl,
+        boxShadow: shadows.extraLarge,
+        transformOrigin: 'var(--transform-origin)',
+        transitionTimingFunction: motion.easeInOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'opacity, transform'
+    },
+    exiting: {
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.exit
+    },
+    hiddenMenu: {
+        pointerEvents: 'none',
+        opacity: 0,
+        transform: 'scale(0.95)'
+    },
+    hiddenSelect: {
+        pointerEvents: 'none',
+        opacity: 0,
+        transform: 'scale(0.97)'
+    }
+});
+const kinds = stylex.create({
+    menu: {
+        minWidth: 224
+    },
+    select: {
+        minWidth: 'var(--anchor-width)'
+    }
+});

package/dist/components/PopupItem.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from 'react';
+type PopupItemProps = Omit<ComponentPropsWithRef<'div'>, 'className' | 'style'> & {
+    isHighlighted: boolean;
+    isDanger?: boolean;
+    kind: 'menu' | 'select';
+};
+export declare function PopupItem({ isHighlighted, isDanger, kind, ...itemProps }: PopupItemProps): import("react").JSX.Element;
+export {};

package/dist/components/PopupItem.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { breakpoints, colors, controls, fontSizes, fontWeights, iconSizes, lineHeights, radii, space } from "../theme/tokens.stylex.js";
+export function PopupItem({ isHighlighted, isDanger = false, kind, ...itemProps }) {
+    return (_jsx("div", { ...itemProps, ...stylex.props(styles.item, kinds[kind], isHighlighted && styles.highlighted, isDanger && styles.danger, isDanger && isHighlighted && styles.dangerHighlighted) }));
+}
+const styles = stylex.create({
+    item: {
+        position: 'relative',
+        gap: space.sm,
+        alignItems: 'center',
+        minHeight: {
+            default: controls.heightMd,
+            [breakpoints.compact]: controls.heightXl
+        },
+        paddingInlineStart: controls.paddingSm,
+        fontSize: {
+            default: fontSizes.bodySm,
+            [breakpoints.compact]: fontSizes.bodyBase
+        },
+        fontWeight: fontWeights.semimedium,
+        lineHeight: {
+            default: lineHeights.bodySm,
+            [breakpoints.compact]: lineHeights.body
+        },
+        color: colors.primaryForeground,
+        outline: 'none',
+        borderRadius: radii.md
+    },
+    highlighted: {
+        backgroundColor: colors.transparentHover
+    },
+    danger: {
+        color: colors.onDangerSubtleForeground
+    },
+    dangerHighlighted: {
+        backgroundColor: colors.dangerSubtle
+    }
+});
+const kinds = stylex.create({
+    menu: {
+        display: 'flex',
+        paddingInlineEnd: controls.paddingXs
+    },
+    select: {
+        display: 'grid',
+        gridTemplateColumns: `${iconSizes.md} 1fr`,
+        paddingBlock: space.xs,
+        paddingInlineEnd: space.lg
+    }
+});

package/dist/components/PropertyRow.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type PropertyRowProps = {
+    label: string;
+    children: ReactNode;
+};
+export declare function PropertyRow({ label, children }: PropertyRowProps): import("react").JSX.Element;
+export {};

package/dist/components/PropertyRow.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { controls, space } from "../theme/tokens.stylex.js";
+import { Text } from "./Text.js";
+export function PropertyRow({ label, children }) {
+    return (_jsxs("div", { ...stylex.props(styles.row), children: [_jsx(Text, { tone: "secondary", children: label }), _jsx("div", { ...stylex.props(styles.value), children: children })] }));
+}
+const styles = stylex.create({
+    row: {
+        display: 'flex',
+        gap: space.lg,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        minHeight: `calc(${controls.heightXl} + ${space.sm})`
+    },
+    value: {
+        display: 'flex',
+        gap: space.sm,
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        minWidth: 0
+    }
+});

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { Placement } from './Placement.ts';
+export type RadioOption<Value extends string> = {
+    value: Value;
+    label: string;
+    content?: ReactNode;
+    trailing?: ReactNode;
+    isDisabled?: boolean;
+};
+type RadioGroupProps<Value extends string> = {
+    label: string;
+    value: Value | null;
+    options: readonly RadioOption<Value>[];
+    onChange: (value: Value) => void;
+    style?: Placement;
+};
+export declare function RadioGroup<Value extends string>({ label, value, options, onChange, style }: RadioGroupProps<Value>): import("react").JSX.Element;
+export {};

package/dist/components/RadioGroup.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, iconSizes, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { focusRing } from "./controlLook.js";
+import { interact } from "./interaction.js";
+import { Text } from "./Text.js";
+export function RadioGroup({ label, value, options, onChange, style }) {
+    return (_jsx(BaseRadioGroup, { "aria-label": label, value: value, onValueChange: (next) => {
+            const chosen = options.find((option) => option.value === next);
+            if (chosen === undefined)
+                return;
+            interact({
+                primitive: 'RadioGroup',
+                event: 'change',
+                label: chosen.label
+            });
+            onChange(chosen.value);
+        }, className: stylex.props(styles.group, style).className, children: options.map((option) => (_jsxs("label", { ...stylex.props(styles.row, option.isDisabled === true && styles.rowDisabled), children: [_jsx(BaseRadio.Root, { value: option.value, disabled: option.isDisabled === true, "aria-label": option.label, className: (state) => stylex.props(styles.dot, state.checked ? styles.dotOn : styles.dotOff, focusRing.visible).className, children: _jsx(BaseRadio.Indicator, { className: stylex.props(styles.mark).className }) }), _jsx("span", { ...stylex.props(styles.content), children: option.content ?? (_jsx(Text, { tone: option.isDisabled === true ? 'tertiary' : 'primary', isTruncated: true, children: option.label })) }), option.trailing === undefined ? null : (_jsx("span", { ...stylex.props(styles.trailing), children: option.trailing }))] }, option.value))) }));
+}
+const styles = stylex.create({
+    group: {
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        backgroundColor: colors.componentOnContainerStrong,
+        borderRadius: radii.xl,
+        boxShadow: shadows.default
+    },
+    row: {
+        display: 'flex',
+        gap: space.md,
+        alignItems: 'center',
+        minWidth: 0,
+        paddingBlock: space.md,
+        paddingInline: space.md,
+        borderTopColor: colors.divider,
+        borderTopStyle: {
+            default: 'solid',
+            ':first-child': 'none'
+        },
+        borderTopWidth: borders.hairline
+    },
+    rowDisabled: {
+        color: colors.tertiaryForeground
+    },
+    dot: {
+        display: 'grid',
+        flexShrink: 0,
+        placeItems: 'center',
+        width: iconSizes.md,
+        height: iconSizes.md,
+        padding: 0,
+        borderStyle: 'solid',
+        borderWidth: borders.thin,
+        borderRadius: radii.full,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'background-color, border-color'
+    },
+    dotOff: {
+        backgroundColor: colors.componentOnContainerStrong,
+        borderColor: colors.borderStrong
+    },
+    dotOn: {
+        backgroundColor: colors.invertedSolid,
+        borderColor: colors.invertedSolid
+    },
+    mark: {
+        width: `calc(${iconSizes.md} / 2.5)`,
+        height: `calc(${iconSizes.md} / 2.5)`,
+        backgroundColor: colors.onInvertedForeground,
+        borderRadius: radii.full
+    },
+    content: {
+        flexGrow: 1,
+        minWidth: 0
+    },
+    trailing: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center'
+    }
+});

package/dist/components/Row.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { Placement } from './Placement.ts';
+import type { SpaceName } from './spacing.ts';
+type RowProps = {
+    children: ReactNode;
+    gap?: SpaceName;
+    align?: 'start' | 'center' | 'end' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between';
+    isWrapping?: boolean;
+    padding?: SpaceName;
+    paddingBlock?: SpaceName;
+    paddingInline?: SpaceName;
+    style?: Placement;
+};
+export declare function Row({ children, gap, align, justify, isWrapping, padding, paddingBlock, paddingInline, style }: RowProps): import("react").JSX.Element;
+export {};

package/dist/components/Row.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { gaps, paddingBlocks, paddingInlines, paddings } from "./spacing.js";
+export function Row({ children, gap = 'sm', align = 'center', justify = 'start', isWrapping = false, padding = 'none', paddingBlock, paddingInline, style }) {
+    return (_jsx("div", { ...stylex.props(styles.row, alignments[align], justifications[justify], isWrapping && styles.wrapping, gaps[gap], paddings[padding], paddingBlock !== undefined && paddingBlocks[paddingBlock], paddingInline !== undefined && paddingInlines[paddingInline], style), children: children }));
+}
+const styles = stylex.create({
+    row: {
+        display: 'flex',
+        minWidth: 0
+    },
+    wrapping: {
+        flexWrap: 'wrap'
+    }
+});
+const alignments = stylex.create({
+    start: { alignItems: 'flex-start' },
+    center: { alignItems: 'center' },
+    end: { alignItems: 'flex-end' },
+    baseline: { alignItems: 'baseline' }
+});
+const justifications = stylex.create({
+    start: { justifyContent: 'flex-start' },
+    center: { justifyContent: 'center' },
+    end: { justifyContent: 'flex-end' },
+    between: { justifyContent: 'space-between' }
+});

package/dist/components/Screen.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { AppPath } from '../registered.ts';
+type ScreenProps = {
+    title: string;
+    parent?: {
+        label: string;
+        to: AppPath;
+    };
+    actions?: ReactNode;
+    children: ReactNode;
+};
+export declare function Screen({ title, parent, actions, children }: ScreenProps): import("react").JSX.Element;
+export {};