@neynar/ui 0.3.1 → 0.5.0

package/dist/components/ui/tooltip.d.ts

@@ -1,326 +1,27 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+type TooltipProviderProps = TooltipPrimitive.Provider.Props;
 /**
- * TooltipProvider - Global context provider for tooltip functionality
- *
- * Wraps your application or component tree to enable tooltip functionality.
- * Controls global tooltip behavior such as delay duration before showing tooltips.
- * Required for tooltip components to function properly across your app.
- *
- * The provider manages global settings that affect all tooltips within its tree,
- * including timing behavior and accessibility features. Individual tooltips can
- * override these settings as needed.
- *
- * @example
- * ```tsx
- * // Wrap your entire app
- * <TooltipProvider>
- *   <App />
- * </TooltipProvider>
- * ```
- *
- * @example
- * ```tsx
- * // With custom delay and skip behavior
- * <TooltipProvider
- *   delayDuration={500}
- *   skipDelayDuration={200}
- * >
- *   <MyComponent />
- * </TooltipProvider>
- * ```
- *
- * @example
- * ```tsx
- * // Disable hoverable content for stricter accessibility
- * <TooltipProvider disableHoverableContent>
- *   <Form />
- * </TooltipProvider>
- * ```
- *
- * @accessibility
- * - Manages focus behavior and keyboard navigation globally
- * - Controls WCAG 2.1 compliance through hoverable content settings
- * - Provides consistent timing behavior across all tooltips
- * - Enables skip delay optimization for tooltip-heavy interfaces
- *
- * @see {@link https://ui.shadcn.com/docs/components/tooltip} for design patterns
- * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip} for Radix UI documentation
- * @since 1.0.0
+ * Tooltip provider with configurable delay.
+ * Manages shared tooltip state across nested tooltips.
  */
-declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipProvider({ delay, ...props }: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+type TooltipProps = TooltipPrimitive.Root.Props;
 /**
- * Tooltip - Display contextual information on hover or focus
- *
- * A versatile tooltip component built on Radix UI primitives that provides
- * contextual information when users hover over or focus on an element. Perfect
- * for displaying help text, definitions, or additional context without cluttering
- * the interface. Automatically wraps content in a TooltipProvider for convenience.
- *
- * The tooltip supports both controlled and uncontrolled usage patterns, with
- * intelligent positioning, collision detection, and smooth animations. Built
- * with accessibility as a priority, including proper ARIA attributes and
- * keyboard navigation support.
- *
- * @example
- * ```tsx
- * // Basic tooltip
- * <Tooltip>
- *   <TooltipTrigger asChild>
- *     <Button variant="outline">Hover me</Button>
- *   </TooltipTrigger>
- *   <TooltipContent>
- *     <p>This is a helpful tooltip</p>
- *   </TooltipContent>
- * </Tooltip>
- * ```
- *
- * @example
- * ```tsx
- * // Icon button with tooltip
- * import { Info } from "lucide-react"
- *
- * <Tooltip>
- *   <TooltipTrigger asChild>
- *     <Button variant="ghost" size="icon">
- *       <Info className="h-4 w-4" />
- *     </Button>
- *   </TooltipTrigger>
- *   <TooltipContent>
- *     <p>Additional information</p>
- *   </TooltipContent>
- * </Tooltip>
- * ```
- *
- * @example
- * ```tsx
- * // Controlled tooltip with custom delay
- * const [open, setOpen] = useState(false)
- *
- * <Tooltip
- *   open={open}
- *   onOpenChange={setOpen}
- *   delayDuration={300}
- * >
- *   <TooltipTrigger asChild>
- *     <Button onClick={() => setOpen(!open)}>Toggle</Button>
- *   </TooltipTrigger>
- *   <TooltipContent>
- *     <p>Controlled tooltip state</p>
- *   </TooltipContent>
- * </Tooltip>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled element with tooltip (requires wrapper)
- * <Tooltip>
- *   <TooltipTrigger asChild>
- *     <span className="inline-block">
- *       <Button disabled>Disabled Action</Button>
- *     </span>
- *   </TooltipTrigger>
- *   <TooltipContent>
- *     <p>You need to complete setup first</p>
- *   </TooltipContent>
- * </Tooltip>
- * ```
- *
- * @example
- * ```tsx
- * // Positioned tooltip with rich content
- * <Tooltip>
- *   <TooltipTrigger asChild>
- *     <Badge variant="secondary">API Key</Badge>
- *   </TooltipTrigger>
- *   <TooltipContent side="right" className="max-w-[250px]">
- *     <div className="space-y-1">
- *       <p className="font-medium">API Authentication</p>
- *       <p className="text-xs">Your key is used to authenticate requests</p>
- *     </div>
- *   </TooltipContent>
- * </Tooltip>
- * ```
- *
- * @accessibility
- * - Fully keyboard accessible (shows on focus, hides on blur)
- * - Screen reader compatible with proper ARIA attributes
- * - Escape key dismisses tooltip immediately
- * - Automatic positioning with collision detection
- * - Respects user's reduced motion preferences
- * - Portal rendering prevents z-index stacking issues
- * - WCAG 2.1 compliant with hoverable content support
- * - Works with assistive technologies and voice controls
- *
- * @see {@link https://ui.shadcn.com/docs/components/tooltip} for design patterns
- * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip} for Radix UI documentation
- * @see {@link Popover} - For interactive floating content
- * @see {@link HoverCard} - For rich content previews
- * @since 1.0.0
+ * Tooltip root component. Displays contextual information on hover or focus.
+ * Automatically wraps in TooltipProvider for convenience.
  */
-declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+type TooltipTriggerProps = TooltipPrimitive.Trigger.Props;
 /**
- * TooltipTrigger - The element that triggers the tooltip display
- *
- * Wraps the element that will show the tooltip on hover or focus.
- * Use the `asChild` prop to merge props with the child element rather
- * than rendering an additional wrapper element. Essential for maintaining
- * semantic meaning and avoiding unnecessary DOM nesting.
- *
- * The trigger automatically handles all interaction events including mouse hover,
- * touch interactions, keyboard focus, and blur events. It preserves the original
- * element's accessibility properties while adding tooltip functionality.
- *
- * @example
- * ```tsx
- * // Basic trigger with button
- * <TooltipTrigger asChild>
- *   <Button>Hover me</Button>
- * </TooltipTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // With icon button
- * <TooltipTrigger asChild>
- *   <Button variant="ghost" size="icon">
- *     <Settings className="h-4 w-4" />
- *   </Button>
- * </TooltipTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // With disabled element (requires wrapper for pointer events)
- * <TooltipTrigger asChild>
- *   <span className="inline-block cursor-not-allowed">
- *     <Button disabled>Disabled Action</Button>
- *   </span>
- * </TooltipTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // With custom element
- * <TooltipTrigger asChild>
- *   <div
- *     role="button"
- *     tabIndex={0}
- *     className="cursor-pointer p-2 rounded hover:bg-gray-100"
- *   >
- *     Custom trigger element
- *   </div>
- * </TooltipTrigger>
- * ```
- *
- * @accessibility
- * - Automatically handles hover, focus, and blur events
- * - Preserves existing keyboard navigation patterns
- * - Maintains semantic meaning and ARIA attributes of wrapped element
- * - Works with disabled elements when properly wrapped with pointer-events
- * - Supports all standard HTML interactive elements
- * - Respects existing tab order and focus management
- * - Compatible with screen readers and assistive technologies
- *
- * @see {@link https://www.radix-ui.com/primitives/docs/guides/composition} for asChild pattern
- * @since 1.0.0
+ * Trigger element that shows the tooltip on hover or focus.
+ * Use `render` prop to customize with any focusable element.
  */
-declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ...props }: TooltipTriggerProps): import("react/jsx-runtime").JSX.Element;
+type TooltipContentProps = TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">;
 /**
- * TooltipContent - The floating tooltip content container
- *
- * Contains the content displayed in the tooltip popup. Automatically positioned
- * relative to the trigger element with intelligent collision detection to ensure
- * the tooltip stays within the viewport. Includes smooth animations and an arrow
- * pointer for visual connection to the trigger.
- *
- * The content component handles complex positioning logic, including collision
- * detection, viewport boundaries, and responsive positioning. It supports rich
- * content including text, images, and interactive elements while maintaining
- * accessibility standards.
- *
- * @example
- * ```tsx
- * // Simple text tooltip
- * <TooltipContent>
- *   <p>This is helpful information</p>
- * </TooltipContent>
- * ```
- *
- * @example
- * ```tsx
- * // Positioned tooltip with custom offset
- * <TooltipContent
- *   side="left"
- *   sideOffset={12}
- *   align="start"
- *   alignOffset={-4}
- * >
- *   <p>Precisely positioned tooltip</p>
- * </TooltipContent>
- * ```
- *
- * @example
- * ```tsx
- * // Rich content with custom styling
- * <TooltipContent className="max-w-[320px] p-4">
- *   <div className="space-y-2">
- *     <div className="flex items-center gap-2">
- *       <InfoIcon className="h-4 w-4 text-blue-500" />
- *       <p className="font-semibold">Pro Feature</p>
- *     </div>
- *     <p className="text-sm text-gray-600">
- *       This feature is available in Pro plans. Upgrade to unlock
- *       advanced functionality and premium support.
- *     </p>
- *     <Button size="sm" className="mt-2">Upgrade Now</Button>
- *   </div>
- * </TooltipContent>
- * ```
- *
- * @example
- * ```tsx
- * // Tooltip with collision boundary
- * <TooltipContent
- *   collisionPadding={{ top: 10, bottom: 10 }}
- *   hideWhenDetached
- *   sticky="always"
- * >
- *   <p>Stays within safe boundaries</p>
- * </TooltipContent>
- * ```
- *
- * @example
- * ```tsx
- * // Controlled tooltip with escape handling
- * <TooltipContent
- *   onEscapeKeyDown={(e) => {
- *     console.log('Tooltip dismissed with Escape');
- *     // Custom handling if needed
- *   }}
- *   onPointerDownOutside={(e) => {
- *     console.log('Clicked outside tooltip');
- *   }}
- * >
- *   <p>Interactive tooltip with event handlers</p>
- * </TooltipContent>
- * ```
- *
- * @accessibility
- * - Rendered in a portal to avoid z-index stacking issues
- * - Properly announced by screen readers with role="tooltip"
- * - Smooth animations respect reduced motion preferences
- * - Arrow provides visual connection to trigger element
- * - Automatically dismisses when trigger loses focus
- * - Escape key immediately closes tooltip
- * - Supports aria-label for screen reader context
- * - Focus is managed properly for hoverable content
- * - Compatible with high contrast themes
- *
- * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#content} for positioning details
- * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/} for ARIA tooltip pattern
- * @since 1.0.0
+ * Tooltip content popup with automatic portal, positioning, and arrow.
+ * Includes smooth animations and collision detection.
  */
-declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipProps, type TooltipTriggerProps, type TooltipContentProps, type TooltipProviderProps, };
 //# sourceMappingURL=tooltip.d.ts.map

package/dist/components/ui/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AA0F5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,iBAAS,eAAe,CAAC,EACvB,aAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,2CAQxD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4GG;AACH,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAMpD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAEvD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAiBvD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,KAAK,oBAAoB,GAAG,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;AAE5D;;;GAGG;AACH,iBAAS,eAAe,CAAC,EAAE,KAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAQrE;AAED,KAAK,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;AAEhD;;;GAGG;AACH,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAM1C;AAED,KAAK,mBAAmB,GAAG,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC;AAE1D;;;GAGG;AACH,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAExD;AAED,KAAK,mBAAmB,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAK,GACrD,IAAI,CACF,gBAAgB,CAAC,UAAU,CAAC,KAAK,EACjC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAChD,CAAC;AAEJ;;;GAGG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAY,EACZ,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAwBrB;AAED,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,eAAe,EACf,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,CAAC"}

package/dist/components/ui/tooltip.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { TooltipRoot } from "../../node_modules/@base-ui/react/esm/tooltip/root/TooltipRoot.js";
+import { TooltipTrigger as TooltipTrigger$1 } from "../../node_modules/@base-ui/react/esm/tooltip/trigger/TooltipTrigger.js";
+import { TooltipPortal } from "../../node_modules/@base-ui/react/esm/tooltip/portal/TooltipPortal.js";
+import { TooltipPositioner } from "../../node_modules/@base-ui/react/esm/tooltip/positioner/TooltipPositioner.js";
+import { TooltipPopup } from "../../node_modules/@base-ui/react/esm/tooltip/popup/TooltipPopup.js";
+import { TooltipArrow } from "../../node_modules/@base-ui/react/esm/tooltip/arrow/TooltipArrow.js";
+import { TooltipProvider as TooltipProvider$1 } from "../../node_modules/@base-ui/react/esm/tooltip/provider/TooltipProvider.js";
+function TooltipProvider({ delay = 0, ...props }) {
+  return /* @__PURE__ */ jsx(
+    TooltipProvider$1,
+    {
+      "data-slot": "tooltip-provider",
+      delay,
+      ...props
+    }
+  );
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipRoot, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(TooltipTrigger$1, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
+    TooltipPositioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs(
+        TooltipPopup,
+        {
+          "data-slot": "tooltip-content",
+          className: cn(
+            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsx(TooltipArrow, { className: "size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
+          ]
+        }
+      )
+    }
+  ) });
+}
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/components/ui/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/ui/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype TooltipProviderProps = TooltipPrimitive.Provider.Props;\n\n/**\n * Tooltip provider with configurable delay.\n * Manages shared tooltip state across nested tooltips.\n */\nfunction TooltipProvider({ delay = 0, ...props }: TooltipProviderProps) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  );\n}\n\ntype TooltipProps = TooltipPrimitive.Root.Props;\n\n/**\n * Tooltip root component. Displays contextual information on hover or focus.\n * Automatically wraps in TooltipProvider for convenience.\n */\nfunction Tooltip({ ...props }: TooltipProps) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\ntype TooltipTriggerProps = TooltipPrimitive.Trigger.Props;\n\n/**\n * Trigger element that shows the tooltip on hover or focus.\n * Use `render` prop to customize with any focusable element.\n */\nfunction TooltipTrigger({ ...props }: TooltipTriggerProps) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\ntype TooltipContentProps = TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >;\n\n/**\n * Tooltip content popup with automatic portal, positioning, and arrow.\n * Includes smooth animations and collision detection.\n */\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipContentProps) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipContentProps,\n  type TooltipProviderProps,\n};\n"],"names":["TooltipPrimitive.Provider","TooltipPrimitive.Positioner","TooltipPrimitive.Popup"],"mappings":";;;;;;;;;;AAYA;AACE;AACE;AAACA;AAAA;AACW;AACV;AACI;AAAA;AAGV;AAQA;AACE;AAKF;AAQA;AACE;AACF;AAYA;AAAwB;AACtB;AACO;AACM;AACL;AACM;AACd;AAEF;AACE;AAEI;AAACC;AAAA;AACC;AACA;AACA;AACA;AACU;AAEV;AAACC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAEH;AAAA;AACyW;AAAA;AAAA;AAAA;AAC5W;AAIR;;;;;;;"}

