@patterninc/pattern-ui 0.0.0-main.20260929.db2f8e8fde0d

package/dist/components/icons-animated/PanelAnimatedButton/PanelAnimatedButton.js

@@ -0,0 +1,182 @@
+import { getIconColor } from "../../../lib/utils/icon-helpers.js";
+import { Button } from "../../Button/Button.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext } from "react";
+import { cn } from "cn";
+import { motion } from "motion/react";
+
+//#region src/components/icons-animated/PanelAnimatedButton/PanelAnimatedButton.tsx
+const slideTransition = {
+	type: "spring",
+	stiffness: 650,
+	damping: 35,
+	mass: .9,
+	bounce: 0
+};
+const BAR_WIDTH_OPEN = "6px";
+const BAR_WIDTH_CLOSED = "1.5px";
+const BAR_RADIUS_OPEN = "2px";
+const BAR_RADIUS_CLOSED = "1px";
+const PanelIconContext = createContext(false);
+function PanelIconComponent(t0) {
+	const $ = c(15);
+	const { color: t1 } = t0;
+	const color = t1 === void 0 ? "icon-sub" : t1;
+	const isOpen = useContext(PanelIconContext);
+	let t2;
+	if ($[0] !== color) {
+		t2 = getIconColor(color);
+		$[0] = color;
+		$[1] = t2;
+	} else t2 = $[1];
+	const iconColor = t2;
+	let t3;
+	if ($[2] !== iconColor) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-[19.792%]",
+			"data-name": "Vector",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-[-5.172%]",
+				children: /* @__PURE__ */ jsx("svg", {
+					className: "block size-full",
+					fill: "none",
+					preserveAspectRatio: "none",
+					viewBox: "0 0 16 16",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M12.25 0.75H3.75C2.09315 0.75 0.75 2.09315 0.75 3.75V12.25C0.75 13.9069 2.09315 15.25 3.75 15.25H12.25C13.9069 15.25 15.25 13.9069 15.25 12.25V3.75C15.25 2.09315 13.9069 0.75 12.25 0.75Z",
+						id: "Vector",
+						stroke: iconColor,
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: "1.5"
+					})
+				})
+			})
+		});
+		$[2] = iconColor;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== iconColor) {
+		t4 = {
+			backgroundColor: iconColor,
+			transform: "translate3d(0, 0, 0)",
+			backfaceVisibility: "hidden",
+			willChange: "width, border-radius"
+		};
+		$[4] = iconColor;
+		$[5] = t4;
+	} else t4 = $[5];
+	const t5 = isOpen ? BAR_WIDTH_OPEN : BAR_WIDTH_CLOSED;
+	const t6 = isOpen ? BAR_RADIUS_OPEN : BAR_RADIUS_CLOSED;
+	let t7;
+	if ($[6] !== t5 || $[7] !== t6) {
+		t7 = {
+			width: t5,
+			borderRadius: t6
+		};
+		$[6] = t5;
+		$[7] = t6;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] !== t4 || $[10] !== t7) {
+		t8 = /* @__PURE__ */ jsx(motion.div, {
+			className: "absolute top-[7px] left-2 h-2.5",
+			"data-name": "Bar",
+			style: t4,
+			animate: t7,
+			transition: slideTransition
+		});
+		$[9] = t4;
+		$[10] = t7;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== t3 || $[13] !== t8) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: "relative flex size-5 shrink-0 items-center justify-center",
+			"data-name": "Panel Animated Button",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "relative size-6 shrink-0 overflow-clip",
+				"data-name": "Icon",
+				children: [t3, t8]
+			})
+		});
+		$[12] = t3;
+		$[13] = t8;
+		$[14] = t9;
+	} else t9 = $[14];
+	return t9;
+}
+function PanelAnimatedButton(t0) {
+	const $ = c(18);
+	const { isOpen, onClick, direction: t1, ariaLabel: t2, variant: t3, className } = t0;
+	const direction = t1 === void 0 ? "left" : t1;
+	const ariaLabel = t2 === void 0 ? "Toggle panel" : t2;
+	const variant = t3 === void 0 ? "inverse" : t3;
+	const t4 = direction === "right" && "rotate-180";
+	const t5 = direction === "bottom" && "-rotate-90";
+	let t6;
+	if ($[0] !== t4 || $[1] !== t5) {
+		t6 = cn("inline-block origin-center", t4, t5);
+		$[0] = t4;
+		$[1] = t5;
+		$[2] = t6;
+	} else t6 = $[2];
+	const t7 = variant === "inverse" && isOpen && "bg-depth-black-4";
+	let t8;
+	if ($[3] !== className || $[4] !== t7) {
+		t8 = cn("overflow-visible transition-colors", t7, className);
+		$[3] = className;
+		$[4] = t7;
+		$[5] = t8;
+	} else t8 = $[5];
+	let t9;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = { icon: PanelIconComponent };
+		$[6] = t9;
+	} else t9 = $[6];
+	let t10;
+	if ($[7] !== ariaLabel || $[8] !== onClick || $[9] !== t8 || $[10] !== variant) {
+		t10 = /* @__PURE__ */ jsx(Button, {
+			variant,
+			size: "large",
+			className: t8,
+			onClick,
+			"data-name": "Button — Panel Animated",
+			"aria-label": ariaLabel,
+			prefix: t9
+		});
+		$[7] = ariaLabel;
+		$[8] = onClick;
+		$[9] = t8;
+		$[10] = variant;
+		$[11] = t10;
+	} else t10 = $[11];
+	let t11;
+	if ($[12] !== t10 || $[13] !== t6) {
+		t11 = /* @__PURE__ */ jsx("div", {
+			className: t6,
+			children: t10
+		});
+		$[12] = t10;
+		$[13] = t6;
+		$[14] = t11;
+	} else t11 = $[14];
+	let t12;
+	if ($[15] !== isOpen || $[16] !== t11) {
+		t12 = /* @__PURE__ */ jsx(PanelIconContext.Provider, {
+			value: isOpen,
+			children: t11
+		});
+		$[15] = isOpen;
+		$[16] = t11;
+		$[17] = t12;
+	} else t12 = $[17];
+	return t12;
+}
+
+//#endregion
+export { PanelAnimatedButton };

