@brijbyte/agentic-ui 0.0.1-beta → 0.0.1

package/src/tooltip/index.ts

@@ -0,0 +1,6 @@
+export { Tooltip } from "./tooltip";
+export type { TooltipProps } from "./tooltip";
+
+export { TooltipPositioner, TooltipPopup, TooltipArrow } from "./parts";
+export type { TooltipPositionerProps, TooltipPopupProps, TooltipArrowProps } from "./parts";
+export { TooltipStyles } from "./tooltip";

package/src/tooltip/parts.tsx

@@ -0,0 +1,62 @@
+/**
+ * Styled primitives for Tooltip.
+ *
+ * @example
+ * ```tsx
+ * import { Tooltip } from '@base-ui/react/tooltip';
+ * import { TooltipPositioner, TooltipPopup, TooltipArrow } from '@brijbyte/agentic-ui/tooltip';
+ *
+ * <Tooltip.Provider>
+ *   <Tooltip.Root>
+ *     <Tooltip.Trigger render={<button>Hover me</button>} />
+ *     <Tooltip.Portal>
+ *       <TooltipPositioner side="top" sideOffset={6}>
+ *         <TooltipPopup>
+ *           <TooltipArrow />
+ *           Tooltip content
+ *         </TooltipPopup>
+ *       </TooltipPositioner>
+ *     </Tooltip.Portal>
+ *   </Tooltip.Root>
+ * </Tooltip.Provider>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import styles from "./tooltip.module.css";
+
+type BasePositionerProps = ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>;
+type BasePopupProps = ComponentPropsWithoutRef<typeof BaseTooltip.Popup>;
+type BaseArrowProps = ComponentPropsWithoutRef<typeof BaseTooltip.Arrow>;
+
+export interface TooltipPositionerProps extends Omit<BasePositionerProps, "className"> {
+  className?: string;
+}
+export interface TooltipPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+export interface TooltipArrowProps extends Omit<BaseArrowProps, "className"> {
+  className?: string;
+}
+
+export const TooltipPositioner = forwardRef<ComponentRef<typeof BaseTooltip.Positioner>, TooltipPositionerProps>(function TooltipPositioner(
+  { className, ...props },
+  ref,
+) {
+  return <BaseTooltip.Positioner ref={ref} className={`${styles.positioner} ${className ?? ""}`} {...props} />;
+});
+
+export const TooltipPopup = forwardRef<ComponentRef<typeof BaseTooltip.Popup>, TooltipPopupProps>(function TooltipPopup(
+  { className, ...props },
+  ref,
+) {
+  return <BaseTooltip.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+});
+
+export const TooltipArrow = forwardRef<ComponentRef<typeof BaseTooltip.Arrow>, TooltipArrowProps>(function TooltipArrow(
+  { className, ...props },
+  ref,
+) {
+  return <BaseTooltip.Arrow ref={ref} className={`${styles.arrow} ${className ?? ""}`} {...props} />;
+});

package/src/tooltip/tooltip.module.css

@@ -0,0 +1,67 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .positioner {
+    z-index: var(--z-tooltip);
+  }
+
+  .popup {
+    background-color: var(--color-surface-3);
+    border: var(--border-width-base) solid var(--color-border-base);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-sm);
+    padding: var(--space-1) var(--space-2);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-text-primary);
+    line-height: var(--line-height-normal);
+    max-width: 240px;
+    word-break: break-word;
+
+    transform-origin: var(--transform-origin);
+    transition:
+      opacity 125ms var(--easing-ease-out),
+      transform 125ms var(--easing-ease-out);
+  }
+
+  /* Skip animation when moving between tooltips quickly */
+  .popup[data-instant] {
+    transition-duration: 0ms;
+  }
+
+  .popup[data-starting-style] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  .popup[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
+    transition:
+      opacity 75ms var(--easing-ease-in),
+      transform 75ms var(--easing-ease-in);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .popup {
+      transition: opacity 125ms var(--easing-ease-out);
+    }
+
+    .popup[data-ending-style] {
+      transition: opacity 75ms var(--easing-ease-in);
+    }
+
+    .popup[data-starting-style],
+    .popup[data-ending-style] {
+      transform: none;
+    }
+  }
+
+  .arrow {
+    width: 8px;
+    height: 8px;
+    fill: var(--color-surface-3);
+    stroke: var(--color-border-base);
+    stroke-width: 1;
+  }
+}

package/src/tooltip/tooltip.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode, ReactElement } from "react";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import styles from "./tooltip.module.css";
+
+export interface TooltipProps {
+  content: ReactNode;
+  children: ReactElement;
+  delay?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+}
+
+export function Tooltip({ content, children, delay = 400, side = "top", align = "center" }: TooltipProps) {
+  return (
+    <BaseTooltip.Provider delay={delay}>
+      <BaseTooltip.Root>
+        <BaseTooltip.Trigger render={children} />
+        <BaseTooltip.Portal>
+          <BaseTooltip.Positioner className={styles.positioner} side={side} align={align} sideOffset={6}>
+            <BaseTooltip.Popup className={styles.popup}>
+              <BaseTooltip.Arrow className={styles.arrow} />
+              {content}
+            </BaseTooltip.Popup>
+          </BaseTooltip.Positioner>
+        </BaseTooltip.Portal>
+      </BaseTooltip.Root>
+    </BaseTooltip.Provider>
+  );
+}
+export { styles as TooltipStyles };