@trypattern/sdk 0.0.0-stage → 0.1.0

package/dist/components/Button.js

@@ -0,0 +1,249 @@
+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, motion, shadows } from "../theme/tokens.stylex.js";
+import { controlSizes } 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 Button({ children, variant = 'primary', tone = 'neutral', size = 'md', to, icon, trailingIcon, shortcut, type = 'button', disabled = false, isPending = false, isFullWidth = false, onClick, style }) {
+    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 && 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, style).className;
+    const content = (_jsxs("span", { ...stylex.props(styles.stack), children: [_jsxs("span", { ...stylex.props(styles.content, isPending && styles.hidden), children: [icon === undefined ? null : _jsx(Icon, { name: icon, size: size }), _jsx("span", { ...stylex.props(styles.label, shortcut !== undefined && styles.labelBeforeShortcut), children: children }), 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 (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'
+    },
+    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
+        }
+    }
+});

package/dist/components/Card.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { Placement } from './Placement.ts';
+type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+type CardProps = {
+    children: ReactNode;
+    surface?: 'subtle' | 'strong' | 'container';
+    padding?: CardPadding;
+    paddingBlock?: CardPadding;
+    style?: Placement;
+};
+export declare function Card({ children, surface, padding, paddingBlock, style }: CardProps): import("react").JSX.Element;
+export {};

package/dist/components/Card.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { colors, radii, shadows, space } from "../theme/tokens.stylex.js";
+export function Card({ children, surface = 'subtle', padding = 'lg', paddingBlock, style }) {
+    return (_jsx("div", { ...stylex.props(styles.card, surfaces[surface], paddings[padding], paddingBlock !== undefined && paddingBlocks[paddingBlock], style), children: children }));
+}
+const styles = stylex.create({
+    card: {
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        borderRadius: radii.xxl,
+        boxShadow: shadows.default
+    }
+});
+const surfaces = stylex.create({
+    subtle: {
+        backgroundColor: colors.componentOnContainerSubtle
+    },
+    strong: {
+        backgroundColor: colors.componentOnContainerStrong
+    },
+    container: {
+        backgroundColor: colors.container
+    }
+});
+const paddings = stylex.create({
+    none: { padding: 0 },
+    sm: { padding: space.sm },
+    md: { padding: space.md },
+    lg: { padding: space.lg }
+});
+const paddingBlocks = stylex.create({
+    none: { paddingBlock: 0 },
+    sm: { paddingBlock: space.sm },
+    md: { paddingBlock: space.md },
+    lg: { paddingBlock: space.lg }
+});

package/dist/components/CommandMenu.d.ts

@@ -0,0 +1,23 @@
+import type { IconName } from './icons.ts';
+export type CommandMenuItem = {
+    readonly id: string;
+    readonly label: string;
+    readonly group: string;
+    readonly icon: IconName;
+    readonly keys: readonly string[];
+    readonly isDanger: boolean;
+};
+type CommandMenuProps = {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    query: string;
+    onQueryChange: (query: string) => void;
+    results: readonly CommandMenuItem[];
+    highlighted: string | null;
+    onHighlight: (id: string) => void;
+    onMove: (by: 1 | -1) => void;
+    onRun: (id: string) => void;
+    onSubmit: () => void;
+};
+export declare function CommandMenu({ isOpen, onOpenChange, query, onQueryChange, results, highlighted, onHighlight, onMove, onRun, onSubmit }: CommandMenuProps): import("react").JSX.Element;
+export {};

package/dist/components/CommandMenu.js

@@ -0,0 +1,214 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { useId } from 'react';
+import { borders, colors, controls, fontSizes, fontWeights, iconSizes, lineHeights, radii, space } from "../theme/tokens.stylex.js";
+import { interact } from "./interaction.js";
+import { Dialog } from "./Dialog.js";
+import { Icon } from "./Icon.js";
+import { Kbd } from "./Kbd.js";
+import { ScrollArea } from "./ScrollArea.js";
+export function CommandMenu({ isOpen, onOpenChange, query, onQueryChange, results, highlighted, onHighlight, onMove, onRun, onSubmit }) {
+    const listId = useId();
+    const optionId = (id) => `${listId}-${id}`;
+    const onKeyDown = (event) => {
+        if (event.nativeEvent.isComposing)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            onMove(event.key === 'ArrowDown' ? 1 : -1);
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            const chosen = results.find((result) => result.id === highlighted);
+            if (chosen !== undefined) {
+                interact({
+                    primitive: 'CommandMenu',
+                    event: 'select',
+                    label: chosen.label
+                });
+            }
+            onSubmit();
+        }
+    };
+    return (_jsxs(Dialog, { label: "Command menu", isOpen: isOpen, onOpenChange: onOpenChange, placement: "top", size: "lg", children: [_jsxs("div", { ...stylex.props(styles.search), children: [_jsx("span", { ...stylex.props(styles.searchIcon), children: _jsx(Icon, { name: "search" }) }), _jsx("input", { "aria-label": "Type a command or search", role: "combobox", "aria-expanded": "true", "aria-controls": listId, "aria-activedescendant": highlighted === null ? undefined : optionId(highlighted), autoComplete: "off", spellCheck: false, placeholder: "Type a command or search\u2026", value: query, onChange: (event) => onQueryChange(event.target.value), onKeyDown: onKeyDown, ...stylex.props(styles.input) })] }), _jsx(ScrollArea, { style: styles.scroll, children: _jsxs("div", { id: listId, role: "listbox", "aria-label": "Suggestions", ...stylex.props(styles.list), children: [results.length === 0 ? (_jsx("div", { ...stylex.props(styles.empty), children: "No results found" })) : null, sectionsOf(results).map(({ group, items }) => (_jsxs("div", { role: "group", "aria-label": group, ...stylex.props(styles.group), children: [_jsx("div", { "aria-hidden": "true", ...stylex.props(styles.heading), children: group }), _jsx("div", { ...stylex.props(styles.items), children: items.map((action) => {
+                                        const isHighlighted = action.id === highlighted;
+                                        return (_jsxs("div", { id: optionId(action.id), role: "option", "aria-selected": isHighlighted, ref: isHighlighted
+                                                ? (node) => node?.scrollIntoView({ block: 'nearest' })
+                                                : undefined, onPointerMove: () => {
+                                                if (!isHighlighted)
+                                                    onHighlight(action.id);
+                                            }, onClick: () => {
+                                                interact({
+                                                    primitive: 'CommandMenu',
+                                                    event: 'select',
+                                                    label: action.label
+                                                });
+                                                onRun(action.id);
+                                            }, ...stylex.props(styles.item, isHighlighted && styles.itemHighlighted, action.isDanger && styles.itemDanger, action.isDanger &&
+                                                isHighlighted &&
+                                                styles.itemDangerHighlighted), children: [_jsx("span", { ...stylex.props(styles.itemIcon, isHighlighted && styles.itemIconHighlighted, action.isDanger && styles.itemIconDanger), children: _jsx(Icon, { name: action.icon }) }), _jsx("span", { ...stylex.props(styles.itemLabel), children: action.label }), action.keys.length === 0 ? null : (_jsx(Kbd, { keys: action.keys }))] }, action.id));
+                                    }) })] }, group)))] }) }), _jsxs("div", { "aria-hidden": "true", ...stylex.props(styles.footer), children: [_jsx("span", { ...stylex.props(styles.glow) }), footerHints.map((hint) => (_jsxs("span", { ...stylex.props(styles.hint), children: [_jsx(Kbd, { keys: hint.keys }), hint.label] }, hint.label)))] })] }));
+}
+function sectionsOf(results) {
+    const sections = [];
+    for (const result of results) {
+        const last = sections.at(-1);
+        if (last?.group === result.group)
+            last.items.push(result);
+        else
+            sections.push({ group: result.group, items: [result] });
+    }
+    return sections;
+}
+const footerHints = [
+    { keys: ['arrowup', 'arrowdown'], label: 'Navigate' },
+    { keys: ['enter'], label: 'Select' },
+    { keys: ['escape'], label: 'Close' }
+];
+const styles = stylex.create({
+    search: {
+        display: 'flex',
+        gap: space.sm,
+        alignItems: 'center',
+        padding: space.xs
+    },
+    searchIcon: {
+        display: 'flex',
+        alignItems: 'center',
+        height: controls.heightXl,
+        paddingInlineStart: controls.paddingMd,
+        color: colors.secondaryForeground
+    },
+    input: {
+        flexGrow: 1,
+        minWidth: 0,
+        height: controls.heightXl,
+        paddingInlineStart: 0,
+        paddingInlineEnd: controls.paddingMd,
+        fontFamily: 'inherit',
+        fontSize: fontSizes.bodySm,
+        fontWeight: fontWeights.semimedium,
+        fontFeatureSettings: 'inherit',
+        lineHeight: lineHeights.bodySm,
+        color: colors.primaryForeground,
+        outline: 'none',
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+        '::placeholder': {
+            color: colors.tertiaryForeground
+        }
+    },
+    scroll: {
+        maxHeight: '456px'
+    },
+    list: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.sm,
+        paddingBlockEnd: space.sm,
+        scrollPaddingBlock: space.sm
+    },
+    empty: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: `calc(2 * ${space.xxl})`,
+        fontSize: fontSizes.bodySm,
+        fontWeight: fontWeights.semimedium,
+        lineHeight: lineHeights.bodySm,
+        color: colors.secondaryForeground
+    },
+    group: {
+        paddingInline: space.sm
+    },
+    heading: {
+        padding: space.sm,
+        fontSize: fontSizes.captionLg,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.caption,
+        color: colors.tertiaryForeground
+    },
+    items: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs
+    },
+    item: {
+        display: 'flex',
+        gap: space.sm,
+        alignItems: 'center',
+        minHeight: `calc(${lineHeights.bodySm} + 2 * ${space.sm})`,
+        paddingBlock: space.sm,
+        paddingInlineStart: controls.paddingSm,
+        paddingInlineEnd: controls.paddingMd,
+        fontSize: fontSizes.bodySm,
+        fontWeight: fontWeights.semimedium,
+        lineHeight: lineHeights.bodySm,
+        color: colors.primaryForeground,
+        borderRadius: radii.lg
+    },
+    itemHighlighted: {
+        backgroundColor: colors.transparentHover
+    },
+    itemDanger: {
+        color: colors.onDangerSubtleForeground
+    },
+    itemDangerHighlighted: {
+        backgroundColor: colors.dangerSubtle
+    },
+    itemIcon: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: iconSizes.xl,
+        height: iconSizes.xl,
+        color: colors.tertiaryForeground
+    },
+    itemIconHighlighted: {
+        color: colors.primaryForeground
+    },
+    itemIconDanger: {
+        color: 'inherit'
+    },
+    itemLabel: {
+        flexGrow: 1,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontWeight: fontWeights.medium,
+        whiteSpace: 'nowrap'
+    },
+    footer: {
+        position: 'relative',
+        display: 'flex',
+        gap: space.lg,
+        alignItems: 'center',
+        minHeight: `calc(${controls.heightMd} + 2 * ${controls.paddingXs})`,
+        paddingBlock: controls.paddingXs,
+        paddingInlineStart: space.lg,
+        paddingInlineEnd: space.sm,
+        borderBlockStartColor: colors.borderDefault,
+        borderBlockStartStyle: 'solid',
+        borderBlockStartWidth: borders.hairline,
+        isolation: 'isolate'
+    },
+    glow: {
+        position: 'absolute',
+        insetInline: 0,
+        bottom: -28,
+        zIndex: -1,
+        height: controls.heightMd,
+        pointerEvents: 'none',
+        backgroundImage: colors.brandGradientSubtle,
+        borderRadius: radii.full,
+        filter: 'blur(25px)'
+    },
+    hint: {
+        display: 'flex',
+        gap: space.sm,
+        alignItems: 'center',
+        fontSize: fontSizes.captionLg,
+        lineHeight: lineHeights.caption,
+        color: colors.secondaryForeground
+    }
+});