package/dist/components/json-render/Container.js

@@ -0,0 +1,64 @@
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "cn";
+
+//#region src/components/json-render/Container.tsx
+/**
+* Container Component
+*
+* A layout component that provides page-level width constraints with centered content. Used for
+* constraining content width and maintaining consistent spacing.
+*
+* @example
+*   ;```tsx
+*   ;<Container size='lg' padding>
+*     <h1>Page Content</h1>
+*   </Container>
+*   ```
+*/
+function Container(t0) {
+	const $ = c(10);
+	const { size: t1, padding: t2, className, children, qaTestId: t3 } = t0;
+	const size = t1 === void 0 ? "lg" : t1;
+	const padding = t2 === void 0 ? true : t2;
+	const qaTestId = t3 === void 0 ? "container" : t3;
+	let t4;
+	let t5;
+	if ($[0] !== className || $[1] !== padding || $[2] !== qaTestId || $[3] !== size) {
+		const sizeClasses = {
+			sm: "max-w-screen-sm",
+			md: "max-w-screen-md",
+			lg: "max-w-screen-lg",
+			xl: "max-w-screen-xl",
+			full: "max-w-full"
+		};
+		t4 = qaTestId;
+		t5 = cn("mx-auto w-full", sizeClasses[size], padding && "px-4 py-6", className);
+		$[0] = className;
+		$[1] = padding;
+		$[2] = qaTestId;
+		$[3] = size;
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t4 = $[4];
+		t5 = $[5];
+	}
+	let t6;
+	if ($[6] !== children || $[7] !== t4 || $[8] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			"qa-test-id": t4,
+			className: t5,
+			children
+		});
+		$[6] = children;
+		$[7] = t4;
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	return t6;
+}
+
+//#endregion
+export { Container };

package/dist/components/json-render/Grid.js

