@usefragments/ui 1.0.0

package/dist/components/ToggleGroup/ToggleGroup.module.scss.js

@@ -0,0 +1,44 @@
+const group = "_group_jam3u_1";
+const gapXs = "_gap-xs_jam3u_8";
+const gapSm = "_gap-sm_jam3u_12";
+const item = "_item_jam3u_25";
+const selected = "_selected_jam3u_30";
+const pills = "_pills_jam3u_36";
+const outline = "_outline_jam3u_51";
+const disabled = "_disabled_jam3u_104";
+const sizeSm = "_size-sm_jam3u_109";
+const sizeMd = "_size-md_jam3u_118";
+const sizeLg = "_size-lg_jam3u_127";
+const styles = {
+  group,
+  "gap-xs": "_gap-xs_jam3u_8",
+  gapXs,
+  "gap-sm": "_gap-sm_jam3u_12",
+  gapSm,
+  "default": "_default_jam3u_16",
+  item,
+  selected,
+  pills,
+  outline,
+  disabled,
+  "size-sm": "_size-sm_jam3u_109",
+  sizeSm,
+  "size-md": "_size-md_jam3u_118",
+  sizeMd,
+  "size-lg": "_size-lg_jam3u_127",
+  sizeLg
+};
+export {
+  styles as default,
+  disabled,
+  gapSm,
+  gapXs,
+  group,
+  item,
+  outline,
+  pills,
+  selected,
+  sizeLg,
+  sizeMd,
+  sizeSm
+};

