@zvk/ui 0.1.5 → 0.1.6

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.js

@@ -70,7 +70,7 @@ 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({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const { contentId, open, setOpen, triggerRef } = useSheetContext("Sheet.Trigger");
@@ -80,38 +80,38 @@ function SheetTrigger({ asChild = false, className, disabled, onClick, ref, type
         }
     };
     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("liano-sheet__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick), children: props.children }));
+        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("liano-sheet__trigger", className), "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
+    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({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const { close } = useSheetContext("Sheet.Close");
@@ -121,9 +121,9 @@ function SheetClose({ asChild = false, className, disabled, onClick, ref, type =
         }
     };
     if (asChild) {
-        return (_jsx(Slot, { ...props, ref: ref, "aria-disabled": disabled ? true : undefined, className: cn("liano-sheet__close", className), "data-disabled": disabled ? "true" : undefined, onClick: composeEventHandlers(onClick, handleClick), children: props.children }));
+        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("liano-sheet__close", className), onClick: composeEventHandlers(onClick, handleClick) }));
+    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] }));
 }

package/dist/components/switch/switch.js

@@ -21,7 +21,7 @@ export function Switch({ "aria-describedby": ariaDescribedBy, className, descrip
     const descriptionId = hasDescription ? `${switchId}-description` : undefined;
     const errorId = hasError ? `${switchId}-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-switch__input", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, disabled: disabled, id: switchId, required: required, role: "switch", type: "checkbox" }));
-    const content = (_jsxs(_Fragment, { children: [input, _jsx("span", { className: "liano-switch__track", "aria-hidden": "true", children: _jsx("span", { className: "liano-switch__thumb" }) }), hasLabel ? _jsx("span", { className: "liano-switch__label", children: label }) : null] }));
-    return (_jsxs(Field, { disabled: Boolean(disabled), invalid: invalidState, required: Boolean(required), children: [_jsx("label", { className: cn("liano-switch", 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] }));
+    const input = (_jsx("input", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: "zvk-ui-switch__input", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, disabled: disabled, id: switchId, required: required, role: "switch", type: "checkbox" }));
+    const content = (_jsxs(_Fragment, { children: [input, _jsx("span", { className: "zvk-ui-switch__track", "aria-hidden": "true", children: _jsx("span", { className: "zvk-ui-switch__thumb" }) }), hasLabel ? _jsx("span", { className: "zvk-ui-switch__label", children: label }) : null] }));
+    return (_jsxs(Field, { disabled: Boolean(disabled), invalid: invalidState, required: Boolean(required), children: [_jsx("label", { className: cn("zvk-ui-switch", 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/table/index.d.ts

@@ -1,2 +1,2 @@
 export { Table } from "./table.js";
-export type { TableBodyProps, TableCaptionProps, TableCellProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps } from "./table.js";
+export type { TableBodyProps, TableCaptionProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps } from "./table.js";

package/dist/components/table/table.d.ts

@@ -4,6 +4,9 @@ export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement>
     variant?: "plain" | "surface";
     ref?: React.Ref<HTMLTableElement>;
 }
+export interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
 export interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {
     ref?: React.Ref<HTMLTableCaptionElement>;
 }
@@ -33,7 +36,9 @@ declare function TableFooter({ className, ref, ...props }: TableFooterProps): Re
 declare function TableRow({ className, ref, ...props }: TableRowProps): React.JSX.Element;
 declare function TableHead({ className, ref, scope, ...props }: TableHeadProps): React.JSX.Element;
 declare function TableCell({ className, ref, ...props }: TableCellProps): React.JSX.Element;
+declare function TableContainer({ className, ref, ...props }: TableContainerProps): React.JSX.Element;
 export declare const Table: typeof TableRoot & {
+    Container: typeof TableContainer;
     Caption: typeof TableCaption;
     Header: typeof TableHeader;
     Body: typeof TableBody;

package/dist/components/table/table.js

@@ -2,30 +2,34 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.js";
 function TableRoot({ className, density = "default", ref, variant = "plain", ...props }) {
-    return (_jsx("table", { ...props, ref: ref, className: cn("liano-table", className), "data-density": density, "data-variant": variant }));
+    return (_jsx("table", { ...props, ref: ref, className: cn("zvk-ui-table", className), "data-density": density, "data-variant": variant }));
 }
 function TableCaption({ className, ref, ...props }) {
-    return _jsx("caption", { ...props, ref: ref, className: cn("liano-table__caption", className) });
+    return _jsx("caption", { ...props, ref: ref, className: cn("zvk-ui-table__caption", className) });
 }
 function TableHeader({ className, ref, ...props }) {
-    return _jsx("thead", { ...props, ref: ref, className: cn("liano-table__header", className) });
+    return _jsx("thead", { ...props, ref: ref, className: cn("zvk-ui-table__header", className) });
 }
 function TableBody({ className, ref, ...props }) {
-    return _jsx("tbody", { ...props, ref: ref, className: cn("liano-table__body", className) });
+    return _jsx("tbody", { ...props, ref: ref, className: cn("zvk-ui-table__body", className) });
 }
 function TableFooter({ className, ref, ...props }) {
-    return _jsx("tfoot", { ...props, ref: ref, className: cn("liano-table__footer", className) });
+    return _jsx("tfoot", { ...props, ref: ref, className: cn("zvk-ui-table__footer", className) });
 }
 function TableRow({ className, ref, ...props }) {
-    return _jsx("tr", { ...props, ref: ref, className: cn("liano-table__row", className) });
+    return _jsx("tr", { ...props, ref: ref, className: cn("zvk-ui-table__row", className) });
 }
 function TableHead({ className, ref, scope = "col", ...props }) {
-    return _jsx("th", { ...props, ref: ref, scope: scope, className: cn("liano-table__head", className) });
+    return _jsx("th", { ...props, ref: ref, scope: scope, className: cn("zvk-ui-table__head", className) });
 }
 function TableCell({ className, ref, ...props }) {
-    return _jsx("td", { ...props, ref: ref, className: cn("liano-table__cell", className) });
+    return _jsx("td", { ...props, ref: ref, className: cn("zvk-ui-table__cell", className) });
+}
+function TableContainer({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-table-container", className) });
 }
 export const Table = Object.assign(TableRoot, {
+    Container: TableContainer,
     Caption: TableCaption,
     Header: TableHeader,
     Body: TableBody,

package/dist/components/tabs/tabs.js

@@ -127,11 +127,11 @@ function TabsRoot({ children, className, defaultValue = "", disabled = false, re
             setValue: setCurrentValue,
             unregisterTrigger,
             value: currentValue
-        }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-tabs", className), "data-orientation": orientation, "data-state": activationMode, "data-disabled": disabled ? "true" : undefined, children: children }) }));
+        }, children: _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-tabs", className), "data-orientation": orientation, "data-state": activationMode, "data-disabled": disabled ? "true" : undefined, children: children }) }));
 }
 function TabsList({ className, ref, ...props }) {
     const context = useTabsContext("Tabs.List");
-    return (_jsx("div", { ...props, ref: ref, role: "tablist", className: cn("liano-tabs__list", className), "aria-orientation": context.orientation === "vertical" ? "vertical" : "horizontal" }));
+    return (_jsx("div", { ...props, ref: ref, role: "tablist", className: cn("zvk-ui-tabs__list", className), "aria-orientation": context.orientation === "vertical" ? "vertical" : "horizontal" }));
 }
 function TabsTrigger({ className, onClick, onKeyDown, ref, value, ...props }) {
     const context = useTabsContext("Tabs.Trigger");
@@ -200,7 +200,7 @@ function TabsTrigger({ className, onClick, onKeyDown, ref, value, ...props }) {
                 else if (ref) {
                     ref.current = node;
                 }
-            }, id: triggerId, role: "tab", "aria-controls": contentId, "aria-selected": isSelected, className: cn("liano-tabs__trigger", className), "data-state": isSelected ? "active" : "inactive", "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => {
+            }, id: triggerId, role: "tab", "aria-controls": contentId, "aria-selected": isSelected, className: cn("zvk-ui-tabs__trigger", className), "data-state": isSelected ? "active" : "inactive", "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => {
                 if (!isDisabled && !context.disabled) {
                     context.setValue(value);
                 }
@@ -224,7 +224,7 @@ function TabsContent({ className, forceMount = false, ref, value, ...props }) {
     if (!forceMount && !isSelected) {
         return null;
     }
-    return (_jsx(TabsTriggerContext.Provider, { value: { value }, children: _jsx("div", { ...props, id: props.id ?? contentId, ref: ref, role: "tabpanel", "aria-labelledby": triggerId, className: cn("liano-tabs__content", className), "data-state": isSelected ? "open" : "closed", hidden: !isSelected ? true : undefined }) }));
+    return (_jsx(TabsTriggerContext.Provider, { value: { value }, children: _jsx("div", { ...props, id: props.id ?? contentId, ref: ref, role: "tabpanel", "aria-labelledby": triggerId, className: cn("zvk-ui-tabs__content", className), "data-state": isSelected ? "open" : "closed", hidden: !isSelected ? true : undefined }) }));
 }
 export const Tabs = Object.assign(TabsRoot, {
     List: TabsList,

package/dist/components/tabs-with-sidebar/tabs-with-sidebar.js

@@ -4,13 +4,13 @@ import * as React from "react";
 import { Tabs } from "../tabs/tabs.js";
 import { cn } from "../../utils/cn.js";
 function TabsWithSidebarRoot({ className, orientation = "vertical", ref, sidebarWidth = "md", ...props }) {
-    return (_jsx(Tabs, { ...props, ...(ref ? { ref } : {}), className: cn("liano-tabs-with-sidebar", className), "data-sidebar-width": sidebarWidth, orientation: orientation }));
+    return (_jsx(Tabs, { ...props, ...(ref ? { ref } : {}), className: cn("zvk-ui-tabs-with-sidebar", className), "data-sidebar-width": sidebarWidth, orientation: orientation }));
 }
 function TabsWithSidebarSidebar({ className, ref, sidebarWidth = "md", ...props }) {
-    return (_jsx("div", { ...props, ref: ref, className: cn("liano-tabs-with-sidebar__sidebar", className), "data-sidebar-width": sidebarWidth }));
+    return (_jsx("div", { ...props, ref: ref, className: cn("zvk-ui-tabs-with-sidebar__sidebar", className), "data-sidebar-width": sidebarWidth }));
 }
 function TabsWithSidebarPanel({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-tabs-with-sidebar__panel", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-tabs-with-sidebar__panel", className) });
 }
 export const TabsWithSidebar = Object.assign(TabsWithSidebarRoot, {
     Sidebar: TabsWithSidebarSidebar,

package/dist/components/textarea/textarea.js

@@ -20,7 +20,7 @@ export function Textarea({ "aria-describedby": ariaDescribedBy, className, descr
     const descriptionId = hasDescription ? `${inputId}-description` : undefined;
     const errorId = hasError ? `${inputId}-error` : undefined;
     const describedBy = joinIds(ariaDescribedBy, descriptionId, errorId);
-    const textarea = (_jsx("textarea", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: cn("liano-textarea", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, disabled: disabled, id: inputId, required: required, rows: rows }));
+    const textarea = (_jsx("textarea", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: cn("zvk-ui-textarea", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, disabled: disabled, id: inputId, required: required, rows: rows }));
     if (!hasLabel && !hasDescription && !hasError) {
         return textarea;
     }

package/dist/components/toast/toast.js

@@ -58,7 +58,7 @@ function renderToastControl(input) {
     return input;
 }
 export function ToastViewport({ className, placement = "top-right", ref, ...props }) {
-    return (_jsx("div", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Notifications", className: cn("liano-toast-viewport", className), "data-placement": placement, role: "region" }));
+    return (_jsx("div", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Notifications", className: cn("zvk-ui-toast-viewport", className), "data-placement": placement, role: "region" }));
 }
 export function createToastController() {
     const listeners = new Set();
@@ -131,7 +131,7 @@ export function Toaster({ controller = toast, expand: _expand, offset, position
         ? style
         : {
             ...style,
-            "--liano-toast-viewport-inset": typeof offset === "number" ? `${offset}px` : offset
+            "--zvk-ui-toast-viewport-inset": typeof offset === "number" ? `${offset}px` : offset
         };
     return (_jsx(ToastProvider, { ...props, controller: controller, placement: placement, ...(offsetStyle === undefined ? {} : { style: offsetStyle }) }));
 }
@@ -143,23 +143,23 @@ function ToastProviderItem({ onDismiss, toast }) {
         const timeout = window.setTimeout(() => onDismiss(toast.id), toast.duration);
         return () => window.clearTimeout(timeout);
     }, [onDismiss, toast.duration, toast.id, toast.version]);
-    return (_jsxs(Toast, { tone: toast.tone, children: [(toast.title || toast.description) && (_jsxs("div", { className: "liano-toast__content", children: [toast.title && _jsx(Toast.Title, { children: toast.title }), toast.description && _jsx(Toast.Description, { children: toast.description })] })), (toast.action || toast.cancel) && (_jsxs("div", { className: "liano-toast__controls", children: [renderToastControl(toast.action), renderToastControl(toast.cancel)] })), _jsx(Toast.Close, { "aria-label": "Dismiss notification", onClick: () => onDismiss(toast.id) })] }));
+    return (_jsxs(Toast, { tone: toast.tone, children: [(toast.title || toast.description) && (_jsxs("div", { className: "zvk-ui-toast__content", children: [toast.title && _jsx(Toast.Title, { children: toast.title }), toast.description && _jsx(Toast.Description, { children: toast.description })] })), (toast.action || toast.cancel) && (_jsxs("div", { className: "zvk-ui-toast__controls", children: [renderToastControl(toast.action), renderToastControl(toast.cancel)] })), _jsx(Toast.Close, { "aria-label": "Dismiss notification", onClick: () => onDismiss(toast.id) })] }));
 }
 function ToastRoot({ className, ref, role, tone = "neutral", ...props }) {
     const toastType = toastTypeFromTone(tone);
-    return (_jsx("div", { ...props, ref: ref, className: cn("liano-toast", className), "data-sonner-toast": "", "data-tone": tone, "data-type": toastType, "data-visible": "true", role: role ?? (tone === "destructive" ? "alert" : "status") }));
+    return (_jsx("div", { ...props, ref: ref, className: cn("zvk-ui-toast", className), "data-sonner-toast": "", "data-tone": tone, "data-type": toastType, "data-visible": "true", role: role ?? (tone === "destructive" ? "alert" : "status") }));
 }
 function ToastTitle({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-toast__title", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-toast__title", className) });
 }
 function ToastDescription({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-toast__description", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-toast__description", className) });
 }
 function ToastAction({ className, ref, type = "button", ...props }) {
-    return _jsx("button", { ...props, ref: ref, className: cn("liano-toast__action", className), type: type });
+    return _jsx("button", { ...props, ref: ref, className: cn("zvk-ui-toast__action", className), type: type });
 }
 function ToastClose({ children = "×", className, ref, type = "button", ...props }) {
-    return (_jsx("button", { ...props, ref: ref, className: cn("liano-toast__close", className), type: type, children: children }));
+    return (_jsx("button", { ...props, ref: ref, className: cn("zvk-ui-toast__close", className), type: type, children: children }));
 }
 export const Toast = Object.assign(ToastRoot, {
     Title: ToastTitle,

package/dist/components/toggle/toggle.js

@@ -10,7 +10,7 @@ export function Toggle({ "aria-pressed": ariaPressed, className, defaultPressed
         defaultValue: defaultPressed,
         ...(onPressedChange ? { onChange: onPressedChange } : {})
     });
-    return (_jsx("button", { ...props, ref: ref, "aria-pressed": ariaPressed ?? currentPressed, className: cn("liano-toggle", className), "data-disabled": disabled ? "true" : undefined, "data-size": size, "data-state": currentPressed ? "on" : "off", "data-variant": variant, disabled: disabled, onClick: composeEventHandlers(onClick, () => {
+    return (_jsx("button", { ...props, ref: ref, "aria-pressed": ariaPressed ?? currentPressed, className: cn("zvk-ui-toggle", className), "data-disabled": disabled ? "true" : undefined, "data-size": size, "data-state": currentPressed ? "on" : "off", "data-variant": variant, disabled: disabled, onClick: composeEventHandlers(onClick, () => {
             if (!disabled) {
                 setPressed((value) => !value);
             }

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

@@ -50,7 +50,7 @@ function ToggleGroupRoot(props) {
         toggleValue
     }), [disabled, isPressed, orientation, toggleValue]);
     const { children: _children, className: _className, defaultValue: _defaultValue, disabled: _disabled, onValueChange: _onValueChange, orientation: _orientation, type: _type, value: _value, ...domProps } = props;
-    return (_jsx(ToggleGroupContext.Provider, { value: context, children: _jsx("div", { ...domProps, className: cn("liano-toggle-group", className), "data-disabled": disabled ? "true" : undefined, "data-orientation": orientation, role: "group", children: children }) }));
+    return (_jsx(ToggleGroupContext.Provider, { value: context, children: _jsx("div", { ...domProps, className: cn("zvk-ui-toggle-group", className), "data-disabled": disabled ? "true" : undefined, "data-orientation": orientation, role: "group", children: children }) }));
 }
 function ToggleGroupItem({ disabled, onClick, value, ...props }) {
     const context = useToggleGroupContext("ToggleGroup.Item");

package/dist/components/tooltip/tooltip.d.ts

@@ -41,7 +41,7 @@ export interface TooltipContentProps extends React.HTMLAttributes<HTMLSpanElemen
 declare function TooltipProvider({ children, delayDuration }: TooltipProviderProps): React.JSX.Element;
 declare function TooltipRoot({ children, defaultOpen, delay, disabled, onOpenChange, open: openProp, placement }: TooltipRootProps): React.JSX.Element;
 declare function TooltipTrigger({ children, asChild: _asChild }: TooltipTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function TooltipContent({ align, alignOffset: _alignOffset, children, className, collisionPadding, container, forceMount, placement, ref, side, sideOffset, style, ...props }: TooltipContentProps): React.JSX.Element | null;
+declare function TooltipContent({ align, alignOffset, children, className, collisionPadding, container, forceMount, placement, ref, side, sideOffset, style, ...props }: TooltipContentProps): React.JSX.Element | null;
 declare function TooltipWrapper({ children, content, delay, disabled, placement }: TooltipProps): React.JSX.Element;
 export declare const Tooltip: typeof TooltipWrapper & {
     Content: typeof TooltipContent;