margo-ui 1.3.4 → 1.4.0

package/package.json

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

package/src/components/button/style.ts

@@ -1,6 +1,7 @@
 export const buttonBaseClassName = `group/button flex h-8 w-fit shrink-0 items-center px-2 rounded-lg border-2 text-on-main
 hover:border-on-main hover:text-on-main focus-visible:margo-border-gradient-primary
-focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main shadow-button`;
+focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main shadow-button
+select-none origin-center transition-transform duration-[160ms] ease-out active:scale-[0.95]`;
 
 export const buttonSurfaceClassName = "border-border bg-main";
 

package/src/components/item/style.ts

@@ -1,6 +1,7 @@
 export const itemBaseClassName = `group/item flex w-full cursor-pointer items-center gap-1 rounded-lg border-2 px-3 py-2 text-on-main
 text-sm focus-visible:margo-border-gradient-primary focus-visible:outline select-none
-focus-visible:outline-offset-1 focus-visible:outline-on-main`;
+focus-visible:outline-offset-1 focus-visible:outline-on-main
+origin-center bg-border/20 transition-transform duration-[160ms] ease-out active:scale-[0.98]`;
 
 export const itemSurfaceClassName = `border-transparent text-medium hover:border-border hover:text-on-main
 hover:shadow-item focus-visible:shadow-item`;

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/css/variables.css

@@ -53,7 +53,7 @@
   --margo-color-primary: #57e550;
   --margo-color-primary-darken: #45b93f;
   --margo-color-secondary: #d3d3d3;
-  --margo-color-medium: #858585;
+  --margo-color-medium: #808080;
   --margo-color-border: #cecece;
 
   --margo-shadow-card: 0 8px 6px -4px rgb(220, 220, 220, 0.5);

package/src/hoc/ripple/ripple.tsx

@@ -13,14 +13,14 @@ import "./ripple.css";
 export const Ripple = ({ children, disabled = false, rippleClassName = "bg-primary-darken" }: RippleProps) => {
   const { endRipple, ripple, startRipple } = useRipple();
 
-  const handlePointerDown = (event: PointerEvent<HTMLElement>) => {
+  const handlePointerUp = (event: PointerEvent<HTMLElement>) => {
     if (!disabled) startRipple(event);
-    children.props.onPointerDown?.(event);
+    children.props.onPointerUp?.(event);
   };
 
   return cloneElement(children, {
     className: cn("relative overflow-hidden", children.props.className),
-    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerUp,
     children: (
       <>
         {children.props.children}

package/src/hoc/ripple/type.ts

@@ -3,7 +3,7 @@ import type { PointerEvent, PointerEventHandler, ReactElement, ReactNode } from
 export type RippleChildProps = {
   children?: ReactNode;
   className?: string;
-  onPointerDown?: PointerEventHandler<HTMLElement>;
+  onPointerUp?: PointerEventHandler<HTMLElement>;
 };
 
 export type RippleProps = {