package/dist/components/CommandPalette.d.ts

@@ -0,0 +1 @@
+export declare function CommandPalette(): import("react").JSX.Element;

package/dist/components/CommandPalette.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useModel } from "../hooks/appContext.js";
+import { CommandMenu } from "./CommandMenu.js";
+export function CommandPalette() {
+    const palette = useModel('palette');
+    return (_jsx(CommandMenu, { isOpen: palette.isOpen, onOpenChange: (open) => (open ? palette.open() : palette.close()), query: palette.query, onQueryChange: (query) => palette.setQuery({ query }), results: palette.results, highlighted: palette.highlighted, onHighlight: (id) => palette.highlight({ id }), onMove: (by) => palette.moveHighlight({ by }), onRun: (id) => palette.run({ id }), onSubmit: palette.submit }));
+}

package/dist/components/Content.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type ContentProps = {
+    children: ReactNode;
+    width?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
+};
+export declare function Content({ children, width }: ContentProps): import("react").JSX.Element;
+export {};

package/dist/components/Content.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { breakpoints, space, widths } from "../theme/tokens.stylex.js";
+export function Content({ children, width = 'md' }) {
+    return (_jsx("div", { ...stylex.props(styles.content, columnWidths[width]), children: children }));
+}
+const styles = stylex.create({
+    content: {
+        width: '100%',
+        paddingBlock: space.xl,
+        paddingInline: {
+            default: space.xl,
+            [breakpoints.compact]: space.lg
+        },
+        marginInline: 'auto'
+    }
+});
+const columnWidths = stylex.create({
+    xs: { maxWidth: widths.contentXs },
+    sm: { maxWidth: widths.contentSm },
+    md: { maxWidth: widths.contentMd },
+    lg: { maxWidth: widths.contentLg },
+    full: { maxWidth: 'none' }
+});