@@ -0,0 +1,75 @@
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "cn";
+
+//#region src/components/json-render/Grid.tsx
+/**
+* Grid Component
+*
+* A CSS Grid-based layout component for multi-column layouts. Supports responsive behavior with
+* mobile-first approach.
+*
+* @example
+*   ;```tsx
+*   ;<Grid columns={3} gap='md'>
+*     <div>Item 1</div>
+*     <div>Item 2</div>
+*     <div>Item 3</div>
+*   </Grid>
+*   ```
+*/
+function Grid(t0) {
+	const $ = c(10);
+	const { columns: t1, gap: t2, className, children, qaTestId: t3 } = t0;
+	const columns = t1 === void 0 ? 1 : t1;
+	const gap = t2 === void 0 ? "md" : t2;
+	const qaTestId = t3 === void 0 ? "grid" : t3;
+	let t4;
+	let t5;
+	if ($[0] !== className || $[1] !== columns || $[2] !== gap || $[3] !== qaTestId) {
+		const gapClasses = {
+			none: "gap-0",
+			xs: "gap-2",
+			sm: "gap-3",
+			md: "gap-4",
+			lg: "gap-6",
+			xl: "gap-8"
+		};
+		const columnClasses = {
+			1: "grid-cols-1",
+			2: "grid-cols-[repeat(auto-fit,minmax(min(220px,100%),1fr))]",
+			3: "grid-cols-[repeat(auto-fit,minmax(min(220px,100%),1fr))]",
+			4: "grid-cols-[repeat(auto-fit,minmax(min(220px,100%),1fr))]",
+			6: "grid-cols-[repeat(auto-fit,minmax(min(220px,100%),1fr))]",
+			12: "grid-cols-[repeat(auto-fit,minmax(min(220px,100%),1fr))]"
+		};
+		t4 = qaTestId;
+		t5 = cn("grid", columnClasses[columns], gapClasses[gap], className);
+		$[0] = className;
+		$[1] = columns;
+		$[2] = gap;
+		$[3] = qaTestId;
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t4 = $[4];
+		t5 = $[5];
+	}
+	let t6;
+	if ($[6] !== children || $[7] !== t4 || $[8] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			"qa-test-id": t4,
+			className: t5,
+			children
+		});
+		$[6] = children;
+		$[7] = t4;
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	return t6;
+}
+
+//#endregion
+export { Grid };

package/dist/components/json-render/Stack.js

@@ -0,0 +1,84 @@
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "cn";
+
+//#region src/components/json-render/Stack.tsx
+/**
+* Stack Component
+*
+* A flexbox-based layout component for one-dimensional layouts. Handles both vertical and
+* horizontal stacking with flexible gap and alignment options.
+*
+* @example
+*   ;```tsx
+*   ;<Stack direction='horizontal' gap='md' align='center'>
+*     <Button>Action 1</Button>
+*     <Button>Action 2</Button>
+*   </Stack>
+*   ```
+*/
+function Stack(t0) {
+	const $ = c(12);
+	const { direction: t1, gap: t2, align: t3, justify: t4, className, children, qaTestId: t5 } = t0;
+	const direction = t1 === void 0 ? "vertical" : t1;
+	const gap = t2 === void 0 ? "md" : t2;
+	const align = t3 === void 0 ? "stretch" : t3;
+	const justify = t4 === void 0 ? "start" : t4;
+	const qaTestId = t5 === void 0 ? "stack" : t5;
+	let t6;
+	let t7;
+	if ($[0] !== align || $[1] !== className || $[2] !== direction || $[3] !== gap || $[4] !== justify || $[5] !== qaTestId) {
+		const gapClasses = {
+			none: "gap-0",
+			xs: "gap-2",
+			sm: "gap-3",
+			md: "gap-4",
+			lg: "gap-6",
+			xl: "gap-8"
+		};
+		const alignClasses = {
+			start: "items-start",
+			center: "items-center",
+			end: "items-end",
+			stretch: "items-stretch"
+		};
+		const justifyClasses = {
+			start: "justify-start",
+			center: "justify-center",
+			end: "justify-end",
+			between: "justify-between",
+			around: "justify-around"
+		};
+		const directionClasses = direction === "horizontal" ? "flex-row flex-wrap" : "flex-col";
+		t6 = qaTestId;
+		t7 = cn("flex", directionClasses, gapClasses[gap], alignClasses[align], justifyClasses[justify], className);
+		$[0] = align;
+		$[1] = className;
+		$[2] = direction;
+		$[3] = gap;
+		$[4] = justify;
+		$[5] = qaTestId;
+		$[6] = t6;
+		$[7] = t7;
+	} else {
+		t6 = $[6];
+		t7 = $[7];
+	}
+	let t8;
+	if ($[8] !== children || $[9] !== t6 || $[10] !== t7) {
+		t8 = /* @__PURE__ */ jsx("div", {
+			"qa-test-id": t6,
+			className: t7,
+			children
+		});
+		$[8] = children;
+		$[9] = t6;
+		$[10] = t7;
+		$[11] = t8;
+	} else t8 = $[11];
+	return t8;
+}
+
+//#endregion
+export { Stack };

