margo-ui 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "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/button.tsx

@@ -5,11 +5,13 @@ import { cn } from "../../utils/cn/cn.js";
 import {
   buttonActiveClassName,
   buttonBaseClassName,
+  buttonDisabledClassName,
   buttonGridClassName,
   buttonGridForwardClassName,
   buttonGridReverseClassName,
   buttonIconClassName,
   buttonLabelClassName,
+  buttonNotClickableClassName,
   buttonSlotClassName,
   buttonSurfaceClassName,
 } from "./style.js";
@@ -19,6 +21,7 @@ import type { ButtonIconLabelProps, ButtonIconProps, ButtonLabelProps, ButtonPro
 
 export const Button = <T extends ElementType = "button">({
   clickable = true,
+  disabled = false,
   active = false,
   open = false,
   onClickBlur,
@@ -27,6 +30,7 @@ export const Button = <T extends ElementType = "button">({
   ...rest
 }: ButtonProps<T>) => {
   const handleClick = (event: MouseEvent<HTMLElement>) => {
+    if (disabled) return;
     onClick?.(event);
     if (typeof onClickBlur === "function") {
       const target = event.currentTarget;
@@ -36,15 +40,19 @@ export const Button = <T extends ElementType = "button">({
   };
 
   return (
-    <Ripple>
+    <Ripple disabled={disabled || !clickable}>
       <Tag
         {...Tag.forward<T>(rest, "button")}
         data-margo-open={open}
+        data-margo-disabled={disabled}
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled || !clickable ? -1 : undefined}
         onClick={handleClick}
         className={cn(
           buttonBaseClassName,
           active ? buttonActiveClassName : buttonSurfaceClassName,
-          !clickable && "pointer-events-none",
+          !clickable && buttonNotClickableClassName,
+          disabled && buttonDisabledClassName,
           className,
         )}
       />

package/src/components/button/style.ts

@@ -6,6 +6,10 @@ export const buttonSurfaceClassName = "border-border bg-main";
 
 export const buttonActiveClassName = "margo-border-gradient-primary";
 
+export const buttonNotClickableClassName = "pointer-events-none cursor-auto";
+
+export const buttonDisabledClassName = "pointer-events-none cursor-auto opacity-40";
+
 export const buttonIconClassName =
   "relative z-10 flex size-4 min-w-0 shrink-0 items-center justify-center [direction:ltr]";
 

package/src/components/button/type.ts

@@ -5,6 +5,7 @@ export type ButtonIconLabelSide = "start" | "end";
 
 export type ButtonOwnProps = {
   clickable?: boolean;
+  disabled?: boolean;
   active?: boolean;
   open?: boolean;
   onClick?: MouseEventHandler<HTMLElement>;

package/src/components/header/style.ts

@@ -1,4 +1,4 @@
-export const headerBaseClassName = "flex w-full items-center gap-3 px-5 py-4 shadow-sm";
+export const headerBaseClassName = "flex w-full items-center gap-3 px-5 py-4";
 
 export const headerLeadingClassName = "flex shrink-0 items-center gap-2";
 

package/src/components/item/item.tsx

@@ -6,8 +6,10 @@ import { cn } from "../../utils/cn/cn.js";
 import {
   itemActiveClassName,
   itemBaseClassName,
+  itemDisabledClassName,
   itemIconClassName,
   itemLabelClassName,
+  itemNotClickableClassName,
   itemSurfaceClassName,
 } from "./style.js";
 
@@ -15,7 +17,9 @@ import type { ElementType, MouseEvent } from "react";
 import { Ripple } from "../../hoc/ripple/ripple.js";
 import type { ItemIconProps, ItemLabelProps, ItemProps } from "./type.js";
 
-export const Item = <T extends ElementType = "div">({
+export const Item = <T extends ElementType = "button">({
+  clickable = true,
+  disabled = false,
   active = false,
   onClickBlur,
   onClick,
@@ -24,6 +28,7 @@ export const Item = <T extends ElementType = "div">({
   ...rest
 }: ItemProps<T>) => {
   const handleClick = (event: MouseEvent<HTMLElement>) => {
+    if (disabled) return;
     onClick?.(event);
     if (typeof onClickBlur === "function") {
       const target = event.currentTarget;
@@ -33,12 +38,21 @@ export const Item = <T extends ElementType = "div">({
   };
 
   return (
-    <Ripple>
+    <Ripple disabled={disabled || !clickable}>
       <Tag
-        {...Tag.forward<T>(rest)}
+        {...Tag.forward<T>(rest, "button")}
         data-margo-active={active}
+        data-margo-disabled={disabled}
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled || !clickable ? -1 : undefined}
         onClick={handleClick}
-        className={cn(itemBaseClassName, active ? itemActiveClassName : itemSurfaceClassName, className)}
+        className={cn(
+          itemBaseClassName,
+          active ? itemActiveClassName : itemSurfaceClassName,
+          !clickable && itemNotClickableClassName,
+          disabled && itemDisabledClassName,
+          className,
+        )}
       >
         {children}
       </Tag>

package/src/components/item/style.ts

@@ -1,5 +1,5 @@
-export const itemBaseClassName = `group/item flex w-full 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
+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`;
 
 export const itemSurfaceClassName = `border-transparent text-medium hover:border-border hover:text-on-main
@@ -7,6 +7,10 @@ hover:shadow-item focus-visible:shadow-item`;
 
 export const itemActiveClassName = "margo-border-gradient-primary text-on-main shadow-item";
 
+export const itemNotClickableClassName = "pointer-events-none cursor-auto";
+
+export const itemDisabledClassName = "pointer-events-none cursor-auto opacity-40";
+
 export const itemIconClassName = `ml-auto flex size-4 shrink-0 items-center justify-center first:ml-0
 [[data-margo-item-slot]+&]:ml-0`;
 

package/src/components/item/type.ts

@@ -2,12 +2,14 @@ import type { TagProps } from "react-renderable";
 import type { ElementType, MouseEventHandler, ReactNode } from "react";
 
 export type ItemOwnProps = {
+  clickable?: boolean;
+  disabled?: boolean;
   active?: boolean;
   onClick?: MouseEventHandler<HTMLElement>;
   onClickBlur?: MouseEventHandler<HTMLElement>;
 };
 
-export type ItemProps<T extends ElementType = "div"> = TagProps<T, ItemOwnProps>;
+export type ItemProps<T extends ElementType = "button"> = TagProps<T, ItemOwnProps>;
 
 export type ItemIconProps = {
   icon?: ReactNode;

package/src/components/layer/layer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { cn } from "../../utils/cn/cn.js";
 import { layerBaseClassName } from "./style.js";
@@ -10,13 +10,38 @@ import "./layer.css";
 
 export const Layer = ({ open = false, onClose, dismissible = true, className, children, ...rest }: LayerProps) => {
   const layerRef = useRef<HTMLDialogElement>(null);
+  const childrenRef = useRef(children);
+
+  const [isMounted, setIsMounted] = useState(open);
+
+  if (open) childrenRef.current = children;
+  if (open && !isMounted) setIsMounted(true);
 
   useEffect(() => {
     const layer = layerRef.current;
 
     if (!layer) return;
     if (open && !layer.open) layer.showModal();
-    if (!open && layer.open) layer.close();
+    if (open || !layer.open) return;
+
+    layer.close();
+
+    const controller = new AbortController();
+
+    const frame = requestAnimationFrame(() => {
+      const animations = layer.getAnimations({ subtree: true }).map((animation) => animation.finished);
+
+      void Promise.allSettled(animations).then(() => {
+        if (controller.signal.aborted) return;
+
+        setIsMounted(false);
+      });
+    });
+
+    return () => {
+      controller.abort();
+      cancelAnimationFrame(frame);
+    };
   }, [open]);
 
   const handleClick = (event: MouseEvent<HTMLDialogElement>) => {
@@ -38,7 +63,7 @@ export const Layer = ({ open = false, onClose, dismissible = true, className, ch
       onClick={handleClick}
       className={cn(layerBaseClassName, className)}
     >
-      {children}
+      {isMounted ? childrenRef.current : null}
     </dialog>
   );
 };

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/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/hoc/ripple/ripple.tsx

@@ -10,11 +10,11 @@ import type { RippleProps } from "./type.js";
 
 import "./ripple.css";
 
-export const Ripple = ({ children, rippleClassName = "bg-primary-darken" }: RippleProps) => {
+export const Ripple = ({ children, disabled = false, rippleClassName = "bg-primary-darken" }: RippleProps) => {
   const { endRipple, ripple, startRipple } = useRipple();
 
   const handlePointerDown = (event: PointerEvent<HTMLElement>) => {
-    startRipple(event);
+    if (!disabled) startRipple(event);
     children.props.onPointerDown?.(event);
   };
 

package/src/hoc/ripple/type.ts

@@ -8,6 +8,7 @@ export type RippleChildProps = {
 
 export type RippleProps = {
   children: ReactElement<RippleChildProps>;
+  disabled?: boolean;
   rippleClassName?: string;
 };
 

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";