@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/tooltip.cjs

@@ -0,0 +1,155 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tooltip_exports = {};
+__export(tooltip_exports, {
+  Tooltip: () => Tooltip,
+  TooltipProvider: () => TooltipProvider
+});
+module.exports = __toCommonJS(tooltip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_motion = require("../motion/index.cjs");
+var import_cn = require("../utils/cn.cjs");
+var import_framer_motion = require("framer-motion");
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+function TooltipProvider({
+  children,
+  delayDuration = 300,
+  skipDelayDuration = 100,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Tooltip.Provider,
+    {
+      delayDuration,
+      skipDelayDuration,
+      ...rest,
+      children
+    }
+  );
+}
+TooltipProvider.displayName = "TooltipProvider";
+const TooltipContent = (0, import_react.forwardRef)(function TooltipContent2({
+  className,
+  showArrow = true,
+  maxWidth = 220,
+  sideOffset = 6,
+  children,
+  ...rest
+}, ref) {
+  const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Tooltip.Content,
+    {
+      ref,
+      sideOffset,
+      asChild: true,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_framer_motion.motion.div,
+        {
+          className: (0, import_cn.cn)(
+            // Layout
+            "z-[var(--z-tooltip)]",
+            "px-3 py-1.5",
+            "overflow-hidden",
+            // Visual
+            "rounded-md",
+            "border border-border",
+            "bg-foreground text-background",
+            "shadow-md",
+            // Typography
+            "text-xs leading-4",
+            className
+          ),
+          style: { maxWidth },
+          variants: shouldReduce ? void 0 : import_motion.fadeInFast.variants,
+          initial: shouldReduce ? { opacity: 0 } : "initial",
+          animate: shouldReduce ? { opacity: 1 } : "animate",
+          exit: shouldReduce ? { opacity: 0 } : "exit",
+          transition: shouldReduce ? { duration: 0.1 } : import_motion.fadeInFast.transition,
+          "data-ds": "",
+          "data-ds-component": "tooltip",
+          "data-ds-animated": "",
+          children: [
+            children,
+            showArrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_radix_ui.Tooltip.Arrow,
+              {
+                className: "fill-foreground",
+                width: 8,
+                height: 4
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+TooltipContent.displayName = "TooltipContent";
+const Tooltip = (0, import_react.forwardRef)(
+  function Tooltip2({
+    content,
+    children,
+    side = "top",
+    align = "center",
+    sideOffset = 6,
+    arrow = true,
+    maxWidth = 220,
+    delayDuration,
+    open,
+    onOpenChange,
+    contentClassName
+  }, _ref) {
+    if (!content) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_radix_ui.Tooltip.Root,
+      {
+        open,
+        onOpenChange,
+        delayDuration,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Tooltip.Trigger, { asChild: true, children }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            TooltipContent,
+            {
+              side,
+              align,
+              sideOffset,
+              showArrow: arrow,
+              maxWidth,
+              className: contentClassName,
+              children: content
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Tooltip.displayName = "Tooltip";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tooltip,
+  TooltipProvider
+});

package/dist/components/tooltip.d.cts

@@ -0,0 +1,129 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tooltip as Tooltip$1 } from 'radix-ui';
+
+type TooltipSide = "top" | "right" | "bottom" | "left";
+type TooltipAlign = "start" | "center" | "end";
+interface TooltipProps {
+    /**
+     * The tooltip content. Can be a string or ReactNode.
+     */
+    content: ReactNode;
+    /**
+     * The trigger element. Must be a single React element that accepts a ref.
+     */
+    children: ReactNode;
+    /**
+     * The preferred side of the trigger to render the tooltip.
+     * @default "top"
+     */
+    side?: TooltipSide;
+    /**
+     * Alignment of the tooltip relative to the trigger.
+     * @default "center"
+     */
+    align?: TooltipAlign;
+    /**
+     * The distance in pixels from the trigger.
+     * @default 6
+     */
+    sideOffset?: number;
+    /**
+     * Whether to show an arrow pointing to the trigger.
+     * @default true
+     */
+    arrow?: boolean;
+    /**
+     * Maximum width of the tooltip content.
+     * @default 220
+     */
+    maxWidth?: number;
+    /**
+     * Delay in ms before the tooltip opens.
+     * @default 300
+     */
+    delayDuration?: number;
+    /**
+     * Delay in ms before the tooltip closes after leaving.
+     * @default 0
+     */
+    skipDelayDuration?: number;
+    /**
+     * Whether the tooltip is open (controlled).
+     */
+    open?: boolean;
+    /**
+     * Callback when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Additional CSS classes for the tooltip content element.
+     */
+    contentClassName?: string;
+}
+interface TooltipProviderProps extends ComponentPropsWithoutRef<typeof Tooltip$1.Provider> {
+    children: ReactNode;
+}
+/**
+ * TooltipProvider — wraps your application (or a subtree) to configure
+ * shared tooltip behavior like delay duration.
+ *
+ * Should be placed near the root of your app, or around any section
+ * that uses tooltips.
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider delayDuration={200}>
+ *   <App />
+ * </TooltipProvider>
+ * ```
+ */
+declare function TooltipProvider({ children, delayDuration, skipDelayDuration, ...rest }: TooltipProviderProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipProvider {
+    var displayName: string;
+}
+/**
+ * Tooltip — a small popup that displays informative text when hovering
+ * or focusing on a trigger element.
+ *
+ * Built on Radix UI's Tooltip primitive for full accessibility. The tooltip
+ * appears after a configurable delay and supports keyboard access.
+ *
+ * Accessibility:
+ *   - Radix handles `role="tooltip"` and `aria-describedby` automatically
+ *   - Opens on hover and focus, closes on blur and Escape
+ *   - Keyboard accessible: focusable triggers show the tooltip
+ *   - Content is announced by screen readers
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (wrap app in TooltipProvider first)
+ * <Tooltip content="Save your changes">
+ *   <button>Save</button>
+ * </Tooltip>
+ *
+ * // With side placement
+ * <Tooltip content="More options" side="right">
+ *   <button>⋮</button>
+ * </Tooltip>
+ *
+ * // Without arrow
+ * <Tooltip content="Delete" arrow={false}>
+ *   <button>🗑️</button>
+ * </Tooltip>
+ *
+ * // Custom max width
+ * <Tooltip content="This is a longer tooltip that needs more space" maxWidth={300}>
+ *   <span>Hover me</span>
+ * </Tooltip>
+ *
+ * // Controlled
+ * <Tooltip content="Info" open={isOpen} onOpenChange={setIsOpen}>
+ *   <button>i</button>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Tooltip, type TooltipAlign, type TooltipProps, TooltipProvider, type TooltipProviderProps, type TooltipSide };

package/dist/components/tooltip.d.ts

@@ -0,0 +1,129 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tooltip as Tooltip$1 } from 'radix-ui';
+
+type TooltipSide = "top" | "right" | "bottom" | "left";
+type TooltipAlign = "start" | "center" | "end";
+interface TooltipProps {
+    /**
+     * The tooltip content. Can be a string or ReactNode.
+     */
+    content: ReactNode;
+    /**
+     * The trigger element. Must be a single React element that accepts a ref.
+     */
+    children: ReactNode;
+    /**
+     * The preferred side of the trigger to render the tooltip.
+     * @default "top"
+     */
+    side?: TooltipSide;
+    /**
+     * Alignment of the tooltip relative to the trigger.
+     * @default "center"
+     */
+    align?: TooltipAlign;
+    /**
+     * The distance in pixels from the trigger.
+     * @default 6
+     */
+    sideOffset?: number;
+    /**
+     * Whether to show an arrow pointing to the trigger.
+     * @default true
+     */
+    arrow?: boolean;
+    /**
+     * Maximum width of the tooltip content.
+     * @default 220
+     */
+    maxWidth?: number;
+    /**
+     * Delay in ms before the tooltip opens.
+     * @default 300
+     */
+    delayDuration?: number;
+    /**
+     * Delay in ms before the tooltip closes after leaving.
+     * @default 0
+     */
+    skipDelayDuration?: number;
+    /**
+     * Whether the tooltip is open (controlled).
+     */
+    open?: boolean;
+    /**
+     * Callback when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Additional CSS classes for the tooltip content element.
+     */
+    contentClassName?: string;
+}
+interface TooltipProviderProps extends ComponentPropsWithoutRef<typeof Tooltip$1.Provider> {
+    children: ReactNode;
+}
+/**
+ * TooltipProvider — wraps your application (or a subtree) to configure
+ * shared tooltip behavior like delay duration.
+ *
+ * Should be placed near the root of your app, or around any section
+ * that uses tooltips.
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider delayDuration={200}>
+ *   <App />
+ * </TooltipProvider>
+ * ```
+ */
+declare function TooltipProvider({ children, delayDuration, skipDelayDuration, ...rest }: TooltipProviderProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipProvider {
+    var displayName: string;
+}
+/**
+ * Tooltip — a small popup that displays informative text when hovering
+ * or focusing on a trigger element.
+ *
+ * Built on Radix UI's Tooltip primitive for full accessibility. The tooltip
+ * appears after a configurable delay and supports keyboard access.
+ *
+ * Accessibility:
+ *   - Radix handles `role="tooltip"` and `aria-describedby` automatically
+ *   - Opens on hover and focus, closes on blur and Escape
+ *   - Keyboard accessible: focusable triggers show the tooltip
+ *   - Content is announced by screen readers
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (wrap app in TooltipProvider first)
+ * <Tooltip content="Save your changes">
+ *   <button>Save</button>
+ * </Tooltip>
+ *
+ * // With side placement
+ * <Tooltip content="More options" side="right">
+ *   <button>⋮</button>
+ * </Tooltip>
+ *
+ * // Without arrow
+ * <Tooltip content="Delete" arrow={false}>
+ *   <button>🗑️</button>
+ * </Tooltip>
+ *
+ * // Custom max width
+ * <Tooltip content="This is a longer tooltip that needs more space" maxWidth={300}>
+ *   <span>Hover me</span>
+ * </Tooltip>
+ *
+ * // Controlled
+ * <Tooltip content="Info" open={isOpen} onOpenChange={setIsOpen}>
+ *   <button>i</button>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Tooltip, type TooltipAlign, type TooltipProps, TooltipProvider, type TooltipProviderProps, type TooltipSide };

package/dist/components/tooltip.mjs

@@ -0,0 +1,132 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { fadeInFast } from "../motion/index.mjs";
+import { cn } from "../utils/cn.mjs";
+import { motion, useReducedMotion } from "framer-motion";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import {
+  forwardRef
+} from "react";
+function TooltipProvider({
+  children,
+  delayDuration = 300,
+  skipDelayDuration = 100,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      delayDuration,
+      skipDelayDuration,
+      ...rest,
+      children
+    }
+  );
+}
+TooltipProvider.displayName = "TooltipProvider";
+const TooltipContent = forwardRef(function TooltipContent2({
+  className,
+  showArrow = true,
+  maxWidth = 220,
+  sideOffset = 6,
+  children,
+  ...rest
+}, ref) {
+  const shouldReduce = useReducedMotion();
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      asChild: true,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          className: cn(
+            // Layout
+            "z-[var(--z-tooltip)]",
+            "px-3 py-1.5",
+            "overflow-hidden",
+            // Visual
+            "rounded-md",
+            "border border-border",
+            "bg-foreground text-background",
+            "shadow-md",
+            // Typography
+            "text-xs leading-4",
+            className
+          ),
+          style: { maxWidth },
+          variants: shouldReduce ? void 0 : fadeInFast.variants,
+          initial: shouldReduce ? { opacity: 0 } : "initial",
+          animate: shouldReduce ? { opacity: 1 } : "animate",
+          exit: shouldReduce ? { opacity: 0 } : "exit",
+          transition: shouldReduce ? { duration: 0.1 } : fadeInFast.transition,
+          "data-ds": "",
+          "data-ds-component": "tooltip",
+          "data-ds-animated": "",
+          children: [
+            children,
+            showArrow && /* @__PURE__ */ jsx(
+              TooltipPrimitive.Arrow,
+              {
+                className: "fill-foreground",
+                width: 8,
+                height: 4
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+TooltipContent.displayName = "TooltipContent";
+const Tooltip = forwardRef(
+  function Tooltip2({
+    content,
+    children,
+    side = "top",
+    align = "center",
+    sideOffset = 6,
+    arrow = true,
+    maxWidth = 220,
+    delayDuration,
+    open,
+    onOpenChange,
+    contentClassName
+  }, _ref) {
+    if (!content) {
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    }
+    return /* @__PURE__ */ jsxs(
+      TooltipPrimitive.Root,
+      {
+        open,
+        onOpenChange,
+        delayDuration,
+        children: [
+          /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }),
+          /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+            TooltipContent,
+            {
+              side,
+              align,
+              sideOffset,
+              showArrow: arrow,
+              maxWidth,
+              className: contentClassName,
+              children: content
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Tooltip.displayName = "Tooltip";
+export {
+  Tooltip,
+  TooltipProvider
+};