@sixthshift/design-system 0.1.0

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,111 @@
+import { FloatingPortal, type FloatingPortalProps } from "@floating-ui/react";
+import { Button } from "@sixthshift/design-system/button";
+import { usePresence } from "@sixthshift/design-system/hooks";
+import { Message, MessageBody, MessageDescription, MessageIcon, type MessageProps, MessageTitle } from "@sixthshift/design-system/message";
+import { cn } from "@sixthshift/design-system/utils";
+import { X } from "lucide-react";
+import * as React from "react";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type ToastProps = Omit<MessageProps, "size"> & {
+  /** Called when toast closes (after exit animation) */
+  onClose?: () => void;
+  /** Optional action button label */
+  action?: string;
+  /** Called when action button is clicked */
+  onAction?: () => void;
+  /** Portal root element (default: document.body) */
+  root?: FloatingPortalProps["root"];
+  /**
+   * Whether Toast should render in a portal and position itself.
+   * Set to false when Toast is rendered by a parent that handles positioning (e.g., OverlayContext).
+   * @default true
+   */
+  standalone?: boolean;
+};
+
+// =============================================================================
+// Toast
+// =============================================================================
+
+export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
+  ({ className, intent = "neutral", title, icon, action, onAction, onClose, root, standalone = true, children, ...props }, ref) => {
+    const { ref: presenceRef, state, isMounted, show, hide } = usePresence();
+
+    // Start enter animation on mount
+    React.useEffect(() => {
+      show();
+    }, [show]);
+
+    // Handle close with exit animation
+    const handleClose = React.useCallback(() => {
+      hide(() => {
+        onClose?.();
+      });
+    }, [hide, onClose]);
+
+    // Merge refs
+    const mergedRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        presenceRef(node);
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [presenceRef, ref]
+    );
+
+    if (!isMounted) return null;
+
+    const isEntering = state === "entering";
+    const isExiting = state === "exiting";
+
+    const content = (
+      <div
+        ref={mergedRef}
+        className={cn(
+          "max-w-sm shadow-lg",
+          standalone && "fixed bottom-6 left-1/2 z-toast -translate-x-1/2",
+          isEntering && "animate-fade-in",
+          isExiting && "animate-fade-out",
+          className
+        )}
+        {...props}
+      >
+        <Message intent={intent}>
+          {icon && <MessageIcon>{icon}</MessageIcon>}
+          <MessageBody>
+            {title && <MessageTitle>{title}</MessageTitle>}
+            <MessageDescription>
+              {children}
+              {action && (
+                <div className="mt-2">
+                  <Button variant="link" size="sm" className="h-auto p-0 font-medium" onClick={onAction}>
+                    {action}
+                  </Button>
+                </div>
+              )}
+            </MessageDescription>
+          </MessageBody>
+          {onClose && (
+            <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0 opacity-70 hover:opacity-100" onClick={handleClose} aria-label="Dismiss">
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </Message>
+      </div>
+    );
+
+    if (standalone) {
+      return <FloatingPortal {...(root ? { root } : {})}>{content}</FloatingPortal>;
+    }
+
+    return content;
+  }
+);
+Toast.displayName = "Toast";

package/src/components/Toast/index.ts

