@keboola/design 11.6.1 → 12.0.0

package/dist/{AlertModal-BGJdaRRj.js → AlertModal-Th2khjPi.js}

@@ -1,7 +1,7 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { useArgoDesign } from "./context-D7X470dy.js";
-import { AlertTriangle, CircleCheck, Info } from "./icons-Cek151jC.js";
-import { Button } from "./Button-DsRrU5F1.js";
+import { useArgoDesign } from "./context-U293r3v-.js";
+import { AlertTriangle, CircleCheck, Info } from "./icons-wcA70iQx.js";
+import { Button } from "./Button-Ca4Q3VJU.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";
@@ -71,7 +71,7 @@ const AlertModalOverlay = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(
 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),
+	className: cn("tw:font-medium", "tw:text-foreground", "tw:wrap-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
@@ -216,4 +216,4 @@ AlertModal.Content = AlertModalContent;
 //#endregion
 export { AlertModal };
 
-//# sourceMappingURL=AlertModal-BGJdaRRj.js.map
+//# sourceMappingURL=AlertModal-Th2khjPi.js.map

package/dist/AlertModal-Th2khjPi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertModal-Th2khjPi.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:wrap-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  /** Disables confirm only; 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    // Keeps a parent Modal/Sheet open when this confirmation is nested.\n    event.stopPropagation();\n    if (isLoading) event.preventDefault();\n    onEscapeKeyDown?.(event);\n  };\n\n  return (\n    <Portal container={container}>\n      <AlertModalOverlay\n        // Portaled events still bubble to the host's React handlers; Escape passes so Radix can close.\n        onClick={(event) => event.stopPropagation()}\n        onKeyDown={(event) => {\n          if (event.key !== 'Escape') event.stopPropagation();\n        }}\n      >\n        <Content\n          data-design={designLanguage}\n          // Silences Radix's missing-description warning when there are no children.\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\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\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\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            // No `slide-*-left-1/2`: it would stack on the `translate` centring 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: zoom only\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        // The async confirm's outcome drives the modal.\n        // - `preventDefault` stops the click closing it, so it stays up while the action runs.\n        // - Resolved closes it; rejected leaves it up so the failure stays visible.\n        // - The rejection is deliberately not caught — the host's global handler reports it.\n        event.preventDefault();\n        setIsConfirming(true);\n        Promise.resolve(result)\n          .then(() => setOpen(false))\n          .finally(() => setIsConfirming(false));\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-DRgJxpXW.js → AppShell-WSQabK8r.js}

@@ -1,17 +1,13 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { useTheme } from "./context-D7X470dy.js";
+import { useTheme } from "./context-U293r3v-.js";
 import { Slot, Slottable } 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.
+* Sidebar geometry: left rail + header + main, with an optional right rail.
 *
-* `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.
+* - Template area names match the slots' `[grid-area:*]` utilities, so source order does not matter.
+* - `headerSpan` ({@link AppShellHeaderSpan}) picks the row template; the columns stay the same.
 */
 const SidebarShell = ({ ref, className, headerSpan, children, ...props }) => /* @__PURE__ */ jsx("div", {
 	ref,
@@ -24,14 +20,10 @@ const SidebarShell = ({ ref, className, headerSpan, children, ...props }) => /*
 //#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.
+* Top-nav geometry: full-width header, main + aside below.
 *
-* 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.
+* - No `sidebar` area: that slot is hidden, so one composition works under either brand.
+* - No `headerSpan`: the header is already full width.
 */
 const TopNavShell = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
 	ref,
@@ -111,47 +103,18 @@ const Aside = ({ ref, className, asChild, flush = false, children, ...props }) =
 	});
 };
 /**
-* 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.
+* App-shell layout: places the same slots in a sidebar or top-nav geometry per `useTheme().brand.shell`.
 *
-* **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.
+* - **When to use:** the root layout of a navigated app; host a `PageLayout` in `Main`.
+* - **When NOT to use:** standalone screens (sign-in, error pages).
+* - **Composition:** inside a `<ThemeProvider>`.
 */
 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.
-	*/
+	/** Above `Main` in the sidebar shell; the full-width top bar 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.
-	*/
+	/** Left rail; hidden by the top-nav shell. */
 	Sidebar: SidebarSlot,
