@keboola/design 11.0.0 → 11.0.1

package/dist/Modal-BA5Wc3sx.js

@@ -0,0 +1,185 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { X } from "./icons-Cek151jC.js";
+import { Button } from "./Button-nzmDNS2q.js";
+import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-C76ke2eo.js";
+import { Separator } from "./internal/components/Separator.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Close, Content, Portal, Root, Trigger } from "@radix-ui/react-dialog";
+//#region src/components/Modal/ModalBody.tsx
+/**
+* Scrollable body slot for `Modal`. Place form fields, content blocks, or detail panels here.
+* Takes available height inside `Modal.Content` and scrolls when content overflows.
+*/
+const ModalBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "modal-body",
+	className: cn("tw:flex-1", "tw:overflow-y-auto", "tw:group-data-[argo=true]/modal:scroll-fade-y", "tw:group-data-[argo=false]/modal:px-7", "tw:group-data-[argo=true]/modal:px-4", "tw:py-1", "tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4", "tw:[&_svg]:shrink-0", className),
+	...props
+});
+//#endregion
+//#region src/components/Modal/ModalContent.tsx
+const ModalContent = ({ size = "medium", className, children, onEscapeKeyDown, ...props }) => {
+	const renderArgo = useArgoDesign();
+	const handleEscapeKeyDown = (event) => {
+		event.stopPropagation();
+		onEscapeKeyDown?.(event);
+	};
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsx(Content, {
+		...props,
+		"data-argo": renderArgo,
+		"data-size": size,
+		className: cn("tailwindcss-preflight", "tw:group/modal", "tw:fixed", "tw:left-1/2", "tw:-translate-x-1/2", "tw:z-[1051]", "tw:data-[argo=false]:top-20", "tw:data-[argo=true]:top-1/2", "tw:data-[argo=true]:-translate-y-1/2", "tw:w-full", "tw:max-w-2xl", "tw:max-h-[calc(100vh-2*theme(spacing.20))]", "tw:flex", "tw:flex-col", "tw:gap-4", "tw:data-[argo=false]:rounded-lg", "tw:data-[argo=true]:rounded-3xl", "tw:bg-card", "tw:text-card-foreground", "tw:data-[argo=false]:py-8", "tw:data-[argo=true]:py-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-[argo=false]:data-[state=open]:zoom-in-80", "tw:data-[argo=false]:data-[state=open]:slide-in-from-top-[48%]", "tw:data-[argo=false]:data-[state=closed]:zoom-out-80", "tw:data-[argo=false]:data-[state=closed]:slide-out-to-top-[48%]", "tw:data-[argo=true]:data-[state=open]:zoom-in-95", "tw:data-[argo=true]:data-[state=closed]:zoom-out-95", {
+			"tw:max-w-[480px]": size === "small",
+			"tw:max-w-4xl": size === "large"
+		}, className),
+		onEscapeKeyDown: handleEscapeKeyDown,
+		children
+	}) }) });
+};
+//#endregion
+//#region src/components/Modal/ModalFooter.tsx
+const ModalFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: cn("tw:group-data-[argo=false]/modal:px-7", "tw:group-data-[argo=true]/modal:px-4", className)
+});
+//#endregion
+//#region src/components/Modal/ModalActions.tsx
+/**
+* Container for the header's top-right controls — any `actions` passed to `Modal.Header` plus the
+* close icon. Sits in the header grid's last column, top-aligned. Mirrors `Alert`'s action slot.
+*/
+const ModalActions = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("tw:col-start-3", "tw:row-start-1", "tw:self-start", "tw:flex", "tw:items-center", "tw:gap-1", "tw:group-data-[argo=true]/modal:ml-3", className),
+	...props
+});
+//#endregion
+//#region src/components/Modal/ModalHeader.tsx
+/** Modal header: `[icon] | title (children) | actions + close` on row 1, `description` on row 2. */
+const ModalHeader = ({ className, icon, description, "aria-description": ariaDescription, actions, hideCloseIcon = false, children, ...props }) => /* @__PURE__ */ jsxs("div", {
+	...props,
+	"data-slot": "modal-header",
+	className: cn("tw:grid", "tw:grid-cols-[auto_1fr_auto]", "tw:items-center", "tw:group-data-[argo=false]/modal:px-7", "tw:group-data-[argo=true]/modal:px-4", className),
+	children: [
+		icon,
+		children && /* @__PURE__ */ jsx(ModalTitle, {
+			className: "tw:col-start-2 tw:row-start-1",
+			children
+		}),
+		(actions || !hideCloseIcon) && /* @__PURE__ */ jsxs(ModalActions, { children: [actions, !hideCloseIcon && /* @__PURE__ */ jsx(Close, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "invisible",
+				size: "icon-sm",
+				children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
+					className: "tw:sr-only",
+					children: "Close"
+				})]
+			})
+		})] }),
+		(description || ariaDescription) && /* @__PURE__ */ jsx(ModalDescription, {
+			className: cn("tw:col-start-1", "tw:col-end-4", "tw:row-start-2", description ? "tw:mt-1" : "tw:sr-only"),
+			children: description ?? ariaDescription
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: cn("tw:col-start-1", "tw:col-end-4", "tw:mt-5", "tw:hidden", "tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body])_&]:block", "tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body]_[data-slot=tabs-root])_&]:!hidden"),
+			children: /* @__PURE__ */ jsx(Separator, { orientation: "horizontal" })
+		})
+	]
+});
+//#endregion
+//#region src/components/Modal/ModalIcon.tsx
+const NAMED_COLORS = /* @__PURE__ */ new Set([
+	"orange",
+	"blue",
+	"red",
+	"green",
+	"gray",
+	"violet"
+]);
+/**
+* Status-coloured icon for `Modal`. Authored inside `Modal.Header`. For a remote image badge (a
+* component or backend logo fetched by URL) use `Modal.Image` instead.
+*
+* - **Legacy anatomy:** a solid-filled circular badge docked to the top-left of `Modal.Content`
+*   (absolutely positioned, so it renders identically wherever it is authored).
+* - **Argo anatomy** (`data-argo` on `Modal.Content`): a small soft-tinted inline badge in the
+*   header grid, next to the title.
+*
+* Both variants are rendered and toggled purely via CSS (`group-data-[argo=true]/modal:`) — no
+* context. Use the categorical `color` (`red` destructive, `orange` warning, `green` success,
+* `blue` info, `gray` neutral, `violet` agent) to encode meaning; the palette stays fixed across
+* brand themes.
+*/
+const ModalIcon = ({ color, icon }) => {
+	const customColor = color && !NAMED_COLORS.has(color) ? color : void 0;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "modal-icon",
+		className: cn("tw:flex", "tw:shrink-0", "tw:items-center", "tw:justify-center", "tw:[&_svg]:aspect-square", "tw:group-data-[argo=false]/modal:absolute", "tw:group-data-[argo=false]/modal:top-0", "tw:group-data-[argo=false]/modal:left-8", "tw:group-data-[argo=false]/modal:-translate-y-1/2", "tw:group-data-[argo=false]/modal:size-12", "tw:group-data-[argo=false]/modal:rounded-full", "tw:group-data-[argo=false]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-6", "tw:group-data-[argo=true]/modal:col-start-1", "tw:group-data-[argo=true]/modal:row-start-1", "tw:group-data-[argo=true]/modal:self-start", "tw:group-data-[argo=true]/modal:mr-3", "tw:group-data-[argo=true]/modal:size-8", "tw:group-data-[argo=true]/modal:rounded", "tw:group-data-[argo=true]/modal:overflow-hidden", "tw:group-data-[argo=true]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-5", {
+			"tw:group-data-[argo=false]/modal:bg-warning-500": color === "orange",
+			"tw:group-data-[argo=false]/modal:bg-blue-500": color === "blue",
+			"tw:group-data-[argo=false]/modal:bg-green-500": color === "green",
+			"tw:group-data-[argo=false]/modal:bg-error-500": color === "red",
+			"tw:group-data-[argo=false]/modal:bg-neutral-150": color === "gray",
+			"tw:group-data-[argo=false]/modal:bg-purple-100": color === "violet",
+			"tw:group-data-[argo=false]/modal:text-white": color !== "violet",
+			"tw:group-data-[argo=false]/modal:text-purple-500": color === "violet"
+		}, {
+			"tw:group-data-[argo=true]/modal:bg-warning-100 tw:group-data-[argo=true]/modal:text-warning-500": color === "orange",
+			"tw:group-data-[argo=true]/modal:bg-blue-100 tw:group-data-[argo=true]/modal:text-blue-600": color === "blue",
+			"tw:group-data-[argo=true]/modal:bg-green-100 tw:group-data-[argo=true]/modal:text-green-900": color === "green",
+			"tw:group-data-[argo=true]/modal:bg-error-100 tw:group-data-[argo=true]/modal:text-error-500": color === "red",
+			"tw:group-data-[argo=true]/modal:bg-neutral-100 tw:group-data-[argo=true]/modal:text-neutral-500": color === "gray",
+			"tw:group-data-[argo=true]/modal:bg-purple-100 tw:group-data-[argo=true]/modal:text-purple-500": color === "violet"
+		}, { "tw:text-white": !!customColor }),
+		style: customColor ? { backgroundColor: customColor } : void 0,
+		children: icon
+	});
+};
+//#endregion
+//#region src/components/Modal/ModalImage.tsx
+const ModalImage = ({ src, alt = "" }) => {
+	const [hasImageError, setHasImageError] = useState(false);
+	useEffect(() => setHasImageError(false), [src]);
+	if (hasImageError) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "modal-image",
+		className: cn("tw:shrink-0", "tw:overflow-hidden", "tw:group-data-[argo=false]/modal:absolute", "tw:group-data-[argo=false]/modal:top-0", "tw:group-data-[argo=false]/modal:left-8", "tw:group-data-[argo=false]/modal:-translate-y-1/2", "tw:group-data-[argo=false]/modal:size-12", "tw:group-data-[argo=false]/modal:rounded-full", "tw:group-data-[argo=true]/modal:flex", "tw:group-data-[argo=true]/modal:col-start-1", "tw:group-data-[argo=true]/modal:row-start-1", "tw:group-data-[argo=true]/modal:self-start", "tw:group-data-[argo=true]/modal:mr-3", "tw:group-data-[argo=true]/modal:items-center", "tw:group-data-[argo=true]/modal:justify-center", "tw:group-data-[argo=true]/modal:rounded", "tw:group-data-[argo=true]/modal:size-8"),
+		children: /* @__PURE__ */ jsx("img", {
+			src,
+			alt,
+			className: "tw:size-full tw:object-contain",
+			onError: () => setHasImageError(true)
+		})
+	});
+};
+//#endregion
+//#region src/components/Modal/Modal.tsx
+/**
+* Blocking dialog for confirmations, forms, and detail views. Built on Radix Dialog.
+*
+* **When to use:** the user must act before continuing (confirm a destructive action, fill a short form,
+* view a focused detail panel). Use the compound parts `Modal.Trigger`, `Modal.Content`, `Modal.Header`,
+* `Modal.Body`, `Modal.Footer`, and optionally `Modal.Icon` for a status-coloured header glyph.
+* **When NOT to use:** for slide-in side editing use `Sheet`; for an inline destructive confirmation anchored
+* to its trigger use `Popconfirm`; for hover previews use `HoverCard`.
+* **Composition:** wrap `Modal.Content` around `Modal.Header` + `Modal.Body` + `Modal.Footer`. Put `useAppForm`
+* `FormBody` inside `Modal.Body` and the submit / cancel buttons inside `Modal.Footer`.
+*
+* @see RECIPES.md#modal-form — for the canonical form-in-modal composition
+* @see RECIPES.md#confirm-dialog — for destructive-confirm dialogs
+*/
+const Modal = (props) => /* @__PURE__ */ jsx(Root, { ...props });
+Modal.Close = Close;
+Modal.Trigger = Trigger;
+Modal.Content = ModalContent;
+Modal.Body = ModalBody;
+Modal.Icon = ModalIcon;
+Modal.Image = ModalImage;
+Modal.Footer = ModalFooter;
+Modal.Header = ModalHeader;
+Modal.Overlay = ModalOverlay;
+//#endregion
+export { Modal };
+
+//# sourceMappingURL=Modal-BA5Wc3sx.js.map