package/dist/components/shared/AnimatedTransition.js

@@ -0,0 +1,93 @@
+import { actionAnimationVariants, actionEnterTransition, actionExitTransition } from "../../utils/transitions.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "cn";
+import { AnimatePresence, motion } from "motion/react";
+
+//#region src/components/shared/AnimatedTransition.tsx
+/**
+* AnimatedTransition - A reusable component for animating between two states (e.g., active buttons
+* → completed/dismissed state)
+*
+* Provides consistent animations: - Active state exits with fade + scale down - Completed state
+* enters with slide up + fade in
+*
+* @example
+*   ;```tsx
+*   ;<AnimatedTransition
+*     showCompleted={isDismissed}
+*     activeContent={<Button>Click me</Button>}
+*     completedContent={<Button disabled>Dismissed</Button>}
+*   />
+*   ```
+*/
+function AnimatedTransition(t0) {
+	const $ = c(18);
+	let activeContent;
+	let className;
+	let completedContent;
+	let props;
+	let showCompleted;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({showCompleted, activeContent, completedContent, className, activeKey: t1, completedKey: t2, qaTestId: t3, ...props} = t0);
+		$[0] = t0;
+		$[1] = activeContent;
+		$[2] = className;
+		$[3] = completedContent;
+		$[4] = props;
+		$[5] = showCompleted;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		activeContent = $[1];
+		className = $[2];
+		completedContent = $[3];
+		props = $[4];
+		showCompleted = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+	}
+	const activeKey = t1 === void 0 ? "active" : t1;
+	const completedKey = t2 === void 0 ? "completed" : t2;
+	const qaTestId = t3 === void 0 ? "animated-transition" : t3;
+	let t4;
+	if ($[9] !== activeContent || $[10] !== activeKey || $[11] !== className || $[12] !== completedContent || $[13] !== completedKey || $[14] !== props || $[15] !== qaTestId || $[16] !== showCompleted) {
+		t4 = /* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "wait",
+			children: showCompleted ? /* @__PURE__ */ jsx(motion.div, {
+				"qa-test-id": qaTestId,
+				...actionAnimationVariants.enterSlideUp,
+				transition: actionEnterTransition,
+				className: cn(className),
+				...props,
+				children: completedContent
+			}, completedKey) : /* @__PURE__ */ jsx(motion.div, {
+				"qa-test-id": qaTestId,
+				...actionAnimationVariants.exitFadeScale,
+				transition: actionExitTransition,
+				className: cn(className),
+				...props,
+				children: activeContent
+			}, activeKey)
+		});
+		$[9] = activeContent;
+		$[10] = activeKey;
+		$[11] = className;
+		$[12] = completedContent;
+		$[13] = completedKey;
+		$[14] = props;
+		$[15] = qaTestId;
+		$[16] = showCompleted;
+		$[17] = t4;
+	} else t4 = $[17];
+	return t4;
+}
+
+//#endregion
+export { AnimatedTransition };

package/dist/components/shared/ResizeHandle.js

