@particle-academy/react-fancy 5.3.0 → 5.5.0

package/dist/index.cjs

@@ -4116,7 +4116,7 @@ var Checkbox = react.forwardRef(
         el.indeterminate = indeterminate ?? false;
       }
     }, [indeterminate]);
-    const sizeClasses6 = {
+    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",
-            sizeClasses6,
+            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(
-            sizeClasses6,
+            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 sizeClasses6 = {
+  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(
-                sizeClasses6,
+                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 sizeClasses6 = {
+  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(
-                sizeClasses6,
+                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"
@@ -6867,6 +6867,36 @@ var Progress = react.forwardRef(
   }
 );
 Progress.displayName = "Progress";
+var sizeClasses6 = {
+  sm: "h-6 w-6 rounded-md text-[11px]",
+  md: "h-8 w-8 rounded-lg text-sm",
+  lg: "h-11 w-11 rounded-xl text-lg"
+};
+var BrandMark = react.forwardRef(
+  ({ glyph, size = "md", className, style, ...props }, ref) => {
+    const numeric = typeof size === "number";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        "data-react-fancy-brand-mark": "",
+        "aria-hidden": props["aria-label"] ? void 0 : true,
+        className: cn(
+          "grid shrink-0 place-items-center font-bold leading-none text-white select-none",
+          numeric ? "rounded-lg" : sizeClasses6[size],
+          // Overridable default: a mark with no `className` still reads as a
+          // mark rather than as an invisible box.
+          "bg-zinc-900 dark:bg-zinc-100 dark:text-zinc-900",
+          className
+        ),
+        style: numeric ? { height: size, width: size, fontSize: Math.round(size * 0.5), ...style } : style,
+        ...props,
+        children: glyph
+      }
+    );
+  }
+);
+BrandMark.displayName = "BrandMark";
 var gapClasses = {
   sm: "gap-2",
   md: "gap-3",
@@ -6882,7 +6912,7 @@ var taglineClasses = {
   md: "text-sm",
   lg: "text-base"
 };
-var Brand = react.forwardRef(
+var BrandRoot = react.forwardRef(
   ({ logo, name, tagline, size = "md", className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -6919,7 +6949,77 @@ var Brand = react.forwardRef(
     );
   }
 );
-Brand.displayName = "Brand";
+BrandRoot.displayName = "Brand";
+var Brand = Object.assign(BrandRoot, { Mark: BrandMark });
+var Eyebrow = react.forwardRef(
+  ({ num, label, aside, rule = false, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-eyebrow": "",
+        className: cn(
+          "flex items-baseline gap-3 font-mono text-[11.5px] uppercase tracking-wider text-zinc-500 dark:text-zinc-400",
+          rule && "border-b border-zinc-200 pb-2 dark:border-zinc-800",
+          className
+        ),
+        ...props,
+        children: [
+          children ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            num != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("b", { className: "font-medium text-zinc-900 dark:text-zinc-100", children: num }),
+              label != null && " \u2014 "
+            ] }),
+            label
+          ] }),
+          aside != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: aside })
+        ]
+      }
+    );
+  }
+);
+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",
@@ -16454,6 +16554,7 @@ exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Brand = Brand;
+exports.BrandMark = BrandMark;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
 exports.Calendar = Calendar;
@@ -16480,6 +16581,7 @@ exports.EMOJI_ENTRIES = EMOJI_ENTRIES;
 exports.Editor = Editor;
 exports.Emoji = Emoji;
 exports.EmojiSelect = EmojiSelect;
+exports.Eyebrow = Eyebrow;
 exports.FauxClient = FauxClient;
 exports.Field = Field;
 exports.FieldModeContext = FieldModeContext;
@@ -16493,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;