package/dist/Modal-BA5Wc3sx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-BA5Wc3sx.js","names":[],"sources":["../src/components/Modal/ModalBody.tsx","../src/components/Modal/ModalContent.tsx","../src/components/Modal/ModalFooter.tsx","../src/components/Modal/ModalActions.tsx","../src/components/Modal/ModalHeader.tsx","../src/components/Modal/ModalIcon.tsx","../src/components/Modal/ModalImage.tsx","../src/components/Modal/Modal.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\n/** Props for `Modal.Body`. Accepts all `<div>` attributes; `as=\"form\"` is reserved for future use. */\ntype Props = ComponentProps<'div'> & {\n  as?: 'form';\n};\n\n/**\n * Scrollable body slot for `Modal`. Place form fields, content blocks, or detail panels here.\n * Takes available height inside `Modal.Content` and scrolls when content overflows.\n */\nexport const ModalBody = ({ className, ...props }: Props) => (\n  <div\n    data-slot=\"modal-body\"\n    className={cn(\n      // scrollable body - takes available space and scrolls when content overflows\n      'tw:flex-1',\n      'tw:overflow-y-auto',\n\n      // argo: soft top/bottom edge fade in place of header/footer separators (pure-CSS utility)\n      'tw:group-data-[argo=true]/modal:scroll-fade-y',\n\n      // Own horizontal padding, matching Header/Footer so content edges align (ModalContent adds none)\n      'tw:group-data-[argo=false]/modal:px-7',\n      'tw:group-data-[argo=true]/modal:px-4',\n      'tw:py-1',\n\n      // normalize nested Lucide icon sizing, matching Popover/HoverCard/Alert content surfaces\n      \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n      'tw:[&_svg]:shrink-0',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Content> & {\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport const ModalContent = ({\n  size = 'medium',\n  className,\n  children,\n  onEscapeKeyDown,\n  ...props\n}: Props) => {\n  const renderArgo = useArgoDesign();\n\n  const handleEscapeKeyDown: typeof onEscapeKeyDown = (event) => {\n    // Stop propagation to prevent parent modals (like FullScreenModal) from closing\n    event.stopPropagation();\n    onEscapeKeyDown?.(event);\n  };\n\n  return (\n    <Portal>\n      <ModalOverlay>\n        <Content\n          // props first so callers can't override the computed data-argo / data-size\n          {...props}\n          data-argo={renderArgo}\n          data-size={size}\n          className={cn(\n            'tailwindcss-preflight',\n            'tw:group/modal',\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\n            // legacy: anchored near the top; argo: centered in the viewport (like AlertModal)\n            'tw:data-[argo=false]:top-20',\n            'tw:data-[argo=true]:top-1/2',\n            'tw:data-[argo=true]:-translate-y-1/2',\n\n            // sizing - responsive max dimensions\n            'tw:w-full',\n            'tw:max-w-2xl',\n            'tw:max-h-[calc(100vh-2*theme(spacing.20))]',\n\n            // layout\n            'tw:flex',\n            'tw:flex-col',\n            'tw:gap-4',\n            'tw:data-[argo=false]:rounded-lg',\n            'tw:data-[argo=true]:rounded-3xl',\n            'tw:bg-card',\n            'tw:text-card-foreground',\n\n            // Vertical (edge) padding lives here so it survives an omitted Header or Footer.\n            // Horizontal padding is owned by Header / Body / Footer, so the Body runs full-bleed and\n            // its scrollbar sits at the modal edge (see ModalBody).\n            'tw:data-[argo=false]:py-8',\n            'tw:data-[argo=true]:py-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            // NOTE: no `slide-*-left-1/2` (both) or argo `slide-*-top-1/2`. Those re-pinned the\n            // -50%/-50% centring during the animation under v3, where centring and the animation\n            // shared the `transform` property (the animation overrode it). Under v4 the centring\n            // uses the `translate` PROPERTY while tw-animate-css animates `transform` — they compose\n            // instead of overriding, so a -50% enter-translate stacks on the -50% centring (= -100%)\n            // and the modal flies in from the top-left. Centring now persists on its own, so we\n            // animate transform-only (zoom + fade) and the modal stays put.\n\n            // legacy: slide-down + zoom (top-anchored via `top-20`, so no `translate-y` to double)\n            'tw:data-[argo=false]:data-[state=open]:zoom-in-80',\n            'tw:data-[argo=false]:data-[state=open]:slide-in-from-top-[48%]',\n            'tw:data-[argo=false]:data-[state=closed]:zoom-out-80',\n            'tw:data-[argo=false]:data-[state=closed]:slide-out-to-top-[48%]',\n\n            // argo: pop from the centre — zoom only\n            'tw:data-[argo=true]:data-[state=open]:zoom-in-95',\n            'tw:data-[argo=true]:data-[state=closed]:zoom-out-95',\n\n            {\n              'tw:max-w-[480px]': size === 'small',\n              'tw:max-w-4xl': size === 'large',\n            },\n\n            className,\n          )}\n          onEscapeKeyDown={handleEscapeKeyDown}\n        >\n          {children}\n        </Content>\n      </ModalOverlay>\n    </Portal>\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const ModalFooter = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    className={cn(\n      // Own horizontal padding (ModalContent owns the vertical edge padding)\n      'tw:group-data-[argo=false]/modal:px-7',\n      'tw:group-data-[argo=true]/modal:px-4',\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * Container for the header's top-right controls — any `actions` passed to `Modal.Header` plus the\n * close icon. Sits in the header grid's last column, top-aligned. Mirrors `Alert`'s action slot.\n */\nexport const ModalActions = ({ className, ...props }: Props) => (\n  <div\n    className={cn(\n      'tw:col-start-3',\n      'tw:row-start-1',\n      'tw:self-start',\n      'tw:flex',\n      'tw:items-center',\n      'tw:gap-1',\n      // argo: gutter separating the actions/close from the title (carried here so the grid needs no\n      // column gap — see ModalHeader)\n      'tw:group-data-[argo=true]/modal:ml-3',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Close } from '@radix-ui/react-dialog';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Separator } from '../Separator';\n\nimport { ModalActions } from './ModalActions';\nimport { ModalDescription } from './ModalDescription';\nimport { ModalTitle } from './ModalTitle';\n\ntype Props = {\n  /** Status icon slot — `<Modal.Icon />` or `<Modal.Image />`. */\n  icon?: ReactNode;\n  /** Visible subtitle below the title (also fills `aria-describedby`). */\n  description?: ReactNode;\n  /** Screen-reader-only description; fills `aria-describedby` without rendering visibly. */\n  'aria-description'?: string;\n  /** Controls rendered top-right, before the close icon. */\n  actions?: ReactNode;\n  /** Hide the top-right close icon. */\n  hideCloseIcon?: boolean;\n} & ComponentProps<'div'>;\n\n/** Modal header: `[icon] | title (children) | actions + close` on row 1, `description` on row 2. */\nexport const ModalHeader = ({\n  className,\n  icon,\n  description,\n  'aria-description': ariaDescription,\n  actions,\n  hideCloseIcon = false,\n  children,\n  ...props\n}: Props) => (\n  <div\n    {...props}\n    data-slot=\"modal-header\"\n    className={cn(\n      'tw:grid',\n      'tw:grid-cols-[auto_1fr_auto]',\n      'tw:items-center',\n      'tw:group-data-[argo=false]/modal:px-7',\n      'tw:group-data-[argo=true]/modal:px-4',\n      className,\n    )}\n  >\n    {icon}\n\n    {children && <ModalTitle className=\"tw:col-start-2 tw:row-start-1\">{children}</ModalTitle>}\n    {(actions || !hideCloseIcon) && (\n      <ModalActions>\n        {actions}\n        {!hideCloseIcon && (\n          <Close asChild>\n            <Button variant=\"invisible\" size=\"icon-sm\">\n              <X />\n              <span className=\"tw:sr-only\">Close</span>\n            </Button>\n          </Close>\n        )}\n      </ModalActions>\n    )}\n    {(description || ariaDescription) && (\n      <ModalDescription\n        className={cn(\n          'tw:col-start-1',\n          'tw:col-end-4',\n          'tw:row-start-2',\n          description ? 'tw:mt-1' : 'tw:sr-only',\n        )}\n      >\n        {description ?? ariaDescription}\n      </ModalDescription>\n    )}\n\n    {/* Legacy-only separator; shown when a Body follows, hidden when that body hosts Tabs. */}\n    <div\n      className={cn(\n        'tw:col-start-1',\n        'tw:col-end-4',\n        'tw:mt-5',\n        'tw:hidden',\n        'tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body])_&]:block',\n        'tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body]_[data-slot=tabs-root])_&]:!hidden',\n      )}\n    >\n      <Separator orientation=\"horizontal\" />\n    </div>\n  </div>\n);\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype NamedColor = 'orange' | 'blue' | 'red' | 'green' | 'gray' | 'violet';\n\ntype Props = {\n  color: NamedColor | (string & {});\n  icon: ReactNode;\n};\n\nconst NAMED_COLORS = new Set<string>(['orange', 'blue', 'red', 'green', 'gray', 'violet']);\n\n/**\n * Status-coloured icon for `Modal`. Authored inside `Modal.Header`. For a remote image badge (a\n * component or backend logo fetched by URL) use `Modal.Image` instead.\n *\n * - **Legacy anatomy:** a solid-filled circular badge docked to the top-left of `Modal.Content`\n *   (absolutely positioned, so it renders identically wherever it is authored).\n * - **Argo anatomy** (`data-argo` on `Modal.Content`): a small soft-tinted inline badge in the\n *   header grid, next to the title.\n *\n * Both variants are rendered and toggled purely via CSS (`group-data-[argo=true]/modal:`) — no\n * context. Use the categorical `color` (`red` destructive, `orange` warning, `green` success,\n * `blue` info, `gray` neutral, `violet` agent) to encode meaning; the palette stays fixed across\n * brand themes.\n */\nexport const ModalIcon = ({ color, icon }: Props) => {\n  const customColor = color && !NAMED_COLORS.has(color) ? color : undefined;\n\n  return (\n    <span\n      data-slot=\"modal-icon\"\n      className={cn(\n        'tw:flex',\n        'tw:shrink-0',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:[&_svg]:aspect-square',\n\n        // legacy: solid-filled circular badge floating at the modal's top-left\n        'tw:group-data-[argo=false]/modal:absolute',\n        'tw:group-data-[argo=false]/modal:top-0',\n        'tw:group-data-[argo=false]/modal:left-8',\n        'tw:group-data-[argo=false]/modal:-translate-y-1/2',\n        'tw:group-data-[argo=false]/modal:size-12',\n        'tw:group-data-[argo=false]/modal:rounded-full',\n        'tw:group-data-[argo=false]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-6',\n\n        // argo: soft-tinted inline badge in the header grid's first column\n        'tw:group-data-[argo=true]/modal:col-start-1',\n        'tw:group-data-[argo=true]/modal:row-start-1',\n        'tw:group-data-[argo=true]/modal:self-start',\n        'tw:group-data-[argo=true]/modal:mr-3',\n        'tw:group-data-[argo=true]/modal:size-8',\n        'tw:group-data-[argo=true]/modal:rounded',\n        'tw:group-data-[argo=true]/modal:overflow-hidden',\n        'tw:group-data-[argo=true]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n\n        // legacy palette: solid fill + white glyph (violet is the exception — tinted)\n        {\n          'tw:group-data-[argo=false]/modal:bg-warning-500': color === 'orange',\n          'tw:group-data-[argo=false]/modal:bg-blue-500': color === 'blue',\n          'tw:group-data-[argo=false]/modal:bg-green-500': color === 'green',\n          'tw:group-data-[argo=false]/modal:bg-error-500': color === 'red',\n          'tw:group-data-[argo=false]/modal:bg-neutral-150': color === 'gray',\n          'tw:group-data-[argo=false]/modal:bg-purple-100': color === 'violet',\n          'tw:group-data-[argo=false]/modal:text-white': color !== 'violet',\n          'tw:group-data-[argo=false]/modal:text-purple-500': color === 'violet',\n        },\n\n        // argo palette: soft tint + matching glyph colour\n        {\n          'tw:group-data-[argo=true]/modal:bg-warning-100 tw:group-data-[argo=true]/modal:text-warning-500':\n            color === 'orange',\n          'tw:group-data-[argo=true]/modal:bg-blue-100 tw:group-data-[argo=true]/modal:text-blue-600':\n            color === 'blue',\n          'tw:group-data-[argo=true]/modal:bg-green-100 tw:group-data-[argo=true]/modal:text-green-900':\n            color === 'green',\n          'tw:group-data-[argo=true]/modal:bg-error-100 tw:group-data-[argo=true]/modal:text-error-500':\n            color === 'red',\n          'tw:group-data-[argo=true]/modal:bg-neutral-100 tw:group-data-[argo=true]/modal:text-neutral-500':\n            color === 'gray',\n          'tw:group-data-[argo=true]/modal:bg-purple-100 tw:group-data-[argo=true]/modal:text-purple-500':\n            color === 'violet',\n        },\n\n        // custom (non-named) colour: caller-provided fill + white glyph\n        { 'tw:text-white': !!customColor },\n      )}\n      style={customColor ? { backgroundColor: customColor } : undefined}\n    >\n      {icon}\n    </span>\n  );\n};\n","import { useEffect, useState } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = {\n  src: string;\n  /** Accessible alt text. Defaults to `\"\"` (decorative) — provide it when the image carries meaning. */\n  alt?: string;\n};\n\nexport const ModalImage = ({ src, alt = '' }: Props) => {\n  const [hasImageError, setHasImageError] = useState(false);\n\n  // Reset the error state when the source changes, so a reused badge (new logo, or a retry after a\n  // transient failure) isn't permanently hidden by an earlier onError.\n  useEffect(() => setHasImageError(false), [src]);\n\n  if (hasImageError) return null;\n\n  return (\n    <span\n      data-slot=\"modal-image\"\n      className={cn(\n        'tw:shrink-0',\n        'tw:overflow-hidden',\n\n        // legacy: circular badge floating at the top-left of the modal\n        'tw:group-data-[argo=false]/modal:absolute',\n        'tw:group-data-[argo=false]/modal:top-0',\n        'tw:group-data-[argo=false]/modal:left-8',\n        'tw:group-data-[argo=false]/modal:-translate-y-1/2',\n        'tw:group-data-[argo=false]/modal:size-12',\n        'tw:group-data-[argo=false]/modal:rounded-full',\n\n        // argo: inline badge in the header grid's first column\n        'tw:group-data-[argo=true]/modal:flex',\n        'tw:group-data-[argo=true]/modal:col-start-1',\n        'tw:group-data-[argo=true]/modal:row-start-1',\n        'tw:group-data-[argo=true]/modal:self-start',\n        'tw:group-data-[argo=true]/modal:mr-3',\n        'tw:group-data-[argo=true]/modal:items-center',\n        'tw:group-data-[argo=true]/modal:justify-center',\n        'tw:group-data-[argo=true]/modal:rounded',\n        'tw:group-data-[argo=true]/modal:size-8',\n      )}\n    >\n      <img\n        src={src}\n        alt={alt}\n        className=\"tw:size-full tw:object-contain\"\n        onError={() => setHasImageError(true)}\n      />\n    </span>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-dialog';\n\nimport { ModalBody } from './ModalBody';\nimport { ModalContent } from './ModalContent';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalIcon } from './ModalIcon';\nimport { ModalImage } from './ModalImage';\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Root>;\n\n/**\n * Blocking dialog for confirmations, forms, and detail views. Built on Radix Dialog.\n *\n * **When to use:** the user must act before continuing (confirm a destructive action, fill a short form,\n * view a focused detail panel). Use the compound parts `Modal.Trigger`, `Modal.Content`, `Modal.Header`,\n * `Modal.Body`, `Modal.Footer`, and optionally `Modal.Icon` for a status-coloured header glyph.\n * **When NOT to use:** for slide-in side editing use `Sheet`; for an inline destructive confirmation anchored\n * to its trigger use `Popconfirm`; for hover previews use `HoverCard`.\n * **Composition:** wrap `Modal.Content` around `Modal.Header` + `Modal.Body` + `Modal.Footer`. Put `useAppForm`\n * `FormBody` inside `Modal.Body` and the submit / cancel buttons inside `Modal.Footer`.\n *\n * @see RECIPES.md#modal-form — for the canonical form-in-modal composition\n * @see RECIPES.md#confirm-dialog — for destructive-confirm dialogs\n */\nexport const Modal = (props: Props) => <Root {...props} />;\n\nModal.Close = Close;\nModal.Trigger = Trigger;\n\nModal.Content = ModalContent;\nModal.Body = ModalBody;\nModal.Icon = ModalIcon;\nModal.Image = ModalImage;\nModal.Footer = ModalFooter;\nModal.Header = ModalHeader;\nModal.Overlay = ModalOverlay;\n"],"mappings":"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"}