package/dist/hooks/use-mobile.d.ts

@@ -1,74 +1,18 @@
 /**
- * Hook for detecting mobile viewport width based on Tailwind CSS breakpoints
+ * Detects mobile viewport using matchMedia.
+ * Returns `false` during SSR/hydration, then updates reactively on resize.
  *
- * A React hook that monitors viewport width and returns true when the width
- * is less than 768px (Tailwind's `md` breakpoint). This hook provides a
- * consistent way to conditionally render mobile and desktop layouts, following
- * the same responsive patterns used throughout the shadcn/ui ecosystem.
- *
- * The hook uses `window.matchMedia` for efficient viewport monitoring and
- * properly handles server-side rendering by returning `false` initially,
- * then updating on the client side.
- *
- * @returns `true` if viewport width is less than 768px, `false` otherwise
- *
- * @example
- * Basic responsive layout switching
- * ```tsx
- * function ResponsiveComponent() {
- *   const isMobile = useIsMobile();
- *
- *   return (
- *     <div>
- *       {isMobile ? (
- *         <MobileLayout />
- *       ) : (
- *         <DesktopLayout />
- *       )}
- *     </div>
- *   );
- * }
- * ```
+ * @returns `true` when viewport width < 768px, `false` otherwise
  *
  * @example
- * Conditional navigation rendering
  * ```tsx
- * function Navigation() {
- *   const isMobile = useIsMobile();
+ * import { useIsMobile } from "@neynar/ui/hooks/use-mobile"
  *
- *   if (isMobile) {
- *     return <Sheet><MobileNavContent /></Sheet>;
- *   }
- *
- *   return <NavigationMenu><DesktopNavContent /></NavigationMenu>;
+ * function ResponsiveLayout() {
+ *   const isMobile = useIsMobile()
+ *   return isMobile ? <MobileNav /> : <DesktopNav />
  * }
  * ```
- *
- * @example
- * Responsive component behavior within forms
- * ```tsx
- * function SearchDialog() {
- *   const isMobile = useIsMobile();
- *
- *   if (isMobile) {
- *     return <Drawer><SearchForm /></Drawer>;
- *   }
- *
- *   return <Dialog><SearchForm /></Dialog>;
- * }
- * ```
- *
- * @remarks
- * - Uses the standard 768px breakpoint matching Tailwind's `md` breakpoint
- * - Similar pattern to `isMobile` property in shadcn/ui's `useSidebar` hook
- * - Handles viewport resize events automatically
- * - SSR-safe implementation prevents hydration mismatches
- * - Respects user's browser zoom settings
- *
- * @see {@link https://tailwindcss.com/docs/responsive-design} Tailwind CSS responsive design
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia} MDN matchMedia documentation
- *
- * @since 1.0.0
  */
 export declare function useIsMobile(): boolean;
 //# sourceMappingURL=use-mobile.d.ts.map

