@carefully-built/cli 0.1.1 → 0.1.2

package/registry/ui/help-info-button/overlays/responsive-sheet.shortcuts.ts

@@ -0,0 +1,103 @@
+import { useEffect, useState } from "react";
+
+interface NavigatorWithUserAgentData extends Navigator {
+  readonly userAgentData?: {
+    readonly platform?: string;
+  };
+}
+
+export function getDesktopShortcutModifierLabel(): string {
+  if (typeof navigator === "undefined") {
+    return "Ctrl";
+  }
+
+  const navigatorWithUserAgentData = navigator as NavigatorWithUserAgentData;
+  const platform =
+    navigatorWithUserAgentData.userAgentData?.platform ?? navigator.userAgent;
+
+  return /Mac|iPhone|iPad|iPod/i.test(platform) ? "Cmd" : "Ctrl";
+}
+
+export function isAllowedConfirmShortcutEvent(
+  event: KeyboardEvent,
+  desktopModifierLabel: string,
+): boolean {
+  if (event.key !== "Enter" || event.repeat || event.isComposing) {
+    return false;
+  }
+
+  const expectsMetaKey = desktopModifierLabel === "Cmd";
+  const usedExpectedModifier = expectsMetaKey ? event.metaKey : event.ctrlKey;
+  const usedOtherModifier = expectsMetaKey ? event.ctrlKey : event.metaKey;
+  const usedShiftModifier = event.shiftKey;
+  const usedAltModifier = event.altKey;
+
+  if (
+    !usedExpectedModifier ||
+    usedOtherModifier ||
+    usedShiftModifier ||
+    usedAltModifier
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+export function useDesktopShortcutModifierLabel(
+  enabled: boolean,
+): string | null {
+  const [desktopModifierLabel, setDesktopModifierLabel] = useState<
+    string | null
+  >(null);
+
+  useEffect(() => {
+    if (!enabled) {
+      setDesktopModifierLabel(null);
+      return;
+    }
+
+    setDesktopModifierLabel(getDesktopShortcutModifierLabel());
+  }, [enabled]);
+
+  return desktopModifierLabel;
+}
+
+interface UseDesktopConfirmShortcutOptions {
+  readonly open: boolean;
+  readonly enabled: boolean;
+  readonly confirmDisabled: boolean;
+  readonly confirmLoading: boolean;
+  readonly onConfirm?: () => void;
+}
+
+export function useDesktopConfirmShortcut({
+  open,
+  enabled,
+  confirmDisabled,
+  confirmLoading,
+  onConfirm,
+}: UseDesktopConfirmShortcutOptions): void {
+  useEffect(() => {
+    if (!open || !enabled || !onConfirm || confirmDisabled || confirmLoading) {
+      return;
+    }
+
+    const desktopModifierLabel = getDesktopShortcutModifierLabel();
+
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (!isAllowedConfirmShortcutEvent(event, desktopModifierLabel)) {
+        return;
+      }
+
+      event.preventDefault();
+      onConfirm();
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [confirmDisabled, confirmLoading, enabled, onConfirm, open]);
+}

package/registry/ui/help-info-button/overlays/responsive-sheet.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { SheetActionFooter } from '@/components/ui/responsive-sheet.footer';
+import { DesktopSheetLayout, MobileSheetLayout } from '@/components/ui/responsive-sheet.layouts';
+import {
+  useDesktopConfirmShortcut,
+  useDesktopShortcutModifierLabel,
+} from '@/components/ui/responsive-sheet.shortcuts';
+import { cn } from '@/lib/utils';
+import { useIsMobile } from '@/components/ui/use-media-query';
+
+export interface SheetOutsideInteractionGuard {
+  readonly selectors: readonly string[];
+}
+
+export interface ResponsiveSheetClassNames {
+  readonly desktopContent?: string;
+  readonly mobileContent?: string;
+  readonly header?: string;
+  readonly body?: string;
+  readonly footer?: string;
+  readonly title?: string;
+  readonly description?: string;
+}
+
+export interface ResponsiveSheetProps {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly title: ReactNode;
+  readonly description?: ReactNode;
+  readonly children: ReactNode;
+  readonly footer?: ReactNode;
+  readonly onCancel?: () => void;
+  readonly cancelLabel?: ReactNode;
+  readonly onConfirm?: () => void;
+  readonly confirmLabel?: ReactNode;
+  readonly confirmDisabled?: boolean;
+  readonly confirmLoading?: boolean;
+  readonly width?: number;
+  readonly modal?: boolean;
+  readonly outsideInteractionGuard?: SheetOutsideInteractionGuard;
+  readonly enableDesktopConfirmShortcut?: boolean;
+  readonly mobileDrawerContentClassName?: string;
+  readonly className?: string;
+  readonly contentClassName?: string;
+  readonly footerClassName?: string;
+  readonly classes?: ResponsiveSheetClassNames;
+}
+
+export function ResponsiveSheet({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  onCancel,
+  cancelLabel = 'Cancel',
+  onConfirm,
+  confirmLabel = 'Save',
+  confirmDisabled = false,
+  confirmLoading = false,
+  width = 550,
+  modal = true,
+  outsideInteractionGuard,
+  enableDesktopConfirmShortcut = true,
+  mobileDrawerContentClassName,
+  className,
+  contentClassName,
+  footerClassName,
+  classes,
+}: ResponsiveSheetProps): React.ReactElement {
+  const isMobile = useIsMobile();
+  const desktopConfirmShortcutEnabled =
+    !isMobile && enableDesktopConfirmShortcut && Boolean(onConfirm);
+  const desktopModifierLabel = useDesktopShortcutModifierLabel(desktopConfirmShortcutEnabled);
+
+  useDesktopConfirmShortcut({
+    open,
+    enabled: desktopConfirmShortcutEnabled,
+    confirmDisabled,
+    confirmLoading,
+    onConfirm: onConfirm
+      ? () => {
+          onConfirm();
+        }
+      : undefined,
+  });
+
+  const resolvedFooter = (
+    <SheetActionFooter
+      footer={footer}
+      onCancel={onCancel}
+      cancelLabel={cancelLabel}
+      onConfirm={onConfirm}
+      confirmLabel={confirmLabel}
+      confirmDisabled={confirmDisabled}
+      confirmLoading={confirmLoading}
+      desktopConfirmShortcutEnabled={desktopConfirmShortcutEnabled}
+      desktopModifierLabel={desktopModifierLabel}
+    />
+  );
+  const hasFooter = [footer, onCancel, onConfirm].some(
+    (value) => value !== null && value !== undefined,
+  );
+  const sharedLayoutProps = {
+    open,
+    onOpenChange,
+    modal,
+    outsideInteractionGuard,
+    title,
+    description,
+    footer: hasFooter ? resolvedFooter : null,
+    children,
+    contentClassName,
+    footerClassName,
+    mobileDrawerContentClassName,
+    classes: {
+      ...classes,
+      desktopContent: cn(className, classes?.desktopContent),
+      mobileContent: cn(className, mobileDrawerContentClassName, classes?.mobileContent),
+    },
+  };
+
+  return isMobile ? (
+    <MobileSheetLayout {...sharedLayoutProps} />
+  ) : (
+    <DesktopSheetLayout {...sharedLayoutProps} width={width} />
+  );
+}

package/registry/ui/help-info-button/primitives/button.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:brightness-90 [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonVariant =
+  | "default"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | "destructive"
+  | "link";
+type ButtonSize =
+  | "default"
+  | "xs"
+  | "sm"
+  | "lg"
+  | "icon"
+  | "icon-xs"
+  | "icon-sm"
+  | "icon-lg";
+
+interface ButtonProps extends React.ComponentProps<"button"> {
+  readonly asChild?: boolean;
+  readonly size?: ButtonSize;
+  readonly variant?: ButtonVariant;
+}
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
+export type { ButtonProps, ButtonSize, ButtonVariant };

package/registry/ui/help-info-button/primitives/drawer.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '@/lib/utils';
+
+function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 backdrop-blur-xs',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'bg-background group/drawer-content fixed z-50 flex h-auto flex-col overflow-visible text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('text-foreground text-base font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+};

package/registry/ui/help-info-button/primitives/help-info-button.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { CircleHelp } from "lucide-react";
+import { useState, type ReactNode } from "react";
+
+import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+export interface HelpInfoButtonProps {
+  readonly ariaLabel: string;
+  readonly tooltip: ReactNode;
+  readonly title: ReactNode;
+  readonly description?: ReactNode;
+  readonly children: ReactNode;
+  readonly width?: number;
+}
+
+export function HelpInfoButton({
+  ariaLabel,
+  tooltip,
+  title,
+  description,
+  children,
+  width = 620,
+}: HelpInfoButtonProps): React.ReactElement {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-6 text-muted-foreground hover:text-foreground"
+            aria-label={ariaLabel}
+            onClick={() => {
+              setOpen(true);
+            }}
+          >
+            <CircleHelp className="size-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </Tooltip>
+      <ResponsiveSheet
+        open={open}
+        onOpenChange={setOpen}
+        title={title}
+        description={description}
+        cancelLabel="Close"
+        onCancel={() => {
+          setOpen(false);
+        }}
+        width={width}
+      >
+        {children}
+      </ResponsiveSheet>
+    </>
+  );
+}

package/registry/ui/help-info-button/primitives/keyboard-shortcut-hint.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { Command } from 'lucide-react';
+
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+export function KeyboardKeycap({
+  children,
+  className,
+}: {
+  readonly children: ReactNode;
+  readonly className?: string;
+}): React.ReactElement {
+  return (
+    <span
+      className={cn(
+        'inline-flex h-4 min-w-4 items-center justify-center rounded-[4px] border px-1 text-[9px] font-semibold leading-none',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function ShortcutModifierKeycap({
+  modifierLabel,
+  className,
+}: {
+  readonly modifierLabel: string;
+  readonly className?: string;
+}): React.ReactElement {
+  return (
+    <KeyboardKeycap className={className}>
+      {modifierLabel === 'Cmd' ? <Command className="size-[10px]" /> : 'Ctrl'}
+    </KeyboardKeycap>
+  );
+}

package/registry/ui/help-info-button/primitives/sheet.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { X } from 'lucide-react';
+import * as React from 'react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 backdrop-blur-xs duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          'bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 overflow-visible bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:rounded-r-xl data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:rounded-l-xl data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+              <X className="size-4" />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        ) : null}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-0.5 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground text-base font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle };

package/registry/ui/help-info-button/primitives/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        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 bg-foreground px-3 py-1.5 text-xs text-background z-50 w-fit max-w-[min(20rem,calc(100vw-1.5rem))] whitespace-normal break-words origin-(--radix-tooltip-content-transform-origin)",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="size-2.5 rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/registry/ui/help-info-button/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}