@trypattern/sdk 0.0.0-stage → 0.1.0

package/dist/components/Dialog.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import * as stylex from '@stylexjs/stylex';
+import { colors, layers, motion, radii, shadows } from "../theme/tokens.stylex.js";
+import { interact } from "./interaction.js";
+export function Dialog({ label, isOpen, onOpenChange, placement = 'center', size = 'md', children }) {
+    return (_jsx(BaseDialog.Root, { open: isOpen, onOpenChange: (next) => {
+            interact({
+                primitive: 'Dialog',
+                event: next ? 'open' : 'close',
+                label
+            });
+            onOpenChange(next);
+        }, children: _jsxs(BaseDialog.Portal, { children: [placement === 'center' ? (_jsx(BaseDialog.Backdrop, { className: (state) => stylex.props(styles.backdrop, (!state.open || state.transitionStatus === 'starting') &&
+                        styles.backdropHidden).className })) : null, _jsx(BaseDialog.Popup, { "aria-label": label, className: (state) => stylex.props(styles.popup, placements[placement], widths[size], (!state.open || state.transitionStatus === 'starting') &&
+                        hiddenPlacements[placement], !state.open && styles.exiting).className, children: _jsx("div", { ...stylex.props(styles.frame), children: children }) })] }) }));
+}
+const styles = stylex.create({
+    backdrop: {
+        position: 'fixed',
+        inset: 0,
+        zIndex: layers.dialog,
+        backgroundColor: colors.overlay,
+        transitionTimingFunction: motion.easeInOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'opacity'
+    },
+    backdropHidden: {
+        opacity: 0
+    },
+    popup: {
+        position: 'fixed',
+        left: '50%',
+        zIndex: layers.dialog,
+        width: '100%',
+        outline: 'none',
+        transitionTimingFunction: motion.easeInOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'opacity, transform'
+    },
+    exiting: {
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.exit
+    },
+    frame: {
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        color: colors.primaryForeground,
+        backgroundColor: colors.componentOnSunken,
+        borderRadius: radii.xxxl,
+        boxShadow: shadows.extraLarge
+    }
+});
+const placements = stylex.create({
+    top: {
+        top: '20vh',
+        transform: 'translateX(-50%)'
+    },
+    center: {
+        top: '50%',
+        transform: 'translate(-50%, -50%)'
+    }
+});
+const hiddenPlacements = stylex.create({
+    top: {
+        pointerEvents: 'none',
+        opacity: 0,
+        transform: 'translateX(-50%) scale(0.95)'
+    },
+    center: {
+        pointerEvents: 'none',
+        opacity: 0,
+        transform: 'translate(-50%, -50%) scale(0.95)'
+    }
+});
+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))' }
+});

package/dist/components/Divider.d.ts

@@ -0,0 +1,6 @@
+import type { Placement } from './Placement.ts';
+type DividerProps = {
+    style?: Placement;
+};
+export declare function Divider({ style }: DividerProps): import("react").JSX.Element;
+export {};

package/dist/components/Divider.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator } from '@base-ui/react/separator';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors } from "../theme/tokens.stylex.js";
+export function Divider({ style }) {
+    return _jsx(Separator, { className: stylex.props(styles.divider, style).className });
+}
+const styles = stylex.create({
+    divider: {
+        flexShrink: 0,
+        width: '100%',
+        height: borders.hairline,
+        backgroundColor: colors.divider
+    }
+});

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+type EmptyStateProps = {
+    title: string;
+    description?: string;
+    action?: ReactNode;
+};
+export declare function EmptyState({ title, description, action }: EmptyStateProps): import("react").JSX.Element;
+export {};

package/dist/components/EmptyState.js

@@ -0,0 +1,24 @@
+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 EmptyState({ title, description, action }) {
+    return (_jsxs("div", { ...stylex.props(styles.empty), children: [_jsxs("div", { ...stylex.props(styles.words), children: [_jsx(Text, { variant: "label", tone: "primary", align: "center", children: title }), description === undefined ? null : (_jsx(Text, { tone: "secondary", align: "center", children: description }))] }), action] }));
+}
+const styles = stylex.create({
+    empty: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.md,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100%',
+        padding: space.xxxl
+    },
+    words: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs,
+        alignItems: 'center'
+    }
+});

package/dist/components/Form.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { SpaceName } from './spacing.ts';
+type FormProps = {
+    children: ReactNode;
+    gap?: SpaceName;
+    onSubmit: (values: Record<string, string>) => void;
+};
+export declare function Form({ children, gap, onSubmit }: FormProps): import("react").JSX.Element;
+export {};

package/dist/components/Form.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { interact } from "./interaction.js";
+import { gaps } from "./spacing.js";
+export function Form({ children, gap = 'sm', onSubmit }) {
+    const submit = (event) => {
+        event.preventDefault();
+        const values = Object.fromEntries([...new FormData(event.currentTarget)].flatMap(([name, value]) => typeof value === 'string' ? [[name, value.trim()]] : []));
+        interact({
+            primitive: 'Form',
+            event: 'submit',
+            label: Object.keys(values).join(', ')
+        });
+        onSubmit(values);
+    };
+    return (_jsx("form", { onSubmit: submit, ...stylex.props(styles.form, gaps[gap]), children: children }));
+}
+const styles = stylex.create({
+    form: {
+        display: 'flex',
+        flexDirection: 'column'
+    }
+});

