margo-ui 1.3.1 → 1.3.3

package/README.md

@@ -2,6 +2,8 @@
 
 A small React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.
 
+Package: [npmjs.com/package/margo-ui](https://www.npmjs.com/package/margo-ui)
+
 Documentation: [dev.robertoattanasio.com/margo-ui](https://dev.robertoattanasio.com/margo-ui)
 
 ## Install

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "A small React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.",
   "keywords": [
     "react",
@@ -15,11 +15,10 @@
   "homepage": "https://dev.robertoattanasio.com/margo-ui",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/robertoattanasio/dev.robertoattanasio.com.git",
-    "directory": "lib/margo-ui"
+    "url": "git+https://github.com/robertoattanasio/margo-ui.git"
   },
   "bugs": {
-    "url": "https://github.com/robertoattanasio/dev.robertoattanasio.com/issues"
+    "url": "https://github.com/robertoattanasio/margo-ui/issues"
   },
   "type": "module",
   "main": "./src/index.ts",

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/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;
 };