@acronis-platform/ui-react 0.58.0 → 0.61.0

package/dist/components/ui/dialog-welcome/dialog-welcome.js

@@ -0,0 +1,272 @@
+import { jsx as e, jsxs as w, Fragment as L } from "react/jsx-runtime";
+import * as c from "react";
+import U from "../../../node_modules/.pnpm/embla-carousel-react@8.6.0_react@19.2.6/node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
+import { cn as _ } from "../../../lib/utils.js";
+import { useDocDir as q } from "../../../lib/use-doc-dir.js";
+import { DialogRoot as G, DialogContent as H, DialogClose as J, DialogTitle as K, DialogDescription as O } from "../dialog/dialog.js";
+import { DialogFooterCarousel as Q } from "../dialog-footer-carousel/dialog-footer-carousel.js";
+import { Button as M } from "../button/button.js";
+function F({
+  image: s,
+  title: l,
+  description: r,
+  active: a,
+  withBottomPadding: i = !0
+}) {
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      className: _(
+        "flex w-full flex-col items-center gap-3 pt-4",
+        i && "pb-4"
+      ),
+      children: [
+        /* @__PURE__ */ e("div", { className: "w-full overflow-hidden rounded-lg px-4", children: /* @__PURE__ */ e("div", { className: "flex h-[272px] w-full items-center justify-center rounded bg-[var(--ui-background-surface-active)]", children: s }) }),
+        /* @__PURE__ */ w("div", { className: "flex w-full flex-col items-center gap-1 px-4 text-center", children: [
+          a ? /* @__PURE__ */ e(K, { className: "w-full flex-none text-center", children: l }) : /* @__PURE__ */ e("p", { className: "w-full text-2xl font-normal leading-8 text-foreground", children: l }),
+          a ? /* @__PURE__ */ e(O, { className: "w-full flex-none text-center text-sm leading-6 text-foreground", children: r }) : /* @__PURE__ */ e("p", { className: "w-full text-sm leading-6 text-foreground", children: r })
+        ] })
+      ]
+    }
+  );
+}
+const E = [
+  { title: "Title", description: "Feature description." },
+  { title: "Title", description: "Feature description." },
+  { title: "Title", description: "Feature description." }
+];
+function X({
+  slideCount: s,
+  selectedIndexProp: l,
+  onSelectedIndexChange: r
+}) {
+  const a = q(), i = l !== void 0, d = Math.min(
+    Math.max(l ?? 0, 0),
+    Math.max(s - 1, 0)
+  ), [p, t] = U({
+    loop: !1,
+    direction: a,
+    startIndex: d
+  }), [v, N] = c.useState(0), o = Math.min(
+    Math.max(l ?? v, 0),
+    Math.max(s - 1, 0)
+  ), f = c.useRef(r);
+  c.useEffect(() => {
+    f.current = r;
+  }, [r]);
+  const m = c.useRef(i);
+  m.current = i;
+  const n = c.useRef(o);
+  n.current = o, c.useEffect(() => {
+    if (!t) return;
+    const u = () => {
+      var x;
+      const h = t.selectedScrollSnap();
+      if (m.current) {
+        if (!f.current) {
+          h !== n.current && t.scrollTo(n.current, !0);
+          return;
+        }
+        h !== n.current && f.current(h);
+        return;
+      }
+      N(h), (x = f.current) == null || x.call(f, h);
+    };
+    return u(), t.on("select", u), t.on("reInit", u), () => {
+      t.off("select", u), t.off("reInit", u);
+    };
+  }, [t]), c.useEffect(() => {
+    l === void 0 || !t || t.selectedScrollSnap() !== o && t.scrollTo(o, !0);
+  }, [t, l, o]);
+  const D = c.useRef(!0);
+  c.useEffect(() => {
+    if (t) {
+      if (D.current) {
+        D.current = !1;
+        return;
+      }
+      t.reInit({ direction: a });
+    }
+  }, [t, a]);
+  const R = c.useCallback(
+    (u) => {
+      i ? r == null || r(u) : t == null || t.scrollTo(u);
+    },
+    [i, t, r]
+  ), g = c.useCallback(() => {
+    i ? r == null || r(Math.max(o - 1, 0)) : t == null || t.scrollPrev();
+  }, [i, t, r, o]), k = c.useCallback(() => {
+    i ? r == null || r(Math.min(o + 1, s - 1)) : t == null || t.scrollNext();
+  }, [i, t, r, o, s]), T = o === s - 1 ? "end" : o === 0 ? "start" : "middle";
+  return {
+    emblaRef: p,
+    selectedIndex: o,
+    handleSelectIndex: R,
+    handleBack: g,
+    handleNext: k,
+    footerVariant: T
+  };
+}
+function Y({
+  slides: s,
+  selectedIndex: l,
+  emblaRef: r,
+  footerVariant: a,
+  onSelectIndex: i,
+  onBack: d,
+  onNext: p,
+  onPrimaryAction: t,
+  backLabel: v,
+  nextLabel: N,
+  primaryLabel: o,
+  goToSlideLabel: f
+}) {
+  return /* @__PURE__ */ w(L, { children: [
+    /* @__PURE__ */ e("div", { ref: r, className: "w-full overflow-hidden", children: /* @__PURE__ */ e("div", { className: "flex", children: s.map((m, n) => /* @__PURE__ */ e(
+      "div",
+      {
+        className: "min-w-0 shrink-0 grow-0 basis-full",
+        "aria-hidden": n !== l || void 0,
+        inert: n !== l,
+        children: /* @__PURE__ */ e(
+          F,
+          {
+            image: m.image,
+            title: m.title,
+            description: m.description,
+            active: n === l
+          }
+        )
+      },
+      n
+    )) }) }),
+    /* @__PURE__ */ e(
+      Q,
+      {
+        variant: a,
+        slideCount: s.length,
+        selectedIndex: l,
+        onSelectIndex: i,
+        onBack: d,
+        onNext: p,
+        onPrimaryAction: t,
+        backLabel: v,
+        nextLabel: N,
+        primaryLabel: o,
+        goToSlideLabel: f
+      }
+    )
+  ] });
+}
+function Z({
+  image: s,
+  title: l,
+  description: r,
+  primaryLabel: a,
+  onPrimaryAction: i,
+  closeLabel: d,
+  onCloseAction: p
+}) {
+  return /* @__PURE__ */ w("div", { className: "flex w-full flex-col items-center gap-3 pb-4", children: [
+    /* @__PURE__ */ e(
+      F,
+      {
+        image: s,
+        title: l,
+        description: r,
+        active: !0,
+        withBottomPadding: !1
+      }
+    ),
+    /* @__PURE__ */ w("div", { className: "flex w-full flex-col items-center gap-2 px-4", children: [
+      /* @__PURE__ */ e(M, { onClick: i, children: a ?? "Call to action" }),
+      /* @__PURE__ */ e(
+        J,
+        {
+          onClick: p,
+          render: /* @__PURE__ */ e(M, { variant: "ghost", children: d })
+        }
+      )
+    ] })
+  ] });
+}
+const $ = c.forwardRef(
+  ({
+    variant: s = "carousel",
+    slides: l = E,
+    selectedIndex: r,
+    onSelectedIndexChange: a,
+    backLabel: i,
+    nextLabel: d,
+    goToSlideLabel: p,
+    image: t,
+    title: v = "Title",
+    description: N = "Feature description.",
+    closeLabel: o = "Close",
+    onCloseAction: f,
+    primaryLabel: m,
+    onPrimaryAction: n,
+    portal: D,
+    portalContainer: R,
+    keepMounted: g,
+    className: k,
+    ...T
+  }, u) => {
+    const h = s === "carousel", x = l.length > 0 ? l : E, B = x.length, {
+      emblaRef: b,
+      selectedIndex: W,
+      handleSelectIndex: j,
+      handleBack: V,
+      handleNext: y,
+      footerVariant: z
+    } = X({
+      slideCount: B,
+      selectedIndexProp: r,
+      onSelectedIndexChange: a
+    });
+    return /* @__PURE__ */ e(G, { ...T, children: /* @__PURE__ */ e(
+      H,
+      {
+        ref: u,
+        size: "sm",
+        portal: D,
+        portalContainer: R,
+        keepMounted: g,
+        className: k,
+        children: h ? /* @__PURE__ */ e(
+          Y,
+          {
+            slides: x,
+            selectedIndex: W,
+            emblaRef: b,
+            footerVariant: z,
+            onSelectIndex: j,
+            onBack: V,
+            onNext: y,
+            onPrimaryAction: n,
+            backLabel: i,
+            nextLabel: d,
+            primaryLabel: m,
+            goToSlideLabel: p
+          }
+        ) : /* @__PURE__ */ e(
+          Z,
+          {
+            image: t,
+            title: v,
+            description: N,
+            primaryLabel: m,
+            onPrimaryAction: n,
+            closeLabel: o,
+            onCloseAction: f
+          }
+        )
+      }
+    ) });
+  }
+);
+$.displayName = "DialogWelcome";
+export {
+  $ as DialogWelcome
+};
+//# sourceMappingURL=dialog-welcome.js.map

