@keboola/design 15.0.0 → 15.1.0

package/dist/{Modal-CbUz-5YH.js → Modal-DwuvuiUx.js}

@@ -1,7 +1,7 @@
 import { cn } from "./classNames-DcGnTh2N.js";
 import { X } from "./icons-ZIeZXXS7.js";
 import { Button } from "./Button-BNkyYU8u.js";
-import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-cy0Ht9VY.js";
+import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-RGWwIMU6.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close, Content, Portal, Root, Trigger } from "@radix-ui/react-dialog";
@@ -26,7 +26,7 @@ const ModalContent = ({ size = "medium", align = "center", className, children,
 		...props,
 		"data-size": size,
 		"data-align": align,
-		className: cn("tailwindcss-preflight", "tw:group/modal", "tw:fixed", "tw:left-1/2", "tw:-translate-x-1/2", "tw:z-[1051]", "tw:top-1/2", "tw:-translate-y-1/2", "tw:data-[align=top]:top-20", "tw:data-[align=top]:translate-y-0", "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:rounded-modal", "tw:bg-card", "tw:text-card-foreground", "tw: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-[state=open]:zoom-in-95", "tw:data-[state=closed]:zoom-out-95", {
+		className: cn("tailwindcss-preflight", "tw:group/modal", "tw:fixed", "tw:left-1/2", "tw:-translate-x-1/2", "tw:z-overlay", "tw:top-1/2", "tw:-translate-y-1/2", "tw:data-[align=top]:top-20", "tw:data-[align=top]:translate-y-0", "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:rounded-modal", "tw:bg-card", "tw:text-card-foreground", "tw:[[data-theme=dark]_&]:ring-1", "tw:[[data-theme=dark]_&]:ring-foreground/10", "tw: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-[state=open]:zoom-in-95", "tw:data-[state=closed]:zoom-out-95", {
 			"tw:max-w-[480px]": size === "small",
 			"tw:max-w-4xl": size === "large"
 		}, className),
@@ -159,4 +159,4 @@ Modal.Overlay = ModalOverlay;
 //#endregion
 export { Modal };
 
-//# sourceMappingURL=Modal-CbUz-5YH.js.map
+//# sourceMappingURL=Modal-DwuvuiUx.js.map

package/dist/Modal-DwuvuiUx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-DwuvuiUx.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      // soft top/bottom edge fade in place of header/footer separators (pure-CSS utility)\n      'tw:scroll-fade-y',\n\n      // Own horizontal padding, matching Header/Footer so content edges align (ModalContent adds none)\n      'tw: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';\n\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Content> & {\n  size?: 'small' | 'medium' | 'large';\n  /** `top` keeps a form that changes height in place; ignored by the legacy brand (always top-anchored). */\n  align?: 'center' | 'top';\n};\n\nexport const ModalContent = ({\n  size = 'medium',\n  align = 'center',\n  className,\n  children,\n  onEscapeKeyDown,\n  ...props\n}: Props) => {\n  const handleEscapeKeyDown: typeof onEscapeKeyDown = (event) => {\n    // Keeps parent modals (e.g. FullScreenModal) open\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-size\n          {...props}\n          data-size={size}\n          data-align={align}\n          className={cn(\n            'tailwindcss-preflight',\n            'tw:group/modal',\n\n            'tw:fixed',\n            'tw:left-1/2',\n            'tw:-translate-x-1/2',\n            'tw:z-overlay',\n\n            'tw:top-1/2',\n            'tw:-translate-y-1/2',\n            'tw:data-[align=top]:top-20',\n            'tw:data-[align=top]:translate-y-0',\n\n            'tw:w-full',\n            'tw:max-w-2xl',\n            'tw:max-h-[calc(100vh-2*theme(spacing.20))]',\n\n            'tw:flex',\n            'tw:flex-col',\n            'tw:gap-4',\n            'tw:rounded-modal',\n            'tw:bg-card',\n            'tw:text-card-foreground',\n            // Dark depth is a lighter surface plus a hairline, not a shadow.\n            'tw:[[data-theme=dark]_&]:ring-1',\n            'tw:[[data-theme=dark]_&]:ring-foreground/10',\n\n            // Vertical padding here survives an omitted Header/Footer; horizontal is theirs, so the\n            // Body scrollbar sits at the modal edge.\n            'tw:py-4',\n\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 -1/2 slide classes: centring uses `translate`, the animation `transform`; they\n            // compose, so a -50% slide would stack to -100% and fly in from the top-left.\n            'tw:data-[state=open]:zoom-in-95',\n            'tw: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\n/**\n * The modal's action row.\n *\n * - A child that should fill the row carries `tw:w-full` itself; the footer is already full width.\n * - tailwind-merge replaces only within a group: `tw:flex-col` keeps `items-center`, so add `tw:items-stretch`.\n */\nexport const ModalFooter = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    className={cn('tw:flex', 'tw:items-center', 'tw:justify-end', 'tw:gap-2', 'tw:px-4', className)}\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      // gutter from the title, carried here so the header grid needs no column gap\n      'tw: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';\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: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  </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`; remote images use `Modal.Image`.\n *\n * - Soft-tinted inline badge in the header grid's first column, next to the title.\n * - `color` is categorical (`red` destructive … `violet` agent), fixed across 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        'tw:col-start-1',\n        'tw:row-start-1',\n        'tw:self-start',\n        'tw:mr-3',\n        'tw:size-8',\n        'tw:rounded',\n        'tw:overflow-hidden',\n        'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n\n        {\n          'tw:bg-warning-100 tw:text-warning-500 tw:[[data-theme=dark]_&]:bg-warning-900 tw:[[data-theme=dark]_&]:text-warning-200':\n            color === 'orange',\n          'tw:bg-blue-100 tw:text-blue-600 tw:[[data-theme=dark]_&]:bg-blue-900 tw:[[data-theme=dark]_&]:text-blue-200':\n            color === 'blue',\n          'tw:bg-green-100 tw:text-green-900 tw:[[data-theme=dark]_&]:bg-green-900 tw:[[data-theme=dark]_&]:text-green-200':\n            color === 'green',\n          'tw:bg-error-100 tw:text-error-500 tw:[[data-theme=dark]_&]:bg-error-900 tw:[[data-theme=dark]_&]:text-error-200':\n            color === 'red',\n          'tw:bg-neutral-100 tw:text-neutral-500 tw:[[data-theme=dark]_&]:bg-neutral-700 tw:[[data-theme=dark]_&]:text-neutral-300':\n            color === 'gray',\n          'tw:bg-purple-100 tw:text-purple-500 tw:[[data-theme=dark]_&]:bg-purple-900 tw:[[data-theme=dark]_&]:text-purple-200':\n            color === 'violet',\n        },\n\n        // custom (non-named) colour\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        // inline badge in the header grid's first column\n        'tw:flex',\n        'tw:col-start-1',\n        'tw:row-start-1',\n        'tw:self-start',\n        'tw:mr-3',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:rounded',\n        'tw: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 the user must act on before continuing. Built on Radix Dialog.\n *\n * - Not for side editing (`Sheet`), anchored confirms (`Popconfirm`) or hover previews (`HoverCard`).\n * - `Modal.Content` wraps Header + Body + Footer; a form's `FormBody` goes in Body, its buttons in Footer.\n *\n * @see RECIPES.md#modal-form\n * @see RECIPES.md#confirm-dialog\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-cy0Ht9VY.js → ModalTitle-RGWwIMU6.js}

@@ -6,7 +6,7 @@ import { Overlay, Title } from "@radix-ui/react-dialog";
 const ModalOverlay = ({ ref, className, disableTransition = false, ...props }) => /* @__PURE__ */ jsx(Overlay, {
 	...props,
 	ref,
-	className: cn("tw:fixed", "tw:inset-0", "tw:z-[1051]", "tw:bg-scrim", "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),
+	className: cn("tw:fixed", "tw:inset-0", "tw:z-overlay", "tw:bg-scrim", "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
@@ -25,4 +25,4 @@ const ModalTitle = ({ children, className, ...props }) => /* @__PURE__ */ jsx(Ti
 //#endregion
 export { ModalDescription, ModalOverlay, ModalTitle };
 
-//# sourceMappingURL=ModalTitle-cy0Ht9VY.js.map
+//# sourceMappingURL=ModalTitle-RGWwIMU6.js.map

package/dist/ModalTitle-RGWwIMU6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTitle-RGWwIMU6.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-overlay',\n\n      // background\n      'tw:bg-scrim',\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      // `wrap-anywhere` because the slot routinely carries an identifier — a Storage table id, a\n      // fully-qualified name — which offers no break opportunity and paints outside the frame\n      // without one. `ModalTitle` carries it for the same reason.\n      'tw:wrap-anywhere',\n      'tw:text-sm',\n      'tw:font-sans',\n      'tw:tracking-normal',\n      'tw:font-normal',\n      'tw:text-muted-foreground',\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:wrap-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,gBAGA,eAGA,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,GAIT,oBACA,cACA,gBACA,sBACA,kBACA,4BACA,SACF;CACA,GAAI;AACL,CAAA;;;ACfH,MAAa,cAAc,EAAE,UAAU,WAAW,GAAG,YACnD,oBAAC,OAAD;CACE,GAAI;CACJ,WAAW,GAAG,aAAa,oBAAoB,gBAAgB,oBAAoB,SAAS;CAE3F;AACI,CAAA"}

package/dist/{PageToolbar-DJ5tdYla.js → PageToolbar-LKP6PiP_.js}

@@ -1,8 +1,8 @@
 import { cn } from "./classNames-DcGnTh2N.js";
 import { ChevronDown, Plus, X } from "./icons-ZIeZXXS7.js";
 import { Button } from "./Button-BNkyYU8u.js";
-import { Popover } from "./Popover-DtUDwUVO.js";
-import { Badge } from "./Badge-5GHIsgRS.js";
+import { Popover } from "./Popover-DnBw5Uay.js";
+import { Badge } from "./Badge-CqlOE5A2.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/PageToolbar/PageToolbarToken.tsx
 /**
@@ -120,4 +120,4 @@ const PageToolbar = Object.assign(Root, {
 //#endregion
 export { PageToolbar };
 
-//# sourceMappingURL=PageToolbar-DJ5tdYla.js.map
+//# sourceMappingURL=PageToolbar-LKP6PiP_.js.map

package/dist/{PageToolbar-DJ5tdYla.js.map → PageToolbar-LKP6PiP_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PageToolbar-DJ5tdYla.js","names":[],"sources":["../src/blocks/PageToolbar/PageToolbarToken.tsx","../src/blocks/PageToolbar/PageToolbar.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Popover } from '../../components/Popover';\nimport { ChevronDown, X } from '../../icons';\n\ntype PageToolbarTokenProps = Omit<\n  ComponentPropsWithoutRef<typeof Badge>,\n  'variant' | 'color' | 'suffix' | 'children' | 'asChild' | 'popover'\n> & {\n  children: ReactNode;\n  /** Popover content rendered when the chevron-down trigger is clicked — typically a value editor. */\n  popover: ReactNode;\n  onRemove: () => void;\n  removeAriaLabel: string;\n};\n\n/**\n * Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`\n * popover trigger for editing values and an `×` dismiss button. The popover content\n * is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).\n */\nexport const PageToolbarToken = ({\n  children,\n  popover,\n  onRemove,\n  removeAriaLabel,\n  ...props\n}: PageToolbarTokenProps) => (\n  <Popover>\n    <Badge\n      {...props}\n      asChild\n      variant=\"pill\"\n      color=\"blue-inverse\"\n      suffix={\n        <Button\n          type=\"button\"\n          variant=\"inline\"\n          size=\"icon-2xs\"\n          aria-label={removeAriaLabel}\n          onClick={onRemove}\n        >\n          <X className=\"tw:size-3\" />\n        </Button>\n      }\n    >\n      <Popover.Trigger\n        type=\"button\"\n        className=\"tw:inline-flex tw:cursor-pointer tw:items-center tw:gap-1 tw:bg-inherit tw:text-inherit tailwindcss-preflight\"\n      >\n        {children}\n        <ChevronDown className=\"tw:size-3\" />\n      </Popover.Trigger>\n    </Badge>\n    <Popover.Content align=\"start\">{popover}</Popover.Content>\n  </Popover>\n);\n","import type { ComponentProps, ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Plus, X } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PageToolbarToken } from './PageToolbarToken';\n\ntype DivProps = ComponentProps<'div'>;\n\nconst Root = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:w-full', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst Search = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn(\n      'tw:mr-auto tw:flex tw:items-center tw:gap-2 tw:w-full tw:sm:w-auto tw:sm:min-w-64 tw:sm:max-w-md',\n      // The search field fills the slot, else it stays content-width and truncates its placeholder.\n      // - First child only: stretching the filter pills after it would size them like the input.\n      // - `min-w-0` so a long value shrinks the input rather than overflowing the toolbar.\n      'tw:*:first:min-w-0 tw:*:first:flex-1',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst Right = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-2', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst ControlGroup = ({ ref, className, children, ...props }: DivProps) => (\n  <div ref={ref} className={cn('tw:flex tw:items-center tw:gap-2', className)} {...props}>\n    {children}\n  </div>\n);\n\nconst ActiveFilters = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:basis-full', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\ntype ChipProps = Omit<\n  ComponentPropsWithoutRef<typeof Badge>,\n  'variant' | 'color' | 'suffix' | 'children'\n> & {\n  children: ReactNode;\n  onRemove: () => void;\n  removeAriaLabel: string;\n};\n\nconst Chip = ({ children, onRemove, removeAriaLabel, ...props }: ChipProps) => (\n  <Badge\n    {...props}\n    variant=\"pill\"\n    color=\"blue-inverse\"\n    suffix={\n      <Button\n        type=\"button\"\n        variant=\"inline\"\n        size=\"icon-2xs\"\n        aria-label={removeAriaLabel}\n        onClick={onRemove}\n      >\n        <X className=\"tw:size-3\" />\n      </Button>\n    }\n  >\n    {children}\n  </Badge>\n);\n\ntype ActionProps = ComponentPropsWithoutRef<typeof Button>;\n\nconst AddFilter = ({ className, children, ...props }: ActionProps) => (\n  <Button variant=\"invisible\" size=\"small\" className={cn('tw:gap-1.5', className)} {...props}>\n    <Plus className=\"tw:size-4\" />\n    {children ?? 'Add filter'}\n  </Button>\n);\n\nconst Clear = ({ className, children, ...props }: ActionProps) => (\n  <Button variant=\"invisible\" size=\"small\" className={cn('tw:ml-auto', className)} {...props}>\n    {children ?? 'Clear all'}\n  </Button>\n);\n\n/**\n * Search / filter toolbar for index pages, between `PageLayout.Header` and `PageLayout.Content`.\n *\n * - Right cluster order: `Filters` → `Sort` → `Actions` → `View`; nothing after `View`.\n * - `ActiveFilters` only while a filter is active; chips or tokens, never both in one toolbar.\n *\n * @see https://github.com/evviku/design-system-docs/blob/main/docs/patterns/toolbar/toolbar.md\n */\nexport const PageToolbar = Object.assign(Root, {\n  Search,\n  Right,\n  Filters: ControlGroup,\n  Sort: ControlGroup,\n  Actions: ControlGroup,\n  /** Always last in the right cluster. */\n  View: ControlGroup,\n  /** Render only while a filter is active. */\n  ActiveFilters,\n  /** Non-editable filter chip. */\n  Chip,\n  /** Editable filter token; the caller supplies the edit popover via `popover`. */\n  Token: PageToolbarToken,\n  AddFilter,\n  Clear,\n});\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAa,oBAAoB,EAC/B,UACA,SACA,UACA,iBACA,GAAG,YAEH,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,OAAD;CACE,GAAI;CACJ,SAAA;CACA,SAAQ;CACR,OAAM;CACN,QACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,SAAS;EAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;CAGV,UAAA,qBAAC,QAAQ,SAAT;EACE,MAAK;EACL,WAAU;EAFZ,UAAA,CAIG,UACD,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA,CACrB;;AACZ,CAAA,GACP,oBAAC,QAAQ,SAAT;CAAiB,OAAM;CAAS,UAAA;AAAyB,CAAA,CAClD,EAAA,CAAA;;;AC9CX,MAAM,QAAQ,EAAE,KAAK,WAAW,UAAU,GAAG,YAC3C,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,2DAA2D,SAAS;CAClF,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,UAAU,EAAE,KAAK,WAAW,UAAU,GAAG,YAC7C,oBAAC,OAAD;CACO;CACL,WAAW,GACT,oGAIA,wCACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,SAAS,EAAE,KAAK,WAAW,UAAU,GAAG,YAC5C,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,iDAAiD,SAAS;CACxE,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,gBAAgB,EAAE,KAAK,WAAW,UAAU,GAAG,YACnD,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,oCAAoC,SAAS;CAAG,GAAI;CAC9E;AACE,CAAA;AAGP,MAAM,iBAAiB,EAAE,KAAK,WAAW,UAAU,GAAG,YACpD,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,+DAA+D,SAAS;CACtF,GAAI;CAEH;AACE,CAAA;AAYP,MAAM,QAAQ,EAAE,UAAU,UAAU,iBAAiB,GAAG,YACtD,oBAAC,OAAD;CACE,GAAI;CACJ,SAAQ;CACR,OAAM;CACN,QACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,SAAS;EAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;CAGT;AACI,CAAA;AAKT,MAAM,aAAa,EAAE,WAAW,UAAU,GAAG,YAC3C,qBAAC,QAAD;CAAQ,SAAQ;CAAY,MAAK;CAAQ,WAAW,GAAG,cAAc,SAAS;CAAG,GAAI;CAArF,UAAA,CACE,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA,GAC5B,YAAY,YACP;;AAGV,MAAM,SAAS,EAAE,WAAW,UAAU,GAAG,YACvC,oBAAC,QAAD;CAAQ,SAAQ;CAAY,MAAK;CAAQ,WAAW,GAAG,cAAc,SAAS;CAAG,GAAI;CAClF,UAAA,YAAY;AACP,CAAA;;;;;;;;;AAWV,MAAa,cAAc,OAAO,OAAO,MAAM;CAC7C;CACA;CACA,SAAS;CACT,MAAM;CACN,SAAS;;CAET,MAAM;;CAEN;;CAEA;;CAEA,OAAO;CACP;CACA;AACF,CAAC"}
+{"version":3,"file":"PageToolbar-LKP6PiP_.js","names":[],"sources":["../src/blocks/PageToolbar/PageToolbarToken.tsx","../src/blocks/PageToolbar/PageToolbar.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Popover } from '../../components/Popover';\nimport { ChevronDown, X } from '../../icons';\n\ntype PageToolbarTokenProps = Omit<\n  ComponentPropsWithoutRef<typeof Badge>,\n  'variant' | 'color' | 'suffix' | 'children' | 'asChild' | 'popover'\n> & {\n  children: ReactNode;\n  /** Popover content rendered when the chevron-down trigger is clicked — typically a value editor. */\n  popover: ReactNode;\n  onRemove: () => void;\n  removeAriaLabel: string;\n};\n\n/**\n * Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`\n * popover trigger for editing values and an `×` dismiss button. The popover content\n * is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).\n */\nexport const PageToolbarToken = ({\n  children,\n  popover,\n  onRemove,\n  removeAriaLabel,\n  ...props\n}: PageToolbarTokenProps) => (\n  <Popover>\n    <Badge\n      {...props}\n      asChild\n      variant=\"pill\"\n      color=\"blue-inverse\"\n      suffix={\n        <Button\n          type=\"button\"\n          variant=\"inline\"\n          size=\"icon-2xs\"\n          aria-label={removeAriaLabel}\n          onClick={onRemove}\n        >\n          <X className=\"tw:size-3\" />\n        </Button>\n      }\n    >\n      <Popover.Trigger\n        type=\"button\"\n        className=\"tw:inline-flex tw:cursor-pointer tw:items-center tw:gap-1 tw:bg-inherit tw:text-inherit tailwindcss-preflight\"\n      >\n        {children}\n        <ChevronDown className=\"tw:size-3\" />\n      </Popover.Trigger>\n    </Badge>\n    <Popover.Content align=\"start\">{popover}</Popover.Content>\n  </Popover>\n);\n","import type { ComponentProps, ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Plus, X } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PageToolbarToken } from './PageToolbarToken';\n\ntype DivProps = ComponentProps<'div'>;\n\nconst Root = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:w-full', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst Search = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn(\n      'tw:mr-auto tw:flex tw:items-center tw:gap-2 tw:w-full tw:sm:w-auto tw:sm:min-w-64 tw:sm:max-w-md',\n      // The search field fills the slot, else it stays content-width and truncates its placeholder.\n      // - First child only: stretching the filter pills after it would size them like the input.\n      // - `min-w-0` so a long value shrinks the input rather than overflowing the toolbar.\n      'tw:*:first:min-w-0 tw:*:first:flex-1',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst Right = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-2', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst ControlGroup = ({ ref, className, children, ...props }: DivProps) => (\n  <div ref={ref} className={cn('tw:flex tw:items-center tw:gap-2', className)} {...props}>\n    {children}\n  </div>\n);\n\nconst ActiveFilters = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:basis-full', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\ntype ChipProps = Omit<\n  ComponentPropsWithoutRef<typeof Badge>,\n  'variant' | 'color' | 'suffix' | 'children'\n> & {\n  children: ReactNode;\n  onRemove: () => void;\n  removeAriaLabel: string;\n};\n\nconst Chip = ({ children, onRemove, removeAriaLabel, ...props }: ChipProps) => (\n  <Badge\n    {...props}\n    variant=\"pill\"\n    color=\"blue-inverse\"\n    suffix={\n      <Button\n        type=\"button\"\n        variant=\"inline\"\n        size=\"icon-2xs\"\n        aria-label={removeAriaLabel}\n        onClick={onRemove}\n      >\n        <X className=\"tw:size-3\" />\n      </Button>\n    }\n  >\n    {children}\n  </Badge>\n);\n\ntype ActionProps = ComponentPropsWithoutRef<typeof Button>;\n\nconst AddFilter = ({ className, children, ...props }: ActionProps) => (\n  <Button variant=\"invisible\" size=\"small\" className={cn('tw:gap-1.5', className)} {...props}>\n    <Plus className=\"tw:size-4\" />\n    {children ?? 'Add filter'}\n  </Button>\n);\n\nconst Clear = ({ className, children, ...props }: ActionProps) => (\n  <Button variant=\"invisible\" size=\"small\" className={cn('tw:ml-auto', className)} {...props}>\n    {children ?? 'Clear all'}\n  </Button>\n);\n\n/**\n * Search / filter toolbar for index pages, between `PageLayout.Header` and `PageLayout.Content`.\n *\n * - Right cluster order: `Filters` → `Sort` → `Actions` → `View`; nothing after `View`.\n * - `ActiveFilters` only while a filter is active; chips or tokens, never both in one toolbar.\n *\n * @see https://github.com/evviku/design-system-docs/blob/main/docs/patterns/toolbar/toolbar.md\n */\nexport const PageToolbar = Object.assign(Root, {\n  Search,\n  Right,\n  Filters: ControlGroup,\n  Sort: ControlGroup,\n  Actions: ControlGroup,\n  /** Always last in the right cluster. */\n  View: ControlGroup,\n  /** Render only while a filter is active. */\n  ActiveFilters,\n  /** Non-editable filter chip. */\n  Chip,\n  /** Editable filter token; the caller supplies the edit popover via `popover`. */\n  Token: PageToolbarToken,\n  AddFilter,\n  Clear,\n});\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAa,oBAAoB,EAC/B,UACA,SACA,UACA,iBACA,GAAG,YAEH,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,OAAD;CACE,GAAI;CACJ,SAAA;CACA,SAAQ;CACR,OAAM;CACN,QACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,SAAS;EAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;CAGV,UAAA,qBAAC,QAAQ,SAAT;EACE,MAAK;EACL,WAAU;EAFZ,UAAA,CAIG,UACD,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA,CACrB;;AACZ,CAAA,GACP,oBAAC,QAAQ,SAAT;CAAiB,OAAM;CAAS,UAAA;AAAyB,CAAA,CAClD,EAAA,CAAA;;;AC9CX,MAAM,QAAQ,EAAE,KAAK,WAAW,UAAU,GAAG,YAC3C,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,2DAA2D,SAAS;CAClF,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,UAAU,EAAE,KAAK,WAAW,UAAU,GAAG,YAC7C,oBAAC,OAAD;CACO;CACL,WAAW,GACT,oGAIA,wCACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,SAAS,EAAE,KAAK,WAAW,UAAU,GAAG,YAC5C,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,iDAAiD,SAAS;CACxE,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,gBAAgB,EAAE,KAAK,WAAW,UAAU,GAAG,YACnD,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,oCAAoC,SAAS;CAAG,GAAI;CAC9E;AACE,CAAA;AAGP,MAAM,iBAAiB,EAAE,KAAK,WAAW,UAAU,GAAG,YACpD,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,+DAA+D,SAAS;CACtF,GAAI;CAEH;AACE,CAAA;AAYP,MAAM,QAAQ,EAAE,UAAU,UAAU,iBAAiB,GAAG,YACtD,oBAAC,OAAD;CACE,GAAI;CACJ,SAAQ;CACR,OAAM;CACN,QACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,SAAS;EAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;CAGT;AACI,CAAA;AAKT,MAAM,aAAa,EAAE,WAAW,UAAU,GAAG,YAC3C,qBAAC,QAAD;CAAQ,SAAQ;CAAY,MAAK;CAAQ,WAAW,GAAG,cAAc,SAAS;CAAG,GAAI;CAArF,UAAA,CACE,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA,GAC5B,YAAY,YACP;;AAGV,MAAM,SAAS,EAAE,WAAW,UAAU,GAAG,YACvC,oBAAC,QAAD;CAAQ,SAAQ;CAAY,MAAK;CAAQ,WAAW,GAAG,cAAc,SAAS;CAAG,GAAI;CAClF,UAAA,YAAY;AACP,CAAA;;;;;;;;;AAWV,MAAa,cAAc,OAAO,OAAO,MAAM;CAC7C;CACA;CACA,SAAS;CACT,MAAM;CACN,SAAS;;CAET,MAAM;;CAEN;;CAEA;;CAEA,OAAO;CACP;CACA;AACF,CAAC"}

package/dist/{Popconfirm-DwLCYNaF.js → Popconfirm-p72DiagN.js}

@@ -1,7 +1,7 @@
 import { cn } from "./classNames-DcGnTh2N.js";
 import { Button } from "./Button-BNkyYU8u.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { Popover } from "./Popover-DtUDwUVO.js";
+import { Popover } from "./Popover-DnBw5Uay.js";
 import { createContext, use, useMemo, useState } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
@@ -163,4 +163,4 @@ Popconfirm.Trigger = PopconfirmTrigger;
 //#endregion
 export { Popconfirm };
 
-//# sourceMappingURL=Popconfirm-DwLCYNaF.js.map
+//# sourceMappingURL=Popconfirm-p72DiagN.js.map

package/dist/{Popconfirm-DwLCYNaF.js.map → Popconfirm-p72DiagN.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Popconfirm-DwLCYNaF.js","names":[],"sources":["../src/components/Popconfirm/context.ts","../src/components/Popconfirm/PopconfirmBody.tsx","../src/components/Popconfirm/PopconfirmCancel.tsx","../src/components/Popconfirm/PopconfirmConfirm.tsx","../src/components/Popconfirm/PopconfirmContent.tsx","../src/components/Popconfirm/PopconfirmFooter.tsx","../src/components/Popconfirm/PopconfirmTrigger.tsx","../src/components/Popconfirm/Popconfirm.tsx"],"sourcesContent":["import { createContext, type MouseEvent, use } from 'react';\n\nexport type PopconfirmContextType = {\n  variant: 'confirm' | 'danger';\n  onConfirm: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;\n  onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n  enabled: boolean;\n  isLoading: boolean;\n};\n\nconst PopconfirmContext = createContext<PopconfirmContextType | null>(null);\n\nexport const PopconfirmContextProvider = PopconfirmContext;\n\nexport const usePopconfirmContext = () => {\n  const context = use(PopconfirmContext);\n  if (!context) throw new Error('usePopconfirmContext must be used within a Popconfirm');\n  return context;\n};\n","import type { ComponentProps } from 'react';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmBody = (props: Props) => <div {...props} />;\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n  ComponentProps<typeof Button>,\n  'children'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmCancel = ({\n  ref,\n  onClick,\n  children,\n  asChild,\n  className,\n  ...props\n}: Props) => {\n  const { onCancel, isLoading } = usePopconfirmContext();\n\n  const handleClick: ComponentProps<'button'>['onClick'] = (event) => {\n    onClick?.(event);\n    onCancel(event);\n  };\n\n  return (\n    <Popover.Close asChild onClick={handleClick} disabled={isLoading}>\n      {asChild ? (\n        <Slot {...props} ref={ref} className={className}>\n          {children}\n        </Slot>\n      ) : (\n        <Button variant=\"outline\" size=\"small\" {...props} ref={ref} className={cn(className)}>\n          {children ?? 'Cancel'}\n        </Button>\n      )}\n    </Popover.Close>\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button/Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n  ComponentProps<typeof Button>,\n  'children' | 'isLoading'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmConfirm = ({\n  ref,\n  onClick,\n  children,\n  asChild,\n  className,\n  ...props\n}: Props) => {\n  const { onConfirm, variant, isLoading } = usePopconfirmContext();\n\n  const handleOnClick: ComponentProps<'button'>['onClick'] = (event) => {\n    onClick?.(event);\n    onConfirm(event);\n  };\n\n  const defaultLabel = (() => {\n    if (children) return children;\n    return variant === 'danger' ? 'Delete' : 'Confirm';\n  })();\n\n  return (\n    <Popover.Close asChild onClick={handleOnClick} disabled={isLoading} data-loading={isLoading}>\n      {asChild ? (\n        <Slot {...props} ref={ref} className={className}>\n          {children}\n        </Slot>\n      ) : (\n        <Button\n          size=\"small\"\n          variant={variant === 'danger' ? 'danger' : 'primary'}\n          {...props}\n          ref={ref}\n          className={cn('tw:flex-1', className)}\n          isLoading={isLoading}\n        >\n          {defaultLabel}\n        </Button>\n      )}\n    </Popover.Close>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof Popover.Content>, 'showArrow'>;\n\nexport const PopconfirmContent = ({ className, onInteractOutside, ...props }: Props) => {\n  const { isLoading } = usePopconfirmContext();\n\n  const handleOnInteractOutside: Props['onInteractOutside'] = (event) => {\n    if (isLoading) event.preventDefault();\n    onInteractOutside?.(event);\n  };\n\n  return (\n    <Popover.Content\n      {...props}\n      onInteractOutside={handleOnInteractOutside}\n      className={cn('tw:flex', 'tw:flex-col', 'tw:gap-3', 'tw:px-4', 'tw:py-3', className)}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmFooter = ({ className, ...props }: Props) => (\n  <div {...props} className={cn('tw:flex tw:gap-2 tw:w-full', className)} />\n);\n","import type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = ComponentProps<typeof Popover.Trigger>;\n\nexport const PopconfirmTrigger = ({ onClick, ...props }: Props) => {\n  const { enabled, onConfirm } = usePopconfirmContext();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    if (!enabled) {\n      event.preventDefault();\n      onConfirm(event);\n    }\n\n    onClick?.(event);\n  };\n\n  return <Popover.Trigger {...props} onClick={handleClick} />;\n};\n","import { useMemo, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { Popover } from '../Popover';\n\nimport { PopconfirmContextProvider, type PopconfirmContextType } from './context';\nimport { PopconfirmBody } from './PopconfirmBody';\nimport { PopconfirmCancel } from './PopconfirmCancel';\nimport { PopconfirmConfirm } from './PopconfirmConfirm';\nimport { PopconfirmContent } from './PopconfirmContent';\nimport { PopconfirmFooter } from './PopconfirmFooter';\nimport { PopconfirmTrigger } from './PopconfirmTrigger';\n\nconst noop = () => void 0;\n\ntype Props = {\n  children: ReactNode;\n  skipAsyncWait?: boolean;\n} & ComponentProps<typeof Popover> &\n  Omit<Partial<PopconfirmContextType>, 'isLoading'>;\n\nexport const Popconfirm = ({\n  children,\n  onConfirm = noop,\n  onCancel = noop,\n  variant = 'confirm',\n  enabled = true,\n  onOpenChange = noop,\n  open,\n  skipAsyncWait = false,\n  ...rest\n}: Props) => {\n  const [isLoading, setIsLoading] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleConfirm = useStableCallback(onConfirm);\n  const handleCancel = useStableCallback(onCancel);\n\n  const handleOnOpenChange = (open: boolean) => {\n    setIsOpen(open);\n    onOpenChange(open);\n  };\n\n  const context = useMemo<PopconfirmContextType>(\n    () => ({\n      variant,\n      isLoading,\n      enabled,\n      onConfirm: (event) => {\n        const result = handleConfirm(event);\n\n        if (!(result instanceof Promise) || skipAsyncWait) return;\n\n        // The async confirm's outcome drives the popover.\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        setIsLoading(true);\n        result.then(() => setIsOpen(false)).finally(() => setIsLoading(false));\n      },\n      onCancel: handleCancel,\n    }),\n    [variant, isLoading, enabled, skipAsyncWait, handleConfirm, handleCancel],\n  );\n\n  return (\n    <Popover {...rest} open={open || isOpen} onOpenChange={handleOnOpenChange}>\n      <PopconfirmContextProvider value={context}>{children}</PopconfirmContextProvider>\n    </Popover>\n  );\n};\n\nPopconfirm.Confirm = PopconfirmConfirm;\nPopconfirm.Cancel = PopconfirmCancel;\nPopconfirm.Footer = PopconfirmFooter;\nPopconfirm.Content = PopconfirmContent;\nPopconfirm.Body = PopconfirmBody;\nPopconfirm.Trigger = PopconfirmTrigger;\n"],"mappings":"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"}
+{"version":3,"file":"Popconfirm-p72DiagN.js","names":[],"sources":["../src/components/Popconfirm/context.ts","../src/components/Popconfirm/PopconfirmBody.tsx","../src/components/Popconfirm/PopconfirmCancel.tsx","../src/components/Popconfirm/PopconfirmConfirm.tsx","../src/components/Popconfirm/PopconfirmContent.tsx","../src/components/Popconfirm/PopconfirmFooter.tsx","../src/components/Popconfirm/PopconfirmTrigger.tsx","../src/components/Popconfirm/Popconfirm.tsx"],"sourcesContent":["import { createContext, type MouseEvent, use } from 'react';\n\nexport type PopconfirmContextType = {\n  variant: 'confirm' | 'danger';\n  onConfirm: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;\n  onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n  enabled: boolean;\n  isLoading: boolean;\n};\n\nconst PopconfirmContext = createContext<PopconfirmContextType | null>(null);\n\nexport const PopconfirmContextProvider = PopconfirmContext;\n\nexport const usePopconfirmContext = () => {\n  const context = use(PopconfirmContext);\n  if (!context) throw new Error('usePopconfirmContext must be used within a Popconfirm');\n  return context;\n};\n","import type { ComponentProps } from 'react';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmBody = (props: Props) => <div {...props} />;\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n  ComponentProps<typeof Button>,\n  'children'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmCancel = ({\n  ref,\n  onClick,\n  children,\n  asChild,\n  className,\n  ...props\n}: Props) => {\n  const { onCancel, isLoading } = usePopconfirmContext();\n\n  const handleClick: ComponentProps<'button'>['onClick'] = (event) => {\n    onClick?.(event);\n    onCancel(event);\n  };\n\n  return (\n    <Popover.Close asChild onClick={handleClick} disabled={isLoading}>\n      {asChild ? (\n        <Slot {...props} ref={ref} className={className}>\n          {children}\n        </Slot>\n      ) : (\n        <Button variant=\"outline\" size=\"small\" {...props} ref={ref} className={cn(className)}>\n          {children ?? 'Cancel'}\n        </Button>\n      )}\n    </Popover.Close>\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button/Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n  ComponentProps<typeof Button>,\n  'children' | 'isLoading'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmConfirm = ({\n  ref,\n  onClick,\n  children,\n  asChild,\n  className,\n  ...props\n}: Props) => {\n  const { onConfirm, variant, isLoading } = usePopconfirmContext();\n\n  const handleOnClick: ComponentProps<'button'>['onClick'] = (event) => {\n    onClick?.(event);\n    onConfirm(event);\n  };\n\n  const defaultLabel = (() => {\n    if (children) return children;\n    return variant === 'danger' ? 'Delete' : 'Confirm';\n  })();\n\n  return (\n    <Popover.Close asChild onClick={handleOnClick} disabled={isLoading} data-loading={isLoading}>\n      {asChild ? (\n        <Slot {...props} ref={ref} className={className}>\n          {children}\n        </Slot>\n      ) : (\n        <Button\n          size=\"small\"\n          variant={variant === 'danger' ? 'danger' : 'primary'}\n          {...props}\n          ref={ref}\n          className={cn('tw:flex-1', className)}\n          isLoading={isLoading}\n        >\n          {defaultLabel}\n        </Button>\n      )}\n    </Popover.Close>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof Popover.Content>, 'showArrow'>;\n\nexport const PopconfirmContent = ({ className, onInteractOutside, ...props }: Props) => {\n  const { isLoading } = usePopconfirmContext();\n\n  const handleOnInteractOutside: Props['onInteractOutside'] = (event) => {\n    if (isLoading) event.preventDefault();\n    onInteractOutside?.(event);\n  };\n\n  return (\n    <Popover.Content\n      {...props}\n      onInteractOutside={handleOnInteractOutside}\n      className={cn('tw:flex', 'tw:flex-col', 'tw:gap-3', 'tw:px-4', 'tw:py-3', className)}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmFooter = ({ className, ...props }: Props) => (\n  <div {...props} className={cn('tw:flex tw:gap-2 tw:w-full', className)} />\n);\n","import type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = ComponentProps<typeof Popover.Trigger>;\n\nexport const PopconfirmTrigger = ({ onClick, ...props }: Props) => {\n  const { enabled, onConfirm } = usePopconfirmContext();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    if (!enabled) {\n      event.preventDefault();\n      onConfirm(event);\n    }\n\n    onClick?.(event);\n  };\n\n  return <Popover.Trigger {...props} onClick={handleClick} />;\n};\n","import { useMemo, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { Popover } from '../Popover';\n\nimport { PopconfirmContextProvider, type PopconfirmContextType } from './context';\nimport { PopconfirmBody } from './PopconfirmBody';\nimport { PopconfirmCancel } from './PopconfirmCancel';\nimport { PopconfirmConfirm } from './PopconfirmConfirm';\nimport { PopconfirmContent } from './PopconfirmContent';\nimport { PopconfirmFooter } from './PopconfirmFooter';\nimport { PopconfirmTrigger } from './PopconfirmTrigger';\n\nconst noop = () => void 0;\n\ntype Props = {\n  children: ReactNode;\n  skipAsyncWait?: boolean;\n} & ComponentProps<typeof Popover> &\n  Omit<Partial<PopconfirmContextType>, 'isLoading'>;\n\nexport const Popconfirm = ({\n  children,\n  onConfirm = noop,\n  onCancel = noop,\n  variant = 'confirm',\n  enabled = true,\n  onOpenChange = noop,\n  open,\n  skipAsyncWait = false,\n  ...rest\n}: Props) => {\n  const [isLoading, setIsLoading] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleConfirm = useStableCallback(onConfirm);\n  const handleCancel = useStableCallback(onCancel);\n\n  const handleOnOpenChange = (open: boolean) => {\n    setIsOpen(open);\n    onOpenChange(open);\n  };\n\n  const context = useMemo<PopconfirmContextType>(\n    () => ({\n      variant,\n      isLoading,\n      enabled,\n      onConfirm: (event) => {\n        const result = handleConfirm(event);\n\n        if (!(result instanceof Promise) || skipAsyncWait) return;\n\n        // The async confirm's outcome drives the popover.\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        setIsLoading(true);\n        result.then(() => setIsOpen(false)).finally(() => setIsLoading(false));\n      },\n      onCancel: handleCancel,\n    }),\n    [variant, isLoading, enabled, skipAsyncWait, handleConfirm, handleCancel],\n  );\n\n  return (\n    <Popover {...rest} open={open || isOpen} onOpenChange={handleOnOpenChange}>\n      <PopconfirmContextProvider value={context}>{children}</PopconfirmContextProvider>\n    </Popover>\n  );\n};\n\nPopconfirm.Confirm = PopconfirmConfirm;\nPopconfirm.Cancel = PopconfirmCancel;\nPopconfirm.Footer = PopconfirmFooter;\nPopconfirm.Content = PopconfirmContent;\nPopconfirm.Body = PopconfirmBody;\nPopconfirm.Trigger = PopconfirmTrigger;\n"],"mappings":"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"}

package/dist/{Popover-DtUDwUVO.js → Popover-DnBw5Uay.js}

@@ -6,7 +6,7 @@ import { Anchor, Close, Content, Portal, Root, Trigger } from "@radix-ui/react-p
 const variants = cva([
 	"tailwindcss-preflight",
 	"tw:group/popover-content",
-	"tw:z-[1055]",
+	"tw:z-overlay",
 	"tw:focus-visible:outline-hidden",
 	"tw:pointer-events-auto",
 	"tw:min-w-32",
@@ -73,4 +73,4 @@ Popover.Close = Close;
 //#endregion
 export { Popover };
 
-//# sourceMappingURL=Popover-DtUDwUVO.js.map
+//# sourceMappingURL=Popover-DnBw5Uay.js.map

package/dist/Popover-DnBw5Uay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover-DnBw5Uay.js","names":[],"sources":["../src/components/Popover/PopoverContent.tsx","../src/components/Popover/Popover.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-popover';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst variants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/popover-content',\n    'tw:z-overlay',\n    'tw:focus-visible:outline-hidden',\n\n    // An open Radix Dialog sets `pointer-events: none` on <body>, which this portalled panel\n    // inherits; outside-click dismiss still works (it listens on document).\n    'tw:pointer-events-auto',\n\n    // sizing\n    'tw:min-w-32',\n    'tw:max-h-[var(--radix-popover-content-available-height)]',\n    'tw:origin-(--radix-popover-content-transform-origin)',\n\n    // layout\n    'tw:flex',\n    'tw:flex-col',\n    'tw:overflow-y-auto',\n\n    // border\n    'tw:box-border',\n    'tw:border',\n    'tw:border-solid',\n    'tw:border-border',\n    'tw:rounded-popover',\n    'tw:shadow-lg',\n\n    // surface — semantic tokens, so a portalled panel follows the brand and the scheme\n    'tw:bg-popover',\n    'tw:text-popover-foreground',\n\n    // open animation\n    'tw:data-[state=open]:animate-in',\n    'tw:data-[state=open]:fade-in-0',\n    'tw:data-[state=open]:zoom-in-95',\n\n    // closed animation\n    'tw:data-[state=closed]:animate-out',\n    'tw:data-[state=closed]:fade-out-0',\n    'tw:data-[state=closed]:zoom-out-95',\n\n    // position animation\n    'tw:data-[side=bottom]:slide-in-from-top-2',\n    'tw:data-[side=left]:slide-in-from-right-2',\n    'tw:data-[side=right]:slide-in-from-left-2',\n    'tw:data-[side=top]:slide-in-from-bottom-2',\n\n    // Default size for nested Lucide icons; callers can override on the icon.\n    \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n    'tw:[&_svg]:shrink-0',\n  ],\n  {\n    defaultVariants: {\n      matchTriggerWidth: false,\n    },\n    variants: {\n      matchTriggerWidth: {\n        true: ['tw:w-[var(--radix-popover-trigger-width)]'],\n        false: [],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<typeof Content> &\n  VariantProps<typeof variants> & {\n    /**\n     * Portal target, default `document.body`; pass a theme-scoped host so the panel takes its theme.\n     */\n    container?: ComponentProps<typeof Portal>['container'];\n  };\n\nexport const PopoverContent = ({\n  ref,\n  className,\n  align = 'center',\n  sideOffset = 4,\n  matchTriggerWidth = false,\n  children,\n  onEscapeKeyDown,\n  container,\n  ...props\n}: Props) => (\n  <Portal container={container}>\n    <Content\n      ref={ref}\n      align={matchTriggerWidth ? 'start' : align}\n      sideOffset={sideOffset}\n      className={cn(variants({ className, matchTriggerWidth }))}\n      onEscapeKeyDown={(event) => {\n        // Keeps parent modals (e.g. FullScreenModal) from closing.\n        event.stopPropagation();\n        onEscapeKeyDown?.(event);\n      }}\n      {...props}\n    >\n      {children}\n    </Content>\n  </Portal>\n);\n","import type { ComponentProps } from 'react';\nimport { Anchor, Close, Root, Trigger } from '@radix-ui/react-popover';\n\nimport { PopoverContent } from './PopoverContent';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const Popover = (props: Props) => <Root {...props} />;\n\n/**\n * Main Layout\n */\nPopover.Content = PopoverContent;\nPopover.Trigger = Trigger;\n// Positions a controlled popover against an element other than its trigger.\nPopover.Anchor = Anchor;\nPopover.Close = Close;\n"],"mappings":";;;;;AAOA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CAIA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB,EACf,mBAAmB,MACrB;CACA,UAAU,EACR,mBAAmB;EACjB,MAAM,CAAC,2CAA2C;EAClD,OAAO,CAAC;CACV,EACF;AACF,CACF;AAUA,MAAa,kBAAkB,EAC7B,KACA,WACA,QAAQ,UACR,aAAa,GACb,oBAAoB,OACpB,UACA,iBACA,WACA,GAAG,YAEH,oBAAC,QAAD;CAAmB;CACjB,UAAA,oBAAC,SAAD;EACO;EACL,OAAO,oBAAoB,UAAU;EACzB;EACZ,WAAW,GAAG,SAAS;GAAE;GAAW;EAAkB,CAAC,CAAC;EACxD,kBAAkB,UAAU;GAE1B,MAAM,gBAAgB;GACtB,kBAAkB,KAAK;EACzB;EACA,GAAI;EAEH;CACM,CAAA;AACH,CAAA;;;ACpGV,MAAa,WAAW,UAAiB,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;;;;AAK3D,QAAQ,UAAU;AAClB,QAAQ,UAAU;AAElB,QAAQ,SAAS;AACjB,QAAQ,QAAQ"}

package/dist/{SectionNav-tLK3iF6c.js → SectionNav-6hcIpZLO.js}

@@ -2,8 +2,8 @@ import { cn } from "./classNames-DcGnTh2N.js";
 import { noop } from "./utils-DwC9u0tM.js";
 import { ChevronDown } from "./icons-ZIeZXXS7.js";
 import { Button } from "./Button-BNkyYU8u.js";
-import { DropdownMenu } from "./DropdownMenu-CcVbZ_5u.js";
-import { Badge } from "./Badge-5GHIsgRS.js";
+import { DropdownMenu } from "./DropdownMenu-Bum99mVf.js";
+import { Badge } from "./Badge-CqlOE5A2.js";
 import { Collapsible } from "./Collapsible-DD4xTL75.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -241,4 +241,4 @@ const SectionNav = ({ groups, activeId, renderItem, showDescriptions = false, la
 //#endregion
 export { SectionNav };
 
-//# sourceMappingURL=SectionNav-tLK3iF6c.js.map
+//# sourceMappingURL=SectionNav-6hcIpZLO.js.map

package/dist/{SectionNav-tLK3iF6c.js.map → SectionNav-6hcIpZLO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SectionNav-tLK3iF6c.js","names":[],"sources":["../src/blocks/SectionNav/SectionNavItemContent.tsx","../src/blocks/SectionNav/SectionNavGroupRow.tsx","../src/blocks/SectionNav/SectionNav.tsx"],"sourcesContent":["import { Badge } from '../../components/Badge';\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { SectionNavItem } from './types';\n\ntype Props = {\n  item: SectionNavItem;\n  active: boolean;\n  showDescription?: boolean;\n  /** Group rows only — renders the chevron. */\n  expanded?: boolean;\n  /** `false` on sub-section rows: the group's icon covers them; `icon` stays for flattened surfaces. */\n  showIcon?: boolean;\n};\n\n/** One row's body, shared by the tree and the collapsed dropdown. */\nexport const SectionNavItemContent = ({\n  item,\n  active,\n  showDescription = false,\n  expanded,\n  showIcon = true,\n}: Props) => {\n  const Icon = item.icon;\n\n  return (\n    <span className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-0.5\">\n      <span className=\"tw:flex tw:items-center tw:gap-2\">\n        {showIcon && Icon && <Icon className=\"tw:size-4 tw:shrink-0\" />}\n        <span\n          className={cn(\n            'tw:flex-1 tw:truncate tw:text-sm',\n            active ? 'tw:font-medium tw:text-selected-foreground' : 'tw:text-foreground',\n          )}\n        >\n          {item.title}\n        </span>\n        {item.isNew && (\n          <Badge\n            color=\"blue-inverse\"\n            className=\"tw:min-h-0 tw:text-[10px]\"\n            labelClassName=\"tw:px-1.5 tw:py-0\"\n          >\n            New\n          </Badge>\n        )}\n        {expanded !== undefined && (\n          <ChevronDown\n            className={cn(\n              'tw:size-4 tw:shrink-0 tw:text-muted-foreground tw:transition-transform tw:duration-200',\n              expanded && 'tw:rotate-180',\n            )}\n          />\n        )}\n      </span>\n      {/* Wraps, and breaks unbreakable tokens that would overflow the 256px column. */}\n      {showDescription && item.description && (\n        <span className=\"tw:text-xs tw:break-words tw:text-muted-foreground\">\n          {item.description}\n        </span>\n      )}\n    </span>\n  );\n};\n","import { useState } from 'react';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { Collapsible } from '../../components/Collapsible';\nimport { cn, noop } from '../../utils';\n\nimport { SectionNavItemContent } from './SectionNavItemContent';\nimport type { SectionNavGroup, SectionNavItemRenderProps } from './types';\n\ntype Props = {\n  group: SectionNavGroup;\n  activeId: string | undefined;\n  renderItem: (props: SectionNavItemRenderProps) => ReactNode;\n  showDescriptions: boolean;\n};\n\n/**\n * The ring is **inset**, not an outline. A row is exactly as wide as the nav column, and\n * `PageLayout.Content nav` makes that column a scroll container (`overflow-y-auto`, which forces\n * `overflow-x` to `auto` too) — so there is 0px of slack for anything painted outside the border\n * box, and the browser's default `outline-offset: 1px` ring gets clipped on both edges. Painting\n * inside the box cannot be clipped, at any column width, by any ancestor.\n */\nconst FOCUS_RING =\n  'tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-inset tw:focus-visible:ring-ring';\n\nconst rowClass = (active: boolean) =>\n  cn(\n    'tw:flex tw:w-full tw:cursor-pointer tw:items-center tw:gap-2 tw:rounded-md tw:border-none tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:no-underline tw:transition-colors',\n    FOCUS_RING,\n    active\n      ? 'tw:bg-selected tw:font-medium tw:text-selected-foreground'\n      : 'tw:bg-transparent tw:text-foreground tw:hover:bg-[var(--hover,rgb(var(--muted)))]',\n  );\n\nconst childRowClass = (active: boolean) =>\n  cn(\n    'tw:flex tw:w-full tw:cursor-pointer tw:rounded-md tw:border-none tw:px-3 tw:py-1.5 tw:text-left tw:no-underline tw:transition-colors',\n    FOCUS_RING,\n    active ? 'tw:bg-selected' : 'tw:bg-transparent tw:hover:bg-[var(--hover,rgb(var(--muted)))]',\n  );\n\n/**\n * One group row and its sub-sections. The row is a single control: it opens the group **and** goes to\n * its first section, and only collapses once you are already there — so the chevron never becomes a\n * separate thing to aim at, and one click always makes progress.\n */\nexport const SectionNavGroupRow = ({ group, activeId, renderItem, showDescriptions }: Props) => {\n  // Open on arrival: the nav is short enough that hiding any of it costs more than it saves.\n  const [open, setOpen] = useState(true);\n\n  const hasChildren = group.children.length > 0;\n  const targetId = group.children[0]?.id ?? group.id;\n  const isCurrent = group.id === activeId;\n  const holdsCurrent = isCurrent || group.children.some((child) => child.id === activeId);\n\n  const onClick = (event: MouseEvent<HTMLElement>) => {\n    if (!hasChildren) return;\n\n    // Already on the row's target, so navigating would be a no-op and the only thing left for the\n    // click to do is toggle. `preventDefault` is what tells the caller's link not to navigate.\n    if (activeId === targetId) {\n      event.preventDefault();\n      setOpen((isOpen) => !isOpen);\n\n      return;\n    }\n\n    setOpen(true);\n  };\n\n  return (\n    <Collapsible open={open} onOpenChange={setOpen} className=\"tw:flex tw:flex-col tw:gap-0.5\">\n      {renderItem({\n        targetId,\n        isActive: isCurrent,\n        children: (\n          <SectionNavItemContent\n            item={group}\n            active={holdsCurrent}\n            expanded={hasChildren ? open : undefined}\n          />\n        ),\n        itemProps: {\n          className: rowClass(holdsCurrent),\n          'aria-current': isCurrent ? 'page' : undefined,\n          'aria-expanded': hasChildren ? open : undefined,\n          'data-active': holdsCurrent && !isCurrent ? true : undefined,\n          onClick,\n        },\n      })}\n\n      {hasChildren && (\n        <Collapsible.Content>\n          {/* `pl-1` keeps each row's background box off the group's rule — without it an active\n              row's `bg-selected` sits flush against the line. 4px is also what lines the child titles\n              (20 + 1 + 4 + 12 = 37px) up with the parent's, which its icon puts at 12 + 16 + 8 = 36px. */}\n          {/* `my-0 mr-0` and not `m-0`: a host app emits its own `.tw\\:m-0` from its own source, and\n              its stylesheet is the later one — shorthand and longhand at equal specificity means the\n              app's `m-0` would land after this `ml-5` and flatten the indent. Longhands only, so\n              nothing here can be overridden by a copy of a class this block also uses. */}\n          <ul className=\"tw:my-0 tw:mr-0 tw:ml-5 tw:flex tw:list-none tw:flex-col tw:gap-0.5 tw:border-l tw:border-border tw:py-0.5 tw:pl-1\">\n            {group.children.map((child) => {\n              const active = child.id === activeId;\n\n              return (\n                <li key={child.id}>\n                  {renderItem({\n                    targetId: child.id,\n                    isActive: active,\n                    children: (\n                      <SectionNavItemContent\n                        item={child}\n                        active={active}\n                        showDescription={showDescriptions}\n                        showIcon={false}\n                      />\n                    ),\n                    itemProps: {\n                      className: childRowClass(active),\n                      'aria-current': active ? 'page' : undefined,\n                      'aria-expanded': undefined,\n                      'data-active': undefined,\n                      onClick: noop,\n                    },\n                  })}\n                </li>\n              );\n            })}\n            {group.note && (\n              <li className=\"tw:py-1 tw:pl-3 tw:text-xs tw:text-muted-foreground\">{group.note}</li>\n            )}\n          </ul>\n        </Collapsible.Content>\n      )}\n    </Collapsible>\n  );\n};\n","import type { ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { DropdownMenu } from '../../components/DropdownMenu';\nimport { ChevronDown } from '../../icons';\nimport { cn, noop } from '../../utils';\n\nimport { SectionNavGroupRow } from './SectionNavGroupRow';\nimport { SectionNavItemContent } from './SectionNavItemContent';\nimport type { SectionNavGroup, SectionNavItemRenderProps } from './types';\n\ntype Props = {\n  /** Already filtered: visibility, permissions and flags stay in the app; rendered as given. */\n  groups: SectionNavGroup[];\n  /** `id` of the current section: a child's, or a childless group's. */\n  activeId?: string;\n  /** Return a router link / `<a>` to `targetId` with `itemProps` spread on it. */\n  renderItem: (props: SectionNavItemRenderProps) => ReactNode;\n  /** Show each section's `description` under its title. */\n  showDescriptions?: boolean;\n  /** Accessible name for the tree's `<nav>`, and the collapsed label with nothing active. */\n  label?: string;\n  /** Applied to the tree's `<nav>`; the column geometry belongs to `PageLayout.Content nav`. */\n  className?: string;\n};\n\n/**\n * One page's grouped section nav: a tree when wide, a dropdown when narrow, both rendered via `renderItem`.\n *\n * - Not `Sidebar` (the app-level rail); this lives in `PageLayout.Content` and owns no global state.\n * - The switch is a container query; standalone, put `tw:@container/section-nav` on an ancestor.\n *\n * @see RECIPES.md#section-nav\n */\nexport const SectionNav = ({\n  groups,\n  activeId,\n  renderItem,\n  showDescriptions = false,\n  label = 'Sections',\n  className,\n}: Props) => {\n  // The collapsed trigger names a sub-section with its group: \"Developer settings / CLI agents\".\n  const activeChild = groups\n    .flatMap((group) => group.children.map((child) => ({ group, child })))\n    .find(({ child }) => child.id === activeId);\n  const activeGroup = groups.find((group) => group.id === activeId);\n  const current = activeChild\n    ? {\n        icon: activeChild.group.icon,\n        title: activeChild.child.title,\n        parent: activeChild.group.title,\n      }\n    : { icon: activeGroup?.icon, title: activeGroup?.title ?? label, parent: undefined };\n  const CurrentIcon = current.icon;\n  // Tinted like the tree's row, but not `aria-current`.\n  const holdsActive = (group: SectionNavGroup) =>\n    group.id === activeId || group.children.some((child) => child.id === activeId);\n\n  return (\n    <>\n      {/* - `tailwindcss-preflight` covers the caller's `<a>` rows; without it they're `content-box`\n            and overflow the column.\n          - `display` comes only from the two container variants: a plain `tw:flex` / `tw:hidden`\n            would lose to the host app's identical, later rule. */}\n      <nav\n        aria-label={label}\n        className={cn(\n          'tailwindcss-preflight',\n          'tw:w-full tw:flex-col tw:gap-0.5 tw:@[640px]/section-nav:flex tw:@max-[640px]/section-nav:hidden',\n          className,\n        )}\n      >\n        {groups.map((group) => (\n          <SectionNavGroupRow\n            key={group.id}\n            group={group}\n            activeId={activeId}\n            renderItem={renderItem}\n            showDescriptions={showDescriptions}\n          />\n        ))}\n      </nav>\n\n      <div className=\"tw:w-full tw:bg-background tw:@[640px]/section-nav:hidden tw:@max-[640px]/section-nav:block\">\n        <DropdownMenu>\n          <DropdownMenu.Trigger asChild>\n            <Button variant=\"outline\" className=\"tw:w-full tw:justify-between\">\n              <span className=\"tw:flex tw:min-w-0 tw:items-center tw:gap-2\">\n                {CurrentIcon && <CurrentIcon className=\"tw:size-4 tw:shrink-0\" />}\n                {current.parent && (\n                  <>\n                    <span className=\"tw:truncate tw:font-normal tw:text-muted-foreground\">\n                      {current.parent}\n                    </span>\n                    <span className=\"tw:text-border\">/</span>\n                  </>\n                )}\n                <span className=\"tw:truncate tw:font-medium tw:text-foreground\">\n                  {current.title}\n                </span>\n              </span>\n              <ChevronDown className=\"tw:size-4 tw:shrink-0\" />\n            </Button>\n          </DropdownMenu.Trigger>\n\n          <DropdownMenu.Content\n            align=\"start\"\n            className=\"tw:w-(--radix-dropdown-menu-trigger-width)\"\n          >\n            {groups.map((group) =>\n              group.children.length > 0 ? (\n                <DropdownMenu.Group key={group.id}>\n                  {/* A clickable item, not a label: in the tree it navigates to the first section. */}\n                  <DropdownMenu.Item asChild>\n                    {renderItem({\n                      targetId: group.children[0]?.id ?? group.id,\n                      isActive: false,\n                      children: <SectionNavItemContent item={group} active={holdsActive(group)} />,\n                      itemProps: {\n                        className: 'tw:no-underline',\n                        'aria-current': undefined,\n                        'aria-expanded': undefined,\n                        'data-active': holdsActive(group) ? true : undefined,\n                        onClick: noop,\n                      },\n                    })}\n                  </DropdownMenu.Item>\n                  <div className=\"tw:ml-5 tw:border-l tw:border-border tw:py-0.5 tw:pl-1\">\n                    {group.children.map((child) => (\n                      <DropdownMenu.Item key={child.id} asChild>\n                        {renderItem({\n                          targetId: child.id,\n                          isActive: child.id === activeId,\n                          children: (\n                            <SectionNavItemContent\n                              item={child}\n                              active={child.id === activeId}\n                              showDescription={showDescriptions}\n                              showIcon={false}\n                            />\n                          ),\n                          itemProps: {\n                            className: 'tw:no-underline',\n                            'aria-current': child.id === activeId ? 'page' : undefined,\n                            'aria-expanded': undefined,\n                            'data-active': undefined,\n                            onClick: noop,\n                          },\n                        })}\n                      </DropdownMenu.Item>\n                    ))}\n                  </div>\n                </DropdownMenu.Group>\n              ) : (\n                <DropdownMenu.Item key={group.id} asChild>\n                  {renderItem({\n                    targetId: group.id,\n                    isActive: group.id === activeId,\n                    children: <SectionNavItemContent item={group} active={group.id === activeId} />,\n                    itemProps: {\n                      className: 'tw:no-underline',\n                      'aria-current': group.id === activeId ? 'page' : undefined,\n                      'aria-expanded': undefined,\n                      'data-active': undefined,\n                      onClick: noop,\n                    },\n                  })}\n                </DropdownMenu.Item>\n              ),\n            )}\n          </DropdownMenu.Content>\n        </DropdownMenu>\n      </div>\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SectionNav-6hcIpZLO.js","names":[],"sources":["../src/blocks/SectionNav/SectionNavItemContent.tsx","../src/blocks/SectionNav/SectionNavGroupRow.tsx","../src/blocks/SectionNav/SectionNav.tsx"],"sourcesContent":["import { Badge } from '../../components/Badge';\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { SectionNavItem } from './types';\n\ntype Props = {\n  item: SectionNavItem;\n  active: boolean;\n  showDescription?: boolean;\n  /** Group rows only — renders the chevron. */\n  expanded?: boolean;\n  /** `false` on sub-section rows: the group's icon covers them; `icon` stays for flattened surfaces. */\n  showIcon?: boolean;\n};\n\n/** One row's body, shared by the tree and the collapsed dropdown. */\nexport const SectionNavItemContent = ({\n  item,\n  active,\n  showDescription = false,\n  expanded,\n  showIcon = true,\n}: Props) => {\n  const Icon = item.icon;\n\n  return (\n    <span className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-0.5\">\n      <span className=\"tw:flex tw:items-center tw:gap-2\">\n        {showIcon && Icon && <Icon className=\"tw:size-4 tw:shrink-0\" />}\n        <span\n          className={cn(\n            'tw:flex-1 tw:truncate tw:text-sm',\n            active ? 'tw:font-medium tw:text-selected-foreground' : 'tw:text-foreground',\n          )}\n        >\n          {item.title}\n        </span>\n        {item.isNew && (\n          <Badge\n            color=\"blue-inverse\"\n            className=\"tw:min-h-0 tw:text-[10px]\"\n            labelClassName=\"tw:px-1.5 tw:py-0\"\n          >\n            New\n          </Badge>\n        )}\n        {expanded !== undefined && (\n          <ChevronDown\n            className={cn(\n              'tw:size-4 tw:shrink-0 tw:text-muted-foreground tw:transition-transform tw:duration-200',\n              expanded && 'tw:rotate-180',\n            )}\n          />\n        )}\n      </span>\n      {/* Wraps, and breaks unbreakable tokens that would overflow the 256px column. */}\n      {showDescription && item.description && (\n        <span className=\"tw:text-xs tw:break-words tw:text-muted-foreground\">\n          {item.description}\n        </span>\n      )}\n    </span>\n  );\n};\n","import { useState } from 'react';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { Collapsible } from '../../components/Collapsible';\nimport { cn, noop } from '../../utils';\n\nimport { SectionNavItemContent } from './SectionNavItemContent';\nimport type { SectionNavGroup, SectionNavItemRenderProps } from './types';\n\ntype Props = {\n  group: SectionNavGroup;\n  activeId: string | undefined;\n  renderItem: (props: SectionNavItemRenderProps) => ReactNode;\n  showDescriptions: boolean;\n};\n\n/**\n * The ring is **inset**, not an outline. A row is exactly as wide as the nav column, and\n * `PageLayout.Content nav` makes that column a scroll container (`overflow-y-auto`, which forces\n * `overflow-x` to `auto` too) — so there is 0px of slack for anything painted outside the border\n * box, and the browser's default `outline-offset: 1px` ring gets clipped on both edges. Painting\n * inside the box cannot be clipped, at any column width, by any ancestor.\n */\nconst FOCUS_RING =\n  'tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-inset tw:focus-visible:ring-ring';\n\nconst rowClass = (active: boolean) =>\n  cn(\n    'tw:flex tw:w-full tw:cursor-pointer tw:items-center tw:gap-2 tw:rounded-md tw:border-none tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:no-underline tw:transition-colors',\n    FOCUS_RING,\n    active\n      ? 'tw:bg-selected tw:font-medium tw:text-selected-foreground'\n      : 'tw:bg-transparent tw:text-foreground tw:hover:bg-[var(--hover,rgb(var(--muted)))]',\n  );\n\nconst childRowClass = (active: boolean) =>\n  cn(\n    'tw:flex tw:w-full tw:cursor-pointer tw:rounded-md tw:border-none tw:px-3 tw:py-1.5 tw:text-left tw:no-underline tw:transition-colors',\n    FOCUS_RING,\n    active ? 'tw:bg-selected' : 'tw:bg-transparent tw:hover:bg-[var(--hover,rgb(var(--muted)))]',\n  );\n\n/**\n * One group row and its sub-sections. The row is a single control: it opens the group **and** goes to\n * its first section, and only collapses once you are already there — so the chevron never becomes a\n * separate thing to aim at, and one click always makes progress.\n */\nexport const SectionNavGroupRow = ({ group, activeId, renderItem, showDescriptions }: Props) => {\n  // Open on arrival: the nav is short enough that hiding any of it costs more than it saves.\n  const [open, setOpen] = useState(true);\n\n  const hasChildren = group.children.length > 0;\n  const targetId = group.children[0]?.id ?? group.id;\n  const isCurrent = group.id === activeId;\n  const holdsCurrent = isCurrent || group.children.some((child) => child.id === activeId);\n\n  const onClick = (event: MouseEvent<HTMLElement>) => {\n    if (!hasChildren) return;\n\n    // Already on the row's target, so navigating would be a no-op and the only thing left for the\n    // click to do is toggle. `preventDefault` is what tells the caller's link not to navigate.\n    if (activeId === targetId) {\n      event.preventDefault();\n      setOpen((isOpen) => !isOpen);\n\n      return;\n    }\n\n    setOpen(true);\n  };\n\n  return (\n    <Collapsible open={open} onOpenChange={setOpen} className=\"tw:flex tw:flex-col tw:gap-0.5\">\n      {renderItem({\n        targetId,\n        isActive: isCurrent,\n        children: (\n          <SectionNavItemContent\n            item={group}\n            active={holdsCurrent}\n            expanded={hasChildren ? open : undefined}\n          />\n        ),\n        itemProps: {\n          className: rowClass(holdsCurrent),\n          'aria-current': isCurrent ? 'page' : undefined,\n          'aria-expanded': hasChildren ? open : undefined,\n          'data-active': holdsCurrent && !isCurrent ? true : undefined,\n          onClick,\n        },\n      })}\n\n      {hasChildren && (\n        <Collapsible.Content>\n          {/* `pl-1` keeps each row's background box off the group's rule — without it an active\n              row's `bg-selected` sits flush against the line. 4px is also what lines the child titles\n              (20 + 1 + 4 + 12 = 37px) up with the parent's, which its icon puts at 12 + 16 + 8 = 36px. */}\n          {/* `my-0 mr-0` and not `m-0`: a host app emits its own `.tw\\:m-0` from its own source, and\n              its stylesheet is the later one — shorthand and longhand at equal specificity means the\n              app's `m-0` would land after this `ml-5` and flatten the indent. Longhands only, so\n              nothing here can be overridden by a copy of a class this block also uses. */}\n          <ul className=\"tw:my-0 tw:mr-0 tw:ml-5 tw:flex tw:list-none tw:flex-col tw:gap-0.5 tw:border-l tw:border-border tw:py-0.5 tw:pl-1\">\n            {group.children.map((child) => {\n              const active = child.id === activeId;\n\n              return (\n                <li key={child.id}>\n                  {renderItem({\n                    targetId: child.id,\n                    isActive: active,\n                    children: (\n                      <SectionNavItemContent\n                        item={child}\n                        active={active}\n                        showDescription={showDescriptions}\n                        showIcon={false}\n                      />\n                    ),\n                    itemProps: {\n                      className: childRowClass(active),\n                      'aria-current': active ? 'page' : undefined,\n                      'aria-expanded': undefined,\n                      'data-active': undefined,\n                      onClick: noop,\n                    },\n                  })}\n                </li>\n              );\n            })}\n            {group.note && (\n              <li className=\"tw:py-1 tw:pl-3 tw:text-xs tw:text-muted-foreground\">{group.note}</li>\n            )}\n          </ul>\n        </Collapsible.Content>\n      )}\n    </Collapsible>\n  );\n};\n","import type { ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { DropdownMenu } from '../../components/DropdownMenu';\nimport { ChevronDown } from '../../icons';\nimport { cn, noop } from '../../utils';\n\nimport { SectionNavGroupRow } from './SectionNavGroupRow';\nimport { SectionNavItemContent } from './SectionNavItemContent';\nimport type { SectionNavGroup, SectionNavItemRenderProps } from './types';\n\ntype Props = {\n  /** Already filtered: visibility, permissions and flags stay in the app; rendered as given. */\n  groups: SectionNavGroup[];\n  /** `id` of the current section: a child's, or a childless group's. */\n  activeId?: string;\n  /** Return a router link / `<a>` to `targetId` with `itemProps` spread on it. */\n  renderItem: (props: SectionNavItemRenderProps) => ReactNode;\n  /** Show each section's `description` under its title. */\n  showDescriptions?: boolean;\n  /** Accessible name for the tree's `<nav>`, and the collapsed label with nothing active. */\n  label?: string;\n  /** Applied to the tree's `<nav>`; the column geometry belongs to `PageLayout.Content nav`. */\n  className?: string;\n};\n\n/**\n * One page's grouped section nav: a tree when wide, a dropdown when narrow, both rendered via `renderItem`.\n *\n * - Not `Sidebar` (the app-level rail); this lives in `PageLayout.Content` and owns no global state.\n * - The switch is a container query; standalone, put `tw:@container/section-nav` on an ancestor.\n *\n * @see RECIPES.md#section-nav\n */\nexport const SectionNav = ({\n  groups,\n  activeId,\n  renderItem,\n  showDescriptions = false,\n  label = 'Sections',\n  className,\n}: Props) => {\n  // The collapsed trigger names a sub-section with its group: \"Developer settings / CLI agents\".\n  const activeChild = groups\n    .flatMap((group) => group.children.map((child) => ({ group, child })))\n    .find(({ child }) => child.id === activeId);\n  const activeGroup = groups.find((group) => group.id === activeId);\n  const current = activeChild\n    ? {\n        icon: activeChild.group.icon,\n        title: activeChild.child.title,\n        parent: activeChild.group.title,\n      }\n    : { icon: activeGroup?.icon, title: activeGroup?.title ?? label, parent: undefined };\n  const CurrentIcon = current.icon;\n  // Tinted like the tree's row, but not `aria-current`.\n  const holdsActive = (group: SectionNavGroup) =>\n    group.id === activeId || group.children.some((child) => child.id === activeId);\n\n  return (\n    <>\n      {/* - `tailwindcss-preflight` covers the caller's `<a>` rows; without it they're `content-box`\n            and overflow the column.\n          - `display` comes only from the two container variants: a plain `tw:flex` / `tw:hidden`\n            would lose to the host app's identical, later rule. */}\n      <nav\n        aria-label={label}\n        className={cn(\n          'tailwindcss-preflight',\n          'tw:w-full tw:flex-col tw:gap-0.5 tw:@[640px]/section-nav:flex tw:@max-[640px]/section-nav:hidden',\n          className,\n        )}\n      >\n        {groups.map((group) => (\n          <SectionNavGroupRow\n            key={group.id}\n            group={group}\n            activeId={activeId}\n            renderItem={renderItem}\n            showDescriptions={showDescriptions}\n          />\n        ))}\n      </nav>\n\n      <div className=\"tw:w-full tw:bg-background tw:@[640px]/section-nav:hidden tw:@max-[640px]/section-nav:block\">\n        <DropdownMenu>\n          <DropdownMenu.Trigger asChild>\n            <Button variant=\"outline\" className=\"tw:w-full tw:justify-between\">\n              <span className=\"tw:flex tw:min-w-0 tw:items-center tw:gap-2\">\n                {CurrentIcon && <CurrentIcon className=\"tw:size-4 tw:shrink-0\" />}\n                {current.parent && (\n                  <>\n                    <span className=\"tw:truncate tw:font-normal tw:text-muted-foreground\">\n                      {current.parent}\n                    </span>\n                    <span className=\"tw:text-border\">/</span>\n                  </>\n                )}\n                <span className=\"tw:truncate tw:font-medium tw:text-foreground\">\n                  {current.title}\n                </span>\n              </span>\n              <ChevronDown className=\"tw:size-4 tw:shrink-0\" />\n            </Button>\n          </DropdownMenu.Trigger>\n\n          <DropdownMenu.Content\n            align=\"start\"\n            className=\"tw:w-(--radix-dropdown-menu-trigger-width)\"\n          >\n            {groups.map((group) =>\n              group.children.length > 0 ? (\n                <DropdownMenu.Group key={group.id}>\n                  {/* A clickable item, not a label: in the tree it navigates to the first section. */}\n                  <DropdownMenu.Item asChild>\n                    {renderItem({\n                      targetId: group.children[0]?.id ?? group.id,\n                      isActive: false,\n                      children: <SectionNavItemContent item={group} active={holdsActive(group)} />,\n                      itemProps: {\n                        className: 'tw:no-underline',\n                        'aria-current': undefined,\n                        'aria-expanded': undefined,\n                        'data-active': holdsActive(group) ? true : undefined,\n                        onClick: noop,\n                      },\n                    })}\n                  </DropdownMenu.Item>\n                  <div className=\"tw:ml-5 tw:border-l tw:border-border tw:py-0.5 tw:pl-1\">\n                    {group.children.map((child) => (\n                      <DropdownMenu.Item key={child.id} asChild>\n                        {renderItem({\n                          targetId: child.id,\n                          isActive: child.id === activeId,\n                          children: (\n                            <SectionNavItemContent\n                              item={child}\n                              active={child.id === activeId}\n                              showDescription={showDescriptions}\n                              showIcon={false}\n                            />\n                          ),\n                          itemProps: {\n                            className: 'tw:no-underline',\n                            'aria-current': child.id === activeId ? 'page' : undefined,\n                            'aria-expanded': undefined,\n                            'data-active': undefined,\n                            onClick: noop,\n                          },\n                        })}\n                      </DropdownMenu.Item>\n                    ))}\n                  </div>\n                </DropdownMenu.Group>\n              ) : (\n                <DropdownMenu.Item key={group.id} asChild>\n                  {renderItem({\n                    targetId: group.id,\n                    isActive: group.id === activeId,\n                    children: <SectionNavItemContent item={group} active={group.id === activeId} />,\n                    itemProps: {\n                      className: 'tw:no-underline',\n                      'aria-current': group.id === activeId ? 'page' : undefined,\n                      'aria-expanded': undefined,\n                      'data-active': undefined,\n                      onClick: noop,\n                    },\n                  })}\n                </DropdownMenu.Item>\n              ),\n            )}\n          </DropdownMenu.Content>\n        </DropdownMenu>\n      </div>\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/{Select-B22hB_-w.js → Select-C6zKeip5.js}

@@ -22,7 +22,7 @@ const SelectContent = ({ ref, className, children, container, position = "popper
 			ref,
 			position,
 			sideOffset,
-			className: cn("tailwindcss-preflight", "tw:z-[1055]", "tw:flex tw:flex-col", "tw:p-1", "tw:overflow-hidden", "tw:origin-(--radix-select-content-transform-origin)", "tw:max-h-[var(--radix-select-content-available-height)]", "tw:min-w-[var(--radix-select-trigger-width)]", "tw:bg-popover", "tw:text-popover-foreground", "tw:shadow-md", "tw:ring-1", "tw:ring-foreground/10", "tw:rounded-lg", "tw:data-[state=open]:animate-in", "tw:data-[state=open]:fade-in-0", "tw:data-[state=open]:zoom-in-95", "tw:data-[state=closed]:animate-out", "tw:data-[state=closed]:fade-out-0", "tw:data-[state=closed]:zoom-out-95", "tw:data-[side=bottom]:slide-in-from-top-2", "tw:data-[side=left]:slide-in-from-right-2", "tw:data-[side=right]:slide-in-from-left-2", "tw:data-[side=top]:slide-in-from-bottom-2", className),
+			className: cn("tailwindcss-preflight", "tw:z-overlay", "tw:flex tw:flex-col", "tw:p-1", "tw:overflow-hidden", "tw:origin-(--radix-select-content-transform-origin)", "tw:max-h-[var(--radix-select-content-available-height)]", "tw:min-w-[var(--radix-select-trigger-width)]", "tw:bg-popover", "tw:text-popover-foreground", "tw:shadow-md", "tw:ring-1", "tw:ring-foreground/10", "tw:rounded-lg", "tw:data-[state=open]:animate-in", "tw:data-[state=open]:fade-in-0", "tw:data-[state=open]:zoom-in-95", "tw:data-[state=closed]:animate-out", "tw:data-[state=closed]:fade-out-0", "tw:data-[state=closed]:zoom-out-95", "tw:data-[side=bottom]:slide-in-from-top-2", "tw:data-[side=left]:slide-in-from-right-2", "tw:data-[side=right]:slide-in-from-left-2", "tw:data-[side=top]:slide-in-from-bottom-2", className),
 			children: [
 				/* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
 					className: scrollButtonStyles,
@@ -172,4 +172,4 @@ Select.Separator = SelectSeparator;
 //#endregion
 export { Select };
 
-//# sourceMappingURL=Select-B22hB_-w.js.map
+//# sourceMappingURL=Select-C6zKeip5.js.map

package/dist/Select-C6zKeip5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-C6zKeip5.js","names":["SelectItemComponent"],"sources":["../src/components/Select/SelectContent.tsx","../src/components/Select/SelectGroup.tsx","../src/components/Select/SelectItem.tsx","../src/components/Select/SelectLabel.tsx","../src/components/Select/SelectRoot.tsx","../src/components/Select/SelectSeparator.tsx","../src/components/Select/SelectTrigger.tsx","../src/components/Select/Select.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { ChevronDown, ChevronUp } from '../../icons';\nimport { cn } from '../../utils';\n\nconst scrollButtonStyles = cn(\n  'tw:flex',\n  'tw:items-center',\n  'tw:justify-center',\n  'tw:rounded-sm',\n  'tw:p-1',\n  'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n);\n\n/**\n * Props for `Select.Content`. `container` portals the listbox into a custom element (useful inside modals).\n */\ntype Props = ComponentProps<typeof SelectPrimitive.Content> & {\n  container?: HTMLElement | null;\n};\n\n/**\n * Listbox container for `Select`. Portals items into a popover sized to the trigger.\n * Normally rendered implicitly by `Select`; use directly only when composing custom item layouts via\n * the `Select.Root` / `Select.Trigger` / `Select.Content` compound parts.\n */\nexport const SelectContent = ({\n  ref,\n  className,\n  children,\n  container,\n  position = 'popper',\n  sideOffset = 4,\n  ...props\n}: Props) => {\n  return (\n    <SelectPrimitive.Portal container={container}>\n      <SelectPrimitive.Content\n        {...props}\n        ref={ref}\n        position={position}\n        sideOffset={sideOffset}\n        className={cn(\n          'tailwindcss-preflight',\n          'tw:z-overlay',\n\n          // layout\n          'tw:flex tw:flex-col',\n          'tw:p-1',\n          'tw:overflow-hidden',\n          'tw:origin-(--radix-select-content-transform-origin)',\n\n          // sizing\n          'tw:max-h-[var(--radix-select-content-available-height)]',\n          'tw:min-w-[var(--radix-select-trigger-width)]',\n\n          // appearance\n          'tw:bg-popover',\n          'tw:text-popover-foreground',\n          'tw:shadow-md',\n          'tw:ring-1',\n          'tw:ring-foreground/10',\n          'tw:rounded-lg',\n\n          // open animation\n          'tw:data-[state=open]:animate-in',\n          'tw:data-[state=open]:fade-in-0',\n          'tw:data-[state=open]:zoom-in-95',\n\n          // closed animation\n          'tw:data-[state=closed]:animate-out',\n          'tw:data-[state=closed]:fade-out-0',\n          'tw:data-[state=closed]:zoom-out-95',\n\n          // position animations\n          'tw:data-[side=bottom]:slide-in-from-top-2',\n          'tw:data-[side=left]:slide-in-from-right-2',\n          'tw:data-[side=right]:slide-in-from-left-2',\n          'tw:data-[side=top]:slide-in-from-bottom-2',\n          className,\n        )}\n      >\n        <SelectPrimitive.ScrollUpButton className={scrollButtonStyles}>\n          <ChevronUp />\n        </SelectPrimitive.ScrollUpButton>\n\n        <SelectPrimitive.Viewport\n          className={cn({\n            'tw:h-[var(--radix-select-trigger-height)] tw:w-full tw:min-w-[var(--radix-select-trigger-width)]':\n              position === 'popper',\n          })}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n\n        <SelectPrimitive.ScrollDownButton className={scrollButtonStyles}>\n          <ChevronDown />\n        </SelectPrimitive.ScrollDownButton>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Group>;\n\nexport const SelectGroup = ({ className, ...props }: Props) => (\n  <SelectPrimitive.Group {...props} className={cn('tw:flex tw:flex-col tw:gap-0.5', className)} />\n);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { Check } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Item> & {\n  icon?: ReactNode;\n  hint?: ReactNode;\n};\n\nexport const SelectItem = ({\n  ref,\n  className,\n  children,\n  icon,\n  hint,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: Props) => {\n  const hintId = useId();\n\n  return (\n    <SelectPrimitive.Item\n      {...props}\n      ref={ref}\n      // Radix names the option from `ItemText` alone (`aria-labelledby`), so the hint is\n      // described rather than named — it reaches a screen reader without joining the label.\n      aria-describedby={\n        [ariaDescribedBy, hint ? hintId : null].filter(Boolean).join(' ') || undefined\n      }\n      className={cn(\n        'tw:group/select-item',\n\n        // layout\n        'tw:relative',\n        'tw:flex',\n        'tw:flex-1',\n        'tw:items-center',\n        'tw:gap-2',\n\n        // spacing\n        'tw:py-2',\n        'tw:px-2',\n        'tw:rounded-lg',\n\n        // typography\n        'tw:text-sm',\n        'tw:select-none',\n        'tw:cursor-default',\n        'tw:outline-hidden',\n\n        // highlighted (keyboard / hover)\n        'tw:focus:outline-hidden',\n        'tw:data-[highlighted]:bg-hover',\n        'tw:data-[highlighted]:text-hover-foreground',\n\n        // disabled\n        'tw:data-[disabled]:pointer-events-none',\n        'tw:data-[disabled]:opacity-disabled',\n\n        // child svg defaults\n        'tw:[&_svg]:pointer-events-none',\n        'tw:[&_svg]:shrink-0',\n        'tw:[&_svg]:text-muted-foreground',\n        \"tw:[&_svg:not([class*='tw:size-'])]:size-4\",\n        className,\n      )}\n    >\n      {icon}\n      <span className=\"tw:flex-1 tw:truncate\">\n        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n      </span>\n      {/* Outside `ItemText`, so the trigger shows the label alone once the option is picked. */}\n      {hint && (\n        <span id={hintId} className=\"tw:shrink-0 tw:text-xs tw:text-muted-foreground\">\n          {hint}\n        </span>\n      )}\n      <SelectPrimitive.ItemIndicator className=\"tw:pointer-events-none\">\n        <Check className=\"tw:size-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Label>;\n\nexport const SelectLabel = ({ className, ...props }: Props) => (\n  <SelectPrimitive.Label\n    {...props}\n    className={cn(\n      // Soft grey section label.\n      'tw:px-2',\n      'tw:py-1.5',\n      'tw:text-xs',\n      'tw:font-medium',\n      'tw:leading-none',\n      'tw:text-muted-foreground',\n\n      className,\n    )}\n  />\n);\n","import type { ReactNode } from 'react';\nimport { Root } from '@radix-ui/react-select';\n\n// Mirror Radix's `SelectProps` as an explicit list. We can't infer via\n// `ComponentProps<typeof Root>` or reuse Radix's `SelectProps` directly: both\n// transitively reference the un-exported `SelectSharedProps` interface, and\n// TS4023 fires when DTS emits anything that consumes it (e.g. `useAppForm`).\n// Keep this in sync with `@radix-ui/react-select`'s `SelectProps` shape.\nexport type SelectRootProps = {\n  // SelectSharedProps\n  children?: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?(open: boolean): void;\n  dir?: 'ltr' | 'rtl';\n  name?: string;\n  autoComplete?: string;\n  disabled?: boolean;\n  required?: boolean;\n  form?: string;\n  // SelectProps\n  value?: string;\n  defaultValue?: string;\n  onValueChange?(value: string): void;\n};\n\nexport const SelectRoot = (props: SelectRootProps) => <Root {...props} />;\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Separator>;\n\nexport const SelectSeparator = ({ className, ...props }: Props) => (\n  <SelectPrimitive.Separator\n    {...props}\n    className={cn('tw:mx-2 tw:my-1 tw:h-px tw:bg-border', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\nimport type { WithAccessibleName } from '../../utils/accessibleName';\nimport { Button } from '../Button';\nimport { overlayTriggerVariants } from '../OverlayTrigger/styles';\n\ntype BaseProps = ComponentProps<typeof SelectPrimitive.Trigger> &\n  VariantProps<typeof overlayTriggerVariants> & {\n    /** Text-like trigger with no field chrome, for a select inside a sentence or toolbar; ignores `state`. */\n    inline?: boolean;\n  } & Pick<ComponentProps<typeof SelectPrimitive.Value>, 'placeholder'>;\n\n/** `role=\"combobox\"` is not named from content: neither the item label nor `placeholder` names it. */\ntype SelectTriggerProps = WithAccessibleName<BaseProps>;\n\nexport const SelectTrigger = ({\n  ref,\n  className,\n  inline,\n  state,\n  placeholder,\n  ...props\n}: SelectTriggerProps) => {\n  if (inline)\n    return (\n      <SelectPrimitive.Trigger {...props} ref={ref} className={cn(className)} asChild>\n        <Button variant=\"inline\">\n          <SelectPrimitive.Value placeholder={placeholder} />\n          <SelectPrimitive.Icon asChild>\n            <ChevronDown />\n          </SelectPrimitive.Icon>\n        </Button>\n      </SelectPrimitive.Trigger>\n    );\n\n  return (\n    <SelectPrimitive.Trigger\n      {...props}\n      ref={ref}\n      className={cn(overlayTriggerVariants({ state }), className)}\n    >\n      <SelectPrimitive.Value placeholder={placeholder} />\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"tw:size-4 tw:text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { forwardAccessibleName, type WithAccessibleName } from '../../utils/accessibleName';\n\nimport { SelectContent } from './SelectContent';\nimport { SelectGroup } from './SelectGroup';\nimport { SelectItem as SelectItemComponent } from './SelectItem';\nimport { SelectLabel } from './SelectLabel';\nimport { SelectRoot, type SelectRootProps } from './SelectRoot';\nimport { SelectSeparator } from './SelectSeparator';\nimport { SelectTrigger } from './SelectTrigger';\n\nexport type SelectItem = {\n  value: string;\n  label: ReactNode;\n  icon?: ReactNode;\n  /** Trailing muted note shown in the listbox only — never in the trigger. */\n  hint?: ReactNode;\n  disabled?: boolean;\n};\n\nexport type SelectItemGroup = {\n  label?: ReactNode;\n  items: readonly SelectItem[];\n};\n\nconst isGroup = (itemOrGroup: SelectItem | SelectItemGroup): itemOrGroup is SelectItemGroup =>\n  'items' in itemOrGroup;\n\ntype TriggerProps = ComponentProps<typeof SelectTrigger>;\n\ntype BaseProps = Pick<\n  SelectRootProps,\n  | 'value'\n  | 'defaultValue'\n  | 'onValueChange'\n  | 'disabled'\n  | 'name'\n  | 'required'\n  | 'open'\n  | 'defaultOpen'\n  | 'onOpenChange'\n  | 'dir'\n  | 'autoComplete'\n  | 'form'\n> &\n  Pick<\n    TriggerProps,\n    | 'inline'\n    | 'state'\n    | 'placeholder'\n    | 'id'\n    | 'className'\n    | 'onBlur'\n    | 'aria-label'\n    | 'aria-labelledby'\n    | 'aria-describedby'\n    | 'aria-invalid'\n    | 'aria-required'\n  > & {\n    items?: readonly (SelectItem | SelectItemGroup)[];\n  };\n\n/** `role=\"combobox\"` is not named from content: neither the item label nor `placeholder` names it. */\nexport type SelectProps = WithAccessibleName<BaseProps>;\n\n/**\n * Single selection from a short enumerated list. Built on Radix Select.\n *\n * - Use for ~10 or fewer options where search adds nothing; else `Combobox` / `MultiCombobox`.\n * - In forms: `FormGroup`, or `useAppForm` + `field.SelectField` for validation.\n * - Compound parts (`Select.Root`, `.Trigger`, `.Content`, `.Item`) for custom item layouts.\n */\nexport const Select = ({\n  value,\n  defaultValue,\n  onValueChange,\n  disabled,\n  name,\n  required,\n  open,\n  defaultOpen,\n  onOpenChange,\n  dir,\n  autoComplete,\n  form,\n  inline,\n  state,\n  placeholder,\n  className,\n  onBlur,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  items = [],\n  // Kept grouped: destructured apart, the required-one-of union becomes three optional props.\n  ...accessibleName\n}: SelectProps) => {\n  const groupKeyId = useId();\n\n  const renderItem = (item: SelectItem) => (\n    <SelectItemComponent\n      key={item.value}\n      value={item.value}\n      icon={item.icon}\n      hint={item.hint}\n      disabled={item.disabled}\n    >\n      {item.label}\n    </SelectItemComponent>\n  );\n\n  return (\n    <SelectRoot\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={onValueChange}\n      disabled={disabled}\n      name={name}\n      required={required}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      dir={dir}\n      autoComplete={autoComplete}\n      form={form}\n    >\n      <SelectTrigger\n        {...forwardAccessibleName(accessibleName)}\n        inline={inline}\n        state={state}\n        placeholder={placeholder}\n        className={className}\n        onBlur={onBlur}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={ariaInvalid}\n        aria-required={ariaRequired}\n      />\n      <SelectContent>\n        {items.map((itemOrGroup, index) => {\n          if (isGroup(itemOrGroup)) {\n            return (\n              <SelectGroup key={`${groupKeyId}-group-${index}`}>\n                {itemOrGroup.label && <SelectLabel>{itemOrGroup.label}</SelectLabel>}\n                {itemOrGroup.items.map(renderItem)}\n              </SelectGroup>\n            );\n          }\n\n          return renderItem(itemOrGroup);\n        })}\n      </SelectContent>\n    </SelectRoot>\n  );\n};\n\nSelect.Root = SelectRoot;\nSelect.Trigger = SelectTrigger;\nSelect.Content = SelectContent;\nSelect.Item = SelectItemComponent;\nSelect.Group = SelectGroup;\nSelect.Label = SelectLabel;\nSelect.Separator = SelectSeparator;\n"],"mappings":"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"}

package/dist/{Sheet-0TWKTqid.js → Sheet-DKG20J7W.js}

@@ -1,7 +1,7 @@
 import { cn } from "./classNames-DcGnTh2N.js";
 import { X } from "./icons-ZIeZXXS7.js";
 import { Button } from "./Button-BNkyYU8u.js";
-import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-cy0Ht9VY.js";
+import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-RGWwIMU6.js";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close, Content, Portal, Root, Title, Trigger } from "@radix-ui/react-dialog";
@@ -21,7 +21,7 @@ const SheetOverlay = ({ ref, ...props }) => /* @__PURE__ */ jsx(ModalOverlay, {
 const sheetContentVariants = cva([
 	"tailwindcss-preflight",
 	"tw:fixed",
-	"tw:z-[1051]",
+	"tw:z-overlay",
 	"tw:flex",
 	"tw:flex-col",
 	"tw:bg-card",
@@ -159,4 +159,4 @@ Sheet.Body = SheetBody;
 //#endregion
 export { Sheet };
 
-//# sourceMappingURL=Sheet-0TWKTqid.js.map
+//# sourceMappingURL=Sheet-DKG20J7W.js.map

package/dist/Sheet-DKG20J7W.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet-DKG20J7W.js","names":[],"sources":["../src/components/Sheet/SheetBody.tsx","../src/components/Sheet/SheetOverlay.tsx","../src/components/Sheet/SheetContent.tsx","../src/components/Sheet/SheetFooter.tsx","../src/components/Sheet/SheetHeader.tsx","../src/components/Sheet/SheetTitle.tsx","../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const SheetBody = ({ className, ...rest }: Props) => (\n  <div\n    {...rest}\n    className={cn('tw:flex', 'tw:flex-col', 'tw:overflow-x-hidden', 'tw:px-4', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { ModalOverlay } from '../Modal/ModalOverlay';\n\ntype Props = ComponentProps<typeof ModalOverlay>;\n\n// Assuming it should have the same style as standard modal, if not remove the modal dependency and style it separately.\nexport const SheetOverlay = ({ ref, ...props }: Props) => <ModalOverlay ref={ref} {...props} />;\n","import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-dialog';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport { SheetOverlay } from './SheetOverlay';\n\nconst sheetContentVariants = cva(\n  [\n    'tailwindcss-preflight',\n\n    'tw:fixed',\n\n    'tw:z-overlay',\n\n    'tw:flex',\n    'tw:flex-col',\n\n    'tw:bg-card',\n    'tw:text-card-foreground',\n    'tw:shadow-lg',\n\n    'tw:border',\n    'tw:border-border',\n    'tw:focus-visible:outline-hidden',\n    'tw:focus-visible:ring-2',\n    'tw:focus-visible:ring-ring/50',\n\n    'tw:ease-in-out',\n    'tw:data-[state=open]:duration-200',\n    'tw:data-[state=closed]:duration-200',\n  ],\n  {\n    defaultVariants: {\n      side: 'right',\n      disableTransition: false,\n    },\n    variants: {\n      disableTransition: {\n        true: [],\n        false: ['tw:data-[state=open]:animate-in', 'tw:data-[state=closed]:animate-out'],\n      },\n      side: {\n        top: [\n          'tw:inset-x-0',\n          'tw:top-0',\n          'tw:h-auto',\n          'tw:data-[state=closed]:slide-out-to-top',\n          'tw:data-[state=open]:slide-in-from-top',\n          'tw:rounded-b-sheet',\n        ],\n        right: [\n          'tw:inset-y-0',\n          'tw:right-0',\n          'tw:h-full',\n          'tw:data-[state=closed]:slide-out-to-right',\n          'tw:data-[state=open]:slide-in-from-right',\n          'tw:rounded-l-sheet',\n        ],\n\n        bottom: [\n          'tw:inset-x-0',\n          'tw:bottom-0',\n          'tw:h-auto',\n          'tw:data-[state=closed]:slide-out-to-bottom',\n          'tw:data-[state=open]:slide-in-from-bottom',\n          'tw:drop-shadow-2xl', // standard tailwindcss shadow is invisible for a bottom sheet because of positioning\n          'tw:rounded-t-sheet',\n        ],\n\n        left: [\n          'tw:inset-y-0',\n          'tw:left-0',\n          'tw:h-full',\n          'tw:data-[state=closed]:slide-out-to-left',\n          'tw:data-[state=open]:slide-in-from-left',\n          'tw:rounded-r-sheet',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<typeof Content> & {\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  hideOverlay?: boolean;\n  keepOpenOnPointerDownOutside?: boolean;\n} & VariantProps<typeof sheetContentVariants> &\n  Pick<ComponentProps<typeof Portal>, 'container'>;\n\nexport const SheetContent = ({\n  className,\n  children,\n  side = 'right',\n  disableTransition = false,\n  hideOverlay = false,\n  keepOpenOnPointerDownOutside = false,\n  onPointerDownOutside,\n  onInteractOutside,\n  container,\n  ...props\n}: Props) => {\n  const handleOnPointerDownOutside: ComponentProps<typeof Content>['onPointerDownOutside'] = (\n    event,\n  ) => {\n    if (keepOpenOnPointerDownOutside) event.preventDefault();\n    onPointerDownOutside?.(event);\n  };\n\n  const handleOnInteractOutside: ComponentProps<typeof Content>['onInteractOutside'] = (event) => {\n    if (keepOpenOnPointerDownOutside) event.preventDefault();\n    onInteractOutside?.(event);\n  };\n\n  return (\n    <Portal container={container}>\n      {!hideOverlay && <SheetOverlay disableTransition={disableTransition ?? false} />}\n      <Content\n        {...props}\n        // Silences Radix's missing-description warning; no sheet uses a description.\n        aria-describedby={undefined}\n        className={cn(sheetContentVariants({ side, className, disableTransition }))}\n        onPointerDownOutside={handleOnPointerDownOutside}\n        onInteractOutside={handleOnInteractOutside}\n        data-side={side}\n      >\n        {children}\n      </Content>\n    </Portal>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const SheetFooter = ({ className, ...props }: Props) => (\n  <div className={cn('tw:mt-auto tw:flex tw:flex-col tw:gap-2 tw:p-4', className)} {...props} />\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 { ModalDescription } from '../Modal/ModalDescription';\nimport { ModalTitle } from '../Modal/ModalTitle';\n\ntype Props = {\n  title?: ReactNode;\n  description?: ReactNode;\n  hideCloseIcon?: boolean;\n} & ComponentProps<'div'>;\n\nexport const SheetHeader = ({\n  className,\n  children,\n  hideCloseIcon = false,\n  title,\n  description,\n  ...props\n}: Props) => {\n  const isHeaderRendered = title || description || !hideCloseIcon;\n\n  return (\n    <div className={cn('tw:flex', 'tw:flex-col', 'tw:gap-1.5', 'tw:p-4', className)} {...props}>\n      {isHeaderRendered && (\n        <div className=\"tw:flex tw:flex-col\">\n          <div className=\"tw:flex tw:justify-end tw:gap-2\">\n            {title && <ModalTitle>{title}</ModalTitle>}\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          </div>\n          {description && <ModalDescription>{description}</ModalDescription>}\n        </div>\n      )}\n\n      {children}\n    </div>\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  visuallyHidden?: boolean;\n};\n\nexport const SheetTitle = ({ className, visuallyHidden = false, ...props }: Props) => (\n  <Title className={cn({ 'tw:sr-only': visuallyHidden }, className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-dialog';\n\nimport { SheetBody } from './SheetBody';\nimport { SheetContent } from './SheetContent';\nimport { SheetFooter } from './SheetFooter';\nimport { SheetHeader } from './SheetHeader';\nimport { SheetTitle } from './SheetTitle';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const Sheet = (props: Props) => <Root {...props} />;\n\nSheet.Close = Close;\nSheet.Trigger = Trigger;\nSheet.Content = SheetContent;\nSheet.Title = SheetTitle;\n\nSheet.Header = SheetHeader;\nSheet.Footer = SheetFooter;\nSheet.Body = SheetBody;\n"],"mappings":"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"}

package/dist/{Sidebar-C5hdANBU.js → Sidebar-BlYqasnX.js}

@@ -2,10 +2,10 @@ import { cn } from "./classNames-DcGnTh2N.js";
 import { Tooltip, TooltipProvider } from "./utils-DwC9u0tM.js";
 import { mergeRefs } from "./internal/utils/mergeRefs.js";
 import { ChevronDown, Search } from "./icons-ZIeZXXS7.js";
-import { DropdownMenu } from "./DropdownMenu-CcVbZ_5u.js";
+import { DropdownMenu } from "./DropdownMenu-Bum99mVf.js";
 import { ScrollArea } from "./internal/components/ScrollArea.js";
-import { Sheet } from "./Sheet-0TWKTqid.js";
-import { HoverCard } from "./HoverCard-Cv5rmvJq.js";
+import { Sheet } from "./Sheet-DKG20J7W.js";
+import { HoverCard } from "./HoverCard-Cf9iYyaW.js";
 import { Separator } from "./internal/components/Separator.js";
 import { useElement } from "./useElement-D-RjrGa4.js";
 import { Collapsible } from "./Collapsible-DD4xTL75.js";
@@ -973,4 +973,4 @@ Sidebar.SubItem = SidebarMenuSubItem;
 //#endregion
 export { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar };
 
-//# sourceMappingURL=Sidebar-C5hdANBU.js.map
+//# sourceMappingURL=Sidebar-BlYqasnX.js.map