silver-ui 0.1.0

package/dist/chunk-MCOVG6W6.js

@@ -0,0 +1,254 @@
+import { DialogContext } from './chunk-CXBB2LN7.js';
+import { mergeRefs } from './chunk-SGLIDI6R.js';
+import { cva } from './chunk-NAELQLZN.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { useRef, useMemo, useEffect, useState, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var styles = {
+  root: css({
+    position: "fixed",
+    m: "auto",
+    p: 0,
+    borderWidth: 0,
+    bg: "bg",
+    color: "fg",
+    borderRadius: "md",
+    boxShadow: "xl",
+    flexDirection: "column",
+    overscrollBehavior: "contain",
+    _backdrop: {
+      bg: "overlay.scrim",
+      backdropFilter: "blur(2px)"
+    },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    }
+  }),
+  open: css({
+    display: "flex"
+  }),
+  fullscreen: css({
+    w: "100dvw",
+    h: "100dvh",
+    maxW: "100dvw",
+    maxH: "100dvh",
+    borderRadius: 0,
+    m: 0,
+    inset: 0
+  }),
+  inner: css({
+    display: "flex",
+    flexDirection: "column",
+    flex: "1 1 auto",
+    minH: 0,
+    overflow: "hidden",
+    borderRadius: "inherit"
+  })
+};
+function formatSize(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+function getDismissBehavior(dismissBehavior) {
+  if (dismissBehavior == null) {
+    return { isBackdropDismissEnabled: true, isEscapeDismissEnabled: true };
+  }
+  if (typeof dismissBehavior === "boolean") {
+    return {
+      isBackdropDismissEnabled: dismissBehavior,
+      isEscapeDismissEnabled: dismissBehavior
+    };
+  }
+  return {
+    isBackdropDismissEnabled: dismissBehavior.isBackdropDismissEnabled ?? true,
+    isEscapeDismissEnabled: dismissBehavior.isEscapeDismissEnabled ?? true
+  };
+}
+function Dialog({
+  isOpen,
+  label,
+  onOpenChange,
+  width = 400,
+  maxHeight = "75vh",
+  position,
+  variant = "standard",
+  dismissBehavior,
+  children,
+  className,
+  "data-testid": dataTestId,
+  role = "dialog",
+  style,
+  ref
+}) {
+  const dialogRef = useRef(null);
+  const triggerRef = useRef(null);
+  const isFullscreen = variant === "fullscreen";
+  const { isBackdropDismissEnabled, isEscapeDismissEnabled } = getDismissBehavior(dismissBehavior);
+  const dialogContextValue = useMemo(() => ({ onOpenChange }), [onOpenChange]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog == null) {
+      return;
+    }
+    if (isOpen) {
+      triggerRef.current = document.activeElement;
+      if (!dialog.open) {
+        dialog.showModal();
+      }
+      const autofocusTarget = dialog.querySelector('[data-autofocus="true"]') ?? dialog.querySelector('[data-dialog-autofocus="true"]');
+      autofocusTarget?.focus();
+    } else if (dialog.open) {
+      dialog.close();
+      triggerRef.current?.focus();
+      triggerRef.current = null;
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [isOpen]);
+  const positionStyle = position != null && !isFullscreen ? {
+    bottom: position.bottom == null ? "auto" : formatSize(position.bottom),
+    left: position.left == null ? "auto" : formatSize(position.left),
+    margin: 0,
+    right: position.right == null ? "auto" : formatSize(position.right),
+    top: position.top == null ? "auto" : formatSize(position.top)
+  } : void 0;
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      "aria-label": label,
+      className: cx(
+        styles.root,
+        isOpen ? styles.open : void 0,
+        isFullscreen ? styles.fullscreen : void 0,
+        className
+      ),
+      "data-testid": dataTestId,
+      onCancel: (event) => {
+        event.preventDefault();
+        if (isEscapeDismissEnabled) {
+          onOpenChange(false);
+        }
+      },
+      onClick: (event) => {
+        if (event.target === event.currentTarget && isBackdropDismissEnabled) {
+          onOpenChange(false);
+        }
+      },
+      ref: mergeRefs(ref, dialogRef),
+      role: role === "dialog" ? void 0 : role,
+      style: {
+        width: isFullscreen ? void 0 : formatSize(width),
+        maxHeight: isFullscreen ? void 0 : formatSize(maxHeight),
+        ...positionStyle,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx(DialogContext, { value: dialogContextValue, children: /* @__PURE__ */ jsx("div", { className: styles.inner, children }) })
+    }
+  );
+}
+Dialog.displayName = "Dialog";
+
+// src/components/Dialog/Dialog.recipe.ts
+var dialogRecipe = cva({
+  base: {
+    position: "fixed",
+    m: "auto",
+    p: 0,
+    borderWidth: 0,
+    bg: "bg",
+    color: "fg",
+    borderRadius: "lg",
+    boxShadow: "lg",
+    display: "none",
+    flexDirection: "column",
+    h: "fit-content",
+    maxW: "min(90vw, var(--dialog-width))",
+    maxH: "var(--dialog-max-height)",
+    w: "var(--dialog-width)",
+    overflow: "hidden",
+    overscrollBehavior: "contain",
+    opacity: 0,
+    "&::backdrop": {
+      bg: "overlay.scrim",
+      backdropFilter: "blur(2px)"
+    },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "accent",
+      outlineOffset: "focusOffset"
+    }
+  },
+  variants: {
+    isOpen: {
+      true: {
+        display: "flex",
+        opacity: 1
+      },
+      false: {}
+    },
+    variant: {
+      standard: {},
+      fullscreen: {
+        inset: 0,
+        m: 0,
+        borderRadius: 0,
+        maxW: "100dvw",
+        maxH: "100dvh",
+        w: "100dvw",
+        h: "100dvh"
+      }
+    }
+  },
+  defaultVariants: {
+    isOpen: false,
+    variant: "standard"
+  }
+});
+function useDialog(defaultOptions) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [content, setContent] = useState(null);
+  const [options, setOptions] = useState(
+    defaultOptions
+  );
+  const show = useCallback(
+    (nextContent, nextOptions) => {
+      setContent(nextContent);
+      setOptions((previous) => ({ ...previous, ...nextOptions }));
+      setIsOpen(true);
+    },
+    []
+  );
+  const hide = useCallback(() => setIsOpen(false), []);
+  const element = useMemo(
+    () => /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        ...defaultOptions ?? {},
+        ...options ?? {},
+        isOpen,
+        label: options?.label ?? defaultOptions?.label ?? "Dialog",
+        onOpenChange: setIsOpen,
+        children: content
+      }
+    ),
+    [content, defaultOptions, isOpen, options]
+  );
+  return { element, hide, isOpen, show };
+}
+
+export { Dialog, dialogRecipe, useDialog };
+//# sourceMappingURL=chunk-MCOVG6W6.js.map
+//# sourceMappingURL=chunk-MCOVG6W6.js.map

