@jbpark/ui-kit 3.7.0 → 4.0.0

package/dist/components/organisms/toast.mjs

@@ -2,51 +2,14 @@
 
 import { cn } from "../../utils.mjs";
 import Button from "../../Button.mjs";
+import { createImperativeStack, isBrowser } from "./imperative-stack.mjs";
 import { Check, Info, OctagonAlert, OctagonX, X } from "lucide-react";
-import { useEffect, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useTimeout } from "@jbpark/use-hooks";
-import { v4 } from "uuid";
 import { createPortal } from "react-dom";
-import { createRoot } from "react-dom/client";
 
 //#region src/components/organisms/toast.tsx
-const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
-const containerStates = /* @__PURE__ */ new Map();
-const toastRootElements = /* @__PURE__ */ new WeakMap();
-const getContainerState = (container) => {
-	let state = containerStates.get(container);
-	if (!state) {
-		state = {
-			stack: [],
-			update: null
-		};
-		containerStates.set(container, state);
-	}
-	return state;
-};
-const createToastRoot = (container) => {
-	if (!isBrowser) return null;
-	const targetContainer = container || document.body;
-	let rootEl = toastRootElements.get(targetContainer);
-	if (!rootEl) {
-		rootEl = document.createElement("div");
-		rootEl.setAttribute("role", "region");
-		rootEl.setAttribute("aria-label", "Notifications");
-		rootEl.style.zIndex = "10000";
-		rootEl.style.position = "fixed";
-		rootEl.style.right = "0";
-		rootEl.style.bottom = "0";
-		rootEl.style.display = "flex";
-		rootEl.style.flexDirection = "column-reverse";
-		rootEl.style.gap = "8px";
-		rootEl.style.padding = "16px";
-		rootEl.style.pointerEvents = "none";
-		targetContainer.appendChild(rootEl);
-		toastRootElements.set(targetContainer, rootEl);
-	}
-	return rootEl;
-};
 const TYPE_ICONS = {
 	info: /* @__PURE__ */ jsx(Info, { className: "text-blue-400" }),
 	success: /* @__PURE__ */ jsx(Check, { className: "text-green-400" }),
@@ -55,7 +18,7 @@ const TYPE_ICONS = {
 };
 const Toast = ({ type, title, description, icon, closable = true, action, className, onClose }) => {
 	return /* @__PURE__ */ jsxs("div", {
-		role: "status",
+		role: type === "error" ? "alert" : "status",
 		className: cn("pointer-events-auto flex w-80 items-start gap-3 rounded-lg", "bg-background text-foreground border p-4 shadow-lg", className),
 		children: [
 			(icon || type) && /* @__PURE__ */ jsx("div", {
@@ -97,100 +60,61 @@ const StaticToast = ({ id, duration = DEFAULT_DURATION, container, onClose, ...p
 		onClose?.();
 		setVisible(false);
 		setTimeout(() => {
-			Toast.destroy(id);
+			toastStack.destroy(id);
 		}, 200);
 	};
-	useTimeout(close, duration || null);
+	const { reset, clear } = useTimeout(close, duration || null);
 	if (!isBrowser) return null;
 	return createPortal(/* @__PURE__ */ jsx("div", {
 		className: cn("transition-all duration-200", visible ? "opacity-100" : "translate-x-2 opacity-0"),
+		onMouseEnter: clear,
+		onMouseLeave: reset,
+		onFocus: clear,
+		onBlur: reset,
 		children: /* @__PURE__ */ jsx(Toast, {
 			...props,
 			onClose: close
 		})
-	}), createToastRoot(container));
-};
-const ToastStackRenderer = ({ container }) => {
-	const [, forceUpdate] = useState({});
-	useEffect(() => {
-		const state = getContainerState(container);
-		state.update = () => forceUpdate({});
-		return () => {
-			state.update = null;
-		};
-	}, [container]);
-	const { stack } = getContainerState(container);
-	return /* @__PURE__ */ jsx(Fragment$1, { children: stack.map(({ id, ...props }) => /* @__PURE__ */ jsx(StaticToast, {
-		id,
-		...props
-	}, id)) });
-};
-const toastRoots = /* @__PURE__ */ new Map();
-const renderToast = (props) => {
-	if (!isBrowser) return;
-	const targetContainer = props.container || document.body;
-	const rootElement = createToastRoot(targetContainer);
-	if (!toastRoots.has(targetContainer)) {
-		const root = createRoot(rootElement);
-		toastRoots.set(targetContainer, root);
-		root.render(/* @__PURE__ */ jsx(ToastStackRenderer, { container: targetContainer }));
-	}
-	const state = getContainerState(targetContainer);
-	const id = props.id || v4();
-	state.stack.push({
-		...props,
-		id
-	});
-	state.update?.();
-	return id;
-};
-Toast.destroy = (id) => {
-	if (!id) {
-		containerStates.forEach((state) => {
-			state.stack = [];
-			state.update?.();
-		});
-		toastRoots.forEach((root, container) => {
-			root.unmount();
-			toastRootElements.get(container)?.remove();
-			toastRootElements.delete(container);
-		});
-		toastRoots.clear();
-		containerStates.clear();
-		return;
-	}
-	containerStates.forEach((state, container) => {
-		if (!state.stack.some((toast) => toast.id === id)) return;
-		state.stack = state.stack.filter((toast) => toast.id !== id);
-		state.update?.();
-		if (!state.stack.length) {
-			toastRoots.get(container)?.unmount();
-			toastRoots.delete(container);
-			containerStates.delete(container);
-			toastRootElements.get(container)?.remove();
-			toastRootElements.delete(container);
-		}
-	});
+	}), toastStack.getRootElement(container));
 };
+const toastStack = createImperativeStack({
+	createRootElement: () => {
+		const el = document.createElement("div");
+		el.setAttribute("role", "region");
+		el.setAttribute("aria-label", "Notifications");
+		el.style.zIndex = "10000";
+		el.style.position = "fixed";
+		el.style.right = "0";
+		el.style.bottom = "0";
+		el.style.display = "flex";
+		el.style.flexDirection = "column-reverse";
+		el.style.gap = "8px";
+		el.style.padding = "16px";
+		el.style.pointerEvents = "none";
+		return el;
+	},
+	StackItem: StaticToast
+});
+Toast.destroy = toastStack.destroy;
 Toast.destroyAll = () => {
-	Toast.destroy();
+	toastStack.destroy();
 };
-Toast.info = (title, props) => renderToast({
+Toast.info = (title, props) => toastStack.render({
 	type: "info",
 	title,
 	...props
 });
-Toast.success = (title, props) => renderToast({
+Toast.success = (title, props) => toastStack.render({
 	type: "success",
 	title,
 	...props
 });
-Toast.error = (title, props) => renderToast({
+Toast.error = (title, props) => toastStack.render({
 	type: "error",
 	title,
 	...props
 });
-Toast.warning = (title, props) => renderToast({
+Toast.warning = (title, props) => toastStack.render({
 	type: "warning",
 	title,
 	...props

package/dist/components/organisms/toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.mjs","names":["uuid"],"sources":["../../../src/components/organisms/toast.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport { useTimeout } from '@jbpark/use-hooks';\nimport { Check, Info, OctagonAlert, OctagonX, X } from 'lucide-react';\nimport { v4 as uuid } from 'uuid';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\ntype ToastType = 'info' | 'success' | 'error' | 'warning';\n\nexport interface Props {\n  type?: ToastType;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  closable?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  onClose?: () => void;\n}\n\ninterface StaticProps extends Props {\n  id?: string;\n  duration?: number;\n  container?: HTMLElement;\n}\n\nconst isBrowser =\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\ntype ContainerState = {\n  stack: StaticProps[];\n  update: (() => void) | null;\n};\n\nconst containerStates = new Map<HTMLElement, ContainerState>();\nconst toastRootElements = new WeakMap<HTMLElement, HTMLElement>();\n\nconst getContainerState = (container: HTMLElement): ContainerState => {\n  let state = containerStates.get(container);\n\n  if (!state) {\n    state = { stack: [], update: null };\n    containerStates.set(container, state);\n  }\n\n  return state;\n};\n\nconst createToastRoot = (container?: HTMLElement) => {\n  if (!isBrowser) {\n    return null;\n  }\n\n  const targetContainer = container || document.body;\n  let rootEl = toastRootElements.get(targetContainer);\n\n  if (!rootEl) {\n    rootEl = document.createElement('div');\n    rootEl.setAttribute('role', 'region');\n    rootEl.setAttribute('aria-label', 'Notifications');\n    rootEl.style.zIndex = '10000';\n    rootEl.style.position = 'fixed';\n    rootEl.style.right = '0';\n    rootEl.style.bottom = '0';\n    rootEl.style.display = 'flex';\n    rootEl.style.flexDirection = 'column-reverse';\n    rootEl.style.gap = '8px';\n    rootEl.style.padding = '16px';\n    rootEl.style.pointerEvents = 'none';\n    targetContainer.appendChild(rootEl);\n    toastRootElements.set(targetContainer, rootEl);\n  }\n\n  return rootEl;\n};\n\nconst TYPE_ICONS: Record<ToastType, React.ReactNode> = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n};\n\nconst Toast = ({\n  type,\n  title,\n  description,\n  icon,\n  closable = true,\n  action,\n  className,\n  onClose,\n}: Props) => {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        'pointer-events-auto flex w-80 items-start gap-3 rounded-lg',\n        'bg-background text-foreground border p-4 shadow-lg',\n        className,\n        //\n      )}\n    >\n      {(icon || type) && (\n        <div className=\"mt-0.5 shrink-0 [&_svg]:size-5\">\n          {icon || (type && TYPE_ICONS[type])}\n        </div>\n      )}\n      <div className=\"flex-1 space-y-1\">\n        <p className=\"text-sm font-medium\">{title}</p>\n        {description && (\n          <p className=\"text-muted-foreground text-sm\">{description}</p>\n        )}\n        {action && <div className=\"pt-1\">{action}</div>}\n      </div>\n      {closable && (\n        <Button\n          type=\"text\"\n          shape=\"circle\"\n          size=\"small\"\n          aria-label=\"Close\"\n          icon={<X />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n};\n\nconst DEFAULT_DURATION = 4000;\n\nconst StaticToast = ({\n  id,\n  duration = DEFAULT_DURATION,\n  container,\n  onClose,\n  ...props\n}: StaticProps) => {\n  const [visible, setVisible] = useState(true);\n\n  const close = () => {\n    onClose?.();\n    setVisible(false);\n    setTimeout(() => {\n      Toast.destroy(id);\n    }, 200);\n  };\n\n  useTimeout(close, duration || null);\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={cn(\n        'transition-all duration-200',\n        visible ? 'opacity-100' : 'translate-x-2 opacity-0',\n      )}\n    >\n      <Toast {...props} onClose={close} />\n    </div>,\n    createToastRoot(container)!,\n  );\n};\n\nconst ToastStackRenderer = ({ container }: { container: HTMLElement }) => {\n  const [, forceUpdate] = useState({});\n\n  useEffect(() => {\n    const state = getContainerState(container);\n    state.update = () => forceUpdate({});\n    return () => {\n      state.update = null;\n    };\n  }, [container]);\n\n  const { stack } = getContainerState(container);\n\n  return (\n    <>\n      {stack.map(({ id, ...props }) => (\n        <StaticToast key={id} id={id} {...props} />\n      ))}\n    </>\n  );\n};\n\nconst toastRoots = new Map<HTMLElement, Root>();\n\nconst renderToast = (props: StaticProps) => {\n  if (!isBrowser) {\n    return;\n  }\n\n  const targetContainer = props.container || document.body;\n  const rootElement = createToastRoot(targetContainer)!;\n\n  if (!toastRoots.has(targetContainer)) {\n    const root = createRoot(rootElement);\n    toastRoots.set(targetContainer, root);\n    root.render(<ToastStackRenderer container={targetContainer} />);\n  }\n\n  const state = getContainerState(targetContainer);\n  const id = props.id || uuid();\n  state.stack.push({ ...props, id });\n  state.update?.();\n\n  return id;\n};\n\nToast.destroy = (id?: string) => {\n  if (!id) {\n    containerStates.forEach(state => {\n      state.stack = [];\n      state.update?.();\n    });\n    toastRoots.forEach((root, container) => {\n      root.unmount();\n      toastRootElements.get(container)?.remove();\n      toastRootElements.delete(container);\n    });\n    toastRoots.clear();\n    containerStates.clear();\n    return;\n  }\n\n  containerStates.forEach((state, container) => {\n    if (!state.stack.some(toast => toast.id === id)) {\n      return;\n    }\n\n    state.stack = state.stack.filter(toast => toast.id !== id);\n    state.update?.();\n\n    if (!state.stack.length) {\n      toastRoots.get(container)?.unmount();\n      toastRoots.delete(container);\n      containerStates.delete(container);\n      toastRootElements.get(container)?.remove();\n      toastRootElements.delete(container);\n    }\n  });\n};\n\nToast.destroyAll = () => {\n  Toast.destroy();\n};\n\ntype TriggerOptions = Omit<StaticProps, 'type' | 'title'>;\n\nToast.info = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'info', title, ...props });\nToast.success = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'success', title, ...props });\nToast.error = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'error', title, ...props });\nToast.warning = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'warning', title, ...props });\n\nexport default Toast;\nexport type { StaticProps as ToastOptions };\n"],"mappings":"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"}
+{"version":3,"file":"toast.mjs","names":[],"sources":["../../../src/components/organisms/toast.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useTimeout } from '@jbpark/use-hooks';\nimport { Check, Info, OctagonAlert, OctagonX, X } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\nimport {\n  type ImperativeStack,\n  createImperativeStack,\n  isBrowser,\n} from './imperative-stack';\n\ntype ToastType = 'info' | 'success' | 'error' | 'warning';\n\nexport interface Props {\n  type?: ToastType;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  closable?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  onClose?: () => void;\n}\n\ninterface StaticProps extends Props {\n  id?: string;\n  duration?: number;\n  container?: HTMLElement;\n}\n\nconst TYPE_ICONS: Record<ToastType, React.ReactNode> = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n};\n\nconst Toast = ({\n  type,\n  title,\n  description,\n  icon,\n  closable = true,\n  action,\n  className,\n  onClose,\n}: Props) => {\n  return (\n    <div\n      role={type === 'error' ? 'alert' : 'status'}\n      className={cn(\n        'pointer-events-auto flex w-80 items-start gap-3 rounded-lg',\n        'bg-background text-foreground border p-4 shadow-lg',\n        className,\n        //\n      )}\n    >\n      {(icon || type) && (\n        <div className=\"mt-0.5 shrink-0 [&_svg]:size-5\">\n          {icon || (type && TYPE_ICONS[type])}\n        </div>\n      )}\n      <div className=\"flex-1 space-y-1\">\n        <p className=\"text-sm font-medium\">{title}</p>\n        {description && (\n          <p className=\"text-muted-foreground text-sm\">{description}</p>\n        )}\n        {action && <div className=\"pt-1\">{action}</div>}\n      </div>\n      {closable && (\n        <Button\n          type=\"text\"\n          shape=\"circle\"\n          size=\"small\"\n          aria-label=\"Close\"\n          icon={<X />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n};\n\nconst DEFAULT_DURATION = 4000;\n\nconst StaticToast = ({\n  id,\n  duration = DEFAULT_DURATION,\n  container,\n  onClose,\n  ...props\n}: StaticProps & { id: string }): React.ReactPortal | null => {\n  const [visible, setVisible] = useState(true);\n\n  const close = () => {\n    onClose?.();\n    setVisible(false);\n    setTimeout(() => {\n      toastStack.destroy(id);\n    }, 200);\n  };\n\n  const { reset, clear } = useTimeout(close, duration || null);\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={cn(\n        'transition-all duration-200',\n        visible ? 'opacity-100' : 'translate-x-2 opacity-0',\n      )}\n      // Without this, a toast with a closable/action button (or one the\n      // user is mid-read on) could auto-dismiss itself out from under\n      // them — hovering or focusing anything inside pauses the timer,\n      // moving away restarts it from the full duration.\n      onMouseEnter={clear}\n      onMouseLeave={reset}\n      onFocus={clear}\n      onBlur={reset}\n    >\n      <Toast {...props} onClose={close} />\n    </div>,\n    toastStack.getRootElement(container)!,\n  );\n};\n\nconst toastStack: ImperativeStack<StaticProps> =\n  createImperativeStack<StaticProps>({\n    createRootElement: () => {\n      const el = document.createElement('div');\n      el.setAttribute('role', 'region');\n      el.setAttribute('aria-label', 'Notifications');\n      el.style.zIndex = '10000';\n      el.style.position = 'fixed';\n      el.style.right = '0';\n      el.style.bottom = '0';\n      el.style.display = 'flex';\n      el.style.flexDirection = 'column-reverse';\n      el.style.gap = '8px';\n      el.style.padding = '16px';\n      el.style.pointerEvents = 'none';\n      return el;\n    },\n    StackItem: StaticToast,\n  });\n\nToast.destroy = toastStack.destroy;\n\nToast.destroyAll = () => {\n  toastStack.destroy();\n};\n\ntype TriggerOptions = Omit<StaticProps, 'type' | 'title'>;\n\nToast.info = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ type: 'info', title, ...props });\nToast.success = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ type: 'success', title, ...props });\nToast.error = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ type: 'error', title, ...props });\nToast.warning = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ type: 'warning', title, ...props });\n\nexport default Toast;\nexport type { StaticProps as ToastOptions };\n"],"mappings":";;;;;;;;;;;;AAoCA,MAAM,aAAiD;CACrD,MAAM,oBAAC,QAAK,WAAU,kBAAkB;CACxC,SAAS,oBAAC,SAAM,WAAU,mBAAmB;CAC7C,OAAO,oBAAC,YAAS,WAAU,iBAAiB;CAC5C,SAAS,oBAAC,gBAAa,WAAU,oBAAoB;CACtD;AAED,MAAM,SAAS,EACb,MACA,OACA,aACA,MACA,WAAW,MACX,QACA,WACA,cACW;AACX,QACE,qBAAC;EACC,MAAM,SAAS,UAAU,UAAU;EACnC,WAAW,GACT,8DACA,sDACA,UAED;;IAEC,QAAQ,SACR,oBAAC;IAAI,WAAU;cACZ,QAAS,QAAQ,WAAW;KACzB;GAER,qBAAC;IAAI,WAAU;;KACb,oBAAC;MAAE,WAAU;gBAAuB;OAAU;KAC7C,eACC,oBAAC;MAAE,WAAU;gBAAiC;OAAgB;KAE/D,UAAU,oBAAC;MAAI,WAAU;gBAAQ;OAAa;;KAC3C;GACL,YACC,oBAAC;IACC,MAAK;IACL,OAAM;IACN,MAAK;IACL,cAAW;IACX,MAAM,oBAAC,MAAI;IACX,SAAS;KACT;;GAEA;;AAIV,MAAM,mBAAmB;AAEzB,MAAM,eAAe,EACnB,IACA,WAAW,kBACX,WACA,SACA,GAAG,YACyD;CAC5D,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,cAAc;AAClB,aAAW;AACX,aAAW,MAAM;AACjB,mBAAiB;AACf,cAAW,QAAQ,GAAG;KACrB,IAAI;;CAGT,MAAM,EAAE,OAAO,UAAU,WAAW,OAAO,YAAY,KAAK;AAE5D,KAAI,CAAC,UACH,QAAO;AAGT,QAAO,aACL,oBAAC;EACC,WAAW,GACT,+BACA,UAAU,gBAAgB,0BAC3B;EAKD,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;YAER,oBAAC;GAAM,GAAI;GAAO,SAAS;IAAS;GAChC,EACN,WAAW,eAAe,UAAU,CACrC;;AAGH,MAAM,aACJ,sBAAmC;CACjC,yBAAyB;EACvB,MAAM,KAAK,SAAS,cAAc,MAAM;AACxC,KAAG,aAAa,QAAQ,SAAS;AACjC,KAAG,aAAa,cAAc,gBAAgB;AAC9C,KAAG,MAAM,SAAS;AAClB,KAAG,MAAM,WAAW;AACpB,KAAG,MAAM,QAAQ;AACjB,KAAG,MAAM,SAAS;AAClB,KAAG,MAAM,UAAU;AACnB,KAAG,MAAM,gBAAgB;AACzB,KAAG,MAAM,MAAM;AACf,KAAG,MAAM,UAAU;AACnB,KAAG,MAAM,gBAAgB;AACzB,SAAO;;CAET,WAAW;CACZ,CAAC;AAEJ,MAAM,UAAU,WAAW;AAE3B,MAAM,mBAAmB;AACvB,YAAW,SAAS;;AAKtB,MAAM,QAAQ,OAAwB,UACpC,WAAW,OAAO;CAAE,MAAM;CAAQ;CAAO,GAAG;CAAO,CAAC;AACtD,MAAM,WAAW,OAAwB,UACvC,WAAW,OAAO;CAAE,MAAM;CAAW;CAAO,GAAG;CAAO,CAAC;AACzD,MAAM,SAAS,OAAwB,UACrC,WAAW,OAAO;CAAE,MAAM;CAAS;CAAO,GAAG;CAAO,CAAC;AACvD,MAAM,WAAW,OAAwB,UACvC,WAAW,OAAO;CAAE,MAAM;CAAW;CAAO,GAAG;CAAO,CAAC"}

package/dist/components/templates/container.d.mts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/container.d.ts
+type MaxWidth = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full' | 'none';
+interface Props extends React.ComponentProps<'div'> {
+  maxWidth?: MaxWidth;
+  padded?: boolean;
+  asChild?: boolean;
+}
+declare const Container: ({
+  className,
+  maxWidth,
+  padded,
+  asChild,
+  ...props
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Container, Props };
+//# sourceMappingURL=container.d.mts.map

package/dist/components/templates/container.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.mts","names":[],"sources":["../../../src/components/templates/container.tsx"],"mappings":";;;KAIK,QAAA;AAAA,UAmCY,KAAA,SAAc,KAAA,CAAM,cAAA;EACnC,QAAA,GAAW,QAAA;EACX,MAAA;EACA,OAAA;AAAA;AAAA,cAMI,SAAA;EAAa,SAAA;EAAA,QAAA;EAAA,MAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAMhB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/container.mjs

@@ -0,0 +1,32 @@
+import { cn } from "../../utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/components/templates/container.tsx
+const MAX_WIDTH_CLASSES = {
+	"3xs": "max-w-3xs",
+	"2xs": "max-w-2xs",
+	xs: "max-w-xs",
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg",
+	xl: "max-w-xl",
+	"2xl": "max-w-2xl",
+	"3xl": "max-w-3xl",
+	"4xl": "max-w-4xl",
+	"5xl": "max-w-5xl",
+	"6xl": "max-w-6xl",
+	"7xl": "max-w-7xl",
+	full: "max-w-full",
+	none: "max-w-none"
+};
+const Container = ({ className, maxWidth = "7xl", padded = true, asChild = false, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		className: cn("mx-auto w-full", MAX_WIDTH_CLASSES[maxWidth], padded && "px-4 sm:px-6 lg:px-8", className),
+		...props
+	});
+};
+
+//#endregion
+export { Container as default };
+//# sourceMappingURL=container.mjs.map

package/dist/components/templates/container.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.mjs","names":[],"sources":["../../../src/components/templates/container.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '@repo/ui/utils';\n\ntype MaxWidth =\n  | '3xs'\n  | '2xs'\n  | 'xs'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | '4xl'\n  | '5xl'\n  | '6xl'\n  | '7xl'\n  | 'full'\n  | 'none';\n\nconst MAX_WIDTH_CLASSES: Record<MaxWidth, string> = {\n  '3xs': 'max-w-3xs',\n  '2xs': 'max-w-2xs',\n  xs: 'max-w-xs',\n  sm: 'max-w-sm',\n  md: 'max-w-md',\n  lg: 'max-w-lg',\n  xl: 'max-w-xl',\n  '2xl': 'max-w-2xl',\n  '3xl': 'max-w-3xl',\n  '4xl': 'max-w-4xl',\n  '5xl': 'max-w-5xl',\n  '6xl': 'max-w-6xl',\n  '7xl': 'max-w-7xl',\n  full: 'max-w-full',\n  none: 'max-w-none',\n};\n\nexport interface Props extends React.ComponentProps<'div'> {\n  maxWidth?: MaxWidth;\n  padded?: boolean;\n  asChild?: boolean;\n}\n\n// Standardizes the `mx-auto max-w-7xl px-4` wrapper every app in this\n// monorepo was rewriting by hand inside Content — one place to change the\n// page's content width/gutters instead of N call sites.\nconst Container = ({\n  className,\n  maxWidth = '7xl',\n  padded = true,\n  asChild = false,\n  ...props\n}: Props) => {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      className={cn(\n        'mx-auto w-full',\n        MAX_WIDTH_CLASSES[maxWidth],\n        padded && 'px-4 sm:px-6 lg:px-8',\n        className,\n        //\n      )}\n      {...props}\n    />\n  );\n};\n\nexport default Container;\n"],"mappings":";;;;;AAqBA,MAAM,oBAA8C;CAClD,OAAO;CACP,OAAO;CACP,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,MAAM;CACN,MAAM;CACP;AAWD,MAAM,aAAa,EACjB,WACA,WAAW,OACX,SAAS,MACT,UAAU,OACV,GAAG,YACQ;AAGX,QACE,oBAHW,UAAU,OAAO;EAI1B,WAAW,GACT,kBACA,kBAAkB,WAClB,UAAU,wBACV,UAED;EACD,GAAI;GACJ"}

package/dist/components/templates/empty.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/empty.d.ts
+interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {
+  icon?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+}
+declare const Empty: ({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  ...props
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Empty, Props };
+//# sourceMappingURL=empty.d.mts.map

package/dist/components/templates/empty.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.d.mts","names":[],"sources":["../../../src/components/templates/empty.tsx"],"mappings":";;;UAIiB,KAAA,SAAc,IAAA,CAAK,KAAA,CAAM,cAAA;EACxC,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,MAAA,GAAS,KAAA,CAAM,SAAA;AAAA;AAAA,cAQX,KAAA;EAAS,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,MAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAOZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/empty.mjs

@@ -0,0 +1,34 @@
+import { cn } from "../../utils.mjs";
+import { Inbox } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/templates/empty.tsx
+const Empty = ({ icon, title, description = "No data", action, className, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		className: cn("flex flex-col items-center justify-center gap-3 py-12 text-center", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground [&_svg]:size-12",
+				children: icon ?? /* @__PURE__ */ jsx(Inbox, {})
+			}),
+			title && /* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: description
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "mt-1",
+				children: action
+			})
+		]
+	});
+};
+
+//#endregion
+export { Empty as default };
+//# sourceMappingURL=empty.mjs.map

package/dist/components/templates/empty.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.mjs","names":[],"sources":["../../../src/components/templates/empty.tsx"],"sourcesContent":["import { Inbox } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nexport interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {\n  icon?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  action?: React.ReactNode;\n}\n\n// The counterpart List's `empty` prop was asking for — List/Upload/Swiper\n// each render arbitrary content for their empty state today with nothing\n// in the library actually meant to go there. Pairs with Skeleton the same\n// way Skeleton pairs with real content: one placeholder for \"nothing\n// loaded yet\", one for \"loaded, and there's nothing\".\nconst Empty = ({\n  icon,\n  title,\n  description = 'No data',\n  action,\n  className,\n  ...props\n}: Props) => {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        'flex flex-col items-center justify-center gap-3 py-12 text-center',\n        className,\n        //\n      )}\n      {...props}\n    >\n      <div className=\"text-muted-foreground [&_svg]:size-12\">\n        {icon ?? <Inbox />}\n      </div>\n      {title && <p className=\"text-sm font-medium\">{title}</p>}\n      {description && (\n        <p className=\"text-muted-foreground text-sm\">{description}</p>\n      )}\n      {action && <div className=\"mt-1\">{action}</div>}\n    </div>\n  );\n};\n\nexport default Empty;\n"],"mappings":";;;;;AAgBA,MAAM,SAAS,EACb,MACA,OACA,cAAc,WACd,QACA,WACA,GAAG,YACQ;AACX,QACE,qBAAC;EACC,MAAK;EACL,WAAW,GACT,qEACA,UAED;EACD,GAAI;;GAEJ,oBAAC;IAAI,WAAU;cACZ,QAAQ,oBAAC,UAAQ;KACd;GACL,SAAS,oBAAC;IAAE,WAAU;cAAuB;KAAU;GACvD,eACC,oBAAC;IAAE,WAAU;cAAiC;KAAgB;GAE/D,UAAU,oBAAC;IAAI,WAAU;cAAQ;KAAa;;GAC3C"}

package/dist/components/templates/grid/col.d.mts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/grid/col.d.ts
+interface ResponsiveColSpan {
+  span?: number;
+  offset?: number;
+}
+type ColSpanProp = number | ResponsiveColSpan;
+interface Props extends React.ComponentProps<'div'> {
+  span?: number;
+  offset?: number;
+  xs?: ColSpanProp;
+  sm?: ColSpanProp;
+  md?: ColSpanProp;
+  lg?: ColSpanProp;
+  xl?: ColSpanProp;
+  '2xl'?: ColSpanProp;
+}
+declare const Col: ({
+  span,
+  offset,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  "2xl": xxl,
+  className,
+  style,
+  children,
+  ...props
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Col, Props };
+//# sourceMappingURL=col.d.mts.map

package/dist/components/templates/grid/col.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"col.d.mts","names":[],"sources":["../../../../src/components/templates/grid/col.tsx"],"mappings":";;;UAUU,iBAAA;EACR,IAAA;EACA,MAAA;AAAA;AAAA,KAGG,WAAA,YAAuB,iBAAA;AAAA,UAEX,KAAA,SAAc,KAAA,CAAM,cAAA;EACnC,IAAA;EACA,MAAA;EACA,EAAA,GAAK,WAAA;EACL,EAAA,GAAK,WAAA;EACL,EAAA,GAAK,WAAA;EACL,EAAA,GAAK,WAAA;EACL,EAAA,GAAK,WAAA;EACL,KAAA,GAAQ,WAAA;AAAA;AAAA,cAaJ,GAAA;EAAO,IAAA;EAAA,MAAA;EAAA,EAAA;EAAA,EAAA;EAAA,EAAA;EAAA,EAAA;EAAA,EAAA;EAAA,OAAA,GAAA;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAaV,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/grid/col.mjs

@@ -0,0 +1,55 @@
+'use client';
+
+import { cn } from "../../../utils.mjs";
+import { useRowContext } from "./row-context.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/templates/grid/col.tsx
+const TOTAL_COLUMNS = 24;
+const BREAKPOINT_ORDER = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+];
+const resolveColSpan = (value) => typeof value === "number" ? { span: value } : value;
+const Col = ({ span = TOTAL_COLUMNS, offset = 0, xs, sm, md, lg, xl, "2xl": xxl, className, style, children, ...props }) => {
+	const { gutterX, breakpoint } = useRowContext();
+	const responsiveProps = {
+		xs,
+		sm,
+		md,
+		lg,
+		xl,
+		"2xl": xxl
+	};
+	let effectiveSpan = span;
+	let effectiveOffset = offset;
+	for (const bp of BREAKPOINT_ORDER) {
+		if (BREAKPOINT_ORDER.indexOf(bp) > BREAKPOINT_ORDER.indexOf(breakpoint)) break;
+		const resolved = resolveColSpan(responsiveProps[bp]);
+		if (resolved?.span !== void 0) effectiveSpan = resolved.span;
+		if (resolved?.offset !== void 0) effectiveOffset = resolved.offset;
+	}
+	const widthPercent = effectiveSpan / TOTAL_COLUMNS * 100;
+	const offsetPercent = effectiveOffset / TOTAL_COLUMNS * 100;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("box-border shrink-0 grow-0", className),
+		style: {
+			flexBasis: `${widthPercent}%`,
+			maxWidth: `${widthPercent}%`,
+			marginLeft: offsetPercent ? `${offsetPercent}%` : void 0,
+			paddingLeft: gutterX ? gutterX / 2 : void 0,
+			paddingRight: gutterX ? gutterX / 2 : void 0,
+			...style
+		},
+		...props,
+		children
+	});
+};
+
+//#endregion
+export { Col as default };
+//# sourceMappingURL=col.mjs.map

package/dist/components/templates/grid/col.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"col.mjs","names":[],"sources":["../../../../src/components/templates/grid/col.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { type Breakpoint, useRowContext } from './row-context';\n\nconst TOTAL_COLUMNS = 24;\n\nconst BREAKPOINT_ORDER: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\ninterface ResponsiveColSpan {\n  span?: number;\n  offset?: number;\n}\n\ntype ColSpanProp = number | ResponsiveColSpan;\n\nexport interface Props extends React.ComponentProps<'div'> {\n  span?: number;\n  offset?: number;\n  xs?: ColSpanProp;\n  sm?: ColSpanProp;\n  md?: ColSpanProp;\n  lg?: ColSpanProp;\n  xl?: ColSpanProp;\n  '2xl'?: ColSpanProp;\n}\n\nconst resolveColSpan = (value: ColSpanProp | undefined) =>\n  typeof value === 'number' ? { span: value } : value;\n\n// 24-column system (matches Ant Design's Row/Col, a familiar mental model\n// for anyone coming from it) implemented with plain percentage widths\n// rather than Tailwind's col-span-* utilities — those utilities need a\n// literal, statically-scannable class per (breakpoint, span) combination,\n// and 6 breakpoints x 24 spans is 144 combinations, most of which would\n// never be used. Percentage math scales to any span/breakpoint\n// combination with one code path instead.\nconst Col = ({\n  span = TOTAL_COLUMNS,\n  offset = 0,\n  xs,\n  sm,\n  md,\n  lg,\n  xl,\n  '2xl': xxl,\n  className,\n  style,\n  children,\n  ...props\n}: Props) => {\n  const { gutterX, breakpoint } = useRowContext();\n\n  const responsiveProps: Partial<Record<Breakpoint, ColSpanProp | undefined>> =\n    { xs, sm, md, lg, xl, '2xl': xxl };\n\n  let effectiveSpan = span;\n  let effectiveOffset = offset;\n\n  // Mobile-first cascade: walk breakpoints up to (and including) the\n  // current one, letting each defined prop override the last — so\n  // `<Col span={24} md={12} />` is 24 below md and 12 from md upward, with\n  // no need to also specify lg/xl/2xl for the value to keep applying.\n  for (const bp of BREAKPOINT_ORDER) {\n    if (BREAKPOINT_ORDER.indexOf(bp) > BREAKPOINT_ORDER.indexOf(breakpoint)) {\n      break;\n    }\n\n    const resolved = resolveColSpan(responsiveProps[bp]);\n\n    if (resolved?.span !== undefined) {\n      effectiveSpan = resolved.span;\n    }\n    if (resolved?.offset !== undefined) {\n      effectiveOffset = resolved.offset;\n    }\n  }\n\n  const widthPercent = (effectiveSpan / TOTAL_COLUMNS) * 100;\n  const offsetPercent = (effectiveOffset / TOTAL_COLUMNS) * 100;\n\n  return (\n    <div\n      className={cn('box-border shrink-0 grow-0', className)}\n      style={{\n        flexBasis: `${widthPercent}%`,\n        maxWidth: `${widthPercent}%`,\n        marginLeft: offsetPercent ? `${offsetPercent}%` : undefined,\n        paddingLeft: gutterX ? gutterX / 2 : undefined,\n        paddingRight: gutterX ? gutterX / 2 : undefined,\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default Col;\n"],"mappings":";;;;;;;AAMA,MAAM,gBAAgB;AAEtB,MAAM,mBAAiC;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;AAoB5E,MAAM,kBAAkB,UACtB,OAAO,UAAU,WAAW,EAAE,MAAM,OAAO,GAAG;AAShD,MAAM,OAAO,EACX,OAAO,eACP,SAAS,GACT,IACA,IACA,IACA,IACA,IACA,OAAO,KACP,WACA,OACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,SAAS,eAAe,eAAe;CAE/C,MAAM,kBACJ;EAAE;EAAI;EAAI;EAAI;EAAI;EAAI,OAAO;EAAK;CAEpC,IAAI,gBAAgB;CACpB,IAAI,kBAAkB;AAMtB,MAAK,MAAM,MAAM,kBAAkB;AACjC,MAAI,iBAAiB,QAAQ,GAAG,GAAG,iBAAiB,QAAQ,WAAW,CACrE;EAGF,MAAM,WAAW,eAAe,gBAAgB,IAAI;AAEpD,MAAI,UAAU,SAAS,OACrB,iBAAgB,SAAS;AAE3B,MAAI,UAAU,WAAW,OACvB,mBAAkB,SAAS;;CAI/B,MAAM,eAAgB,gBAAgB,gBAAiB;CACvD,MAAM,gBAAiB,kBAAkB,gBAAiB;AAE1D,QACE,oBAAC;EACC,WAAW,GAAG,8BAA8B,UAAU;EACtD,OAAO;GACL,WAAW,GAAG,aAAa;GAC3B,UAAU,GAAG,aAAa;GAC1B,YAAY,gBAAgB,GAAG,cAAc,KAAK;GAClD,aAAa,UAAU,UAAU,IAAI;GACrC,cAAc,UAAU,UAAU,IAAI;GACtC,GAAG;GACJ;EACD,GAAI;EAEH;GACG"}

package/dist/components/templates/grid/index.d.mts

@@ -0,0 +1,2 @@
+import { Props, Row } from "./row.mjs";
+import { Col, Props as Props$1 } from "./col.mjs";

package/dist/components/templates/grid/row-context.mjs

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+
+//#region src/components/templates/grid/row-context.ts
+const RowContext = createContext({
+	gutterX: 0,
+	gutterY: 0,
+	breakpoint: "xs"
+});
+const useRowContext = () => useContext(RowContext);
+
+//#endregion
+export { RowContext, useRowContext };
+//# sourceMappingURL=row-context.mjs.map

package/dist/components/templates/grid/row-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-context.mjs","names":[],"sources":["../../../../src/components/templates/grid/row-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport interface RowContextValue {\n  gutterX: number;\n  gutterY: number;\n  breakpoint: Breakpoint;\n}\n\n// Defaults assume Col is used without a Row (not the intended usage, but\n// shouldn't crash) — 'xs' matches useResponsiveSize's own SSR-safe initial\n// guess (measures 0 width before mount), same mobile-first default Sider's\n// breakpoint feature already relies on.\nexport const RowContext = createContext<RowContextValue>({\n  gutterX: 0,\n  gutterY: 0,\n  breakpoint: 'xs',\n});\n\nexport const useRowContext = () => useContext(RowContext);\n"],"mappings":";;;AAcA,MAAa,aAAa,cAA+B;CACvD,SAAS;CACT,SAAS;CACT,YAAY;CACb,CAAC;AAEF,MAAa,sBAAsB,WAAW,WAAW"}

package/dist/components/templates/grid/row.d.mts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/grid/row.d.ts
+declare const ALIGN_CLASSES: {
+  top: string;
+  middle: string;
+  bottom: string;
+  stretch: string;
+};
+declare const JUSTIFY_CLASSES: {
+  start: string;
+  end: string;
+  center: string;
+  'space-around': string;
+  'space-between': string;
+  'space-evenly': string;
+};
+interface Props extends React.ComponentProps<'div'> {
+  gutter?: number | [number, number];
+  align?: keyof typeof ALIGN_CLASSES;
+  justify?: keyof typeof JUSTIFY_CLASSES;
+  wrap?: boolean;
+}
+declare const Row: ({
+  gutter,
+  align,
+  justify,
+  wrap,
+  className,
+  style,
+  children,
+  ...props
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Props, Row };
+//# sourceMappingURL=row.d.mts.map

package/dist/components/templates/grid/row.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.d.mts","names":[],"sources":["../../../../src/components/templates/grid/row.tsx"],"mappings":";;;cAUM,aAAA;;;;;;cAOA,eAAA;;;;;;;;UASW,KAAA,SAAc,KAAA,CAAM,cAAA;EACnC,MAAA;EACA,KAAA,gBAAqB,aAAA;EACrB,OAAA,gBAAuB,eAAA;EACvB,IAAA;AAAA;AAAA,cAMI,GAAA;EAAO,MAAA;EAAA,KAAA;EAAA,OAAA;EAAA,IAAA;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GASV,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/grid/row.mjs

@@ -0,0 +1,54 @@
+'use client';
+
+import { cn } from "../../../utils.mjs";
+import { RowContext } from "./row-context.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useResponsiveSize } from "@jbpark/use-hooks";
+
+//#region src/components/templates/grid/row.tsx
+const ALIGN_CLASSES = {
+	top: "items-start",
+	middle: "items-center",
+	bottom: "items-end",
+	stretch: "items-stretch"
+};
+const JUSTIFY_CLASSES = {
+	start: "justify-start",
+	end: "justify-end",
+	center: "justify-center",
+	"space-around": "justify-around",
+	"space-between": "justify-between",
+	"space-evenly": "justify-evenly"
+};
+const Row = ({ gutter = 0, align, justify, wrap = true, className, style, children, ...props }) => {
+	const [gutterX, gutterY] = Array.isArray(gutter) ? gutter : [gutter, 0];
+	const { breakpoint } = useResponsiveSize({ viewport: true });
+	const contextValue = useMemo(() => ({
+		gutterX,
+		gutterY,
+		breakpoint: breakpoint.current
+	}), [
+		gutterX,
+		gutterY,
+		breakpoint
+	]);
+	return /* @__PURE__ */ jsx(RowContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex", wrap && "flex-wrap", align && ALIGN_CLASSES[align], justify && JUSTIFY_CLASSES[justify], className),
+			style: {
+				marginLeft: gutterX ? -gutterX / 2 : void 0,
+				marginRight: gutterX ? -gutterX / 2 : void 0,
+				rowGap: gutterY || void 0,
+				...style
+			},
+			...props,
+			children
+		})
+	});
+};
+
+//#endregion
+export { Row as default };
+//# sourceMappingURL=row.mjs.map

package/dist/components/templates/grid/row.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.mjs","names":[],"sources":["../../../../src/components/templates/grid/row.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { useResponsiveSize } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { RowContext } from './row-context';\n\nconst ALIGN_CLASSES = {\n  top: 'items-start',\n  middle: 'items-center',\n  bottom: 'items-end',\n  stretch: 'items-stretch',\n};\n\nconst JUSTIFY_CLASSES = {\n  start: 'justify-start',\n  end: 'justify-end',\n  center: 'justify-center',\n  'space-around': 'justify-around',\n  'space-between': 'justify-between',\n  'space-evenly': 'justify-evenly',\n};\n\nexport interface Props extends React.ComponentProps<'div'> {\n  gutter?: number | [number, number];\n  align?: keyof typeof ALIGN_CLASSES;\n  justify?: keyof typeof JUSTIFY_CLASSES;\n  wrap?: boolean;\n}\n\n// The breakpoint tier is resolved once here (not per-Col) so N columns\n// share a single resize listener instead of each mounting its own via\n// useResponsiveSize — matters once a grid has more than a couple Cols.\nconst Row = ({\n  gutter = 0,\n  align,\n  justify,\n  wrap = true,\n  className,\n  style,\n  children,\n  ...props\n}: Props) => {\n  const [gutterX, gutterY] = Array.isArray(gutter) ? gutter : [gutter, 0];\n  const { breakpoint } = useResponsiveSize({ viewport: true });\n\n  const contextValue = useMemo(\n    () => ({ gutterX, gutterY, breakpoint: breakpoint.current }),\n    [gutterX, gutterY, breakpoint],\n  );\n\n  return (\n    <RowContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          'flex',\n          wrap && 'flex-wrap',\n          align && ALIGN_CLASSES[align],\n          justify && JUSTIFY_CLASSES[justify],\n          className,\n          //\n        )}\n        style={{\n          // Negative margin + Col's matching padding is the classic\n          // gutter technique — unlike a plain `gap`, it doesn't break the\n          // percentage-width math when several Cols are meant to sum to\n          // exactly 100% of the row. Vertical gutter has no such\n          // constraint (it only affects spacing *between* wrapped rows),\n          // so it uses native `row-gap` directly.\n          marginLeft: gutterX ? -gutterX / 2 : undefined,\n          marginRight: gutterX ? -gutterX / 2 : undefined,\n          rowGap: gutterY || undefined,\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    </RowContext.Provider>\n  );\n};\n\nexport default Row;\n"],"mappings":";;;;;;;;;AAUA,MAAM,gBAAgB;CACpB,KAAK;CACL,QAAQ;CACR,QAAQ;CACR,SAAS;CACV;AAED,MAAM,kBAAkB;CACtB,OAAO;CACP,KAAK;CACL,QAAQ;CACR,gBAAgB;CAChB,iBAAiB;CACjB,gBAAgB;CACjB;AAYD,MAAM,OAAO,EACX,SAAS,GACT,OACA,SACA,OAAO,MACP,WACA,OACA,UACA,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,WAAW,MAAM,QAAQ,OAAO,GAAG,SAAS,CAAC,QAAQ,EAAE;CACvE,MAAM,EAAE,eAAe,kBAAkB,EAAE,UAAU,MAAM,CAAC;CAE5D,MAAM,eAAe,eACZ;EAAE;EAAS;EAAS,YAAY,WAAW;EAAS,GAC3D;EAAC;EAAS;EAAS;EAAW,CAC/B;AAED,QACE,oBAAC,WAAW;EAAS,OAAO;YAC1B,oBAAC;GACC,WAAW,GACT,QACA,QAAQ,aACR,SAAS,cAAc,QACvB,WAAW,gBAAgB,UAC3B,UAED;GACD,OAAO;IAOL,YAAY,UAAU,CAAC,UAAU,IAAI;IACrC,aAAa,UAAU,CAAC,UAAU,IAAI;IACtC,QAAQ,WAAW;IACnB,GAAG;IACJ;GACD,GAAI;GAEH;IACG;GACc"}

package/dist/components/templates/index.d.mts

@@ -1 +1,13 @@
-import Layout from "../../Layout.mjs";
+import { Props } from "./layout/content.mjs";
+import { Props as Props$1 } from "./layout/footer.mjs";
+import { Props as Props$2 } from "./layout/header.mjs";
+import { Props as Props$3 } from "./layout/layout.mjs";
+import { Props as Props$4 } from "./layout/sider.mjs";
+import Layout from "../../Layout.mjs";
+import { Container, Props as Props$5 } from "./container.mjs";
+import { Empty, Props as Props$6 } from "./empty.mjs";
+import { Props as Props$7, Result } from "./result.mjs";
+import { PageHeader, Props as Props$8 } from "./page-header.mjs";
+import { Props as Props$9, Row } from "./grid/row.mjs";
+import { Col, Props as Props$10 } from "./grid/col.mjs";
+import "./grid/index.mjs";

package/dist/components/templates/layout/content.d.mts

@@ -1,10 +1,13 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/templates/layout/content.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'main'> {}
+interface Props extends React.ComponentProps<'main'> {
+  asChild?: boolean;
+}
 declare const Content: ({
   children,
   className,
+  asChild,
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/templates/layout/content.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"content.d.mts","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAE/B,OAAA;EAAW,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAmC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"content.d.mts","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"mappings":";;;UAIiB,KAAA,SAAc,KAAA,CAAM,cAAA;EACnC,OAAA;AAAA;AAAA,cAGI,OAAA;EAAW,QAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAAoD,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}