@trypattern/sdk 0.0.0-stage → 0.1.1

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/CopyButton.d.ts

@@ -0,0 +1,11 @@
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+type CopyButtonProps = {
+    text: string;
+    label?: string;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'transparent';
+    size?: Size;
+    style?: Placement;
+};
+export declare function CopyButton({ text, label, variant, size, style }: CopyButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/CopyButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Button } from "./Button.js";
+export function CopyButton({ text, label = 'Copy', variant = 'primary', size = 'sm', style }) {
+    const [isCopied, setIsCopied] = useState(false);
+    useEffect(() => {
+        if (!isCopied)
+            return undefined;
+        const timer = setTimeout(() => setIsCopied(false), COPIED_MS);
+        return () => clearTimeout(timer);
+    }, [isCopied]);
+    return (_jsx(Button, { variant: variant, size: size, icon: isCopied ? 'check' : 'copy', onClick: () => {
+            void navigator.clipboard.writeText(text).then(() => setIsCopied(true));
+        }, ...(style === undefined ? {} : { style }), children: isCopied ? 'Copied' : label }));
+}
+const COPIED_MS = 1500;

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

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,7 @@
+import type { Placement } from './Placement.ts';
+type DividerProps = {
+    label?: string;
+    style?: Placement;
+};
+export declare function Divider({ label, style }: DividerProps): import("react").JSX.Element;
+export {};

package/dist/components/Divider.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator } from '@base-ui/react/separator';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, space } from "../theme/tokens.stylex.js";
+import { Text } from "./Text.js";
+export function Divider({ label, style }) {
+    if (label === undefined) {
+        return (_jsx(Separator, { className: stylex.props(styles.divider, style).className }));
+    }
+    return (_jsxs("div", { ...stylex.props(styles.labelled, style), children: [_jsx(Separator, { className: stylex.props(styles.divider, styles.grow).className }), _jsx(Text, { variant: "caption", tone: "tertiary", children: label }), _jsx(Separator, { className: stylex.props(styles.divider, styles.grow).className })] }));
+}
+const styles = stylex.create({
+    divider: {
+        flexShrink: 0,
+        width: '100%',
+        height: borders.hairline,
+        backgroundColor: colors.divider
+    },
+    labelled: {
+        display: 'flex',
+        gap: space.md,
+        alignItems: 'center',
+        width: '100%'
+    },
+    grow: {
+        flexGrow: 1,
+        flexShrink: 1,
+        width: 'auto'
+    }
+});

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 { focusRing, 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, focusRing.visible, 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 {};