@bug-on/md3-react 2.0.3 → 3.0.0

package/src/ui/divider.tsx

@@ -0,0 +1,412 @@
+/**
+ * @file divider.tsx
+ *
+ * MD3 Expressive Divider component.
+ *
+ * - `Divider` → A thin line that groups content in lists and layouts.
+ *
+ * @remarks
+ * Token references (Kotlin source — DividerTokens.kt v0_117):
+ *   Color     = ColorSchemeKeyTokens.OutlineVariant → bg-m3-outline-variant / text-m3-outline-variant
+ *   Thickness = 1.0.dp → h-px (flat horizontal) | w-px (flat vertical) | strokeWidth={1} (wavy SVG)
+ *
+ * Variants:
+ *   - "full-bleed"    → spans full width, no indent
+ *   - "inset"         → leading indent (16dp standard / 72dp after-icon via insetStart)
+ *   - "middle-inset"  → 16dp indent both sides
+ *   - "subheader"     → same as full-bleed (label provided externally)
+ *
+ * Shapes:
+ *   - "flat"  → straight 1px line rendered as <m.div> (default)
+ *   - "wavy"  → sinusoidal SVG wave via <m.svg> + buildWavePath helper (horizontal only)
+ *
+ * Architecture:
+ *   - Styling: `cn` (clsx/tailwind-merge) + static Tailwind classes only
+ *   - Animation: Framer Motion LazyMotion/domMax, scaleX/scaleY spring entrance
+ *   - Wavy: SVG path generated by pure-JS `buildWavePath()` (cubic Bézier sine approx)
+ *           Uses ResizeObserver (via useContainerWidth) to measure container width so
+ *           the path has precise bounds and leading/trailing ends are properly rounded.
+ *   - A11y: role="separator", aria-orientation, aria-hidden when decorative
+ *
+ * @see https://m3.material.io/components/divider/overview
+ */
+
+import { domMax, LazyMotion, m, useReducedMotion } from "motion/react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { useContainerWidth, useMergedRef } from "./progress-indicator/hooks";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Exclude onDrag-family event handlers that conflict between React's HTMLAttributes
+// and Framer Motion's MotionProps (different DragEvent signatures).
+type SafeHTMLDivAttrs = Omit<
+	React.HTMLAttributes<HTMLDivElement>,
+	| "onDrag"
+	| "onDragStart"
+	| "onDragEnd"
+	| "onDragEnter"
+	| "onDragLeave"
+	| "onDragOver"
+	| "onDrop"
+>;
+
+export interface DividerProps extends SafeHTMLDivAttrs {
+	/**
+	 * Visual variant controlling indentation.
+	 * - "full-bleed"   → no indent, spans full container width/height (default)
+	 * - "inset"        → leading indent only (use `insetStart` to control amount)
+	 * - "middle-inset" → 16px indent on both sides
+	 * - "subheader"    → alias for full-bleed, used before section labels
+	 * @default "full-bleed"
+	 */
+	variant?: "full-bleed" | "inset" | "middle-inset" | "subheader";
+
+	/**
+	 * Orientation of the divider line.
+	 * - "horizontal" → renders as `h-px w-full` bar (default)
+	 * - "vertical"   → renders as `w-px h-full` column
+	 * Note: `shape="wavy"` is not supported with orientation="vertical".
+	 * @default "horizontal"
+	 */
+	orientation?: "horizontal" | "vertical";
+
+	/**
+	 * Shape of the divider line.
+	 * - "flat"  → straight 1px line rendered as `<div>` (default)
+	 * - "wavy"  → sinusoidal SVG wave (horizontal orientation only)
+	 *
+	 * When `shape="wavy"` and `orientation="vertical"`, silently falls back to
+	 * `shape="flat"` and emits a `console.warn`.
+	 * @default "flat"
+	 */
+	shape?: "flat" | "wavy";
+
+	/**
+	 * Leading inset size for the "inset" variant.
+	 * - "standard" → 16px (`ml-4`)
+	 * - "icon"     → 72px (`ml-[72px]`) — use when list items have leading icons/avatars
+	 * Only applies when `variant="inset"`.
+	 * @default "standard"
+	 */
+	insetStart?: "standard" | "icon";
+
+	/**
+	 * Wavy shape visual parameters. Only applies when `shape="wavy"`.
+	 * All values are in pixels.
+	 */
+	waveConfig?: {
+		/**
+		 * Peak displacement from the center line.
+		 * @default 2
+		 */
+		amplitude?: number;
+		/**
+		 * Pixels per full sine cycle.
+		 * @default 32
+		 */
+		wavelength?: number;
+		/**
+		 * Thickness of the wave stroke in pixels.
+		 * @default 1
+		 */
+		strokeWidth?: number;
+	};
+
+	/**
+	 * When true, marks the divider as decorative (`aria-hidden="true"`).
+	 * Use when the divider is purely visual with no semantic meaning.
+	 * @default false
+	 */
+	decorative?: boolean;
+
+	/**
+	 * When true, plays an entrance animation (scaleX/scaleY from 0→1).
+	 * Automatically disabled when user prefers reduced motion.
+	 * @default true
+	 */
+	animate?: boolean;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Generates an SVG path `d` string for a sinusoidal wave between two X bounds.
+ * Uses cubic Bézier approximation of a sine curve for smooth rendering.
+ * The error vs. a true sine is < 0.2%.
+ *
+ * Each half-cycle alternates between crest (+amplitude) and trough (-amplitude).
+ * Control points are placed at 1/3 and 2/3 of each half-cycle for accuracy.
+ *
+ * @param startX     - X coordinate where the path begins (e.g. capWidth = strokeWidth/2)
+ * @param endX       - X coordinate where the path ends (e.g. containerWidth - capWidth)
+ * @param amplitude  - Peak displacement from center line (px). Default: 2
+ * @param wavelength - Pixels per full sine cycle. Default: 32
+ * @param yCenter    - Y coordinate of the wave center line. Default: 4
+ * @returns SVG path `d` attribute string, or "" when startX >= endX
+ *
+ * @example
+ * buildWavePath(0.5, 499.5, 2, 32, 4)
+ * // → "M 0.5,4 C 11.17,... 500,4 ..."
+ */
+export function buildWavePath(
+	startX: number,
+	endX: number,
+	amplitude = 2,
+	wavelength = 32,
+	yCenter = 4,
+): string {
+	if (startX >= endX) return "";
+
+	const halfCycle = wavelength / 2;
+	const numHalfCycles = Math.ceil((endX - startX) / halfCycle);
+
+	// MD3 precise bezier approximation: offset multiplier (4/3) lets control points
+	// visually reach exactly the given amplitude.
+	const cpDistanceY = amplitude * (4 / 3);
+
+	let d = `M ${startX},${yCenter}`;
+
+	for (let i = 0; i < numHalfCycles; i++) {
+		const x0 = startX + i * halfCycle;
+		const x1 = Math.min(startX + (i + 1) * halfCycle, endX);
+		// Alternate crest and trough
+		const peak = i % 2 === 0 ? yCenter - cpDistanceY : yCenter + cpDistanceY;
+		// 1/3 and 2/3 ratio for smoother sine approximation (Google MD3 style)
+		const segLen = x1 - x0;
+		const cp1x = x0 + segLen / 3;
+		const cp2x = x1 - segLen / 3;
+		d += ` C ${cp1x},${peak} ${cp2x},${peak} ${x1},${yCenter}`;
+	}
+
+	return d;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Internal implementation
+// ─────────────────────────────────────────────────────────────────────────────
+
+const DividerImpl = React.forwardRef<HTMLDivElement, DividerProps>(
+	(
+		{
+			variant = "full-bleed",
+			orientation = "horizontal",
+			shape = "flat",
+			insetStart = "standard",
+			waveConfig,
+			decorative = false,
+			animate = true,
+			className,
+			style,
+			...props
+		},
+		ref,
+	) => {
+		const reducedMotion = useReducedMotion();
+		const shouldAnimate = animate && !reducedMotion;
+
+		// Wavy is only supported for horizontal orientation
+		const effectiveShape =
+			shape === "wavy" && orientation === "vertical" ? "flat" : shape;
+
+		if (shape === "wavy" && orientation === "vertical") {
+			console.warn(
+				"[Divider] shape='wavy' is not supported with orientation='vertical'. Falling back to shape='flat'.",
+			);
+		}
+
+		// Container width measurement — needed for direct SVG path rendering so
+		// leading/trailing ends land at exact bounds (enabling rounded caps).
+		const [containerRef, containerWidth] = useContainerWidth();
+
+		// ── A11y attrs ──────────────────────────────────────────────────────────
+		const a11yProps = decorative
+			? { "aria-hidden": "true" as const }
+			: {
+					role: "separator" as const,
+					"aria-orientation": orientation,
+				};
+
+		// ── Ref Merging ────────────────────────────────────────────────────────
+		// We need to merge the internal containerRef (for ResizeObserver) with
+		// the user-provided external ref.
+		const mergedRef = useMergedRef(containerRef, ref);
+
+		// ── Inset class mapping (all static) ────────────────────────────────────
+		const isHorizontal = orientation === "horizontal";
+		const insetClass = cn(
+			variant === "inset" &&
+				isHorizontal &&
+				insetStart === "standard" &&
+				"ml-4",
+			variant === "inset" &&
+				isHorizontal &&
+				insetStart === "icon" &&
+				"ml-[72px]",
+			variant === "inset" && !isHorizontal && "mt-4",
+			variant === "middle-inset" && isHorizontal && "mx-4",
+			variant === "middle-inset" && !isHorizontal && "my-4",
+		);
+
+		// ── Spring transition ────────────────────────────────────────────────────
+		const springTransition = shouldAnimate
+			? ({ type: "spring", stiffness: 300, damping: 30, mass: 0.6 } as const)
+			: ({ duration: 0 } as const);
+
+		// ── Wavy amplitude / wavelength / thickness ───────────────────────────
+		const amplitude = waveConfig?.amplitude ?? 2;
+		const wavelength = waveConfig?.wavelength ?? 32;
+		const strokeWidth = waveConfig?.strokeWidth ?? 1;
+
+		// ────────────────────────────────────────────────────────────────────────
+		// RENDER: Wavy
+		// ────────────────────────────────────────────────────────────────────────
+		if (effectiveShape === "wavy") {
+			// Canvas explicitly accommodates the curve's exact bounding box.
+			const canvasHeight = Math.ceil(amplitude * 2 + strokeWidth);
+			const yCenter = canvasHeight / 2;
+
+			// Half stroke-width inset so rounded caps are not clipped by the SVG edge.
+			const capWidth = strokeWidth / 2;
+			const pathStartX = capWidth;
+			const pathEndX = Math.max(capWidth, containerWidth - capWidth);
+
+			return (
+				<div
+					ref={mergedRef}
+					className={cn(
+						"block shrink-0 overflow-hidden",
+						isHorizontal ? "w-full" : "h-full self-stretch",
+						insetClass,
+						className,
+					)}
+					style={{ height: `${canvasHeight}px`, ...style }}
+					{...a11yProps}
+					// biome-ignore lint/suspicious/noExplicitAny: spread safe HTMLDiv attrs
+					{...(props as any)}
+				>
+					<LazyMotion features={domMax} strict>
+						<m.svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="100%"
+							height="100%"
+							className="text-m3-outline-variant block"
+							aria-hidden="true"
+							style={{ overflow: "visible", transformOrigin: "left center" }}
+							initial={shouldAnimate ? { scaleX: 0, opacity: 0 } : undefined}
+							animate={shouldAnimate ? { scaleX: 1, opacity: 1 } : undefined}
+							transition={springTransition}
+						>
+							{containerWidth > 0 && (
+								<path
+									d={buildWavePath(
+										pathStartX,
+										pathEndX,
+										amplitude,
+										wavelength,
+										yCenter,
+									)}
+									fill="none"
+									stroke="currentColor"
+									strokeWidth={strokeWidth}
+									strokeLinecap="round"
+								/>
+							)}
+						</m.svg>
+					</LazyMotion>
+				</div>
+			);
+		}
+
+		// ────────────────────────────────────────────────────────────────────────
+		// RENDER: Flat
+		// ────────────────────────────────────────────────────────────────────────
+		return (
+			<LazyMotion features={domMax} strict>
+				<m.div
+					ref={mergedRef}
+					className={cn(
+						"block shrink-0 bg-m3-outline-variant",
+						isHorizontal ? "h-px w-full" : "w-px h-full self-stretch",
+						insetClass,
+						className,
+					)}
+					style={{
+						...(isHorizontal
+							? { transformOrigin: "left" }
+							: { transformOrigin: "top" }),
+						...style,
+					}}
+					initial={
+						shouldAnimate
+							? isHorizontal
+								? { scaleX: 0 }
+								: { scaleY: 0 }
+							: undefined
+					}
+					animate={
+						shouldAnimate
+							? isHorizontal
+								? { scaleX: 1 }
+								: { scaleY: 1 }
+							: undefined
+					}
+					transition={springTransition}
+					{...a11yProps}
+					// biome-ignore lint/suspicious/noExplicitAny: spread safe HTMLDiv attrs
+					{...(props as any)}
+				/>
+			</LazyMotion>
+		);
+	},
+);
+
+DividerImpl.displayName = "Divider";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Public export
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * MD3 Expressive Divider — a thin line that groups content in lists and layouts.
+ *
+ * Supports four layout variants (full-bleed, inset, middle-inset, subheader),
+ * two orientations (horizontal, vertical), and two shape modes (flat, wavy).
+ *
+ * The wavy shape renders a sinusoidal SVG wave and is only supported with
+ * `orientation="horizontal"`.
+ *
+ * @example
+ * ```tsx
+ * // Default flat full-bleed horizontal divider
+ * <Divider />
+ *
+ * // Inset after icon list items
+ * <Divider variant="inset" insetStart="icon" />
+ *
+ * // Vertical separator between panes
+ * <Divider orientation="vertical" />
+ *
+ * // Wavy expressive divider
+ * <Divider shape="wavy" />
+ *
+ * // Wavy with custom wave config
+ * <Divider shape="wavy" waveConfig={{ amplitude: 5, wavelength: 24 }} />
+ *
+ * // Decorative (no a11y semantics)
+ * <Divider decorative />
+ *
+ * // No entrance animation
+ * <Divider animate={false} />
+ *
+ * // Middle-inset wavy divider
+ * <Divider variant="middle-inset" shape="wavy" />
+ * ```
+ *
+ * @see https://m3.material.io/components/divider/overview
+ */
+export const Divider = React.memo(DividerImpl);

package/src/ui/drawer.tsx

@@ -0,0 +1,240 @@
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { AnimatePresence, m } from "motion/react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Icon } from "./icon";
+
+// ─── MD3 Expressive Drawer Animation ─────────────────────────────────────────
+// Slide từ dưới lên, spring physics giống Google Material's "Emphasized" easing
+const MD3_DRAWER_SPRING = {
+	type: "spring" as const,
+	stiffness: 350,
+	damping: 35,
+	mass: 0.9,
+};
+
+const MD3_DRAWER_ANIM = {
+	initial: { y: "100%", opacity: 0.6 },
+	animate: {
+		y: 0,
+		opacity: 1,
+		transition: MD3_DRAWER_SPRING,
+	},
+	exit: {
+		y: "100%",
+		opacity: 0,
+		transition: { duration: 0.22, ease: "easeIn" as const },
+	},
+};
+
+const MD3_SCRIM_ANIM = {
+	initial: { opacity: 0 },
+	animate: {
+		opacity: 1,
+		transition: { duration: 0.2, ease: "easeOut" as const },
+	},
+	exit: { opacity: 0, transition: { duration: 0.18, ease: "easeIn" as const } },
+};
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+export interface DrawerProps {
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	children: React.ReactNode;
+}
+
+export interface DrawerContentProps
+	extends Omit<
+		React.ComponentPropsWithoutRef<typeof RadixDialog.Content>,
+		"asChild"
+	> {
+	/** Chiều cao tối đa (vh). Mặc định 90vh */
+	maxHeight?: string;
+	/** Ẩn drag handle */
+	hideHandle?: boolean;
+	/** Ẩn nút đóng */
+	hideCloseButton?: boolean;
+	className?: string;
+}
+
+// ─── Root ─────────────────────────────────────────────────────────────────────
+const Drawer = ({ open, onOpenChange, children }: DrawerProps) => (
+	<RadixDialog.Root open={open} onOpenChange={onOpenChange}>
+		{children}
+	</RadixDialog.Root>
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = RadixDialog.Trigger;
+DrawerTrigger.displayName = "DrawerTrigger";
+
+const DrawerClose = RadixDialog.Close;
+
+// ─── Portal wrapper với AnimatePresence ───────────────────────────────────────
+const DrawerPortal = ({
+	open,
+	children,
+}: {
+	open?: boolean;
+	children: React.ReactNode;
+}) => (
+	<RadixDialog.Portal forceMount>
+		<AnimatePresence mode="wait">{open && children}</AnimatePresence>
+	</RadixDialog.Portal>
+);
+
+// ─── Scrim overlay ────────────────────────────────────────────────────────────
+const DrawerOverlay = React.forwardRef<
+	React.ComponentRef<typeof RadixDialog.Overlay>,
+	React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay>
+>(({ className, ...props }, ref) => (
+	<RadixDialog.Overlay ref={ref} asChild {...props}>
+		<m.div
+			aria-hidden="true"
+			className={cn("fixed inset-0 z-50 bg-black/40", className)}
+			{...MD3_SCRIM_ANIM}
+		/>
+	</RadixDialog.Overlay>
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+
+// ─── Content ─────────────────────────────────────────────────────────────────
+const DrawerContent = React.forwardRef<
+	React.ComponentRef<typeof RadixDialog.Content>,
+	DrawerContentProps
+>(
+	(
+		{
+			className,
+			children,
+			maxHeight = "90vh",
+			hideHandle = false,
+			hideCloseButton = false,
+			style,
+			...props
+		},
+		ref,
+	) => (
+		<RadixDialog.Content ref={ref} asChild {...props}>
+			<m.div
+				className={cn(
+					// MD3 Bottom Sheet shape: chỉ bo góc trên
+					"fixed bottom-0 left-0 right-0 z-50",
+					"rounded-t-[28px] bg-m3-surface-container-low",
+					"flex flex-col overflow-hidden",
+					"outline-none",
+					// focus-visible ring — a11y
+					"focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-inset",
+					className,
+				)}
+				style={{ maxHeight, ...style }}
+				{...MD3_DRAWER_ANIM}
+			>
+				{/* Drag handle — decorative hint */}
+				{!hideHandle && (
+					<div
+						aria-hidden="true"
+						className="mx-auto mt-3 h-1 w-9 rounded-full bg-m3-on-surface-variant/40 shrink-0"
+					/>
+				)}
+
+				{/* Close button */}
+				{!hideCloseButton && (
+					<RadixDialog.Close
+						className={cn(
+							"absolute right-4 top-3 rounded-full p-2",
+							"text-m3-on-surface-variant",
+							"hover:bg-m3-on-surface/8",
+							"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
+							"transition-colors duration-200",
+						)}
+						aria-label="Đóng bảng điều khiển"
+					>
+						<Icon name="close" size={20} aria-hidden="true" />
+					</RadixDialog.Close>
+				)}
+
+				{/* Scrollable content area */}
+				<div className="flex-1 overflow-y-auto overscroll-contain p-6">
+					{children}
+				</div>
+			</m.div>
+		</RadixDialog.Content>
+	),
+);
+DrawerContent.displayName = "DrawerContent";
+
+// ─── Sub-components ───────────────────────────────────────────────────────────
+const DrawerHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("flex flex-col gap-1 mb-4", className)} {...props} />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("flex flex-col gap-2 mt-4", className)} {...props} />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+	React.ComponentRef<typeof RadixDialog.Title>,
+	React.ComponentPropsWithoutRef<typeof RadixDialog.Title>
+>(({ className, ...props }, ref) => (
+	<RadixDialog.Title
+		ref={ref}
+		className={cn(
+			"text-[22px] leading-7 font-medium text-m3-on-surface",
+			className,
+		)}
+		{...props}
+	/>
+));
+DrawerTitle.displayName = "DrawerTitle";
+
+const DrawerDescription = React.forwardRef<
+	React.ComponentRef<typeof RadixDialog.Description>,
+	React.ComponentPropsWithoutRef<typeof RadixDialog.Description>
+>(({ className, ...props }, ref) => (
+	<RadixDialog.Description
+		ref={ref}
+		className={cn("text-sm text-m3-on-surface-variant leading-5", className)}
+		{...props}
+	/>
+));
+DrawerDescription.displayName = "DrawerDescription";
+
+export {
+	Drawer,
+	DrawerClose,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerOverlay,
+	DrawerPortal,
+	DrawerTitle,
+	DrawerTrigger,
+};
+
+// ─── Usage:
+//   <Drawer open={open} onOpenChange={setOpen}>
+//     <DrawerTrigger asChild><Button>Mở Drawer</Button></DrawerTrigger>
+//     <DrawerPortal open={open}>
+//       <DrawerOverlay />
+//       <DrawerContent maxHeight="80vh">
+//         <DrawerHeader>
+//           <DrawerTitle>Chi tiết đơn hàng</DrawerTitle>
+//           <DrawerDescription>Xem thông tin đơn hàng #1234</DrawerDescription>
+//         </DrawerHeader>
+//         <p>Nội dung drawer...</p>
+//         <DrawerFooter>
+//           <Button colorStyle="filled" className="w-full">Xác nhận</Button>
+//         </DrawerFooter>
+//       </DrawerContent>
+//     </DrawerPortal>
+//   </Drawer>