@zvk/ui 0.1.0

package/dist/components/radio-group/radio-group.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const RadioGroupContext = React.createContext(null);
+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 isChecked(optionValue, value) {
+    return value === undefined ? undefined : value === optionValue;
+}
+function isDefaultChecked(optionValue, value, defaultValue) {
+    return value === undefined && defaultValue !== undefined ? optionValue === defaultValue : undefined;
+}
+function useRadioGroupContext(calledBy) {
+    const context = React.useContext(RadioGroupContext);
+    if (!context) {
+        throw new Error(`"${calledBy}" must be used within a <RadioGroup />`);
+    }
+    return context;
+}
+function NativeRadioItem({ "aria-describedby": ariaDescribedBy, checked, className, defaultChecked, description, disabled, id, invalid, label, name, onChange, ref, required, value, ...props }) {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const descriptionId = hasRenderableNode(description) ? `${inputId}-description` : undefined;
+    const describedBy = joinIds(ariaDescribedBy, descriptionId);
+    const input = (_jsx("input", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalid ? true : undefined, checked: checked, className: "liano-radio-group__input", defaultChecked: defaultChecked, disabled: disabled, id: inputId, name: name, onChange: onChange, required: required, type: "radio", value: value }));
+    return (_jsxs("div", { className: cn("liano-radio-group__item", className), children: [_jsxs("label", { className: "liano-radio-group__option", children: [input, _jsx("span", { className: "liano-radio-group__control", "aria-hidden": "true" }), hasRenderableNode(label) ? _jsx("span", { className: "liano-radio-group__label", children: label }) : null] }), hasRenderableNode(description) ? (_jsx("p", { className: "liano-radio-group__option-description", id: descriptionId, children: description })) : null] }));
+}
+export function RadioGroupItem({ disabled, value, ...props }) {
+    const context = useRadioGroupContext("RadioGroup.Item");
+    const handleChange = (event) => {
+        context.onValueChange?.(event.currentTarget.value, event);
+    };
+    return (_jsx(NativeRadioItem, { ...props, disabled: Boolean(context.disabled) || Boolean(disabled), invalid: context.invalid, name: context.name, onChange: handleChange, value: value, ...(isChecked(value, context.value) !== undefined ? { checked: isChecked(value, context.value) } : {}), ...(isDefaultChecked(value, context.value, context.defaultValue) !== undefined ? { defaultChecked: isDefaultChecked(value, context.value, context.defaultValue) } : {}), ...(context.required !== undefined ? { required: context.required } : {}) }));
+}
+function RadioGroupRoot({ "aria-describedby": ariaDescribedBy, children, className, description, disabled, error, id, invalid, label, name, onValueChange, options, orientation = "vertical", ref, required, size = "md", value, defaultValue, ...props }) {
+    const baseId = React.useId();
+    const generatedId = id ?? baseId;
+    const descriptionId = hasRenderableNode(description) ? `${generatedId}-description` : undefined;
+    const errorId = hasRenderableNode(error) ? `${generatedId}-error` : undefined;
+    const describedBy = joinIds(ariaDescribedBy, descriptionId, errorId);
+    const invalidState = invalid || Boolean(error);
+    const handleChange = (event) => {
+        onValueChange?.(event.currentTarget.value, event);
+    };
+    const optionItems = options?.map((option, index) => {
+        const optionId = `${baseId}-option-${index}`;
+        return (_jsx(NativeRadioItem, { disabled: Boolean(disabled) || Boolean(option.disabled), id: optionId, invalid: invalidState, label: option.label, name: name, onChange: handleChange, value: option.value, ...(isChecked(option.value, value) !== undefined ? { checked: isChecked(option.value, value) } : {}), ...(isDefaultChecked(option.value, value, defaultValue) !== undefined ? { defaultChecked: isDefaultChecked(option.value, value, defaultValue) } : {}), ...(option.description !== undefined ? { description: option.description } : {}), ...(required !== undefined ? { required } : {}) }, `${option.value}-${index}`));
+    });
+    const context = React.useMemo(() => ({
+        baseId,
+        ...(defaultValue !== undefined ? { defaultValue } : {}),
+        ...(disabled !== undefined ? { disabled } : {}),
+        invalid: invalidState,
+        name,
+        ...(onValueChange ? { onValueChange } : {}),
+        ...(required !== undefined ? { required } : {}),
+        ...(value !== undefined ? { value } : {})
+    }), [baseId, defaultValue, disabled, invalidState, name, onValueChange, required, value]);
+    return (_jsx(RadioGroupContext.Provider, { value: context, children: _jsxs("fieldset", { ...props, ref: ref, "aria-describedby": describedBy, className: cn("liano-radio-group", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-orientation": orientation, "data-required": required ? "true" : undefined, "data-size": size, id: id, disabled: disabled, children: [_jsx("legend", { className: "liano-radio-group__legend", children: label }), _jsxs("div", { className: "liano-radio-group__items", children: [optionItems, children] }), hasRenderableNode(description) ? _jsx("p", { className: "liano-radio-group__description", id: descriptionId, children: description }) : null, hasRenderableNode(error) ? _jsx("p", { className: "liano-radio-group__error", id: errorId, children: error }) : null] }) }));
+}
+export const RadioGroup = Object.assign(RadioGroupRoot, {
+    Item: RadioGroupItem
+});

package/dist/components/responsive-container/index.d.ts

@@ -0,0 +1,2 @@
+export { ResponsiveContainer } from "./responsive-container.js";
+export type { ResponsiveContainerGutter, ResponsiveContainerProps, ResponsiveContainerSize } from "./responsive-container.js";

package/dist/components/responsive-container/index.js

@@ -0,0 +1 @@
+export { ResponsiveContainer } from "./responsive-container.js";

package/dist/components/responsive-container/responsive-container.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export type ResponsiveContainerSize = "sm" | "md" | "lg" | "xl" | "full";
+export type ResponsiveContainerGutter = "none" | "sm" | "md" | "lg";
+export interface ResponsiveContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: ResponsiveContainerSize;
+    gutter?: ResponsiveContainerGutter;
+    center?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export declare function ResponsiveContainer({ center, className, gutter, ref, size, ...props }: ResponsiveContainerProps): React.JSX.Element;

package/dist/components/responsive-container/responsive-container.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+export function ResponsiveContainer({ center = true, className, gutter = "md", ref, size = "lg", ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("liano-responsive-container", className), "data-center": center ? "true" : "false", "data-gutter": gutter, "data-size": size }));
+}

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollArea } from "./scroll-area.js";
+export type { ScrollAreaOrientation, ScrollAreaProps, ScrollAreaType, ScrollBarProps } from "./scroll-area.js";

package/dist/components/scroll-area/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { ScrollArea } from "./scroll-area.js";

package/dist/components/scroll-area/scroll-area.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export type ScrollAreaType = "auto" | "always";
+export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    type?: ScrollAreaType;
+    orientation?: ScrollAreaOrientation;
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "vertical" | "horizontal";
+    ref?: React.Ref<HTMLDivElement>;
+}
+declare function ScrollAreaRoot({ className, maxHeight, maxWidth, orientation, ref, style, tabIndex, type, ...props }: ScrollAreaProps): React.JSX.Element;
+declare function ScrollBar({ className, orientation, ref, ...props }: ScrollBarProps): React.JSX.Element;
+type ScrollAreaComponent = typeof ScrollAreaRoot & {
+    ScrollBar: typeof ScrollBar;
+};
+export declare const ScrollArea: ScrollAreaComponent;
+export {};

package/dist/components/scroll-area/scroll-area.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+function sizeValue(value) {
+    if (typeof value === "number") {
+        return `${value}px`;
+    }
+    return value;
+}
+function ScrollAreaRoot({ className, maxHeight, maxWidth, orientation = "vertical", ref, style, tabIndex = 0, type = "auto", ...props }) {
+    const resolvedStyle = {
+        ...style,
+        ...(maxHeight !== undefined ? { "--liano-scroll-area-max-height": sizeValue(maxHeight) } : {}),
+        ...(maxWidth !== undefined ? { "--liano-scroll-area-max-width": sizeValue(maxWidth) } : {})
+    };
+    return (_jsx("div", { ...props, ref: ref, className: cn("liano-scroll-area", className), "data-orientation": orientation, "data-type": type, style: resolvedStyle, tabIndex: tabIndex }));
+}
+function ScrollBar({ className, orientation = "vertical", ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, "aria-hidden": "true", className: cn("liano-scroll-area__scrollbar", className), "data-orientation": orientation }));
+}
+export const ScrollArea = Object.assign(ScrollAreaRoot, {
+    ScrollBar
+});