@@ -0,0 +1,157 @@
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import React, { useRef, useState } from "react";
+import { cn } from "cn";
+import { motion } from "motion/react";
+
+//#region src/components/shared/ResizeHandle.tsx
+const KEYBOARD_STEP_PX = 10;
+/**
+* Floating seam handle between a sticky column and the scrollable area.
+*
+* Renders as a full-height hit zone centered on the seam line, with a small pill visible at the
+* vertical center. Hidden by default (`opacity-0`), revealed when the table is hovered
+* (`group-hover/table`) or the handle receives keyboard focus (`focus-visible`).
+*
+* Position the element by passing `style={{ left: seamPx }}` (left seam) or `style={{ right: seamPx
+* }}` (right seam) from the parent.
+*/
+function ResizeHandle(t0) {
+	const $ = c(37);
+	const { value, min, max, side, style, onDragMove, onDragEnd, onDragStateChange, onResize, qaTestId: t1 } = t0;
+	const qaTestId = t1 === void 0 ? "column-resize-handle" : t1;
+	const [isDragging, setIsDragging] = useState(false);
+	const startValueRef = useRef(value);
+	let t2;
+	if ($[0] !== max || $[1] !== min) {
+		t2 = (px) => Math.max(min, Math.min(max ?? Infinity, px));
+		$[0] = max;
+		$[1] = min;
+		$[2] = t2;
+	} else t2 = $[2];
+	const clamp = t2;
+	let t3;
+	if ($[3] !== max || $[4] !== min || $[5] !== onResize || $[6] !== value) {
+		t3 = (e) => {
+			const effectiveMax = max != null && isFinite(max) ? max : null;
+			let newValue = null;
+			bb20: switch (e.key) {
+				case "ArrowRight":
+					newValue = effectiveMax != null ? Math.min(effectiveMax, value + KEYBOARD_STEP_PX) : value + KEYBOARD_STEP_PX;
+					break bb20;
+				case "ArrowLeft":
+					newValue = Math.max(min, value - KEYBOARD_STEP_PX);
+					break bb20;
+				case "Home":
+					newValue = min;
+					break bb20;
+				case "End":
+					if (effectiveMax != null) newValue = effectiveMax;
+					break bb20;
+				default: return;
+			}
+			if (newValue !== null && newValue !== value) {
+				e.preventDefault();
+				onResize(newValue);
+			}
+		};
+		$[3] = max;
+		$[4] = min;
+		$[5] = onResize;
+		$[6] = value;
+		$[7] = t3;
+	} else t3 = $[7];
+	const handleKeyDown = t3;
+	let t4;
+	if ($[8] !== value) {
+		t4 = Math.round(value);
+		$[8] = value;
+		$[9] = t4;
+	} else t4 = $[9];
+	const t5 = max != null && isFinite(max) ? max : void 0;
+	const t6 = side === "left" ? "-translate-x-1/2" : "translate-x-1/2";
+	const t7 = isDragging && "opacity-100";
+	let t8;
+	if ($[10] !== t6 || $[11] !== t7) {
+		t8 = cn("absolute inset-y-0 z-30 w-4", t6, "flex cursor-col-resize items-center justify-center", "outline-none select-none", "opacity-0 transition-opacity duration-150", "group-hover/table:opacity-100 focus-visible:opacity-100", t7);
+		$[10] = t6;
+		$[11] = t7;
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== onDragStateChange || $[14] !== value) {
+		t9 = () => {
+			startValueRef.current = value;
+			setIsDragging(true);
+			onDragStateChange?.(true);
+		};
+		$[13] = onDragStateChange;
+		$[14] = value;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== clamp || $[17] !== onDragMove || $[18] !== side) {
+		t10 = (_, info) => {
+			const direction = side === "right" ? -1 : 1;
+			onDragMove(clamp(startValueRef.current + info.offset.x * direction));
+		};
+		$[16] = clamp;
+		$[17] = onDragMove;
+		$[18] = side;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== clamp || $[21] !== onDragEnd || $[22] !== onDragStateChange || $[23] !== side) {
+		t11 = (__0, info_0) => {
+			const direction_0 = side === "right" ? -1 : 1;
+			const finalValue = clamp(startValueRef.current + info_0.offset.x * direction_0);
+			setIsDragging(false);
+			onDragStateChange?.(false);
+			onDragEnd(finalValue);
+		};
+		$[20] = clamp;
+		$[21] = onDragEnd;
+		$[22] = onDragStateChange;
+		$[23] = side;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx("div", { className: "h-8 w-1.5 rounded-full bg-border-sub" });
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== handleKeyDown || $[27] !== min || $[28] !== qaTestId || $[29] !== style || $[30] !== t10 || $[31] !== t11 || $[32] !== t4 || $[33] !== t5 || $[34] !== t8 || $[35] !== t9) {
+		t13 = /* @__PURE__ */ jsx(motion.div, {
+			role: "separator",
+			"aria-orientation": "vertical",
+			"aria-valuenow": t4,
+			"aria-valuemin": min,
+			"aria-valuemax": t5,
+			tabIndex: 0,
+			"qa-test-id": qaTestId,
+			style,
+			className: t8,
+			onPanStart: t9,
+			onPan: t10,
+			onPanEnd: t11,
+			onKeyDown: handleKeyDown,
+			children: t12
+		});
+		$[26] = handleKeyDown;
+		$[27] = min;
+		$[28] = qaTestId;
+		$[29] = style;
+		$[30] = t10;
+		$[31] = t11;
+		$[32] = t4;
+		$[33] = t5;
+		$[34] = t8;
+		$[35] = t9;
+		$[36] = t13;
+	} else t13 = $[36];
+	return t13;
+}
+
+//#endregion
+export { ResizeHandle };