-	/**
-	* Main content outlet. Scrolls its own content, and applies an opinionated
-	* default page gutter (`tw:p-6`) on a wrapper inside the scroll container.
-	*
-	* - Override the gutter through `contentClassName` (e.g. `tw:p-0`) when the
-	*   app owns its own.
-	* - `className` lands on the scroll container itself — a `p-*` there parks
-	*   every `position: sticky` descendant one gutter below the scrollport's
-	*   visible top edge.
-	*/
+	/** Scrolling content outlet with a `tw:p-6` gutter; override it via `contentClassName`. */
 	Main,
 	/** Optional right rail. Present in both shells. */
 	Aside
@@ -159,4 +122,4 @@ const AppShell = Object.assign(Root$1, {
 //#endregion
 export { AppShell, appShellSlotSelector };
 
-//# sourceMappingURL=AppShell-DRgJxpXW.js.map
+//# sourceMappingURL=AppShell-WSQabK8r.js.map

package/dist/AppShell-WSQabK8r.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell-WSQabK8r.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: `AppShell` owns the default so the generated component API reports it.\ntype Props = ComponentProps<'div'> & { headerSpan: AppShellHeaderSpan };\n\n/**\n * Sidebar geometry: left rail + header + main, with an optional right rail.\n *\n * - Template area names match the slots' `[grid-area:*]` utilities, so source order does not matter.\n * - `headerSpan` ({@link AppShellHeaderSpan}) picks the row template; the columns stay the same.\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` and would paint over the header;\n            // a containing block re-anchors it to the slot without knowing the header's height.\n            // `styles.css` relies on this to clip a parked off-canvas rail.\n            'tw:[&>[data-app-shell-slot=sidebar]]:[transform:translateZ(0)]',\n            'tw:[&>[data-app-shell-slot=aside]]:[transform:translateZ(0)]',\n            // The containing block is also a stacking context that traps the rails' own z-index:\n            // - `z-50`: an expand-on-hover left rail paints over `main`.\n            // - `z-30`: clears main's sticky `z-10`/`z-20` headers, stays under the left rail.\n            'tw:[&>[data-app-shell-slot=sidebar]]:z-50',\n            'tw:[&>[data-app-shell-slot=aside]]:z-30',\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: full-width header, main + aside below.\n *\n * - No `sidebar` area: that slot is hidden, so one composition works under either brand.\n * - No `headerSpan`: the header is already full width.\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      '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, Slottable } 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, AppShellSlot } from './types';\n\n/**\n * Targets a shell slot from outside the shell.\n *\n * - Each slot component stamps `data-app-shell-slot` with its own name.\n * - Exported so a consumer never hand-types the attribute: renaming it then breaks the\n *   build instead of silently matching nothing.\n */\nexport const appShellSlotSelector = (slot: AppShellSlot) => `[data-app-shell-slot=\"${slot}\"]`;\n\ntype RootProps = ComponentPropsWithoutRef<'div'> & {\n  /**\n   * `content`: middle column only; `full`: spans above both rails, for app-wide identity.\n   * No-op under the top-nav geometry.\n   */\n  headerSpan?: AppShellHeaderSpan;\n};\n\nconst Root = ({\n  ref,\n  className,\n  // Defaulted here so the generated component API records `content`.\n  headerSpan = 'content',\n  children,\n  ...props\n}: RootProps & { ref?: Ref<ComponentRef<'div'>> }) => {\n  const { currentTheme: brand } = useTheme();\n\n  // Branch, not spread: forwarding `headerSpan` to the top-nav shell leaks a DOM attribute.\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 MainProps = SlotProps & {\n  /**\n   * Classes for the padded wrapper inside `Main` — override the gutter here, not in `className`,\n   * where a `p-*` breaks every sticky header.\n   */\n  contentClassName?: string;\n  /**\n   * Bounds the wrapper to `Main`'s height, for a page that owns its `overflow-auto` scroller.\n   * Loses the bottom-gutter guarantee — pair with a gutter-free `contentClassName`.\n   */\n  clampContent?: boolean;\n};\n\ntype ChromeSlotProps = SlotProps & {\n  /**\n   * Drops the slot's padding, background and border so a hosted `Navbar` / `Sidebar side=\"right\"`\n   * renders edge to edge. Prefer this over call-site overrides, which need `!` to win.\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      // The top-nav shell hides the `sidebar` grid area, so consumers pass the same JSX.\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  contentClassName,\n  clampContent = false,\n  asChild,\n  children,\n  ...props\n}: MainProps & { ref?: Ref<ComponentRef<'main'>> }) => {\n  const Comp = asChild ? Slot : 'main';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"main\"\n      // The scroll container only; `className` lands here so `overflow-visible` can reset it.\n      className={cn(\n        'tw:flex tw:min-w-0 tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-auto',\n        'tw:[grid-area:main]',\n        className,\n      )}\n      {...props}\n    >\n      {/*\n        ⚠️ The gutter lives here, not on the scrollport: sticky insets resolve against its padding box.\n        - `shrink-0`: without it `min-h-full` lets the wrapper shrink, pushing its bottom padding out.\n        - `clampContent` swaps in `flex-1 min-h-0` for a page with its own scroller; the modes are exclusive.\n        - The `Slottable` render prop keeps `asChild` on the scroll container, not this wrapper.\n      */}\n      <Slottable child={children}>\n        {(content) => (\n          <div\n            className={cn(\n              'tw:flex tw:flex-col tw:p-6',\n              clampContent ? 'tw:min-h-0 tw:flex-1' : 'tw:min-h-full tw:shrink-0',\n              contentClassName,\n            )}\n          >\n            {content}\n          </div>\n        )}\n      </Slottable>\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 width, border, background and scrolling.\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: places the same slots in a sidebar or top-nav geometry per `useTheme().brand.shell`.\n *\n * - **When to use:** the root layout of a navigated app; host a `PageLayout` in `Main`.\n * - **When NOT to use:** standalone screens (sign-in, error pages).\n * - **Composition:** inside a `<ThemeProvider>`.\n */\nexport const AppShell = Object.assign(Root, {\n  /** Above `Main` in the sidebar shell; the full-width top bar in the top-nav shell. */\n  Header,\n  /** Left rail; hidden by the top-nav shell. */\n  Sidebar: SidebarSlot,\n  /** Scrolling content outlet with a `tw:p-6` gutter; override it via `contentClassName`. */\n  Main,\n  /** Optional right rail. Present in both shells. */\n  Aside,\n});\n"],"mappings":";;;;;;;;;;;AAeA,MAAa,gBAAgB,EAAE,KAAK,WAAW,YAAY,UAAU,GAAG,YACtE,oBAAC,OAAD;CACO;CACL,2BAAwB;CACxB,oBAAkB;CAClB,WAAW,GACT,2DACA,wDACA,eAAe,SACX,GACE,4EAIA,kEACA,gEAIA,6CACA,yCACF,IACA,4EACJ,SACF;CACA,GAAI;CAEH;AACE,CAAA;;;;;;;;;AC/BP,MAAa,eAAe,EAAE,KAAK,WAAW,UAAU,GAAG,YACzD,oBAAC,OAAD;CACO;CACL,2BAAwB;CACxB,WAAW,GACT,+CACA,mDACA,6DACA,+CACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;;;;;;;;;;ACTP,MAAa,wBAAwB,SAAuB,yBAAyB,KAAK;AAU1F,MAAMA,UAAQ,EACZ,KACA,WAEA,aAAa,WACb,UACA,GAAG,YACiD;CACpD,MAAM,EAAE,cAAc,UAAU,SAAS;CAGzC,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;AA4BA,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;EAEpB,WAAW,GAAG,kCAAkC,0BAA0B,SAAS;EACnF,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,QAAQ,EACZ,KACA,WACA,kBACA,eAAe,OACf,SACA,UACA,GAAG,YACkD;CAErD,OACE,oBAFW,UAAU,OAAO,QAE5B;EACO;EACL,uBAAoB;EAEpB,WAAW,GACT,wEACA,uBACA,SACF;EACA,GAAI;EAQJ,UAAA,oBAAC,WAAD;GAAW,OAAO;GACd,WAAA,YACA,oBAAC,OAAD;IACE,WAAW,GACT,8BACA,eAAe,yBAAyB,6BACxC,gBACF;IAEC,UAAA;GACE,CAAA;EAEE,CAAA;CACP,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,8CAEA,QACI,kCACA,0EACJ,wBACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;;;;;;;;AASA,MAAa,WAAW,OAAO,OAAOA,QAAM;;CAE1C;;CAEA,SAAS;;CAET;;CAEA;AACF,CAAC"}

package/dist/{AutoSaveTextarea-BeuWuszr.js → AutoSaveTextarea-C5iIr2Ts.js}

@@ -1,5 +1,5 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { CircleCheck, Loader2 } from "./icons-Cek151jC.js";
+import { CircleCheck, Loader2 } from "./icons-wcA70iQx.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -55,4 +55,4 @@ const AutoSaveTextarea = ({ savedValue, onSave, placeholder, disabled, grow = fa
 //#endregion
 export { AutoSaveTextarea };
 
-//# sourceMappingURL=AutoSaveTextarea-BeuWuszr.js.map
+//# sourceMappingURL=AutoSaveTextarea-C5iIr2Ts.js.map

package/dist/{AutoSaveTextarea-BeuWuszr.js.map → AutoSaveTextarea-C5iIr2Ts.js.map}

@@ -1 +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"}
+{"version":3,"file":"AutoSaveTextarea-C5iIr2Ts.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"}

package/dist/{Badge-o5jURtpB.js → Badge-DIjhwPvh.js}

@@ -151,15 +151,10 @@ const BadgeRoot = ({ ref, variant, color, className, children, ...rest }) => /*
 //#endregion
 //#region src/components/Badge/Badge.tsx
 /**
-* Compact status / category label rendered as an inline pill.
+* Inline pill for a status, count or tag.
 *
-* **When to use:** encoding status (active, deprecated, beta), counts, or decorative tags next to a title
-* or in a table cell. The `color` prop is a semantic contract — `green` means success, `red` means error
-* etc., and colours are intentionally stable across customer brand themes.
-* **When NOT to use:** for an inline action use `Button` / `ButtonInline`; for a persistent contextual
-* banner use `Alert`; for a counter-only chip prefer `Badge` with just a numeric label.
-* **Composition:** drop into `PageHeader.Detail` `badges` slot, `Table.Cell`, or alongside titles in cards.
-* Use `Badge.Button` for an interactive (clickable) badge variant.
+* - Not for actions (`Button` / `ButtonInline`) or banners (`Alert`).
+* - `Badge.Button` for a clickable badge.
 */
 const BadgeInner = ({ ref, variant, color, prefix, prefixVariant = "inline", suffix, suffixVariant = "inline", className, labelClassName, ...labelProps }) => /* @__PURE__ */ jsxs(BadgeRoot, {
 	className,
@@ -192,4 +187,4 @@ const Badge = Object.assign(BadgeInner, {
 //#endregion
 export { Badge };
 
-//# sourceMappingURL=Badge-o5jURtpB.js.map
+//# sourceMappingURL=Badge-DIjhwPvh.js.map

package/dist/Badge-DIjhwPvh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-DIjhwPvh.js","names":[],"sources":["../src/components/Badge/BadgeAddon.tsx","../src/components/Badge/BadgeButton.tsx","../src/components/Badge/BadgeLabel.tsx","../src/components/Badge/styles.ts","../src/components/Badge/BadgeRoot.tsx","../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst addonVariants = cva(\n  [\n    'tw:flex',\n    'tw:items-center',\n    'tw:shrink-0',\n    'tw:bg-inherit',\n    'tw:self-stretch',\n    'tw:px-1',\n    'tw:has-[button]:px-0',\n    'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n  ],\n  {\n    defaultVariants: {\n      align: 'inline-end',\n      variant: 'inline',\n    },\n    variants: {\n      align: {\n        'inline-start': ['tw:order-first'],\n        'inline-end': ['tw:order-last'],\n      },\n      variant: {\n        inline: [],\n        floating: [\n          'tw:hidden',\n          'tw:group-hover/badge:flex',\n\n          'tw:absolute',\n          'tw:top-0',\n          'tw:bottom-0',\n          'tw:focus-within:flex',\n        ],\n      },\n    },\n    compoundVariants: [\n      { variant: 'floating', align: 'inline-end', className: ['tw:right-0'] },\n      { variant: 'floating', align: 'inline-start', className: ['tw:left-0'] },\n    ],\n  },\n);\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;\n\nexport const BadgeAddon = ({\n  ref,\n  align = 'inline-end',\n  variant = 'inline',\n  className,\n  ...rest\n}: Props) => (\n  <div\n    {...rest}\n    ref={ref}\n    data-align={align}\n    data-variant={variant}\n    className={cn(addonVariants({ align, variant, className }))}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'>;\n\nexport const BadgeButton = ({ ref, className, type = 'button', children, ...rest }: Props) => (\n  <button\n    {...rest}\n    ref={ref}\n    type={type}\n    className={cn(\n      'tailwindcss-preflight',\n\n      'tw:inline-flex',\n      'tw:items-center',\n      'tw:justify-center',\n      'tw:cursor-pointer',\n\n      'tw:bg-inherit',\n      'tw:text-inherit',\n\n      'tw:hover:brightness-95',\n      'tw:px-1',\n\n      // The focus ring lives here rather than on `BadgeRoot`, whose own `focus-visible` block\n      // sits on a `div` that never takes focus. Inset, because a badge root clips its overflow —\n      // an outset ring on a nested button would be cut off.\n      'tw:focus-visible:outline-hidden',\n      'tw:focus-visible:ring-2',\n      'tw:focus-visible:ring-inset',\n      'tw:focus-visible:ring-ring',\n      // Default sizing for Lucide-icon children (which ship at 24×24); keeps\n      // the visual baseline aligned with the previous FA-icon API and other\n      // icon-wrapper components (ItemIcon, SidebarMenuIcon).\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n      className,\n    )}\n  >\n    {children}\n  </button>\n);\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'> & {\n  asChild?: boolean;\n};\n\nexport const BadgeLabel = ({ ref, className, asChild = false, ...rest }: Props) => {\n  const Comp = asChild ? Slot : 'span';\n  return (\n    <Comp\n      {...rest}\n      ref={ref}\n      data-slot=\"badge-label\"\n      className={cn(\n        'tw:max-w-56',\n        'tw:truncate',\n        'tw:px-2',\n        'tw:py-0.5',\n\n        // Drop side padding only when an *inline* addon is present —\n        // floating addons overlay the label without taking layout space,\n        // so the label still needs full padding behind them.\n        'tw:group-has-[[data-align=inline-start][data-variant=inline]:not(:empty)]/badge:pl-0',\n        'tw:group-has-[[data-align=inline-end][data-variant=inline]:not(:empty)]/badge:pr-0',\n        className,\n      )}\n    />\n  );\n};\n","import { cva } from 'class-variance-authority';\n\n/**\n * Badge's `color` variants: fill, foreground, and a `decoration-*` matching the fill.\n *\n * - Tinted (`-inverse`) variants invert under `[data-theme=dark]`; solid fills don't.\n * - Measured by `scripts/contrast-audit.ts` and the contrast story tests.\n */\nexport const badgeColors = {\n  gray: 'tw:bg-neutral-400 tw:text-white tw:decoration-neutral-400',\n  'gray-darker': 'tw:bg-neutral-500 tw:text-white tw:decoration-neutral-500',\n  'gray-inverse':\n    'tw:bg-neutral-100 tw:text-neutral-500 tw:decoration-neutral-100 tw:[[data-theme=dark]_&]:bg-neutral-700 tw:[[data-theme=dark]_&]:text-neutral-300 tw:[[data-theme=dark]_&]:decoration-neutral-700',\n  green: 'tw:bg-green-500 tw:text-white tw:decoration-green-500',\n  'green-darker': 'tw:bg-green-600 tw:text-white tw:decoration-green-600',\n  'green-inverse':\n    'tw:bg-green-100 tw:text-green-900 tw:decoration-green-100 tw:[[data-theme=dark]_&]:bg-green-900 tw:[[data-theme=dark]_&]:text-green-200 tw:[[data-theme=dark]_&]:decoration-green-900',\n  blue: 'tw:bg-blue-500 tw:text-white tw:decoration-blue-500',\n  'blue-inverse':\n    'tw:bg-blue-100 tw:text-blue-800 tw:decoration-blue-100 tw:[[data-theme=dark]_&]:bg-blue-900 tw:[[data-theme=dark]_&]:text-blue-200 tw:[[data-theme=dark]_&]:decoration-blue-900',\n  red: 'tw:bg-error-500 tw:text-white tw:decoration-error-500',\n  orange: 'tw:bg-warning-500 tw:text-white tw:decoration-warning-500',\n  'orange-inverse':\n    'tw:bg-warning-100 tw:text-warning-800 tw:decoration-warning-100 tw:[[data-theme=dark]_&]:bg-warning-900 tw:[[data-theme=dark]_&]:text-warning-200 tw:[[data-theme=dark]_&]:decoration-warning-900',\n  amber: 'tw:bg-warning-300 tw:text-warning-800 tw:decoration-warning-300',\n  // One rung deeper than `orange-inverse` so caution stays distinct from warning (same hue).\n  'amber-inverse':\n    'tw:bg-warning-200 tw:text-warning-800 tw:decoration-warning-200 tw:[[data-theme=dark]_&]:bg-warning-800 tw:[[data-theme=dark]_&]:text-warning-200 tw:[[data-theme=dark]_&]:decoration-warning-800',\n  teal: 'tw:bg-teal-500 tw:text-white tw:decoration-teal-500',\n  'teal-inverse':\n    'tw:bg-teal-100 tw:text-teal-800 tw:decoration-teal-100 tw:[[data-theme=dark]_&]:bg-teal-900 tw:[[data-theme=dark]_&]:text-teal-200 tw:[[data-theme=dark]_&]:decoration-teal-900',\n  purple: 'tw:bg-purple-500 tw:text-white tw:decoration-purple-500',\n  'purple-inverse':\n    'tw:bg-purple-100 tw:text-purple-800 tw:decoration-purple-100 tw:[[data-theme=dark]_&]:bg-purple-900 tw:[[data-theme=dark]_&]:text-purple-200 tw:[[data-theme=dark]_&]:decoration-purple-900',\n  cyan: 'tw:bg-cyan-500 tw:text-white tw:decoration-cyan-500',\n  'cyan-inverse':\n    'tw:bg-cyan-100 tw:text-cyan-800 tw:decoration-cyan-100 tw:[[data-theme=dark]_&]:bg-cyan-900 tw:[[data-theme=dark]_&]:text-cyan-200 tw:[[data-theme=dark]_&]:decoration-cyan-900',\n  'sidebar-primary': 'tw:bg-sidebar-primary tw:text-white tw:decoration-sidebar-primary',\n  white: 'tw:bg-white/90 tw:text-neutral-600 tw:decoration-white/90',\n} as const;\n\n/** A `Badge` `color` value. */\nexport type BadgeColor = keyof typeof badgeColors;\n\n/** Tinted variants are held to WCAG-AA; solid fills are pinned, so only recorded. */\nexport const isTintedBadgeColor = (color: string): boolean => color.endsWith('-inverse');\n\nexport const badgeRootVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/badge',\n\n    // display\n    'tw:relative',\n    'tw:inline-flex',\n    'tw:justify-center',\n    'tw:items-center',\n    'tw:min-h-5',\n    'tw:h-fit',\n    'tw:shrink-0',\n    'tw:overflow-hidden',\n\n    // text — weight/tracking are brand-overridable tokens\n    'tw:whitespace-pre-wrap',\n    'tw:break-normal',\n    'tw:text-xs',\n    'tw:font-medium',\n    'tw:tracking-chrome',\n    'tw:text-center',\n    'tw:underline',\n\n    // content\n    'tw:border-none',\n    'tw:[&>svg]:self-center',\n    'tw:[button&]:cursor-pointer',\n\n    // focus\n    'tw:focus-visible:outline-hidden',\n    'tw:focus-visible:ring-2',\n    'tw:focus-visible:ring-inset',\n    'tw:focus-visible:ring-ring',\n  ],\n  {\n    defaultVariants: {\n      color: 'gray',\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        // Only `keboola-legacy-*` brands uppercase; same rule as `Button` and `Tooltip`.\n        default: ['tw:rounded', 'tw:[[data-brand^=keboola-legacy]_&]:uppercase'],\n        tag: ['tw:rounded tw:normal-case'],\n        pill: ['tw:min-w-5 tw:rounded-full tw:normal-case tw:tracking-normal'],\n      },\n      color: badgeColors,\n    },\n  },\n);\n","import type { ComponentProps } from 'react';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport { badgeRootVariants } from './styles';\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof badgeRootVariants>;\n\nexport const BadgeRoot = ({ ref, variant, color, className, children, ...rest }: Props) => (\n  <div\n    {...rest}\n    ref={ref}\n    data-slot=\"badge\"\n    className={cn(badgeRootVariants({ variant, color, className }))}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { BadgeAddon } from './BadgeAddon';\nimport { BadgeButton } from './BadgeButton';\nimport { BadgeLabel } from './BadgeLabel';\nimport { BadgeRoot } from './BadgeRoot';\n\ntype AddonVariant = ComponentProps<typeof BadgeAddon>['variant'];\ntype BadgeRootProps = ComponentProps<typeof BadgeRoot>;\ntype BadgeLabelProps = ComponentProps<typeof BadgeLabel>;\n\n/**\n * - `color` is semantic (`green` success, `red` error, `orange` warning, `amber` caution; rest decorative).\n * - Colours stay fixed across brand themes.\n */\ntype Props = Pick<BadgeRootProps, 'variant' | 'color'> &\n  Omit<BadgeLabelProps, 'prefix'> & {\n    prefix?: ReactNode;\n    prefixVariant?: AddonVariant;\n    suffix?: ReactNode;\n    suffixVariant?: AddonVariant;\n    labelClassName?: string;\n  };\n\n/**\n * Inline pill for a status, count or tag.\n *\n * - Not for actions (`Button` / `ButtonInline`) or banners (`Alert`).\n * - `Badge.Button` for a clickable badge.\n */\nconst BadgeInner = ({\n  ref,\n  variant,\n  color,\n  prefix,\n  prefixVariant = 'inline',\n  suffix,\n  suffixVariant = 'inline',\n  className,\n  labelClassName,\n  ...labelProps\n}: Props) => (\n  <BadgeRoot className={className} variant={variant} color={color}>\n    {prefix && (\n      <BadgeAddon align=\"inline-start\" variant={prefixVariant}>\n        {prefix}\n      </BadgeAddon>\n    )}\n    <BadgeLabel {...labelProps} ref={ref} className={labelClassName} />\n    {suffix && (\n      <BadgeAddon align=\"inline-end\" variant={suffixVariant}>\n        {suffix}\n      </BadgeAddon>\n    )}\n  </BadgeRoot>\n);\n\nexport const Badge = Object.assign(BadgeInner, {\n  Root: BadgeRoot,\n  Button: BadgeButton,\n  Label: BadgeLabel,\n  Addon: BadgeAddon,\n});\n"],"mappings":"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"}

package/dist/{BrandEditor-CS9P4r2p.js → BrandEditor-BU23Vl8V.js}

@@ -1,11 +1,11 @@
-import { Button } from "./Button-DsRrU5F1.js";
+import { Button } from "./Button-Ca4Q3VJU.js";
 import { ToggleGroup } from "./ToggleGroup-Cy_10Mvu.js";
 import { Label } from "./internal/components/Label.js";
-import { TextInput } from "./TextInput-DiEMxVF6.js";
-import { Slider } from "./Slider-Bv0B6lI0.js";
-import { Select } from "./Select-DV3Hak_l.js";
-import { Badge } from "./Badge-o5jURtpB.js";
-import { ColorInput } from "./ColorInput-Dg87lKcR.js";
+import { TextInput } from "./TextInput-CDG2XpBl.js";
+import { Slider } from "./Slider-DWdu9NuM.js";
+import { Select } from "./Select-ByRvkZ3D.js";
+import { Badge } from "./Badge-DIjhwPvh.js";
+import { ColorInput } from "./ColorInput-DSMqrs2-.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
 import { Collapsible } from "./Collapsible-BQXWEOBC.js";
 import { useId, useMemo } from "react";
@@ -900,4 +900,4 @@ const BrandEditor = ({ value, onChange, colorScheme = "light", onColorSchemeChan
 //#endregion
 export { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel };
 
-//# sourceMappingURL=BrandEditor-CS9P4r2p.js.map
+//# sourceMappingURL=BrandEditor-BU23Vl8V.js.map