package/dist/components/sectioned-sidebar-nav/index.d.ts

@@ -0,0 +1,2 @@
+export { SectionedSidebarNav } from "./sectioned-sidebar-nav.js";
+export type { SectionedSidebarNavItemBaseProps, SectionedSidebarNavItemProps, SectionedSidebarNavListProps, SectionedSidebarNavProps, SectionedSidebarNavSectionProps, SectionedSidebarNavSectionTitleProps } from "./sectioned-sidebar-nav.js";

package/dist/components/sectioned-sidebar-nav/index.js

@@ -0,0 +1 @@
+export { SectionedSidebarNav } from "./sectioned-sidebar-nav.js";

package/dist/components/sectioned-sidebar-nav/sectioned-sidebar-nav.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export interface SectionedSidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+    label?: string;
+    ref?: React.Ref<HTMLElement>;
+}
+export interface SectionedSidebarNavSectionProps extends React.HTMLAttributes<HTMLElement> {
+    ref?: React.Ref<HTMLElement>;
+}
+export interface SectionedSidebarNavSectionTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    ref?: React.Ref<HTMLHeadingElement>;
+}
+export interface SectionedSidebarNavListProps extends React.HTMLAttributes<HTMLUListElement> {
+    ref?: React.Ref<HTMLUListElement>;
+}
+export interface SectionedSidebarNavItemBaseProps {
+    active?: boolean;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+}
+export type SectionedSidebarNavItemProps = (SectionedSidebarNavItemBaseProps & {
+    href: string;
+    ref?: React.Ref<HTMLAnchorElement>;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">) | (SectionedSidebarNavItemBaseProps & {
+    href?: never;
+    ref?: React.Ref<HTMLButtonElement>;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>);
+declare function SectionedSidebarNavRoot({ className, label, ref, ...props }: SectionedSidebarNavProps): React.JSX.Element;
+declare function SectionedSidebarNavSection({ className, ref, ...props }: SectionedSidebarNavSectionProps): React.JSX.Element;
+declare function SectionedSidebarNavSectionTitle({ className, ref, ...props }: SectionedSidebarNavSectionTitleProps): React.JSX.Element;
+declare function SectionedSidebarNavList({ className, ref, ...props }: SectionedSidebarNavListProps): React.JSX.Element;
+declare function SectionedSidebarNavItem(props: SectionedSidebarNavItemProps): React.JSX.Element;
+export declare const SectionedSidebarNav: typeof SectionedSidebarNavRoot & {
+    Section: typeof SectionedSidebarNavSection;
+    SectionTitle: typeof SectionedSidebarNavSectionTitle;
+    List: typeof SectionedSidebarNavList;
+    Item: typeof SectionedSidebarNavItem;
+};
+export {};

package/dist/components/sectioned-sidebar-nav/sectioned-sidebar-nav.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+function SectionedSidebarNavRoot({ className, label = "Sidebar navigation", ref, ...props }) {
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": props["aria-label"] ?? label, className: cn("liano-sectioned-sidebar-nav", className) }));
+}
+function SectionedSidebarNavSection({ className, ref, ...props }) {
+    return _jsx("section", { ...props, ref: ref, className: cn("liano-sectioned-sidebar-nav__section", className) });
+}
+function SectionedSidebarNavSectionTitle({ className, ref, ...props }) {
+    return _jsx("h2", { ...props, ref: ref, className: cn("liano-sectioned-sidebar-nav__section-title", className) });
+}
+function SectionedSidebarNavList({ className, ref, ...props }) {
+    return _jsx("ul", { ...props, ref: ref, className: cn("liano-sectioned-sidebar-nav__list", className) });
+}
+function SectionedSidebarNavItem(props) {
+    const { active = false, badge, className, disabled = false, icon, ...itemProps } = props;
+    const content = (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "liano-sectioned-sidebar-nav__item-icon", children: icon })) : null, _jsx("span", { className: "liano-sectioned-sidebar-nav__item-label", children: props.children }), badge ? _jsx("span", { className: "liano-sectioned-sidebar-nav__item-badge", children: badge }) : null] }));
+    if ("href" in itemProps && typeof itemProps.href === "string") {
+        const { onClick, ref, ...anchorProps } = itemProps;
+        return (_jsx("li", { className: "liano-sectioned-sidebar-nav__item", children: _jsx("a", { ...anchorProps, ref: ref, "aria-current": active ? "page" : undefined, "aria-disabled": disabled ? true : undefined, className: cn("liano-sectioned-sidebar-nav__item-control", className), "data-disabled": disabled ? "true" : undefined, "data-state": active ? "active" : "inactive", onClick: (event) => {
+                    if (disabled) {
+                        event.preventDefault();
+                        return;
+                    }
+                    onClick?.(event);
+                }, tabIndex: disabled ? -1 : anchorProps.tabIndex, children: content }) }));
+    }
+    const { ref, type = "button", ...buttonProps } = itemProps;
+    return (_jsx("li", { className: "liano-sectioned-sidebar-nav__item", children: _jsx("button", { ...buttonProps, ref: ref, className: cn("liano-sectioned-sidebar-nav__item-control", className), "data-disabled": disabled ? "true" : undefined, "data-state": active ? "active" : "inactive", disabled: disabled, type: type, children: content }) }));
+}
+export const SectionedSidebarNav = Object.assign(SectionedSidebarNavRoot, {
+    Section: SectionedSidebarNavSection,
+    SectionTitle: SectionedSidebarNavSectionTitle,
+    List: SectionedSidebarNavList,
+    Item: SectionedSidebarNavItem
+});

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

