@zvk/ui 0.1.3 → 0.1.6

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/index.d.ts

@@ -1,2 +1,2 @@
-export { createToastController, Toast, ToastProvider, ToastViewport, useToast } from "./toast.js";
-export type { ToastActionProps, ToastCloseProps, ToastController, ToastInput, ToastOptions, ToastPlacement, ToastProviderProps, ToastProps, ToastTextProps, ToastTone, ToastViewportProps } from "./toast.js";
+export { createToastController, toast, Toast, Toaster, ToastProvider, ToastViewport, useToast } from "./toast.js";
+export type { ToasterPosition, ToasterProps, ToastActionInput, ToastActionProps, ToastCloseProps, ToastController, ToastInput, ToastOptions, ToastPlacement, ToastProviderProps, ToastProps, ToastTextProps, ToastTone, ToastViewportProps } from "./toast.js";

package/dist/components/toast/index.js

@@ -1,2 +1,2 @@
 "use client";
-export { createToastController, Toast, ToastProvider, ToastViewport, useToast } from "./toast.js";
+export { createToastController, toast, Toast, Toaster, ToastProvider, ToastViewport, useToast } from "./toast.js";

package/dist/components/toast/toast.d.ts

@@ -1,16 +1,21 @@
 import * as React from "react";
 export type ToastTone = "neutral" | "success" | "warning" | "destructive" | "info";
 export type ToastPlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+export type ToasterPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export type ToastInput = string | {
     title?: React.ReactNode;
     description?: React.ReactNode;
 };
+export type ToastActionInput = React.ReactNode | {
+    label: React.ReactNode;
+    onClick: () => void;
+};
 export type ToastOptions = {
     id?: string;
     description?: React.ReactNode;
     duration?: number;
-    action?: React.ReactNode;
-    cancel?: React.ReactNode;
+    action?: ToastActionInput;
+    cancel?: ToastActionInput;
 };
 export type ToastController = {
     (input: ToastInput, options?: ToastOptions): string;
@@ -41,10 +46,19 @@ export interface ToastProviderProps extends Omit<ToastViewportProps, "children">
     children?: React.ReactNode;
     controller?: ToastController;
 }
+export interface ToasterProps extends Omit<ToastProviderProps, "placement"> {
+    position?: ToasterPosition;
+    richColors?: boolean;
+    expand?: boolean;
+    offset?: number | string;
+    toastOptions?: ToastOptions;
+}
 export declare function ToastViewport({ className, placement, ref, ...props }: ToastViewportProps): React.ReactElement;
 export declare function createToastController(): ToastController;
+export declare const toast: ToastController;
 export declare function useToast(): ToastController;
 export declare function ToastProvider({ children, controller, placement, ref, ...viewportProps }: ToastProviderProps): React.ReactElement;
+export declare function Toaster({ controller, expand: _expand, offset, position, richColors: _richColors, style, toastOptions: _toastOptions, ...props }: ToasterProps): React.ReactElement;
 declare function ToastRoot({ className, ref, role, tone, ...props }: ToastProps): React.JSX.Element;
 declare function ToastTitle({ className, ref, ...props }: ToastTextProps): React.JSX.Element;
 declare function ToastDescription({ className, ref, ...props }: ToastTextProps): React.JSX.Element;

package/dist/components/toast/toast.js

@@ -27,8 +27,38 @@ function resolveToastContent(input, options) {
         description: options.description ?? input.description
     };
 }
+function mapToPlacement(position) {
+    if (position === "top-center") {
+        return "top-right";
+    }
+    if (position === "bottom-center") {
+        return "bottom-right";
+    }
+    return position;
+}
+function toastTypeFromTone(tone) {
+    if (tone === "destructive") {
+        return "error";
+    }
+    if (tone === "neutral") {
+        return "default";
+    }
+    return tone;
+}
+function isToastActionObject(input) {
+    return typeof input === "object" && input !== null && !React.isValidElement(input) && "label" in input && "onClick" in input;
+}
+function renderToastControl(input) {
+    if (input === undefined) {
+        return null;
+    }
+    if (isToastActionObject(input)) {
+        return _jsx(Toast.Action, { onClick: input.onClick, children: input.label });
+    }
+    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();
@@ -76,6 +106,7 @@ export function createToastController() {
     });
     return controller;
 }
