@particle-academy/react-fancy 5.2.0 → 5.4.0

package/dist/index.cjs

@@ -4116,7 +4116,7 @@ var Checkbox = react.forwardRef(
         el.indeterminate = indeterminate ?? false;
       }
     }, [indeterminate]);
-    const sizeClasses6 = {
+    const sizeClasses7 = {
       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,
+            sizeClasses7,
             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,
+            sizeClasses7,
             "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 sizeClasses7 = {
     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,
+                sizeClasses7,
                 "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 sizeClasses7 = {
     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,
+                sizeClasses7,
                 "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,36 @@ 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 gapClasses2 = {
   sm: "gap-2",
   md: "gap-3",
@@ -7042,6 +7101,66 @@ var CardFooter = react.forwardRef(
   }
 );
 CardFooter.displayName = "CardFooter";
+var CardMedia = react.forwardRef(
+  ({
+    src,
+    alt = "",
+    ratio = "16/9",
+    height,
+    background,
+    objectPosition = "center",
+    loading = "lazy",
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-card-media": "",
+        className: cn(
+          "relative overflow-hidden rounded-t-lg",
+          // Card's `padding` prop pads EVERY direct div child
+          // (`[&>div]:px-4 …`), which would inset the media and break the
+          // flush-to-the-edge look every caller wants. `!` wins regardless of
+          // stylesheet order, which plain `p-0` would not.
+          "!px-0 !py-0",
+          className
+        ),
+        style: {
+          ...height === void 0 ? { aspectRatio: ratio } : { height },
+          ...background ? { background } : null,
+          ...style
+        },
+        ...props,
+        children: [
+          src ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              alt,
+              loading,
+              className: "absolute inset-0 h-full w-full object-cover",
+              style: { objectPosition }
+            }
+          ) : null,
+          children,
+          topLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 top-2 z-10", children: topLeft }) : null,
+          topRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 top-2 z-10", children: topRight }) : null,
+          bottomLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-2 left-2 z-10", children: bottomLeft }) : null,
+          bottomRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-2 right-2 z-10", children: bottomRight }) : null
+        ]
+      }
+    );
+  }
+);
+CardMedia.displayName = "CardMedia";
 var variantClasses = {
   outlined: "border border-zinc-200 dark:border-zinc-700",
   elevated: "shadow-md border border-zinc-100 dark:border-zinc-800",
@@ -7057,6 +7176,7 @@ var CardRoot = react.forwardRef(
   ({
     variant = "outlined",
     padding = "md",
+    interactive = false,
     className,
     children,
     ...props
@@ -7069,6 +7189,10 @@ var CardRoot = react.forwardRef(
         className: cn(
           "rounded-lg bg-white dark:bg-zinc-900",
           variantClasses[variant],
+          // `overflow-hidden` is part of `interactive` rather than always-on:
+          // clipping unconditionally would cut off popovers and dropdowns that
+          // legitimately overflow a static card.
+          interactive && "overflow-hidden transition hover:-translate-y-0.5 hover:shadow-lg hover:border-zinc-300 dark:hover:border-zinc-600",
           paddingClasses[padding],
           className
         ),
@@ -7080,6 +7204,7 @@ var CardRoot = react.forwardRef(
 );
 CardRoot.displayName = "Card";
 var Card = Object.assign(CardRoot, {
+  Media: CardMedia,
   Header: CardHeader,
   Body: CardBody,
   Footer: CardFooter
@@ -16388,6 +16513,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;
@@ -16414,6 +16540,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;