package/dist/hooks/use-mobile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,wBAAgB,WAAW,YAc1B"}
+{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,YAgB1B"}

package/dist/hooks/use-mobile.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(
+    void 0
+  );
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+export {
+  useIsMobile
+};
+//# sourceMappingURL=use-mobile.js.map

package/dist/hooks/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.js","sources":["../../src/hooks/use-mobile.ts"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\n/**\n * Detects mobile viewport using matchMedia.\n * Returns `false` during SSR/hydration, then updates reactively on resize.\n *\n * @returns `true` when viewport width < 768px, `false` otherwise\n *\n * @example\n * ```tsx\n * import { useIsMobile } from \"@neynar/ui/hooks/use-mobile\"\n *\n * function ResponsiveLayout() {\n *   const isMobile = useIsMobile()\n *   return isMobile ? <MobileNav /> : <DesktopNav />\n * }\n * ```\n */\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return !!isMobile;\n}\n"],"names":[],"mappings":";AAEA,MAAM,oBAAoB;AAkBnB,SAAS,cAAc;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM;AAAA,IACpC;AAAA,EAAA;AAGF,QAAM,UAAU,MAAM;AACpB,UAAM,MAAM,OAAO,WAAW,eAAe,oBAAoB,CAAC,KAAK;AACvE,UAAM,WAAW,MAAM;AACrB,kBAAY,OAAO,aAAa,iBAAiB;AAAA,IACnD;AACA,QAAI,iBAAiB,UAAU,QAAQ;AACvC,gBAAY,OAAO,aAAa,iBAAiB;AACjD,WAAO,MAAM,IAAI,oBAAoB,UAAU,QAAQ;AAAA,EACzD,GAAG,CAAA,CAAE;AAEL,SAAO,CAAC,CAAC;AACX;"}