package/dist/components/Icon.d.ts

@@ -0,0 +1,10 @@
+import type { IconName } from './icons.ts';
+import type { Size } from './Size.ts';
+import type { Tone } from './tones.ts';
+type IconProps = {
+    name: IconName;
+    size?: Size;
+    tone?: Tone;
+};
+export declare function Icon({ name, size, tone }: IconProps): import("react").JSX.Element;
+export {};

package/dist/components/Icon.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { iconSizes } from "../theme/tokens.stylex.js";
+import { shapeOf } from "./icons.js";
+import { tones } from "./tones.js";
+export function Icon({ name, size = 'md', tone = 'inherit' }) {
+    const shape = shapeOf(name);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: shape.isFilled ? 'currentColor' : 'none', fillRule: shape.rule, stroke: shape.isFilled ? 'none' : 'currentColor', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...stylex.props(styles.icon, sizes[size], tones[tone]), children: shape.paths.map((path) => (_jsx("path", { d: path }, path))) }));
+}
+const styles = stylex.create({
+    icon: {
+        display: 'block',
+        flexShrink: 0
+    }
+});
+const sizes = stylex.create({
+    xs: { width: iconSizes.xs, height: iconSizes.xs },
+    sm: { width: iconSizes.sm, height: iconSizes.sm },
+    md: { width: iconSizes.md, height: iconSizes.md },
+    lg: { width: iconSizes.lg, height: iconSizes.lg },
+    xl: { width: iconSizes.xl, height: iconSizes.xl }
+});

package/dist/components/IconButton.d.ts

@@ -0,0 +1,14 @@
+import type { IconName } from './icons.ts';
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+type IconButtonProps = {
+    icon: IconName;
+    label: string;
+    size?: Size;
+    shortcut?: readonly string[];
+    disabled?: boolean;
+    onClick: () => void;
+    style?: Placement;
+};
+export declare function IconButton({ icon, label, size, shortcut, disabled, onClick, style }: IconButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/IconButton.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as BaseButton } from '@base-ui/react/button';
+import * as stylex from '@stylexjs/stylex';
+import { colors, controls, radii } from "../theme/tokens.stylex.js";
+import { transparentLook } from "./controlLook.js";
+import { Icon } from "./Icon.js";
+import { interact } from "./interaction.js";
+import { Tooltip } from "./Tooltip.js";
+export function IconButton({ icon, label, size = 'md', shortcut, disabled = false, onClick, style }) {
+    return (_jsx(Tooltip, { label: label, shortcut: shortcut, children: _jsx(BaseButton, { "aria-label": label, disabled: disabled, focusableWhenDisabled: true, onClick: () => {
+                interact({ primitive: 'IconButton', event: 'click', label });
+                onClick();
+            }, className: stylex.props(styles.button, sizes[size], transparentLook.rest, !disabled && transparentLook.hoverable, disabled && styles.disabled, style).className, children: _jsx(Icon, { name: icon, size: size }) }) }));
+}
+const styles = stylex.create({
+    button: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        outlineOffset: 0
+    },
+    disabled: {
+        color: colors.disabledForeground
+    }
+});
+const sizes = stylex.create({
+    xs: {
+        width: controls.heightXs,
+        height: controls.heightXs,
+        borderRadius: radii.sm
+    },
+    sm: {
+        width: controls.heightSm,
+        height: controls.heightSm,
+        borderRadius: radii.md
+    },
+    md: {
+        width: controls.heightMd,
+        height: controls.heightMd,
+        borderRadius: radii.md
+    },
+    lg: {
+        width: controls.heightLg,
+        height: controls.heightLg,
+        borderRadius: radii.lg
+    },
+    xl: {
+        width: controls.heightXl,
+        height: controls.heightXl,
+        borderRadius: radii.lg
+    }
+});

package/dist/components/Kbd.d.ts

@@ -0,0 +1,6 @@
+type KbdProps = {
+    keys: readonly string[];
+    surface?: 'default' | 'standout';
+};
+export declare function Kbd({ keys, surface }: KbdProps): import("react").JSX.Element;
+export {};

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,9 @@
+import type { ReactNode } from 'react';
+import type { AppPath } from '../registered.ts';
+type LinkProps = {
+    to: AppPath;
+    tone?: 'brand' | 'secondary';
+    children: ReactNode;
+};
+export declare function Link({ to, tone, children }: LinkProps): import("react").JSX.Element;
+export {};

package/dist/components/Link.js

@@ -0,0 +1,35 @@
+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 { interact, textOf } from "./interaction.js";
+export function Link({ to, tone = 'brand', children }) {
+    return (_jsx(RouterLink, { to: to, onClick: () => interact({
+            primitive: 'Link',
+            event: 'navigate',
+            label: textOf(children) || to
+        }), ...stylex.props(styles.link, looks[tone]), 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 { 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);
+    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',
+        outlineOffset: -2,
+        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, 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, 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 {};