package/dist/chunk-MCOVG6W6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dialog/Dialog.tsx","../src/components/Dialog/Dialog.recipe.ts","../src/components/Dialog/useDialog.tsx"],"names":["useMemo","jsx"],"mappings":"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","file":"chunk-MCOVG6W6.js","sourcesContent":["/* eslint-disable jsx-a11y-x/click-events-have-key-events, jsx-a11y-x/no-noninteractive-element-interactions */\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {mergeRefs} from '../../internal/mergeRefs';\nimport {DialogContext} from './DialogContext';\n\nexport type DialogVariant = 'fullscreen' | 'standard';\nexport type DialogRole = 'alertdialog' | 'dialog';\nexport type DialogDismissBehavior =\n  | boolean\n  | {\n      isBackdropDismissEnabled?: boolean;\n      isEscapeDismissEnabled?: boolean;\n    };\n\nexport interface DialogPosition {\n  bottom?: number | string;\n  left?: number | string;\n  right?: number | string;\n  top?: number | string;\n}\n\nexport interface DialogProps {\n  /**\n   * Dialog body content.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the dialog.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the dialog.\n   */\n  'data-testid'?: string;\n  /**\n   * Controls whether Escape and backdrop clicks request dismissal. Pass a\n   * boolean to enable or disable both behaviors together.\n   * @default {isEscapeDismissEnabled: true, isBackdropDismissEnabled: true}\n   */\n  dismissBehavior?: DialogDismissBehavior;\n  /**\n   * Whether the dialog is open.\n   */\n  isOpen: boolean;\n  /**\n   * Accessible label for the dialog.\n   */\n  label: string;\n  /**\n   * Maximum height of the dialog. Numbers are treated as pixels.\n   * @default '75vh'\n   */\n  maxHeight?: number | string;\n  /**\n   * Called when the dialog requests an open-state change.\n   */\n  onOpenChange: (isOpen: boolean) => void;\n  /**\n   * Fixed positioning offsets for the dialog.\n   */\n  position?: Readonly<DialogPosition>;\n  /**\n   * Ref forwarded to the dialog element.\n   */\n  ref?: Ref<HTMLDialogElement>;\n  /**\n   * ARIA role exposed by the dialog.\n   * @default 'dialog'\n   */\n  role?: DialogRole;\n  /**\n   * Inline styles applied to the dialog.\n   */\n  style?: CSSProperties;\n  /**\n   * Display variant.\n   * @default 'standard'\n   */\n  variant?: DialogVariant;\n  /**\n   * Dialog width. Numbers are treated as pixels.\n   * @default 400\n   */\n  width?: number | string;\n}\n\nconst styles = {\n  root: css({\n    position: 'fixed',\n    m: 'auto',\n    p: 0,\n    borderWidth: 0,\n    bg: 'bg',\n    color: 'fg',\n    borderRadius: 'md',\n    boxShadow: 'xl',\n    flexDirection: 'column',\n    overscrollBehavior: 'contain',\n    _backdrop: {\n      bg: 'overlay.scrim',\n      backdropFilter: 'blur(2px)',\n    },\n    _focusVisible: {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n    },\n  }),\n  open: css({\n    display: 'flex',\n  }),\n  fullscreen: css({\n    w: '100dvw',\n    h: '100dvh',\n    maxW: '100dvw',\n    maxH: '100dvh',\n    borderRadius: 0,\n    m: 0,\n    inset: 0,\n  }),\n  inner: css({\n    display: 'flex',\n    flexDirection: 'column',\n    flex: '1 1 auto',\n    minH: 0,\n    overflow: 'hidden',\n    borderRadius: 'inherit',\n  }),\n} as const;\n\nfunction formatSize(value: number | string): string {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nfunction getDismissBehavior(\n  dismissBehavior: DialogDismissBehavior | undefined,\n): {isBackdropDismissEnabled: boolean; isEscapeDismissEnabled: boolean} {\n  if (dismissBehavior == null) {\n    return {isBackdropDismissEnabled: true, isEscapeDismissEnabled: true};\n  }\n\n  if (typeof dismissBehavior === 'boolean') {\n    return {\n      isBackdropDismissEnabled: dismissBehavior,\n      isEscapeDismissEnabled: dismissBehavior,\n    };\n  }\n\n  return {\n    isBackdropDismissEnabled: dismissBehavior.isBackdropDismissEnabled ?? true,\n    isEscapeDismissEnabled: dismissBehavior.isEscapeDismissEnabled ?? true,\n  };\n}\n\n/**\n * A modal dialog surface with backdrop, focus management,\n * and configurable dismiss behavior.\n */\nexport function Dialog({\n  isOpen,\n  label,\n  onOpenChange,\n  width = 400,\n  maxHeight = '75vh',\n  position,\n  variant = 'standard',\n  dismissBehavior,\n  children,\n  className,\n  'data-testid': dataTestId,\n  role = 'dialog',\n  style,\n  ref,\n}: DialogProps): React.JSX.Element {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const isFullscreen = variant === 'fullscreen';\n  const {isBackdropDismissEnabled, isEscapeDismissEnabled} =\n    getDismissBehavior(dismissBehavior);\n  const dialogContextValue = useMemo(() => ({onOpenChange}), [onOpenChange]);\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (dialog == null) {\n      return;\n    }\n\n    if (isOpen) {\n      triggerRef.current = document.activeElement as HTMLElement | null;\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n      const autofocusTarget =\n        dialog.querySelector<HTMLElement>('[data-autofocus=\"true\"]') ??\n        dialog.querySelector<HTMLElement>('[data-dialog-autofocus=\"true\"]');\n      autofocusTarget?.focus();\n    } else if (dialog.open) {\n      dialog.close();\n      triggerRef.current?.focus();\n      triggerRef.current = null;\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n    const previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = previousOverflow;\n    };\n  }, [isOpen]);\n\n  const positionStyle =\n    position != null && !isFullscreen\n      ? {\n          bottom:\n            position.bottom == null ? 'auto' : formatSize(position.bottom),\n          left: position.left == null ? 'auto' : formatSize(position.left),\n          margin: 0,\n          right: position.right == null ? 'auto' : formatSize(position.right),\n          top: position.top == null ? 'auto' : formatSize(position.top),\n        }\n      : undefined;\n\n  return (\n    <dialog\n      aria-label={label}\n      className={cx(\n        styles.root,\n        isOpen ? styles.open : undefined,\n        isFullscreen ? styles.fullscreen : undefined,\n        className,\n      )}\n      data-testid={dataTestId}\n      onCancel={event => {\n        event.preventDefault();\n        if (isEscapeDismissEnabled) {\n          onOpenChange(false);\n        }\n      }}\n      onClick={event => {\n        if (event.target === event.currentTarget && isBackdropDismissEnabled) {\n          onOpenChange(false);\n        }\n      }}\n      ref={mergeRefs(ref, dialogRef)}\n      role={role === 'dialog' ? undefined : role}\n      style={{\n        width: isFullscreen ? undefined : formatSize(width),\n        maxHeight: isFullscreen ? undefined : formatSize(maxHeight),\n        ...positionStyle,\n        ...style,\n      }}>\n      <DialogContext value={dialogContextValue}>\n        <div className={styles.inner}>{children}</div>\n      </DialogContext>\n    </dialog>\n  );\n}\n\nDialog.displayName = 'Dialog';\n","import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const dialogRecipe = cva({\n  base: {\n    position: 'fixed',\n    m: 'auto',\n    p: 0,\n    borderWidth: 0,\n    bg: 'bg',\n    color: 'fg',\n    borderRadius: 'lg',\n    boxShadow: 'lg',\n    display: 'none',\n    flexDirection: 'column',\n    h: 'fit-content',\n    maxW: 'min(90vw, var(--dialog-width))',\n    maxH: 'var(--dialog-max-height)',\n    w: 'var(--dialog-width)',\n    overflow: 'hidden',\n    overscrollBehavior: 'contain',\n    opacity: 0,\n    '&::backdrop': {\n      bg: 'overlay.scrim',\n      backdropFilter: 'blur(2px)',\n    },\n    _focusVisible: {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'accent',\n      outlineOffset: 'focusOffset',\n    },\n  },\n  variants: {\n    isOpen: {\n      true: {\n        display: 'flex',\n        opacity: 1,\n      },\n      false: {},\n    },\n    variant: {\n      standard: {},\n      fullscreen: {\n        inset: 0,\n        m: 0,\n        borderRadius: 0,\n        maxW: '100dvw',\n        maxH: '100dvh',\n        w: '100dvw',\n        h: '100dvh',\n      },\n    },\n  },\n  defaultVariants: {\n    isOpen: false,\n    variant: 'standard',\n  },\n});\n\nexport type DialogVariants = RecipeVariantProps<typeof dialogRecipe>;\n","import {useCallback, useMemo, useState, type ReactNode} from 'react';\nimport {Dialog, type DialogProps} from './Dialog';\n\nexport type DialogOptions = Partial<\n  Omit<DialogProps, 'children' | 'isOpen' | 'onOpenChange'>\n>;\n\nexport interface UseDialogReturn {\n  element: ReactNode;\n  hide: () => void;\n  isOpen: boolean;\n  show: (content: ReactNode, options?: DialogOptions) => void;\n}\n\nexport function useDialog(defaultOptions?: DialogOptions): UseDialogReturn {\n  const [isOpen, setIsOpen] = useState(false);\n  const [content, setContent] = useState<ReactNode>(null);\n  const [options, setOptions] = useState<DialogOptions | undefined>(\n    defaultOptions,\n  );\n\n  const show = useCallback(\n    (nextContent: ReactNode, nextOptions?: DialogOptions) => {\n      setContent(nextContent);\n      setOptions(previous => ({...previous, ...nextOptions}));\n      setIsOpen(true);\n    },\n    [],\n  );\n\n  const hide = useCallback(() => setIsOpen(false), []);\n\n  const element = useMemo(\n    () => (\n      <Dialog\n        {...(defaultOptions ?? {})}\n        {...(options ?? {})}\n        isOpen={isOpen}\n        label={options?.label ?? defaultOptions?.label ?? 'Dialog'}\n        onOpenChange={setIsOpen}>\n        {content}\n      </Dialog>\n    ),\n    [content, defaultOptions, isOpen, options],\n  );\n\n  return {element, hide, isOpen, show};\n}\n"]}