package/dist/components/ui/dialog-welcome/dialog-welcome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-welcome.js","sources":["../../../../src/components/ui/dialog-welcome/dialog-welcome.tsx"],"sourcesContent":["import * as React from 'react';\nimport useEmblaCarousel from 'embla-carousel-react';\n\nimport { cn } from '@/lib/utils';\nimport { useDocDir } from '@/lib/use-doc-dir';\n\nimport { Button } from '../button';\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentProps,\n  DialogDescription,\n  DialogRoot,\n  DialogTitle,\n} from '../dialog';\nimport {\n  DialogFooterCarousel,\n  type DialogFooterCarouselVariant,\n} from '../dialog-footer-carousel';\n\n// Ports Figma's \"DialogWelcome\" component (node 7162:26459, variants\n// carousel/single): a `Container` (reuses the generic `DialogContent` popup\n// chrome — bg/radius/shadow already match the `--ui-dialog-container-*` tier)\n// around a `DialogBody` (Image + Title + Description) and, for\n// `variant=\"carousel\"`, a `DialogFooterCarousel` driven by a real Embla\n// instance built from scratch here — no import from any existing carousel\n// implementation.\n\nexport interface DialogWelcomeSlide {\n  /** Illustration/media for the slide. Falls back to a placeholder surface when omitted. */\n  image?: React.ReactNode;\n  title: string;\n  description: string;\n}\n\nexport type DialogWelcomeVariant = 'carousel' | 'single';\n\ninterface DialogWelcomeSlideBodyProps {\n  image?: React.ReactNode;\n  title: string;\n  description: string;\n  /** Whether this slide currently owns the dialog's accessible name/description. */\n  active: boolean;\n  /**\n   * Whether this renders the DialogBody's own bottom padding (Figma's\n   * `py-16` applied around the whole body). `false` when more DialogBody\n   * content (e.g. the `single` variant's buttons) follows, so the caller can\n   * apply the correct `gap-12` between them instead of stacking padding on\n   * top of a gap.\n   */\n  withBottomPadding?: boolean;\n}\n\nfunction DialogWelcomeSlideBody({\n  image,\n  title,\n  description,\n  active,\n  withBottomPadding = true,\n}: DialogWelcomeSlideBodyProps) {\n  return (\n    <div\n      className={cn(\n        'flex w-full flex-col items-center gap-3 pt-4',\n        withBottomPadding && 'pb-4'\n      )}\n    >\n      <div className=\"w-full overflow-hidden rounded-lg px-4\">\n        <div className=\"flex h-[272px] w-full items-center justify-center rounded bg-[var(--ui-background-surface-active)]\">\n          {image}\n        </div>\n      </div>\n      <div className=\"flex w-full flex-col items-center gap-1 px-4 text-center\">\n        {active ? (\n          <DialogTitle className=\"w-full flex-none text-center\">\n            {title}\n          </DialogTitle>\n        ) : (\n          <p className=\"w-full text-2xl font-normal leading-8 text-foreground\">\n            {title}\n          </p>\n        )}\n        {active ? (\n          <DialogDescription className=\"w-full flex-none text-center text-sm leading-6 text-foreground\">\n            {description}\n          </DialogDescription>\n        ) : (\n          <p className=\"w-full text-sm leading-6 text-foreground\">\n            {description}\n          </p>\n        )}\n      </div>\n    </div>\n  );\n}\n\nconst DEFAULT_SLIDES: DialogWelcomeSlide[] = [\n  { title: 'Title', description: 'Feature description.' },\n  { title: 'Title', description: 'Feature description.' },\n  { title: 'Title', description: 'Feature description.' },\n];\n\ninterface UseDialogWelcomeCarouselOptions {\n  slideCount: number;\n  selectedIndexProp?: number;\n  onSelectedIndexChange?: (index: number) => void;\n}\n\nfunction useDialogWelcomeCarousel({\n  slideCount,\n  selectedIndexProp,\n  onSelectedIndexChange,\n}: UseDialogWelcomeCarouselOptions) {\n  const dir = useDocDir();\n  const isControlled = selectedIndexProp !== undefined;\n  // Mount Embla already on the (clamped) controlled slide instead of its\n  // default 0 — otherwise the initial `onSelect()` below reports a phantom\n  // \"slide 0\" before the resync effect corrects it, which a consumer wiring\n  // analytics off `onSelectedIndexChange` would log as a real event.\n  const initialIndex = Math.min(\n    Math.max(selectedIndexProp ?? 0, 0),\n    Math.max(slideCount - 1, 0)\n  );\n  const [emblaRef, emblaApi] = useEmblaCarousel({\n    loop: false,\n    direction: dir,\n    startIndex: initialIndex,\n  });\n  const [internalIndex, setInternalIndex] = React.useState(0);\n  // Two-sided: an out-of-range (e.g. negative) `selectedIndex` must still\n  // resolve to a real slide, or no slide would carry the dialog's\n  // Title/Description (see dialog-welcome/accessibility.md's one-active-slide\n  // invariant).\n  const selectedIndex = Math.min(\n    Math.max(selectedIndexProp ?? internalIndex, 0),\n    Math.max(slideCount - 1, 0)\n  );\n\n  // `onSelectedIndexChange` is read from a ref, not a `useEffect` dependency,\n  // so an inline (non-memoized) consumer callback can't force this effect to\n  // re-subscribe — which would call `onSelect()` again on the same slide and,\n  // if the consumer's callback triggers a re-render, loop indefinitely.\n  const onSelectedIndexChangeRef = React.useRef(onSelectedIndexChange);\n  React.useEffect(() => {\n    onSelectedIndexChangeRef.current = onSelectedIndexChange;\n  }, [onSelectedIndexChange]);\n\n  // Read fresh on every Embla event without forcing the subscription effect\n  // below to resubscribe (same reasoning as `onSelectedIndexChangeRef`).\n  const isControlledRef = React.useRef(isControlled);\n  isControlledRef.current = isControlled;\n  const selectedIndexRef = React.useRef(selectedIndex);\n  selectedIndexRef.current = selectedIndex;\n\n  React.useEffect(() => {\n    if (!emblaApi) return;\n    const onSelect = () => {\n      const index = emblaApi.selectedScrollSnap();\n      if (isControlledRef.current) {\n        if (!onSelectedIndexChangeRef.current) {\n          // Embla is draggable regardless of controlled state, so a swipe can\n          // still move it physically even though clicks are correctly no-ops\n          // in this configuration (controlled with no way to move the prop\n          // forward). Snap back instead of leaving the visible slide diverged\n          // from the one carrying the dialog's accessible name.\n          if (index !== selectedIndexRef.current) {\n            emblaApi.scrollTo(selectedIndexRef.current, true);\n          }\n          return;\n        }\n        // A click/dot handler reports the new index directly, then the resync\n        // effect below drives Embla to match via `scrollTo`, which re-emits\n        // this same `select` event. Only forward it when it disagrees with\n        // the last known controlled index, or a single navigation double-\n        // fires the consumer's `onSelectedIndexChange` (e.g. analytics).\n        if (index !== selectedIndexRef.current) {\n          onSelectedIndexChangeRef.current(index);\n        }\n        return;\n      }\n      setInternalIndex(index);\n      onSelectedIndexChangeRef.current?.(index);\n    };\n    onSelect();\n    emblaApi.on('select', onSelect);\n    emblaApi.on('reInit', onSelect);\n    return () => {\n      emblaApi.off('select', onSelect);\n      emblaApi.off('reInit', onSelect);\n    };\n  }, [emblaApi]);\n\n  React.useEffect(() => {\n    if (selectedIndexProp === undefined || !emblaApi) return;\n    if (emblaApi.selectedScrollSnap() !== selectedIndex) {\n      // `jump: true` — a controlled `selectedIndex` change snaps instantly\n      // rather than animating. Without it, the initial sync on mount races\n      // the smooth-scroll animation, so an immediate screenshot (e.g. VR)\n      // can catch a mid-scroll frame instead of the settled slide.\n      emblaApi.scrollTo(selectedIndex, true);\n    }\n  }, [emblaApi, selectedIndexProp, selectedIndex]);\n\n  // Skip the first time this effect sees a non-null `emblaApi` — Embla was\n  // already constructed with that render's `dir` (see `useEmblaCarousel`\n  // above), so re-running `reInit` immediately is redundant. Worse, Embla's\n  // `reInit` synchronously re-emits `'reInit'` even when nothing changed,\n  // which would re-invoke the `onSelect` listener registered by the mount\n  // effect above and double-fire `onSelectedIndexChange` on mount. Only a\n  // genuine post-mount `dir` change (e.g. `useDocDir`'s SSR-safe resync, or\n  // the document's `dir` actually flipping at runtime) should call `reInit`.\n  const skipNextReInitRef = React.useRef(true);\n  React.useEffect(() => {\n    if (!emblaApi) return;\n    if (skipNextReInitRef.current) {\n      skipNextReInitRef.current = false;\n      return;\n    }\n    emblaApi.reInit({ direction: dir });\n  }, [emblaApi, dir]);\n\n  // Controlled mode never drives Embla directly from Back/Next/dot clicks —\n  // only the resync effect above (keyed to `selectedIndexProp`) does. This\n  // keeps Embla's physical position from drifting away from the prop when a\n  // consumer passes `selectedIndex` without wiring `onSelectedIndexChange`.\n  const handleSelectIndex = React.useCallback(\n    (index: number) => {\n      if (isControlled) {\n        onSelectedIndexChange?.(index);\n      } else {\n        emblaApi?.scrollTo(index);\n      }\n    },\n    [isControlled, emblaApi, onSelectedIndexChange]\n  );\n  const handleBack = React.useCallback(() => {\n    if (isControlled) {\n      onSelectedIndexChange?.(Math.max(selectedIndex - 1, 0));\n    } else {\n      emblaApi?.scrollPrev();\n    }\n  }, [isControlled, emblaApi, onSelectedIndexChange, selectedIndex]);\n  const handleNext = React.useCallback(() => {\n    if (isControlled) {\n      onSelectedIndexChange?.(Math.min(selectedIndex + 1, slideCount - 1));\n    } else {\n      emblaApi?.scrollNext();\n    }\n  }, [isControlled, emblaApi, onSelectedIndexChange, selectedIndex, slideCount]);\n\n  // Check `slideCount - 1` first: for a single-slide carousel, index 0 is\n  // both the first AND last slide, and 'end' (unlocking the primary action)\n  // must win.\n  const footerVariant: DialogFooterCarouselVariant =\n    selectedIndex === slideCount - 1\n      ? 'end'\n      : selectedIndex === 0\n        ? 'start'\n        : 'middle';\n\n  return {\n    emblaRef,\n    selectedIndex,\n    handleSelectIndex,\n    handleBack,\n    handleNext,\n    footerVariant,\n  };\n}\n\ninterface ContainerCarouselProps {\n  slides: DialogWelcomeSlide[];\n  selectedIndex: number;\n  emblaRef: ReturnType<typeof useEmblaCarousel>[0];\n  footerVariant: DialogFooterCarouselVariant;\n  onSelectIndex: (index: number) => void;\n  onBack: () => void;\n  onNext: () => void;\n  onPrimaryAction?: () => void;\n  backLabel?: string;\n  nextLabel?: string;\n  primaryLabel?: string;\n  goToSlideLabel?: (index: number, count: number) => string;\n}\n\nfunction ContainerCarousel({\n  slides,\n  selectedIndex,\n  emblaRef,\n  footerVariant,\n  onSelectIndex,\n  onBack,\n  onNext,\n  onPrimaryAction,\n  backLabel,\n  nextLabel,\n  primaryLabel,\n  goToSlideLabel,\n}: ContainerCarouselProps) {\n  return (\n    <>\n      <div ref={emblaRef} className=\"w-full overflow-hidden\">\n        <div className=\"flex\">\n          {slides.map((slide, index) => (\n            <div\n              key={index}\n              className=\"min-w-0 shrink-0 grow-0 basis-full\"\n              aria-hidden={index !== selectedIndex || undefined}\n              inert={index !== selectedIndex}\n            >\n              <DialogWelcomeSlideBody\n                image={slide.image}\n                title={slide.title}\n                description={slide.description}\n                active={index === selectedIndex}\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n      <DialogFooterCarousel\n        variant={footerVariant}\n        slideCount={slides.length}\n        selectedIndex={selectedIndex}\n        onSelectIndex={onSelectIndex}\n        onBack={onBack}\n        onNext={onNext}\n        onPrimaryAction={onPrimaryAction}\n        backLabel={backLabel}\n        nextLabel={nextLabel}\n        primaryLabel={primaryLabel}\n        goToSlideLabel={goToSlideLabel}\n      />\n    </>\n  );\n}\n\ninterface ContainerNoSlidesProps {\n  image?: React.ReactNode;\n  title: string;\n  description: string;\n  primaryLabel?: string;\n  onPrimaryAction?: () => void;\n  closeLabel: string;\n  onCloseAction?: () => void;\n}\n\nfunction ContainerNoSlides({\n  image,\n  title,\n  description,\n  primaryLabel,\n  onPrimaryAction,\n  closeLabel,\n  onCloseAction,\n}: ContainerNoSlidesProps) {\n  return (\n    <div className=\"flex w-full flex-col items-center gap-3 pb-4\">\n      <DialogWelcomeSlideBody\n        image={image}\n        title={title}\n        description={description}\n        active\n        withBottomPadding={false}\n      />\n      <div className=\"flex w-full flex-col items-center gap-2 px-4\">\n        <Button onClick={onPrimaryAction}>\n          {primaryLabel ?? 'Call to action'}\n        </Button>\n        <DialogClose\n          onClick={onCloseAction}\n          render={<Button variant=\"ghost\">{closeLabel}</Button>}\n        />\n      </div>\n    </div>\n  );\n}\n\ntype DialogRootProps = React.ComponentPropsWithoutRef<typeof DialogRoot>;\n\nexport interface DialogWelcomeProps extends Omit<DialogRootProps, 'children'> {\n  /** Selects the Figma-defined layout. Defaults to `'carousel'`. */\n  variant?: DialogWelcomeVariant;\n  /** Slides shown one at a time (`variant=\"carousel\"`). Defaults to a 3-slide placeholder. */\n  slides?: DialogWelcomeSlide[];\n  /** Controls the active slide (`variant=\"carousel\"`). Uncontrolled when omitted. */\n  selectedIndex?: number;\n  /** Fires whenever the active slide changes (`variant=\"carousel\"`). */\n  onSelectedIndexChange?: (index: number) => void;\n  /** `Back` button label (`variant=\"carousel\"`). Defaults to `'Back'`. */\n  backLabel?: string;\n  /** `Next` button label (`variant=\"carousel\"`). Defaults to `'Next'`. */\n  nextLabel?: string;\n  /** Builds each carousel dot's accessible name (`variant=\"carousel\"`). */\n  goToSlideLabel?: (index: number, count: number) => string;\n  /** Illustration/media (`variant=\"single\"`). */\n  image?: React.ReactNode;\n  /** Title (`variant=\"single\"`). Defaults to `'Title'`. */\n  title?: string;\n  /** Description (`variant=\"single\"`). Defaults to `'Feature description.'`. */\n  description?: string;\n  /** `Close` link label (`variant=\"single\"`). Defaults to `'Close'`. */\n  closeLabel?: string;\n  /** Fires when `Close` (`variant=\"single\"`) is activated, before the dialog closes. */\n  onCloseAction?: () => void;\n  /**\n   * Call-to-action button label — the last carousel slide's button\n   * (`variant=\"carousel\"`) or the single body's primary button\n   * (`variant=\"single\"`). Defaults to `'Call to action'`.\n   */\n  primaryLabel?: string;\n  /** Fires when the call-to-action button is activated. */\n  onPrimaryAction?: () => void;\n  /** Render inside a portal (forwarded to `DialogContent`). Defaults to `true`. */\n  portal?: boolean;\n  /** Portal container (forwarded to `DialogContent`). */\n  portalContainer?: DialogContentProps['portalContainer'];\n  /** Keep the content mounted while closed (forwarded to `DialogContent`). */\n  keepMounted?: DialogContentProps['keepMounted'];\n  /** Extra classes merged onto the popup container. */\n  className?: string;\n}\n\nconst DialogWelcome = React.forwardRef<HTMLDivElement, DialogWelcomeProps>(\n  (\n    {\n      variant = 'carousel',\n      slides = DEFAULT_SLIDES,\n      selectedIndex: selectedIndexProp,\n      onSelectedIndexChange,\n      backLabel,\n      nextLabel,\n      goToSlideLabel,\n      image,\n      title = 'Title',\n      description = 'Feature description.',\n      closeLabel = 'Close',\n      onCloseAction,\n      primaryLabel,\n      onPrimaryAction,\n      portal,\n      portalContainer,\n      keepMounted,\n      className,\n      ...rootProps\n    },\n    ref\n  ) => {\n    const isCarousel = variant === 'carousel';\n    // An explicit `slides={[]}` would otherwise mount no Title/Description\n    // and suppress the footer, leaving the dialog with no accessible name —\n    // fall back to the default placeholder slides instead.\n    const resolvedSlides = slides.length > 0 ? slides : DEFAULT_SLIDES;\n    const slideCount = resolvedSlides.length;\n\n    const {\n      emblaRef,\n      selectedIndex,\n      handleSelectIndex,\n      handleBack,\n      handleNext,\n      footerVariant,\n    } = useDialogWelcomeCarousel({\n      slideCount,\n      selectedIndexProp,\n      onSelectedIndexChange,\n    });\n\n    return (\n      <DialogRoot {...rootProps}>\n        <DialogContent\n          ref={ref}\n          size=\"sm\"\n          portal={portal}\n          portalContainer={portalContainer}\n          keepMounted={keepMounted}\n          className={className}\n        >\n          {isCarousel ? (\n            <ContainerCarousel\n              slides={resolvedSlides}\n              selectedIndex={selectedIndex}\n              emblaRef={emblaRef}\n              footerVariant={footerVariant}\n              onSelectIndex={handleSelectIndex}\n              onBack={handleBack}\n              onNext={handleNext}\n              onPrimaryAction={onPrimaryAction}\n              backLabel={backLabel}\n              nextLabel={nextLabel}\n              primaryLabel={primaryLabel}\n              goToSlideLabel={goToSlideLabel}\n            />\n          ) : (\n            <ContainerNoSlides\n              image={image}\n              title={title}\n              description={description}\n              primaryLabel={primaryLabel}\n              onPrimaryAction={onPrimaryAction}\n              closeLabel={closeLabel}\n              onCloseAction={onCloseAction}\n            />\n          )}\n        </DialogContent>\n      </DialogRoot>\n    );\n  }\n);\nDialogWelcome.displayName = 'DialogWelcome';\n\nexport { DialogWelcome };\n"],"names":["DialogWelcomeSlideBody","image","title","description","active","withBottomPadding","jsxs","cn","jsx","DialogTitle","DialogDescription","DEFAULT_SLIDES","useDialogWelcomeCarousel","slideCount","selectedIndexProp","onSelectedIndexChange","dir","useDocDir","isControlled","initialIndex","emblaRef","emblaApi","useEmblaCarousel","internalIndex","setInternalIndex","React","selectedIndex","onSelectedIndexChangeRef","isControlledRef","selectedIndexRef","onSelect","index","_a","skipNextReInitRef","handleSelectIndex","handleBack","handleNext","footerVariant","ContainerCarousel","slides","onSelectIndex","onBack","onNext","onPrimaryAction","backLabel","nextLabel","primaryLabel","goToSlideLabel","Fragment","slide","DialogFooterCarousel","ContainerNoSlides","closeLabel","onCloseAction","Button","DialogClose","DialogWelcome","variant","portal","portalContainer","keepMounted","className","rootProps","ref","isCarousel","resolvedSlides","DialogRoot","DialogContent"],"mappings":"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"}