package/dist/components/ToggleGroup/index.cjs

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const index = require("../ComponentDefaults/index.cjs");
+const ToggleGroup_module = require("./ToggleGroup.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ToggleGroupContext = React__namespace.createContext(null);
+function useToggleGroupContext() {
+  const context = React__namespace.useContext(ToggleGroupContext);
+  if (!context) {
+    throw new Error("ToggleGroup.Item must be used within a ToggleGroup");
+  }
+  return context;
+}
+function ToggleGroupRoot({
+  value,
+  defaultValue,
+  onChange,
+  onValueChange,
+  children,
+  variant = "default",
+  size: sizeProp,
+  gap = "xs",
+  selectionMode = "single",
+  className,
+  ...htmlProps
+}) {
+  var _a;
+  const size = index.useResolvedControlSize(sizeProp);
+  const normalizedVariant = variant === "outlined" ? "outline" : variant;
+  const [internalValue, setInternalValue] = React__namespace.useState(defaultValue ?? "");
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value ?? "" : internalValue;
+  const emitChange = React__namespace.useCallback(
+    (nextValue) => {
+      var _a2;
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      (_a2 = onChange ?? onValueChange) == null ? void 0 : _a2(nextValue);
+    },
+    [isControlled, onChange, onValueChange]
+  );
+  const classes = [
+    ToggleGroup_module.default.group,
+    ToggleGroup_module.default[normalizedVariant],
+    ToggleGroup_module.default[`size-${size}`],
+    gap !== "none" && ToggleGroup_module.default[`gap-${gap}`],
+    className
+  ].filter(Boolean).join(" ");
+  const childItems = React__namespace.Children.toArray(children).filter(
+    (child) => React__namespace.isValidElement(child)
+  );
+  const firstEnabledValue = ((_a = childItems.find((item) => !item.props.disabled)) == null ? void 0 : _a.props.value) ?? null;
+  const hasFocusableSelection = childItems.some(
+    (item) => !item.props.disabled && item.props.value === currentValue
+  );
+  const contextValue = {
+    value: currentValue,
+    onChange: emitChange,
+    variant: normalizedVariant,
+    size,
+    hasFocusableSelection,
+    firstEnabledValue
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlProps,
+      role: selectionMode === "single" ? "radiogroup" : "radiogroup",
+      className: classes,
+      children
+    }
+  ) });
+}
+function ToggleGroupItem({
+  value,
+  children,
+  disabled = false,
+  className,
+  onKeyDown,
+  ...htmlProps
+}) {
+  const context = useToggleGroupContext();
+  const isSelected = context.value === value;
+  const isTabbableSelected = isSelected && !disabled;
+  const isFirstFallback = !context.hasFocusableSelection && !disabled && context.firstEnabledValue === value;
+  const classes = [
+    ToggleGroup_module.default.item,
+    isSelected && ToggleGroup_module.default.selected,
+    disabled && ToggleGroup_module.default.disabled,
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = () => {
+    if (!disabled) {
+      context.onChange(value);
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    if (disabled) return;
+    const key = event.key;
+    const supportsRoving = key === "ArrowRight" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowUp" || key === "Home" || key === "End";
+    if (!supportsRoving) return;
+    event.preventDefault();
+    const group = event.currentTarget.closest('[role="radiogroup"]');
+    if (!group) return;
+    const radios = Array.from(
+      group.querySelectorAll('[role="radio"]:not(:disabled)')
+    );
+    if (radios.length === 0) return;
+    const currentIndex = radios.indexOf(event.currentTarget);
+    const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;
+    let nextIndex = fallbackIndex;
+    if (key === "ArrowRight" || key === "ArrowDown") {
+      nextIndex = (fallbackIndex + 1) % radios.length;
+    } else if (key === "ArrowLeft" || key === "ArrowUp") {
+      nextIndex = (fallbackIndex - 1 + radios.length) % radios.length;
+    } else if (key === "Home") {
+      nextIndex = 0;
+    } else if (key === "End") {
+      nextIndex = radios.length - 1;
+    }
+    const target = radios[nextIndex];
+    const nextValue = target.dataset.value;
+    if (nextValue != null) {
+      context.onChange(nextValue);
+    }
+    target.focus();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...htmlProps,
+      type: "button",
+      "data-value": value,
+      role: "radio",
+      "aria-checked": isSelected,
+      tabIndex: isTabbableSelected || isFirstFallback ? 0 : -1,
+      disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      className: classes,
+      children
+    }
+  );
+}
+const ToggleGroup = Object.assign(ToggleGroupRoot, {
+  Item: ToggleGroupItem
+});
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupItem = ToggleGroupItem;
+exports.ToggleGroupRoot = ToggleGroupRoot;
+exports.useToggleGroupContext = useToggleGroupContext;

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+/**
+ * A group of toggle buttons where only one can be selected at a time.
+ * @see https://usefragments.com/components/togglegroup
+ */
+export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Current selected value */
+    value?: string;
+    /** Default selected value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when selection changes */
+    onChange?: (value: string) => void;
+    /** Alias for onChange (Radix convention) */
+    onValueChange?: (value: string) => void;
+    /** Toggle items */
+    children: React.ReactNode;
+    /** Visual variant.
+     * @default "default"
+     * @see https://usefragments.com/components/togglegroup#variants */
+    variant?: "default" | "pills" | "outline" | "outlined";
+    /** Size.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Gap between items (for pills/outline variants) */
+    gap?: "none" | "xs" | "sm";
+    /** Selection mode for this control. Currently only single-select is supported.
+     * @default "single" */
+    selectionMode?: "single";
+}
+export interface ToggleGroupItemProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "onClick"> {
+    /** Value for this item */
+    value: string;
+    /** Item content */
+    children: React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+}
+interface ToggleGroupContextValue {
+    value: string;
+    onChange: (value: string) => void;
+    variant: "default" | "pills" | "outline";
+    size: "sm" | "md" | "lg";
+    hasFocusableSelection: boolean;
+    firstEnabledValue: string | null;
+}
+declare function useToggleGroupContext(): ToggleGroupContextValue;
+declare function ToggleGroupRoot({ value, defaultValue, onChange, onValueChange, children, variant, size: sizeProp, gap, selectionMode, className, ...htmlProps }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItem({ value, children, disabled, className, onKeyDown, ...htmlProps }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const ToggleGroup: typeof ToggleGroupRoot & {
+    Item: typeof ToggleGroupItem;
+};
+export { ToggleGroupRoot, ToggleGroupItem, useToggleGroupContext };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ToggleGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9F,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;uEAEmE;IACnE,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IACvD;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qDAAqD;IACrD,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B;2BACuB;IACvB,aAAa,CAAC,EAAE,QAAQ,CAAC;CAC1B;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC,SAAS,CACV;IACC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAID,iBAAS,qBAAqB,4BAM7B;AAMD,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,OAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,GAAU,EACV,aAAwB,EACxB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CAsDlB;AAED,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAwFtB;AAMD,eAAO,MAAM,WAAW;;CAEtB,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/ToggleGroup/index.js

@@ -0,0 +1,155 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useResolvedControlSize } from "../ComponentDefaults/index.js";
+import styles from "./ToggleGroup.module.scss.js";
+const ToggleGroupContext = React.createContext(null);
+function useToggleGroupContext() {
+  const context = React.useContext(ToggleGroupContext);
+  if (!context) {
+    throw new Error("ToggleGroup.Item must be used within a ToggleGroup");
+  }
+  return context;
+}
+function ToggleGroupRoot({
+  value,
+  defaultValue,
+  onChange,
+  onValueChange,
+  children,
+  variant = "default",
+  size: sizeProp,
+  gap = "xs",
+  selectionMode = "single",
+  className,
+  ...htmlProps
+}) {
+  var _a;
+  const size = useResolvedControlSize(sizeProp);
+  const normalizedVariant = variant === "outlined" ? "outline" : variant;
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value ?? "" : internalValue;
+  const emitChange = React.useCallback(
+    (nextValue) => {
+      var _a2;
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      (_a2 = onChange ?? onValueChange) == null ? void 0 : _a2(nextValue);
+    },
+    [isControlled, onChange, onValueChange]
+  );
+  const classes = [
+    styles.group,
+    styles[normalizedVariant],
+    styles[`size-${size}`],
+    gap !== "none" && styles[`gap-${gap}`],
+    className
+  ].filter(Boolean).join(" ");
+  const childItems = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child)
+  );
+  const firstEnabledValue = ((_a = childItems.find((item) => !item.props.disabled)) == null ? void 0 : _a.props.value) ?? null;
+  const hasFocusableSelection = childItems.some(
+    (item) => !item.props.disabled && item.props.value === currentValue
+  );
+  const contextValue = {
+    value: currentValue,
+    onChange: emitChange,
+    variant: normalizedVariant,
+    size,
+    hasFocusableSelection,
+    firstEnabledValue
+  };
+  return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      role: selectionMode === "single" ? "radiogroup" : "radiogroup",
+      className: classes,
+      children
+    }
+  ) });
+}
+function ToggleGroupItem({
+  value,
+  children,
+  disabled = false,
+  className,
+  onKeyDown,
+  ...htmlProps
+}) {
+  const context = useToggleGroupContext();
+  const isSelected = context.value === value;
+  const isTabbableSelected = isSelected && !disabled;
+  const isFirstFallback = !context.hasFocusableSelection && !disabled && context.firstEnabledValue === value;
+  const classes = [
+    styles.item,
+    isSelected && styles.selected,
+    disabled && styles.disabled,
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = () => {
+    if (!disabled) {
+      context.onChange(value);
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    if (disabled) return;
+    const key = event.key;
+    const supportsRoving = key === "ArrowRight" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowUp" || key === "Home" || key === "End";
+    if (!supportsRoving) return;
+    event.preventDefault();
+    const group = event.currentTarget.closest('[role="radiogroup"]');
+    if (!group) return;
+    const radios = Array.from(
+      group.querySelectorAll('[role="radio"]:not(:disabled)')
+    );
+    if (radios.length === 0) return;
+    const currentIndex = radios.indexOf(event.currentTarget);
+    const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;
+    let nextIndex = fallbackIndex;
+    if (key === "ArrowRight" || key === "ArrowDown") {
+      nextIndex = (fallbackIndex + 1) % radios.length;
+    } else if (key === "ArrowLeft" || key === "ArrowUp") {
+      nextIndex = (fallbackIndex - 1 + radios.length) % radios.length;
+    } else if (key === "Home") {
+      nextIndex = 0;
+    } else if (key === "End") {
+      nextIndex = radios.length - 1;
+    }
+    const target = radios[nextIndex];
+    const nextValue = target.dataset.value;
+    if (nextValue != null) {
+      context.onChange(nextValue);
+    }
+    target.focus();
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...htmlProps,
+      type: "button",
+      "data-value": value,
+      role: "radio",
+      "aria-checked": isSelected,
+      tabIndex: isTabbableSelected || isFirstFallback ? 0 : -1,
+      disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      className: classes,
+      children
+    }
+  );
+}
+const ToggleGroup = Object.assign(ToggleGroupRoot, {
+  Item: ToggleGroupItem
+});
+export {
+  ToggleGroup,
+  ToggleGroupItem,
+  ToggleGroupRoot,
+  useToggleGroupContext
+};

package/dist/components/Tooltip/Tooltip.module.scss.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const positioner = "_positioner_1kgyg_1";
+const popup = "_popup_1kgyg_6";
+const arrow = "_arrow_1kgyg_43";
+const styles = {
+  positioner,
+  popup,
+  arrow
+};
+exports.arrow = arrow;
+exports.default = styles;
+exports.popup = popup;
+exports.positioner = positioner;

package/dist/components/Tooltip/Tooltip.module.scss.js

@@ -0,0 +1,14 @@
+const positioner = "_positioner_1kgyg_1";
+const popup = "_popup_1kgyg_6";
+const arrow = "_arrow_1kgyg_43";
+const styles = {
+  positioner,
+  popup,
+  arrow
+};
+export {
+  arrow,
+  styles as default,
+  popup,
+  positioner
+};

package/dist/components/Tooltip/index.cjs

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const tooltip = require("@base-ui/react/tooltip");
+const Tooltip_module = require("./Tooltip.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TooltipProviderContext = React__namespace.createContext(false);
+function TooltipRoot({
+  children,
+  content,
+  side = "top",
+  align = "center",
+  sideOffset = 6,
+  delay,
+  closeDelay,
+  disabled = false,
+  arrow = true,
+  open,
+  defaultOpen,
+  onOpenChange,
+  closeOnClick = false,
+  contentProps,
+  className,
+  style,
+  ...htmlProps
+}) {
+  const hasExternalProvider = React__namespace.useContext(TooltipProviderContext);
+  const renderTrigger = React__namespace.useCallback(
+    (triggerProps) => {
+      const childProps = children.props;
+      const mergedProps = { ...childProps, ...triggerProps };
+      for (const [key, triggerHandler] of Object.entries(triggerProps)) {
+        const childHandler = childProps[key];
+        if (key.startsWith("on") && typeof triggerHandler === "function" && typeof childHandler === "function") {
+          mergedProps[key] = (...args) => {
+            childHandler(...args);
+            triggerHandler(...args);
+          };
+        }
+      }
+      return React__namespace.cloneElement(children, mergedProps);
+    },
+    [children]
+  );
+  if (disabled || !children) {
+    return children ?? null;
+  }
+  const {
+    className: contentClassName,
+    style: contentStyle,
+    ...contentHtmlProps
+  } = contentProps ?? {};
+  const tooltipNode = /* @__PURE__ */ jsxRuntime.jsxs(
+    tooltip.Tooltip.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { closeOnClick, render: renderTrigger }),
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          tooltip.Tooltip.Positioner,
+          {
+            side,
+            align,
+            sideOffset,
+            className: Tooltip_module.default.positioner,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              tooltip.Tooltip.Popup,
+              {
+                ...htmlProps,
+                ...contentHtmlProps,
+                className: [Tooltip_module.default.popup, className, contentClassName].filter(Boolean).join(" "),
+                style: { ...style ?? {}, ...contentStyle ?? {} },
+                children: [
+                  content,
+                  arrow && /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: Tooltip_module.default.arrow })
+                ]
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+  if (!hasExternalProvider || delay !== void 0 || closeDelay !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Provider, { delay: delay ?? 400, closeDelay: closeDelay ?? 0, children: tooltipNode });
+  }
+  return tooltipNode;
+}
+function TooltipProvider({
+  children,
+  delay,
+  closeDelay = 0,
+  timeout,
+  delayDuration,
+  skipDelayDuration
+}) {
+  const resolvedDelay = delay ?? delayDuration ?? 400;
+  const resolvedTimeout = timeout ?? skipDelayDuration ?? 400;
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Provider,
+    {
+      delay: resolvedDelay,
+      closeDelay,
+      timeout: resolvedTimeout,
+      children
+    }
+  ) });
+}
+const Tooltip = Object.assign(TooltipRoot, {
+  Root: TooltipRoot,
+  Provider: TooltipProvider
+});
+exports.Tooltip = Tooltip;
+exports.TooltipProvider = TooltipProvider;

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipAlign = 'start' | 'center' | 'end';
+export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'defaultChecked'> {
+    /** The element that triggers the tooltip */
+    children: React.ReactElement;
+    /** Content to display in the tooltip */
+    content: React.ReactNode;
+    /** Which side to show the tooltip */
+    side?: TooltipSide;
+    /** Alignment along the side */
+    align?: TooltipAlign;
+    /** Offset from the trigger (px) */
+    sideOffset?: number;
+    /** Delay before showing (ms) */
+    delay?: number;
+    /** Delay before hiding (ms) */
+    closeDelay?: number;
+    /** Whether the tooltip is disabled */
+    disabled?: boolean;
+    /** Show arrow pointing to trigger */
+    arrow?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether clicking the trigger closes the tooltip.
+     * @default false */
+    closeOnClick?: boolean;
+    /** Explicit props for the tooltip popup element (preferred over top-level HTMLAttributes for clarity) */
+    contentProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+export interface TooltipProviderProps {
+    children: React.ReactNode;
+    /** Default delay for all tooltips (ms) */
+    delay?: number;
+    /** Default close delay for all tooltips (ms) */
+    closeDelay?: number;
+    /** Timeout for instant open when moving between tooltips (ms) */
+    timeout?: number;
+    /** Alias for `delay` (Radix convention) */
+    delayDuration?: number;
+    /** Alias for `timeout` (Radix convention) */
+    skipDelayDuration?: number;
+}
+/**
+ * Tooltip - Shows contextual information on hover/focus
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Save your changes">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ * ```
+ */
+declare function TooltipRoot({ children, content, side, align, sideOffset, delay, closeDelay, disabled, arrow, open, defaultOpen, onOpenChange, closeOnClick, contentProps, className, style, ...htmlProps }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * TooltipProvider - Manages shared delay behavior for multiple tooltips
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider delay={200}>
+ *   <Tooltip content="First">...</Tooltip>
+ *   <Tooltip content="Second">...</Tooltip>
+ * </TooltipProvider>
+ * ```
+ */
+export declare function TooltipProvider({ children, delay, closeDelay, timeout, delayDuration, skipDelayDuration, }: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: typeof TooltipRoot & {
+    Root: typeof TooltipRoot;
+    Provider: typeof TooltipProvider;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEtD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,GAAG,gBAAgB,CAAC;IAC5G,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,wCAAwC;IACxC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;wBACoB;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yGAAyG;IACzG,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAQD;;;;;;;;;GASG;AACH,iBAAS,WAAW,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,IAAY,EACZ,KAAgB,EAChB,UAAc,EACd,KAAK,EACL,UAAU,EACV,QAAgB,EAChB,KAAY,EACZ,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,YAAoB,EACpB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,YAAY,2CA0Ed;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,UAAc,EACd,OAAO,EACP,aAAa,EACb,iBAAiB,GAClB,EAAE,oBAAoB,2CAgBtB;AAED,eAAO,MAAM,OAAO;;;CAGlB,CAAC"}