package/dist/chunk-MKAOIB2O.cjs

@@ -0,0 +1,146 @@
+'use strict';
+
+var chunk6SPQDYHC_cjs = require('./chunk-6SPQDYHC.cjs');
+var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var styles = {
+  tooltipContainer: chunkAZDWQGAX_cjs.css({
+    bg: "fg",
+    color: "bg",
+    borderRadius: "md",
+    fontFamily: "body",
+    fontSize: "sm",
+    lineHeight: "normal",
+    boxShadow: "md",
+    "--silver-text-color": "currentColor",
+    "--silver-text-color-muted": "color-mix(in srgb, currentColor 70%, transparent)"
+  }),
+  tooltipContent: chunkAZDWQGAX_cjs.css({
+    px: "2",
+    py: "1",
+    maxW: "xs",
+    wordBreak: "break-word"
+  }),
+  marginByPlacement: {
+    above: chunkAZDWQGAX_cjs.css({ mb: "1" }),
+    below: chunkAZDWQGAX_cjs.css({ mt: "1" }),
+    start: chunkAZDWQGAX_cjs.css({ mr: "1" }),
+    end: chunkAZDWQGAX_cjs.css({ ml: "1" })
+  }
+};
+function useTooltip(options = {}) {
+  const {
+    placement = "above",
+    alignment = "center",
+    delay = 200,
+    hideDelay = 0,
+    focusTrigger = "auto",
+    isEnabled = true,
+    onShow,
+    onHide
+  } = options;
+  const hoverLayer = chunk6SPQDYHC_cjs.useHoverLayer({
+    delay,
+    focusTrigger,
+    hideDelay,
+    isEnabled,
+    onFocusIn: (event) => {
+      const target = event.target;
+      return target.matches(":focus-visible");
+    },
+    onHide,
+    onShow
+  });
+  const { interactionRef, layer, ref } = hoverLayer;
+  react.useEffect(() => {
+    if (!layer.isOpen) {
+      return;
+    }
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        layer.hide();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [layer, layer.isOpen]);
+  const renderTooltip = react.useCallback(
+    (children, props) => {
+      const renderPlacement = props?.placement ?? placement;
+      return layer.render(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.tooltipContent, style: props?.contentStyle, children }),
+        {
+          placement: renderPlacement,
+          alignment: props?.alignment ?? alignment,
+          className: chunk6SPQDYHC_cjs.cx(
+            styles.tooltipContainer,
+            styles.marginByPlacement[renderPlacement],
+            props?.className
+          ),
+          role: "tooltip",
+          style: props?.style
+        }
+      );
+    },
+    [alignment, layer, placement]
+  );
+  return react.useMemo(
+    () => ({
+      ref,
+      positionRef: layer.ref,
+      interactionRef,
+      anchorId: layer.anchorId,
+      describedBy: layer.id,
+      renderTooltip
+    }),
+    [ref, layer.ref, interactionRef, layer.anchorId, layer.id, renderTooltip]
+  );
+}
+function Tooltip({
+  children,
+  content,
+  contentStyle,
+  placement = "above",
+  alignment = "center",
+  delay = 200,
+  hideDelay = 0,
+  focusTrigger = "auto",
+  isEnabled = true,
+  hasHoverIndication = "auto",
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const tooltip = useTooltip({
+    placement,
+    alignment,
+    delay,
+    hideDelay,
+    focusTrigger,
+    isEnabled
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunk6SPQDYHC_cjs.HoverLayerTrigger,
+    {
+      className,
+      "data-testid": dataTestId,
+      describedBy: tooltip.describedBy,
+      hasHoverIndication,
+      layer: tooltip.renderTooltip(content, { contentStyle }),
+      nonTextWrapperElement: "div",
+      style,
+      triggerRef: tooltip.ref,
+      wrapperRef: ref,
+      children
+    }
+  );
+}
+Tooltip.displayName = "Tooltip";
+
+exports.Tooltip = Tooltip;
+exports.useTooltip = useTooltip;
+//# sourceMappingURL=chunk-MKAOIB2O.cjs.map
+//# sourceMappingURL=chunk-MKAOIB2O.cjs.map

package/dist/chunk-MKAOIB2O.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tooltip/useTooltip.tsx","../src/components/Tooltip/Tooltip.tsx"],"names":["css","useHoverLayer","useEffect","useCallback","jsx","cx","useMemo","HoverLayerTrigger"],"mappings":"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","file":"chunk-MKAOIB2O.cjs","sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type RefCallback,\n} from 'react';\nimport {css, cx} from 'styled-system/css';\nimport {\n  useHoverLayer,\n  type HoverLayerFocusTrigger,\n} from '../../internal/useHoverLayer';\nimport type {\n  ContextRenderProps,\n  LayerAlignment,\n  LayerPlacement,\n} from '../../internal/useLayer';\n\nexport type TooltipFocusTrigger = HoverLayerFocusTrigger;\n\nexport interface UseTooltipOptions {\n  alignment?: LayerAlignment;\n  delay?: number;\n  focusTrigger?: TooltipFocusTrigger;\n  hideDelay?: number;\n  isEnabled?: boolean;\n  onHide?: () => void;\n  onShow?: () => void;\n  placement?: LayerPlacement;\n}\n\nexport interface TooltipRenderProps extends ContextRenderProps {\n  contentStyle?: CSSProperties;\n}\n\nexport interface UseTooltipReturn {\n  /**\n   * ID of the anchor element, used for CSS anchor positioning.\n   */\n  anchorId: string;\n  /**\n   * ID of the tooltip element. Pass to `aria-describedby` on the trigger.\n   */\n  describedBy: string;\n  /**\n   * Attaches hover/focus/keyboard listeners only.\n   * Use when another element handles positioning (e.g., a wrapper provides the anchor).\n   */\n  interactionRef: RefCallback<HTMLElement>;\n  /**\n   * Attaches CSS anchor positioning only.\n   * Use when another element handles interaction listeners.\n   */\n  positionRef: RefCallback<HTMLElement>;\n  /**\n   * Combined ref that attaches both positioning and interaction.\n   * Use this for the common case where one element is both the anchor and trigger.\n   * Do not combine with `interactionRef` or `positionRef` — use one or the other.\n   */\n  ref: RefCallback<HTMLElement>;\n  /**\n   * Renders the tooltip content into the layer.\n   */\n  renderTooltip: (children: ReactNode, props?: TooltipRenderProps) => ReactNode;\n}\n\nconst styles = {\n  tooltipContainer: css({\n    bg: 'fg',\n    color: 'bg',\n    borderRadius: 'md',\n    fontFamily: 'body',\n    fontSize: 'sm',\n    lineHeight: 'normal',\n    boxShadow: 'md',\n    '--silver-text-color': 'currentColor',\n    '--silver-text-color-muted':\n      'color-mix(in srgb, currentColor 70%, transparent)',\n  }),\n  tooltipContent: css({\n    px: '2',\n    py: '1',\n    maxW: 'xs',\n    wordBreak: 'break-word',\n  }),\n  marginByPlacement: {\n    above: css({mb: '1'}),\n    below: css({mt: '1'}),\n    start: css({mr: '1'}),\n    end: css({ml: '1'}),\n  },\n} as const;\n\nexport function useTooltip(options: UseTooltipOptions = {}): UseTooltipReturn {\n  const {\n    placement = 'above',\n    alignment = 'center',\n    delay = 200,\n    hideDelay = 0,\n    focusTrigger = 'auto',\n    isEnabled = true,\n    onShow,\n    onHide,\n  } = options;\n\n  const hoverLayer = useHoverLayer({\n    delay,\n    focusTrigger,\n    hideDelay,\n    isEnabled,\n    onFocusIn: event => {\n      const target = event.target as HTMLElement;\n      return target.matches(':focus-visible');\n    },\n    onHide,\n    onShow,\n  });\n\n  const {interactionRef, layer, ref} = hoverLayer;\n\n  useEffect(() => {\n    if (!layer.isOpen) {\n      return;\n    }\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        layer.hide();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [layer, layer.isOpen]);\n\n  const renderTooltip = useCallback(\n    (children: ReactNode, props?: TooltipRenderProps): ReactNode => {\n      const renderPlacement = props?.placement ?? placement;\n      return layer.render(\n        <div className={styles.tooltipContent} style={props?.contentStyle}>\n          {children}\n        </div>,\n        {\n          placement: renderPlacement,\n          alignment: props?.alignment ?? alignment,\n          className: cx(\n            styles.tooltipContainer,\n            styles.marginByPlacement[renderPlacement],\n            props?.className,\n          ),\n          role: 'tooltip',\n          style: props?.style,\n        },\n      );\n    },\n    [alignment, layer, placement],\n  );\n\n  return useMemo(\n    () => ({\n      ref,\n      positionRef: layer.ref,\n      interactionRef,\n      anchorId: layer.anchorId,\n      describedBy: layer.id,\n      renderTooltip,\n    }),\n    [ref, layer.ref, interactionRef, layer.anchorId, layer.id, renderTooltip],\n  );\n}\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {HoverLayerTrigger} from '../../internal/HoverLayerTrigger';\nimport type {LayerAlignment, LayerPlacement} from '../../internal/useLayer';\nimport {useTooltip, type TooltipFocusTrigger} from './useTooltip';\n\nexport type {TooltipFocusTrigger} from './useTooltip';\n\nexport interface TooltipProps {\n  /**\n   * Cross-axis alignment of the tooltip relative to the anchor.\n   * @default 'center'\n   */\n  alignment?: LayerAlignment;\n  /**\n   * Element(s) that the tooltip is anchored to.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the wrapper.\n   */\n  className?: string;\n  /**\n   * Content rendered inside the tooltip popup.\n   */\n  content: ReactNode;\n  /**\n   * Inline styles applied to the tooltip content area.\n   */\n  contentStyle?: CSSProperties;\n  /**\n   * Test ID applied to the wrapper.\n   */\n  'data-testid'?: string;\n  /**\n   * Delay in milliseconds before the tooltip appears.\n   * @default 200\n   */\n  delay?: number;\n  /**\n   * How focus interactions trigger the tooltip.\n   * @default 'auto'\n   */\n  focusTrigger?: TooltipFocusTrigger;\n  /**\n   * Whether to show a dashed underline on text-only children.\n   * @default 'auto'\n   */\n  hasHoverIndication?: 'auto' | boolean;\n  /**\n   * Delay in milliseconds before the tooltip hides after leaving.\n   * @default 0\n   */\n  hideDelay?: number;\n  /**\n   * Whether the tooltip can be shown.\n   * @default true\n   */\n  isEnabled?: boolean;\n  /**\n   * Preferred placement of the tooltip relative to the anchor.\n   * @default 'above'\n   */\n  placement?: LayerPlacement;\n  /**\n   * Ref forwarded to the wrapper element.\n   */\n  ref?: Ref<HTMLDivElement | HTMLSpanElement>;\n  /**\n   * Inline styles applied to the wrapper.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * Displays contextual information in a popup anchored to a trigger element.\n *\n * For attaching a tooltip to an external ref (without wrapping children),\n * use the `useTooltip` hook directly.\n */\nexport function Tooltip({\n  children,\n  content,\n  contentStyle,\n  placement = 'above',\n  alignment = 'center',\n  delay = 200,\n  hideDelay = 0,\n  focusTrigger = 'auto',\n  isEnabled = true,\n  hasHoverIndication = 'auto',\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: TooltipProps): React.JSX.Element {\n  const tooltip = useTooltip({\n    placement,\n    alignment,\n    delay,\n    hideDelay,\n    focusTrigger,\n    isEnabled,\n  });\n\n  return (\n    <HoverLayerTrigger\n      className={className}\n      data-testid={dataTestId}\n      describedBy={tooltip.describedBy}\n      hasHoverIndication={hasHoverIndication}\n      layer={tooltip.renderTooltip(content, {contentStyle})}\n      nonTextWrapperElement=\"div\"\n      style={style}\n      triggerRef={tooltip.ref}\n      wrapperRef={ref}>\n      {children}\n    </HoverLayerTrigger>\n  );\n}\n\nTooltip.displayName = 'Tooltip';\n"]}

package/dist/chunk-NAELQLZN.js

@@ -0,0 +1,73 @@
+import { memo, compact, mergeCss, uniq, mergeProps, css, splitProps } from './chunk-UHQRL4OA.js';
+
+// styled-system/css/cva.js
+var defaults = (conf) => ({
+  base: {},
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+  ...conf
+});
+function cva(config) {
+  const { base, variants, defaultVariants, compoundVariants } = defaults(config);
+  const getVariantProps = (variants2) => ({ ...defaultVariants, ...compact(variants2) });
+  function resolve(props = {}) {
+    const computedVariants = getVariantProps(props);
+    let variantCss = { ...base };
+    for (const [key, value] of Object.entries(computedVariants)) {
+      if (variants[key]?.[value]) {
+        variantCss = mergeCss(variantCss, variants[key][value]);
+      }
+    }
+    const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants);
+    return mergeCss(variantCss, compoundVariantCss);
+  }
+  function merge(__cva) {
+    const override = defaults(__cva.config);
+    const variantKeys2 = uniq(__cva.variantKeys, Object.keys(variants));
+    return cva({
+      base: mergeCss(base, override.base),
+      variants: Object.fromEntries(
+        variantKeys2.map((key) => [key, mergeCss(variants[key], override.variants[key])])
+      ),
+      defaultVariants: mergeProps(defaultVariants, override.defaultVariants),
+      compoundVariants: [...compoundVariants, ...override.compoundVariants]
+    });
+  }
+  function cvaFn(props) {
+    return css(resolve(props));
+  }
+  const variantKeys = Object.keys(variants);
+  function splitVariantProps(props) {
+    return splitProps(props, variantKeys);
+  }
+  const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]));
+  return Object.assign(memo(cvaFn), {
+    __cva__: true,
+    variantMap,
+    variantKeys,
+    raw: resolve,
+    config,
+    merge,
+    splitVariantProps,
+    getVariantProps
+  });
+}
+function getCompoundVariantCss(compoundVariants, variantMap) {
+  let result = {};
+  compoundVariants.forEach((compoundVariant) => {
+    const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
+      if (key === "css") return true;
+      const values = Array.isArray(value) ? value : [value];
+      return values.some((value2) => variantMap[key] === value2);
+    });
+    if (isMatching) {
+      result = mergeCss(result, compoundVariant.css);
+    }
+  });
+  return result;
+}
+
+export { cva };
+//# sourceMappingURL=chunk-NAELQLZN.js.map
+//# sourceMappingURL=chunk-NAELQLZN.js.map

