@particle-academy/react-fancy 5.4.0 → 5.6.0

package/dist/index.cjs

@@ -4116,7 +4116,7 @@ var Checkbox = react.forwardRef(
         el.indeterminate = indeterminate ?? false;
       }
     }, [indeterminate]);
-    const sizeClasses7 = {
+    const sizeClasses8 = {
       xs: "h-3.5 w-3.5",
       sm: "h-4 w-4",
       md: "h-[18px] w-[18px]",
@@ -4142,7 +4142,7 @@ var Checkbox = react.forwardRef(
           } : void 0,
           className: cn(
             "flex shrink-0 items-center justify-center text-zinc-700 dark:text-zinc-200",
-            sizeClasses7,
+            sizeClasses8,
             interactive && "cursor-pointer rounded outline-none transition-colors hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:text-white"
           ),
           "aria-hidden": interactive ? void 0 : "true",
@@ -4171,7 +4171,7 @@ var Checkbox = react.forwardRef(
           },
           onChange: (e) => setChecked(e.target.checked),
           className: cn(
-            sizeClasses7,
+            sizeClasses8,
             "cursor-pointer rounded border border-zinc-300 bg-white text-blue-600 transition-[border-color,box-shadow] duration-150 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:bg-[#1e1e24]",
             dirtyRingClasses(dirty),
             error && "border-red-500"
@@ -4229,7 +4229,7 @@ function CheckboxGroup({
     const next = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
     setValue(next);
   };
-  const sizeClasses7 = {
+  const sizeClasses8 = {
     xs: "h-3.5 w-3.5",
     sm: "h-4 w-4",
     md: "h-[18px] w-[18px]",
@@ -4265,7 +4265,7 @@ function CheckboxGroup({
               autoFocus: interactive && index === 0,
               onChange: () => handleToggle(resolved.value),
               className: cn(
-                sizeClasses7,
+                sizeClasses8,
                 "cursor-pointer rounded border border-zinc-300 bg-white text-blue-600 transition-[border-color,box-shadow] duration-150 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:bg-[#1e1e24]",
                 dirtyRingClasses(dirty),
                 error && "border-red-500"
@@ -4332,7 +4332,7 @@ function RadioGroup({
     defaultValue,
     onValueChange
   );
-  const sizeClasses7 = {
+  const sizeClasses8 = {
     xs: "h-3.5 w-3.5",
     sm: "h-4 w-4",
     md: "h-[18px] w-[18px]",
@@ -4371,7 +4371,7 @@ function RadioGroup({
               autoFocus: shouldAutoFocus,
               onChange: () => setValue(resolved.value),
               className: cn(
-                sizeClasses7,
+                sizeClasses8,
                 "cursor-pointer border border-zinc-300 bg-white text-blue-600 transition-[border-color,box-shadow] duration-150 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:bg-[#1e1e24]",
                 dirtyRingClasses(dirty),
                 error && "border-red-500"
@@ -6979,6 +6979,114 @@ var Eyebrow = react.forwardRef(
   }
 );
 Eyebrow.displayName = "Eyebrow";
+var sizeClasses7 = {
+  xs: "min-w-[1.25rem] px-1 py-px text-[9px]",
+  sm: "min-w-[1.4rem] px-1 py-0.5 text-[10px]",
+  md: "min-w-[1.6rem] px-1.5 py-0.5 text-xs"
+};
+var capClasses = "inline-grid place-items-center rounded border border-zinc-300 bg-zinc-50 font-mono leading-none text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300";
+var Kbd = react.forwardRef(
+  ({ keys, separator = "+", size = "sm", className, children, ...props }, ref) => {
+    if (keys?.length) {
+      return (
+        // The chord is ONE <kbd> containing per-key caps: a screen reader
+        // announces "Cmd + K" as a unit, which is what it is, rather than as
+        // two unrelated keys.
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "kbd",
+          {
+            ref,
+            "data-react-fancy-kbd": "",
+            className: cn("inline-flex items-center gap-1 font-mono not-italic", className),
+            ...props,
+            children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-zinc-400 dark:text-zinc-500", children: separator }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(capClasses, sizeClasses7[size]), children: k })
+            ] }, i))
+          }
+        )
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "kbd",
+      {
+        ref,
+        "data-react-fancy-kbd": "",
+        className: cn(capClasses, sizeClasses7[size], "not-italic", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+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",
@@ -16551,9 +16659,11 @@ exports.FormProvider = FormProvider;
 exports.Heading = Heading;
 exports.Icon = Icon;
 exports.ImageViewer = ImageViewer;
+exports.IndexList = IndexList;
 exports.Input = Input;
 exports.InputTag = InputTag;
 exports.Kanban = Kanban;
+exports.Kbd = Kbd;
 exports.MagicWand = MagicWand;
 exports.Marquee = Marquee;
 exports.MediaViewer = MediaViewer;
@@ -16580,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;