package/dist/lib/utils.d.ts

@@ -1,43 +1,23 @@
-import { type ClassValue } from "clsx";
+import { ClassValue } from 'clsx';
 /**
- * cn - Combines class names with Tailwind CSS conflict resolution
+ * Merges class names with Tailwind CSS conflict resolution.
+ * Combines `clsx` (conditional classes) + `tailwind-merge` (deduplication).
  *
- * This utility function combines multiple class names into a single string,
- * automatically resolving Tailwind CSS class conflicts. It uses clsx for
- * conditional class handling and tailwind-merge to ensure later classes
- * override earlier ones when they conflict.
- *
- * @param inputs - Class names to combine. Can be strings, objects, arrays,
- *                 undefined, null, or boolean values
- * @returns A single string of combined and merged class names
+ * @param inputs - Class values: strings, arrays, objects, or conditionals
+ * @returns Merged and deduplicated class string
  *
  * @example
  * ```tsx
- * // Basic usage
- * cn("px-2 py-1", "bg-blue-500", "text-white")
- * // Returns: "px-2 py-1 bg-blue-500 text-white"
- * ```
+ * // Conditional classes
+ * cn("px-4 py-2", isActive && "bg-primary", className)
  *
- * @example
- * ```tsx
- * // With conditional classes
- * cn(
- *   "base-class",
- *   isActive && "active-class",
- *   isDisabled && "disabled-class"
- * )
- * ```
+ * // Tailwind conflict resolution (last wins)
+ * cn("text-red-500", "text-blue-500") // → "text-blue-500"
+ * cn("px-4 py-2", "px-8") // → "px-8 py-2"
  *
- * @example
- * ```tsx
- * // Overriding Tailwind classes
- * cn("px-4", "px-2") // Returns: "px-2" (later class wins)
- * cn("text-red-500", "text-blue-500") // Returns: "text-blue-500"
+ * // Objects and arrays
+ * cn({ "opacity-50": disabled }, ["flex", "items-center"])
  * ```
- *
- * @see {@link https://github.com/lukeed/clsx} - clsx documentation
- * @see {@link https://github.com/dcastil/tailwind-merge} - tailwind-merge documentation
- * @since 1.0.0
  */
 export declare function cn(...inputs: ClassValue[]): string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAc7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.js

@@ -0,0 +1,9 @@
+import { clsx } from "../node_modules/clsx/dist/clsx.js";
+import { twMerge } from "../node_modules/tailwind-merge/dist/bundle-mjs.js";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export {
+  cn
+};
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merges class names with Tailwind CSS conflict resolution.\n * Combines `clsx` (conditional classes) + `tailwind-merge` (deduplication).\n *\n * @param inputs - Class values: strings, arrays, objects, or conditionals\n * @returns Merged and deduplicated class string\n *\n * @example\n * ```tsx\n * // Conditional classes\n * cn(\"px-4 py-2\", isActive && \"bg-primary\", className)\n *\n * // Tailwind conflict resolution (last wins)\n * cn(\"text-red-500\", \"text-blue-500\") // → \"text-blue-500\"\n * cn(\"px-4 py-2\", \"px-8\") // → \"px-8 py-2\"\n *\n * // Objects and arrays\n * cn({ \"opacity-50\": disabled }, [\"flex\", \"items-center\"])\n * ```\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"names":[],"mappings":";;AAuBO,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;"}