@zvk/ui 0.1.3 → 0.1.6

package/dist/components/popover/popover.js

@@ -7,8 +7,11 @@ 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";
+import { placementFromSideAlign } from "../../internal/floating/placement-aliases.js";
+import { Slot } from "../../internal/slot/index.js";
 const defaultPositioning = {
     sideOffset: 0,
+    alignOffset: 0,
     collisionPadding: 0,
     matchTriggerWidth: false
 };
@@ -53,6 +56,20 @@ function getPlacementParts(placement) {
     const [side, align = "center"] = placement.split("-");
     return { side, align };
 }
+function isDevelopmentEnvironment() {
+    const runtimeProcess = globalThis.process;
+    if (runtimeProcess?.env?.NODE_ENV) {
+        return runtimeProcess.env.NODE_ENV !== "production";
+    }
+    const metaEnv = import.meta.env;
+    if (typeof metaEnv?.DEV === "boolean") {
+        return metaEnv.DEV;
+    }
+    if (typeof metaEnv?.PROD === "boolean") {
+        return !metaEnv.PROD;
+    }
+    return typeof metaEnv?.MODE === "string" && metaEnv.MODE !== "production";
+}
 function PopoverRoot({ children, className, defaultOpen = false, modal = false, onOpenChange, open, placement = "bottom", ref, ...props }) {
     const defaultContentId = `${React.useId()}-content`;
     const [contentId, setContentId] = React.useState(defaultContentId);
@@ -70,6 +87,7 @@ function PopoverRoot({ children, className, defaultOpen = false, modal = false,
         open: isOpen,
         placement: contentPositioning.placement ?? placement,
         offset: contentPositioning.sideOffset,
+        alignmentOffset: contentPositioning.alignOffset,
         collisionPadding: contentPositioning.collisionPadding,
         matchReferenceWidth: contentPositioning.matchTriggerWidth
     });
@@ -95,20 +113,26 @@ function PopoverRoot({ children, className, defaultOpen = false, modal = false,
             floatingPlacement: resolvedPlacement,
             updatePosition,
             updateContentPositioning
-        }, children: _jsx("div", { ...props, ref: handleRef, className: cn("liano-popover", className), "data-state": isOpen ? "open" : "closed", children: children }) }));
+        }, children: _jsx("div", { ...props, ref: handleRef, className: cn("zvk-ui-popover", className), "data-state": isOpen ? "open" : "closed", children: children }) }));
 }
