@ztwoint/z-ui 0.1.146 → 0.1.148

package/dist/components/pdf-preview/components/pdf-error-state.d.ts

@@ -0,0 +1,9 @@
+import { PdfPreviewError } from '../pdf-preview.type';
+import * as React from 'react';
+interface PdfErrorStateProps {
+    error: PdfPreviewError;
+    onRetry: () => void;
+}
+/** Default error UI shown when PDF loading fails. Displays warning icon, error message, and a retry button. */
+export declare const PdfErrorState: React.FC<PdfErrorStateProps>;
+export {};

package/dist/components/pdf-preview/components/pdf-error-state.js

@@ -0,0 +1,18 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Button as l } from "../../button/button.js";
+import s from "../../assets/icons/triangle-warning.js";
+const n = ({ error: t, onRetry: r }) => /* @__PURE__ */ a(
+  "div",
+  {
+    "data-slot": "pdf-error-state",
+    className: "flex flex-1 flex-col items-center justify-center gap-3 p-6 text-center",
+    children: [
+      /* @__PURE__ */ e(s, { width: "2em", height: "2em", className: "text-text-danger-primary" }),
+      /* @__PURE__ */ e("p", { className: "text-sm text-text-neutral-primary", children: t.message || "Failed to load PDF" }),
+      /* @__PURE__ */ e(l, { onClick: r, variant: "stroke", shade: "neutral", size: "small", label: "Retry" })
+    ]
+  }
+);
+export {
+  n as PdfErrorState
+};

package/dist/components/pdf-preview/components/pdf-loading-state.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+/** Default loading spinner shown while the PDF source is being resolved/fetched. */
+export declare const PdfLoadingState: React.FC;

package/dist/components/pdf-preview/components/pdf-loading-state.js

@@ -0,0 +1,34 @@
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+const a = () => /* @__PURE__ */ t("div", { "data-slot": "pdf-loading-state", className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ e(
+  "svg",
+  {
+    className: "h-8 w-8 animate-spin text-text-neutral-secondary",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: [
+      /* @__PURE__ */ t(
+        "circle",
+        {
+          className: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          className: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+        }
+      )
+    ]
+  }
+) });
+export {
+  a as PdfLoadingState
+};

package/dist/components/pdf-preview/components/pdf-toolbar.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface PdfToolbarProps {
+    title: string;
+    showDownload: boolean;
+    onDownload: () => void;
+    downloadDisabled?: boolean;
+}
+/**
+ * Toolbar displayed at the top of the PDF preview dialog.
+ * Contains:
+ * - DialogPrimitive.Title: serves as both the visible title and Radix's required accessible title
+ * - Download button (optional): triggers the parent's download handler
+ * - Close button: uses DialogPrimitive.Close to close the dialog via Radix
+ */
+export declare const PdfToolbar: React.FC<PdfToolbarProps>;
+export {};

package/dist/components/pdf-preview/components/pdf-toolbar.js

@@ -0,0 +1,47 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Download as i } from "lucide-react";
+import { Button as t } from "../../button/button.js";
+import { Z2DialogTitle as m, Z2DialogClose as n } from "../../dialog/dialog.js";
+import d from "../../assets/icons/x.js";
+const b = ({
+  title: r,
+  showDownload: l,
+  onDownload: o,
+  downloadDisabled: s
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    "data-slot": "pdf-toolbar",
+    className: "flex items-center justify-between border-b border-stroke-neutral-default px-4 py-2.5 gap-2",
+    children: [
+      /* @__PURE__ */ e(m, { className: "text-sm font-medium text-text-neutral-primary truncate", children: r }),
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5 shrink-0 ml-2", children: [
+        l && /* @__PURE__ */ e(
+          t,
+          {
+            onClick: o,
+            variant: "ghost",
+            shade: "neutral",
+            size: "small",
+            leftIcon: /* @__PURE__ */ e(i, { className: "w-3.5 h-3.5" }),
+            "aria-label": "Download PDF",
+            disabled: s
+          }
+        ),
+        /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ e(
+          t,
+          {
+            variant: "ghost",
+            shade: "neutral",
+            size: "small",
+            leftIcon: /* @__PURE__ */ e(d, {}),
+            "aria-label": "Close"
+          }
+        ) })
+      ] })
+    ]
+  }
+);
+export {
+  b as PdfToolbar
+};

