@zvk/ui 0.1.0

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+function BreadcrumbsRoot({ className, children, label = "Breadcrumb", separator = "/", ref, ...props }) {
+    const items = React.Children.toArray(children).filter(React.isValidElement);
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": props["aria-label"] ?? label, className: cn("liano-breadcrumbs", className), children: _jsx("ol", { className: "liano-breadcrumbs__list", children: items.map((item, index) => (_jsx(Breadcrumbs.Item, { ...item.props, hasSeparator: index < items.length - 1, separator: separator }, item.key))) }) }));
+}
+function BreadcrumbsItem({ children, className, current, href, hasSeparator = false, linkProps = {}, ref, separator = "/", ...props }) {
+    const renderedSeparator = React.isValidElement(separator)
+        ? React.cloneElement(separator, {
+            ...separator.props,
+            "aria-hidden": true
+        })
+        : React.createElement("span", null, separator);
+    const content = current || !href ? (_jsx("span", { className: "liano-breadcrumbs__text", children: children })) : (_jsx("a", { href: href, ...linkProps, className: cn("liano-breadcrumbs__link", linkProps.className), children: children }));
+    return (_jsxs("li", { ...props, ref: ref, "aria-current": current ? "page" : undefined, className: cn("liano-breadcrumbs__item", className), children: [content, hasSeparator ? (_jsx("span", { "aria-hidden": "true", className: "liano-breadcrumbs__separator", children: renderedSeparator })) : null] }));
+}
+export const Breadcrumbs = Object.assign(BreadcrumbsRoot, { Item: BreadcrumbsItem });

package/dist/components/breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export { Breadcrumbs } from "./breadcrumbs.js";
+export type { BreadcrumbsItemProps, BreadcrumbsProps } from "./breadcrumbs.js";

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1 @@
+export { Breadcrumbs } from "./breadcrumbs.js";

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive";
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    disabled?: boolean;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export declare function Button({ children, className, disabled, leadingIcon, loading, ref, size, trailingIcon, type, variant, ...props }: ButtonProps): React.JSX.Element;

package/dist/components/button/button.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Spinner } from "../spinner/spinner.js";
+import { cn } from "../../utils/cn.js";
+export function Button({ children, className, disabled, leadingIcon, loading = false, ref, size = "md", trailingIcon, type = "button", variant = "primary", ...props }) {
+    const isDisabled = disabled || loading;
+    return (_jsxs("button", { ...props, ref: ref, "aria-busy": loading ? true : undefined, className: cn("liano-button", className), "data-disabled": isDisabled ? "true" : undefined, "data-loading": loading ? "true" : undefined, "data-size": size, "data-variant": variant, disabled: isDisabled, type: type, children: [loading ? (_jsx("span", { "aria-hidden": "true", className: "liano-button__spinner", children: _jsx(Spinner, { size: "sm" }) })) : null, leadingIcon ? (_jsx("span", { "aria-hidden": "true", className: "liano-button__icon", children: leadingIcon })) : null, _jsx("span", { className: "liano-button__content", children: children }), trailingIcon ? (_jsx("span", { "aria-hidden": "true", className: "liano-button__icon", children: trailingIcon })) : null] }));
+}

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

@@ -0,0 +1,2 @@
+export { Button } from "./button.js";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./button.js";

package/dist/components/button/index.js

@@ -0,0 +1 @@
+export { Button } from "./button.js";

