@keboola/design 10.1.0 → 11.0.1

package/dist/AlertModal-BUC4Es8o.js

@@ -0,0 +1,222 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { AlertTriangle, CircleCheck, Info } from "./icons-Cek151jC.js";
+import { Button } from "./Button-nzmDNS2q.js";
+import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { Action, Cancel, Content, Overlay, Portal, Root, Title, Trigger } from "@radix-ui/react-alert-dialog";
+//#region src/components/AlertModal/AlertModalDescription.tsx
+const AlertModalDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
+	className: cn("tw:font-sans", "tw:tracking-normal", "tw:font-normal", "tw:text-muted-foreground", "tw:group-data-[design=default]/alert-modal:text-foreground", "tw:group-data-[design=default]/alert-modal:text-sm", className),
+	...props
+});
+//#endregion
+//#region src/components/AlertModal/AlertModalFooter.tsx
+const AlertModalFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("tw:flex", "tw:gap-2", "tw:group-data-[design=default]/alert-modal:flex-col", "tw:group-data-[design=default]/alert-modal:sm:flex-row", "tw:group-data-[design=argo]/alert-modal:justify-end", className),
+	...props
+});
+//#endregion
+//#region src/components/AlertModal/AlertModalHeader.tsx
+const AlertModalHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("tw:grid", "tw:grid-cols-[auto_1fr]", "tw:items-start", "tw:gap-y-1", "tw:group-data-[design=default]/alert-modal:gap-y-4", "tw:group-data-[design=argo]/alert-modal:gap-x-3", className),
+	...props
+});
+//#endregion
+//#region src/components/AlertModal/AlertModalIcon.tsx
+const VARIANT_ICONS = {
+	info: /* @__PURE__ */ jsx(Info, {}),
+	warning: /* @__PURE__ */ jsx(AlertTriangle, {}),
+	danger: /* @__PURE__ */ jsx(AlertTriangle, {}),
+	success: /* @__PURE__ */ jsx(CircleCheck, {})
+};
+const AlertModalIcon = ({ variant, icon }) => {
+	const glyph = icon ?? VARIANT_ICONS[variant];
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-modal-icon",
+		className: cn("tw:group-data-[design=argo]/alert-modal:hidden", "tw:absolute", "tw:top-0", "tw:left-8", "tw:translate-y-[-50%]", "tw:size-12"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("tw:relative", "tw:rounded-full", "tw:size-12", {
+				"tw:bg-blue-500": variant === "info",
+				"tw:bg-warning-500": variant === "warning",
+				"tw:bg-error-500": variant === "danger",
+				"tw:bg-green-500": variant === "success"
+			}),
+			children: /* @__PURE__ */ jsx("span", {
+				className: cn("tw:absolute", "tw:inset-0", "tw:flex", "tw:items-center", "tw:justify-center", "tw:text-white", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-6", "tw:[&_svg]:aspect-square"),
+				children: glyph
+			})
+		})
+	}), /* @__PURE__ */ jsx("span", {
+		"data-slot": "alert-modal-icon",
+		className: cn("tw:hidden", "tw:group-data-[design=argo]/alert-modal:inline-flex", "tw:col-start-1", "tw:row-start-1", "tw:self-start", "tw:shrink-0", "tw:items-center", "tw:justify-center", "tw:rounded", "tw:size-8", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-5", {
+			"tw:bg-blue-100 tw:text-blue-600": variant === "info",
+			"tw:bg-warning-100 tw:text-warning-500": variant === "warning",
+			"tw:bg-error-100 tw:text-error-500": variant === "danger",
+			"tw:bg-green-100 tw:text-green-900": variant === "success"
+		}),
+		children: glyph
+	})] });
+};
+//#endregion
+//#region src/components/AlertModal/AlertModalOverlay.tsx
+const AlertModalOverlay = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(Overlay, {
+	...props,
+	ref,
+	className: cn("tw:fixed", "tw:inset-0", "tw:z-[1051]", "tw:bg-black/50", "tw:data-[state=open]:duration-500", "tw:data-[state=open]:fade-in-0", "tw:data-[state=open]:animate-in", "tw:data-[state=closed]:duration-500", "tw:data-[state=closed]:fade-out-0", "tw:data-[state=closed]:animate-out", className)
+});
+//#endregion
+//#region src/components/AlertModal/AlertModalTitle.tsx
+const AlertModalTitle = ({ children, className, ...props }) => /* @__PURE__ */ jsx(Title, {
+	...props,
+	asChild: true,
+	className: cn("tw:font-medium", "tw:text-foreground", "tw:break-anywhere", "tw:group-data-[design=default]/alert-modal:border-b", "tw:group-data-[design=default]/alert-modal:border-neutral-150", "tw:group-data-[design=default]/alert-modal:pb-3", className),
+	children: /* @__PURE__ */ jsx("h3", { children })
+});
+//#endregion
+//#region src/components/AlertModal/context.ts
+const AlertModalContext = createContext(null);
+const AlertModalContextProvider = AlertModalContext.Provider;
+const useAlertModalContext = () => {
+	const context = use(AlertModalContext);
+	if (context === null) throw new Error("AlertModal compound components must be rendered inside <AlertModal>.");
+	return context;
+};
+//#endregion
+//#region src/components/AlertModal/AlertModalContent.tsx
+const AlertModalContent = ({ variant = "info", icon, title, cancelLabel = "Cancel", confirmLabel: actionLabel = "Confirm", confirmDisabled = false, container, className, children, onEscapeKeyDown, ...props }) => {
+	const { isLoading, onConfirm, onCancel } = useAlertModalContext();
+	const designLanguage = useArgoDesign() ? "argo" : "default";
+	const handleEscapeKeyDown = (event) => {
+		event.stopPropagation();
+		if (isLoading) event.preventDefault();
+		onEscapeKeyDown?.(event);
+	};
+	return /* @__PURE__ */ jsx(Portal, {
+		container,
+		children: /* @__PURE__ */ jsx(AlertModalOverlay, {
+			onClick: (event) => event.stopPropagation(),
+			onKeyDown: (event) => {
+				if (event.key !== "Escape") event.stopPropagation();
+			},
+			children: /* @__PURE__ */ jsxs(Content, {
+				"data-design": designLanguage,
+				...children ? {} : { "aria-describedby": void 0 },
+				onEscapeKeyDown: handleEscapeKeyDown,
+				className: cn("tailwindcss-preflight", "tw:group/alert-modal", "tw:text-base", "tw:fixed", "tw:left-1/2", "tw:-translate-x-1/2", "tw:z-[1051]", "tw:data-[design=default]:top-20", "tw:data-[design=argo]:top-1/2", "tw:data-[design=argo]:-translate-y-1/2", "tw:w-full", "tw:max-w-[480px]", "tw:max-h-[calc(100vh-2*theme(spacing.20))]", "tw:data-[design=argo]:overflow-y-auto", "tw:flex", "tw:flex-col", "tw:gap-4", "tw:data-[design=default]:rounded-lg", "tw:data-[design=argo]:rounded-3xl", "tw:bg-popover", "tw:text-popover-foreground", "tw:data-[design=default]:px-7", "tw:data-[design=default]:py-8", "tw:data-[design=argo]:p-4", "tw:duration-200", "tw:data-[state=open]:animate-in", "tw:data-[state=open]:fade-in-0", "tw:data-[state=closed]:animate-out", "tw:data-[state=closed]:fade-out-0", "tw:data-[design=default]:data-[state=open]:zoom-in-80", "tw:data-[design=default]:data-[state=open]:slide-in-from-top-[48%]", "tw:data-[design=default]:data-[state=closed]:zoom-out-80", "tw:data-[design=default]:data-[state=closed]:slide-out-to-top-[48%]", "tw:data-[design=argo]:data-[state=open]:zoom-in-95", "tw:data-[design=argo]:data-[state=closed]:zoom-out-95", className),
+				...props,
+				children: [/* @__PURE__ */ jsxs(AlertModalHeader, { children: [
+					/* @__PURE__ */ jsx(AlertModalIcon, {
+						variant,
+						icon
+					}),
+					title && /* @__PURE__ */ jsx(AlertModalTitle, {
+						className: "tw:col-start-2 tw:row-start-1 tw:self-center",
+						children: title
+					}),
+					children && /* @__PURE__ */ jsx(AlertModalDescription, {
+						className: cn("tw:col-start-2", title ? "tw:row-start-2" : "tw:row-start-1 tw:self-center"),
+						children
+					})
+				] }), /* @__PURE__ */ jsxs(AlertModalFooter, { children: [/* @__PURE__ */ jsx(Cancel, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						disabled: isLoading,
+						onClick: onCancel,
+						className: "tw:group-data-[design=default]/alert-modal:flex-1",
+						children: cancelLabel
+					})
+				}), /* @__PURE__ */ jsx(Action, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: variant === "danger" ? "danger" : "primary",
+						isLoading,
+						disabled: isLoading || confirmDisabled,
+						onClick: onConfirm,
+						className: "tw:group-data-[design=default]/alert-modal:flex-1",
+						children: actionLabel
+					})
+				})] })]
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/AlertModal/AlertModalTrigger.tsx
+const AlertModalTrigger = ({ ref, onClick, onKeyDown, ...props }) => /* @__PURE__ */ jsx(Trigger, {
+	...props,
+	ref,
+	onClick: (event) => {
+		event.stopPropagation();
+		onClick?.(event);
+	},
+	onKeyDown: (event) => {
+		if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+		onKeyDown?.(event);
+	}
+});
+//#endregion
+//#region src/components/AlertModal/AlertModal.tsx
+const noop = () => void 0;
+const AlertModal = ({ children, onConfirm = noop, onCancel = noop, skipAsyncWait = false, isLoading = false, open, defaultOpen, onOpenChange, ...rest }) => {
+	const [isConfirming, setIsConfirming] = useState(false);
+	const isControlled = open !== void 0;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
+	const isOpen = isControlled ? open : uncontrolledOpen;
+	const confirmRef = useRef(onConfirm);
+	const cancelRef = useRef(onCancel);
+	const onOpenChangeRef = useRef(onOpenChange);
+	useEffect(() => {
+		confirmRef.current = onConfirm;
+		cancelRef.current = onCancel;
+		onOpenChangeRef.current = onOpenChange;
+	}, [
+		onConfirm,
+		onCancel,
+		onOpenChange
+	]);
+	const setOpen = useCallback((next) => {
+		if (!isControlled) setUncontrolledOpen(next);
+		onOpenChangeRef.current?.(next);
+	}, [isControlled]);
+	const context = useMemo(() => ({
+		isLoading: isConfirming || isLoading,
+		onConfirm: (event) => {
+			const result = confirmRef.current(event);
+			if (!(result !== null && typeof result === "object" && typeof result.then === "function") || skipAsyncWait) return;
+			event.preventDefault();
+			setIsConfirming(true);
+			Promise.resolve(result).finally(() => {
+				setIsConfirming(false);
+				setOpen(false);
+			});
+		},
+		onCancel: (event) => {
+			cancelRef.current(event);
+		}
+	}), [
+		isConfirming,
+		isLoading,
+		skipAsyncWait,
+		setOpen
+	]);
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		open: isOpen,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(AlertModalContextProvider, {
+			value: context,
+			children
+		})
+	});
+};
+AlertModal.Trigger = AlertModalTrigger;
+AlertModal.Content = AlertModalContent;
+//#endregion
+export { AlertModal };
+
+//# sourceMappingURL=AlertModal-BUC4Es8o.js.map