package/dist/components/pdf-preview/components/pdf-viewer.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+interface PdfViewerProps {
+    url: string;
+    title: string;
+    className?: string;
+}
+/**
+ * Browser-native PDF renderer with a two-level fallback:
+ *
+ * 1. <object type="application/pdf"> — uses the browser's built-in PDF plugin
+ *    (Chrome, Firefox, Edge all have mature viewers with zoom, search, print)
+ *
+ * 2. <iframe> — fallback rendered as <object>'s child if the plugin is unavailable
+ *
+ * Note: <iframe> does not support child fallback content (unlike <object>), so a
+ * download link inside <iframe> would be unreachable. If the browser can't render
+ * the PDF at all, the iframe will show a blank page or its own error.
+ *
+ * This approach adds zero JS bundle size since it relies entirely on browser capabilities.
+ */
+export declare const PdfViewer: React.FC<PdfViewerProps>;
+export {};

package/dist/components/pdf-preview/components/pdf-viewer.js

@@ -0,0 +1,6 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as f } from "../../../lib/utils.js";
+const o = ({ url: e, title: l, className: r }) => /* @__PURE__ */ a("div", { "data-slot": "pdf-viewer", className: f("flex-1 min-h-0", r), children: /* @__PURE__ */ a("object", { data: e, type: "application/pdf", className: "h-full w-full", "aria-label": l, children: /* @__PURE__ */ a("iframe", { src: e, title: l, className: "h-full w-full border-0" }) }) });
+export {
+  o as PdfViewer
+};

package/dist/components/pdf-preview/index.d.ts

@@ -0,0 +1,3 @@
+export { PdfPreview } from './pdf-preview';
+export type { PdfPreviewProps, PdfPreviewError, PdfPreviewStatus } from './pdf-preview.type';
+export type { PdfPreviewSize } from './pdf-preview.const';

package/dist/components/pdf-preview/pdf-preview.const.d.ts

