@zvk/ui 0.1.5 → 0.1.6

package/dist/components/form/form.js

@@ -15,7 +15,7 @@ function joinIds(ids) {
     return value.length > 0 ? value : undefined;
 }
 export function Form({ className, ref, ...props }) {
-    return _jsx("form", { ...props, ref: ref, className: cn("liano-form", className) });
+    return _jsx("form", { ...props, ref: ref, className: cn("zvk-ui-form", className) });
 }
 export function FormField({ children, className, disabled, id, invalid, required, ...props }) {
     const generatedId = React.useId();
@@ -36,14 +36,14 @@ export function FormField({ children, className, disabled, id, invalid, required
         registerDescription,
         unregisterDescription
     }), [controlId, descriptionIds, disabled, invalid, registerDescription, required, unregisterDescription]);
-    return (_jsx(FormFieldContext.Provider, { value: context, children: _jsx("div", { ...props, className: cn("liano-form-field", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalid ? "true" : undefined, "data-required": required ? "true" : undefined, children: children }) }));
+    return (_jsx(FormFieldContext.Provider, { value: context, children: _jsx("div", { ...props, className: cn("zvk-ui-form-field", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalid ? "true" : undefined, "data-required": required ? "true" : undefined, children: children }) }));
 }
 export function FormItem({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-form-item", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-form-item", className) });
 }
 export function FormLabel({ className, htmlFor, ref, ...props }) {
     const context = useFormFieldContext("FormLabel");
-    return _jsx("label", { ...props, ref: ref, className: cn("liano-form-label", className), htmlFor: htmlFor ?? context.controlId });
+    return _jsx("label", { ...props, ref: ref, className: cn("zvk-ui-form-label", className), htmlFor: htmlFor ?? context.controlId });
 }
 export function FormControl({ children }) {
     const context = useFormFieldContext("FormControl");
@@ -81,8 +81,8 @@ function FormText({ className, id, ref, role, textRole, ...props }) {
     return _jsx("p", { ...props, ref: ref, id: textId, role: role, className: className });
 }
 export function FormDescription({ className, ...props }) {
-    return _jsx(FormText, { ...props, className: cn("liano-form-description", className), textRole: "FormDescription" });
+    return _jsx(FormText, { ...props, className: cn("zvk-ui-form-description", className), textRole: "FormDescription" });
 }
 export function FormMessage({ className, role = "alert", ...props }) {
-    return _jsx(FormText, { ...props, className: cn("liano-form-message", className), role: role, textRole: "FormMessage" });
+    return _jsx(FormText, { ...props, className: cn("zvk-ui-form-message", className), role: role, textRole: "FormMessage" });
 }

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

@@ -29,7 +29,7 @@ export interface HoverCardContentProps extends React.HTMLAttributes<HTMLDivEleme
 }
 declare function HoverCardRoot({ children, closeDelay, defaultOpen, disabled, onOpenChange, open: openProp, openDelay, placement }: HoverCardProps): React.JSX.Element;
 declare function HoverCardTrigger({ children, asChild: _asChild }: HoverCardTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function HoverCardContent({ align, alignOffset: _alignOffset, children, className, collisionPadding, container, forceMount, id, onBlur, onFocus, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, placement, ref, side, sideOffset, style, ...props }: HoverCardContentProps): React.JSX.Element | null;
+declare function HoverCardContent({ align, alignOffset, children, className, collisionPadding, container, forceMount, id, onBlur, onFocus, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, placement, ref, side, sideOffset, style, ...props }: HoverCardContentProps): React.JSX.Element | null;
 export declare const HoverCard: typeof HoverCardRoot & {
     Trigger: typeof HoverCardTrigger;
     Content: typeof HoverCardContent;

package/dist/components/hover-card/hover-card.js

@@ -10,6 +10,7 @@ import { cn } from "../../utils/cn.js";
 import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
 const defaultContentPositioning = {
     sideOffset: 8,
+    alignOffset: 0,
     collisionPadding: 0
 };
 const HoverCardContext = React.createContext(null);
@@ -58,6 +59,7 @@ function HoverCardRoot({ children, closeDelay = 300, defaultOpen = false, disabl
         open,
         placement: contentPositioning.placement ?? placement,
         offset: contentPositioning.sideOffset,
+        alignmentOffset: contentPositioning.alignOffset,
         collisionPadding: contentPositioning.collisionPadding,
         flip: true,
         shift: true
@@ -222,7 +224,7 @@ function HoverCardTrigger({ children, asChild: _asChild = false }) {
         "aria-describedby": joinIds(typeof childAriaDescribedBy === "string" ? childAriaDescribedBy : undefined, context.open ? context.contentId : undefined),
         "aria-expanded": context.open,
         "aria-haspopup": "dialog",
-        className: cn("liano-hover-card__trigger", childClassName),
+        className: cn("zvk-ui-hover-card__trigger", childClassName),
         "data-state": context.open ? "open" : "closed",
         onBlur: composeEventHandlers(childProps.onBlur, (event) => {
             context.closeAfterFocusLeaves(event.relatedTarget);
@@ -234,7 +236,7 @@ function HoverCardTrigger({ children, asChild: _asChild = false }) {
         onPointerLeave: composeEventHandlers(childProps.onPointerLeave, context.closeWithDelay)
     });
 }
-function HoverCardContent({ align, alignOffset: _alignOffset, children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, id, onBlur, onFocus, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, placement, ref, side, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
+function HoverCardContent({ align, alignOffset = defaultContentPositioning.alignOffset, children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, id, onBlur, onFocus, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, placement, ref, side, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
     const context = useHoverCardContext("HoverCard.Content");
     const contentId = id ?? context.contentId;
     const placementParts = getPlacementParts(context.resolvedPlacement);
@@ -244,14 +246,15 @@ function HoverCardContent({ align, alignOffset: _alignOffset, children, classNam
         setContentPositioning({
             ...(resolvedPlacement === undefined ? {} : { placement: resolvedPlacement }),
             sideOffset,
+            alignOffset,
             collisionPadding
         });
         return () => setContentPositioning(defaultContentPositioning);
-    }, [align, collisionPadding, placement, setContentPositioning, side, sideOffset]);
+    }, [align, alignOffset, collisionPadding, placement, setContentPositioning, side, sideOffset]);
     if (!context.open && !forceMount) {
         return null;
     }
-    const content = (_jsx("div", { ...props, ref: composeRefs(ref, context.floatingRef), id: contentId, role: "dialog", className: cn("liano-hover-card__content", className), "data-align": placementParts.align, "data-side": placementParts.side, "data-state": context.open ? "open" : "closed", hidden: context.open ? undefined : true, onBlur: composeEventHandlers(onBlur, (event) => {
+    const content = (_jsx("div", { ...props, ref: composeRefs(ref, context.floatingRef), id: contentId, role: "dialog", className: cn("zvk-ui-hover-card__content", className), "data-align": placementParts.align, "data-side": placementParts.side, "data-state": context.open ? "open" : "closed", hidden: context.open ? undefined : true, onBlur: composeEventHandlers(onBlur, (event) => {
             context.closeAfterFocusLeaves(event.relatedTarget);
         }), onFocus: composeEventHandlers(onFocus, context.openImmediately), onMouseEnter: composeEventHandlers(onMouseEnter, context.cancelClose), onMouseLeave: composeEventHandlers(onMouseLeave, context.closeWithDelay), onPointerEnter: composeEventHandlers(onPointerEnter, context.cancelClose), onPointerLeave: composeEventHandlers(onPointerLeave, context.closeWithDelay), style: { ...context.floatingStyle, ...style }, children: children }));
     if (!context.open) {

package/dist/components/icon-button/icon-button.js

@@ -2,7 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Spinner } from "../spinner/spinner.js";
 import { cn } from "../../utils/cn.js";
+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";
+}
 export function IconButton({ children, className, disabled, loading = false, ref, size = "md", type = "button", variant = "secondary", ...props }) {
     const isDisabled = disabled || loading;
-    return (_jsx("button", { ...props, ref: ref, "aria-busy": loading ? true : undefined, className: cn("liano-icon-button", className), "data-disabled": isDisabled ? "true" : undefined, "data-loading": loading ? "true" : undefined, "data-size": size, "data-variant": variant, disabled: isDisabled, type: type, children: loading ? _jsx(Spinner, { size: "sm" }) : children }));
+    const hasAccessibleName = props["aria-label"] !== undefined || props["aria-labelledby"] !== undefined;
+    if (!hasAccessibleName && isDevelopmentEnvironment()) {
+        console.warn("IconButton requires an accessible name. Provide aria-label or aria-labelledby.");
+    }
+    return (_jsx("button", { ...props, ref: ref, "aria-busy": loading ? true : undefined, className: cn("zvk-ui-icon-button", className), "data-disabled": isDisabled ? "true" : undefined, "data-loading": loading ? "true" : undefined, "data-size": size, "data-variant": variant, disabled: isDisabled, type: type, children: loading ? _jsx(Spinner, { size: "sm" }) : children }));
 }

package/dist/components/index.d.ts

@@ -1,7 +1,7 @@
 export { Accordion } from "./accordion/index.js";
 export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, AccordionType, AccordionValue } from "./accordion/index.js";
 export { Alert } from "./alert/index.js";
-export type { AlertDescriptionProps, AlertProps, AlertRoot, AlertTitleProps, AlertTone } from "./alert/index.js";
+export type { AlertActionProps, AlertDescriptionProps, AlertProps, AlertRoot, AlertTitleProps, AlertTone } from "./alert/index.js";
 export { Avatar } from "./avatar/index.js";
 export type { AvatarProps, AvatarShape, AvatarSize } from "./avatar/index.js";
 export { Badge } from "./badge/index.js";
@@ -11,7 +11,7 @@ export type { BreadcrumbsItemProps, BreadcrumbsProps } from "./breadcrumbs/index
 export { Button } from "./button/index.js";
 export type { ButtonProps, ButtonSize, ButtonVariant } from "./button/index.js";
 export { Card } from "./card/index.js";
-export type { CardDescriptionProps, CardPadding, CardProps, CardSlotProps, CardTitleProps, CardVariant } from "./card/index.js";
+export type { CardActionProps, CardDescriptionProps, CardPadding, CardProps, CardSlotProps, CardTitleProps, CardVariant } from "./card/index.js";
 export { Calendar } from "./calendar/index.js";
 export type { CalendarClassNames, CalendarMode, CalendarNativeProps, CalendarProps, CalendarSingleProps } from "./calendar/index.js";
 export { Carousel } from "./carousel/index.js";
@@ -91,7 +91,7 @@ export type { StatProps, StatSize, StatTone } from "./stat/index.js";
 export { Switch } from "./switch/index.js";
 export type { SwitchProps, SwitchSize } from "./switch/index.js";
 export { Table } from "./table/index.js";
-export type { TableBodyProps, TableCaptionProps, TableCellProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps } from "./table/index.js";
+export type { TableBodyProps, TableCaptionProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps } from "./table/index.js";
 export { Tabs } from "./tabs/index.js";
 export type { TabsActivationMode, TabsContentProps, TabsListProps, TabsOrientation, TabsProps, TabsTriggerProps } from "./tabs/index.js";
 export { TabsWithSidebar } from "./tabs-with-sidebar/index.js";

package/dist/components/input/input.js

@@ -19,7 +19,7 @@ export function Input({ "aria-describedby": ariaDescribedBy, className, descript
     const descriptionId = hasDescription ? `${inputId}-description` : undefined;
     const errorId = hasError ? `${inputId}-error` : undefined;
     const describedBy = joinIds(ariaDescribedBy, descriptionId, errorId);
-    const input = (_jsx("input", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: cn("liano-input", 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 }));
+    const input = (_jsx("input", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: cn("zvk-ui-input", 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 }));
     if (!hasLabel && !hasDescription && !hasError) {
         return input;
     }

package/dist/components/label/label.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 Label({ children, className, disabled, ref, required, size = "md", ...props }) {
-    return (_jsx("label", { ...props, ref: ref, className: cn("liano-label", className), "data-disabled": disabled ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, children: children }));
+    return (_jsx("label", { ...props, ref: ref, className: cn("zvk-ui-label", className), "data-disabled": disabled ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, children: children }));
 }

package/dist/components/menubar/menubar.js

@@ -79,7 +79,7 @@ function MenubarRoot({ children, className, defaultValue, onKeyDown, onValueChan
         setOpenValue,
         unregisterTrigger
     }), [getTriggers, openValue, registerTrigger, setOpenValue, unregisterTrigger]);
-    return (_jsx(MenubarContext.Provider, { value: contextValue, children: _jsx("div", { ...props, ref: ref, role: "menubar", className: cn("liano-menubar", className), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+    return (_jsx(MenubarContext.Provider, { value: contextValue, children: _jsx("div", { ...props, ref: ref, role: "menubar", className: cn("zvk-ui-menubar", className), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
                 const triggers = getTriggers();
                 const index = activeIndex(triggers);
                 if (event.key === "ArrowRight") {
@@ -159,7 +159,7 @@ function MenubarTrigger({ asChild = false, children, className, disabled, onClic
         "aria-disabled": disabled ? true : undefined,
         "aria-expanded": menu.open,
         "aria-haspopup": "menu",
-        className: cn("liano-menubar__trigger", className),
+        className: cn("zvk-ui-menubar__trigger", className),
         "data-disabled": disabled ? "true" : undefined,
         "data-state": menu.open ? "open" : "closed",
         onClick: composeEventHandlers(onClick, handleClick),
@@ -170,7 +170,7 @@ function MenubarTrigger({ asChild = false, children, className, disabled, onClic
     }
     return (_jsx("button", { ...props, ref: (node) => {
             setComposedRef(triggerRef, ref, node);
-        }, id: menu.triggerId, type: type, role: "menuitem", disabled: disabled, "aria-controls": menu.contentId, "aria-expanded": menu.open ? "true" : "false", "aria-haspopup": "menu", className: cn("liano-menubar__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": menu.open ? "open" : "closed", onClick: triggerProps.onClick, onKeyDown: triggerProps.onKeyDown, children: children }));
+        }, id: menu.triggerId, type: type, role: "menuitem", disabled: disabled, "aria-controls": menu.contentId, "aria-expanded": menu.open ? "true" : "false", "aria-haspopup": "menu", className: cn("zvk-ui-menubar__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": menu.open ? "open" : "closed", onClick: triggerProps.onClick, onKeyDown: triggerProps.onKeyDown, children: children }));
 }
 function MenubarContent({ align, alignOffset: _alignOffset, children, className, onKeyDown, ref, side, sideOffset: _sideOffset, ...props }) {
     const menubar = useMenubarContext("Menubar.Content");
@@ -180,7 +180,7 @@ function MenubarContent({ align, alignOffset: _alignOffset, children, className,
     if (!menu.open) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: menu.open, onDismiss: () => menubar.setOpenValue(undefined), children: _jsx("div", { ...props, ref: ref, id: menu.contentId, role: "menu", "aria-label": menu.label, "aria-labelledby": menu.triggerId, className: cn("liano-menubar__content", className), "data-align": contentPlacementParts.align, "data-side": contentPlacementParts.side, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: menu.open, onDismiss: () => menubar.setOpenValue(undefined), children: _jsx("div", { ...props, ref: ref, id: menu.contentId, role: "menu", "aria-label": menu.label, "aria-labelledby": menu.triggerId, className: cn("zvk-ui-menubar__content", className), "data-align": contentPlacementParts.align, "data-side": contentPlacementParts.side, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
                     const items = menu.getItems();
                     const index = activeIndex(items);
                     if (event.key === "ArrowDown") {
@@ -228,7 +228,7 @@ function MenubarItem({ asChild = false, children, className, disabled, onClick,
         },
         role: "menuitem",
         "aria-disabled": disabled ? true : undefined,
-        className: cn("liano-menubar__item", className),
+        className: cn("zvk-ui-menubar__item", className),
         "data-disabled": disabled ? "true" : undefined,
         onClick: composeEventHandlers(onClick, select),
         onKeyDown: composeEventHandlers(onKeyDown, (event) => {
@@ -282,7 +282,7 @@ function MenubarCheckboxItem({ asChild = false, checked, children, className, de
         role: "menuitemcheckbox",
         "aria-checked": currentChecked,
         "aria-disabled": disabled ? true : undefined,
-        className: cn("liano-menubar__item", "liano-menubar__checkbox-item", className),
+        className: cn("zvk-ui-menubar__item", "zvk-ui-menubar__checkbox-item", className),
         "data-checked": currentChecked ? "true" : undefined,
         "data-disabled": disabled ? "true" : undefined,
         onClick: composeEventHandlers(onClick, select),
@@ -298,7 +298,7 @@ function MenubarCheckboxItem({ asChild = false, checked, children, className, de
     }
     return (_jsxs("button", { ...props, ref: (node) => {
             setComposedRef(itemRef, ref, node);
-        }, type: type, role: "menuitemcheckbox", disabled: disabled, "aria-checked": itemProps["aria-checked"], "aria-disabled": itemProps["aria-disabled"], className: itemProps.className, "data-checked": itemProps["data-checked"], "data-disabled": itemProps["data-disabled"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: [_jsx("span", { className: "liano-menubar__item-indicator", "aria-hidden": "true", children: currentChecked ? "✓" : "" }), _jsx("span", { className: "liano-menubar__item-label", children: children })] }));
+        }, type: type, role: "menuitemcheckbox", disabled: disabled, "aria-checked": itemProps["aria-checked"], "aria-disabled": itemProps["aria-disabled"], className: itemProps.className, "data-checked": itemProps["data-checked"], "data-disabled": itemProps["data-disabled"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: [_jsx("span", { className: "zvk-ui-menubar__item-indicator", "aria-hidden": "true", children: currentChecked ? "✓" : "" }), _jsx("span", { className: "zvk-ui-menubar__item-label", children: children })] }));
 }
 function MenubarRadioItem({ asChild = false, checked = false, children, className, disabled, onClick, onKeyDown, onSelect, ref, type = "button", ...props }) {
     const menubar = useMenubarContext("Menubar.RadioItem");
@@ -331,7 +331,7 @@ function MenubarRadioItem({ asChild = false, checked = false, children, classNam
         role: "menuitemradio",
         "aria-checked": checked,
         "aria-disabled": disabled ? true : undefined,
-        className: cn("liano-menubar__item", "liano-menubar__radio-item", className),
+        className: cn("zvk-ui-menubar__item", "zvk-ui-menubar__radio-item", className),
         "data-checked": checked ? "true" : undefined,
         "data-disabled": disabled ? "true" : undefined,
         onClick: composeEventHandlers(onClick, select),
@@ -347,16 +347,16 @@ function MenubarRadioItem({ asChild = false, checked = false, children, classNam
     }
     return (_jsxs("button", { ...props, ref: (node) => {
             setComposedRef(itemRef, ref, node);
-        }, type: type, role: "menuitemradio", disabled: disabled, "aria-checked": itemProps["aria-checked"], "aria-disabled": itemProps["aria-disabled"], className: itemProps.className, "data-checked": itemProps["data-checked"], "data-disabled": itemProps["data-disabled"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: [_jsx("span", { className: "liano-menubar__item-indicator", "aria-hidden": "true", children: checked ? "●" : "" }), _jsx("span", { className: "liano-menubar__item-label", children: children })] }));
+        }, type: type, role: "menuitemradio", disabled: disabled, "aria-checked": itemProps["aria-checked"], "aria-disabled": itemProps["aria-disabled"], className: itemProps.className, "data-checked": itemProps["data-checked"], "data-disabled": itemProps["data-disabled"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: [_jsx("span", { className: "zvk-ui-menubar__item-indicator", "aria-hidden": "true", children: checked ? "●" : "" }), _jsx("span", { className: "zvk-ui-menubar__item-label", children: children })] }));
 }
 function MenubarSeparator({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("liano-menubar__separator", className) });
+    return _jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("zvk-ui-menubar__separator", className) });
 }
 function MenubarLabel({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-menubar__label", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-menubar__label", className) });
 }
 function MenubarShortcut({ className, ref, ...props }) {
-    return _jsx("span", { ...props, ref: ref, className: cn("liano-menubar__shortcut", className) });
+    return _jsx("span", { ...props, ref: ref, className: cn("zvk-ui-menubar__shortcut", className) });
 }
 export const Menubar = Object.assign(MenubarRoot, {
     CheckboxItem: MenubarCheckboxItem,

package/dist/components/pagination/pagination.js

@@ -48,45 +48,45 @@ export function getPaginationRange({ page, pageCount, siblingCount = 1, boundary
 function renderPrevious({ hasHrefMode, page, label, pageCount, onPageChange, getPageHref }) {
     const targetPage = page - 1;
     if (hasHrefMode && targetPage >= 1) {
-        return (_jsx("a", { className: "liano-pagination__item", href: getPageHref?.(targetPage), children: label }));
+        return (_jsx("a", { className: "zvk-ui-pagination__item", href: getPageHref?.(targetPage), children: label }));
     }
     if (hasHrefMode && targetPage < 1) {
-        return (_jsx("span", { className: "liano-pagination__item liano-pagination__item--disabled", "aria-hidden": "true", children: label }));
+        return (_jsx("span", { className: "zvk-ui-pagination__item zvk-ui-pagination__item--disabled", "aria-hidden": "true", children: label }));
     }
-    return (_jsx("button", { className: "liano-pagination__item", disabled: targetPage < 1, onClick: () => onPageChange?.(Math.max(1, targetPage)), type: "button", children: label }));
+    return (_jsx("button", { className: "zvk-ui-pagination__item", disabled: targetPage < 1, onClick: () => onPageChange?.(Math.max(1, targetPage)), type: "button", children: label }));
 }
 function renderNext({ hasHrefMode, page, label, pageCount, onPageChange, getPageHref }) {
     const targetPage = page + 1;
     if (hasHrefMode && targetPage <= pageCount) {
-        return (_jsx("a", { className: "liano-pagination__item", href: getPageHref?.(targetPage), children: label }));
+        return (_jsx("a", { className: "zvk-ui-pagination__item", href: getPageHref?.(targetPage), children: label }));
     }
     if (hasHrefMode && targetPage > pageCount) {
-        return (_jsx("span", { className: "liano-pagination__item liano-pagination__item--disabled", "aria-hidden": "true", children: label }));
+        return (_jsx("span", { className: "zvk-ui-pagination__item zvk-ui-pagination__item--disabled", "aria-hidden": "true", children: label }));
     }
-    return (_jsx("button", { className: "liano-pagination__item", disabled: targetPage > pageCount, onClick: () => onPageChange?.(Math.min(pageCount, targetPage)), type: "button", children: label }));
+    return (_jsx("button", { className: "zvk-ui-pagination__item", disabled: targetPage > pageCount, onClick: () => onPageChange?.(Math.min(pageCount, targetPage)), type: "button", children: label }));
 }
 function renderPageItem({ hasHrefMode, item, page, onPageChange, getPageHref }) {
     if (item === page) {
         if (hasHrefMode) {
-            return (_jsx("a", { "aria-current": "page", className: "liano-pagination__item liano-pagination__item--current", href: getPageHref?.(item), children: item }));
+            return (_jsx("a", { "aria-current": "page", className: "zvk-ui-pagination__item zvk-ui-pagination__item--current", href: getPageHref?.(item), children: item }));
         }
-        return (_jsx("button", { "aria-current": "page", className: "liano-pagination__item liano-pagination__item--current", disabled: true, type: "button", children: item }));
+        return (_jsx("button", { "aria-current": "page", className: "zvk-ui-pagination__item zvk-ui-pagination__item--current", disabled: true, type: "button", children: item }));
     }
     if (hasHrefMode) {
-        return (_jsx("a", { className: "liano-pagination__item", href: getPageHref?.(item), children: item }));
+        return (_jsx("a", { className: "zvk-ui-pagination__item", href: getPageHref?.(item), children: item }));
     }
-    return (_jsx("button", { className: "liano-pagination__item", onClick: () => onPageChange?.(item), type: "button", children: item }));
+    return (_jsx("button", { className: "zvk-ui-pagination__item", onClick: () => onPageChange?.(item), type: "button", children: item }));
 }
 export function Pagination({ className, label = "Pagination", onPageChange, getPageHref, page, pageCount, siblingCount = 1, boundaryCount = 1, previousLabel = "Previous", nextLabel = "Next", ref, ...props }) {
     const safePageCount = Math.max(normalizeCount(pageCount, 1), 0);
     const safePage = Math.max(1, Math.min(clamp(page), safePageCount || 1));
     const range = getPaginationRange({ page, pageCount, siblingCount, boundaryCount });
     const isLinkMode = typeof getPageHref === "function";
-    return (_jsx("nav", { ...props, ref: ref, "aria-label": props["aria-label"] ?? label, className: cn("liano-pagination", className), children: _jsxs("ol", { className: "liano-pagination__list", children: [_jsx("li", { children: renderPrevious({ hasHrefMode: isLinkMode, label: previousLabel, onPageChange, page: safePage, pageCount: safePageCount, getPageHref }) }), range.map((item) => (_jsx("li", { children: typeof item === "number" ? (renderPageItem({
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": props["aria-label"] ?? label, className: cn("zvk-ui-pagination", className), children: _jsxs("ol", { className: "zvk-ui-pagination__list", children: [_jsx("li", { children: renderPrevious({ hasHrefMode: isLinkMode, label: previousLabel, onPageChange, page: safePage, pageCount: safePageCount, getPageHref }) }), range.map((item) => (_jsx("li", { children: typeof item === "number" ? (renderPageItem({
                         getPageHref,
                         hasHrefMode: isLinkMode,
                         item,
                         onPageChange,
                         page: safePage
-                    })) : (_jsx("span", { "aria-hidden": "true", className: "liano-pagination__ellipsis", children: "\u2026" })) }, `${item}-${typeof item === "number" ? item : item}`))), _jsx("li", { children: renderNext({ hasHrefMode: isLinkMode, label: nextLabel, onPageChange, page: safePage, pageCount: safePageCount, getPageHref }) })] }) }));
+                    })) : (_jsx("span", { "aria-hidden": "true", className: "zvk-ui-pagination__ellipsis", children: "\u2026" })) }, `${item}-${typeof item === "number" ? item : item}`))), _jsx("li", { children: renderNext({ hasHrefMode: isLinkMode, label: nextLabel, onPageChange, page: safePage, pageCount: safePageCount, getPageHref }) })] }) }));
 }

package/dist/components/popover/popover.d.ts

@@ -30,7 +30,7 @@ export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement
 }
 declare function PopoverRoot({ children, className, defaultOpen, modal, onOpenChange, open, placement, ref, ...props }: PopoverProps): React.JSX.Element;
 declare function PopoverTrigger({ asChild, className, disabled, onClick, ref, type, ...props }: PopoverTriggerProps): React.JSX.Element;
-declare function PopoverContent({ align, alignOffset: _alignOffset, className, container, forceMount, id, disableEscapeKeyDown, disableOutsidePointerDown, ref, placement, side, sideOffset, collisionPadding, matchTriggerWidth, style, ...props }: PopoverContentProps): React.JSX.Element | null;
+declare function PopoverContent({ align, alignOffset, className, container, forceMount, id, disableEscapeKeyDown, disableOutsidePointerDown, ref, placement, side, sideOffset, collisionPadding, matchTriggerWidth, style, ...props }: PopoverContentProps): React.JSX.Element | null;
 export declare const Popover: typeof PopoverRoot & {
     Trigger: typeof PopoverTrigger;
     Content: typeof PopoverContent;

package/dist/components/popover/popover.js

@@ -11,6 +11,7 @@ import { placementFromSideAlign } from "../../internal/floating/placement-aliase
 import { Slot } from "../../internal/slot/index.js";
 const defaultPositioning = {
     sideOffset: 0,
+    alignOffset: 0,
     collisionPadding: 0,
     matchTriggerWidth: false
 };
@@ -55,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);
@@ -72,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
     });
@@ -97,7 +113,7 @@ 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({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const context = usePopoverContext("Popover.Trigger");
@@ -112,11 +128,11 @@ function PopoverTrigger({ asChild = false, className, disabled, onClick, ref, ty
         mergeRef(ref, node);
     }, [context.referenceRef, ref]);
     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("liano-popover__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": context.open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick), children: props.children }));
+        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("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) }));
+    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({ align, alignOffset: _alignOffset, className, container, forceMount = false, id, disableEscapeKeyDown = false, disableOutsidePointerDown = false, ref, placement, side, 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);
@@ -129,7 +145,7 @@ function PopoverContent({ align, alignOffset: _alignOffset, className, container
     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);
@@ -152,17 +168,24 @@ function PopoverContent({ align, alignOffset: _alignOffset, className, container
         context.updateContentPositioning({
             ...(resolvedPlacement === undefined ? {} : { placement: resolvedPlacement }),
             sideOffset,
+            alignOffset,
             collisionPadding,
             matchTriggerWidth
         });
         return () => {
             context.updateContentPositioning(defaultPositioning);
         };
-    }, [align, context.updateContentPositioning, collisionPadding, matchTriggerWidth, placement, side, 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,