@@ -0,0 +1,2 @@
+export { Select } from "./select.js";
+export type { SelectContentProps, SelectItemProps, SelectProps, SelectSize, SelectTriggerProps, SelectValueProps } from "./select.js";

package/dist/components/select/index.js

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

package/dist/components/select/select.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import type { FloatingPlacement } from "../../internal/floating/floating-types.js";
+export type SelectSize = "sm" | "md" | "lg";
+export interface SelectProps extends React.HTMLAttributes<HTMLDivElement> {
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    placeholder?: React.ReactNode;
+    placement?: FloatingPlacement;
+    size?: SelectSize;
+}
+export interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    sideOffset?: number;
+    collisionPadding?: number;
+    matchTriggerWidth?: boolean;
+    forceMount?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    disabled?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {
+    placeholder?: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+}
+declare function SelectRoot({ children, className, defaultValue, disabled, invalid, name, onValueChange, placeholder, placement, required, size, value, ...props }: SelectProps): React.JSX.Element;
+declare function SelectTrigger({ children, className, disabled, onClick, onKeyDown, ref, type, ...props }: SelectTriggerProps): React.JSX.Element;
+declare function SelectValue({ className, placeholder, ref, ...props }: SelectValueProps): React.JSX.Element;
+declare function SelectContent({ children, className, collisionPadding, forceMount, matchTriggerWidth, onKeyDown, ref, sideOffset, style, ...props }: SelectContentProps): React.JSX.Element | null;
+declare function SelectItem({ children, className, disabled, onClick, onKeyDown, ref, value, ...props }: SelectItemProps): React.JSX.Element;
+export declare const Select: typeof SelectRoot & {
+    Content: typeof SelectContent;
+    Item: typeof SelectItem;
+    Trigger: typeof SelectTrigger;
+    Value: typeof SelectValue;
+};
+export {};