+export const toast = createToastController();
 export function useToast() {
     const controller = React.useContext(ToastControllerContext);
     if (!controller) {
@@ -94,6 +125,16 @@ export function ToastProvider({ children, controller, placement = "top-right", r
     const viewportRefProps = ref ? { ref } : {};
     return (_jsxs(ToastControllerContext.Provider, { value: activeController, children: [children, _jsx(ToastViewport, { ...viewportProps, ...viewportRefProps, placement: placement, children: toasts.map((toast) => (_jsx(ToastProviderItem, { toast: toast, onDismiss: dismissToast }, toast.id))) })] }));
 }
+export function Toaster({ controller = toast, expand: _expand, offset, position = "top-right", richColors: _richColors, style, toastOptions: _toastOptions, ...props }) {
+    const placement = mapToPlacement(position);
+    const offsetStyle = offset === undefined
+        ? style
+        : {
+            ...style,
+            "--zvk-ui-toast-viewport-inset": typeof offset === "number" ? `${offset}px` : offset
+        };
+    return (_jsx(ToastProvider, { ...props, controller: controller, placement: placement, ...(offsetStyle === undefined ? {} : { style: offsetStyle }) }));
+}
 function ToastProviderItem({ onDismiss, toast }) {
     React.useEffect(() => {
         if (toast.duration === Infinity) {
@@ -102,22 +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: [toast.action, 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 }) {
-    return (_jsx("div", { ...props, ref: ref, className: cn("liano-toast", className), "data-tone": tone, role: role ?? (tone === "destructive" ? "alert" : "status") }));
+    const toastType = toastTypeFromTone(tone);
+    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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { PortalProps } from "../../internal/portal/index.js";
 import type { FloatingPlacement } from "../../internal/floating/index.js";
+import type { FloatingAlign, FloatingSide } from "../../internal/floating/placement-aliases.js";
 export interface TooltipProps {
     children: React.ReactElement;
     content: React.ReactNode;
@@ -23,9 +24,14 @@ export interface TooltipRootProps {
     onOpenChange?: (open: boolean) => void;
 }
 export interface TooltipTriggerProps {
+    asChild?: boolean;
     children: React.ReactElement;
 }
 export interface TooltipContentProps extends React.HTMLAttributes<HTMLSpanElement> {
+    placement?: FloatingPlacement;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    alignOffset?: number;
     sideOffset?: number;
     collisionPadding?: number;
     forceMount?: boolean;
@@ -34,8 +40,8 @@ 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 }: TooltipTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function TooltipContent({ children, className, collisionPadding, container, forceMount, ref, sideOffset, style, ...props }: TooltipContentProps): React.JSX.Element | null;
+declare function TooltipTrigger({ children, asChild: _asChild }: TooltipTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+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

@@ -3,11 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Portal } from "../../internal/portal/index.js";
 import { useFloatingPosition } from "../../internal/floating/index.js";
+import { placementFromSideAlign } from "../../internal/floating/placement-aliases.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 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({
@@ -27,7 +29,7 @@ function composeRefs(...refs) {
             if (typeof ref === "function") {
                 ref(node);
             }
-            else if (ref !== undefined) {
+            else if (ref !== undefined && ref !== null) {
                 ref.current = node;
             }
         }
@@ -59,8 +61,9 @@ function TooltipRoot({ children, defaultOpen = false, delay, disabled = false, o
     const openTimeoutRef = React.useRef(null);
     const { floatingRef, floatingStyle, placement: resolvedPlacement, referenceRef, updatePosition } = useFloatingPosition({
         open,
-        placement,
+        placement: contentPositioning.placement ?? placement,
         offset: contentPositioning.sideOffset,
+        alignmentOffset: contentPositioning.alignOffset,
         collisionPadding: contentPositioning.collisionPadding,
         flip: true,
         shift: true
@@ -137,7 +140,7 @@ function TooltipRoot({ children, defaultOpen = false, delay, disabled = false, o
     ]);
     return (_jsx(TooltipRootContext.Provider, { value: contextValue, children: children }));
 }
-function TooltipTrigger({ children }) {
+function TooltipTrigger({ children, asChild: _asChild = false }) {
     const context = useTooltipRootContext("Tooltip.Trigger");
     if (!React.isValidElement(children) || context.disabled) {
         return children;
@@ -164,20 +167,23 @@ function TooltipTrigger({ children }) {
         }, { checkDefaultPrevented: false })
     });
 }
-function TooltipContent({ children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, ref, 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);
-    }, [collisionPadding, context, 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/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/placement-aliases.d.ts

@@ -0,0 +1,7 @@
+import type { FloatingAlign, FloatingPlacement, FloatingSide } from "./floating-types.js";
+export type { FloatingAlign, FloatingSide } from "./floating-types.js";
+export declare function placementFromSideAlign(side: FloatingSide | undefined, align: FloatingAlign | undefined, fallback: FloatingPlacement): FloatingPlacement;
+export declare function placementParts(placement: FloatingPlacement): {
+    side: FloatingSide;
+    align: FloatingAlign;
+};

package/dist/internal/floating/placement-aliases.js

@@ -0,0 +1,13 @@
+export function placementFromSideAlign(side, align, fallback) {
+    if (side === undefined) {
+        return fallback;
+    }
+    if (align === undefined || align === "center") {
+        return side;
+    }
+    return `${side}-${align}`;
+}
+export function placementParts(placement) {
+    const [side, align = "center"] = placement.split("-");
+    return { side, align };
+}

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;