@particle-academy/react-fancy 5.4.0 → 5.5.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,47 @@ 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 gapClasses2 = {
   sm: "gap-2",
   md: "gap-3",
@@ -16554,6 +16595,7 @@ exports.ImageViewer = ImageViewer;
 exports.Input = Input;
 exports.InputTag = InputTag;
 exports.Kanban = Kanban;
+exports.Kbd = Kbd;
 exports.MagicWand = MagicWand;
 exports.Marquee = Marquee;
 exports.MediaViewer = MediaViewer;