@particle-academy/react-fancy 5.5.0 → 5.6.0

package/dist/index.cjs

@@ -7020,6 +7020,73 @@ var Kbd = react.forwardRef(
   }
 );
 Kbd.displayName = "Kbd";
+var IndexList = react.forwardRef(
+  ({ items, linkAs, className, ...props }, ref) => {
+    const Link = linkAs ?? "a";
+    return /* @__PURE__ */ jsxRuntime.jsx("ol", { ref, "data-react-fancy-index-list": "", className: cn("m-0 list-none p-0", className), ...props, children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        "data-react-fancy-index-row": "",
+        className: "relative flex items-baseline gap-4 border-b border-zinc-200 py-3 last:border-b-0 dark:border-zinc-800",
+        children: [
+          item.num != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-mono text-xs tabular-nums text-zinc-400 dark:text-zinc-500", children: item.num }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-zinc-900 dark:text-zinc-100", children: item.href ? /* @__PURE__ */ jsxRuntime.jsx(
+            Link,
+            {
+              href: item.href,
+              className: "no-underline after:absolute after:inset-0 after:content-[''] hover:underline",
+              children: item.title
+            }
+          ) : item.title }),
+          item.meta != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 truncate text-sm text-zinc-500 dark:text-zinc-400", children: item.meta }),
+          item.value != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 font-mono text-xs tabular-nums text-zinc-500 dark:text-zinc-400", children: item.value })
+        ]
+      },
+      item.id ?? i
+    )) });
+  }
+);
+IndexList.displayName = "IndexList";
+var StatBand = react.forwardRef(
+  ({ columns = 4, className, style, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-react-fancy-stat-band": "",
+        className: cn("grid gap-6", className),
+        style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+StatBand.displayName = "StatBand";
+var valueClasses = {
+  sm: "text-xl",
+  md: "text-3xl",
+  lg: "text-5xl"
+};
+var StatRoot = react.forwardRef(
+  ({ value, label, size = "md", className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-stat": "", className: cn(className), ...props, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "font-semibold leading-none tracking-tight text-zinc-900 tabular-nums dark:text-zinc-100",
+            valueClasses[size]
+          ),
+          children: value
+        }
+      ),
+      label != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5 font-mono text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: label })
+    ] }) });
+  }
+);
+StatRoot.displayName = "Stat";
+var Stat = Object.assign(StatRoot, { Band: StatBand });
 var gapClasses2 = {
   sm: "gap-2",
   md: "gap-3",
@@ -16592,6 +16659,7 @@ exports.FormProvider = FormProvider;
 exports.Heading = Heading;
 exports.Icon = Icon;
 exports.ImageViewer = ImageViewer;
+exports.IndexList = IndexList;
 exports.Input = Input;
 exports.InputTag = InputTag;
 exports.Kanban = Kanban;
@@ -16622,6 +16690,8 @@ exports.Separator = Separator;
 exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
+exports.Stat = Stat;
+exports.StatBand = StatBand;
 exports.StickyNote = StickyNote;
 exports.Switch = Switch;
 exports.Table = Table;