@@ -0,0 +1 @@
+export { Toast, type ToastProps } from "./Toast";

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,72 @@
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { cn } from "@sixthshift/design-system/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { buttonVariants } from "../Button/Button";
+
+/**
+ * Pressed-state backgrounds matching Button's active: states.
+ * When a toggle is "on", its resting background becomes the pressed token.
+ */
+const togglePressedVariants = cva("", {
+  variants: {
+    variant: { solid: "", outline: "", ghost: "", link: "" },
+    intent: { neutral: "", danger: "", success: "", warning: "" },
+  },
+  compoundVariants: [
+    // Solid — use the main -pressed background
+    { variant: "solid", intent: "neutral", className: "bg-bg-brand-pressed hover:bg-bg-brand-pressed" },
+    { variant: "solid", intent: "danger", className: "bg-bg-danger-pressed hover:bg-bg-danger-pressed" },
+    { variant: "solid", intent: "success", className: "bg-bg-success-pressed hover:bg-bg-success-pressed" },
+    { variant: "solid", intent: "warning", className: "bg-bg-warning-pressed hover:bg-bg-warning-pressed" },
+    // Outline — use the subtle -pressed background
+    { variant: "outline", intent: "neutral", className: "bg-bg-subtle-pressed text-fg-normal hover:bg-bg-subtle-pressed" },
+    { variant: "outline", intent: "danger", className: "bg-bg-danger-subtle-pressed text-fg-on-danger-subtle-pressed hover:bg-bg-danger-subtle-pressed" },
+    { variant: "outline", intent: "success", className: "bg-bg-success-subtle-pressed text-fg-on-success-subtle-pressed hover:bg-bg-success-subtle-pressed" },
+    { variant: "outline", intent: "warning", className: "bg-bg-warning-subtle-pressed text-fg-on-warning-subtle-pressed hover:bg-bg-warning-subtle-pressed" },
+    // Ghost — same as outline
+    { variant: "ghost", intent: "neutral", className: "bg-bg-subtle-pressed text-fg-normal hover:bg-bg-subtle-pressed" },
+    { variant: "ghost", intent: "danger", className: "bg-bg-danger-subtle-pressed text-fg-on-danger-subtle-pressed hover:bg-bg-danger-subtle-pressed" },
+    { variant: "ghost", intent: "success", className: "bg-bg-success-subtle-pressed text-fg-on-success-subtle-pressed hover:bg-bg-success-subtle-pressed" },
+    { variant: "ghost", intent: "warning", className: "bg-bg-warning-subtle-pressed text-fg-on-warning-subtle-pressed hover:bg-bg-warning-subtle-pressed" },
+  ],
+  defaultVariants: { variant: "solid", intent: "neutral" },
+});
+
+export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> &
+  VariantProps<typeof buttonVariants> & {
+    /** Controlled pressed state */
+    pressed?: boolean;
+    /** Default pressed state for uncontrolled mode */
+    defaultPressed?: boolean;
+    /** Called when pressed state changes */
+    onPressedChange?: (pressed: boolean) => void;
+  };
+
+const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+  ({ className, variant, intent, size, pressed: controlledPressed, defaultPressed = false, onPressedChange, disabled, children, ...props }, ref) => {
+    const [pressed, setPressed] = useControllableState({
+      value: controlledPressed,
+      defaultValue: defaultPressed,
+      onChange: onPressedChange,
+    });
+
+    return (
+      <button
+        type="button"
+        aria-pressed={pressed}
+        data-state={pressed ? "on" : "off"}
+        disabled={disabled}
+        ref={ref}
+        onClick={() => setPressed(!pressed)}
+        className={cn(buttonVariants({ variant, intent, size }), pressed && togglePressedVariants({ variant, intent }), className)}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+
+export { Toggle, togglePressedVariants };

package/src/components/Toggle/index.ts

@@ -0,0 +1 @@
+export { Toggle, type ToggleProps, togglePressedVariants } from "./Toggle";

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { ToggleGroupMultiple } from "./ToggleGroupMultiple";
+import { ToggleGroupSingle } from "./ToggleGroupSingle";
+import type { ToggleGroupProps } from "./toggleGroup.types";
+
+const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>((props, ref) => {
+  if (props.type === "multiple") {
+    return <ToggleGroupMultiple ref={ref} {...props} />;
+  }
+  return <ToggleGroupSingle ref={ref} {...props} />;
+});
+ToggleGroup.displayName = "ToggleGroup";
+
+export { ToggleGroup };

package/src/components/ToggleGroup/ToggleGroupContainer.tsx

@@ -0,0 +1,19 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+import type { ToggleGroupBaseProps } from "./toggleGroup.types";
+
+type ContainerProps = React.HTMLAttributes<HTMLDivElement> & Required<Pick<ToggleGroupBaseProps, "appearance" | "orientation">>;
+
+const ToggleGroupContainer = React.forwardRef<HTMLDivElement, ContainerProps>(({ appearance, orientation, className, children, ...props }, ref) => {
+  const isVertical = orientation === "vertical";
+  const isSegmented = appearance === "segmented";
+
+  return (
+    <div ref={ref} className={cn("inline-flex", isVertical ? "flex-col" : "flex-row", !isSegmented && "gap-2", className)} {...props}>
+      {children}
+    </div>
+  );
+});
+ToggleGroupContainer.displayName = "ToggleGroupContainer";
+
+export { ToggleGroupContainer };

package/src/components/ToggleGroup/ToggleGroupItem.tsx

@@ -0,0 +1,51 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+import { buttonVariants } from "../Button/Button";
+import { togglePressedVariants } from "../Toggle/Toggle";
+import type { ToggleGroupBaseProps, ToggleGroupOption } from "./toggleGroup.types";
+
+type ItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  Required<Pick<ToggleGroupBaseProps, "appearance" | "orientation" | "variant" | "intent" | "size">> & {
+    option: ToggleGroupOption;
+    selected: boolean;
+    groupDisabled?: boolean | undefined;
+    index: number;
+    total: number;
+  };
+
+const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ItemProps>(
+  ({ option, selected, groupDisabled, appearance, orientation, variant, intent, size, index, total, ...props }, ref) => {
+    const isDisabled = groupDisabled || option.disabled;
+    const isFirst = index === 0;
+    const isLast = index === total - 1;
+    const isVertical = orientation === "vertical";
+    const isSegmented = appearance === "segmented";
+
+    // Both modes share the same base: buttonVariants + togglePressedVariants.
+    // Segmented just overrides border/shadow/rounding so items join cleanly.
+    return (
+      <button
+        ref={ref}
+        type="button"
+        disabled={isDisabled}
+        aria-label={option.ariaLabel}
+        className={cn(
+          buttonVariants({ variant, intent, size }),
+          selected && togglePressedVariants({ variant, intent }),
+          // Segmented: only override rounding (let buttonVariants handle border/color).
+          // Negative margin collapses double borders between outline items.
+          isSegmented &&
+            (isVertical
+              ? cn("rounded-none", isFirst && "rounded-t-md", isLast && "rounded-b-md", !isFirst && "-mt-px")
+              : cn("rounded-none", isFirst && "rounded-l-md", isLast && "rounded-r-md", !isFirst && "-ml-px"))
+        )}
+        {...props}
+      >
+        {option.label}
+      </button>
+    );
+  }
+);
+ToggleGroupItem.displayName = "ToggleGroupItem";
+
+export { ToggleGroupItem };

package/src/components/ToggleGroup/ToggleGroupMultiple.tsx

@@ -0,0 +1,61 @@
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import * as React from "react";
+import { ToggleGroupContainer } from "./ToggleGroupContainer";
+import { ToggleGroupItem } from "./ToggleGroupItem";
+import type { ToggleGroupMultipleProps } from "./toggleGroup.types";
+
+const ToggleGroupMultiple = React.forwardRef<HTMLDivElement, ToggleGroupMultipleProps>(
+  (
+    {
+      options,
+      value: controlledValue,
+      defaultValue = [],
+      onValueChange,
+      appearance = "segmented",
+      orientation = "horizontal",
+      variant = "solid",
+      intent = "neutral",
+      size = "default",
+      disabled,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = useControllableState({
+      value: controlledValue,
+      defaultValue,
+      onChange: onValueChange,
+    });
+
+    const handleToggle = (optionValue: string) => {
+      const next = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
+      setValue(next);
+    };
+
+    return (
+      <ToggleGroupContainer ref={ref} role="group" appearance={appearance} orientation={orientation} className={className} {...props}>
+        {options.map((option, index) => (
+          <ToggleGroupItem
+            key={option.value}
+            option={option}
+            selected={value.includes(option.value)}
+            groupDisabled={disabled}
+            appearance={appearance}
+            orientation={orientation}
+            variant={variant}
+            intent={intent}
+            size={size}
+            index={index}
+            total={options.length}
+            aria-pressed={value.includes(option.value)}
+            onClick={() => handleToggle(option.value)}
+          />
+        ))}
+      </ToggleGroupContainer>
+    );
+  }
+);
+ToggleGroupMultiple.displayName = "ToggleGroupMultiple";
+
+export { ToggleGroupMultiple };

package/src/components/ToggleGroup/ToggleGroupSingle.tsx

@@ -0,0 +1,105 @@
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import * as React from "react";
+import { getRovingTargetIndex } from "../../internal/rovingFocus";
+import type { WritableRefObject } from "../../internal/types";
+import { ToggleGroupContainer } from "./ToggleGroupContainer";
+import { ToggleGroupItem } from "./ToggleGroupItem";
+import type { ToggleGroupSingleProps } from "./toggleGroup.types";
+
+const ToggleGroupSingle = React.forwardRef<HTMLDivElement, ToggleGroupSingleProps>(
+  (
+    {
+      options,
+      value: controlledValue,
+      defaultValue = "",
+      onValueChange,
+      appearance = "segmented",
+      orientation = "horizontal",
+      variant = "solid",
+      intent = "neutral",
+      size = "default",
+      disabled,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = useControllableState({
+      value: controlledValue,
+      defaultValue,
+      onChange: onValueChange,
+    });
+
+    const handleSelect = (optionValue: string) => {
+      // Single select: clicking the selected item does nothing (no deselect)
+      if (optionValue !== value) {
+        setValue(optionValue);
+      }
+    };
+
+    const groupRef = React.useRef<HTMLDivElement | null>(null);
+    const mergedRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        groupRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) (ref as WritableRefObject<HTMLDivElement | null>).current = node;
+      },
+      [ref]
+    );
+
+    // role="radiogroup" means one tab stop with arrow-key navigation.
+    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+      const enabled = Array.from(groupRef.current?.querySelectorAll<HTMLButtonElement>('[role="radio"]') ?? []).filter((radio) => !radio.disabled);
+      const focused = (event.target as HTMLElement | null)?.closest?.('[role="radio"]') as HTMLButtonElement | null;
+      const target = getRovingTargetIndex(event.key, focused ? enabled.indexOf(focused) : -1, enabled.length);
+      if (target === null) return;
+
+      event.preventDefault();
+      const next = enabled[target];
+      next?.focus();
+      // In the radio pattern, moving focus also moves the selection.
+      next?.click();
+    }, []);
+
+    // Tab stop: the selected option, or the first enabled one when nothing is
+    // selected, so the group is always keyboard-reachable.
+    const firstEnabledValue = options.find((option) => !(disabled || option.disabled))?.value;
+    const hasSelected = options.some((option) => option.value === value);
+    const tabStopValue = hasSelected ? value : firstEnabledValue;
+
+    return (
+      <ToggleGroupContainer
+        ref={mergedRef}
+        role="radiogroup"
+        onKeyDown={handleKeyDown}
+        appearance={appearance}
+        orientation={orientation}
+        className={className}
+        {...props}
+      >
+        {options.map((option, index) => (
+          <ToggleGroupItem
+            key={option.value}
+            option={option}
+            selected={value === option.value}
+            groupDisabled={disabled}
+            appearance={appearance}
+            orientation={orientation}
+            variant={variant}
+            intent={intent}
+            size={size}
+            index={index}
+            total={options.length}
+            role="radio"
+            aria-checked={value === option.value}
+            tabIndex={option.value === tabStopValue ? 0 : -1}
+            onClick={() => handleSelect(option.value)}
+          />
+        ))}
+      </ToggleGroupContainer>
+    );
+  }
+);
+ToggleGroupSingle.displayName = "ToggleGroupSingle";
+
+export { ToggleGroupSingle };