@@ -0,0 +1,29 @@
+/** Available dialog size options for the PDF preview modal. */
+export declare const PDF_PREVIEW_SIZES: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly FULL: "full";
+};
+export type PdfPreviewSize = (typeof PDF_PREVIEW_SIZES)[keyof typeof PDF_PREVIEW_SIZES];
+/** Default prop values used when the consumer doesn't provide them. */
+export declare const PDF_PREVIEW_DEFAULTS: {
+    readonly size: PdfPreviewSize;
+    readonly showToolbar: true;
+    readonly showDownload: true;
+};
+/**
+ * CVA variants for the dialog content container.
+ * Each size sets a max width/height using min() to stay responsive,
+ * with a 2rem margin from viewport edges. 'full' takes up nearly the entire screen.
+ *
+ * Note: Z2DialogContent's base styles include `grid gap-4 max-w-[calc(100%-2rem)] sm:max-w-lg`
+ * which conflict with our layout. We override them here with:
+ * - `flex flex-col` → overrides `grid` (tailwind-merge handles display conflicts)
+ * - `max-w-none sm:max-w-none` → cancels the max-width caps so our w-[min(...)] sizing works
+ * - `gap-0` → removes the default gap between children
+ */
+export declare const pdfDialogContentVariants: (props?: ({
+    size?: "sm" | "md" | "full" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;

package/dist/components/pdf-preview/pdf-preview.const.js

@@ -0,0 +1,29 @@
+import { cva as c } from "class-variance-authority";
+const e = {
+  LG: "lg"
+}, m = {
+  size: e.LG,
+  showToolbar: !0,
+  showDownload: !0
+}, a = c(
+  "flex flex-col max-w-none sm:max-w-none gap-0 overflow-hidden rounded-lg",
+  {
+    variants: {
+      size: {
+        sm: "w-[min(500px,calc(100vw-2rem))] h-[min(400px,calc(100vh-2rem))]",
+        md: "w-[min(680px,calc(100vw-2rem))] h-[min(560px,calc(100vh-2rem))]",
+        lg: "w-[min(900px,calc(100vw-2rem))] h-[min(700px,calc(100vh-2rem))]",
+        xl: "w-[min(1100px,calc(100vw-2rem))] h-[min(800px,calc(100vh-2rem))]",
+        full: "w-[calc(100vw-2rem)] h-[calc(100vh-2rem)]"
+      }
+    },
+    defaultVariants: {
+      size: "lg"
+    }
+  }
+);
+export {
+  m as PDF_PREVIEW_DEFAULTS,
+  e as PDF_PREVIEW_SIZES,
+  a as pdfDialogContentVariants
+};

package/dist/components/pdf-preview/pdf-preview.d.ts

@@ -0,0 +1,16 @@
+import { PdfPreviewProps } from './pdf-preview.type';
+import * as React from 'react';
+/**
+ * PdfPreview — A zero-dependency PDF preview dialog component.
+ *
+ * Uses the browser's built-in PDF renderer (<object> + <iframe> fallback)
+ * instead of pdf.js, resulting in zero additional bundle size.
+ *
+ * Supports:
+ * - Multiple source types: URL string, Blob, File, or async fetch function
+ * - Controlled & uncontrolled open state
+ * - Customizable loading/error states
+ * - `renderPdf` escape hatch for plugging in custom renderers (e.g. react-pdf)
+ */
+declare const PdfPreview: React.FC<PdfPreviewProps>;
+export { PdfPreview };

package/dist/components/pdf-preview/pdf-preview.hook.d.ts

@@ -0,0 +1,12 @@
+import { UsePdfPreviewProps, UsePdfPreviewReturn } from './pdf-preview.type';
+/**
+ * Core hook that manages the entire PDF preview lifecycle:
+ * - Controlled/uncontrolled open state (like popconfirm.hook.ts pattern)
+ * - Lazy source resolution — async fetch only runs when dialog opens
+ * - Blob URL memory management — created on open, revoked on close/unmount
+ * - Status state machine: idle → loading → ready | error
+ * - Abort tracking to prevent stale state updates if dialog closes mid-fetch
+ */
+export declare function usePdfPreview(props: UsePdfPreviewProps): UsePdfPreviewReturn & {
+    resolvedTitle: string;
+};

package/dist/components/pdf-preview/pdf-preview.hook.js

@@ -0,0 +1,69 @@
+import { useRef as c, useState as h, useCallback as R, useEffect as x } from "react";
+function A(t) {
+  if (typeof t == "string")
+    try {
+      const n = new URL(t, "http://localhost").pathname.split("/").pop();
+      if (n && n.endsWith(".pdf")) return decodeURIComponent(n);
+    } catch {
+    }
+  return t instanceof File ? t.name : "PDF Preview";
+}
+function W(t) {
+  const { src: u, open: n, onOpenChange: a, onError: L, onLoad: P } = t, i = c(u);
+  i.current = u;
+  const f = c(P);
+  f.current = P;
+  const d = c(L);
+  d.current = L;
+  const [k, w] = h(!1), [O, p] = h("idle"), [S, b] = h(null), [j, g] = h(null), v = c(null), m = c(null), y = n !== void 0, C = y ? n : k, o = R(() => {
+    v.current && (URL.revokeObjectURL(v.current), v.current = null);
+  }, []), U = R(async () => {
+    var l, E, F;
+    (l = m.current) == null || l.abort();
+    const e = new AbortController();
+    m.current = e, p("loading"), g(null), b(null), o();
+    try {
+      let r;
+      if (typeof i.current == "function" ? r = await i.current(e.signal) : r = i.current, e.signal.aborted) return;
+      if (typeof r == "string")
+        b(r);
+      else {
+        const s = URL.createObjectURL(r);
+        v.current = s, b(s);
+      }
+      p("ready"), (E = f.current) == null || E.call(f);
+    } catch (r) {
+      if (e.signal.aborted) return;
+      const s = {
+        message: r instanceof Error ? r.message : "Failed to load PDF",
+        cause: r
+      };
+      g(s), p("error"), (F = d.current) == null || F.call(d, s);
+    }
+  }, [o]), D = R(
+    (e) => {
+      var l;
+      y || w(e), a == null || a(e), e || ((l = m.current) == null || l.abort(), p("idle"), b(null), g(null), o());
+    },
+    [y, a, o]
+  );
+  x(() => (C && U(), () => {
+    var e;
+    (e = m.current) == null || e.abort(), o();
+  }), [C, U, o]);
+  const I = R(() => {
+    U();
+  }, [U]), T = A(u);
+  return {
+    open: C,
+    handleOpenChange: D,
+    status: O,
+    resolvedUrl: S,
+    error: j,
+    retry: I,
+    resolvedTitle: T
+  };
+}
+export {
+  W as usePdfPreview
+};

package/dist/components/pdf-preview/pdf-preview.js

@@ -0,0 +1,77 @@
+import { jsxs as P, jsx as o } from "react/jsx-runtime";
+import * as v from "react";
+import { cn as j } from "../../lib/utils.js";
+import { Z2Dialog as L, Z2DialogTrigger as O, Z2DialogContent as U, Z2DialogTitle as W } from "../dialog/dialog.js";
+import { PDF_PREVIEW_DEFAULTS as m, pdfDialogContentVariants as z } from "./pdf-preview.const.js";
+import { usePdfPreview as A } from "./pdf-preview.hook.js";
+import { PdfToolbar as F } from "./components/pdf-toolbar.js";
+import { PdfViewer as I } from "./components/pdf-viewer.js";
+import { PdfLoadingState as $ } from "./components/pdf-loading-state.js";
+import { PdfErrorState as q } from "./components/pdf-error-state.js";
+const B = ({
+  src: y,
+  title: w,
+  size: D = m.size,
+  open: C,
+  onOpenChange: E,
+  disabled: t = !1,
+  showToolbar: c = m.showToolbar,
+  showDownload: T = m.showDownload,
+  downloadFilename: u,
+  onDownload: l,
+  loadingContent: b,
+  errorContent: n,
+  renderPdf: g,
+  className: N,
+  viewerClassName: Z,
+  onError: k,
+  onLoad: x,
+  children: h
+}) => {
+  const { open: f, handleOpenChange: d, status: a, resolvedUrl: e, error: s, retry: R, resolvedTitle: S } = A({
+    src: y,
+    open: C,
+    onOpenChange: E,
+    onError: k,
+    onLoad: x
+  }), i = w || S, V = v.useCallback(() => {
+    if (!e)
+      return;
+    l && l();
+    const r = document.createElement("a");
+    r.href = e;
+    const p = u || i || "document.pdf";
+    r.download = p.endsWith(".pdf") ? p : `${p}.pdf`, r.target = "_blank", r.rel = "noopener noreferrer", document.body.appendChild(r), r.click(), document.body.removeChild(r);
+  }, [l, e, u, i]), _ = () => a === "idle" || a === "loading" ? b || /* @__PURE__ */ o($, {}) : a === "error" && s ? n ? typeof n == "function" ? n(s) : n : /* @__PURE__ */ o(q, { error: s, onRetry: R }) : a === "ready" && e ? g ? g(e) : /* @__PURE__ */ o(I, { url: e, title: i, className: Z }) : null;
+  return v.useEffect(() => {
+    t && f && d(!1);
+  }, [t, f, d]), // Z2Dialog wraps Radix Dialog — manages focus trapping, escape key, and overlay click-to-close
+  /* @__PURE__ */ P(L, { open: t ? !1 : f, onOpenChange: t ? void 0 : d, children: [
+    h && /* @__PURE__ */ o(O, { asChild: !0, disabled: t, "data-slot": "pdf-preview-trigger", children: h }),
+    /* @__PURE__ */ P(
+      U,
+      {
+        "data-slot": "pdf-preview-content",
+        className: j(z({ size: D }), N),
+        "aria-describedby": void 0,
+        children: [
+          c && /* @__PURE__ */ o(
+            F,
+            {
+              title: i,
+              showDownload: T,
+              onDownload: V,
+              downloadDisabled: !e
+            }
+          ),
+          !c && /* @__PURE__ */ o(W, { className: "sr-only", children: i }),
+          _()
+        ]
+      }
+    )
+  ] });
+};
+B.displayName = "PdfPreview";
+export {
+  B as PdfPreview
+};

package/dist/components/pdf-preview/pdf-preview.type.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+import { PdfPreviewSize } from './pdf-preview.const';
+/**
+ * Represents an error that occurred while loading or processing a PDF.
+ * Used by error callbacks and the error state UI.
+ */
+export interface PdfPreviewError {
+    message: string;
+    cause?: unknown;
+}
+/**
+ * State machine for the PDF loading lifecycle:
+ * idle → loading → ready | error
+ * Resets back to 'idle' when the dialog closes.
+ */
+export type PdfPreviewStatus = 'idle' | 'loading' | 'ready' | 'error';
+/**
+ * Props for the PdfPreview component.
+ *
+ * Supports both controlled (open/onOpenChange) and uncontrolled usage.
+ * The `src` prop accepts multiple source types to handle different use cases:
+ * - Static URL string (e.g. "/files/report.pdf")
+ * - Blob or File object (e.g. from a file input)
+ * - Async function that returns any of the above (e.g. server-side fetch)
+ */
+export interface PdfPreviewProps {
+    /** PDF source — URL string, Blob, File, or async function returning any of those.
+     *  Async functions receive an AbortSignal so the fetch can be cancelled when the dialog closes. */
+    src: string | Blob | File | ((signal: AbortSignal) => Promise<string | Blob | File>);
+    /** Dialog title. Auto-detected from filename if not provided */
+    title?: string;
+    /** Dialog size variant */
+    size?: PdfPreviewSize;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Disable the trigger */
+    disabled?: boolean;
+    /** Show the toolbar (default: true) */
+    showToolbar?: boolean;
+    /** Show the download button in the toolbar (default: true) */
+    showDownload?: boolean;
+    /** Filename used when downloading */
+    downloadFilename?: string;
+    /** Custom download handler */
+    onDownload?: () => void;
+    /** Custom loading content */
+    loadingContent?: ReactNode;
+    /** Custom error content or render function */
+    errorContent?: ReactNode | ((error: PdfPreviewError) => ReactNode);
+    /** Escape hatch: render your own PDF viewer given the resolved URL */
+    renderPdf?: (resolvedUrl: string) => ReactNode;
+    /** Additional class name for the dialog content */
+    className?: string;
+    /** Additional class name for the PDF viewer area */
+    viewerClassName?: string;
+    /** Called when an error occurs */
+    onError?: (error: PdfPreviewError) => void;
+    /** Called when the PDF loads successfully */
+    onLoad?: () => void;
+    /** Click trigger element (rendered via Radix asChild) */
+    children?: ReactNode;
+}
+/** Props passed to the usePdfPreview hook for managing dialog state and PDF source resolution. */
+export interface UsePdfPreviewProps {
+    src: PdfPreviewProps['src'];
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onError?: (error: PdfPreviewError) => void;
+    onLoad?: () => void;
+}
+/** Return value of usePdfPreview — provides state and handlers to the main component. */
+export interface UsePdfPreviewReturn {
+    open: boolean;
+    handleOpenChange: (open: boolean) => void;
+    status: PdfPreviewStatus;
+    resolvedUrl: string | null;
+    error: PdfPreviewError | null;
+    retry: () => void;
+}