package/dist/components/select/select.js

@@ -0,0 +1,239 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { cn } from "../../utils/cn.js";
+import { Portal } from "../../internal/portal/index.js";
+import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
+import { useFloatingPosition } from "../../internal/floating/index.js";
+const defaultContentPositioning = {
+    sideOffset: 4,
+    collisionPadding: 0,
+    matchTriggerWidth: true
+};
+const SelectContext = React.createContext(null);
+function useSelectContext(calledBy) {
+    const context = React.useContext(SelectContext);
+    if (!context) {
+        throw new Error(`"${calledBy}" must be used within a <Select />`);
+    }
+    return context;
+}
+function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref && "current" in ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function getTextLabel(node) {
+    return node;
+}
+function SelectRoot({ children, className, defaultValue = "", disabled, invalid, name, onValueChange, placeholder, placement = "bottom-start", required, size = "md", value, ...props }) {
+    const instanceId = React.useId();
+    const triggerId = `${instanceId}-trigger`;
+    const contentId = `${instanceId}-content`;
+    const triggerRef = React.useRef(null);
+    const itemRegistry = React.useRef(new Map());
+    const itemOrder = React.useRef([]);
+    const wasOpenRef = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const [itemsVersion, setItemsVersion] = React.useState(0);
+    const [currentValue, setCurrentValue] = useControllableState({
+        ...(value !== undefined ? { value } : {}),
+        defaultValue,
+        ...(onValueChange ? { onChange: onValueChange } : {})
+    });
+    const [contentPositioning, setContentPositioning] = React.useState(defaultContentPositioning);
+    const floating = useFloatingPosition({
+        open,
+        placement,
+        strategy: "absolute",
+        offset: contentPositioning.sideOffset,
+        collisionPadding: contentPositioning.collisionPadding,
+        matchReferenceWidth: contentPositioning.matchTriggerWidth
+    });
+    const getOrderedItems = React.useCallback(() => {
+        return itemOrder.current
+            .map((id) => itemRegistry.current.get(id))
+            .filter((item) => item !== undefined);
+    }, []);
+    const getEnabledItems = React.useCallback(() => getOrderedItems().filter((item) => !item.disabled && item.element !== null), [getOrderedItems]);
+    const registerItem = React.useCallback((item) => {
+        if (!itemOrder.current.includes(item.id)) {
+            itemOrder.current.push(item.id);
+        }
+        itemRegistry.current.set(item.id, item);
+        setItemsVersion((version) => version + 1);
+    }, []);
+    const unregisterItem = React.useCallback((id) => {
+        itemRegistry.current.delete(id);
+        itemOrder.current = itemOrder.current.filter((entry) => entry !== id);
+        setItemsVersion((version) => version + 1);
+    }, []);
+    const selectValue = React.useCallback((nextValue) => {
+        setCurrentValue(nextValue);
+        setOpen(false);
+    }, [setCurrentValue]);
+    const selectedLabel = React.useMemo(() => getOrderedItems().find((item) => item.value === currentValue)?.label, [currentValue, getOrderedItems, itemsVersion]);
+    React.useEffect(() => {
+        if (wasOpenRef.current && !open) {
+            triggerRef.current?.focus();
+        }
+        wasOpenRef.current = open;
+    }, [open]);
+    const context = React.useMemo(() => ({
+        contentId,
+        ...(disabled !== undefined ? { disabled } : {}),
+        getEnabledItems,
+        ...(invalid !== undefined ? { invalid } : {}),
+        open,
+        ...(placeholder !== undefined ? { placeholder } : {}),
+        registerItem,
+        ...(required !== undefined ? { required } : {}),
+        selectValue,
+        ...(selectedLabel !== undefined ? { selectedLabel } : {}),
+        triggerId,
+        triggerRef,
+        unregisterItem,
+        updateContentPositioning: setContentPositioning,
+        value: currentValue,
+        setOpen,
+        referenceRef: floating.referenceRef,
+        floatingRef: floating.floatingRef,
+        floatingStyle: floating.floatingStyle
+    }), [contentId, currentValue, disabled, floating.floatingRef, floating.floatingStyle, floating.referenceRef, getEnabledItems, invalid, open, placeholder, registerItem, required, selectValue, selectedLabel, triggerId, unregisterItem]);
+    return (_jsx(SelectContext.Provider, { value: context, children: _jsxs("div", { ...props, className: cn("liano-select", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalid ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, "data-state": open ? "open" : "closed", children: [name ? _jsx("input", { type: "hidden", name: name, value: currentValue }) : null, children] }) }));
+}
+function focusItem(items, index) {
+    if (items.length === 0) {
+        return;
+    }
+    const clamped = ((index % items.length) + items.length) % items.length;
+    items[clamped]?.element?.focus();
+}
+function SelectTrigger({ children, className, disabled, onClick, onKeyDown, ref, type = "button", ...props }) {
+    const context = useSelectContext("Select.Trigger");
+    const isDisabled = Boolean(context.disabled) || Boolean(disabled);
+    const openAndFocus = React.useCallback((boundary = "first") => {
+        context.setOpen(true);
+        queueMicrotask(() => {
+            const items = context.getEnabledItems();
+            if (boundary === "last") {
+                focusItem(items, items.length - 1);
+                return;
+            }
+            const selectedIndex = items.findIndex((item) => item.value === context.value);
+            focusItem(items, selectedIndex >= 0 ? selectedIndex : 0);
+        });
+    }, [context]);
+    return (_jsx("button", { ...props, ref: composeRefs(ref, context.triggerRef, context.referenceRef), "aria-controls": context.contentId, "aria-expanded": context.open ? "true" : "false", "aria-haspopup": "listbox", "aria-invalid": context.invalid ? "true" : undefined, "aria-required": context.required ? "true" : undefined, className: cn("liano-select__trigger", className), "data-disabled": isDisabled ? "true" : undefined, "data-invalid": context.invalid ? "true" : undefined, "data-state": context.open ? "open" : "closed", disabled: isDisabled, id: context.triggerId, onClick: composeEventHandlers(onClick, () => {
+            if (!isDisabled) {
+                context.setOpen(!context.open);
+            }
+        }), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (isDisabled) {
+                return;
+            }
+            if (event.key === "Enter" || event.key === " " || event.key === "Space" || event.key === "Spacebar" || event.key === "ArrowDown") {
+                event.preventDefault();
+                openAndFocus("first");
+            }
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                openAndFocus("last");
+            }
+        }), type: type, children: children }));
+}
+function SelectValue({ className, placeholder, ref, ...props }) {
+    const context = useSelectContext("Select.Value");
+    const displayPlaceholder = context.selectedLabel === undefined;
+    return (_jsx("span", { ...props, ref: ref, className: cn("liano-select__value", className), "data-placeholder": displayPlaceholder ? "true" : undefined, children: displayPlaceholder ? placeholder ?? context.placeholder : context.selectedLabel }));
+}
+function SelectContent({ children, className, collisionPadding = defaultContentPositioning.collisionPadding, forceMount = false, matchTriggerWidth = defaultContentPositioning.matchTriggerWidth, onKeyDown, ref, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
+    const context = useSelectContext("Select.Content");
+    React.useEffect(() => {
+        context.updateContentPositioning({
+            sideOffset,
+            collisionPadding,
+            matchTriggerWidth
+        });
+        return () => context.updateContentPositioning(defaultContentPositioning);
+    }, [collisionPadding, context, matchTriggerWidth, sideOffset]);
+    const moveFocus = React.useCallback((direction) => {
+        const items = context.getEnabledItems();
+        const currentIndex = items.findIndex((item) => item.element === document.activeElement);
+        focusItem(items, direction === "next" ? currentIndex + 1 : currentIndex - 1);
+    }, [context]);
+    const moveToBoundary = React.useCallback((end) => {
+        const items = context.getEnabledItems();
+        focusItem(items, end ? items.length - 1 : 0);
+    }, [context]);
+    if (!context.open && !forceMount) {
+        return null;
+    }
+    const content = (_jsx("div", { ...props, ref: composeRefs(ref, context.floatingRef), "aria-labelledby": context.triggerId, className: cn("liano-select__content", className), "data-state": context.open ? "open" : "closed", hidden: context.open ? undefined : true, id: context.contentId, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                moveFocus("next");
+            }
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                moveFocus("previous");
+            }
+            if (event.key === "Home") {
+                event.preventDefault();
+                moveToBoundary(false);
+            }
+            if (event.key === "End") {
+                event.preventDefault();
+                moveToBoundary(true);
+            }
+            if (event.key === "Escape") {
+                context.setOpen(false);
+            }
+        }), role: "listbox", style: { ...context.floatingStyle, ...style }, tabIndex: -1, children: children }));
+    if (!context.open) {
+        return _jsx(Portal, { children: content });
+    }
+    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: true, onDismiss: () => context.setOpen(false), children: content }) }));
+}
+function SelectItem({ children, className, disabled = false, onClick, onKeyDown, ref, value, ...props }) {
+    const context = useSelectContext("Select.Item");
+    const itemId = React.useId();
+    const itemRef = React.useRef(null);
+    const selected = context.value === value;
+    React.useLayoutEffect(() => {
+        context.registerItem({
+            disabled,
+            element: itemRef.current,
+            id: itemId,
+            label: getTextLabel(children),
+            value
+        });
+        return () => context.unregisterItem(itemId);
+    }, [children, context, disabled, itemId, value]);
+    const select = () => {
+        if (!disabled) {
+            context.selectValue(value);
+        }
+    };
+    return (_jsxs("div", { ...props, ref: composeRefs(ref, itemRef), "aria-disabled": disabled ? "true" : undefined, "aria-selected": selected ? "true" : "false", className: cn("liano-select__item", className), "data-disabled": disabled ? "true" : undefined, "data-state": selected ? "checked" : "unchecked", id: itemId, onClick: composeEventHandlers(onClick, select), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (event.key === "Enter" || event.key === " " || event.key === "Space" || event.key === "Spacebar") {
+                event.preventDefault();
+                select();
+            }
+        }), role: "option", tabIndex: disabled ? undefined : -1, children: [_jsx("span", { className: "liano-select__item-indicator", "aria-hidden": "true", children: selected ? "✓" : "" }), _jsx("span", { className: "liano-select__item-label", children: children })] }));
+}
+export const Select = Object.assign(SelectRoot, {
+    Content: SelectContent,
+    Item: SelectItem,
+    Trigger: SelectTrigger,
+    Value: SelectValue
+});

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