package/dist/chunk-NAELQLZN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../styled-system/css/cva.js"],"names":["variants","variantKeys","value"],"mappings":"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","file":"chunk-NAELQLZN.js","sourcesContent":["import { compact, mergeProps, memo, splitProps, uniq } from '../helpers.js';\nimport { css, mergeCss } from './css.js';\n\nconst defaults = (conf) => ({\n  base: {},\n  variants: {},\n  defaultVariants: {},\n  compoundVariants: [],\n  ...conf,\n})\n\nexport function cva(config) {\n  const { base, variants, defaultVariants, compoundVariants } = defaults(config)\n  const getVariantProps = (variants) => ({ ...defaultVariants, ...compact(variants) })\n\n  function resolve(props = {}) {\n    const computedVariants = getVariantProps(props)\n    let variantCss = { ...base }\n    for (const [key, value] of Object.entries(computedVariants)) {\n      if (variants[key]?.[value]) {\n        variantCss = mergeCss(variantCss, variants[key][value])\n      }\n    }\n    const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants)\n    return mergeCss(variantCss, compoundVariantCss)\n  }\n\n  function merge(__cva) {\n    const override = defaults(__cva.config)\n    const variantKeys = uniq(__cva.variantKeys, Object.keys(variants))\n    return cva({\n      base: mergeCss(base, override.base),\n      variants: Object.fromEntries(\n        variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]),\n      ),\n      defaultVariants: mergeProps(defaultVariants, override.defaultVariants),\n      compoundVariants: [...compoundVariants, ...override.compoundVariants],\n    })\n  }\n\n  function cvaFn(props) {\n    return css(resolve(props))\n  }\n\n  const variantKeys = Object.keys(variants)\n\n  function splitVariantProps(props) {\n    return splitProps(props, variantKeys)\n  }\n\n  const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))\n\n  return Object.assign(memo(cvaFn), {\n    __cva__: true,\n    variantMap,\n    variantKeys,\n    raw: resolve,\n    config,\n    merge,\n    splitVariantProps,\n    getVariantProps\n  })\n}\n\nexport function getCompoundVariantCss(compoundVariants, variantMap) {\n  let result = {}\n  compoundVariants.forEach((compoundVariant) => {\n    const isMatching = Object.entries(compoundVariant).every(([key, value]) => {\n      if (key === 'css') return true\n\n      const values = Array.isArray(value) ? value : [value]\n      return values.some((value) => variantMap[key] === value)\n    })\n\n    if (isMatching) {\n      result = mergeCss(result, compoundVariant.css)\n    }\n  })\n\n  return result\n}\n\nexport function assertCompoundVariant(name, compoundVariants, variants, prop) {\n  if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') {\n    throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`)\n  }\n}\n"]}