@trypattern/sdk 0.0.0-stage → 0.1.0

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

package/dist/components/Screen.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { use } from 'react';
+import { borders, colors, controls, space } from "../theme/tokens.stylex.js";
+import { FrameContext } from "./frame.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { Link } from "./Link.js";
+import { ScrollArea } from "./ScrollArea.js";
+import { Text } from "./Text.js";
+export function Screen({ title, parent, actions, children }) {
+    const frame = use(FrameContext);
+    return (_jsxs("div", { ...stylex.props(styles.screen), children: [_jsxs("header", { ...stylex.props(styles.header), children: [_jsxs("div", { ...stylex.props(styles.leading), children: [frame === null ? null : (_jsx(IconButton, { icon: "panelLeft", label: "Toggle sidebar", onClick: frame.onToggleSidebar })), _jsxs("div", { ...stylex.props(styles.breadcrumb), children: [parent === undefined ? null : (_jsxs(_Fragment, { children: [_jsx(Link, { to: parent.to, tone: "secondary", children: parent.label }), _jsx(Icon, { name: "chevronRight", tone: "tertiary" })] })), _jsx(Text, { as: "h1", variant: "label", tone: "primary", isTruncated: true, children: title })] })] }), _jsx("div", { ...stylex.props(styles.actions), children: actions })] }), _jsx(ScrollArea, { style: styles.body, children: children })] }));
+}
+const styles = stylex.create({
+    screen: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+    },
+    header: {
+        display: 'flex',
+        flexShrink: 0,
+        gap: space.md,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: `calc(${controls.heightXl} + ${space.sm})`,
+        paddingInline: space.sm,
+        borderBottomColor: colors.borderDefault,
+        borderBottomStyle: 'solid',
+        borderBottomWidth: borders.hairline
+    },
+    leading: {
+        display: 'flex',
+        gap: space.sm,
+        alignItems: 'center',
+        minWidth: 0
+    },
+    breadcrumb: {
+        display: 'flex',
+        gap: space.xs,
+        alignItems: 'center',
+        minWidth: 0
+    },
+    actions: {
+        display: 'flex',
+        flexShrink: 0,
+        gap: space.sm,
+        alignItems: 'center',
+        paddingInlineEnd: space.xs
+    },
+    body: {
+        flexGrow: 1,
+        height: 'auto'
+    }
+});

package/dist/components/Scrim.d.ts

@@ -0,0 +1,8 @@
+type ScrimProps = {
+    label: string;
+    isOpen: boolean;
+    isAnimating: boolean;
+    onClose: () => void;
+};
+export declare function Scrim({ label, isOpen, isAnimating, onClose }: ScrimProps): import("react").JSX.Element;
+export {};

package/dist/components/Scrim.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { useEffect } from 'react';
+import { breakpoints, colors, layers, motion } from "../theme/tokens.stylex.js";
+export function Scrim({ label, isOpen, isAnimating, onClose }) {
+    useEffect(() => {
+        if (!isOpen)
+            return undefined;
+        const closeOnEscape = (event) => {
+            if (event.key === 'Escape')
+                onClose();
+        };
+        window.addEventListener('keydown', closeOnEscape);
+        return () => window.removeEventListener('keydown', closeOnEscape);
+    }, [isOpen, onClose]);
+    return (_jsx("button", { type: "button", "aria-label": label, tabIndex: -1, onClick: onClose, ...stylex.props(styles.scrim, isOpen && styles.visible, isAnimating && styles.animating) }));
+}
+const styles = stylex.create({
+    scrim: {
+        position: 'fixed',
+        inset: 0,
+        zIndex: layers.scrim,
+        display: {
+            default: 'none',
+            [breakpoints.compact]: 'block'
+        },
+        visibility: 'hidden',
+        backgroundColor: colors.overlay,
+        opacity: 0
+    },
+    animating: {
+        transitionTimingFunction: motion.slideEasing,
+        transitionDuration: motion.slide,
+        transitionProperty: 'opacity, visibility'
+    },
+    visible: {
+        visibility: 'visible',
+        opacity: 1
+    }
+});

