@dev-dga/react 0.11.0 → 0.12.0

package/dist/chunk-FF4QNJOQ.js

@@ -0,0 +1,149 @@
+import {
+  DgaContext
+} from "./chunk-TMXABSFE.js";
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/Tooltip/Tooltip.tsx
+import { useContext } from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var tooltipContentVariants = cva("ddga-tooltip", {
+  variants: {
+    inverted: {
+      true: "ddga-tooltip--inverted",
+      false: ""
+    }
+  },
+  defaultVariants: { inverted: false }
+});
+function TooltipHelpGlyph({ size = 18, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn("ddga-tooltip__glyph", className),
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      "data-slot": "tooltip-glyph",
+      children: /* @__PURE__ */ jsxs("g", { transform: "translate(1 1)", children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "ddga-tooltip__glyph-disc",
+            d: "M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22Z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "ddga-tooltip__glyph-mark",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11C0 4.92487 4.92487 0 11 0C17.0751 0 22 4.92487 22 11ZM9.81691 7.27574C10.2241 7.03643 10.7029 6.94895 11.1684 7.0288C11.6339 7.10865 12.0562 7.35067 12.3603 7.71201C12.6645 8.07334 12.831 8.53067 12.8303 9.00299L12.8303 9.00448C12.8303 9.47361 12.4652 9.9627 11.7756 10.4224C11.4612 10.632 11.1397 10.7935 10.8929 10.9032C10.7709 10.9574 10.6706 10.9974 10.6032 11.0231C10.5696 11.0359 10.5443 11.0451 10.529 11.0505L10.5135 11.056C9.98991 11.2308 9.707 11.7969 9.88159 12.3207C10.0562 12.8446 10.6226 13.1278 11.1465 12.9532L10.8303 12.0045C11.1465 12.9532 11.1478 12.9527 11.1478 12.9527L11.1493 12.9522L11.1532 12.9509L11.1642 12.9471L11.199 12.935C11.2275 12.9248 11.2668 12.9105 11.3152 12.8921C11.4118 12.8553 11.5459 12.8016 11.7052 12.7308C12.0208 12.5905 12.4493 12.377 12.885 12.0865C13.6952 11.5464 14.8298 10.5357 14.8303 9.00539C14.8315 8.06096 14.4986 7.14653 13.8904 6.42401C13.282 5.70133 12.4375 5.21728 11.5065 5.05758C10.5755 4.89789 9.61795 5.07285 8.80354 5.55148C7.98914 6.03011 7.37041 6.78152 7.05694 7.67263C6.87367 8.19362 7.14744 8.76454 7.66843 8.94781C8.18942 9.13108 8.76033 8.85731 8.94361 8.33632C9.10034 7.89077 9.40971 7.51506 9.81691 7.27574ZM10.9103 15.0045C10.358 15.0045 9.91027 15.4522 9.91027 16.0045C9.91027 16.5568 10.358 17.0045 10.9103 17.0045H10.9203C11.4726 17.0045 11.9203 16.5568 11.9203 16.0045C11.9203 15.4522 11.4726 15.0045 10.9203 15.0045H10.9103Z"
+          }
+        )
+      ] })
+    }
+  );
+}
+function Tooltip(props) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props });
+}
+function TooltipTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", className, ...props });
+}
+function TooltipContent({
+  inverted = false,
+  title,
+  icon,
+  arrow = true,
+  sideOffset = 6,
+  className,
+  children,
+  ...props
+}) {
+  const ctx = useContext(DgaContext);
+  const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
+  const iconNode = icon === true ? /* @__PURE__ */ jsx(TooltipHelpGlyph, {}) : icon || null;
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(tooltipContentVariants({ inverted }), className),
+      ...props,
+      children: [
+        iconNode ? /* @__PURE__ */ jsx("span", { className: "ddga-tooltip__icon", "data-slot": "tooltip-icon", children: iconNode }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "ddga-tooltip__text", "data-slot": "tooltip-text", children: [
+          title ? /* @__PURE__ */ jsx("p", { className: "ddga-tooltip__title", "data-slot": "tooltip-title", children: title }) : null,
+          /* @__PURE__ */ jsx("div", { className: "ddga-tooltip__body", "data-slot": "tooltip-body", children })
+        ] }),
+        arrow ? /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "ddga-tooltip__arrow", width: 28, height: 6 }) : null
+      ]
+    }
+  ) });
+}
+function HelpIcon({
+  label,
+  children,
+  title,
+  inverted,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration,
+  side,
+  align,
+  sideOffset,
+  arrow,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    Tooltip,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      delayDuration,
+      children: [
+        /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            type: "button",
+            "aria-label": label,
+            className: cn("ddga-tooltip-help", className),
+            "data-slot": "tooltip-help",
+            children: /* @__PURE__ */ jsx(TooltipHelpGlyph, { size: 20, className: "ddga-tooltip-help__glyph" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TooltipContent,
+          {
+            inverted,
+            title,
+            icon: true,
+            side,
+            align,
+            sideOffset,
+            arrow,
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  tooltipContentVariants,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  HelpIcon
+};
+//# sourceMappingURL=chunk-FF4QNJOQ.js.map

package/dist/chunk-FF4QNJOQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, type ReactNode } from 'react';\nimport { Tooltip as TooltipPrimitive } from 'radix-ui';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { DgaContext } from '../../providers/DgaContext';\n\nconst tooltipContentVariants = cva('ddga-tooltip', {\n  variants: {\n    inverted: {\n      true: 'ddga-tooltip--inverted',\n      false: '',\n    },\n  },\n  defaultVariants: { inverted: false },\n});\n\n/** The exact SDGA \"Neutral-?\" help-circle: a fixed gray-700 disc with a white \"?\". */\nfunction TooltipHelpGlyph({ size = 18, className }: { size?: number; className?: string }) {\n  return (\n    <svg\n      className={cn('ddga-tooltip__glyph', className)}\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      data-slot=\"tooltip-glyph\"\n    >\n      <g transform=\"translate(1 1)\">\n        <path\n          className=\"ddga-tooltip__glyph-disc\"\n          d=\"M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22Z\"\n        />\n        <path\n          className=\"ddga-tooltip__glyph-mark\"\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11C0 4.92487 4.92487 0 11 0C17.0751 0 22 4.92487 22 11ZM9.81691 7.27574C10.2241 7.03643 10.7029 6.94895 11.1684 7.0288C11.6339 7.10865 12.0562 7.35067 12.3603 7.71201C12.6645 8.07334 12.831 8.53067 12.8303 9.00299L12.8303 9.00448C12.8303 9.47361 12.4652 9.9627 11.7756 10.4224C11.4612 10.632 11.1397 10.7935 10.8929 10.9032C10.7709 10.9574 10.6706 10.9974 10.6032 11.0231C10.5696 11.0359 10.5443 11.0451 10.529 11.0505L10.5135 11.056C9.98991 11.2308 9.707 11.7969 9.88159 12.3207C10.0562 12.8446 10.6226 13.1278 11.1465 12.9532L10.8303 12.0045C11.1465 12.9532 11.1478 12.9527 11.1478 12.9527L11.1493 12.9522L11.1532 12.9509L11.1642 12.9471L11.199 12.935C11.2275 12.9248 11.2668 12.9105 11.3152 12.8921C11.4118 12.8553 11.5459 12.8016 11.7052 12.7308C12.0208 12.5905 12.4493 12.377 12.885 12.0865C13.6952 11.5464 14.8298 10.5357 14.8303 9.00539C14.8315 8.06096 14.4986 7.14653 13.8904 6.42401C13.282 5.70133 12.4375 5.21728 11.5065 5.05758C10.5755 4.89789 9.61795 5.07285 8.80354 5.55148C7.98914 6.03011 7.37041 6.78152 7.05694 7.67263C6.87367 8.19362 7.14744 8.76454 7.66843 8.94781C8.18942 9.13108 8.76033 8.85731 8.94361 8.33632C9.10034 7.89077 9.40971 7.51506 9.81691 7.27574ZM10.9103 15.0045C10.358 15.0045 9.91027 15.4522 9.91027 16.0045C9.91027 16.5568 10.358 17.0045 10.9103 17.0045H10.9203C11.4726 17.0045 11.9203 16.5568 11.9203 16.0045C11.9203 15.4522 11.4726 15.0045 10.9203 15.0045H10.9103Z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>;\n\ntype TooltipTriggerProps = React.ComponentProps<typeof TooltipPrimitive.Trigger>;\n\ninterface TooltipContentProps\n  extends\n    Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, 'asChild' | 'title'>,\n    VariantProps<typeof tooltipContentVariants> {\n  /** Dark surface (gray-800) instead of the default light card. Mirrors SDGA `Inverted`. */\n  inverted?: boolean;\n  /** Bold heading shown above the body text. */\n  title?: ReactNode;\n  /** Leading help badge: `true` renders the SDGA \"?\" help-circle, or pass your own node. */\n  icon?: boolean | ReactNode;\n  /** Show the beak pointing at the trigger. Defaults to true. */\n  arrow?: boolean;\n}\n\n/**\n * Tooltip root. **Must be rendered inside `<DgaProvider>`** — the provider supplies\n * the Radix `TooltipProvider` this depends on (and the themed portal container). Used\n * outside a `DgaProvider` the tooltip will not work.\n */\nfunction Tooltip(props: TooltipProps) {\n  return <TooltipPrimitive.Root {...props} />;\n}\n\nfunction TooltipTrigger({ className, ...props }: TooltipTriggerProps) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" className={className} {...props} />;\n}\n\nfunction TooltipContent({\n  inverted = false,\n  title,\n  icon,\n  arrow = true,\n  sideOffset = 6,\n  className,\n  children,\n  ...props\n}: TooltipContentProps) {\n  const ctx = useContext(DgaContext);\n  const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? undefined;\n  const iconNode = icon === true ? <TooltipHelpGlyph /> : icon || null;\n\n  return (\n    <TooltipPrimitive.Portal container={portalContainer}>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(tooltipContentVariants({ inverted }), className)}\n        {...props}\n      >\n        {iconNode ? (\n          <span className=\"ddga-tooltip__icon\" data-slot=\"tooltip-icon\">\n            {iconNode}\n          </span>\n        ) : null}\n        <div className=\"ddga-tooltip__text\" data-slot=\"tooltip-text\">\n          {title ? (\n            <p className=\"ddga-tooltip__title\" data-slot=\"tooltip-title\">\n              {title}\n            </p>\n          ) : null}\n          <div className=\"ddga-tooltip__body\" data-slot=\"tooltip-body\">\n            {children}\n          </div>\n        </div>\n        {arrow ? (\n          <TooltipPrimitive.Arrow className=\"ddga-tooltip__arrow\" width={28} height={6} />\n        ) : null}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\ninterface HelpIconProps\n  extends\n    Pick<TooltipProps, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'>,\n    Pick<TooltipContentProps, 'inverted' | 'title' | 'side' | 'align' | 'sideOffset' | 'arrow'> {\n  /** Accessible name for the help trigger (the icon has no text). */\n  label: string;\n  /** Tooltip body text. */\n  children: ReactNode;\n  /** Class on the trigger button. */\n  className?: string;\n}\n\n/**\n * SDGA \"Help Icon\" — a 20px \"?\" help-circle button that reveals its Tooltip on\n * hover/focus. The bubble carries the same leading \"?\" badge as in SDGA.\n */\nfunction HelpIcon({\n  label,\n  children,\n  title,\n  inverted,\n  open,\n  defaultOpen,\n  onOpenChange,\n  delayDuration,\n  side,\n  align,\n  sideOffset,\n  arrow,\n  className,\n}: HelpIconProps) {\n  return (\n    <Tooltip\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      delayDuration={delayDuration}\n    >\n      <TooltipTrigger\n        type=\"button\"\n        aria-label={label}\n        className={cn('ddga-tooltip-help', className)}\n        data-slot=\"tooltip-help\"\n      >\n        <TooltipHelpGlyph size={20} className=\"ddga-tooltip-help__glyph\" />\n      </TooltipTrigger>\n      <TooltipContent\n        inverted={inverted}\n        title={title}\n        icon\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        arrow={arrow}\n      >\n        {children}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, HelpIcon, tooltipContentVariants };\nexport type { TooltipProps, TooltipTriggerProps, TooltipContentProps, HelpIconProps };\n"],"mappings":"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","names":[]}