package/dist/components/ui/funnel-chart/funnel-chart.js

@@ -1,10 +1,11 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import * as g from "react";
-import { cva as v } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { FunnelChart as F, Funnel as N, Cell as b, LabelList as x } from "recharts";
-import { cn as L } from "../../../lib/utils.js";
-import { ChartContainer as T, ChartTooltip as $, ChartTooltipContent as j } from "../chart/chart.js";
-const A = v("", {
+import { jsx as c, jsxs as B } from "react/jsx-runtime";
+import * as A from "react";
+import { cva as ur } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { FunnelChart as fr, Funnel as dr, Cell as mr, LabelList as V } from "recharts";
+import { cn as vr } from "../../../lib/utils.js";
+import { resolveAnimation as hr, resolveLabelFillClass as O } from "../chart/chart-format.js";
+import { ChartContainer as pr, ChartTooltip as br, ChartTooltipContent as Lr, ChartLegend as Cr, ChartLegendContent as Ar } from "../chart/chart.js";
+const Nr = ur("", {
   variants: {
     lastShape: {
       triangle: "",
@@ -14,60 +15,248 @@ const A = v("", {
   defaultVariants: {
     lastShape: "triangle"
   }
-}), R = g.forwardRef(
+}), R = {
+  right: "right",
+  left: "left",
+  inside: "center"
+};
+function _r(r) {
+  switch (r) {
+    case "right":
+      return "left";
+    case "left":
+      return "right";
+    case "inside":
+      return "right";
+  }
+}
+const D = "__stageLabel", G = "__stageValueLabel", Er = 45, Tr = {
+  stroke: "var(--ui-border-on-surface-border-active)",
+  strokeWidth: 2
+}, U = 96, j = {
+  top: 8,
+  right: U,
+  bottom: 8,
+  left: 24
+}, $r = "75%";
+function Ir(r) {
+  return r.includes("-");
+}
+function gr(r) {
+  const { showLabels: e, labelPosition: t, labelFormat: o } = r;
+  return e && t === "right" && Ir(o) ? $r : void 0;
+}
+function Fr(r) {
+  const { showLabels: e, labelPosition: t, showValueLabels: o, valuePosition: n } = r;
+  return {
+    ...j,
+    left: (e ? t : void 0) === "left" || (o ? n : void 0) === "left" ? U : j.left
+  };
+}
+const xr = (r) => {
+  const e = typeof r == "number" ? r : Number(r);
+  return Number.isFinite(e) ? `${(e * 100).toFixed(1)}%` : String(r);
+};
+function H(r) {
+  const {
+    name: e,
+    value: t,
+    base: o,
+    format: n,
+    formatter: d,
+    percentFormatter: b = xr
+  } = r, u = d ? d(t) : String(t), v = typeof t == "number" ? t : Number(t), a = o > 0 && Number.isFinite(v) ? b(v / o) : "";
+  switch (n) {
+    case "name":
+      return e;
+    case "value":
+      return u;
+    case "percent":
+      return a;
+    case "name-value":
+      return `${e}: ${u}`;
+    case "name-percent":
+      return a ? `${e}: ${a}` : e;
+    case "value-percent":
+      return a ? `${u} (${a})` : u;
+  }
+}
+function Mr(r, e, t) {
+  if (t <= 1) return r;
+  const o = 100 - (100 - Er) * e / (t - 1);
+  return `color-mix(in oklab, ${r} ${o.toFixed(1)}%, var(--ui-background-surface-primary))`;
+}
+const Pr = A.forwardRef(
   ({
-    className: n,
-    config: o,
-    data: s,
-    dataKey: c,
-    nameKey: a,
-    lastShape: e = "triangle",
-    reversed: f = !1,
-    showLabels: h = !0,
-    showTooltip: m = !0,
-    tooltipContent: p,
-    ...d
-  }, u) => {
-    const l = s.map((r) => ({
-      ...r,
-      fill: `var(--color-${r[a]})`
-    }));
-    return /* @__PURE__ */ t(
+    className: r,
+    config: e,
+    data: t,
+    dataKey: o,
+    nameKey: n,
+    lastShape: d = "triangle",
+    reversed: b = !1,
+    showLabels: u = !0,
+    labelFormat: v = "name",
+    labelPosition: a = "right",
+    showValueLabels: N = !1,
+    valuePosition: W,
+    labelFill: L,
+    labelFormatter: _,
+    percentFormatter: E,
+    showLegend: Y = !1,
+    legendPos: T = "bottom",
+    colorMode: $ = "palette",
+    gradientColor: I,
+    stageSettings: i,
+    showActiveShape: z = !1,
+    stroke: X,
+    strokeWidth: g,
+    funnelWidth: q,
+    margin: w,
+    showTooltip: y = !0,
+    tooltipContent: J,
+    animate: Q,
+    animationDuration: Z,
+    animationBegin: K,
+    animationEasing: rr,
+    ...er
+  }, tr) => {
+    const nr = hr({
+      animate: Q,
+      animationDuration: Z,
+      animationBegin: K,
+      animationEasing: rr
+    }), C = A.useMemo(() => {
+      var P;
+      const l = t.filter(
+        (f) => {
+          var p;
+          return !((p = i == null ? void 0 : i[String(f[n])]) != null && p.hidden);
+        }
+      ), s = l.length ? String(l[0][n]) : void 0, h = I ?? (s === void 0 ? void 0 : ((P = i == null ? void 0 : i[s]) == null ? void 0 : P.color) ?? `var(--color-${s})`), sr = l.reduce((f, p) => {
+        const m = Number(p[o]);
+        return Number.isFinite(m) && m > f ? m : f;
+      }, 0);
+      return l.map((f, p) => {
+        var S;
+        const m = String(f[n]), cr = ((S = i == null ? void 0 : i[m]) == null ? void 0 : S.color) ?? ($ === "gradient" && h ? Mr(h, p, l.length) : `var(--color-${m})`), k = {
+          name: m,
+          value: f[o],
+          base: sr,
+          formatter: _,
+          percentFormatter: E
+        };
+        return {
+          ...f,
+          fill: cr,
+          [D]: H({
+            ...k,
+            format: v
+          }),
+          [G]: H({
+            ...k,
+            format: "value"
+          })
+        };
+      });
+    }, [
+      $,
+      t,
+      o,
+      I,
+      v,
+      _,
+      n,
+      E,
+      i
+    ]), or = A.useMemo(() => {
+      const l = /* @__PURE__ */ new Set();
+      return C.flatMap((s) => {
+        const h = String(s[n]);
+        return l.has(h) ? [] : (l.add(h), [
+          {
+            value: h,
+            dataKey: n,
+            type: "rect",
+            color: String(s.fill),
+            payload: s
+          }
+        ]);
+      });
+    }, [n, C]), F = W ?? _r(a), x = R[a], M = R[F], ar = {
+      ...Fr({
+        showLabels: u,
+        labelPosition: a,
+        showValueLabels: N,
+        valuePosition: F
+      }),
+      ...w
+    }, ir = q ?? gr({ showLabels: u, labelPosition: a, labelFormat: v }), lr = X ?? (g != null ? "var(--ui-border-on-surface-border)" : void 0);
+    return /* @__PURE__ */ c(
       "div",
       {
-        ref: u,
-        "data-last-shape": e,
-        className: L(A({ lastShape: e }), n),
-        ...d,
-        children: /* @__PURE__ */ t(T, { config: o, className: "size-full", children: /* @__PURE__ */ i(F, { margin: { top: 8, right: 96, bottom: 8, left: 24 }, children: [
-          m && /* @__PURE__ */ t(
-            $,
+        ref: tr,
+        "data-last-shape": d,
+        className: vr(Nr({ lastShape: d }), r),
+        ...er,
+        children: /* @__PURE__ */ c(pr, { config: e, className: "size-full", children: /* @__PURE__ */ B(fr, { margin: ar, children: [
+          y && /* @__PURE__ */ c(
+            br,
+            {
+              content: J ?? /* @__PURE__ */ c(Lr, { nameKey: n, hideLabel: !0 })
+            }
+          ),
+          Y && /* @__PURE__ */ c(
+            Cr,
             {
-              content: p ?? /* @__PURE__ */ t(j, { nameKey: a, hideLabel: !0 })
+              verticalAlign: T,
+              content: () => /* @__PURE__ */ c(
+                Ar,
+                {
+                  payload: or,
+                  verticalAlign: T,
+                  nameKey: n
+                }
+              )
             }
           ),
-          /* @__PURE__ */ i(
-            N,
+          /* @__PURE__ */ B(
+            dr,
             {
-              dataKey: c,
-              nameKey: a,
-              data: l,
-              lastShapeType: e ?? "triangle",
-              reversed: f,
-              isAnimationActive: !1,
+              dataKey: o,
+              nameKey: n,
+              data: C,
+              lastShapeType: d ?? "triangle",
+              reversed: b,
+              width: ir,
+              stroke: lr,
+              strokeWidth: g,
+              activeShape: z ? Tr : void 0,
+              ...nr,
               children: [
-                l.map((r, C) => (
+                C.map((l, s) => (
                   // Keyed by index, not the name: two stages could share a nameKey
                   // value, which would collide as a React key. Same-named stages
                   // intentionally share a color/config entry via `--color-<name>`.
-                  /* @__PURE__ */ t(b, { fill: `var(--color-${r[a]})` }, C)
+                  /* @__PURE__ */ c(mr, { fill: String(l.fill) }, s)
                 )),
-                h && /* @__PURE__ */ t(
-                  x,
+                u && /* @__PURE__ */ c(
+                  V,
+                  {
+                    position: x,
+                    dataKey: D,
+                    className: L ? void 0 : O(x),
+                    fill: L,
+                    stroke: "none"
+                  }
+                ),
+                N && /* @__PURE__ */ c(
+                  V,
                   {
-                    position: "right",
-                    dataKey: a,
-                    className: "fill-foreground",
+                    position: M,
+                    dataKey: G,
+                    className: L ? void 0 : O(M),
+                    fill: L,
                     stroke: "none"
                   }
                 )
@@ -79,9 +268,14 @@ const A = v("", {
     );
   }
 );
-R.displayName = "FunnelChart";
+Pr.displayName = "FunnelChart";
 export {
-  R as FunnelChart,
-  A as funnelChartVariants
+  Pr as FunnelChart,
+  Fr as funnelChartLabelMargin,
+  gr as funnelChartLabelReserve,
+  H as funnelChartLabelText,
+  _r as funnelChartOppositeSide,
+  xr as funnelChartPercent,
+  Nr as funnelChartVariants
 };
 //# sourceMappingURL=funnel-chart.js.map