package/dist/ModalTitle-C76ke2eo.js

@@ -0,0 +1,28 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { jsx } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Overlay, Title } from "@radix-ui/react-dialog";
+//#region src/components/Modal/ModalOverlay.tsx
+const ModalOverlay = ({ ref, className, disableTransition = false, ...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=closed]:duration-500", "tw:data-[state=closed]:fade-out-0", { "tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out": !disableTransition }, className),
+	onClick: (event) => event.stopPropagation()
+});
+//#endregion
+//#region src/components/Modal/ModalDescription.tsx
+const ModalDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+	className: cn("tw:text-sm", "tw:font-sans", "tw:tracking-normal", "tw:font-normal", "tw:text-neutral-400", className),
+	...props
+});
+//#endregion
+//#region src/components/Modal/ModalTitle.tsx
+const ModalTitle = ({ children, className, ...props }) => /* @__PURE__ */ jsx(Title, {
+	...props,
+	className: cn("tw:flex-1", "tw:break-anywhere", "tw:text-base", "tw:font-semibold", className),
+	children
+});
+//#endregion
+export { ModalDescription, ModalOverlay, ModalTitle };
+
+//# sourceMappingURL=ModalTitle-C76ke2eo.js.map

package/dist/ModalTitle-C76ke2eo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTitle-C76ke2eo.js","names":[],"sources":["../src/components/Modal/ModalOverlay.tsx","../src/components/Modal/ModalDescription.tsx","../src/components/Modal/ModalTitle.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Overlay } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Overlay> & {\n  disableTransition?: boolean;\n};\n\nexport const ModalOverlay = ({ ref, className, disableTransition = false, ...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\n      // closing animation\n      'tw:data-[state=closed]:duration-500',\n      'tw:data-[state=closed]:fade-out-0',\n      {\n        'tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out': !disableTransition,\n      },\n      className,\n    )}\n    onClick={(event) => event.stopPropagation()}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof DialogPrimitive.Description>;\n\nexport const ModalDescription = ({ className, ...props }: Props) => (\n  <DialogPrimitive.Description\n    className={cn(\n      'tw:text-sm',\n      'tw:font-sans',\n      'tw:tracking-normal',\n      'tw:font-normal',\n      'tw:text-neutral-400',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { Title } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Title>;\n\nexport const ModalTitle = ({ children, className, ...props }: Props) => (\n  <Title\n    {...props}\n    className={cn('tw:flex-1', 'tw:break-anywhere', 'tw:text-base', 'tw:font-semibold', className)}\n  >\n    {children}\n  </Title>\n);\n"],"mappings":";;;;;AASA,MAAa,gBAAgB,EAAE,KAAK,WAAW,oBAAoB,OAAO,GAAG,YAC3E,oBAAC,SAAD;CACE,GAAI;CACC;CACL,WAAW,GAET,YACA,cACA,eAGA,kBAGA,qCACA,kCAGA,uCACA,qCACA,EACE,sEAAsE,CAAC,kBACzE,GACA,SACF;CACA,UAAU,UAAU,MAAM,gBAAgB;AAC3C,CAAA;;;AC5BH,MAAa,oBAAoB,EAAE,WAAW,GAAG,YAC/C,oBAAC,gBAAgB,aAAjB;CACE,WAAW,GACT,cACA,gBACA,sBACA,kBACA,uBACA,SACF;CACA,GAAI;AACL,CAAA;;;ACXH,MAAa,cAAc,EAAE,UAAU,WAAW,GAAG,YACnD,oBAAC,OAAD;CACE,GAAI;CACJ,WAAW,GAAG,aAAa,qBAAqB,gBAAgB,oBAAoB,SAAS;CAE5F;AACI,CAAA"}

package/dist/MultiActionButtonGroup-CiBHxsSk.js

@@ -0,0 +1,33 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Tooltip } from "./utils-D0c5VAyF.js";
+import { Button } from "./Button-nzmDNS2q.js";
+import { ButtonGroup } from "./internal/components/ButtonGroup.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/blocks/MultiActionButtonGroup/MultiActionButton.tsx
+const MultiActionButton = ({ disabled, icon, isLoading, label, onClick, tooltipContent, tooltipVariant, "data-testid": dataTestId }) => /* @__PURE__ */ jsx(Tooltip, {
+	placement: "top",
+	tooltip: tooltipContent,
+	triggerAsChild: true,
+	variant: tooltipVariant,
+	children: /* @__PURE__ */ jsx(Button, {
+		disabled,
+		isLoading,
+		"aria-label": label,
+		onClick,
+		variant: "invisible",
+		size: "icon",
+		"data-testid": dataTestId,
+		children: !isLoading && icon
+	})
+});
+//#endregion
+//#region src/blocks/MultiActionButtonGroup/MultiActionButtonGroup.tsx
+const MultiActionButtonGroup = ({ children, className }) => /* @__PURE__ */ jsx(ButtonGroup, {
+	className: cn("tw:text-nowrap", className),
+	children
+});
+MultiActionButtonGroup.Button = MultiActionButton;
+//#endregion
+export { MultiActionButtonGroup };
+
+//# sourceMappingURL=MultiActionButtonGroup-CiBHxsSk.js.map

package/dist/MultiActionButtonGroup-CiBHxsSk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiActionButtonGroup-CiBHxsSk.js","names":[],"sources":["../src/blocks/MultiActionButtonGroup/MultiActionButton.tsx","../src/blocks/MultiActionButtonGroup/MultiActionButtonGroup.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Tooltip } from '../../components/Tooltip';\n\ntype Props = {\n  disabled?: boolean;\n  icon: ReactNode;\n  isLoading?: boolean;\n  label: string;\n  onClick: ComponentProps<typeof Button>['onClick'];\n  tooltipContent: ReactNode;\n  tooltipVariant?: ComponentProps<typeof Tooltip>['variant'];\n  'data-testid'?: string;\n};\n\nexport const MultiActionButton = ({\n  disabled,\n  icon,\n  isLoading,\n  label,\n  onClick,\n  tooltipContent,\n  tooltipVariant,\n  'data-testid': dataTestId,\n}: Props) => (\n  <Tooltip placement=\"top\" tooltip={tooltipContent} triggerAsChild variant={tooltipVariant}>\n    <Button\n      disabled={disabled}\n      isLoading={isLoading}\n      aria-label={label}\n      onClick={onClick}\n      variant=\"invisible\"\n      size=\"icon\"\n      data-testid={dataTestId}\n    >\n      {!isLoading && icon}\n    </Button>\n  </Tooltip>\n);\n","import type { PropsWithChildren } from 'react';\n\nimport { ButtonGroup } from '../../components/ButtonGroup';\nimport { cn } from '../../utils';\n\nimport { MultiActionButton } from './MultiActionButton';\n\ntype Props = {\n  className?: string;\n} & PropsWithChildren;\n\nexport const MultiActionButtonGroup = ({ children, className }: Props) => (\n  <ButtonGroup className={cn('tw:text-nowrap', className)}>{children}</ButtonGroup>\n);\n\nMultiActionButtonGroup.Button = MultiActionButton;\n"],"mappings":";;;;;;AAgBA,MAAa,qBAAqB,EAChC,UACA,MACA,WACA,OACA,SACA,gBACA,gBACA,eAAe,iBAEf,oBAAC,SAAD;CAAS,WAAU;CAAM,SAAS;CAAgB,gBAAA;CAAe,SAAS;CACxE,UAAA,oBAAC,QAAD;EACY;EACC;EACX,cAAY;EACH;EACT,SAAQ;EACR,MAAK;EACL,eAAa;EAEZ,UAAA,CAAC,aAAa;CACT,CAAA;AACD,CAAA;;;AC3BX,MAAa,0BAA0B,EAAE,UAAU,gBACjD,oBAAC,aAAD;CAAa,WAAW,GAAG,kBAAkB,SAAS;CAAI;AAAsB,CAAA;AAGlF,uBAAuB,SAAS"}

