@remix-run/ui 0.0.0 → 0.1.0

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
+// @jsxRuntime classic
+// @jsx createElement
+import { css, createElement } from '@remix-run/ui';
+import { Glyph } from "../glyph/glyph.js";
+import { theme } from "../../theme/theme.js";
+const rootCss = css({
+    minWidth: 0,
+});
+const listCss = css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: `${theme.space.xs} ${theme.space.sm}`,
+    minWidth: 0,
+    margin: 0,
+    padding: 0,
+    listStyle: 'none',
+});
+const itemCss = css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    minWidth: 0,
+});
+const separatorCss = css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    width: theme.fontSize.sm,
+    height: theme.fontSize.sm,
+    color: theme.colors.text.muted,
+});
+const linkCss = css({
+    color: theme.colors.text.secondary,
+    fontSize: theme.fontSize.sm,
+    lineHeight: theme.lineHeight.normal,
+    textDecoration: 'none',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+        color: theme.colors.text.primary,
+    },
+});
+const currentCss = css({
+    color: theme.colors.text.primary,
+    fontSize: theme.fontSize.sm,
+    lineHeight: theme.lineHeight.normal,
+    fontWeight: theme.fontWeight.medium,
+    whiteSpace: 'nowrap',
+});
+const textCss = css({
+    color: theme.colors.text.secondary,
+    fontSize: theme.fontSize.sm,
+    lineHeight: theme.lineHeight.normal,
+    whiteSpace: 'nowrap',
+});
+export function Breadcrumbs(handle) {
+    return () => {
+        let { 'aria-label': ariaLabel, items, separator, mix, ...navProps } = handle.props;
+        let currentIndex = items.findIndex((item) => item.current);
+        if (currentIndex === -1) {
+            currentIndex = Math.max(0, items.length - 1);
+        }
+        let separatorContent = separator ?? _jsx(Glyph, { name: "chevronRight" });
+        return (_jsx("nav", { "aria-label": ariaLabel ?? 'Breadcrumb', ...navProps, mix: [rootCss, mix], children: _jsx("ol", { mix: listCss, children: items.flatMap((item, index) => {
+                    let isCurrent = index === currentIndex;
+                    let content = isCurrent ? (_jsx("span", { "aria-current": "page", mix: currentCss, children: item.label })) : item.href ? (_jsx("a", { href: item.href, mix: linkCss, children: item.label })) : (_jsx("span", { mix: textCss, children: item.label }));
+                    let nodes = [
+                        _jsx("li", { mix: itemCss, children: content }, `item-${index}`),
+                    ];
+                    if (index < items.length - 1) {
+                        nodes.push(_jsx("li", { "aria-hidden": "true", mix: separatorCss, children: separatorContent }, `separator-${index}`));
+                    }
+                    return nodes;
+                }) }) }));
+    };
+}
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/components/breadcrumbs/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"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"}

package/dist/components/button/button.d.ts

@@ -0,0 +1,23 @@
+import type { CSSMixinDescriptor, ElementProps, Handle, Props, RemixNode } from '@remix-run/ui';
+export declare const baseStyle: readonly [import("@remix-run/ui").MixinDescriptor<Element, [], ElementProps>, CSSMixinDescriptor];
+export declare const iconStyle: readonly [import("@remix-run/ui").MixinDescriptor<Element, [Partial<ElementProps>], ElementProps>, CSSMixinDescriptor];
+export declare const labelStyle: CSSMixinDescriptor;
+export declare const primaryStyle: CSSMixinDescriptor;
+export declare const secondaryStyle: CSSMixinDescriptor;
+export declare const ghostStyle: CSSMixinDescriptor;
+export declare const dangerStyle: CSSMixinDescriptor;
+declare const toneStyleByTone: {
+    readonly primary: CSSMixinDescriptor;
+    readonly secondary: CSSMixinDescriptor;
+    readonly ghost: CSSMixinDescriptor;
+    readonly danger: CSSMixinDescriptor;
+};
+export type ButtonTone = keyof typeof toneStyleByTone;
+export type ButtonProps = Omit<Props<'button'>, 'children'> & {
+    readonly children?: RemixNode;
+    readonly endIcon?: RemixNode;
+    readonly startIcon?: RemixNode;
+    readonly tone?: ButtonTone;
+};
+export declare function Button(handle: Handle<ButtonProps>): () => import("@remix-run/ui").RemixElement;
+export {};

