@zvk/ui 0.1.5 → 0.1.7

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;

package/dist/components/tooltip/tooltip.js

@@ -9,6 +9,7 @@ import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
 import { cn } from "../../utils/cn.js";
 const defaultContentPositioning = {
     sideOffset: 8,
+    alignOffset: 0,
     collisionPadding: 0
 };
 const TooltipProviderContext = React.createContext({
@@ -62,6 +63,7 @@ function TooltipRoot({ children, defaultOpen = false, delay, disabled = false, o
         open,
         placement: contentPositioning.placement ?? placement,
         offset: contentPositioning.sideOffset,
+        alignmentOffset: contentPositioning.alignOffset,
         collisionPadding: contentPositioning.collisionPadding,
         flip: true,
         shift: true
@@ -165,22 +167,23 @@ function TooltipTrigger({ children, asChild: _asChild = false }) {
         }, { checkDefaultPrevented: false })
     });
 }
-function TooltipContent({ align, alignOffset: _alignOffset, children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, placement, ref, side, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
+function TooltipContent({ align, alignOffset = defaultContentPositioning.alignOffset, children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, placement, ref, side, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
     const context = useTooltipRootContext("Tooltip.Content");
     React.useEffect(() => {
         const resolvedPlacement = side === undefined ? placement : placementFromSideAlign(side, align, placement ?? "bottom");
         context.setContentPositioning({
             ...(resolvedPlacement === undefined ? {} : { placement: resolvedPlacement }),
             sideOffset,
+            alignOffset,
             collisionPadding
         });
         return () => context.setContentPositioning(defaultContentPositioning);
-    }, [align, collisionPadding, context, placement, side, sideOffset]);
+    }, [align, alignOffset, collisionPadding, context, placement, side, sideOffset]);
     if (!context.open && !forceMount) {
         return null;
     }
     const placementParts = getPlacementParts(context.resolvedPlacement);
-    const content = (_jsx("span", { ...props, ref: composeRefs(ref, context.floatingRef), id: context.contentId, className: cn("liano-tooltip", className), "data-align": placementParts.align, "data-side": placementParts.side, hidden: context.open ? undefined : true, role: "tooltip", style: { ...context.floatingStyle, ...style }, children: children }));
+    const content = (_jsx("span", { ...props, ref: composeRefs(ref, context.floatingRef), id: context.contentId, className: cn("zvk-ui-tooltip", className), "data-align": placementParts.align, "data-side": placementParts.side, hidden: context.open ? undefined : true, role: "tooltip", style: { ...context.floatingStyle, ...style }, children: children }));
     return (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: content }));
 }
 function TooltipWrapper({ children, content, delay = 0, disabled = false, placement = "bottom" }) {

package/dist/hooks/index.d.ts

@@ -1,7 +1,7 @@
 export { useComposedRefs } from "./use-composed-refs.js";
-export type { LianoPossibleRef } from "./use-composed-refs.js";
+export type { ZvkUiPossibleRef } from "./use-composed-refs.js";
 export { useControllableState } from "./use-controllable-state.js";
-export type { LianoSetStateAction, UseControllableStateOptions } from "./use-controllable-state.js";
+export type { ZvkUiSetStateAction, UseControllableStateOptions } from "./use-controllable-state.js";
 export { useDisclosure } from "./use-disclosure.js";
 export type { UseDisclosureOptions, UseDisclosureReturn } from "./use-disclosure.js";
 export { useEvent } from "./use-event.js";

package/dist/hooks/use-composed-refs.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-export type LianoPossibleRef<Value> = React.Ref<Value> | undefined;
-export declare function useComposedRefs<Value>(...refs: LianoPossibleRef<Value>[]): React.RefCallback<Value>;
+export type ZvkUiPossibleRef<Value> = React.Ref<Value> | undefined;
+export declare function useComposedRefs<Value>(...refs: ZvkUiPossibleRef<Value>[]): React.RefCallback<Value>;

package/dist/hooks/use-controllable-state.d.ts

@@ -1,7 +1,7 @@
-export type LianoSetStateAction<Value> = Value | ((previous: Value) => Value);
+export type ZvkUiSetStateAction<Value> = Value | ((previous: Value) => Value);
 export interface UseControllableStateOptions<Value> {
     value?: Value;
     defaultValue: Value;
     onChange?: (value: Value) => void;
 }
-export declare function useControllableState<Value>({ value, defaultValue, onChange }: UseControllableStateOptions<Value>): readonly [Value, (next: LianoSetStateAction<Value>) => void];
+export declare function useControllableState<Value>({ value, defaultValue, onChange }: UseControllableStateOptions<Value>): readonly [Value, (next: ZvkUiSetStateAction<Value>) => void];

package/dist/internal/floating/auto-update.js

@@ -1,18 +1,30 @@
 function hasBrowserApis() {
     return typeof window !== "undefined" && typeof document !== "undefined";
 }
+function scheduleFrame(callback) {
+    if (typeof window.requestAnimationFrame === "function") {
+        const frame = window.requestAnimationFrame(callback);
+        return () => {
+            if (typeof window.cancelAnimationFrame === "function") {
+                window.cancelAnimationFrame(frame);
+            }
+        };
+    }
+    const timeout = window.setTimeout(callback, 0);
+    return () => {
+        window.clearTimeout(timeout);
+    };
+}
 export function autoUpdateFloating(params) {
     const { enabled, reference, floating, update } = params;
     if (!hasBrowserApis() || !enabled || reference === null || floating === null) {
         return () => { };
     }
-    let frameRequest = null;
+    let cancelScheduledUpdate = null;
     const scheduleUpdate = () => {
-        if (frameRequest !== null) {
-            cancelAnimationFrame(frameRequest);
-        }
-        frameRequest = window.requestAnimationFrame(() => {
-            frameRequest = null;
+        cancelScheduledUpdate?.();
+        cancelScheduledUpdate = scheduleFrame(() => {
+            cancelScheduledUpdate = null;
             update();
         });
     };
@@ -40,9 +52,9 @@ export function autoUpdateFloating(params) {
         for (const cleanup of cleanupFns) {
             cleanup();
         }
-        if (frameRequest !== null) {
-            cancelAnimationFrame(frameRequest);
-            frameRequest = null;
+        if (cancelScheduledUpdate !== null) {
+            cancelScheduledUpdate();
+            cancelScheduledUpdate = null;
         }
     };
 }

package/dist/internal/floating/compute-position.js

@@ -3,7 +3,10 @@ import { detectOverflow } from "./detect-overflow.js";
 function getCenteredOffset(referenceSize, floatingSize) {
     return (referenceSize - floatingSize) / 2;
 }
-function getPlacementCoords(placement, reference, floating, offset) {
+function applyAlignmentOffset(value, align, offset) {
+    return align === "end" ? value - offset : value + offset;
+}
+function getPlacementCoords(placement, reference, floating, offset, alignmentOffset) {
     const { side, align } = parsePlacement(placement);
     if (side === "top" || side === "bottom") {
         const baseY = side === "top" ? reference.y - floating.height - offset : reference.y + reference.height + offset;
@@ -17,6 +20,7 @@ function getPlacementCoords(placement, reference, floating, offset) {
         else {
             x = reference.x + getCenteredOffset(reference.width, floating.width);
         }
+        x = applyAlignmentOffset(x, align, alignmentOffset);
         return { x, y: baseY };
     }
     const baseX = side === "left" ? reference.x - floating.width - offset : reference.x + reference.width + offset;
@@ -30,10 +34,11 @@ function getPlacementCoords(placement, reference, floating, offset) {
     else {
         y = reference.y + getCenteredOffset(reference.height, floating.height);
     }
+    y = applyAlignmentOffset(y, align, alignmentOffset);
     return { x: baseX, y };
 }
-function getOverflowForPlacement(placement, reference, floating, boundary, offset, collisionPadding) {
-    const { x, y } = getPlacementCoords(placement, reference, floating, offset);
+function getOverflowForPlacement(placement, reference, floating, boundary, offset, alignmentOffset, collisionPadding) {
+    const { x, y } = getPlacementCoords(placement, reference, floating, offset, alignmentOffset);
     return detectOverflow({
         boundary,
         collisionPadding,
@@ -46,22 +51,22 @@ function getOverflowForPlacement(placement, reference, floating, boundary, offse
     });
 }
 export function computeFloatingPosition(options) {
-    const { reference, floating, boundary, placement: rawPlacement = "bottom", strategy = "absolute", offset = 0, collisionPadding = 0, matchReferenceWidth = false, maxHeight, flip = true, shift = true } = options;
+    const { reference, floating, boundary, placement: rawPlacement = "bottom", strategy = "absolute", offset = 0, alignmentOffset = 0, collisionPadding = 0, matchReferenceWidth = false, maxHeight, flip = true, shift = true } = options;
     const parsed = parsePlacement(rawPlacement);
     const defaultPlacement = buildPlacement(parsed.side, parsed.align);
     let currentPlacement = defaultPlacement;
-    let basePlacement = getPlacementCoords(currentPlacement, reference, floating, offset);
+    let basePlacement = getPlacementCoords(currentPlacement, reference, floating, offset, alignmentOffset);
     if (flip) {
-        const overflow = getOverflowForPlacement(currentPlacement, reference, floating, boundary, offset, collisionPadding);
+        const overflow = getOverflowForPlacement(currentPlacement, reference, floating, boundary, offset, alignmentOffset, collisionPadding);
         const { side: currentSide } = parsePlacement(currentPlacement);
         const overflowSide = overflow[currentSide];
         if (overflowSide > 0) {
             const oppositeSide = getOppositeSide(currentSide);
             const oppositePlacement = buildPlacement(oppositeSide, parsed.align);
-            const oppositeOverflow = getOverflowForPlacement(oppositePlacement, reference, floating, boundary, offset, collisionPadding);
+            const oppositeOverflow = getOverflowForPlacement(oppositePlacement, reference, floating, boundary, offset, alignmentOffset, collisionPadding);
             if (oppositeOverflow[oppositeSide] < overflowSide) {
                 currentPlacement = oppositePlacement;
-                basePlacement = getPlacementCoords(currentPlacement, reference, floating, offset);
+                basePlacement = getPlacementCoords(currentPlacement, reference, floating, offset, alignmentOffset);
             }
         }
     }

package/dist/internal/floating/floating-types.d.ts

@@ -18,6 +18,7 @@ export interface ComputeFloatingPositionOptions {
     placement?: FloatingPlacement;
     strategy?: FloatingStrategy;
     offset?: number;
+    alignmentOffset?: number;
     collisionPadding?: number;
     matchReferenceWidth?: boolean;
     maxHeight?: number;

package/dist/internal/floating/index.d.ts

@@ -6,6 +6,7 @@ export type UseFloatingPositionOptions = {
     placement?: import("./floating-types.js").FloatingPlacement;
     strategy?: import("./floating-types.js").FloatingStrategy;
     offset?: number;
+    alignmentOffset?: number;
     collisionPadding?: number;
     matchReferenceWidth?: boolean;
     maxHeight?: number;

package/dist/internal/floating/use-floating-position.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { computeFloatingPosition } from "./compute-position.js";
 import { autoUpdateFloating } from "./auto-update.js";
 export function useFloatingPosition(options) {
-    const { open, placement = "bottom", strategy = "absolute", offset = 0, collisionPadding = 0, matchReferenceWidth = false, maxHeight, flip = true, shift = true, boundary } = options;
+    const { open, placement = "bottom", strategy = "absolute", offset = 0, alignmentOffset = 0, collisionPadding = 0, matchReferenceWidth = false, maxHeight, flip = true, shift = true, boundary } = options;
     const [referenceEl, setReferenceEl] = React.useState(null);
     const [floatingEl, setFloatingEl] = React.useState(null);
     const [style, setStyle] = React.useState({
@@ -62,6 +62,7 @@ export function useFloatingPosition(options) {
             placement: placement,
             strategy: strategy,
             offset,
+            alignmentOffset,
             collisionPadding,
             matchReferenceWidth,
             ...(maxHeight === undefined ? {} : { maxHeight }),
@@ -73,9 +74,9 @@ export function useFloatingPosition(options) {
             left: `${computed.x}px`,
             top: `${computed.y}px`,
             width: matchReferenceWidth ? `${referenceEl?.offsetWidth ?? computed.referenceWidth}px` : "auto",
-            "--liano-floating-reference-width": `${computed.referenceWidth}px`,
-            "--liano-floating-available-width": `${computed.availableWidth}px`,
-            "--liano-floating-available-height": `${computed.availableHeight}px`
+            "--zvk-ui-floating-reference-width": `${computed.referenceWidth}px`,
+            "--zvk-ui-floating-available-width": `${computed.availableWidth}px`,
+            "--zvk-ui-floating-available-height": `${computed.availableHeight}px`
         });
         setResolvedPlacement(computed.placement);
     }, [
@@ -83,6 +84,7 @@ export function useFloatingPosition(options) {
         placement,
         strategy,
         offset,
+        alignmentOffset,
         collisionPadding,
         matchReferenceWidth,
         maxHeight,

package/dist/internal/overlay-stack/overlay-stack.js

@@ -1,6 +1,8 @@
 const overlayStack = [];
+let nextOverlayId = 1;
 export function pushOverlay(node) {
-    const id = `liano-overlay-${overlayStack.length + 1}-${Math.random().toString(36).slice(2)}`;
+    const id = `zvk-ui-overlay-${nextOverlayId}`;
+    nextOverlayId += 1;
     overlayStack.push({ id, node });
     return id;
 }
@@ -35,6 +37,7 @@ export function isInOverlayStack(node) {
 }
 export function resetOverlayStackForTests() {
     overlayStack.length = 0;
+    nextOverlayId = 1;
 }
 export function getOverlayStackLength() {
     return overlayStack.length;