package/dist/AlertModal-BUC4Es8o.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertModal-BUC4Es8o.js","names":[],"sources":["../src/components/AlertModal/AlertModalDescription.tsx","../src/components/AlertModal/AlertModalFooter.tsx","../src/components/AlertModal/AlertModalHeader.tsx","../src/components/AlertModal/AlertModalIcon.tsx","../src/components/AlertModal/AlertModalOverlay.tsx","../src/components/AlertModal/AlertModalTitle.tsx","../src/components/AlertModal/context.ts","../src/components/AlertModal/AlertModalContent.tsx","../src/components/AlertModal/AlertModalTrigger.tsx","../src/components/AlertModal/AlertModal.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof AlertDialogPrimitive.Description>;\n\nexport const AlertModalDescription = ({ className, ...props }: Props) => (\n  <AlertDialogPrimitive.Description\n    className={cn(\n      'tw:font-sans',\n      'tw:tracking-normal',\n      'tw:font-normal',\n      'tw:text-muted-foreground',\n\n      'tw:group-data-[design=default]/alert-modal:text-foreground',\n      'tw:group-data-[design=default]/alert-modal:text-sm',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const AlertModalFooter = ({ className, ...props }: Props) => (\n  <div\n    className={cn(\n      'tw:flex',\n      'tw:gap-2',\n\n      'tw:group-data-[design=default]/alert-modal:flex-col',\n      'tw:group-data-[design=default]/alert-modal:sm:flex-row',\n\n      'tw:group-data-[design=argo]/alert-modal:justify-end',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const AlertModalHeader = ({ className, ...props }: Props) => (\n  <div\n    className={cn(\n      'tw:grid',\n      'tw:grid-cols-[auto_1fr]',\n      'tw:items-start',\n      'tw:gap-y-1',\n\n      // default (legacy) needs more breathing room below the title's separator border\n      'tw:group-data-[design=default]/alert-modal:gap-y-4',\n      'tw:group-data-[design=argo]/alert-modal:gap-x-3',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ReactNode } from 'react';\n\nimport { AlertTriangle, CircleCheck, Info } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { AlertModalVariant } from './variant';\n\nconst VARIANT_ICONS: Record<AlertModalVariant, ReactNode> = {\n  info: <Info />,\n  warning: <AlertTriangle />,\n  danger: <AlertTriangle />,\n  success: <CircleCheck />,\n};\n\ntype Props = {\n  variant: AlertModalVariant;\n  icon?: ReactNode;\n};\n\nexport const AlertModalIcon = ({ variant, icon }: Props) => {\n  const glyph = icon ?? VARIANT_ICONS[variant];\n\n  return (\n    <>\n      {/* Default design language: floating circular badge (Modal-style). Hidden in argo. */}\n      <div\n        data-slot=\"alert-modal-icon\"\n        className={cn(\n          'tw:group-data-[design=argo]/alert-modal:hidden',\n          'tw:absolute',\n          'tw:top-0',\n          'tw:left-8',\n          'tw:translate-y-[-50%]',\n          'tw:size-12',\n        )}\n      >\n        <div\n          className={cn('tw:relative', 'tw:rounded-full', 'tw:size-12', {\n            'tw:bg-blue-500': variant === 'info',\n            'tw:bg-warning-500': variant === 'warning',\n            'tw:bg-error-500': variant === 'danger',\n            'tw:bg-green-500': variant === 'success',\n          })}\n        >\n          <span\n            className={cn(\n              'tw:absolute',\n              'tw:inset-0',\n              'tw:flex',\n              'tw:items-center',\n              'tw:justify-center',\n              'tw:text-white',\n              'tw:[&_svg:not([class*=\"tw:size-\"])]:size-6',\n              'tw:[&_svg]:aspect-square',\n            )}\n          >\n            {glyph}\n          </span>\n        </div>\n      </div>\n\n      {/* Argo design language: inline tinted badge (Badge \"*-inverse\" pattern). Hidden in default. */}\n      <span\n        data-slot=\"alert-modal-icon\"\n        className={cn(\n          'tw:hidden',\n          'tw:group-data-[design=argo]/alert-modal:inline-flex',\n          // grid placement: column 1 of the first row, top-aligned with the first line of content\n          'tw:col-start-1',\n          'tw:row-start-1',\n          'tw:self-start',\n          'tw:shrink-0',\n          'tw:items-center',\n          'tw:justify-center',\n          'tw:rounded',\n          'tw:size-8',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n          {\n            'tw:bg-blue-100 tw:text-blue-600': variant === 'info',\n            'tw:bg-warning-100 tw:text-warning-500': variant === 'warning',\n            'tw:bg-error-100 tw:text-error-500': variant === 'danger',\n            'tw:bg-green-100 tw:text-green-900': variant === 'success',\n          },\n        )}\n      >\n        {glyph}\n      </span>\n    </>\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { Overlay } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof Overlay>;\n\nexport const AlertModalOverlay = ({ ref, className, ...props }: Props) => (\n  <Overlay\n    {...props}\n    ref={ref}\n    className={cn(\n      // positioning\n      'tw:fixed',\n      'tw:inset-0',\n      'tw:z-[1051]',\n\n      // background\n      'tw:bg-black/50',\n\n      // opening animation\n      'tw:data-[state=open]:duration-500',\n      'tw:data-[state=open]:fade-in-0',\n      'tw:data-[state=open]:animate-in',\n\n      // closing animation\n      'tw:data-[state=closed]:duration-500',\n      'tw:data-[state=closed]:fade-out-0',\n      'tw:data-[state=closed]:animate-out',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentPropsWithRef } from 'react';\nimport { Title } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof Title>;\n\nexport const AlertModalTitle = ({ children, className, ...props }: Props) => (\n  <Title\n    {...props}\n    asChild\n    className={cn(\n      'tw:font-medium',\n      'tw:text-foreground',\n      'tw:break-anywhere',\n\n      // default (legacy) gets a Modal-style separator line under the title (Modal uses border-neutral-150)\n      'tw:group-data-[design=default]/alert-modal:border-b',\n      'tw:group-data-[design=default]/alert-modal:border-neutral-150',\n      'tw:group-data-[design=default]/alert-modal:pb-3',\n      className,\n    )}\n  >\n    <h3>{children}</h3>\n  </Title>\n);\n","import { createContext, use } from 'react';\nimport type { MouseEvent } from 'react';\n\ntype AlertModalContextType = {\n  isLoading: boolean;\n  onConfirm: (event: MouseEvent<HTMLButtonElement>) => void;\n  onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n};\n\nconst AlertModalContext = createContext<AlertModalContextType | null>(null);\n\nexport const AlertModalContextProvider = AlertModalContext.Provider;\n\nexport const useAlertModalContext = (): AlertModalContextType => {\n  const context = use(AlertModalContext);\n  if (context === null)\n    throw new Error('AlertModal compound components must be rendered inside <AlertModal>.');\n  return context;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Action, Cancel, Content, Portal } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { AlertModalDescription } from './AlertModalDescription';\nimport { AlertModalFooter } from './AlertModalFooter';\nimport { AlertModalHeader } from './AlertModalHeader';\nimport { AlertModalIcon } from './AlertModalIcon';\nimport { AlertModalOverlay } from './AlertModalOverlay';\nimport { AlertModalTitle } from './AlertModalTitle';\nimport { useAlertModalContext } from './context';\nimport type { AlertModalVariant } from './variant';\n\ntype Props = {\n  variant?: AlertModalVariant;\n  icon?: ReactNode;\n  title?: ReactNode;\n  cancelLabel?: ReactNode;\n  confirmLabel?: ReactNode;\n  /** Blocks the confirm action while a host-tracked precondition is unmet. Cancel stays available. */\n  confirmDisabled?: boolean;\n  container?: ComponentProps<typeof Portal>['container'];\n} & Omit<ComponentProps<typeof Content>, 'title'>;\n\nexport const AlertModalContent = ({\n  variant = 'info',\n  icon,\n  title,\n  cancelLabel = 'Cancel',\n  confirmLabel: actionLabel = 'Confirm',\n  confirmDisabled = false,\n  container,\n  className,\n  children,\n  onEscapeKeyDown,\n  ...props\n}: Props) => {\n  const { isLoading, onConfirm, onCancel } = useAlertModalContext();\n  const designLanguage = useArgoDesign() ? 'argo' : 'default';\n\n  const handleEscapeKeyDown: ComponentProps<typeof Content>['onEscapeKeyDown'] = (event) => {\n    // Stop propagation so a parent Modal/Sheet doesn't also close when this is a nested confirmation.\n    event.stopPropagation();\n    // Lock dismissal while the action is running.\n    if (isLoading) event.preventDefault();\n    onEscapeKeyDown?.(event);\n  };\n\n  return (\n    <Portal container={container}>\n      <AlertModalOverlay\n        // Stop propagation at the overlay (common ancestor of backdrop + content):\n        // - without it, clicks/Enter inside the modal also fire handlers on the host that rendered\n        //   <AlertModal> (e.g. a clickable row, or an editor that opens a code block on Enter)\n        // - portaling the content does not prevent this\n        // - Escape is exempt so Radix can still close on Esc\n        onClick={(event) => event.stopPropagation()}\n        onKeyDown={(event) => {\n          if (event.key !== 'Escape') event.stopPropagation();\n        }}\n      >\n        <Content\n          data-design={designLanguage}\n          // Radix auto-links `aria-describedby` to `<AlertModalDescription>`. With no description\n          // (no children) it warns about the missing link — suppress it like Modal/Sheet do.\n          {...(children ? {} : { 'aria-describedby': undefined })}\n          onEscapeKeyDown={handleEscapeKeyDown}\n          className={cn(\n            'tailwindcss-preflight',\n            'tw:group/alert-modal',\n            'tw:text-base',\n\n            // positioning - horizontally centered; vertical anchor depends on the design language\n            'tw:fixed',\n            'tw:left-1/2',\n            'tw:-translate-x-1/2',\n            'tw:z-[1051]',\n            'tw:data-[design=default]:top-20',\n            'tw:data-[design=argo]:top-1/2',\n            'tw:data-[design=argo]:-translate-y-1/2',\n\n            // sizing - compact alert width\n            'tw:w-full',\n            'tw:max-w-[480px]',\n            'tw:max-h-[calc(100vh-2*theme(spacing.20))]',\n            'tw:data-[design=argo]:overflow-y-auto',\n\n            // layout: stack the header and footer (each owns its own internal layout)\n            'tw:flex',\n            'tw:flex-col',\n            'tw:gap-4',\n\n            'tw:data-[design=default]:rounded-lg',\n            'tw:data-[design=argo]:rounded-3xl',\n            'tw:bg-popover',\n            'tw:text-popover-foreground',\n\n            'tw:data-[design=default]:px-7',\n            'tw:data-[design=default]:py-8',\n            'tw:data-[design=argo]:p-4',\n\n            // animation — shared\n            'tw:duration-200',\n            'tw:data-[state=open]:animate-in',\n            'tw:data-[state=open]:fade-in-0',\n            'tw:data-[state=closed]:animate-out',\n            'tw:data-[state=closed]:fade-out-0',\n\n            // default design: Modal-style slide-down + zoom. No `slide-*-left-1/2`: under v4 the\n            // x-centring lives on the `translate` PROPERTY (it persists through the transform-based\n            // animation), so an enter `-50%` would stack on it (= -100%) and fly in from the left.\n            'tw:data-[design=default]:data-[state=open]:zoom-in-80',\n            'tw:data-[design=default]:data-[state=open]:slide-in-from-top-[48%]',\n            'tw:data-[design=default]:data-[state=closed]:zoom-out-80',\n            'tw:data-[design=default]:data-[state=closed]:slide-out-to-top-[48%]',\n\n            // argo design: pop from the centre — zoom only (centring persists on the translate property)\n            'tw:data-[design=argo]:data-[state=open]:zoom-in-95',\n            'tw:data-[design=argo]:data-[state=closed]:zoom-out-95',\n\n            className,\n          )}\n          {...props}\n        >\n          <AlertModalHeader>\n            <AlertModalIcon variant={variant} icon={icon} />\n\n            {title && (\n              <AlertModalTitle className=\"tw:col-start-2 tw:row-start-1 tw:self-center\">\n                {title}\n              </AlertModalTitle>\n            )}\n\n            {children && (\n              <AlertModalDescription\n                className={cn(\n                  'tw:col-start-2',\n                  title ? 'tw:row-start-2' : 'tw:row-start-1 tw:self-center',\n                )}\n              >\n                {children}\n              </AlertModalDescription>\n            )}\n          </AlertModalHeader>\n\n          <AlertModalFooter>\n            <Cancel asChild>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                disabled={isLoading}\n                onClick={onCancel}\n                className=\"tw:group-data-[design=default]/alert-modal:flex-1\"\n              >\n                {cancelLabel}\n              </Button>\n            </Cancel>\n\n            <Action asChild>\n              <Button\n                type=\"button\"\n                variant={variant === 'danger' ? 'danger' : 'primary'}\n                isLoading={isLoading}\n                disabled={isLoading || confirmDisabled}\n                onClick={onConfirm}\n                className=\"tw:group-data-[design=default]/alert-modal:flex-1\"\n              >\n                {actionLabel}\n              </Button>\n            </Action>\n          </AlertModalFooter>\n        </Content>\n      </AlertModalOverlay>\n    </Portal>\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { Trigger } from '@radix-ui/react-alert-dialog';\n\ntype Props = ComponentPropsWithRef<typeof Trigger>;\n\nexport const AlertModalTrigger = ({ ref, onClick, onKeyDown, ...props }: Props) => (\n  <Trigger\n    {...props}\n    ref={ref}\n    onClick={(event) => {\n      // The trigger sits in the normal DOM tree, often inside a clickable row/card. Stop the\n      // open-click from bubbling to that ancestor's onClick. (Radix still opens the modal —\n      // stopPropagation only blocks ancestors, not the open handler on the same element.)\n      event.stopPropagation();\n      onClick?.(event);\n    }}\n    onKeyDown={(event) => {\n      // Only the activation keys open the modal and would leak; stop just those so Tab/arrows/etc.\n      // still reach ancestor keyboard handlers. The button still activates (stopPropagation only\n      // blocks ancestors).\n      if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();\n      onKeyDown?.(event);\n    }}\n  />\n);\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps, MouseEvent } from 'react';\nimport { Root } from '@radix-ui/react-alert-dialog';\n\nimport { AlertModalContent } from './AlertModalContent';\nimport { AlertModalTrigger } from './AlertModalTrigger';\nimport { AlertModalContextProvider } from './context';\n\nconst noop = () => undefined;\n\ntype ConfirmHandler = (event: MouseEvent<HTMLButtonElement>) => void | Promise<unknown>;\ntype CancelHandler = (event: MouseEvent<HTMLButtonElement>) => void;\n\ntype Props = {\n  onConfirm?: ConfirmHandler;\n  onCancel?: CancelHandler;\n  skipAsyncWait?: boolean;\n  /** Marks the confirm action busy from the outside, on top of the state inferred from a thenable `onConfirm`. */\n  isLoading?: boolean;\n} & ComponentProps<typeof Root>;\n\nexport const AlertModal = ({\n  children,\n  onConfirm = noop,\n  onCancel = noop,\n  skipAsyncWait = false,\n  isLoading = false,\n  open,\n  defaultOpen,\n  onOpenChange,\n  ...rest\n}: Props) => {\n  const [isConfirming, setIsConfirming] = useState(false);\n\n  // Controllable open state: when `open` is provided the parent owns it; otherwise we keep our own.\n  const isControlled = open !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n  const isOpen = isControlled ? open : uncontrolledOpen;\n\n  const confirmRef = useRef(onConfirm);\n  const cancelRef = useRef(onCancel);\n  const onOpenChangeRef = useRef(onOpenChange);\n\n  // Latest-ref pattern: keep the handlers out of `context`'s deps so its identity stays stable,\n  // without writing to refs during render (synced in an effect, before any handler can fire).\n  useEffect(() => {\n    confirmRef.current = onConfirm;\n    cancelRef.current = onCancel;\n    onOpenChangeRef.current = onOpenChange;\n  }, [onConfirm, onCancel, onOpenChange]);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolledOpen(next);\n      onOpenChangeRef.current?.(next);\n    },\n    [isControlled],\n  );\n\n  const context = useMemo(\n    () => ({\n      // The two sources of \"the confirm action is running\" converge here, so every consumer\n      // downstream reads one answer regardless of which way the host drives it.\n      isLoading: isConfirming || isLoading,\n      onConfirm: (event: MouseEvent<HTMLButtonElement>) => {\n        const result = confirmRef.current(event);\n\n        // Treat any thenable as async, not just native promises.\n        const isThenable =\n          result !== null && typeof result === 'object' && typeof result.then === 'function';\n        if (!isThenable || skipAsyncWait) return;\n\n        // Keep the modal open while the async action runs, then close once it settles.\n        event.preventDefault();\n        setIsConfirming(true);\n        Promise.resolve(result).finally(() => {\n          setIsConfirming(false);\n          setOpen(false);\n        });\n      },\n      onCancel: (event: MouseEvent<HTMLButtonElement>) => {\n        cancelRef.current(event);\n      },\n    }),\n    [isConfirming, isLoading, skipAsyncWait, setOpen],\n  );\n\n  return (\n    <Root {...rest} open={isOpen} onOpenChange={setOpen}>\n      <AlertModalContextProvider value={context}>{children}</AlertModalContextProvider>\n    </Root>\n  );\n};\n\nAlertModal.Trigger = AlertModalTrigger;\nAlertModal.Content = AlertModalContent;\n"],"mappings":"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"}

package/dist/AppShell-B5GQN6Zs.js

@@ -0,0 +1,143 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useTheme } from "./context-KxxeMHbR.js";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+//#region src/blocks/AppShell/SidebarShell.tsx
+/**
+* Sidebar geometry: left-rail navigation + header row + main outlet, with an
+* optional right rail. The grid template names match the `[grid-area:*]`
+* utilities the `AppShell.*` slots write onto themselves, so slot placement
+* is independent of source order.
+*
+* `headerSpan` picks which of the two row templates applies — see
+* {@link AppShellHeaderSpan}. Both keep the same three columns, so the rails
+* line up either way.
+*/
+const SidebarShell = ({ ref, className, headerSpan, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-app-shell-geometry": "sidebar",
+	"data-header-span": headerSpan,
+	className: cn("tw:relative tw:grid tw:h-svh tw:w-full tw:bg-background", "tw:grid-cols-[auto_1fr_auto] tw:grid-rows-[auto_1fr]", headerSpan === "full" ? cn("tw:[grid-template-areas:\"header_header_header\"_\"sidebar_main_aside\"]", "tw:[&>[data-app-shell-slot=sidebar]]:[transform:translateZ(0)]", "tw:[&>[data-app-shell-slot=aside]]:[transform:translateZ(0)]", "tw:[&>[data-app-shell-slot=sidebar]]:z-50", "tw:[&>[data-app-shell-slot=aside]]:z-30") : "tw:[grid-template-areas:\"sidebar_header_aside\"_\"sidebar_main_aside\"]", className),
+	...props,
+	children
+});
+//#endregion
+//#region src/blocks/AppShell/TopNavShell.tsx
+/**
+* Top-nav geometry: header row spans the full width, main + aside live below.
+* The `sidebar` grid area is intentionally absent — the
+* `[grid-area:sidebar]` slot collapses to `display: none` so consumers can
+* pass the same composition under either brand. Primary navigation moves
+* into `<AppShell.Header>` for top-nav-first compositions.
+*
+* Takes no `headerSpan`: this header already spans the full width, so `AppShell`
+* keeps the prop away from this shell rather than having it accept and ignore it.
+*/
+const TopNavShell = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-app-shell-geometry": "topnav",
+	className: cn("tw:grid tw:h-svh tw:w-full tw:bg-background", "tw:grid-cols-[1fr_auto] tw:grid-rows-[auto_1fr]", "tw:[grid-template-areas:\"header_header\"_\"main_aside\"]", "tw:[&>[data-app-shell-slot=sidebar]]:hidden", className),
+	...props,
+	children
+});
+//#endregion
+//#region src/blocks/AppShell/AppShell.tsx
+const Root$1 = ({ ref, className, headerSpan = "content", children, ...props }) => {
+	const { currentTheme: brand } = useTheme();
+	if (brand.shell === "topnav") return /* @__PURE__ */ jsx(TopNavShell, {
+		ref,
+		className,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(SidebarShell, {
+		ref,
+		className,
+		headerSpan,
+		...props,
+		children
+	});
+};
+const Header = ({ ref, className, asChild, flush = false, children, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "header", {
+		ref,
+		"data-app-shell-slot": "header",
+		"data-flush": flush || void 0,
+		className: cn("tw:flex", flush ? "tw:items-stretch tw:gap-0" : "tw:items-center tw:gap-3 tw:border-b tw:border-border tw:bg-background tw:px-4", "tw:[grid-area:header]", className),
+		...props,
+		children
+	});
+};
+const SidebarSlot = ({ ref, className, asChild, children, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		ref,
+		"data-app-shell-slot": "sidebar",
+		className: cn("tw:flex tw:min-h-0 tw:flex-col", "tw:[grid-area:sidebar]", className),
+		...props,
+		children
+	});
+};
+const Main = ({ ref, className, asChild, children, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "main", {
+		ref,
+		"data-app-shell-slot": "main",
+		className: cn("tw:flex tw:min-w-0 tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-auto", "tw:p-6", "tw:[grid-area:main]", className),
+		...props,
+		children
+	});
+};
+const Aside = ({ ref, className, asChild, flush = false, children, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "aside", {
+		ref,
+		"data-app-shell-slot": "aside",
+		"data-flush": flush || void 0,
+		className: cn("tw:flex tw:min-h-0 tw:shrink-0 tw:flex-col", flush ? "tw:w-auto tw:overflow-visible" : "tw:w-72 tw:overflow-auto tw:border-l tw:border-border tw:bg-background", "tw:[grid-area:aside]", className),
+		...props,
+		children
+	});
+};
+/**
+* App-shell layout primitive. Reads `useTheme().brand.shell` and dispatches to
+* a sidebar (left rail) or top-nav geometry. Consumers compose the same
+* `<AppShell.Header>` / `<AppShell.Sidebar>` / `<AppShell.Main>` /
+* `<AppShell.Aside>` slots — the shell decides where each slot lives based on
+* the active brand.
+*
+* **When to use:** the root layout of any app that wants to follow the active
+* brand's shell geometry. Host a `PageLayout` inside `<AppShell.Main>` for
+* the per-page content column. Pass `headerSpan="full"` for a full-bleed header
+* row above both rails.
+* **When NOT to use:** standalone screens that aren't part of a navigated app
+* (sign-in, error pages). Render those without `AppShell`.
+* **Composition:** must be rendered inside a `<ThemeProvider>` — the geometry
+* is brand-driven. Pass the same content across brands; the shell handles
+* placement and shows/hides the `Sidebar` slot accordingly.
+*
+* @see AppShell.stories.tsx — flip the Storybook brand toolbar to see the
+* sidebar / top-nav geometry swap from a single composition.
+*/
+const AppShell = Object.assign(Root$1, {
+	/**
+	* Top header row. Renders above `Main` in the sidebar shell; renders as the
+	* top bar (with full-width navigation room) in the top-nav shell.
+	*/
+	Header,
+	/**
+	* Left navigation rail. Rendered in the sidebar shell; hidden by the
+	* top-nav shell so the same composition works under either brand — move
+	* primary navigation into `Header` for top-nav-first compositions.
+	*/
+	Sidebar: SidebarSlot,
+	/**
+	* Main content outlet. Applies an opinionated default page gutter (`tw:p-6`)
+	* so content looks right out of the box; override the padding (e.g. `tw:p-0`)
+	* when the app owns its own gutter.
+	*/
+	Main,
+	/** Optional right rail. Present in both shells. */
+	Aside
+});
+//#endregion
+export { AppShell };
+
+//# sourceMappingURL=AppShell-B5GQN6Zs.js.map

package/dist/AppShell-B5GQN6Zs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell-B5GQN6Zs.js","names":["Root"],"sources":["../src/blocks/AppShell/SidebarShell.tsx","../src/blocks/AppShell/TopNavShell.tsx","../src/blocks/AppShell/AppShell.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport type { AppShellHeaderSpan } from './types';\n\n// Required, not defaulted: `AppShell` owns the default so the generated component\n// API reports it, and this shell is internal — nothing else constructs it.\ntype Props = ComponentProps<'div'> & { headerSpan: AppShellHeaderSpan };\n\n/**\n * Sidebar geometry: left-rail navigation + header row + main outlet, with an\n * optional right rail. The grid template names match the `[grid-area:*]`\n * utilities the `AppShell.*` slots write onto themselves, so slot placement\n * is independent of source order.\n *\n * `headerSpan` picks which of the two row templates applies — see\n * {@link AppShellHeaderSpan}. Both keep the same three columns, so the rails\n * line up either way.\n */\nexport const SidebarShell = ({ ref, className, headerSpan, children, ...props }: Props) => (\n  <div\n    ref={ref}\n    data-app-shell-geometry=\"sidebar\"\n    data-header-span={headerSpan}\n    className={cn(\n      'tw:relative tw:grid tw:h-svh tw:w-full tw:bg-background',\n      'tw:grid-cols-[auto_1fr_auto] tw:grid-rows-[auto_1fr]',\n      headerSpan === 'full'\n        ? cn(\n            'tw:[grid-template-areas:\"header_header_header\"_\"sidebar_main_aside\"]',\n            // `Sidebar`'s inner wrapper is `fixed inset-y-0` — it owns that for its\n            // collapse/resize animation — so it anchors to the viewport and paints\n            // over a full-width header. Promoting the rail slots to containing\n            // blocks re-anchors those fixed children to the slot's own grid box.\n            // Beats overriding `top`: no `!important` to out-specify `inset-y-0`,\n            // and the shell never needs to know the header's height.\n            'tw:[&>[data-app-shell-slot=sidebar]]:[transform:translateZ(0)]',\n            'tw:[&>[data-app-shell-slot=aside]]:[transform:translateZ(0)]',\n            // A containing block is also a stacking context, so the promotion traps\n            // the rail's own `z-50` inside the slot. The left rail sits before `main`\n            // in source order, so without a slot-level z-index an expand-on-hover rail\n            // paints *under* main's positioned content instead of over it. Restate it\n            // here — grid items take `z-index` without `position`. The right rail needs\n            // one too: source order only beats `z-index: auto` content, so main's\n            // sticky elements (table headers at `z-10`, PageLayout's sticky header at\n            // `z-20`) would paint over an aside left at `auto`. `z-30` clears them all\n            // outright — no source-order tiebreak — while staying under the left\n            // rail's `z-50`, keeping an expanding left rail above a filled right one.\n            'tw:[&>[data-app-shell-slot=sidebar]]:z-50',\n            'tw:[&>[data-app-shell-slot=aside]]:z-30',\n            // The promotion is also what lets `styles.css` clip a parked off-canvas\n            // rail: it makes the slot that panel's containing block.\n          )\n        : 'tw:[grid-template-areas:\"sidebar_header_aside\"_\"sidebar_main_aside\"]',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * Top-nav geometry: header row spans the full width, main + aside live below.\n * The `sidebar` grid area is intentionally absent — the\n * `[grid-area:sidebar]` slot collapses to `display: none` so consumers can\n * pass the same composition under either brand. Primary navigation moves\n * into `<AppShell.Header>` for top-nav-first compositions.\n *\n * Takes no `headerSpan`: this header already spans the full width, so `AppShell`\n * keeps the prop away from this shell rather than having it accept and ignore it.\n */\nexport const TopNavShell = ({ ref, className, children, ...props }: Props) => (\n  <div\n    ref={ref}\n    data-app-shell-geometry=\"topnav\"\n    className={cn(\n      'tw:grid tw:h-svh tw:w-full tw:bg-background',\n      'tw:grid-cols-[1fr_auto] tw:grid-rows-[auto_1fr]',\n      'tw:[grid-template-areas:\"header_header\"_\"main_aside\"]',\n      // The sidebar slot has no place in this geometry — hide it without\n      // forcing callers to conditionalise their JSX.\n      'tw:[&>[data-app-shell-slot=sidebar]]:hidden',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentPropsWithoutRef, ComponentRef, Ref } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { useTheme } from '../../components/ThemeProvider';\nimport { cn } from '../../utils';\n\nimport { SidebarShell } from './SidebarShell';\nimport { TopNavShell } from './TopNavShell';\nimport type { AppShellHeaderSpan } from './types';\n\ntype RootProps = ComponentPropsWithoutRef<'div'> & {\n  /**\n   * How far the header row stretches. `content` (default) gives it the middle\n   * column only, with both rails beside it; `full` spans all three columns and\n   * drops the rails below it, so the brand mark aligns to the viewport edge.\n   * No-op under the top-nav geometry, whose header is already full width.\n   *\n   * Reach for `full` when the header carries app-wide identity (brand mark,\n   * project switcher, account menu) rather than page-level navigation.\n   */\n  headerSpan?: AppShellHeaderSpan;\n};\n\nconst Root = ({\n  ref,\n  className,\n  // Defaulted here rather than in SidebarShell so the generated component API\n  // records `content` instead of \"no default\".\n  headerSpan = 'content',\n  children,\n  ...props\n}: RootProps & { ref?: Ref<ComponentRef<'div'>> }) => {\n  const { currentTheme: brand } = useTheme();\n\n  // Branch rather than pick a component and spread: `headerSpan` is meaningless\n  // to the top-nav geometry, and forwarding it there would land a stray\n  // `headerspan` attribute on the DOM node.\n  if (brand.shell === 'topnav') {\n    return (\n      <TopNavShell ref={ref} className={className} {...props}>\n        {children}\n      </TopNavShell>\n    );\n  }\n\n  return (\n    <SidebarShell ref={ref} className={className} headerSpan={headerSpan} {...props}>\n      {children}\n    </SidebarShell>\n  );\n};\n\ntype SlotProps = ComponentPropsWithoutRef<'div'> & {\n  /** Render as the child element (Radix-Slot pattern), forwarding props onto it. */\n  asChild?: boolean;\n};\n\ntype ChromeSlotProps = SlotProps & {\n  /**\n   * Drop the slot's own padding, background and border so a hosted chrome component\n   * (`Navbar` in `Header`, `Sidebar side=\"right\"` in `Aside`) can render edge to edge.\n   *\n   * The slots paint themselves, which is right when you put content straight into them.\n   * It is wrong when the child is already a full-bleed surface: the child ends up inset\n   * inside the slot with the slot's background showing through as gutters at each end.\n   * Use this instead of re-stating the overrides at the call site — hand-written\n   * overrides also have to win a cascade fight, which is why they tend to grow an `!`.\n   */\n  flush?: boolean;\n};\n\nconst Header = ({\n  ref,\n  className,\n  asChild,\n  flush = false,\n  children,\n  ...props\n}: ChromeSlotProps & { ref?: Ref<ComponentRef<'header'>> }) => {\n  const Comp = asChild ? Slot : 'header';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"header\"\n      data-flush={flush || undefined}\n      className={cn(\n        'tw:flex',\n        flush\n          ? 'tw:items-stretch tw:gap-0'\n          : 'tw:items-center tw:gap-3 tw:border-b tw:border-border tw:bg-background tw:px-4',\n        'tw:[grid-area:header]',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nconst SidebarSlot = ({\n  ref,\n  className,\n  asChild,\n  children,\n  ...props\n}: SlotProps & { ref?: Ref<ComponentRef<'div'>> }) => {\n  const Comp = asChild ? Slot : 'div';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"sidebar\"\n      // In a sidebar shell the children render in place. In a top-nav shell\n      // the slot is hidden — the shell defines `display: none` for the\n      // `sidebar` grid area in that geometry, so consumers can pass the\n      // same JSX and let the shell decide visibility.\n      className={cn('tw:flex tw:min-h-0 tw:flex-col', 'tw:[grid-area:sidebar]', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nconst Main = ({\n  ref,\n  className,\n  asChild,\n  children,\n  ...props\n}: SlotProps & { ref?: Ref<ComponentRef<'main'>> }) => {\n  const Comp = asChild ? Slot : 'main';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"main\"\n      className={cn(\n        'tw:flex tw:min-w-0 tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-auto',\n        // Opinionated default page gutter so page content clears the header /\n        // rails and looks right out of the box. `cn` is tailwind-merge, so an\n        // app that owns its own gutter overrides it (e.g. `className=\"tw:p-0\"`).\n        'tw:p-6',\n        'tw:[grid-area:main]',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nconst Aside = ({\n  ref,\n  className,\n  asChild,\n  flush = false,\n  children,\n  ...props\n}: ChromeSlotProps & { ref?: Ref<ComponentRef<'aside'>> }) => {\n  const Comp = asChild ? Slot : 'aside';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"aside\"\n      data-flush={flush || undefined}\n      className={cn(\n        'tw:flex tw:min-h-0 tw:shrink-0 tw:flex-col',\n        // A hosted `Sidebar side=\"right\"` owns its own width, border, background and\n        // scrolling — so the slot must not also set them, or the rail renders inset\n        // inside a second painted surface.\n        flush\n          ? 'tw:w-auto tw:overflow-visible'\n          : 'tw:w-72 tw:overflow-auto tw:border-l tw:border-border tw:bg-background',\n        'tw:[grid-area:aside]',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\n/**\n * App-shell layout primitive. Reads `useTheme().brand.shell` and dispatches to\n * a sidebar (left rail) or top-nav geometry. Consumers compose the same\n * `<AppShell.Header>` / `<AppShell.Sidebar>` / `<AppShell.Main>` /\n * `<AppShell.Aside>` slots — the shell decides where each slot lives based on\n * the active brand.\n *\n * **When to use:** the root layout of any app that wants to follow the active\n * brand's shell geometry. Host a `PageLayout` inside `<AppShell.Main>` for\n * the per-page content column. Pass `headerSpan=\"full\"` for a full-bleed header\n * row above both rails.\n * **When NOT to use:** standalone screens that aren't part of a navigated app\n * (sign-in, error pages). Render those without `AppShell`.\n * **Composition:** must be rendered inside a `<ThemeProvider>` — the geometry\n * is brand-driven. Pass the same content across brands; the shell handles\n * placement and shows/hides the `Sidebar` slot accordingly.\n *\n * @see AppShell.stories.tsx — flip the Storybook brand toolbar to see the\n * sidebar / top-nav geometry swap from a single composition.\n */\nexport const AppShell = Object.assign(Root, {\n  /**\n   * Top header row. Renders above `Main` in the sidebar shell; renders as the\n   * top bar (with full-width navigation room) in the top-nav shell.\n   */\n  Header,\n  /**\n   * Left navigation rail. Rendered in the sidebar shell; hidden by the\n   * top-nav shell so the same composition works under either brand — move\n   * primary navigation into `Header` for top-nav-first compositions.\n   */\n  Sidebar: SidebarSlot,\n  /**\n   * Main content outlet. Applies an opinionated default page gutter (`tw:p-6`)\n   * so content looks right out of the box; override the padding (e.g. `tw:p-0`)\n   * when the app owns its own gutter.\n   */\n  Main,\n  /** Optional right rail. Present in both shells. */\n  Aside,\n});\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAa,gBAAgB,EAAE,KAAK,WAAW,YAAY,UAAU,GAAG,YACtE,oBAAC,OAAD;CACO;CACL,2BAAwB;CACxB,oBAAkB;CAClB,WAAW,GACT,2DACA,wDACA,eAAe,SACX,GACE,4EAOA,kEACA,gEAWA,6CACA,yCAGF,IACA,4EACJ,SACF;CACA,GAAI;CAEH;AACE,CAAA;;;;;;;;;;;;;AC5CP,MAAa,eAAe,EAAE,KAAK,WAAW,UAAU,GAAG,YACzD,oBAAC,OAAD;CACO;CACL,2BAAwB;CACxB,WAAW,GACT,+CACA,mDACA,6DAGA,+CACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;;;ACTP,MAAMA,UAAQ,EACZ,KACA,WAGA,aAAa,WACb,UACA,GAAG,YACiD;CACpD,MAAM,EAAE,cAAc,UAAU,SAAS;CAKzC,IAAI,MAAM,UAAU,UAClB,OACE,oBAAC,aAAD;EAAkB;EAAgB;EAAW,GAAI;EAC9C;CACU,CAAA;CAIjB,OACE,oBAAC,cAAD;EAAmB;EAAgB;EAAuB;EAAY,GAAI;EACvE;CACW,CAAA;AAElB;AAqBA,MAAM,UAAU,EACd,KACA,WACA,SACA,QAAQ,OACR,UACA,GAAG,YAC0D;CAE7D,OACE,oBAFW,UAAU,OAAO,UAE5B;EACO;EACL,uBAAoB;EACpB,cAAY,SAAS,KAAA;EACrB,WAAW,GACT,WACA,QACI,8BACA,kFACJ,yBACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,eAAe,EACnB,KACA,WACA,SACA,UACA,GAAG,YACiD;CAEpD,OACE,oBAFW,UAAU,OAAO,OAE5B;EACO;EACL,uBAAoB;EAKpB,WAAW,GAAG,kCAAkC,0BAA0B,SAAS;EACnF,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,QAAQ,EACZ,KACA,WACA,SACA,UACA,GAAG,YACkD;CAErD,OACE,oBAFW,UAAU,OAAO,QAE5B;EACO;EACL,uBAAoB;EACpB,WAAW,GACT,wEAIA,UACA,uBACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,SAAS,EACb,KACA,WACA,SACA,QAAQ,OACR,UACA,GAAG,YACyD;CAE5D,OACE,oBAFW,UAAU,OAAO,SAE5B;EACO;EACL,uBAAoB;EACpB,cAAY,SAAS,KAAA;EACrB,WAAW,GACT,8CAIA,QACI,kCACA,0EACJ,wBACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,WAAW,OAAO,OAAOA,QAAM;;;;;CAK1C;;;;;;CAMA,SAAS;;;;;;CAMT;;CAEA;AACF,CAAC"}

package/dist/AutoSaveTextarea-BeuWuszr.js

@@ -0,0 +1,58 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { CircleCheck, Loader2 } from "./icons-Cek151jC.js";
+import { Textarea } from "./internal/blocks/Textarea.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/AutoSaveTextarea/AutoSaveTextarea.tsx
+const AutoSaveTextarea = ({ savedValue, onSave, placeholder, disabled, grow = false, ...textareaProps }) => {
+	const { maxLength, ...restTextareaProps } = textareaProps;
+	const [value, setValue] = useState(null);
+	const [isSaving, setIsSaving] = useState(false);
+	const currentValue = value ?? savedValue ?? "";
+	const isOverLimit = maxLength != null && currentValue.length > maxLength;
+	const isChanged = value !== null && savedValue !== value.trim();
+	const onSaveHandler = (blurValue = "") => {
+		if (!isChanged || isOverLimit) return;
+		setIsSaving(true);
+		onSave(blurValue.trim()).catch(() => {}).finally(() => {
+			setIsSaving(false);
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tw:relative", grow && "tw:-m-1 tw:flex tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-hidden tw:px-3 tw:py-1"),
+		children: [/* @__PURE__ */ jsx(Textarea, {
+			...restTextareaProps,
+			containerClassName: cn(grow && "tw:min-h-0 tw:flex-1 tw:overflow-hidden tw:[&>textarea]:!min-h-full tw:[&>textarea]:!max-h-full tw:[&>textarea]:overflow-y-auto", restTextareaProps.containerClassName),
+			state: isOverLimit ? "error" : void 0,
+			value: currentValue,
+			onValueChange: setValue,
+			onValueBlur: () => onSaveHandler(value ?? ""),
+			placeholder,
+			disabled: disabled || isSaving,
+			disableResize: grow,
+			maxRows: grow ? "unlimited" : restTextareaProps.maxRows
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("tw:mt-1 tw:flex tw:items-center tw:text-xs", maxLength != null ? "tw:justify-between" : "tw:justify-end"),
+			children: [maxLength != null && /* @__PURE__ */ jsxs("span", {
+				className: cn(isOverLimit ? "tw:text-error-500" : "tw:text-neutral-400"),
+				children: [
+					currentValue.length,
+					" / ",
+					maxLength
+				]
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "tw:flex tw:items-center tw:gap-1 tw:text-neutral-400",
+				children: [
+					isOverLimit && "Character limit exceeded",
+					!isOverLimit && isChanged && !isSaving && "Unsaved",
+					!isOverLimit && isChanged && isSaving && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin" }), " Saving"] }),
+					!isOverLimit && value !== null && !isChanged && !isSaving && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CircleCheck, { className: "tw:size-4 tw:text-green-500" }), " Saved"] })
+				]
+			})]
+		})]
+	});
+};
+//#endregion
+export { AutoSaveTextarea };
+
+//# sourceMappingURL=AutoSaveTextarea-BeuWuszr.js.map

package/dist/AutoSaveTextarea-BeuWuszr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSaveTextarea-BeuWuszr.js","names":[],"sources":["../src/blocks/AutoSaveTextarea/AutoSaveTextarea.tsx"],"sourcesContent":["import { type ComponentProps, useState } from 'react';\n\nimport { CircleCheck, Loader2 } from '../../icons';\nimport { cn } from '../../utils';\nimport { Textarea } from '../Textarea';\n\ntype AutoSaveTextareaProps = {\n  savedValue?: string;\n  onSave: (value: string) => Promise<void>;\n  placeholder?: string;\n  disabled?: boolean;\n  grow?: boolean;\n} & Pick<\n  ComponentProps<typeof Textarea>,\n  'variant' | 'minRows' | 'maxRows' | 'className' | 'containerClassName' | 'maxLength'\n>;\n\nexport const AutoSaveTextarea = ({\n  savedValue,\n  onSave,\n  placeholder,\n  disabled,\n  grow = false,\n  ...textareaProps\n}: AutoSaveTextareaProps) => {\n  const { maxLength, ...restTextareaProps } = textareaProps;\n  const [value, setValue] = useState<string | null>(null);\n  const [isSaving, setIsSaving] = useState(false);\n\n  const currentValue = value ?? savedValue ?? '';\n  const isOverLimit = maxLength != null && currentValue.length > maxLength;\n  const isChanged = value !== null && savedValue !== value.trim();\n\n  const onSaveHandler = (blurValue = '') => {\n    if (!isChanged || isOverLimit) return;\n\n    setIsSaving(true);\n    onSave(blurValue.trim())\n      .catch(() => {})\n      .finally(() => {\n        setIsSaving(false);\n      });\n  };\n\n  return (\n    <div\n      className={cn(\n        'tw:relative',\n        // `-mx-1 + px-3` gives the focus ring 4px of horizontal breathing room inside\n        // ancestors that clip with `overflow: hidden` and no horizontal padding (e.g. the\n        // Kai sidebar's TabsContent). `-my-1 + py-1` keeps the original zero vertical inset.\n        grow &&\n          'tw:-m-1 tw:flex tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-hidden tw:px-3 tw:py-1',\n      )}\n    >\n      <Textarea\n        {...restTextareaProps}\n        containerClassName={cn(\n          // Descendant selectors match InputGroup's `tw:[&>textarea]:!min-h-[…]` specificity\n          // so the textarea fills the wrapper instead of being pinned to the sizing min-height.\n          grow &&\n            'tw:min-h-0 tw:flex-1 tw:overflow-hidden tw:[&>textarea]:!min-h-full tw:[&>textarea]:!max-h-full tw:[&>textarea]:overflow-y-auto',\n          restTextareaProps.containerClassName,\n        )}\n        state={isOverLimit ? 'error' : undefined}\n        value={currentValue}\n        onValueChange={setValue}\n        onValueBlur={() => onSaveHandler(value ?? '')}\n        placeholder={placeholder}\n        disabled={disabled || isSaving}\n        disableResize={grow}\n        // `grow` fills the container regardless of content length; skip the 4-row cap.\n        maxRows={grow ? 'unlimited' : restTextareaProps.maxRows}\n      />\n      <div\n        className={cn(\n          'tw:mt-1 tw:flex tw:items-center tw:text-xs',\n          maxLength != null ? 'tw:justify-between' : 'tw:justify-end',\n        )}\n      >\n        {maxLength != null && (\n          <span className={cn(isOverLimit ? 'tw:text-error-500' : 'tw:text-neutral-400')}>\n            {currentValue.length} / {maxLength}\n          </span>\n        )}\n        <span className=\"tw:flex tw:items-center tw:gap-1 tw:text-neutral-400\">\n          {isOverLimit && 'Character limit exceeded'}\n          {!isOverLimit && isChanged && !isSaving && 'Unsaved'}\n          {!isOverLimit && isChanged && isSaving && (\n            <>\n              <Loader2 className=\"tw:size-4 tw:animate-spin\" /> Saving\n            </>\n          )}\n          {!isOverLimit && value !== null && !isChanged && !isSaving && (\n            <>\n              <CircleCheck className=\"tw:size-4 tw:text-green-500\" /> Saved\n            </>\n          )}\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAiBA,MAAa,oBAAoB,EAC/B,YACA,QACA,aACA,UACA,OAAO,OACP,GAAG,oBACwB;CAC3B,MAAM,EAAE,WAAW,GAAG,sBAAsB;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CACtD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,MAAM,eAAe,SAAS,cAAc;CAC5C,MAAM,cAAc,aAAa,QAAQ,aAAa,SAAS;CAC/D,MAAM,YAAY,UAAU,QAAQ,eAAe,MAAM,KAAK;CAE9D,MAAM,iBAAiB,YAAY,OAAO;EACxC,IAAI,CAAC,aAAa,aAAa;EAE/B,YAAY,IAAI;EAChB,OAAO,UAAU,KAAK,CAAC,CAAC,CACrB,YAAY,CAAC,CAAC,CAAC,CACf,cAAc;GACb,YAAY,KAAK;EACnB,CAAC;CACL;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,GACT,eAIA,QACE,qFACJ;EARF,UAAA,CAUE,oBAAC,UAAD;GACE,GAAI;GACJ,oBAAoB,GAGlB,QACE,mIACF,kBAAkB,kBACpB;GACA,OAAO,cAAc,UAAU,KAAA;GAC/B,OAAO;GACP,eAAe;GACf,mBAAmB,cAAc,SAAS,EAAE;GAC/B;GACb,UAAU,YAAY;GACtB,eAAe;GAEf,SAAS,OAAO,cAAc,kBAAkB;EACjD,CAAA,GACD,qBAAC,OAAD;GACE,WAAW,GACT,8CACA,aAAa,OAAO,uBAAuB,gBAC7C;GAJF,UAAA,CAMG,aAAa,QACZ,qBAAC,QAAD;IAAM,WAAW,GAAG,cAAc,sBAAsB,qBAAqB;IAA7E,UAAA;KACG,aAAa;KAAO;KAAI;IACrB;GAER,CAAA,GAAA,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA;KACG,eAAe;KACf,CAAC,eAAe,aAAa,CAAC,YAAY;KAC1C,CAAC,eAAe,aAAa,YAC5B,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,SAAD,EAAS,WAAU,4BAA6B,CAAA,GAAC,SACjD,EAAA,CAAA;KAEH,CAAC,eAAe,UAAU,QAAQ,CAAC,aAAa,CAAC,YAChD,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD,EAAa,WAAU,8BAA+B,CAAA,GAAC,QACvD,EAAA,CAAA;IAEA;GACH,CAAA,CAAA;EACF,CAAA,CAAA;;AAET"}