@devalok/shilp-sutra 0.30.0 → 0.32.0

package/dist/_chunks/badge-group.js

@@ -1,15 +1,45 @@
 "use client";
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
-import * as S from "react";
-import { cn as b } from "../ui/lib/utils.js";
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import * as R from "react";
+import { cn as a } from "../ui/lib/utils.js";
 import { IconCheck as D, IconX as E } from "@tabler/icons-react";
 import { a as I } from "./vendor-utils.js";
 import { springs as O } from "../ui/lib/motion.js";
 import { S as T } from "./primitives.js";
-import { Icon as C } from "../ui/icon.js";
+import { Icon as N } from "../ui/icon.js";
 import { BadgeIndicator as q } from "../ui/badge-indicator.js";
-import { A as M, m as w } from "./framer.js";
-const X = I(
+import { u as X, A as _, m as F } from "./framer.js";
+const $ = {
+  default: { bg: "bg-surface-raised-hover", fg: "text-surface-fg-muted", border: "border-surface-border-strong", solid: "bg-neutral-5", solidFg: "text-surface-fg" },
+  accent: { bg: "bg-accent-3", fg: "text-accent-11", border: "border-accent-7", solid: "bg-accent-9", solidFg: "text-accent-fg" },
+  error: { bg: "bg-error-3", fg: "text-error-11", border: "border-error-7", solid: "bg-error-9", solidFg: "text-error-fg" },
+  success: { bg: "bg-success-3", fg: "text-success-11", border: "border-success-7", solid: "bg-success-9", solidFg: "text-success-fg" },
+  warning: { bg: "bg-warning-3", fg: "text-warning-11", border: "border-warning-7", solid: "bg-warning-9", solidFg: "text-warning-fg" },
+  info: { bg: "bg-info-3", fg: "text-info-11", border: "border-info-7", solid: "bg-info-9", solidFg: "text-info-fg" },
+  neutral: { bg: "bg-surface-raised-hover", fg: "text-surface-fg-muted", border: "border-surface-border-strong", solid: "bg-neutral-5", solidFg: "text-surface-fg" },
+  teal: { bg: "bg-category-teal-3", fg: "text-category-teal-11", border: "border-category-teal-7", solid: "bg-category-teal-9", solidFg: "text-white" },
+  amber: { bg: "bg-category-amber-3", fg: "text-category-amber-11", border: "border-category-amber-7", solid: "bg-category-amber-9", solidFg: "text-white" },
+  slate: { bg: "bg-category-slate-3", fg: "text-category-slate-11", border: "border-category-slate-7", solid: "bg-category-slate-9", solidFg: "text-white" },
+  indigo: { bg: "bg-category-indigo-3", fg: "text-category-indigo-11", border: "border-category-indigo-7", solid: "bg-category-indigo-9", solidFg: "text-white" },
+  cyan: { bg: "bg-category-cyan-3", fg: "text-category-cyan-11", border: "border-category-cyan-7", solid: "bg-category-cyan-9", solidFg: "text-white" },
+  orange: { bg: "bg-category-orange-3", fg: "text-category-orange-11", border: "border-category-orange-7", solid: "bg-category-orange-9", solidFg: "text-white" },
+  emerald: { bg: "bg-category-emerald-3", fg: "text-category-emerald-11", border: "border-category-emerald-7", solid: "bg-category-emerald-9", solidFg: "text-white" }
+};
+function H(n, d) {
+  if (d === "custom") return "";
+  const e = $[d];
+  switch (n) {
+    case "subtle":
+      return a(e.bg, e.fg, e.border);
+    case "solid":
+      return a(e.solid, e.solidFg, "border-transparent");
+    case "outline":
+      return a("bg-transparent", e.fg, e.border);
+    case "soft":
+      return a(e.bg, e.fg, "border-transparent");
+  }
+}
+const J = I(
   "relative inline-flex items-center rounded-full font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]",
   {
     variants: {
@@ -19,23 +49,6 @@ const X = I(
         outline: "border",
         soft: "border border-transparent"
       },
-      color: {
-        default: "",
-        accent: "",
-        error: "",
-        success: "",
-        warning: "",
-        info: "",
-        neutral: "",
-        teal: "",
-        amber: "",
-        slate: "",
-        indigo: "",
-        cyan: "",
-        orange: "",
-        emerald: "",
-        custom: ""
-      },
       size: {
         xs: "h-4 px-1.5 text-[10px] gap-1",
         sm: "h-5 px-2 text-ds-xs gap-1",
@@ -43,71 +56,8 @@ const X = I(
         lg: "h-7 px-3 text-ds-sm gap-1.5"
       }
     },
-    compoundVariants: [
-      // ── subtle × colors ──────────────────────────────────────────
-      { variant: "subtle", color: "default", className: "bg-surface-raised-hover text-surface-fg-muted border-surface-border-strong" },
-      { variant: "subtle", color: "accent", className: "bg-accent-3 text-accent-11 border-accent-7" },
-      { variant: "subtle", color: "error", className: "bg-error-3 text-error-11 border-error-7" },
-      { variant: "subtle", color: "success", className: "bg-success-3 text-success-11 border-success-7" },
-      { variant: "subtle", color: "warning", className: "bg-warning-3 text-warning-11 border-warning-7" },
-      { variant: "subtle", color: "info", className: "bg-info-3 text-info-11 border-info-7" },
-      { variant: "subtle", color: "neutral", className: "bg-surface-raised-hover text-surface-fg-muted border-surface-border-strong" },
-      { variant: "subtle", color: "teal", className: "bg-category-teal-3 text-category-teal-11 border-category-teal-7" },
-      { variant: "subtle", color: "amber", className: "bg-category-amber-3 text-category-amber-11 border-category-amber-7" },
-      { variant: "subtle", color: "slate", className: "bg-category-slate-3 text-category-slate-11 border-category-slate-7" },
-      { variant: "subtle", color: "indigo", className: "bg-category-indigo-3 text-category-indigo-11 border-category-indigo-7" },
-      { variant: "subtle", color: "cyan", className: "bg-category-cyan-3 text-category-cyan-11 border-category-cyan-7" },
-      { variant: "subtle", color: "orange", className: "bg-category-orange-3 text-category-orange-11 border-category-orange-7" },
-      { variant: "subtle", color: "emerald", className: "bg-category-emerald-3 text-category-emerald-11 border-category-emerald-7" },
-      // ── solid × colors ───────────────────────────────────────────
-      { variant: "solid", color: "default", className: "bg-neutral-5 text-surface-fg border-transparent" },
-      { variant: "solid", color: "accent", className: "bg-accent-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "error", className: "bg-error-9 text-error-fg border-transparent" },
-      { variant: "solid", color: "success", className: "bg-success-9 text-success-fg border-transparent" },
-      { variant: "solid", color: "warning", className: "bg-warning-9 text-warning-fg border-transparent" },
-      { variant: "solid", color: "info", className: "bg-info-9 text-info-fg border-transparent" },
-      { variant: "solid", color: "neutral", className: "bg-neutral-5 text-surface-fg border-transparent" },
-      { variant: "solid", color: "teal", className: "bg-category-teal-9 text-white border-transparent" },
-      { variant: "solid", color: "amber", className: "bg-category-amber-9 text-white border-transparent" },
-      { variant: "solid", color: "slate", className: "bg-category-slate-9 text-white border-transparent" },
-      { variant: "solid", color: "indigo", className: "bg-category-indigo-9 text-white border-transparent" },
-      { variant: "solid", color: "cyan", className: "bg-category-cyan-9 text-white border-transparent" },
-      { variant: "solid", color: "orange", className: "bg-category-orange-9 text-white border-transparent" },
-      { variant: "solid", color: "emerald", className: "bg-category-emerald-9 text-white border-transparent" },
-      // ── outline × colors ─────────────────────────────────────────
-      { variant: "outline", color: "default", className: "bg-transparent text-surface-fg-muted border-surface-border-strong" },
-      { variant: "outline", color: "accent", className: "bg-transparent text-accent-11 border-accent-7" },
-      { variant: "outline", color: "error", className: "bg-transparent text-error-11 border-error-7" },
-      { variant: "outline", color: "success", className: "bg-transparent text-success-11 border-success-7" },
-      { variant: "outline", color: "warning", className: "bg-transparent text-warning-11 border-warning-7" },
-      { variant: "outline", color: "info", className: "bg-transparent text-info-11 border-info-7" },
-      { variant: "outline", color: "neutral", className: "bg-transparent text-surface-fg-muted border-surface-border-strong" },
-      { variant: "outline", color: "teal", className: "bg-transparent text-category-teal-11 border-category-teal-7" },
-      { variant: "outline", color: "amber", className: "bg-transparent text-category-amber-11 border-category-amber-7" },
-      { variant: "outline", color: "slate", className: "bg-transparent text-category-slate-11 border-category-slate-7" },
-      { variant: "outline", color: "indigo", className: "bg-transparent text-category-indigo-11 border-category-indigo-7" },
-      { variant: "outline", color: "cyan", className: "bg-transparent text-category-cyan-11 border-category-cyan-7" },
-      { variant: "outline", color: "orange", className: "bg-transparent text-category-orange-11 border-category-orange-7" },
-      { variant: "outline", color: "emerald", className: "bg-transparent text-category-emerald-11 border-category-emerald-7" },
-      // ── soft × colors ────────────────────────────────────────────
-      { variant: "soft", color: "default", className: "bg-surface-raised-hover text-surface-fg-muted border-transparent" },
-      { variant: "soft", color: "accent", className: "bg-accent-3 text-accent-11 border-transparent" },
-      { variant: "soft", color: "error", className: "bg-error-3 text-error-11 border-transparent" },
-      { variant: "soft", color: "success", className: "bg-success-3 text-success-11 border-transparent" },
-      { variant: "soft", color: "warning", className: "bg-warning-3 text-warning-11 border-transparent" },
-      { variant: "soft", color: "info", className: "bg-info-3 text-info-11 border-transparent" },
-      { variant: "soft", color: "neutral", className: "bg-surface-raised-hover text-surface-fg-muted border-transparent" },
-      { variant: "soft", color: "teal", className: "bg-category-teal-3 text-category-teal-11 border-transparent" },
-      { variant: "soft", color: "amber", className: "bg-category-amber-3 text-category-amber-11 border-transparent" },
-      { variant: "soft", color: "slate", className: "bg-category-slate-3 text-category-slate-11 border-transparent" },
-      { variant: "soft", color: "indigo", className: "bg-category-indigo-3 text-category-indigo-11 border-transparent" },
-      { variant: "soft", color: "cyan", className: "bg-category-cyan-3 text-category-cyan-11 border-transparent" },
-      { variant: "soft", color: "orange", className: "bg-category-orange-3 text-category-orange-11 border-transparent" },
-      { variant: "soft", color: "emerald", className: "bg-category-emerald-3 text-category-emerald-11 border-transparent" }
-    ],
     defaultVariants: {
       variant: "subtle",
-      color: "default",
       size: "md"
     }
   }
@@ -116,84 +66,86 @@ const X = I(
   sm: "[&>svg]:h-3 [&>svg]:w-3",
   md: "[&>svg]:h-3 [&>svg]:w-3",
   lg: "[&>svg]:h-3.5 [&>svg]:w-3.5"
-}, _ = {
+}, Q = {
   xs: "pl-1",
   sm: "pl-1.5",
   md: "pl-2",
   lg: "pl-2.5"
-}, $ = {
+}, U = {
   xs: "pr-0.5",
   sm: "pr-1",
   md: "pr-1",
   lg: "pr-1.5"
-}, B = S.forwardRef(
+}, S = R.forwardRef(
   ({
-    className: c,
-    variant: v,
-    color: f,
-    size: y,
-    asChild: x,
-    startIcon: t,
-    endIcon: o,
-    dot: n,
-    onDismiss: e,
+    className: n,
+    variant: d,
+    color: e,
+    size: x,
+    asChild: h,
+    startIcon: s,
+    endIcon: i,
+    dot: g,
+    onDismiss: t,
     onClick: r,
     selected: l,
-    disabled: u,
-    maxWidth: N,
-    circle: A,
-    children: i,
-    style: j,
-    ...h
-  }, G) => {
-    const d = v ?? "subtle", k = f ?? "default", g = y ?? "md", m = x ? T : r && e ? "div" : r ? "button" : "span", K = k === "custom" ? {
-      ...d === "subtle" && {
+    disabled: p,
+    maxWidth: y,
+    truncate: A,
+    circle: j,
+    children: b,
+    style: G,
+    ...w
+  }, K) => {
+    const k = X(), u = d ?? "subtle", C = e ?? "default", f = x ?? "md", m = h ? T : r && t ? "div" : r ? "button" : "span", M = C === "custom" ? {
+      ...u === "subtle" && {
         backgroundColor: "color-mix(in oklch, var(--badge-color) 15%, transparent)",
         color: "var(--badge-color)",
         borderColor: "color-mix(in oklch, var(--badge-color) 40%, transparent)"
       },
-      ...d === "solid" && {
+      ...u === "solid" && {
         backgroundColor: "var(--badge-color)",
         color: "var(--badge-fg-color, white)",
         borderColor: "transparent"
       },
-      ...d === "outline" && {
+      ...u === "outline" && {
         backgroundColor: "transparent",
         color: "var(--badge-color)",
         borderColor: "color-mix(in oklch, var(--badge-color) 50%, transparent)"
       },
-      ...d === "soft" && {
+      ...u === "soft" && {
         backgroundColor: "color-mix(in oklch, var(--badge-color) 12%, transparent)",
         color: "var(--badge-color)",
         borderColor: "transparent"
       }
-    } : void 0, V = r && e ? (s) => {
-      (s.key === "Enter" || s.key === " ") && (s.preventDefault(), u || r(s)), h.onKeyDown?.(s);
-    } : h.onKeyDown, L = !!(n || t || r && l && !t && !n), P = !!(e || o);
-    return /* @__PURE__ */ p(
+    } : void 0, L = r && t ? (c) => {
+      (c.key === "Enter" || c.key === " ") && (c.preventDefault(), p || r(c)), w.onKeyDown?.(c);
+    } : w.onKeyDown, P = !!(g || s || r && l && !s && !g), V = !!(t || i);
+    return /* @__PURE__ */ v(
       m,
       {
-        ref: G,
-        className: b(
-          X({ variant: d, color: k, size: g }),
-          L && _[g],
-          P && $[g],
+        ref: K,
+        className: a(
+          J({ variant: u, size: f }),
+          H(u, C),
+          P && Q[f],
+          V && U[f],
           r && "cursor-pointer hover:brightness-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]",
           l && "ring-1 ring-current/20 transition-shadow duration-fast-02",
-          u && "opacity-action-disabled pointer-events-none saturate-[0.3]",
-          A && "justify-center px-0 aspect-square",
-          c
+          p && "opacity-action-disabled pointer-events-none saturate-[0.3]",
+          j && "justify-center px-0 aspect-square",
+          n
         ),
-        style: { ...j, ...K, ...N ? { maxWidth: N } : void 0 },
-        onClick: u ? void 0 : r,
-        onKeyDown: V,
+        style: { ...G, ...M, ...y ? { maxWidth: y } : void 0 },
+        onClick: p ? void 0 : r,
+        onKeyDown: L,
         ...m === "button" && { type: "button" },
-        ...m === "button" && u ? { disabled: !0 } : {},
+        ...m === "button" && p ? { disabled: !0 } : {},
         ...m === "div" && r ? { role: "button", tabIndex: 0 } : {},
-        ...h,
+        ...w,
         children: [
-          /* @__PURE__ */ a(M, { children: n && /* @__PURE__ */ p(
-            w.span,
+          /* @__PURE__ */ o(_, { children: g && /* @__PURE__ */ v(
+            F.span,
             {
               initial: { scale: 0 },
               animate: { scale: 1 },
@@ -202,53 +154,53 @@ const X = I(
               className: "relative inline-flex h-1.5 w-1.5 shrink-0",
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ a(
-                  w.span,
+                /* @__PURE__ */ o(
+                  F.span,
                   {
                     className: "absolute inset-0 rounded-full bg-current",
-                    animate: { scale: [1, 2.5], opacity: [0.35, 0] },
-                    transition: { repeat: 1 / 0, repeatDelay: 0.3, duration: 1.2, ease: [0, 0, 0.58, 1] }
+                    animate: k ? void 0 : { scale: [1, 2.5], opacity: [0.35, 0] },
+                    transition: k ? { duration: 0 } : { repeat: 1 / 0, repeatDelay: 0.3, duration: 1.2, ease: [0, 0, 0.58, 1] }
                   }
                 ),
-                /* @__PURE__ */ a("span", { className: "relative h-1.5 w-1.5 rounded-full bg-current" })
+                /* @__PURE__ */ o("span", { className: "relative h-1.5 w-1.5 rounded-full bg-current" })
               ]
             },
             "dot"
           ) }),
-          r && !t && !n && /* @__PURE__ */ a(
-            w.span,
+          r && !s && !g && /* @__PURE__ */ o(
+            F.span,
             {
               initial: !1,
               animate: l ? { opacity: 1, scale: 1, width: "auto", marginRight: 0 } : { opacity: 0, scale: 0.5, width: 0, marginRight: -4 },
               transition: { type: "tween", duration: 0.15, ease: [0.2, 0, 0.38, 0.9] },
               className: "inline-flex shrink-0 overflow-hidden",
               "aria-hidden": !l,
-              children: /* @__PURE__ */ a(C, { icon: D, size: "xs" })
+              children: /* @__PURE__ */ o(N, { icon: D, size: "xs" })
             }
           ),
-          t && /* @__PURE__ */ a("span", { className: b("shrink-0", z[g]), children: t }),
-          N ? /* @__PURE__ */ a(
+          s && /* @__PURE__ */ o("span", { className: a("shrink-0", z[f]), children: s }),
+          A || y ? /* @__PURE__ */ o(
             "span",
             {
               className: "truncate",
-              title: typeof i == "string" ? i : void 0,
-              children: i
+              title: typeof b == "string" ? b : void 0,
+              children: b
             }
-          ) : i,
-          o && /* @__PURE__ */ a("span", { className: b("shrink-0", z[g]), children: o }),
-          e && /* @__PURE__ */ a(
+          ) : b,
+          i && /* @__PURE__ */ o("span", { className: a("shrink-0", z[f]), children: i }),
+          t && /* @__PURE__ */ o(
             "button",
             {
               type: "button",
-              onClick: (s) => {
-                s.stopPropagation(), e();
+              onClick: (c) => {
+                c.stopPropagation(), t();
               },
-              className: b(
+              className: a(
                 "shrink-0 rounded-full text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-9",
-                g === "xs" ? "p-0 -mr-0.5 min-w-[16px] min-h-[16px]" : "p-px"
+                f === "xs" ? "p-0 -mr-0.5 min-w-[16px] min-h-[16px]" : "p-px"
               ),
-              "aria-label": `Remove ${typeof i == "string" ? i : ""}`.trim() || "Remove",
-              children: /* @__PURE__ */ a(C, { icon: E, size: "xs" })
+              "aria-label": `Remove ${typeof b == "string" ? b : ""}`.trim() || "Remove",
+              children: /* @__PURE__ */ o(N, { icon: E, size: "xs" })
             }
           )
         ]
@@ -256,33 +208,33 @@ const X = I(
     );
   }
 );
-B.displayName = "Badge";
-const F = Object.assign(B, {
+S.displayName = "Badge";
+const W = Object.assign(S, {
   Indicator: q,
-  Group: R
-}), H = {
+  Group: B
+}), Y = {
   tight: "gap-1",
   default: "gap-1.5",
   loose: "gap-2"
 };
-function R({
-  max: c,
-  gap: v = "default",
-  size: f,
-  onOverflowClick: y,
-  className: x,
-  children: t
+function B({
+  max: n,
+  gap: d = "default",
+  size: e,
+  onOverflowClick: x,
+  className: h,
+  children: s
 }) {
-  const o = S.Children.toArray(t), n = o.length, e = c !== void 0 && n > c, r = e ? o.slice(0, c) : o, l = e ? n - c : 0;
-  return /* @__PURE__ */ p("div", { className: b("flex flex-wrap items-center", H[v], x), children: [
+  const i = R.Children.toArray(s), g = i.length, t = n !== void 0 && g > n, r = t ? i.slice(0, n) : i, l = t ? g - n : 0;
+  return /* @__PURE__ */ v("div", { className: a("flex flex-wrap items-center", Y[d], h), children: [
     r,
-    e && /* @__PURE__ */ p(
-      F,
+    t && /* @__PURE__ */ v(
+      W,
       {
         variant: "outline",
         color: "neutral",
-        size: f ?? "sm",
-        onClick: y,
+        size: e ?? "sm",
+        onClick: x,
         children: [
           "+",
           l
@@ -291,9 +243,9 @@ function R({
     )
   ] });
 }
-R.displayName = "BadgeGroup";
+B.displayName = "BadgeGroup";
 export {
-  F as B,
-  R as a,
-  X as b
+  W as B,
+  B as a,
+  J as b
 };

package/dist/_chunks/document-preview.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import * as n from "react";
+import { tweens as D } from "../ui/lib/motion.js";
+import { Skeleton as L } from "../ui/skeleton.js";
+import { Button as v } from "../ui/button.js";
+import { Icon as x } from "../ui/icon.js";
+import { IconChevronLeft as N, IconChevronRight as I } from "@tabler/icons-react";
+import { pdfjs as b, Document as A, Page as F } from "react-pdf";
+import { E as k, T as C } from "./file-preview.js";
+import { A as M, m as j } from "./framer.js";
+function $({ url: l, initialPage: u, onError: w }) {
+  n.useEffect(() => {
+    b.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${b.version}/build/pdf.worker.min.mjs`;
+  }, []);
+  const [a, y] = n.useState(0), [o, s] = n.useState(u), [m, i] = n.useState(String(u)), [P, S] = n.useState(!1), f = n.useRef(null), [p, g] = n.useState(!1);
+  n.useEffect(() => {
+    i(String(o));
+  }, [o]), n.useEffect(() => {
+    function t(r) {
+      const h = f.current;
+      !h || !h.contains(document.activeElement) && !p || (r.key === "ArrowRight" || r.key === "ArrowDown" ? (r.preventDefault(), s((d) => Math.min(a, d + 1))) : (r.key === "ArrowLeft" || r.key === "ArrowUp") && (r.preventDefault(), s((d) => Math.max(1, d - 1))));
+    }
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [a, p]);
+  function E(t) {
+    if (t.key === "Enter") {
+      const r = parseInt(m, 10);
+      r >= 1 && r <= a ? s(r) : i(String(o));
+    }
+  }
+  return P ? /* @__PURE__ */ e(k, { message: "Could not load PDF", url: l }) : /* @__PURE__ */ c(
+    "div",
+    {
+      ref: f,
+      className: "flex flex-col items-center gap-ds-03",
+      onMouseEnter: () => g(!0),
+      onMouseLeave: () => g(!1),
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ e("div", { className: "overflow-auto max-h-[70vh] rounded-ds-md bg-surface-sunken border border-surface-border", children: /* @__PURE__ */ e(
+          A,
+          {
+            file: l,
+            onLoadSuccess: ({ numPages: t }) => y(t),
+            onLoadError: () => {
+              S(!0), w?.("PDF failed to load");
+            },
+            loading: /* @__PURE__ */ e(L, { className: "h-[500px] w-[400px]" }),
+            error: /* @__PURE__ */ e(k, { message: "Failed to load PDF", url: l }),
+            children: /* @__PURE__ */ e(M, { mode: "wait", children: /* @__PURE__ */ e(
+              j.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: D.fade,
+                children: /* @__PURE__ */ e(F, { pageNumber: o, renderTextLayer: !1, renderAnnotationLayer: !1 })
+              },
+              o
+            ) })
+          }
+        ) }),
+        a > 0 && /* @__PURE__ */ c(C, { children: [
+          /* @__PURE__ */ e(v, { variant: "ghost", size: "icon-xs", onClick: () => s((t) => Math.max(1, t - 1)), disabled: o <= 1, "aria-label": "Previous page (←)", title: "Previous page", children: /* @__PURE__ */ e(x, { icon: N, size: "sm" }) }),
+          /* @__PURE__ */ c("div", { className: "flex items-center gap-ds-01 text-ds-xs text-surface-fg-muted", children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "text",
+                value: m,
+                onChange: (t) => i(t.target.value),
+                onKeyDown: E,
+                onBlur: () => i(String(o)),
+                className: "w-8 bg-transparent text-center font-mono text-surface-fg outline-none focus:bg-surface-raised-hover rounded-ds-sm",
+                "aria-label": "Page number"
+              }
+            ),
+            /* @__PURE__ */ c("span", { children: [
+              "/ ",
+              a
+            ] })
+          ] }),
+          /* @__PURE__ */ e(v, { variant: "ghost", size: "icon-xs", onClick: () => s((t) => Math.min(a, t + 1)), disabled: o >= a, "aria-label": "Next page (→)", title: "Next page", children: /* @__PURE__ */ e(x, { icon: I, size: "sm" }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  $ as default
+};