@arobo/react 1.0.1 → 1.1.1

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,67 @@
+import type { ToastContentValue } from "./toast-queue";
+import type { ComponentPropsWithRef } from "react";
+import type { ToastProps as ToastPrimitiveProps } from "react-aria-components";
+import { Text as TextPrimitive, UNSTABLE_ToastContent as ToastContentPrimitive, UNSTABLE_ToastRegion as ToastRegionPrimitive } from "react-aria-components";
+import { Button } from "../button";
+import { CloseButton } from "../close-button";
+import { ToastQueue } from "./toast-queue";
+import { type ToastVariants } from "@arobo/styles";
+interface ToastProps<T extends object = ToastContentValue> extends ToastPrimitiveProps<T>, ToastVariants {
+    scaleFactor?: number;
+}
+declare const Toast: {
+    <T extends object = ToastContentValue>({ children, className, placement, scaleFactor, toast, variant, ...rest }: ToastProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastContentProps extends ComponentPropsWithRef<typeof ToastContentPrimitive> {
+}
+declare const ToastContent: ({ children, className, ...rest }: ToastContentProps) => import("react/jsx-runtime").JSX.Element;
+interface ToastIndicatorProps extends ComponentPropsWithRef<"div"> {
+    variant?: ToastVariants["variant"];
+}
+declare const ToastIndicator: {
+    ({ children, className, variant, ...rest }: ToastIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastTitleProps extends ComponentPropsWithRef<typeof TextPrimitive> {
+}
+declare const ToastTitle: {
+    ({ children, className, ...rest }: ToastTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastDescriptionProps extends ComponentPropsWithRef<typeof TextPrimitive> {
+}
+declare const ToastDescription: {
+    ({ children, className, ...rest }: ToastDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastCloseButtonProps extends ComponentPropsWithRef<typeof CloseButton> {
+}
+declare const ToastCloseButton: {
+    ({ className, ...rest }: ToastCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastActionButtonProps extends ComponentPropsWithRef<typeof Button> {
+}
+declare const ToastActionButton: {
+    ({ children, className, ...rest }: ToastActionButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type ToastRegionPrimitiveProps<T extends object = ToastContentValue> = ComponentPropsWithRef<typeof ToastRegionPrimitive<T>>;
+interface ToastContainerProps<T extends object = ToastContentValue> extends Omit<ToastRegionPrimitiveProps<T>, "queue" | "children"> {
+    children?: ToastRegionPrimitiveProps<T>["children"];
+    /** The gap between toasts. @default 14 */
+    gap?: number;
+    /** The maximum number of toasts to display at a time. Only applies when no custom `toast` prop is provided. */
+    maxVisibleToasts?: number;
+    /** The scale factor for toasts. @default 0.05 */
+    scaleFactor?: number;
+    placement?: ToastVariants["placement"];
+    queue?: ToastQueue<T>;
+}
+declare const ToastContainer: {
+    <T extends object = ToastContentValue>({ children, className, gap, maxVisibleToasts, placement, queue: queueProp, scaleFactor, ...rest }: ToastContainerProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ToastQueue, Toast, ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastContainer, ToastTitle, };
+export type { ToastActionButtonProps, ToastCloseButtonProps, ToastContentProps, ToastDescriptionProps, ToastIndicatorProps, ToastProps, ToastContainerProps, ToastTitleProps, };

package/dist/components/toast/toast.js

@@ -0,0 +1,295 @@
+import { useContext, createContext, useMemo, useCallback } from 'react';
+import { UNSTABLE_ToastStateContext, UNSTABLE_Toast, Text, UNSTABLE_ToastContent, UNSTABLE_ToastRegion } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { Button } from '../button/index.js';
+import { CloseButton } from '../close-button/index.js';
+import { InfoIcon, DangerIcon, WarningIcon, SuccessIcon } from '../icons.js';
+import { DEFAULT_SCALE_FACTOR, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_GAP } from './constants.js';
+import { toast } from './toast-queue.js';
+export { ToastQueue } from './toast-queue.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { toastVariants } from '../../packages/styles/src/components/toast/toast.styles.js';
+import { useMediaQuery } from '../../hooks/use-media-query.js';
+
+const ToastContext = /*#__PURE__*/createContext({});
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast
+ * --------------------------------------------------------------------------------------------- */
+
+const Toast = ({
+  children,
+  className,
+  placement,
+  scaleFactor = DEFAULT_SCALE_FACTOR,
+  toast,
+  variant,
+  ...rest
+}) => {
+  const {
+    placement: contextPlacement,
+    scaleFactor: contextScaleFactor,
+    slots
+  } = useContext(ToastContext);
+  const finalPlacement = placement ?? contextPlacement;
+  const finalScaleFactor = scaleFactor ?? contextScaleFactor;
+  const state = useContext(UNSTABLE_ToastStateContext);
+  const visibleToasts = state.visibleToasts;
+  const index = visibleToasts.indexOf(toast);
+  const isFrontmost = index <= 0;
+  const isBottom = finalPlacement?.startsWith("bottom");
+  const style = useMemo(() => ({
+    viewTransitionName: toast?.key,
+    translate: `0 ${94 * index * (isBottom ? 1 : -1)}% 0`,
+    scale: 1 - index * finalScaleFactor,
+    zIndex: visibleToasts.length - index - 1,
+    tabindex: isFrontmost ? 0 : -1,
+    ...rest.style
+  }), [index, toast?.key, rest.style, isBottom, visibleToasts.length, finalScaleFactor, isFrontmost]);
+  return /*#__PURE__*/jsx(UNSTABLE_Toast, {
+    className: composeTwRenderProps(className, slots?.toast({
+      variant
+    })),
+    "data-frontmost": dataAttr(isFrontmost),
+    "data-index": index,
+    "data-slot": "toast",
+    style: style,
+    toast: toast,
+    ...rest,
+    children: children
+  });
+};
+Toast.displayName = "HeroUI.Toast";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Content
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastContent = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(UNSTABLE_ToastContent, {
+    className: composeSlotClassName(slots?.content, className),
+    "data-slot": "toast-content",
+    ...rest,
+    children: children
+  });
+};
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Indicator
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastIndicator = ({
+  children,
+  className,
+  variant,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  const getDefaultIcon = useCallback(() => {
+    switch (variant) {
+      case "accent":
+        return /*#__PURE__*/jsx(InfoIcon, {
+          "data-slot": "toast-default-icon"
+        });
+      case "success":
+        return /*#__PURE__*/jsx(SuccessIcon, {
+          "data-slot": "toast-default-icon"
+        });
+      case "warning":
+        return /*#__PURE__*/jsx(WarningIcon, {
+          "data-slot": "toast-default-icon"
+        });
+      case "danger":
+        return /*#__PURE__*/jsx(DangerIcon, {
+          "data-slot": "toast-default-icon"
+        });
+      default:
+        return /*#__PURE__*/jsx(InfoIcon, {
+          "data-slot": "toast-default-icon"
+        });
+    }
+  }, [variant]);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-slot": "toast-indicator",
+    ...rest,
+    children: children ?? getDefaultIcon()
+  });
+};
+ToastIndicator.displayName = "HeroUI.ToastIndicator";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Title
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastTitle = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(Text, {
+    className: composeSlotClassName(slots?.title, className),
+    "data-slot": "toast-title",
+    slot: "title",
+    ...rest,
+    children: children
+  });
+};
+ToastTitle.displayName = "HeroUI.ToastTitle";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Description
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastDescription = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(Text, {
+    className: composeSlotClassName(slots?.description, className),
+    "data-slot": "toast-description",
+    slot: "description",
+    ...rest,
+    children: children
+  });
+};
+ToastDescription.displayName = "HeroUI.ToastDescription";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Close Button
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastCloseButton = ({
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(CloseButton, {
+    className: composeTwRenderProps(className, slots?.close()),
+    "data-slot": "toast-close",
+    slot: "close",
+    ...rest
+  });
+};
+ToastCloseButton.displayName = "HeroUI.ToastCloseButton";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Action Button
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastActionButton = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.action?.()),
+    "data-slot": "toast-action-button",
+    ...rest,
+    children: children
+  });
+};
+ToastActionButton.displayName = "HeroUI.ToastActionButton";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Region
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastContainer = ({
+  children,
+  className,
+  gap = DEFAULT_GAP,
+  maxVisibleToasts = DEFAULT_MAX_VISIBLE_TOAST,
+  placement = "bottom",
+  queue: queueProp,
+  scaleFactor = DEFAULT_SCALE_FACTOR,
+  ...rest
+}) => {
+  const slots = useMemo(() => toastVariants({
+    placement
+  }), [placement]);
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const toastQueue = useMemo(() => {
+    if (queueProp) {
+      // Custom toast prop provided - use it (it already has its own maxVisibleToasts limit)
+      return queueProp;
+    }
+    return toast.getQueue();
+  }, [queueProp, maxVisibleToasts]);
+  const getDefaultChildren = useCallback(renderProps => {
+    const {
+      actionProps,
+      description,
+      indicator,
+      title,
+      variant
+    } = renderProps.toast.content ?? {};
+    return /*#__PURE__*/jsxs(Toast, {
+      placement: placement,
+      scaleFactor: scaleFactor,
+      toast: renderProps.toast,
+      variant: variant,
+      children: [indicator === null ? null : /*#__PURE__*/jsx(ToastIndicator, {
+        variant: variant,
+        children: indicator
+      }), /*#__PURE__*/jsxs(ToastContent, {
+        children: [!!title && /*#__PURE__*/jsx(ToastTitle, {
+          children: title
+        }), !!description && /*#__PURE__*/jsx(ToastDescription, {
+          children: description
+        }), isMobile && actionProps?.children ? /*#__PURE__*/jsx(ToastActionButton, {
+          ...actionProps,
+          children: actionProps.children
+        }) : null]
+      }), !isMobile && actionProps?.children ? /*#__PURE__*/jsx(ToastActionButton, {
+        ...actionProps,
+        children: actionProps.children
+      }) : null, /*#__PURE__*/jsx(ToastCloseButton, {})]
+    });
+  }, [isMobile, placement, scaleFactor]);
+  return /*#__PURE__*/jsx(UNSTABLE_ToastRegion, {
+    className: composeTwRenderProps(className, slots?.region()),
+    "data-slot": "toast-region",
+    queue: toastQueue,
+    style: {
+      // @ts-expect-error - CSS variables
+      "--gap": `${gap}px`,
+      "--scale-factor": scaleFactor,
+      "--placement": placement
+    },
+    ...rest,
+    children: renderProps => /*#__PURE__*/jsx(ToastContext, {
+      value: {
+        slots,
+        placement,
+        scaleFactor
+      },
+      children: typeof children === "undefined" ? getDefaultChildren(renderProps) : typeof children === "function" ? children(renderProps) : children
+    })
+  });
+};
+ToastContainer.displayName = "HeroUI.ToastContainer";
+
+export { Toast, ToastActionButton, ToastCloseButton, ToastContainer, ToastContent, ToastDescription, ToastIndicator, ToastTitle };

package/dist/components/toggle-button/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleButton } from "./toggle-button";
+export type { ToggleButtonProps } from "./toggle-button";

package/dist/components/toggle-button/index.js

@@ -0,0 +1 @@
+export { ToggleButton } from './toggle-button.js';

package/dist/components/toggle-button/toggle-button.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithRef } from "react";
+import { ToggleButton as ToggleButtonPrimitive } from "react-aria-components";
+import { type ToggleButtonVariants } from "@arobo/styles";
+type ToggleButtonProps = ComponentPropsWithRef<typeof ToggleButtonPrimitive> & {
+    size?: ToggleButtonVariants["size"];
+    variant?: ToggleButtonVariants["variant"];
+};
+declare const ToggleButton: ({ children, className, size, variant, ...restProps }: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { ToggleButton };
+export type { ToggleButtonProps };

package/dist/components/toggle-button/toggle-button.js

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import { ToggleButton as ToggleButton$1 } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { toggleButtonVariants } from '../../packages/styles/src/components/toggle-button/toggle-button.styles.js';
+
+const ToggleButton = ({
+  children,
+  className,
+  size = "md",
+  variant = "primary",
+  ...restProps
+}) => {
+  const slots = useMemo(() => toggleButtonVariants({
+    size,
+    variant
+  }), [size, variant]);
+  return /*#__PURE__*/jsx(ToggleButton$1, {
+    className: composeTwRenderProps(className, slots),
+    "data-slot": "toggle-button",
+    ...restProps,
+    children: children
+  });
+};
+
+export { ToggleButton };

package/dist/components/toggle-button-group/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleButton, ToggleButtonGroup } from "./toggle-button-group";
+export type { ToggleButtonProps, ToggleButtonGroupRootProps, ToggleButtonWithGroupProps } from "./toggle-button-group";

package/dist/components/toggle-button-group/index.js

@@ -0,0 +1 @@
+export { ToggleButton, ToggleButtonGroup } from './toggle-button-group.js';

package/dist/components/toggle-button-group/toggle-button-group.d.ts

@@ -0,0 +1,15 @@
+import { type ToggleButtonGroupProps as RAC_ToggleButtonGroupProps, type ToggleButtonProps } from "react-aria-components";
+import { type ToggleButtonGroupVariants } from "@arobo/styles";
+type ToggleButtonGroupRootProps = Omit<RAC_ToggleButtonGroupProps, "className"> & {
+    size?: ToggleButtonGroupVariants["size"];
+    variant?: ToggleButtonGroupVariants["variant"];
+    className?: string;
+};
+declare const ToggleButtonGroupRoot: ({ children, className, size, variant, ...restProps }: ToggleButtonGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+type ToggleButtonWithGroupProps = ToggleButtonProps & {
+    size?: ToggleButtonGroupVariants["size"];
+    variant?: ToggleButtonGroupVariants["variant"];
+};
+declare const ToggleButton: ({ children, className, size: propSize, variant: propVariant, ...restProps }: ToggleButtonWithGroupProps) => import("react/jsx-runtime").JSX.Element;
+export { ToggleButtonGroupRoot as ToggleButtonGroup, ToggleButton };
+export type { ToggleButtonProps, ToggleButtonGroupRootProps, ToggleButtonWithGroupProps };

package/dist/components/toggle-button-group/toggle-button-group.js

@@ -0,0 +1,61 @@
+import { useContext, createContext, useMemo } from 'react';
+import { ToggleButtonGroup } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { toggleButtonGroupVariants } from '../../packages/styles/src/components/toggle-button-group/toggle-button-group.styles.js';
+import { ToggleButton as ToggleButton$1 } from '../toggle-button/toggle-button.js';
+
+const ToggleButtonGroupContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ToggleButtonGroup Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ToggleButtonGroupRoot = ({
+  children,
+  className,
+  size = "md",
+  variant = "primary",
+  ...restProps
+}) => {
+  const slots = useMemo(() => toggleButtonGroupVariants({
+    size,
+    variant
+  }), [size, variant]);
+  return /*#__PURE__*/jsx(ToggleButtonGroupContext.Provider, {
+    value: {
+      slots,
+      size,
+      variant
+    },
+    children: /*#__PURE__*/jsx(ToggleButtonGroup, {
+      className: composeTwRenderProps(className, slots),
+      "data-slot": "toggle-button-group",
+      ...restProps,
+      children: children
+    })
+  });
+};
+const ToggleButton = ({
+  children,
+  className,
+  size: propSize,
+  variant: propVariant,
+  ...restProps
+}) => {
+  const groupContext = useContext(ToggleButtonGroupContext);
+  const finalSize = propSize ?? groupContext.size ?? "md";
+  const finalVariant = propVariant ?? groupContext.variant ?? "primary";
+  const slots = useMemo(() => toggleButtonGroupVariants({
+    size: finalSize,
+    variant: finalVariant
+  }), [finalSize, finalVariant]);
+  return /*#__PURE__*/jsx(ToggleButton$1, {
+    className: composeTwRenderProps(className, slots),
+    "data-slot": "toggle-button",
+    ...restProps,
+    children: children
+  });
+};
+
+export { ToggleButton, ToggleButtonGroupRoot as ToggleButtonGroup };

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { TooltipArrow, TooltipContent, TooltipRoot, TooltipTrigger } from "./tooltip";
+export declare const Tooltip: (({ children, ...props }: import("react").ComponentPropsWithRef<typeof import("react-aria-components").TooltipTrigger>) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, ...props }: import("react").ComponentPropsWithRef<typeof import("react-aria-components").TooltipTrigger>) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...props }: import("./tooltip").TooltipTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, offset: offsetProp, showArrow, ...props }: import("./tooltip").TooltipContentProps) => import("react/jsx-runtime").JSX.Element;
+    Arrow: ({ children, className, ...props }: import("./tooltip").TooltipArrowProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Tooltip = {
+    Props: ComponentProps<typeof TooltipRoot>;
+    RootProps: ComponentProps<typeof TooltipRoot>;
+    TriggerProps: ComponentProps<typeof TooltipTrigger>;
+    ContentProps: ComponentProps<typeof TooltipContent>;
+    ArrowProps: ComponentProps<typeof TooltipArrow>;
+};
+export { TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow };
+export type { TooltipRootProps, TooltipRootProps as TooltipProps, TooltipArrowProps, TooltipContentProps, TooltipTriggerProps, } from "./tooltip";

package/dist/components/tooltip/index.js

@@ -0,0 +1,13 @@
+import { TooltipRoot, TooltipArrow, TooltipContent, TooltipTrigger } from './tooltip.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Tooltip = Object.assign(TooltipRoot, {
+  Root: TooltipRoot,
+  Trigger: TooltipTrigger,
+  Content: TooltipContent,
+  Arrow: TooltipArrow
+});
+
+export { Tooltip, TooltipArrow, TooltipContent, TooltipRoot, TooltipTrigger };

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

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { OverlayArrow, Tooltip as TooltipPrimitive, TooltipTrigger as TooltipTriggerPrimitive } from "react-aria-components";
+import { type TooltipVariants } from "@arobo/styles";
+type TooltipRootProps = ComponentPropsWithRef<typeof TooltipTriggerPrimitive>;
+declare const TooltipRoot: ({ children, ...props }: ComponentPropsWithRef<typeof TooltipTriggerPrimitive>) => import("react/jsx-runtime").JSX.Element;
+interface TooltipContentProps extends Omit<ComponentPropsWithRef<typeof TooltipPrimitive>, "children">, TooltipVariants {
+    showArrow?: boolean;
+    children: React.ReactNode;
+}
+declare const TooltipContent: ({ children, className, offset: offsetProp, showArrow, ...props }: TooltipContentProps) => import("react/jsx-runtime").JSX.Element;
+type TooltipArrowProps = Omit<ComponentPropsWithRef<typeof OverlayArrow>, "children"> & {
+    children?: React.ReactNode;
+};
+declare const TooltipArrow: ({ children, className, ...props }: TooltipArrowProps) => import("react/jsx-runtime").JSX.Element;
+interface TooltipTriggerProps extends ComponentPropsWithRef<"div"> {
+}
+declare const TooltipTrigger: ({ children, className, ...props }: TooltipTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export { TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow };
+export type { TooltipRootProps, TooltipArrowProps, TooltipContentProps, TooltipTriggerProps };

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,105 @@
+import React__default, { createContext, useContext } from 'react';
+import { TooltipTrigger as TooltipTrigger$1, OverlayArrow, Tooltip, Focusable } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { tooltipVariants } from '../../packages/styles/src/components/tooltip/tooltip.styles.js';
+
+const TooltipContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Tooltip Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const TooltipRoot = ({
+  children,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => tooltipVariants(), []);
+  return /*#__PURE__*/jsx(TooltipContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(TooltipTrigger$1, {
+      "data-slot": "tooltip-root",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tooltip Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const TooltipContent = ({
+  children,
+  className,
+  offset: offsetProp,
+  showArrow = false,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TooltipContext);
+  const offset = offsetProp ? offsetProp : showArrow ? 7 : 3;
+  return /*#__PURE__*/jsx(Tooltip, {
+    ...props,
+    className: composeTwRenderProps(className, slots?.base()),
+    offset: offset,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tooltip Arrow
+ * -----------------------------------------------------------------------------------------------*/
+
+const TooltipArrow = ({
+  children,
+  className,
+  ...props
+}) => {
+  const defaultArrow = /*#__PURE__*/jsx("svg", {
+    "data-slot": "overlay-arrow",
+    height: 12,
+    viewBox: "0 0 12 12",
+    width: 12,
+    children: /*#__PURE__*/jsx("path", {
+      d: "M0 0 Q6 9 12 0"
+    })
+  });
+  const arrow = /*#__PURE__*/React__default.isValidElement(children) ? /*#__PURE__*/React__default.cloneElement(children, {
+    "data-slot": "overlay-arrow"
+  }) : defaultArrow;
+  return /*#__PURE__*/jsx(OverlayArrow, {
+    "data-slot": "tooltip-arrow",
+    ...props,
+    className: className,
+    children: arrow
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tooltip Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const TooltipTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TooltipContext);
+  return /*#__PURE__*/jsx(Focusable, {
+    children: /*#__PURE__*/jsx("div", {
+      className: composeSlotClassName(slots?.trigger, className),
+      "data-slot": "tooltip-trigger",
+      role: "button",
+      ...props,
+      children: children
+    })
+  });
+};
+
+export { TooltipArrow, TooltipContent, TooltipRoot, TooltipTrigger };

package/dist/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './use-overlay-state';
+export * from './use-list-data';
+export * from './use-isomorphic-layout-effect';
+export * from './use-media-query';
+export * from './use-safe-layout-effect';
+export * from './use-pagination';

package/dist/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from "react";
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/hooks/use-isomorphic-layout-effect.js

@@ -0,0 +1,5 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect };