@zvk/ui 0.1.5 → 0.1.6

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/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;