package/dist/components/ScrollArea.d.ts

@@ -0,0 +1,15 @@
+import type { StyleXStyles } from '@stylexjs/stylex';
+import type { ReactNode } from 'react';
+import type { PlacementProperties } from './Placement.ts';
+type ScrollAreaProps = {
+    children: ReactNode;
+    style?: StyleXStyles<PlacementProperties & {
+        height?: number | string;
+        maxHeight?: number | string;
+        padding?: number | string;
+        paddingBlock?: number | string;
+        paddingInline?: number | string;
+    }>;
+};
+export declare function ScrollArea({ children, style }: ScrollAreaProps): import("react").JSX.Element;
+export {};

package/dist/components/ScrollArea.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+export function ScrollArea({ children, style }) {
+    return _jsx("div", { ...stylex.props(styles.scroll, style), children: children });
+}
+const styles = stylex.create({
+    scroll: {
+        height: '100%',
+        minHeight: 0,
+        overflowY: 'auto',
+        overscrollBehavior: 'contain'
+    }
+});

package/dist/components/SegmentedControl.d.ts

@@ -0,0 +1,17 @@
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+export type SegmentedOption<Value extends string> = {
+    value: Value;
+    label: string;
+};
+type SegmentedControlProps<Value extends string> = {
+    label: string;
+    value: Value;
+    options: readonly SegmentedOption<Value>[];
+    size?: Size;
+    disabled?: boolean;
+    onChange: (value: Value) => void;
+    style?: Placement;
+};
+export declare function SegmentedControl<Value extends string>({ label, value, options, size, disabled, onChange, style }: SegmentedControlProps<Value>): import("react").JSX.Element;
+export {};

package/dist/components/SegmentedControl.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup } from '@base-ui/react/radio-group';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, fontWeights, motion, radii } from "../theme/tokens.stylex.js";
+import { interact } from "./interaction.js";
+import { controlSizes } from "./controlLook.js";
+export function SegmentedControl({ label, value, options, size = 'md', disabled = false, onChange, style }) {
+    const index = Math.max(0, options.findIndex((option) => option.value === value));
+    return (_jsxs(RadioGroup, { "aria-label": label, value: value, disabled: disabled, onValueChange: (next) => {
+            interact({ primitive: 'SegmentedControl', event: 'change', label });
+            onChange(next);
+        }, className: stylex.props(styles.group, style).className, children: [_jsx("span", { ...stylex.props(styles.indicator(index, options.length)) }), options.map((option) => (_jsx(Radio.Root, { value: option.value, className: (state) => stylex.props(styles.option, controlSizes[size], !disabled && styles.hoverable, state.checked && styles.optionChecked, disabled && styles.disabled).className, children: option.label }, option.value)))] }));
+}
+const styles = stylex.create({
+    group: {
+        position: 'relative',
+        display: 'grid',
+        gridAutoColumns: '1fr',
+        gridAutoFlow: 'column',
+        alignItems: 'center',
+        fontWeight: fontWeights.medium,
+        backgroundColor: colors.component,
+        borderRadius: radii.md
+    },
+    indicator: (index, count) => ({
+        position: 'absolute',
+        insetBlockStart: 0,
+        insetInlineStart: 0,
+        width: `calc(100% / ${count})`,
+        height: '100%',
+        pointerEvents: 'none',
+        backgroundColor: colors.componentOnContainerStrong,
+        borderColor: colors.indicatorBorder,
+        borderStyle: 'solid',
+        borderWidth: borders.thin,
+        borderRadius: radii.md,
+        transform: `translateX(${index * 100}%)`,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'transform'
+    }),
+    option: {
+        position: 'relative',
+        zIndex: 1,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: colors.secondaryForeground,
+        whiteSpace: 'nowrap',
+        outlineOffset: 0,
+        transitionTimingFunction: motion.easeInOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'color'
+    },
+    hoverable: {
+        color: {
+            default: colors.secondaryForeground,
+            ':hover': colors.primaryForeground
+        }
+    },
+    optionChecked: {
+        color: colors.primaryForeground
+    },
+    disabled: {
+        color: colors.disabledForeground
+    }
+});