package/dist/Navbar-t16usFZQ.js

@@ -0,0 +1,322 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Search } from "./icons-Cek151jC.js";
+import { ScrollArea } from "./internal/components/ScrollArea.js";
+import { BrandLogo } from "./BrandLogo-CJkRd0F8.js";
+import { Root, Slot, Slottable } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import BoringAvatar from "boring-avatars";
+import * as RadixAvatar from "@radix-ui/react-avatar";
+//#region src/components/Navbar/NavbarContent.tsx
+const NavbarContent = ({ children, className }) => /* @__PURE__ */ jsx(ScrollArea, {
+	type: "auto",
+	orientation: "horizontal",
+	className: "tw:flex-1",
+	scrollBarClassName: "tw:h-1.5",
+	children: /* @__PURE__ */ jsx("div", {
+		className: cn("tw:flex", "tw:py-1.5", className),
+		children
+	})
+});
+//#endregion
+//#region src/components/Navbar/NavbarFooter.tsx
+const NavbarFooter = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cn("tw:flex tw:items-center tw:gap-2 tw:py-1.5", className),
+	children
+});
+//#endregion
+//#region src/components/Navbar/NavbarHeader.tsx
+const NavbarHeader = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cn("tw:overflow-hidden", "tw:py-1.5", className),
+	children: children ?? /* @__PURE__ */ jsx(BrandLogo, {
+		variant: "wordmark",
+		className: "tw:h-7"
+	})
+});
+//#endregion
+//#region src/components/Navbar/NavbarMenu.tsx
+const variants$2 = cva([
+	"tw:m-0",
+	"tw:p-0",
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:gap-2"
+], {
+	variants: { marker: {
+		none: [],
+		"forward-slash": [
+			"tw:[&_li]:flex",
+			"tw:[&_li]:items-center",
+			"tw:[&_li]:before:content-[\"/\"]",
+			"tw:[&_li]:before:text-border",
+			"tw:[&_li]:before:text-sm",
+			"tw:[&_li]:before:mr-0.5",
+			"tw:[&_li:not(:first-child)]:before:ml-0.5"
+		]
+	} },
+	defaultVariants: { marker: "none" }
+});
+const NavbarMenu = ({ className, marker, ...rest }) => /* @__PURE__ */ jsx("ul", {
+	...rest,
+	className: variants$2({
+		marker,
+		className
+	})
+});
+//#endregion
+//#region src/components/Navbar/NavbarMenuAvatar.tsx
+const NavbarMenuAvatar = ({ ref, className, type = "button", src, alt, ...rest }) => {
+	const altText = alt ?? "Avatar";
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		ref,
+		type,
+		className: cn("tw:flex", "tw:items-center", "tw:justify-center", "tw:size-8", "tw:aspect-square", "tw:overflow-hidden", "tw:shrink-0", "tw:rounded-lg", "tw:bg-transparent", "tw:cursor-pointer", "tw:disabled:opacity-50", "tw:disabled:cursor-not-allowed", "tw:focus-visible:outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-sidebar-ring/50", className),
+		children: /* @__PURE__ */ jsxs(RadixAvatar.Root, { children: [/* @__PURE__ */ jsx(RadixAvatar.Image, {
+			src,
+			alt: altText,
+			className: "tw:size-full tw:object-cover"
+		}), /* @__PURE__ */ jsx(RadixAvatar.Fallback, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(BoringAvatar, {
+				square: true,
+				name: altText,
+				variant: "beam",
+				colors: [
+					"#1F8FFF",
+					"#004787",
+					"#28D8FF",
+					"#925cff",
+					"#A8C2E6"
+				],
+				size: 32
+			})
+		})] })
+	});
+};
+//#endregion
+//#region src/components/Navbar/NavbarMenuItemAdornment.tsx
+const variants$1 = cva([
+	"tw:flex",
+	"tw:justify-center",
+	"tw:items-center",
+	"tw:[&_svg:not([class*=\"tw:size-\"])]:size-3",
+	"tw:[&:not(svg)]:h-5",
+	"tw:[&:not(svg)]:min-w-5",
+	"tw:p-1",
+	"tw:aspect-square",
+	"tw:rounded-md"
+], {
+	defaultVariants: { variant: "icon-accent" },
+	variants: { variant: {
+		icon: ["tw:text-sidebar-foreground", "tw:[&_svg]:text-sidebar-foreground"],
+		"icon-emphasized": ["tw:text-white", "tw:[&_svg]:text-white"],
+		"icon-accent": [
+			"tw:group-data-[accent=blue]/navbar:text-sidebar-primary",
+			"tw:group-data-[accent=blue]/navbar:[&_svg]:text-sidebar-primary",
+			"tw:group-data-[accent=purple]/navbar:text-purple-500",
+			"tw:group-data-[accent=purple]/navbar:[&_svg]:text-purple-500",
+			"tw:group-data-[accent=orange]/navbar:text-warning-500",
+			"tw:group-data-[accent=orange]/navbar:[&_svg]:text-warning-500",
+			"tw:group-data-[accent=green]/navbar:text-primary-500",
+			"tw:group-data-[accent=green]/navbar:[&_svg]:text-primary-500"
+		],
+		"icon-accent-emphasized": [
+			"tw:text-white",
+			"tw:[&_svg]:text-white",
+			"tw:group-data-[accent=blue]/navbar:bg-sidebar-primary",
+			"tw:group-data-[accent=purple]/navbar:bg-purple-500",
+			"tw:group-data-[accent=orange]/navbar:bg-warning-500",
+			"tw:group-data-[accent=green]/navbar:bg-primary-500"
+		],
+		"icon-button": [
+			"tw:size-4",
+			"tw:!p-0",
+			"tw:[&_svg:not([class*=\"tw:size-\"])]:size-4"
+		],
+		shortcut: [
+			"tw:bg-muted",
+			"tw:text-sidebar-foreground",
+			"tw:ml-auto"
+		]
+	} }
+});
+const NavbarMenuItemAdornment = ({ ref, asChild = false, className, variant = "icon-accent", ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+		...props,
+		ref,
+		className: variants$1({
+			variant,
+			className
+		})
+	});
+};
+//#endregion
+//#region src/components/Navbar/NavbarMenuButton.tsx
+const variants = cva([
+	"tw:group/navbar-menu-button",
+	"tw:box-border",
+	"tw:flex",
+	"tw:items-center",
+	"tw:gap-2",
+	"tw:bg-transparent",
+	"tw:leading-9",
+	"tw:border",
+	"tw:rounded-lg",
+	"tw:whitespace-nowrap",
+	"tw:select-none",
+	"tw:!outline-hidden",
+	"tw:focus-visible:ring-2",
+	"tw:focus-visible:ring-sidebar-ring/50",
+	"tw:disabled:opacity-50",
+	"tw:disabled:hover:bg-transparent",
+	"tw:disabled:cursor-not-allowed"
+], {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: [
+			"tw:max-h-9",
+			"tw:border-transparent",
+			"tw:py-2",
+			"tw:px-1.5",
+			"tw:text-sidebar-foreground",
+			"tw:hover:bg-sidebar-accent",
+			"tw:aria-expanded:bg-sidebar-accent"
+		],
+		emphasized: [
+			"tw:max-h-9",
+			"tw:border-transparent",
+			"tw:py-2",
+			"tw:px-1.5",
+			"tw:text-sidebar-foreground",
+			"tw:hover:bg-sidebar-accent",
+			"tw:aria-expanded:bg-sidebar-accent",
+			"tw:font-semibold"
+		],
+		icon: [
+			"tw:size-8",
+			"tw:aspect-square",
+			"tw:justify-center",
+			"tw:font-normal",
+			"tw:border-transparent",
+			"tw:text-primary",
+			"tw:[&_svg]:!text-primary",
+			"tw:hover:bg-sidebar-accent",
+			"tw:aria-expanded:bg-sidebar-accent"
+		],
+		search: [
+			"tw:max-h-8",
+			"tw:min-w-52",
+			"tw:px-3",
+			"tw:py-1",
+			"tw:font-normal",
+			"tw:border-input",
+			"tw:text-muted-foreground",
+			"tw:[&_svg]:!text-muted-foreground"
+		]
+	} }
+});
+const NavbarMenuButton = ({ ref, className, type = "button", children, icon, asChild = false, variant = "default", ...rest }) => {
+	const Comp = asChild ? Root : "button";
+	const isSearchVariant = variant === "search";
+	const isEmphasizedVariant = variant === "emphasized";
+	const adornment = isSearchVariant ? /* @__PURE__ */ jsx(Search, {}) : icon;
+	const adornmentVariant = (() => {
+		if (isSearchVariant || variant === "icon") return "icon-button";
+		if (isEmphasizedVariant) return "icon-accent-emphasized";
+		return "icon-accent";
+	})();
+	return /* @__PURE__ */ jsxs(Comp, {
+		...rest,
+		ref,
+		type,
+		"data-variant": variant,
+		className: cn(variants({
+			className,
+			variant
+		})),
+		children: [adornment && /* @__PURE__ */ jsx(NavbarMenuItemAdornment, {
+			variant: adornmentVariant,
+			children: adornment
+		}), /* @__PURE__ */ jsx(Slottable, { children })]
+	});
+};
+//#endregion
+//#region src/components/Navbar/NavbarMenuItem.tsx
+const NavbarMenuItem = ({ className, ...rest }) => /* @__PURE__ */ jsx("li", {
+	...rest,
+	className: cn("tw:flex", "tw:items-center", "tw:gap-2", className)
+});
+//#endregion
+//#region src/components/Navbar/Navbar.tsx
+const navbarClassnames = cva([
+	"tailwindcss-preflight",
+	"tw:group/navbar",
+	"tw:sticky",
+	"tw:top-0",
+	"tw:z-50",
+	"tw:flex",
+	"tw:gap-2",
+	"tw:items-center",
+	"tw:pl-2",
+	"tw:pr-3",
+	"tw:bg-sidebar",
+	"tw:text-sidebar-foreground",
+	"tw:text-xs",
+	"tw:leading-4"
+], {
+	defaultVariants: { bordered: false },
+	variants: { bordered: {
+		true: [
+			"tw:before:content",
+			"tw:before:h-0.5",
+			"tw:before:w-full",
+			"tw:before:absolute",
+			"tw:before:left-0",
+			"tw:before:top-0",
+			"tw:before:data-[accent=blue]:bg-sidebar-primary",
+			"tw:before:data-[accent=purple]:bg-purple-500",
+			"tw:before:data-[accent=green]:bg-primary-500",
+			"tw:before:data-[accent=orange]:bg-warning-500"
+		],
+		false: ""
+	} }
+});
+/**
+* Top navigation bar for the app shell. Host inside `<AppShell.Header>` to give a
+* top-nav (or `keboola-legacy` top-bar) layout its primary navigation, brand mark,
+* and account/actions area.
+*
+* **Composition:** `Navbar.Header` (left — brand / logo), `Navbar.Content` (center —
+* primary `Navbar.Menu` of `Navbar.MenuItem` + `Navbar.MenuButton`, horizontally
+* scrollable), and `Navbar.Footer` (right — search, notifications, `Navbar.MenuAvatar`).
+* `bordered` renders a top accent hairline whose color follows `accent`. Renders a
+* `<nav>` landmark with a default `aria-label` — override it via `aria-label` /
+* `aria-labelledby` when a page has more than one nav.
+*
+* @see AppShell — pair with `AppShell.Header`; the sidebar rail uses `Sidebar` instead.
+*/
+const Navbar = ({ className, accent = "blue", bordered = false, ...rest }) => /* @__PURE__ */ jsx("nav", {
+	"aria-label": "Main navigation",
+	...rest,
+	"data-accent": accent,
+	className: navbarClassnames({
+		bordered,
+		className
+	})
+});
+Navbar.Header = NavbarHeader;
+Navbar.Footer = NavbarFooter;
+Navbar.Content = NavbarContent;
+Navbar.Menu = NavbarMenu;
+Navbar.MenuItem = NavbarMenuItem;
+Navbar.MenuButton = NavbarMenuButton;
+Navbar.MenuItemAdornment = NavbarMenuItemAdornment;
+Navbar.MenuAvatar = NavbarMenuAvatar;
+//#endregion
+export { Navbar };
+
+//# sourceMappingURL=Navbar-t16usFZQ.js.map