@zvk/ui 0.1.3 → 0.1.5

package/dist/components/tooltip/tooltip.js

@@ -3,6 +3,7 @@ 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";
@@ -27,7 +28,7 @@ function composeRefs(...refs) {
             if (typeof ref === "function") {
                 ref(node);
             }
-            else if (ref !== undefined) {
+            else if (ref !== undefined && ref !== null) {
                 ref.current = node;
             }
         }
@@ -59,7 +60,7 @@ 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,
         collisionPadding: contentPositioning.collisionPadding,
         flip: true,
@@ -137,7 +138,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,15 +165,17 @@ 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: _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,
             collisionPadding
         });
         return () => context.setContentPositioning(defaultContentPositioning);
-    }, [collisionPadding, context, sideOffset]);
+    }, [align, collisionPadding, context, placement, side, sideOffset]);
     if (!context.open && !forceMount) {
         return null;
     }

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

@@ -0,0 +1,2 @@
+export { Slot } from "./slot.js";
+export type { SlotProps } from "./slot.js";

package/dist/internal/slot/index.js

@@ -0,0 +1 @@
+export { Slot } from "./slot.js";

package/dist/internal/slot/slot.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactElement;
+    ref?: React.Ref<HTMLElement>;
+}
+export declare function Slot({ children, ref, ...props }: SlotProps): React.ReactElement;

package/dist/internal/slot/slot.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref !== undefined && ref !== null) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function isEventHandler(key, value) {
+    return /^on[A-Z]/.test(key) && typeof value === "function";
+}
+function mergeProps(slotProps, childProps) {
+    const merged = { ...slotProps, ...childProps };
+    for (const key of Object.keys(slotProps)) {
+        const slotValue = slotProps[key];
+        const childValue = childProps[key];
+        if (key === "className") {
+            merged[key] = cn(slotValue, childValue);
+            continue;
+        }
+        if (key === "style" && typeof slotValue === "object" && typeof childValue === "object") {
+            merged[key] = { ...slotValue, ...childValue };
+            continue;
+        }
+        if (isEventHandler(key, slotValue) && isEventHandler(key, childValue)) {
+            merged[key] = (event) => {
+                childValue(event);
+                if (!event.defaultPrevented) {
+                    slotValue(event);
+                }
+            };
+        }
+    }
+    return merged;
+}
+export function Slot({ children, ref, ...props }) {
+    if (!React.isValidElement(children)) {
+        throw new Error("Slot requires a single valid React element child.");
+    }
+    const child = children;
+    const childRef = child.props.ref;
+    const mergedProps = mergeProps(props, child.props);
+    return React.cloneElement(child, {
+        ...mergedProps,
+        ref: composeRefs(childRef, ref)
+    });
+}

package/dist/styles.css

@@ -3350,6 +3350,12 @@
     margin: var(--liano-space-1) 0;
   }
 
+  .liano-command__shortcut {
+    color: var(--liano-color-muted-foreground);
+    font-size: var(--liano-font-size-xs);
+    margin-inline-start: auto;
+  }
+
   .liano-command-dialog {
     font-family: var(--liano-font-family-sans);
     padding: var(--liano-space-4);
@@ -3556,7 +3562,7 @@
     padding: var(--liano-space-1) var(--liano-space-3);
   }
 
-  .liano-context-menu__checkbox-item {
+  :where(.liano-context-menu__checkbox-item, .liano-context-menu__radio-item) {
     justify-content: start;
   }
 
@@ -3629,6 +3635,20 @@
     text-align: start;
   }
 
+  :where(.liano-menubar__checkbox-item, .liano-menubar__radio-item) {
+    justify-content: start;
+  }
+
+  .liano-menubar__item-indicator {
+    color: var(--liano-color-primary);
+    inline-size: 1rem;
+    text-align: center;
+  }
+
+  .liano-menubar__item-label {
+    min-width: 0;
+  }
+
   .liano-menubar__item:focus-visible {
     background: var(--liano-color-muted);
     outline: 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zvk/ui",
-  "version": "0.1.3",
-  "description": "A polished, zero-runtime-dependency React component library for Liano applications.",
+  "version": "0.1.5",
+  "description": "A polished, zero-runtime-dependency React component library for ZvkUi applications.",
   "private": false,
   "type": "module",
   "license": "SEE LICENSE IN LICENSE.md",