package/dist/components/ContextMenu.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { MenuEntry } from './MenuItems.tsx';
+type ContextMenuProps = {
+    items: readonly MenuEntry[];
+    children: ReactNode;
+};
+export declare function ContextMenu({ items, children }: ContextMenuProps): import("react").JSX.Element;
+export {};

package/dist/components/ContextMenu.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import * as stylex from '@stylexjs/stylex';
+import { colors, layers, radii } from "../theme/tokens.stylex.js";
+import { MenuItems } from "./MenuItems.js";
+import { Popup } from "./Popup.js";
+export function ContextMenu({ items, children }) {
+    return (_jsxs(BaseContextMenu.Root, { children: [_jsx(BaseContextMenu.Trigger, { className: (state) => stylex.props(styles.trigger, state.open && styles.triggerOpen)
+                    .className, children: children }), _jsx(BaseContextMenu.Portal, { children: _jsx(BaseContextMenu.Positioner, { className: stylex.props(styles.positioner).className, children: _jsx(BaseContextMenu.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "menu", isOpen: state.open, transitionStatus: state.transitionStatus })), children: _jsx(MenuItems, { items: items, primitive: "ContextMenu" }) }) }) })] }));
+}
+const styles = stylex.create({
+    trigger: {
+        backgroundColor: 'transparent',
+        borderRadius: radii.md
+    },
+    triggerOpen: {
+        backgroundColor: colors.transparentHover
+    },
+    positioner: {
+        zIndex: layers.menu,
+        outline: 'none'
+    }
+});

package/dist/components/Dialog.d.ts

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