package/dist/components/Select.d.ts

@@ -0,0 +1,17 @@
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+export type SelectOption<Value extends string> = {
+    value: Value;
+    label: string;
+};
+type SelectProps<Value extends string> = {
+    label: string;
+    value: Value;
+    options: readonly SelectOption<Value>[];
+    size?: Size;
+    disabled?: boolean;
+    onChange: (value: Value) => void;
+    style?: Placement;
+};
+export declare function Select<Value extends string>({ label, value, options, size, disabled, onChange, style }: SelectProps<Value>): import("react").JSX.Element;
+export {};

package/dist/components/Select.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as BaseSelect } from '@base-ui/react/select';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, controls, iconSizes, layers, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { controlSizes } from "./controlLook.js";
+import { Icon } from "./Icon.js";
+import { interact } from "./interaction.js";
+import { Popup } from "./Popup.js";
+import { PopupItem } from "./PopupItem.js";
+export function Select({ label, value, options, size = 'md', disabled = false, onChange, style }) {
+    return (_jsxs(BaseSelect.Root, { items: options, value: value, disabled: disabled, onValueChange: (next) => {
+            if (next === null)
+                return;
+            interact({ primitive: 'Select', event: 'change', label });
+            onChange(next);
+        }, children: [_jsxs(BaseSelect.Trigger, { "aria-label": label, className: (state) => stylex.props(styles.trigger, controlSizes[size], triggerPaddings[size], styles.triggerLook, !disabled && styles.hoverable, state.open && styles.triggerOpen, disabled && styles.disabled, style).className, children: [_jsx("span", { ...stylex.props(styles.values), children: options.map((option) => (_jsx("span", { "aria-hidden": option.value !== value, ...stylex.props(styles.value, option.value !== value && styles.valueHidden), children: option.label }, option.value))) }), _jsx(BaseSelect.Icon, { className: stylex.props(styles.chevron).className, children: _jsx(Icon, { name: "chevronUpDown", size: size }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { alignItemWithTrigger: false, side: "bottom", align: "start", sideOffset: 4, className: stylex.props(styles.positioner).className, children: _jsx(BaseSelect.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "select", isOpen: state.open, transitionStatus: state.transitionStatus })), children: options.map((option) => (_jsxs(BaseSelect.Item, { value: option.value, render: (props, state) => (_jsx(PopupItem, { ...props, kind: "select", isHighlighted: state.highlighted })), children: [_jsx("span", { ...stylex.props(styles.indicator), children: _jsx(BaseSelect.ItemIndicator, { className: stylex.props(styles.check).className, children: _jsx(Icon, { name: "check" }) }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value))) }) }) })] }));
+}
+const focusRing = `inset 0 0 0 ${borders.hairline} ${colors.brandBorderFocus}, 0 0 0 ${borders.thin} ${colors.brandBorderFocus}, ${shadows.default}`;
+const styles = stylex.create({
+    trigger: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        whiteSpace: 'nowrap',
+        outline: 'none'
+    },
+    triggerLook: {
+        gap: space.sm,
+        color: colors.primaryForeground,
+        backgroundColor: colors.componentOnContainerStrong,
+        borderRadius: radii.lg,
+        boxShadow: {
+            default: shadows.default,
+            ':focus-visible': focusRing
+        },
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.instant,
+        transitionProperty: 'color, background-color, box-shadow'
+    },
+    hoverable: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':focus-visible': colors.componentOnContainerSubtleHover,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    triggerOpen: {
+        backgroundColor: colors.componentOnContainerSubtleHover,
+        boxShadow: focusRing
+    },
+    disabled: {
+        color: colors.disabledForeground,
+        backgroundColor: colors.disabled,
+        boxShadow: 'none'
+    },
+    values: {
+        display: 'grid',
+        textAlign: 'start'
+    },
+    value: {
+        gridRowStart: 1,
+        gridColumnStart: 1
+    },
+    valueHidden: {
+        visibility: 'hidden'
+    },
+    chevron: {
+        display: 'flex',
+        color: colors.tertiaryForeground
+    },
+    positioner: {
+        zIndex: layers.menu,
+        outline: 'none'
+    },
+    indicator: {
+        display: 'flex',
+        width: iconSizes.md,
+        height: iconSizes.md,
+        color: colors.secondaryForeground
+    },
+    check: {
+        display: 'flex'
+    }
+});
+const triggerPaddings = stylex.create({
+    xs: {
+        paddingInlineStart: `calc(${controls.paddingXs} - 2px)`,
+        paddingInlineEnd: `calc(${controls.paddingXs} - 4px)`
+    },
+    sm: {
+        paddingInlineStart: `calc(${controls.paddingSm} - 2px)`,
+        paddingInlineEnd: `calc(${controls.paddingSm} - 4px)`
+    },
+    md: {
+        paddingInlineStart: `calc(${controls.paddingMd} - 2px)`,
+        paddingInlineEnd: `calc(${controls.paddingMd} - 4px)`
+    },
+    lg: {
+        paddingInlineStart: `calc(${controls.paddingLg} - 2px)`,
+        paddingInlineEnd: `calc(${controls.paddingLg} - 4px)`
+    },
+    xl: {
+        paddingInlineStart: `calc(${controls.paddingXl} - 2px)`,
+        paddingInlineEnd: `calc(${controls.paddingXl} - 4px)`
+    }
+});

package/dist/components/SettingsRow.d.ts

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

package/dist/components/SettingsRow.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { breakpoints, space } from "../theme/tokens.stylex.js";
+import { Text } from "./Text.js";
+export function SettingsRow({ title, description, control }) {
+    return (_jsxs("div", { ...stylex.props(styles.row), children: [_jsxs("div", { ...stylex.props(styles.words), children: [_jsx(Text, { variant: "label", tone: "primary", children: title }), description === undefined ? null : (_jsx(Text, { tone: "secondary", children: description }))] }), control] }));
+}
+const styles = stylex.create({
+    row: {
+        display: 'flex',
+        flexDirection: {
+            default: 'row',
+            [breakpoints.compact]: 'column'
+        },
+        gap: {
+            default: space.xl,
+            [breakpoints.compact]: space.md
+        },
+        alignItems: {
+            default: 'center',
+            [breakpoints.compact]: 'flex-start'
+        },
+        justifyContent: 'space-between',
+        paddingBlock: space.lg
+    },
+    words: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs,
+        minWidth: 0
+    }
+});

package/dist/components/Sidebar.d.ts

@@ -0,0 +1,20 @@
+import type { AppPath } from '../registered.ts';
+import type { IconName } from './icons.ts';
+import type { MenuEntry } from './MenuItems.tsx';
+export type SidebarLink = {
+    label: string;
+    to: AppPath;
+    icon: IconName;
+    count?: number | null;
+};
+type SidebarProps = {
+    workspace: string;
+    workspaceMenu: readonly MenuEntry[];
+    links: readonly SidebarLink[];
+    isToggled: boolean;
+    isAnimating: boolean;
+    onFollowLink: () => void;
+    onSearch: (() => void) | undefined;
+};
+export declare function Sidebar({ workspace, workspaceMenu, links, isToggled, isAnimating, onFollowLink, onSearch }: SidebarProps): import("react").JSX.Element;
+export {};