package/src/components/ToggleGroup/index.ts

@@ -0,0 +1,2 @@
+export { ToggleGroup } from "./ToggleGroup";
+export type { ToggleGroupOption, ToggleGroupProps } from "./toggleGroup.types";

package/src/components/ToggleGroup/toggleGroup.types.ts

@@ -0,0 +1,55 @@
+import type * as React from "react";
+import type { ToggleProps } from "../Toggle/Toggle";
+
+/** Extract a prop's union type from ToggleProps, stripping null added by CVA */
+type ToggleProp<K extends keyof ToggleProps> = NonNullable<ToggleProps[K]>;
+
+export type ToggleGroupOption = {
+  /** Unique value for the option */
+  value: string;
+  /** Display label (text, icons, or any ReactNode) */
+  label: React.ReactNode;
+  /** Accessible label when label is non-text (e.g. icon-only) */
+  ariaLabel?: string;
+  /** Whether this option is disabled */
+  disabled?: boolean;
+};
+
+export type ToggleGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  /** Available options */
+  options: readonly ToggleGroupOption[];
+  /** Visual appearance */
+  appearance?: "segmented" | "separate";
+  /** Layout orientation */
+  orientation?: "vertical" | "horizontal";
+  /** Button variant (link excluded as it has no clear pressed state in groups) */
+  variant?: Exclude<ToggleProp<"variant">, "link">;
+  /** Color intent */
+  intent?: ToggleProp<"intent">;
+  /** Button size (xl excluded — too large for grouped toggles) */
+  size?: Exclude<ToggleProp<"size">, "xl">;
+  /** Disable all options */
+  disabled?: boolean;
+};
+
+export type ToggleGroupSingleProps = ToggleGroupBaseProps & {
+  type: "single";
+  /** Controlled selected value */
+  value?: string;
+  /** Default selected value for uncontrolled mode */
+  defaultValue?: string;
+  /** Called when selection changes */
+  onValueChange?: (value: string) => void;
+};
+
+export type ToggleGroupMultipleProps = ToggleGroupBaseProps & {
+  type: "multiple";
+  /** Controlled selected values */
+  value?: string[];
+  /** Default selected values for uncontrolled mode */
+  defaultValue?: string[];
+  /** Called when selection changes */
+  onValueChange?: (value: string[]) => void;
+};
+
+export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,66 @@
+import { autoUpdate, flip, offset, type Placement, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { TooltipBody } from "./components/TooltipBody";
+import { TooltipContext } from "./components/TooltipContext";
+import { TooltipTrigger } from "./components/TooltipTrigger";
+
+export type TooltipProps = {
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Placement of the tooltip relative to trigger */
+  placement?: Placement;
+  /** Delay before showing tooltip (ms) */
+  delayShow?: number;
+  /** Delay before hiding tooltip (ms) */
+  delayHide?: number;
+  /** Offset from the trigger in pixels */
+  offsetPx?: number;
+  /** Children - compound components */
+  children: React.ReactNode;
+};
+
+const TooltipRoot = ({ open: controlledOpen, onOpenChange, placement = "top", delayShow = 300, delayHide = 0, offsetPx = 8, children }: TooltipProps) => {
+  const [open, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: false,
+    onChange: onOpenChange,
+  });
+
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    middleware: [offset(offsetPx), flip(), shift({ padding: 8 })],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const hover = useHover(context, {
+    delay: { open: delayShow, close: delayHide },
+    move: false,
+  });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "tooltip" });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+
+  const contextValue = {
+    open,
+    refs: {
+      setReference: refs.setReference,
+      setFloating: refs.setFloating,
+    },
+    floatingStyles,
+    getReferenceProps,
+    getFloatingProps,
+  };
+
+  return <TooltipContext.Provider value={contextValue}>{children}</TooltipContext.Provider>;
+};
+
+export const Tooltip = Object.assign(TooltipRoot, {
+  Trigger: TooltipTrigger,
+  Body: TooltipBody,
+});

