margo-ui 1.3.3 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "A small React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.",
   "keywords": [
     "react",

package/src/components/snippet/snippet.tsx

@@ -17,6 +17,7 @@ import {
 } from "./style.js";
 
 import type { ElementType } from "react";
+import { MaskGradientX } from "../../hoc/mask_gradient_x/mask_gradient_x.js";
 import type { SnippetProps } from "./type.js";
 
 export const Snippet = <T extends ElementType = "div">({ snippet, title, className, ...rest }: SnippetProps<T>) => {
@@ -46,18 +47,20 @@ export const Snippet = <T extends ElementType = "div">({ snippet, title, classNa
           />
         </Button>
       </div>
-      <pre className={snippetCodeClassName}>
-        <code>
-          <List
-            array={snippetHighlight(source)}
-            itemExtractor={({ row, index }) => (
-              <span key={index} className={snippetTokenClassName[row.type]}>
-                {row.value}
-              </span>
-            )}
-          />
-        </code>
-      </pre>
+      <MaskGradientX fade="1rem">
+        <pre className={snippetCodeClassName}>
+          <code>
+            <List
+              array={snippetHighlight(source)}
+              itemExtractor={({ row, index }) => (
+                <span key={index} className={snippetTokenClassName[row.type]}>
+                  {row.value}
+                </span>
+              )}
+            />
+          </code>
+        </pre>
+      </MaskGradientX>
     </Tag>
   );
 };

package/src/css/grid.css

@@ -63,6 +63,24 @@
   row-gap: var(--margo-grid-gutter-y);
 }
 
+/*
+ * Row subgrid: the item spans N rows of its parent grid and shares those tracks
+ * with its siblings, so sibling boxes with different content lengths keep their
+ * internal sections — dividers, footers, actions — on the exact same lines.
+ * Must be applied to every sibling that has to align, all with the same N, and
+ * each must expose exactly N children (wrap what belongs together).
+ *
+ * The rows inherit the parent row-gap; override it on the item (same value on
+ * every sibling) when the internal spacing differs from the layout gutter.
+ *
+ * Use on: cards in a row whose separators must line up.
+ */
+@utility margo-grid-sub-rows-* {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row-end: span --value(integer);
+}
+
 /*
  * Standalone 12-column grid: same line names and gutters, but no max-width and
  * no side padding — it fills whatever box it is placed in.

package/src/hoc/pointer_holder/pointer_holder.tsx

@@ -0,0 +1,40 @@
+import { cloneElement, useState } from "react";
+
+import type { PointerEvent } from "react";
+import type { PointerHolderProps } from "./type.js";
+
+const readKey = (target: EventTarget | null, attribute: string) => {
+  if (!(target instanceof Element)) return null;
+  const holder = target.closest(`[${attribute}]`);
+  return holder?.getAttribute(attribute) ?? null;
+};
+
+export const PointerHolder = ({ children, attribute = "data-margo-pointer-holder", disabled = false }: PointerHolderProps) => {
+  const [keys, setKeys] = useState<string[]>([]);
+
+  const hold = (target: EventTarget | null) => {
+    const key = readKey(target, attribute);
+
+    if (key === null) return;
+    setKeys((prev) => (prev.includes(key) ? prev : [...prev, key]));
+  };
+
+  const release = () => setKeys((prev) => (prev.length ? [] : prev));
+
+  const child = children({ keys });
+
+  const handlePointerOver = (event: PointerEvent<HTMLElement>) => {
+    if (!disabled && event.pointerType !== "touch") hold(event.target);
+    child.props.onPointerOver?.(event);
+  };
+
+  const handlePointerLeave = (event: PointerEvent<HTMLElement>) => {
+    release();
+    child.props.onPointerLeave?.(event);
+  };
+
+  return cloneElement(child, {
+    onPointerLeave: handlePointerLeave,
+    onPointerOver: handlePointerOver,
+  });
+};

package/src/hoc/pointer_holder/type.ts

@@ -0,0 +1,18 @@
+import type { FocusEventHandler, PointerEventHandler, ReactElement } from "react";
+
+export type PointerHolderApi = {
+  keys: string[];
+};
+
+export type PointerHolderChildProps = {
+  onBlur?: FocusEventHandler<HTMLElement>;
+  onFocus?: FocusEventHandler<HTMLElement>;
+  onPointerLeave?: PointerEventHandler<HTMLElement>;
+  onPointerOver?: PointerEventHandler<HTMLElement>;
+};
+
+export type PointerHolderProps = {
+  children: (api: PointerHolderApi) => ReactElement<PointerHolderChildProps>;
+  attribute?: string;
+  disabled?: boolean;
+};

package/src/index.ts

@@ -18,6 +18,7 @@ export { Tooltip } from "./components/tooltip/tooltip.js";
 
 export { BackgroundGlow } from "./hoc/background_glow/background_glow.js";
 export { BorderGlow } from "./hoc/border_glow/border_glow.js";
+export { PointerHolder } from "./hoc/pointer_holder/pointer_holder.js";
 export { MaskGradientX } from "./hoc/mask_gradient_x/mask_gradient_x.js";
 export { MaskGradientY } from "./hoc/mask_gradient_y/mask_gradient_y.js";
 export { Ripple } from "./hoc/ripple/ripple.js";
@@ -68,6 +69,7 @@ export type { TooltipPosition, TooltipProps } from "./components/tooltip/type.js
 
 export type { BackgroundGlowProps } from "./hoc/background_glow/type.js";
 export type { BorderGlowPosition, BorderGlowProps } from "./hoc/border_glow/type.js";
+export type { PointerHolderProps } from "./hoc/pointer_holder/type.js";
 export type { MaskGradientXProps } from "./hoc/mask_gradient_x/type.js";
 export type { MaskGradientYProps } from "./hoc/mask_gradient_y/type.js";
 export type { RippleProps } from "./hoc/ripple/type.js";