-function PopoverTrigger({ className, onClick, ref, type = "button", ...props }) {
+function PopoverTrigger({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const context = usePopoverContext("Popover.Trigger");
     const handleClick = () => {
+        if (disabled) {
+            return;
+        }
         context.setOpen((value) => !value);
     };
     const handleRef = React.useCallback((node) => {
         context.referenceRef(node);
         mergeRef(ref, node);
     }, [context.referenceRef, ref]);
-    return (_jsx("button", { ...props, ref: handleRef, type: type, className: cn("liano-popover__trigger", className), "aria-expanded": context.open, "aria-controls": context.contentId, "aria-haspopup": "dialog", "data-state": context.open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: handleRef, "aria-controls": context.contentId, "aria-disabled": disabled ? true : undefined, "aria-expanded": context.open, "aria-haspopup": "dialog", className: cn("zvk-ui-popover__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": context.open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick), children: props.children }));
+    }
+    return (_jsx("button", { ...props, ref: handleRef, type: type, disabled: disabled, className: cn("zvk-ui-popover__trigger", className), "aria-expanded": context.open, "aria-controls": context.contentId, "aria-haspopup": "dialog", "data-state": context.open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
 }
-function PopoverContent({ className, container, forceMount = false, id, disableEscapeKeyDown = false, disableOutsidePointerDown = false, ref, placement, sideOffset = 0, collisionPadding = 0, matchTriggerWidth = false, style, ...props }) {
+function PopoverContent({ align, alignOffset = defaultPositioning.alignOffset, className, container, forceMount = false, id, disableEscapeKeyDown = false, disableOutsidePointerDown = false, ref, placement, side, sideOffset = 0, collisionPadding = 0, matchTriggerWidth = false, style, ...props }) {
     const context = usePopoverContext("Popover.Content");
     const { defaultContentId, setContentId } = context;
     const transformOrigin = getTransformOrigin(context.floatingPlacement);
@@ -121,7 +145,7 @@ function PopoverContent({ className, container, forceMount = false, id, disableE
     const contentStyle = React.useMemo(() => ({
         ...context.floatingStyle,
         ...style,
-        "--liano-popover-transform-origin": transformOrigin
+        "--zvk-ui-popover-transform-origin": transformOrigin
     }), [context.floatingStyle, style, transformOrigin]);
     React.useLayoutEffect(() => {
         setContentId(contentId);
@@ -140,20 +164,28 @@ function PopoverContent({ className, container, forceMount = false, id, disableE
         }
     }, [context.referenceElement]);
     React.useEffect(() => {
+        const resolvedPlacement = side === undefined ? placement : placementFromSideAlign(side, align, placement ?? "bottom");
         context.updateContentPositioning({
-            ...(placement === undefined ? {} : { placement }),
+            ...(resolvedPlacement === undefined ? {} : { placement: resolvedPlacement }),
             sideOffset,
+            alignOffset,
             collisionPadding,
             matchTriggerWidth
         });
         return () => {
             context.updateContentPositioning(defaultPositioning);
         };
-    }, [context.updateContentPositioning, collisionPadding, matchTriggerWidth, placement, sideOffset]);
+    }, [align, alignOffset, context.updateContentPositioning, collisionPadding, matchTriggerWidth, placement, side, sideOffset]);
     if (!forceMount && !context.open) {
         return null;
     }
-    const content = (_jsx("div", { ...props, ref: handleRef, id: contentId, role: "dialog", className: cn("liano-popover__content", className), "data-align": placementParts.align, "data-side": placementParts.side, "data-state": context.open ? "open" : "closed", hidden: context.open ? undefined : true, style: contentStyle }));
+    const content = (_jsx("div", { ...props, ref: handleRef, id: contentId, role: "dialog", className: cn("zvk-ui-popover__content", className), "data-align": placementParts.align, "data-side": placementParts.side, "data-state": context.open ? "open" : "closed", hidden: context.open ? undefined : true, style: contentStyle }));
+    if (context.open &&
+        props["aria-label"] === undefined &&
+        props["aria-labelledby"] === undefined &&
+        isDevelopmentEnvironment()) {
+        console.warn("Popover.Content renders role=\"dialog\" and requires an accessible name. Provide aria-label or aria-labelledby.");
+    }
     if (!context.open) {
         return _jsx(Portal, { ...(container === undefined ? {} : { container }), children: content });
     }

package/dist/components/progress/progress.js

@@ -22,8 +22,8 @@ export function getProgressState({ max = 100, value }) {
 export function Progress({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, label, max, ref, showValue, size = "md", tone = "primary", value, ...props }) {
     const state = getProgressState({ max, value });
     const valueText = state.percentage === undefined ? undefined : `${Math.round(state.percentage)}%`;
-    return (_jsxs("div", { className: "liano-progress-group", children: [label ? _jsx("span", { className: "liano-progress__label", children: label }) : null, _jsx("div", { ...props, ref: ref, "aria-label": ariaLabel ?? (typeof label === "string" ? label : undefined), "aria-labelledby": ariaLabelledBy, "aria-valuemax": state.indeterminate ? undefined : state.max, "aria-valuemin": state.indeterminate ? undefined : 0, "aria-valuenow": state.value, className: cn("liano-progress", className), "data-indeterminate": state.indeterminate ? "true" : undefined, "data-size": size, "data-tone": tone, role: "progressbar", style: {
+    return (_jsxs("div", { className: "zvk-ui-progress-group", children: [label ? _jsx("span", { className: "zvk-ui-progress__label", children: label }) : null, _jsx("div", { ...props, ref: ref, "aria-label": ariaLabel ?? (typeof label === "string" ? label : undefined), "aria-labelledby": ariaLabelledBy, "aria-valuemax": state.indeterminate ? undefined : state.max, "aria-valuemin": state.indeterminate ? undefined : 0, "aria-valuenow": state.value, className: cn("zvk-ui-progress", className), "data-indeterminate": state.indeterminate ? "true" : undefined, "data-size": size, "data-tone": tone, role: "progressbar", style: {
                     ...props.style,
-                    "--liano-progress-value": state.percentage === undefined ? undefined : `${state.percentage}%`
-                }, children: _jsx("span", { className: "liano-progress__track", children: _jsx("span", { className: "liano-progress__indicator" }) }) }), showValue && valueText ? _jsx("span", { className: "liano-progress__value", children: valueText }) : null] }));
+                    "--zvk-ui-progress-value": state.percentage === undefined ? undefined : `${state.percentage}%`
+                }, children: _jsx("span", { className: "zvk-ui-progress__track", children: _jsx("span", { className: "zvk-ui-progress__indicator" }) }) }), showValue && valueText ? _jsx("span", { className: "zvk-ui-progress__value", children: valueText }) : null] }));
 }

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

@@ -28,8 +28,8 @@ function NativeRadioItem({ "aria-describedby": ariaDescribedBy, checked, classNa
     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] }));
+    const input = (_jsx("input", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalid ? true : undefined, checked: checked, className: "zvk-ui-radio-group__input", defaultChecked: defaultChecked, disabled: disabled, id: inputId, name: name, onChange: onChange, required: required, type: "radio", value: value }));
+    return (_jsxs("div", { className: cn("zvk-ui-radio-group__item", className), children: [_jsxs("label", { className: "zvk-ui-radio-group__option", children: [input, _jsx("span", { className: "zvk-ui-radio-group__control", "aria-hidden": "true" }), hasRenderableNode(label) ? _jsx("span", { className: "zvk-ui-radio-group__label", children: label }) : null] }), hasRenderableNode(description) ? (_jsx("p", { className: "zvk-ui-radio-group__option-description", id: descriptionId, children: description })) : null] }));
 }
 export function RadioGroupItem({ disabled, value, ...props }) {
     const context = useRadioGroupContext("RadioGroup.Item");
@@ -62,7 +62,7 @@ function RadioGroupRoot({ "aria-describedby": ariaDescribedBy, children, classNa
         ...(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] }) }));
+    return (_jsx(RadioGroupContext.Provider, { value: context, children: _jsxs("fieldset", { ...props, ref: ref, "aria-describedby": describedBy, className: cn("zvk-ui-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: "zvk-ui-radio-group__legend", children: label }), _jsxs("div", { className: "zvk-ui-radio-group__items", children: [optionItems, children] }), hasRenderableNode(description) ? _jsx("p", { className: "zvk-ui-radio-group__description", id: descriptionId, children: description }) : null, hasRenderableNode(error) ? _jsx("p", { className: "zvk-ui-radio-group__error", id: errorId, children: error }) : null] }) }));
 }
 export const RadioGroup = Object.assign(RadioGroupRoot, {
     Item: RadioGroupItem

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

@@ -2,5 +2,5 @@ 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 }));
+    return (_jsx("div", { ...props, ref: ref, className: cn("zvk-ui-responsive-container", className), "data-center": center ? "true" : "false", "data-gutter": gutter, "data-size": size }));
 }

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

@@ -10,13 +10,13 @@ function sizeValue(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) } : {})
+        ...(maxHeight !== undefined ? { "--zvk-ui-scroll-area-max-height": sizeValue(maxHeight) } : {}),
+        ...(maxWidth !== undefined ? { "--zvk-ui-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 }));
+    return (_jsx("div", { ...props, ref: ref, className: cn("zvk-ui-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 }));
+    return (_jsx("div", { ...props, ref: ref, "aria-hidden": "true", className: cn("zvk-ui-scroll-area__scrollbar", className), "data-orientation": orientation }));
 }
 export const ScrollArea = Object.assign(ScrollAreaRoot, {
     ScrollBar

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

@@ -2,23 +2,23 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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) }));
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": props["aria-label"] ?? label, className: cn("zvk-ui-sectioned-sidebar-nav", className) }));
 }
 function SectionedSidebarNavSection({ className, ref, ...props }) {
-    return _jsx("section", { ...props, ref: ref, className: cn("liano-sectioned-sidebar-nav__section", className) });
+    return _jsx("section", { ...props, ref: ref, className: cn("zvk-ui-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) });
+    return _jsx("h2", { ...props, ref: ref, className: cn("zvk-ui-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) });
+    return _jsx("ul", { ...props, ref: ref, className: cn("zvk-ui-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] }));
+    const content = (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "zvk-ui-sectioned-sidebar-nav__item-icon", children: icon })) : null, _jsx("span", { className: "zvk-ui-sectioned-sidebar-nav__item-label", children: props.children }), badge ? _jsx("span", { className: "zvk-ui-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) => {
+        return (_jsx("li", { className: "zvk-ui-sectioned-sidebar-nav__item", children: _jsx("a", { ...anchorProps, ref: ref, "aria-current": active ? "page" : undefined, "aria-disabled": disabled ? true : undefined, className: cn("zvk-ui-sectioned-sidebar-nav__item-control", className), "data-disabled": disabled ? "true" : undefined, "data-state": active ? "active" : "inactive", onClick: (event) => {
                     if (disabled) {
                         event.preventDefault();
                         return;
@@ -27,7 +27,7 @@ function SectionedSidebarNavItem(props) {
                 }, 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 }) }));
+    return (_jsx("li", { className: "zvk-ui-sectioned-sidebar-nav__item", children: _jsx("button", { ...buttonProps, ref: ref, className: cn("zvk-ui-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,

package/dist/components/select/select.js

@@ -7,6 +7,14 @@ 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 nativeSelectStyle = {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    margin: -1,
+    opacity: 0,
+    pointerEvents: "none"
+};
 const defaultContentPositioning = {
     sideOffset: 4,
     collisionPadding: 0,
@@ -35,6 +43,33 @@ function composeRefs(...refs) {
 function getTextLabel(node) {
     return node;
 }
+function getNativeOptionLabel(label, value) {
+    if (typeof label === "string" || typeof label === "number") {
+        return String(label);
+    }
+    return value;
+}
+function collectNativeOptions(children) {
+    const options = [];
+    function visit(node) {
+        React.Children.forEach(node, (child) => {
+            if (!React.isValidElement(child)) {
+                return;
+            }
+            if (child.type === SelectItem && typeof child.props.value === "string") {
+                options.push({
+                    disabled: child.props.disabled === true,
+                    label: getNativeOptionLabel(child.props.children, child.props.value),
+                    value: child.props.value
+                });
+                return;
+            }
+            visit(child.props.children);
+        });
+    }
+    visit(children);
+    return options;
+}
 function SelectRoot({ children, className, defaultOpen = false, defaultValue = null, disabled, invalid, name, onOpenChange, onValueChange, open: openProp, placeholder, placement = "bottom-start", required, size = "md", value, ...props }) {
     const instanceId = React.useId();
     const triggerId = `${instanceId}-trigger`;
@@ -54,6 +89,8 @@ function SelectRoot({ children, className, defaultOpen = false, defaultValue = n
         defaultValue,
         ...(onValueChange ? { onChange: onValueChange } : {})
     });
+    const [nativeInvalid, setNativeInvalid] = React.useState(false);
+    const nativeOptions = React.useMemo(() => collectNativeOptions(children), [children]);
     const [contentPositioning, setContentPositioning] = React.useState(defaultContentPositioning);
     const floating = useFloatingPosition({
         open,
@@ -85,18 +122,34 @@ function SelectRoot({ children, className, defaultOpen = false, defaultValue = n
         setCurrentValue(nextValue);
         setOpen(false);
     }, [setCurrentValue, setOpen]);
-    const selectedLabel = React.useMemo(() => getOrderedItems().find((item) => item.value === currentValue)?.label, [currentValue, getOrderedItems, itemsVersion]);
+    const orderedItems = React.useMemo(() => getOrderedItems(), [getOrderedItems, itemsVersion]);
+    const selectedLabel = React.useMemo(() => orderedItems.find((item) => item.value === currentValue)?.label ??
+        nativeOptions.find((item) => item.value === currentValue)?.label, [currentValue, nativeOptions, orderedItems]);
+    const resolvedInvalid = Boolean(invalid) || nativeInvalid;
+    const nativeValue = currentValue !== null && nativeOptions.some((option) => option.value === currentValue)
+        ? currentValue
+        : "";
     React.useEffect(() => {
         if (wasOpenRef.current && !open) {
             triggerRef.current?.focus();
         }
         wasOpenRef.current = open;
     }, [open]);
+    React.useEffect(() => {
+        if (!required || currentValue !== null) {
+            setNativeInvalid(false);
+        }
+    }, [currentValue, required]);
+    const handleNativeInvalid = React.useCallback((event) => {
+        event.preventDefault();
+        setNativeInvalid(true);
+        triggerRef.current?.focus();
+    }, []);
     const context = React.useMemo(() => ({
         contentId,
         ...(disabled !== undefined ? { disabled } : {}),
         getEnabledItems,
-        ...(invalid !== undefined ? { invalid } : {}),
+        ...(resolvedInvalid ? { invalid: true } : {}),
         open,
         ...(placeholder !== undefined ? { placeholder } : {}),
         registerItem,
@@ -112,8 +165,8 @@ function SelectRoot({ children, className, defaultOpen = false, defaultValue = n
         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, setOpen, 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] }) }));
+    }), [contentId, currentValue, disabled, floating.floatingRef, floating.floatingStyle, floating.referenceRef, getEnabledItems, open, placeholder, registerItem, required, resolvedInvalid, selectValue, selectedLabel, setOpen, triggerId, unregisterItem]);
+    return (_jsx(SelectContext.Provider, { value: context, children: _jsxs("div", { ...props, className: cn("zvk-ui-select", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": resolvedInvalid ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, "data-state": open ? "open" : "closed", children: [name ? (_jsxs("select", { "aria-hidden": "true", disabled: disabled, name: name, onChange: () => undefined, onInvalid: handleNativeInvalid, required: required, style: nativeSelectStyle, tabIndex: -1, value: nativeValue, children: [_jsx("option", { value: "" }), nativeOptions.map((item) => (_jsx("option", { disabled: item.disabled, value: item.value, children: item.label }, item.value)))] })) : null, children] }) }));
 }
 function focusItem(items, index) {
     if (items.length === 0) {
@@ -137,7 +190,7 @@ function SelectTrigger({ children, className, disabled, onClick, onKeyDown, ref,
             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, () => {
+    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("zvk-ui-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);
             }
@@ -158,7 +211,7 @@ function SelectTrigger({ children, className, disabled, onClick, onKeyDown, ref,
 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 }));
+    return (_jsx("span", { ...props, ref: ref, className: cn("zvk-ui-select__value", className), "data-placeholder": displayPlaceholder ? "true" : undefined, children: displayPlaceholder ? placeholder ?? context.placeholder : context.selectedLabel }));
 }
 function SelectContent({ children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, matchTriggerWidth = defaultContentPositioning.matchTriggerWidth, onKeyDown, ref, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
     const context = useSelectContext("Select.Content");
@@ -182,7 +235,7 @@ function SelectContent({ children, className, collisionPadding = defaultContentP
     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) => {
+    const content = (_jsx("div", { ...props, ref: composeRefs(ref, context.floatingRef), "aria-labelledby": context.triggerId, className: cn("zvk-ui-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");
@@ -228,26 +281,26 @@ function SelectItem({ children, className, disabled = false, onClick, onKeyDown,
             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) => {
+    return (_jsxs("div", { ...props, ref: composeRefs(ref, itemRef), "aria-disabled": disabled ? "true" : undefined, "aria-selected": selected ? "true" : "false", className: cn("zvk-ui-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 })] }));
+        }), role: "option", tabIndex: disabled ? undefined : -1, children: [_jsx("span", { className: "zvk-ui-select__item-indicator", "aria-hidden": "true", children: selected ? "✓" : "" }), _jsx("span", { className: "zvk-ui-select__item-label", children: children })] }));
 }
 function SelectGroup({ children, className, ref, ...props }) {
-    return (_jsx("div", { ...props, ref: ref, className: cn("liano-select__group", className), role: "group", children: children }));
+    return (_jsx("div", { ...props, ref: ref, className: cn("zvk-ui-select__group", className), role: "group", children: children }));
 }
 function SelectLabel({ className, ref, ...props }) {
-    return (_jsx("div", { ...props, ref: ref, className: cn("liano-select__label", className) }));
+    return (_jsx("div", { ...props, ref: ref, className: cn("zvk-ui-select__label", className) }));
 }
 function SelectSeparator({ className, ref, ...props }) {
-    return (_jsx("div", { ...props, ref: ref, "aria-hidden": "true", className: cn("liano-select__separator", className), role: "separator" }));
+    return (_jsx("div", { ...props, ref: ref, "aria-hidden": "true", className: cn("zvk-ui-select__separator", className), role: "separator" }));
 }
 function SelectClear({ className, disabled, onClick, ref, type = "button", ...props }) {
     const context = useSelectContext("Select.Clear");
     const isDisabled = Boolean(context.disabled) || Boolean(disabled);
-    return (_jsx("button", { ...props, ref: ref, type: type, className: cn("liano-select__clear", className), "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => {
+    return (_jsx("button", { ...props, ref: ref, type: type, className: cn("zvk-ui-select__clear", className), "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => {
             if (!isDisabled) {
                 context.selectValue(null);
             }

package/dist/components/separator/separator.js

@@ -2,5 +2,5 @@ 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" }));
+    return (_jsx("div", { ...props, ref: ref, "aria-orientation": decorative ? undefined : orientation, className: cn("zvk-ui-separator", className), "data-orientation": orientation, role: decorative ? "none" : "separator" }));
 }

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

@@ -12,7 +12,8 @@ export interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface SheetTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 export interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
     forceMount?: boolean;
@@ -31,16 +32,17 @@ export interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface SheetCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 declare function SheetRoot({ children, className, container, defaultOpen, disableEscapeKeyDown, disableOutsidePointerDown, 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 SheetTrigger({ asChild, className, disabled, onClick, ref, type, ...props }: SheetTriggerProps): React.JSX.Element;
 declare function SheetContent({ children, className, forceMount, 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;
+declare function SheetClose({ asChild, className, disabled, onClick, ref, type, ...props }: SheetCloseProps): React.JSX.Element;
 type SheetComponent = typeof SheetRoot & {
     Close: typeof SheetClose;
     Content: typeof SheetContent;

package/dist/components/sheet/sheet.js

@@ -8,6 +8,7 @@ import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
 import { FocusScope } from "../../internal/focus/index.js";
 import { Portal } from "../../internal/portal/index.js";
 import { lockScroll, unlockScroll } from "../../internal/scroll-lock/index.js";
+import { Slot } from "../../internal/slot/index.js";
 const SheetContext = React.createContext(null);
 function useSheetContext(calledBy) {
     const context = React.useContext(SheetContext);
@@ -69,48 +70,60 @@ function SheetRoot({ children, className, container, defaultOpen = false, disabl
             side,
             titleId: `${instanceId}-title`,
             triggerRef
-        }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-sheet", className), "data-state": open ? "open" : "closed", children: children }) }));
+        }, children: _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-sheet", className), "data-state": open ? "open" : "closed", children: children }) }));
 }
-function SheetTrigger({ className, disabled, onClick, ref, type = "button", ...props }) {
+function SheetTrigger({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const { contentId, open, setOpen, triggerRef } = useSheetContext("Sheet.Trigger");
-    return (_jsx("button", { ...props, ref: composeRefs(ref, triggerRef), type: type, disabled: disabled, "aria-controls": contentId, "aria-expanded": open ? "true" : "false", className: cn("liano-sheet__trigger", className), "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, () => {
-            if (!disabled) {
-                setOpen(true);
-            }
-        }) }));
+    const handleClick = () => {
+        if (!disabled) {
+            setOpen(true);
+        }
+    };
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: composeRefs(ref, triggerRef), "aria-controls": contentId, "aria-disabled": disabled ? true : undefined, "aria-expanded": open ? "true" : "false", className: cn("zvk-ui-sheet__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick), children: props.children }));
+    }
+    return (_jsx("button", { ...props, ref: composeRefs(ref, triggerRef), type: type, disabled: disabled, "aria-controls": contentId, "aria-expanded": open ? "true" : "false", className: cn("zvk-ui-sheet__trigger", className), "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
 }
 function SheetContent({ children, className, forceMount = false, ref, ...props }) {
     const { close, container, contentId, describedBy, disableEscapeKeyDown, disableOutsidePointerDown, labelledBy, open, side } = useSheetContext("Sheet.Content");
     if (!open && !forceMount) {
         return null;
     }
-    const content = (_jsx("div", { ...props, ref: ref, id: contentId, role: "dialog", "aria-modal": "true", "aria-describedby": describedBy, "aria-labelledby": labelledBy, className: cn("liano-sheet__content", className), "data-side": side, "data-state": open ? "open" : "closed", hidden: open ? undefined : true, children: children }));
+    const content = (_jsx("div", { ...props, ref: ref, id: contentId, role: "dialog", "aria-modal": "true", "aria-describedby": describedBy, "aria-labelledby": labelledBy, className: cn("zvk-ui-sheet__content", className), "data-side": side, "data-state": open ? "open" : "closed", hidden: open ? undefined : true, children: children }));
     if (!open) {
-        return (_jsxs(Portal, { ...(container === undefined ? {} : { container }), children: [_jsx("div", { "aria-hidden": "true", className: "liano-sheet__overlay", hidden: true }), content] }));
+        return (_jsxs(Portal, { ...(container === undefined ? {} : { container }), children: [_jsx("div", { "aria-hidden": "true", className: "zvk-ui-sheet__overlay", hidden: true }), content] }));
     }
-    return (_jsxs(Portal, { ...(container === undefined ? {} : { container }), children: [_jsx("div", { "aria-hidden": "true", className: "liano-sheet__overlay" }), _jsx(DismissableLayer, { open: open, disableEscapeKeyDown: disableEscapeKeyDown, disableOutsidePointerDown: disableOutsidePointerDown, onDismiss: close, children: _jsx(FocusScope, { active: open, trapped: true, children: content }) })] }));
+    return (_jsxs(Portal, { ...(container === undefined ? {} : { container }), children: [_jsx("div", { "aria-hidden": "true", className: "zvk-ui-sheet__overlay" }), _jsx(DismissableLayer, { open: open, disableEscapeKeyDown: disableEscapeKeyDown, disableOutsidePointerDown: disableOutsidePointerDown, onDismiss: close, children: _jsx(FocusScope, { active: open, trapped: true, children: content }) })] }));
 }
 function SheetHeader({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-sheet__header", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-sheet__header", className) });
 }
 function SheetTitle({ className, ref, ...props }) {
     const { registerTitle, titleId } = useSheetContext("Sheet.Title");
     const id = props.id ?? titleId;
     React.useLayoutEffect(() => registerTitle(id), [id, registerTitle]);
-    return _jsx("h2", { ...props, ref: ref, id: id, className: cn("liano-sheet__title", className) });
+    return _jsx("h2", { ...props, ref: ref, id: id, className: cn("zvk-ui-sheet__title", className) });
 }
 function SheetDescription({ className, ref, ...props }) {
     const { descriptionId, registerDescription } = useSheetContext("Sheet.Description");
     const id = props.id ?? descriptionId;
     React.useLayoutEffect(() => registerDescription(id), [id, registerDescription]);
-    return _jsx("p", { ...props, ref: ref, id: id, className: cn("liano-sheet__description", className) });
+    return _jsx("p", { ...props, ref: ref, id: id, className: cn("zvk-ui-sheet__description", className) });
 }
 function SheetFooter({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-sheet__footer", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-sheet__footer", className) });
 }
-function SheetClose({ className, onClick, ref, type = "button", ...props }) {
+function SheetClose({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const { close } = useSheetContext("Sheet.Close");
-    return (_jsx("button", { ...props, ref: ref, type: type, className: cn("liano-sheet__close", className), onClick: composeEventHandlers(onClick, close) }));
+    const handleClick = () => {
+        if (!disabled) {
+            close();
+        }
+    };
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: ref, "aria-disabled": disabled ? true : undefined, className: cn("zvk-ui-sheet__close", className), "data-disabled": disabled ? "true" : undefined, onClick: composeEventHandlers(onClick, handleClick), children: props.children }));
+    }
+    return (_jsx("button", { ...props, ref: ref, type: type, disabled: disabled, className: cn("zvk-ui-sheet__close", className), onClick: composeEventHandlers(onClick, handleClick) }));
 }
 export const Sheet = Object.assign(SheetRoot, {
     Close: SheetClose,

package/dist/components/sidebar-shell/sidebar-shell.js

@@ -2,22 +2,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.js";
 function SidebarShellRoot({ className, collapsed = false, ref, side = "left", width = "md", ...props }) {
-    return (_jsx("div", { ...props, ref: ref, className: cn("liano-sidebar-shell", className), "data-collapsed": collapsed ? "true" : "false", "data-side": side, "data-width": width }));
+    return (_jsx("div", { ...props, ref: ref, className: cn("zvk-ui-sidebar-shell", className), "data-collapsed": collapsed ? "true" : "false", "data-side": side, "data-width": width }));
 }
 function SidebarShellSidebar({ className, ref, ...props }) {
-    return _jsx("aside", { ...props, ref: ref, className: cn("liano-sidebar-shell__sidebar", className) });
+    return _jsx("aside", { ...props, ref: ref, className: cn("zvk-ui-sidebar-shell__sidebar", className) });
 }
 function SidebarShellHeader({ className, ref, ...props }) {
-    return _jsx("header", { ...props, ref: ref, className: cn("liano-sidebar-shell__header", className) });
+    return _jsx("header", { ...props, ref: ref, className: cn("zvk-ui-sidebar-shell__header", className) });
 }
 function SidebarShellMain({ className, ref, ...props }) {
-    return _jsx("main", { ...props, ref: ref, className: cn("liano-sidebar-shell__main", className) });
+    return _jsx("main", { ...props, ref: ref, className: cn("zvk-ui-sidebar-shell__main", className) });
 }
 function SidebarShellContent({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-sidebar-shell__content", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-sidebar-shell__content", className) });
 }
 function SidebarShellFooter({ className, ref, ...props }) {
-    return _jsx("footer", { ...props, ref: ref, className: cn("liano-sidebar-shell__footer", className) });
+    return _jsx("footer", { ...props, ref: ref, className: cn("zvk-ui-sidebar-shell__footer", className) });
 }
 export const SidebarShell = Object.assign(SidebarShellRoot, {
     Sidebar: SidebarShellSidebar,

package/dist/components/skeleton/skeleton.js

@@ -12,5 +12,5 @@ export function Skeleton({ animate = true, className, height, ref, rounded = "md
     if (height !== undefined) {
         dimensionStyle.height = toCssSize(height);
     }
-    return (_jsx("span", { ...props, ref: ref, "aria-hidden": props["aria-hidden"] ?? true, className: cn("liano-skeleton", className), "data-animate": animate ? "true" : "false", "data-rounded": rounded, style: { ...dimensionStyle, ...style } }));
+    return (_jsx("span", { ...props, ref: ref, "aria-hidden": props["aria-hidden"] ?? true, className: cn("zvk-ui-skeleton", className), "data-animate": animate ? "true" : "false", "data-rounded": rounded, style: { ...dimensionStyle, ...style } }));
 }

package/dist/components/slider/slider.js

@@ -20,7 +20,7 @@ export function Slider({ "aria-describedby": ariaDescribedBy, className, descrip
     const descriptionId = hasDescription ? `${sliderId}-description` : undefined;
     const errorId = hasError ? `${sliderId}-error` : undefined;
     const describedBy = joinIds(ariaDescribedBy, descriptionId, errorId);
-    const slider = (_jsx("input", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: cn("liano-slider", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, disabled: disabled, id: sliderId, onChange: (event) => {
+    const slider = (_jsx("input", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: cn("zvk-ui-slider", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, disabled: disabled, id: sliderId, onChange: (event) => {
             onValueChange?.(event.currentTarget.valueAsNumber, event);
         }, required: required, type: "range" }));
     if (!hasLabel && !hasDescription && !hasError) {

package/dist/components/spinner/spinner.js

@@ -3,5 +3,5 @@ import * as React from "react";
 import { cn } from "../../utils/cn.js";
 export function Spinner({ className, label, ref, size = "md", tone = "primary", ...props }) {
     const hasLabel = label !== undefined && label !== null && label !== false;
-    return (_jsx("span", { ...props, ref: ref, "aria-hidden": hasLabel ? undefined : true, "aria-live": hasLabel ? "polite" : undefined, className: cn("liano-spinner", className), "data-size": size, "data-tone": tone, role: hasLabel ? "status" : undefined, children: hasLabel ? _jsx("span", { className: "liano-sr-only", children: label }) : null }));
+    return (_jsx("span", { ...props, ref: ref, "aria-hidden": hasLabel ? undefined : true, "aria-live": hasLabel ? "polite" : undefined, className: cn("zvk-ui-spinner", className), "data-size": size, "data-tone": tone, role: hasLabel ? "status" : undefined, children: hasLabel ? _jsx("span", { className: "zvk-ui-sr-only", children: label }) : null }));
 }

package/dist/components/stat/stat.js

@@ -4,5 +4,5 @@ import { cn } from "../../utils/cn.js";
 export function Stat({ className, description, label, ref, size = "md", tone = "neutral", trend, value, ...props }) {
     const showDescription = description !== undefined && description !== null && description !== false;
     const showTrend = trend !== undefined && trend !== null && trend !== false;
-    return (_jsxs("div", { ...props, ref: ref, className: cn("liano-stat", className), "data-size": size, "data-tone": tone, children: [_jsx("p", { className: "liano-stat__label", children: label }), _jsx("div", { className: "liano-stat__value", children: value }), showDescription ? _jsx("p", { className: "liano-stat__description", children: description }) : null, showTrend ? _jsx("div", { className: "liano-stat__trend", children: trend }) : null] }));
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-ui-stat", className), "data-size": size, "data-tone": tone, children: [_jsx("p", { className: "zvk-ui-stat__label", children: label }), _jsx("div", { className: "zvk-ui-stat__value", children: value }), showDescription ? _jsx("p", { className: "zvk-ui-stat__description", children: description }) : null, showTrend ? _jsx("div", { className: "zvk-ui-stat__trend", children: trend }) : null] }));
 }