package/src/components/Tooltip/components/TooltipBody.tsx

@@ -0,0 +1,30 @@
+import { FloatingPortal } from "@floating-ui/react";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+import { useTooltipContext } from "./TooltipContext";
+
+export type TooltipBodyProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const TooltipBody = React.forwardRef<HTMLDivElement, TooltipBodyProps>(({ className, children, ...props }, forwardedRef) => {
+  const { open, refs, floatingStyles, getFloatingProps } = useTooltipContext();
+
+  if (!open) return null;
+
+  return (
+    <FloatingPortal>
+      <div
+        ref={(node) => {
+          refs.setFloating(node);
+          if (typeof forwardedRef === "function") forwardedRef(node);
+          else if (forwardedRef) forwardedRef.current = node;
+        }}
+        style={floatingStyles}
+        className={cn("z-popover rounded-lg border border-border-normal bg-bg-normal px-2.5 py-1.5 text-fg-normal text-xs shadow-lg", className)}
+        {...getFloatingProps(props)}
+      >
+        {children}
+      </div>
+    </FloatingPortal>
+  );
+});
+TooltipBody.displayName = "TooltipBody";

package/src/components/Tooltip/components/TooltipContext.tsx

@@ -0,0 +1,22 @@
+import { createContext, useContext } from "react";
+
+export type TooltipContextValue = {
+  open: boolean;
+  refs: {
+    setReference: (node: HTMLElement | null) => void;
+    setFloating: (node: HTMLElement | null) => void;
+  };
+  floatingStyles: React.CSSProperties;
+  getReferenceProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+  getFloatingProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+};
+
+export const TooltipContext = createContext<TooltipContextValue | null>(null);
+
+export function useTooltipContext() {
+  const context = useContext(TooltipContext);
+  if (!context) {
+    throw new Error("Tooltip compound components must be used within <Tooltip>");
+  }
+  return context;
+}

package/src/components/Tooltip/components/TooltipTrigger.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Slot } from "../../../internal/Slot";
+import { useTooltipContext } from "./TooltipContext";
+
+export type TooltipTriggerProps = React.HTMLAttributes<HTMLElement> & {
+  /** Render as child element */
+  asChild?: boolean;
+};
+
+export const TooltipTrigger = React.forwardRef<HTMLElement, TooltipTriggerProps>(({ asChild = false, children, ...props }, forwardedRef) => {
+  const { refs, getReferenceProps } = useTooltipContext();
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      ref={(node: HTMLElement | null) => {
+        refs.setReference(node);
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      }}
+      {...getReferenceProps(props)}
+    >
+      {children}
+    </Comp>
+  );
+});
+TooltipTrigger.displayName = "TooltipTrigger";

package/src/components/Tooltip/index.ts

@@ -0,0 +1,9 @@
+export {
+  TooltipBody,
+  type TooltipBodyProps,
+} from "./components/TooltipBody";
+export {
+  TooltipTrigger,
+  type TooltipTriggerProps,
+} from "./components/TooltipTrigger";
+export { Tooltip, type TooltipProps } from "./Tooltip";