@@ -0,0 +1,2 @@
+export { Separator } from "./separator.js";
+export type { SeparatorOrientation, SeparatorProps } from "./separator.js";

package/dist/components/separator/index.js

@@ -0,0 +1 @@
+export { Separator } from "./separator.js";

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export type SeparatorOrientation = "horizontal" | "vertical";
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: SeparatorOrientation;
+    decorative?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export declare function Separator({ className, decorative, orientation, ref, ...props }: SeparatorProps): React.JSX.Element;

package/dist/components/separator/separator.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+export function Separator({ className, decorative = true, orientation = "horizontal", ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, "aria-orientation": decorative ? undefined : orientation, className: cn("liano-separator", className), "data-orientation": orientation, role: decorative ? "none" : "separator" }));
+}

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

@@ -0,0 +1,2 @@
+export { Sheet } from "./sheet.js";
+export type { SheetCloseProps, SheetContentProps, SheetDescriptionProps, SheetFooterProps, SheetHeaderProps, SheetProps, SheetSide, SheetTitleProps, SheetTriggerProps } from "./sheet.js";

package/dist/components/sheet/index.js

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

package/dist/components/sheet/sheet.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+export type SheetSide = "left" | "right" | "top" | "bottom";
+export interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    side?: SheetSide;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface SheetTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface SheetTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    ref?: React.Ref<HTMLHeadingElement>;
+}
+export interface SheetDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    ref?: React.Ref<HTMLParagraphElement>;
+}
+export interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface SheetCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+declare function SheetRoot({ children, className, defaultOpen, onOpenChange, open: openProp, ref, side, ...props }: SheetProps): React.JSX.Element;
+declare function SheetTrigger({ className, disabled, onClick, ref, type, ...props }: SheetTriggerProps): React.JSX.Element;
+declare function SheetContent({ children, className, ref, ...props }: SheetContentProps): React.JSX.Element | null;
+declare function SheetHeader({ className, ref, ...props }: SheetHeaderProps): React.JSX.Element;
+declare function SheetTitle({ className, ref, ...props }: SheetTitleProps): React.JSX.Element;
+declare function SheetDescription({ className, ref, ...props }: SheetDescriptionProps): React.JSX.Element;
+declare function SheetFooter({ className, ref, ...props }: SheetFooterProps): React.JSX.Element;
+declare function SheetClose({ className, onClick, ref, type, ...props }: SheetCloseProps): React.JSX.Element;
+type SheetComponent = typeof SheetRoot & {
+    Close: typeof SheetClose;
+    Content: typeof SheetContent;
+    Description: typeof SheetDescription;
+    Footer: typeof SheetFooter;
+    Header: typeof SheetHeader;
+    Title: typeof SheetTitle;
+    Trigger: typeof SheetTrigger;
+};
+export declare const Sheet: SheetComponent;
+export {};