package/dist/components/card/card.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export type CardVariant = "elevated" | "outline" | "ghost";
+export type CardPadding = "none" | "sm" | "md" | "lg";
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: CardVariant;
+    padding?: CardPadding;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CardSlotProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    ref?: React.Ref<HTMLHeadingElement>;
+}
+export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    ref?: React.Ref<HTMLParagraphElement>;
+}
+declare function CardRoot({ className, padding, ref, variant, ...props }: CardProps): React.JSX.Element;
+declare function CardHeader({ className, ref, ...props }: CardSlotProps): React.JSX.Element;
+declare function CardTitle({ className, ref, ...props }: CardTitleProps): React.JSX.Element;
+declare function CardDescription({ className, ref, ...props }: CardDescriptionProps): React.JSX.Element;
+declare function CardContent({ className, ref, ...props }: CardSlotProps): React.JSX.Element;
+declare function CardFooter({ className, ref, ...props }: CardSlotProps): React.JSX.Element;
+export declare const Card: typeof CardRoot & {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Content: typeof CardContent;
+    Footer: typeof CardFooter;
+};
+export {};

package/dist/components/card/card.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+function CardRoot({ className, padding = "md", ref, variant = "elevated", ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-card", className), "data-padding": padding, "data-variant": variant });
+}
+function CardHeader({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-card__header", className) });
+}
+function CardTitle({ className, ref, ...props }) {
+    return _jsx("h3", { ...props, ref: ref, className: cn("liano-card__title", className) });
+}
+function CardDescription({ className, ref, ...props }) {
+    return _jsx("p", { ...props, ref: ref, className: cn("liano-card__description", className) });
+}
+function CardContent({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-card__content", className) });
+}
+function CardFooter({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-card__footer", className) });
+}
+export const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Title: CardTitle,
+    Description: CardDescription,
+    Content: CardContent,
+    Footer: CardFooter
+});

package/dist/components/card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card } from "./card.js";
+export type { CardDescriptionProps, CardPadding, CardProps, CardSlotProps, CardTitleProps, CardVariant } from "./card.js";

package/dist/components/card/index.js

@@ -0,0 +1 @@
+export { Card } from "./card.js";

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type CheckboxSize = "sm" | "md" | "lg";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    size?: CheckboxSize;
+    ref?: React.Ref<HTMLInputElement>;
+}
+export declare function Checkbox({ "aria-describedby": ariaDescribedBy, className, description, disabled, error, id, invalid, label, ref, required, size, ...props }: CheckboxProps): React.JSX.Element;

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Field } from "../field/field.js";
+import { cn } from "../../utils/cn.js";
+function hasRenderableNode(value) {
+    return value !== undefined && value !== null && value !== false;
+}
+function joinIds(...ids) {
+    const value = ids.filter(Boolean).join(" ");
+    return value.length > 0 ? value : undefined;
+}
+export function Checkbox({ "aria-describedby": ariaDescribedBy, className, description, disabled, error, id, invalid, label, ref, required, size = "md", ...props }) {
+    const generatedId = React.useId();
+    const hasLabel = hasRenderableNode(label);
+    const hasDescription = hasRenderableNode(description);
+    const hasError = hasRenderableNode(error);
+    const shouldUseWrapperId = hasLabel || hasDescription || hasError;
+    const checkboxId = id ?? (shouldUseWrapperId ? generatedId : undefined);
+    const invalidState = invalid || Boolean(hasError);
+    const descriptionId = hasDescription ? `${checkboxId}-description` : undefined;
+    const errorId = hasError ? `${checkboxId}-error` : undefined;
+    const describedBy = joinIds(ariaDescribedBy, descriptionId, errorId);
+    const input = (_jsx("input", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: "liano-checkbox__input", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, disabled: disabled, id: checkboxId, required: required, type: "checkbox" }));
+    const content = (_jsxs(_Fragment, { children: [input, _jsx("span", { className: "liano-checkbox__control", "aria-hidden": "true", children: _jsx("span", { className: "liano-checkbox__indicator" }) }), hasLabel ? _jsx("span", { className: "liano-checkbox__label", children: label }) : null] }));
+    if (!hasLabel && !hasDescription && !hasError) {
+        return (_jsx("span", { className: cn("liano-checkbox", className), "data-size": size, "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, children: content }));
+    }
+    return (_jsxs(Field, { disabled: Boolean(disabled), invalid: invalidState, required: Boolean(required), children: [_jsx("label", { className: cn("liano-checkbox", className), "data-size": size, "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, children: content }), hasDescription ? _jsx(Field.Description, { id: descriptionId, children: description }) : null, hasError ? _jsx(Field.Error, { id: errorId, children: error }) : null] }));
+}

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./checkbox.js";
+export type { CheckboxProps, CheckboxSize } from "./checkbox.js";

package/dist/components/checkbox/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Checkbox } from "./checkbox.js";

package/dist/components/code-block/code-block.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export type CodeBlockSize = "sm" | "md";
+export interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
+    code: string;
+    language?: string;
+    filename?: React.ReactNode;
+    size?: CodeBlockSize;
+    ref?: React.Ref<HTMLPreElement>;
+}
+export declare function CodeBlock({ className, code, filename, language, ref, size, ...props }: CodeBlockProps): React.JSX.Element;

package/dist/components/code-block/code-block.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+function toLanguageClass(value) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    const normalized = value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+    return normalized.length > 0 ? `language-${normalized}` : undefined;
+}
+export function CodeBlock({ className, code, filename, language, ref, size = "md", ...props }) {
+    const hasMetadata = (filename !== undefined && filename !== null) ||
+        (language !== undefined && language !== null && language.trim().length > 0);
+    const codeClassName = cn("liano-code-block__code", toLanguageClass(language));
+    return (_jsxs("pre", { ...props, ref: ref, className: cn("liano-code-block", className), "data-size": size, children: [hasMetadata ? (_jsxs("span", { className: "liano-code-block__header", children: [filename !== undefined && filename !== null ? _jsx("span", { className: "liano-code-block__filename", children: filename }) : null, language ? _jsx("span", { className: "liano-code-block__language", children: language }) : null] })) : null, _jsx("code", { className: codeClassName, children: code })] }));
+}

package/dist/components/code-block/index.d.ts

@@ -0,0 +1,2 @@
+export { CodeBlock } from "./code-block.js";
+export type { CodeBlockProps, CodeBlockSize } from "./code-block.js";

package/dist/components/code-block/index.js

@@ -0,0 +1 @@
+export { CodeBlock } from "./code-block.js";

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    forceMount?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+declare function CollapsibleRoot({ children, className, defaultOpen, disabled, onOpenChange, open, ref, ...props }: CollapsibleProps): React.JSX.Element;
+declare function CollapsibleTrigger({ className, disabled, onClick, ref, type, ...props }: CollapsibleTriggerProps): React.JSX.Element;
+declare function CollapsibleContent({ className, forceMount, ref, ...props }: CollapsibleContentProps): React.JSX.Element | null;
+export declare const Collapsible: typeof CollapsibleRoot & {
+    Trigger: typeof CollapsibleTrigger;
+    Content: typeof CollapsibleContent;
+};
+export {};

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { useDisclosure } from "../../hooks/use-disclosure.js";
+import { cn } from "../../utils/cn.js";
+const CollapsibleContext = React.createContext(null);
+function useCollapsibleContext(calledBy) {
+    const context = React.useContext(CollapsibleContext);
+    if (!context) {
+        throw new Error(`"${calledBy}" must be used within a <Collapsible />`);
+    }
+    return context;
+}
+function CollapsibleRoot({ children, className, defaultOpen = false, disabled = false, onOpenChange, open, ref, ...props }) {
+    const generatedId = React.useId();
+    const defaultContentId = `${generatedId}-content`;
+    const [contentId, setContentId] = React.useState(defaultContentId);
+    const { open: isOpen, setOpen } = useDisclosure({
+        ...(open !== undefined ? { open } : {}),
+        defaultOpen,
+        ...(onOpenChange ? { onOpenChange } : {})
+    });
+    return (_jsx(CollapsibleContext.Provider, { value: { open: isOpen, setOpen, disabled, contentId, defaultContentId, setContentId }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-collapsible", className), "data-state": isOpen ? "open" : "closed", "data-disabled": disabled ? "true" : undefined, children: children }) }));
+}
+function CollapsibleTrigger({ className, disabled, onClick, ref, type = "button", ...props }) {
+    const context = useCollapsibleContext("Collapsible.Trigger");
+    const isDisabled = disabled || context.disabled;
+    const handleClick = () => {
+        context.setOpen((previous) => !previous);
+    };
+    return (_jsx("button", { ...props, ref: ref, className: cn("liano-collapsible__trigger", className), "aria-controls": context.contentId, "aria-expanded": context.open, "data-state": context.open ? "open" : "closed", "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, isDisabled ? undefined : handleClick), type: type }));
+}
+function CollapsibleContent({ className, forceMount = false, ref, ...props }) {
+    const context = useCollapsibleContext("Collapsible.Content");
+    const { defaultContentId, open, setContentId } = context;
+    const resolvedId = props.id ?? defaultContentId;
+    React.useLayoutEffect(() => {
+        setContentId(resolvedId);
+        return () => {
+            setContentId(defaultContentId);
+        };
+    }, [defaultContentId, resolvedId, setContentId]);
+    if (!forceMount && !open) {
+        return null;
+    }
+    return (_jsx("div", { ...props, id: resolvedId, ref: ref, className: cn("liano-collapsible__content", className), "data-state": open ? "open" : "closed", hidden: open ? undefined : true }));
+}
+export const Collapsible = Object.assign(CollapsibleRoot, {
+    Trigger: CollapsibleTrigger,
+    Content: CollapsibleContent
+});

package/dist/components/collapsible/index.d.ts

@@ -0,0 +1,2 @@
+export { Collapsible } from "./collapsible.js";
+export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps } from "./collapsible.js";

package/dist/components/collapsible/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Collapsible } from "./collapsible.js";

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    keywords?: readonly string[];
+}
+export interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size"> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    options: readonly ComboboxOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    size?: "sm" | "md" | "lg";
+    ref?: React.Ref<HTMLInputElement>;
+}
+export declare function Combobox({ "aria-describedby": ariaDescribedBy, className, defaultValue, description, disabled, error, id, label, onBlur, onFocus, onKeyDown, onValueChange, options, placeholder, ref, required, size, value, ...props }: ComboboxProps): React.JSX.Element;

package/dist/components/combobox/combobox.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { commandItemMatches } from "../command/command-filter.js";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { cn } from "../../utils/cn.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+function hasRenderableNode(value) {
+    return value !== undefined && value !== null && value !== false;
+}
+function joinIds(...ids) {
+    const value = ids.filter(Boolean).join(" ");
+    return value.length > 0 ? value : undefined;
+}
+function optionId(baseId, value) {
+    return `${baseId}-option-${value.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+}
+function firstEnabled(options) {
+    return options.find((option) => option.disabled !== true);
+}
+function nextEnabled(options, currentValue, direction) {
+    const enabled = options.filter((option) => option.disabled !== true);
+    if (enabled.length === 0) {
+        return undefined;
+    }
+    const currentIndex = currentValue === undefined ? -1 : enabled.findIndex((option) => option.value === currentValue);
+    const nextIndex = direction === "next" ? currentIndex + 1 : currentIndex - 1;
+    const wrapped = ((nextIndex % enabled.length) + enabled.length) % enabled.length;
+    return enabled[wrapped];
+}
+export function Combobox({ "aria-describedby": ariaDescribedBy, className, defaultValue = "", description, disabled, error, id, label, onBlur, onFocus, onKeyDown, onValueChange, options, placeholder, ref, required, size = "md", value, ...props }) {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const listboxId = `${inputId}-listbox`;
+    const hasLabel = hasRenderableNode(label);
+    const hasDescription = hasRenderableNode(description);
+    const hasError = hasRenderableNode(error);
+    const descriptionId = hasDescription ? `${inputId}-description` : undefined;
+    const errorId = hasError ? `${inputId}-error` : undefined;
+    const describedBy = joinIds(ariaDescribedBy, descriptionId, errorId);
+    const invalid = hasError || props["aria-invalid"] === true || props["aria-invalid"] === "true";
+    const [selectedValue, setSelectedValue] = useControllableState({
+        ...(value !== undefined ? { value } : {}),
+        defaultValue,
+        ...(onValueChange ? { onChange: onValueChange } : {})
+    });
+    const selectedOption = options.find((option) => option.value === selectedValue);
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState(selectedOption?.label ?? "");
+    const [activeValue, setActiveValue] = React.useState(selectedOption?.value);
+    const filteredOptions = options.filter((option) => commandItemMatches(option, query));
+    const activeOption = filteredOptions.find((option) => option.value === activeValue && option.disabled !== true) ??
+        firstEnabled(filteredOptions);
+    React.useEffect(() => {
+        if (!open) {
+            setQuery(selectedOption?.label ?? "");
+            setActiveValue(selectedOption?.value);
+        }
+    }, [open, selectedOption?.label, selectedOption?.value]);
+    const openListbox = React.useCallback(() => {
+        setOpen(true);
+        setQuery("");
+        setActiveValue(firstEnabled(options)?.value);
+    }, [options]);
+    const selectOption = React.useCallback((option) => {
+        if (!option || option.disabled) {
+            return;
+        }
+        setSelectedValue(option.value);
+        setQuery(option.label);
+        setActiveValue(option.value);
+        setOpen(false);
+    }, [setSelectedValue]);
+    const moveActive = React.useCallback((direction) => {
+        const next = nextEnabled(filteredOptions, activeOption?.value, direction);
+        setActiveValue(next?.value);
+    }, [activeOption?.value, filteredOptions]);
+    const input = (_jsx("input", { ...props, ref: ref, id: inputId, role: "combobox", "aria-activedescendant": open && activeOption ? optionId(inputId, activeOption.value) : undefined, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-describedby": describedBy, "aria-expanded": open ? "true" : "false", "aria-invalid": invalid ? "true" : undefined, className: cn("liano-combobox__input", className), "data-invalid": invalid ? "true" : undefined, "data-size": size, disabled: disabled, onBlur: onBlur, onChange: (event) => {
+            if (!open) {
+                setOpen(true);
+            }
+            setQuery(event.currentTarget.value);
+            setActiveValue(firstEnabled(options.filter((option) => commandItemMatches(option, event.currentTarget.value)))?.value);
+        }, onClick: () => {
+            if (!disabled) {
+                openListbox();
+            }
+        }, onFocus: composeEventHandlers(onFocus, () => {
+            if (!disabled) {
+                openListbox();
+            }
+        }), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                if (!open) {
+                    openListbox();
+                    return;
+                }
+                moveActive("next");
+                return;
+            }
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                moveActive("previous");
+                return;
+            }
+            if (event.key === "Enter") {
+                event.preventDefault();
+                selectOption(activeOption);
+                return;
+            }
+            if (event.key === "Escape") {
+                setOpen(false);
+            }
+        }), placeholder: placeholder, required: required, value: open ? query : selectedOption?.label ?? query }));
+    return (_jsxs("div", { className: "liano-combobox", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalid ? "true" : undefined, children: [hasLabel ? _jsx("label", { className: "liano-combobox__label", htmlFor: inputId, children: label }) : null, input, hasDescription ? _jsx("div", { className: "liano-combobox__description", id: descriptionId, children: description }) : null, hasError ? _jsx("div", { className: "liano-combobox__error", id: errorId, children: error }) : null, open ? (_jsx("div", { className: "liano-combobox__popup", children: _jsx("div", { id: listboxId, role: "listbox", className: "liano-combobox__list", children: filteredOptions.map((option) => {
+                        const isActive = activeOption?.value === option.value;
+                        const isSelected = selectedValue === option.value;
+                        return (_jsx("div", { id: optionId(inputId, option.value), role: "option", "aria-disabled": option.disabled ? "true" : undefined, "aria-selected": isSelected ? "true" : "false", className: "liano-combobox__option", "data-disabled": option.disabled ? "true" : undefined, "data-highlighted": isActive ? "true" : undefined, "data-selected": isSelected ? "true" : undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => selectOption(option), children: option.label }, option.value));
+                    }) }) })) : null] }));
+}

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

@@ -0,0 +1,2 @@
+export { Combobox } from "./combobox.js";
+export type { ComboboxOption, ComboboxProps } from "./combobox.js";

package/dist/components/combobox/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Combobox } from "./combobox.js";

package/dist/components/command/command-dialog.d.ts

@@ -0,0 +1,2 @@
+export { CommandDialog } from "./command.js";
+export type { CommandDialogProps } from "./command.js";

package/dist/components/command/command-dialog.js

@@ -0,0 +1 @@
+export { CommandDialog } from "./command.js";

package/dist/components/command/command-filter.d.ts

@@ -0,0 +1,7 @@
+export interface CommandFilterItem {
+    value: string;
+    label: string;
+    keywords?: readonly string[] | undefined;
+}
+export declare function commandItemMatches(item: CommandFilterItem, query: string): boolean;
+export declare function filterCommandItems<Item extends CommandFilterItem>(items: readonly Item[], query: string): Item[];

package/dist/components/command/command-filter.js

@@ -0,0 +1,14 @@
+function normalized(value) {
+    return value.trim().toLocaleLowerCase();
+}
+export function commandItemMatches(item, query) {
+    const needle = normalized(query);
+    if (needle.length === 0) {
+        return true;
+    }
+    const haystacks = [item.value, item.label, ...(item.keywords ?? [])];
+    return haystacks.some((value) => normalized(value).includes(needle));
+}
+export function filterCommandItems(items, query) {
+    return items.filter((item) => commandItemMatches(item, query));
+}

package/dist/components/command/command.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Dialog } from "../dialog/index.js";
+export interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onItemSelect?: (value: string) => void;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CommandInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange"> {
+    ref?: React.Ref<HTMLInputElement>;
+}
+export interface CommandListProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CommandEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    heading?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CommandItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    disabled?: boolean;
+    keywords?: readonly string[];
+    onSelect?: (value: string) => void;
+    value: string;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CommandSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CommandDialogProps extends Omit<React.ComponentProps<typeof Dialog>, "defaultValue" | "onChange"> {
+    closeOnSelect?: boolean;
+    commandLabel?: string;
+}
+declare function CommandRoot({ children, className, defaultValue, onItemSelect, onValueChange, ref, value, ...props }: CommandProps): React.JSX.Element;
+declare function CommandInput({ className, onKeyDown, placeholder, ref, ...props }: CommandInputProps): React.JSX.Element;
+declare function CommandList({ className, ref, ...props }: CommandListProps): React.JSX.Element;
+declare function CommandEmpty({ className, ref, ...props }: CommandEmptyProps): React.JSX.Element | null;
+declare function CommandGroup({ children, className, heading, ref, ...props }: CommandGroupProps): React.JSX.Element;
+declare function CommandItem({ children, className, disabled, keywords, onClick, onSelect, ref, value, ...props }: CommandItemProps): React.JSX.Element | null;
+declare function CommandSeparator({ className, ref, ...props }: CommandSeparatorProps): React.JSX.Element;
+export declare function CommandDialog({ children, className, closeOnSelect, commandLabel, onOpenChange, ...props }: CommandDialogProps): React.JSX.Element;
+type CommandComponent = typeof CommandRoot & {
+    Dialog: typeof CommandDialog;
+    Empty: typeof CommandEmpty;
+    Group: typeof CommandGroup;
+    Input: typeof CommandInput;
+    Item: typeof CommandItem;
+    List: typeof CommandList;
+    Separator: typeof CommandSeparator;
+};
+export declare const Command: CommandComponent;
+export {};