package/dist/components/button/button.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+// @jsxRuntime classic
+// @jsx createElement
+import { attrs, createElement, createMixin, css } from '@remix-run/ui';
+import { theme } from "../../theme/theme.js";
+const ghostButtonToneCss = css({
+    backgroundColor: 'transparent',
+    backgroundImage: 'none',
+    color: theme.colors.text.secondary,
+    border: '0.5px solid transparent',
+    boxShadow: 'none',
+    '&:hover': {
+        backgroundColor: theme.surface.lvl3,
+        color: theme.colors.text.primary,
+    },
+    '&:active': {
+        backgroundColor: `color-mix(in oklab, ${theme.surface.lvl3} 94%, black)`,
+        color: `color-mix(in oklab, ${theme.colors.text.primary} 94%, black)`,
+    },
+    '&:focus-visible': {
+        outline: `2px solid ${theme.colors.focus.ring}`,
+        outlineOffset: '2px',
+        backgroundColor: theme.surface.lvl3,
+        color: theme.colors.text.primary,
+    },
+    '&:disabled': {
+        opacity: 0.6,
+    },
+});
+const buttonBaseStyleCss = css({
+    '--rmx-button-label-padding-inline': theme.space.xs,
+    all: 'unset',
+    boxSizing: 'border-box',
+    cursor: 'revert',
+    position: 'relative',
+    isolation: 'isolate',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    borderRadius: theme.radius.full,
+    fontFamily: theme.fontFamily.sans,
+    minHeight: theme.control.height.sm,
+    paddingInline: theme.space.md,
+    fontSize: theme.fontSize.xs,
+    lineHeight: '1',
+    fontWeight: theme.fontWeight.medium,
+    whiteSpace: 'nowrap',
+    textDecoration: 'none',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    verticalAlign: 'top',
+});
+const buttonLabelCss = css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    minWidth: 0,
+    paddingInline: 'var(--rmx-button-label-padding-inline)',
+});
+const buttonIconCss = css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '1em',
+    height: '1em',
+    flexShrink: 0,
+    '& > svg': {
+        display: 'block',
+        width: '100%',
+        height: '100%',
+    },
+});
+const buttonIconAttrsCss = attrs({ 'aria-hidden': true });
+const buttonDefaultsMixin = createMixin((handle, hostType) => (props) => {
+    if (hostType !== 'button' || props.type !== undefined) {
+        return handle.element;
+    }
+    return createElement(handle.element, {
+        ...props,
+        type: 'button',
+    });
+});
+const buttonDefaultsCss = buttonDefaultsMixin();
+export const baseStyle = [buttonDefaultsCss, buttonBaseStyleCss];
+export const iconStyle = [buttonIconAttrsCss, buttonIconCss];
+export const labelStyle = buttonLabelCss;
+export const primaryStyle = createButtonCss(theme.colors.action.primary);
+export const secondaryStyle = createButtonCss(theme.colors.action.secondary);
+export const ghostStyle = ghostButtonToneCss;
+export const dangerStyle = createButtonCss(theme.colors.action.danger);
+const toneStyleByTone = {
+    primary: primaryStyle,
+    secondary: secondaryStyle,
+    ghost: ghostStyle,
+    danger: dangerStyle,
+};
+export function Button(handle) {
+    return () => {
+        let { children, endIcon, mix, startIcon, tone = 'secondary', ...buttonProps } = handle.props;
+        return (_jsxs("button", { ...buttonProps, mix: [baseStyle, toneStyleByTone[tone], mix], children: [startIcon ? _jsx("span", { mix: iconStyle, children: startIcon }) : null, children !== undefined ? _jsx("span", { mix: labelStyle, children: children }) : null, endIcon ? _jsx("span", { mix: iconStyle, children: endIcon }) : null] }));
+    };
+}
+function createButtonCss(buttonTheme) {
+    let borderColor = createButtonBorderColor(buttonTheme.border);
+    let hoverBorderColor = createButtonBorderColor(buttonTheme.backgroundHover);
+    let activeBorderColor = createButtonBorderColor(buttonTheme.backgroundActive);
+    return css({
+        backgroundColor: buttonTheme.background,
+        backgroundImage: createButtonBackgroundImage(buttonTheme.background),
+        color: buttonTheme.foreground,
+        border: `0.5px solid ${borderColor}`,
+        boxShadow: `${createButtonHighlight(buttonTheme.background)}, ${theme.shadow.xs}, ${theme.shadow.sm}`,
+        '&:hover': {
+            backgroundColor: buttonTheme.backgroundHover,
+            backgroundImage: createButtonBackgroundImage(buttonTheme.backgroundHover),
+            borderColor: hoverBorderColor,
+        },
+        '&:active': {
+            backgroundColor: buttonTheme.backgroundActive,
+            backgroundImage: createButtonBackgroundImage(buttonTheme.backgroundActive),
+            borderColor: activeBorderColor,
+            boxShadow: `${createButtonHighlight(buttonTheme.backgroundActive, 0.12)}, ${theme.shadow.xs}`,
+        },
+        '&:focus-visible': {
+            outline: `2px solid ${theme.colors.focus.ring}`,
+            outlineOffset: '2px',
+        },
+        '&:disabled': {
+            opacity: 0.6,
+            cursor: 'not-allowed',
+        },
+    });
+}
+function createButtonBackgroundImage(background) {
+    return `linear-gradient(to bottom, ${createButtonHighlightColor(background, 0.18)} 0%, ${background} 100%)`;
+}
+function createButtonBorderColor(color) {
+    return `color-mix(in oklab, ${color} 74%, black)`;
+}
+function createButtonHighlight(background, amount = 0.16) {
+    return `inset 0 1px 0 ${createButtonHighlightColor(background, amount)}`;
+}
+function createButtonHighlightColor(background, amount) {
+    let alpha = Math.round(amount * 100);
+    return `color-mix(in oklab, white ${alpha}%, ${background})`;
+}
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";AAAA,sBAAsB;AACtB,qBAAqB;AACrB,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAGtE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAE5C,MAAM,kBAAkB,GAAuB,GAAG,CAAC;IACjD,eAAe,EAAE,aAAa;IAC9B,eAAe,EAAE,MAAM;IACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;IAClC,MAAM,EAAE,yBAAyB;IACjC,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE;QACT,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;QACnC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;KACjC;IACD,UAAU,EAAE;QACV,eAAe,EAAE,uBAAuB,KAAK,CAAC,OAAO,CAAC,IAAI,cAAc;QACxE,KAAK,EAAE,uBAAuB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,cAAc;KACtE;IACD,iBAAiB,EAAE;QACjB,OAAO,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE;QAC/C,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;QACnC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;KACjC;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,GAAG;KACb;CACF,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAuB,GAAG,CAAC;IACjD,mCAAmC,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;IACnD,GAAG,EAAE,OAAO;IACZ,SAAS,EAAE,YAAY;IACvB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;IAC/B,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI;IACjC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;IAClC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;IAC7B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE;IAC3B,UAAU,EAAE,GAAG;IACf,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM;IACnC,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,MAAM;IAClB,gBAAgB,EAAE,MAAM;IACxB,aAAa,EAAE,KAAK;CACrB,CAAC,CAAA;AAEF,MAAM,cAAc,GAAuB,GAAG,CAAC;IAC7C,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,CAAC;IACX,aAAa,EAAE,wCAAwC;CACxD,CAAC,CAAA;AAEF,MAAM,aAAa,GAAuB,GAAG,CAAC;IAC5C,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,CAAC;IACb,SAAS,EAAE;QACT,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;CACF,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAA;AAEzD,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE;IAC9B,IAAI,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QACtD,OAAO,MAAM,CAAC,OAAO,CAAA;IACvB,CAAC;IAED,OAAO,aAAa,CAAC,MAAM,CAAC,OAA4B,EAAE;QACxD,GAAG,KAAK;QACR,IAAI,EAAE,QAAQ;KACf,CAAC,CAAA;AACJ,CAAC,CACF,CAAA;AAED,MAAM,iBAAiB,GAAG,mBAAmB,EAAE,CAAA;AAE/C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,iBAAiB,EAAE,kBAAkB,CAAU,CAAA;AACzE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,kBAAkB,EAAE,aAAa,CAAU,CAAA;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAA;AACxC,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;AAC5E,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAA;AAC5C,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;AAEtE,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,YAAY;IACrB,SAAS,EAAE,cAAc;IACzB,KAAK,EAAE,UAAU;IACjB,MAAM,EAAE,WAAW;CACX,CAAA;AAWV,MAAM,UAAU,MAAM,CAAC,MAA2B;IAChD,OAAO,GAAG,EAAE;QACV,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,GAAG,WAAW,EAAE,GAAG,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAA;QAE5F,OAAO,CACL,qBAAY,WAAW,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,aAClE,SAAS,CAAC,CAAC,CAAC,eAAM,GAAG,EAAE,SAAS,YAAG,SAAS,GAAQ,CAAC,CAAC,CAAC,IAAI,EAC3D,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,eAAM,GAAG,EAAE,UAAU,YAAG,QAAQ,GAAQ,CAAC,CAAC,CAAC,IAAI,EACxE,OAAO,CAAC,CAAC,CAAC,eAAM,GAAG,EAAE,SAAS,YAAG,OAAO,GAAQ,CAAC,CAAC,CAAC,IAAI,IACjD,CACV,CAAA;IACH,CAAC,CAAA;AACH,CAAC;AAED,SAAS,eAAe,CAAC,WAMxB;IACC,IAAI,WAAW,GAAG,uBAAuB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;IAC7D,IAAI,gBAAgB,GAAG,uBAAuB,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;IAC3E,IAAI,iBAAiB,GAAG,uBAAuB,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAA;IAE7E,OAAO,GAAG,CAAC;QACT,eAAe,EAAE,WAAW,CAAC,UAAU;QACvC,eAAe,EAAE,2BAA2B,CAAC,WAAW,CAAC,UAAU,CAAC;QACpE,KAAK,EAAE,WAAW,CAAC,UAAU;QAC7B,MAAM,EAAE,eAAe,WAAW,EAAE;QACpC,SAAS,EAAE,GAAG,qBAAqB,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE;QACrG,SAAS,EAAE;YACT,eAAe,EAAE,WAAW,CAAC,eAAe;YAC5C,eAAe,EAAE,2BAA2B,CAAC,WAAW,CAAC,eAAe,CAAC;YACzE,WAAW,EAAE,gBAAgB;SAC9B;QACD,UAAU,EAAE;YACV,eAAe,EAAE,WAAW,CAAC,gBAAgB;YAC7C,eAAe,EAAE,2BAA2B,CAAC,WAAW,CAAC,gBAAgB,CAAC;YAC1E,WAAW,EAAE,iBAAiB;YAC9B,SAAS,EAAE,GAAG,qBAAqB,CAAC,WAAW,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE;SAC9F;QACD,iBAAiB,EAAE;YACjB,OAAO,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE;YAC/C,aAAa,EAAE,KAAK;SACrB;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,GAAG;YACZ,MAAM,EAAE,aAAa;SACtB;KACF,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,2BAA2B,CAAC,UAAkB;IACrD,OAAO,8BAA8B,0BAA0B,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,UAAU,QAAQ,CAAA;AAC7G,CAAC;AAED,SAAS,uBAAuB,CAAC,KAAa;IAC5C,OAAO,uBAAuB,KAAK,cAAc,CAAA;AACnD,CAAC;AAED,SAAS,qBAAqB,CAAC,UAAkB,EAAE,MAAM,GAAG,IAAI;IAC9D,OAAO,iBAAiB,0BAA0B,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,CAAA;AAC1E,CAAC;AAED,SAAS,0BAA0B,CAAC,UAAkB,EAAE,MAAc;IACpE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,CAAA;IACpC,OAAO,6BAA6B,KAAK,MAAM,UAAU,GAAG,CAAA;AAC9D,CAAC"}

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,101 @@
+import { type CSSMixinDescriptor, type ElementProps, type Handle, type Props, type RemixNode } from '@remix-run/ui';
+import * as listbox from '../listbox/listbox.ts';
+import { type SearchValue } from '../../interactions/typeahead/typeahead-mixin.ts';
+declare const COMBOBOX_CHANGE_EVENT: "rmx:combobox-change";
+type ComboboxChangeHandler = (event: ComboboxChangeEvent, signal: AbortSignal) => void | Promise<void>;
+type ShowReason = 'hint' | 'nav';
+export declare const inputStyle: CSSMixinDescriptor;
+export declare const popoverStyle: CSSMixinDescriptor;
+declare global {
+    interface HTMLElementEventMap {
+        [COMBOBOX_CHANGE_EVENT]: ComboboxChangeEvent;
+    }
+}
+export declare class ComboboxChangeEvent extends Event {
+    readonly label: string | null;
+    readonly optionId: string | null;
+    readonly value: string | null;
+    constructor({ label, optionId, value, }: {
+        label: string | null;
+        optionId: string | null;
+        value: string | null;
+    });
+}
+export type ComboboxOpenStrategy = 'selected' | 'selected-or-none' | 'first' | 'last';
+export interface ComboboxHandle {
+    readonly activeOptionId: string | null;
+    readonly id: string;
+    readonly inputText: string;
+    readonly isOpen: boolean;
+    readonly label: string | null;
+    readonly value: string | null;
+    close: () => void;
+    open: (strategy?: ComboboxOpenStrategy) => Promise<void>;
+}
+export interface ComboboxContextProps {
+    children?: RemixNode;
+    defaultValue?: string | null;
+    disabled?: boolean;
+    name?: string;
+    ref?: (handle: ComboboxHandle) => void;
+}
+export interface ComboboxProps extends Omit<Props<'div'>, 'children'> {
+    children?: RemixNode;
+    defaultValue?: string | null;
+    disabled?: boolean;
+    inputId?: string;
+    name?: string;
+    placeholder?: string;
+}
+export interface ComboboxOptionOptions {
+    disabled?: boolean;
+    label: string;
+    searchValue?: SearchValue;
+    value: string;
+}
+export interface ComboboxOptionProps extends Omit<Props<'div'>, 'children'> {
+    children?: RemixNode;
+    disabled?: boolean;
+    label: string;
+    searchValue?: SearchValue;
+    value: string;
+}
+interface ComboboxContextValue {
+    readonly activeId: string | undefined;
+    readonly disabled: boolean;
+    readonly filterText: string;
+    readonly inputText: string;
+    readonly isOpen: boolean;
+    readonly listId: string;
+    readonly name: string | undefined;
+    readonly showReason: ShowReason;
+    readonly surfaceVisible: boolean;
+    readonly value: listbox.ListboxValue;
+    clearInputSelection: () => void;
+    close: () => void;
+    handleBlur: () => void;
+    handleEscape: () => void;
+    navigateNext: () => void;
+    navigatePrevious: () => void;
+    open: (strategy?: ComboboxOpenStrategy) => Promise<void>;
+    openFromArrow: (direction: 'first' | 'last') => Promise<void>;
+    openFromInputActivation: () => Promise<void>;
+    registerInput: (node: HTMLInputElement) => void;
+    registerSurface: (node: HTMLElement) => void;
+    setInputText: (text: string) => Promise<void>;
+    syncPopoverMinWidth: () => void;
+    selectActive: () => Promise<void>;
+    unregisterInput: (node: HTMLInputElement) => void;
+    unregisterSurface: (node: HTMLElement) => void;
+}
+declare function ComboboxProvider(handle: Handle<ComboboxContextProps, ComboboxContextValue>): () => import("@remix-run/ui").RemixElement;
+declare const popoverMixin: <boundNode extends HTMLElement = HTMLElement>() => import("@remix-run/ui").MixinDescriptor<boundNode, [], ElementProps>;
+export declare const Context: typeof ComboboxProvider;
+export declare const hiddenInput: <boundNode extends HTMLInputElement = HTMLInputElement>() => import("@remix-run/ui").MixinDescriptor<boundNode, [], ElementProps>;
+export declare const input: <boundNode extends HTMLInputElement = HTMLInputElement>() => import("@remix-run/ui").MixinDescriptor<boundNode, [], ElementProps>;
+export declare const list: <boundNode extends HTMLElement = HTMLElement>() => import("@remix-run/ui").MixinDescriptor<boundNode, [], ElementProps>;
+export declare const option: <boundNode extends HTMLElement = HTMLElement>(options: ComboboxOptionOptions) => import("@remix-run/ui").MixinDescriptor<boundNode, [options: ComboboxOptionOptions], ElementProps>;
+export { popoverMixin as popover };
+export declare function onComboboxChange(handler: ComboboxChangeHandler, captureBoolean?: boolean): import("@remix-run/ui").MixinDescriptor<HTMLElement, ["rmx:combobox-change", (event: import("@remix-run/ui").Dispatched<ComboboxChangeEvent, HTMLElement>, signal: AbortSignal) => void | Promise<void>, (boolean | undefined)?], ElementProps>;
+export declare function Combobox(handle: Handle<ComboboxProps>): () => import("@remix-run/ui").RemixElement;
+export declare function ComboboxOption(handle: Handle<ComboboxOptionProps>): () => import("@remix-run/ui").RemixElement;