@keboola/design 13.1.3 → 14.0.0

package/dist/{PageHeader-CgfyXpf1.js → PageHeader-CL1A6jFM.js}

@@ -1,9 +1,14 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/PageHeader/styles.ts
-const titleRowClass = "tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2";
-const titleClass = "tw:m-0 tw:text-3xl tw:font-semibold tw:leading-9 tw:text-foreground tw:break-words";
-const titleCompactClass = "tw:m-0 tw:text-xl tw:font-semibold tw:leading-7 tw:text-foreground tw:break-words";
+const titleRowClass = "tw:group/title-row tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2 tw:has-[[data-slot=inline-edit]]:items-start";
+const titleLineClass = "tw:group-has-[[data-slot=inline-edit]]/title-row:min-h-9";
+const titleCompactLineClass = "tw:group-has-[[data-slot=inline-edit]]/title-row:min-h-7";
+const titleGroupClass = "tw:group/title tw:has-[[data-slot=inline-edit][data-expanded]]:gap-x-0";
+const titleIconClass = "tw:flex tw:shrink-0 tw:items-center tw:group-has-[[data-slot=inline-edit]]/title-row:h-9";
+const titleCompactIconClass = "tw:flex tw:shrink-0 tw:items-center tw:group-has-[[data-slot=inline-edit]]/title-row:h-7";
+const titleClass = "tw:m-0 tw:text-3xl tw:font-semibold tw:leading-9 tw:text-foreground tw:break-words tw:has-[[data-slot=inline-edit]]:min-w-0 tw:has-[[data-expanded]]:flex-1";
+const titleCompactClass = "tw:m-0 tw:text-xl tw:font-semibold tw:leading-7 tw:text-foreground tw:break-words tw:has-[[data-slot=inline-edit]]:min-w-0 tw:has-[[data-expanded]]:flex-1";
 //#endregion
 //#region src/blocks/PageHeader/PageHeaderDetail.tsx
 /**
@@ -15,11 +20,13 @@ const titleCompactClass = "tw:m-0 tw:text-xl tw:font-semibold tw:leading-7 tw:te
 * @see RECIPES.md#list-detail
 */
 const PageHeaderDetail = ({ ref, className, breadcrumbs, overflowActions, title, titleIcon, badges, description, compact = false, primaryAction, secondaryAction, headerNav, fullWidthDescription = false, ...props }) => {
+	const iconClass = compact ? titleCompactIconClass : titleIconClass;
+	const lineClass = compact ? titleCompactLineClass : titleLineClass;
 	const titleRow = /* @__PURE__ */ jsxs("div", {
-		className: cn(titleRowClass, "tw:min-w-64 tw:flex-1 tw:pr-2"),
+		className: cn(titleRowClass, "tw:min-w-64 tw:flex-1 tw:pr-2 tw:has-[[data-expanded]]:pr-0"),
 		children: [
 			titleIcon && /* @__PURE__ */ jsx("span", {
-				className: "tw:flex tw:shrink-0 tw:items-center",
+				className: iconClass,
 				children: titleIcon
 			}),
 			/* @__PURE__ */ jsx("h1", {
@@ -27,13 +34,13 @@ const PageHeaderDetail = ({ ref, className, breadcrumbs, overflowActions, title,
 				children: title
 			}),
 			badges && /* @__PURE__ */ jsx("div", {
-				className: "tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:[&_[data-slot=badge]]:rounded-full tw:[&_[data-slot=badge]]:normal-case tw:[&_[data-slot=badge]]:tracking-normal tw:[&_[data-slot=badge]]:py-0",
+				className: cn("tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:group-has-[[data-slot=inline-edit]]/title-row:empty:hidden tw:group-has-[[data-slot=inline-edit]]/title-row:has-[>:only-child:empty]:hidden tw:[&_[data-slot=badge]]:rounded-full tw:[&_[data-slot=badge]]:normal-case tw:[&_[data-slot=badge]]:tracking-normal tw:[&_[data-slot=badge]]:py-0", lineClass, "tw:transition-opacity tw:duration-150 tw:group-has-[[data-slot=inline-edit][data-settled]]/title:starting:opacity-0 tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:hidden"),
 				children: badges
 			})
 		]
 	});
 	const actions = (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs("div", {
-		className: "tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2",
+		className: cn("tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2", "tw:transition-opacity tw:duration-150 tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:invisible tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:w-0 tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:flex-nowrap tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:overflow-hidden tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:opacity-0"),
 		children: [secondaryAction, primaryAction]
 	});
 	const descriptionNode = description && /* @__PURE__ */ jsx("p", {
@@ -58,18 +65,18 @@ const PageHeaderDetail = ({ ref, className, breadcrumbs, overflowActions, title,
 			fullWidthDescription ? /* @__PURE__ */ jsxs("div", {
 				className: "tw:flex tw:w-full tw:flex-col tw:gap-2",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3",
+					className: cn(titleGroupClass, "tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3"),
 					children: [titleRow, actions]
 				}), descriptionNode]
 			}) : /* @__PURE__ */ jsxs("div", {
-				className: "tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3",
+				className: cn(titleGroupClass, "tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3"),
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "tw:flex tw:min-w-64 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2",
+					className: "tw:flex tw:min-w-64 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2 tw:has-[[data-expanded]]:pr-0",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: titleRowClass,
 						children: [
 							titleIcon && /* @__PURE__ */ jsx("span", {
-								className: "tw:flex tw:shrink-0 tw:items-center",
+								className: iconClass,
 								children: titleIcon
 							}),
 							/* @__PURE__ */ jsx("h1", {
@@ -77,7 +84,7 @@ const PageHeaderDetail = ({ ref, className, breadcrumbs, overflowActions, title,
 								children: title
 							}),
 							badges && /* @__PURE__ */ jsx("div", {
-								className: "tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:[&_[data-slot=badge]]:rounded-full tw:[&_[data-slot=badge]]:normal-case tw:[&_[data-slot=badge]]:tracking-normal tw:[&_[data-slot=badge]]:py-0",
+								className: cn("tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:group-has-[[data-slot=inline-edit]]/title-row:empty:hidden tw:group-has-[[data-slot=inline-edit]]/title-row:has-[>:only-child:empty]:hidden tw:[&_[data-slot=badge]]:rounded-full tw:[&_[data-slot=badge]]:normal-case tw:[&_[data-slot=badge]]:tracking-normal tw:[&_[data-slot=badge]]:py-0", lineClass, "tw:transition-opacity tw:duration-150 tw:group-has-[[data-slot=inline-edit][data-settled]]/title:starting:opacity-0 tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:hidden"),
 								children: badges
 							})
 						]
@@ -161,4 +168,4 @@ const PageHeader = {
 //#endregion
 export { PageHeader };
 
-//# sourceMappingURL=PageHeader-CgfyXpf1.js.map
+//# sourceMappingURL=PageHeader-CL1A6jFM.js.map

package/dist/PageHeader-CL1A6jFM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader-CL1A6jFM.js","names":[],"sources":["../src/blocks/PageHeader/styles.ts","../src/blocks/PageHeader/PageHeaderDetail.tsx","../src/blocks/PageHeader/PageHeaderIndex.tsx","../src/blocks/PageHeader/PageHeader.tsx"],"sourcesContent":["// A title holding an InlineEdit is top-aligned, with the icon and badges one title line tall,\n// so they centre on its first line however far it wraps. Other titles stay centred.\nexport const titleRowClass =\n  'tw:group/title-row tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2 tw:has-[[data-slot=inline-edit]]:items-start';\nexport const titleLineClass = 'tw:group-has-[[data-slot=inline-edit]]/title-row:min-h-9';\nexport const titleCompactLineClass = 'tw:group-has-[[data-slot=inline-edit]]/title-row:min-h-7';\n// Actions step aside while the title is renamed, and fade back once it has shrunk.\n// - Invisible at zero width rather than gone: a legacy 40px button holds the row's height.\n// - Held on one line, so their wrapped contents add no room below the field.\n// - The group drops its gap, so the field's last button lines up with the actions above.\nexport const titleGroupClass =\n  'tw:group/title tw:has-[[data-slot=inline-edit][data-expanded]]:gap-x-0';\nexport const actionsHiddenWhileRenamingClass =\n  'tw:transition-opacity tw:duration-150 tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:invisible tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:w-0 tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:flex-nowrap tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:overflow-hidden tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:opacity-0';\n// Badges, no taller than the title line, are gone while it is renamed and fade back once it settles.\nexport const badgesHiddenWhileRenamingClass =\n  'tw:transition-opacity tw:duration-150 tw:group-has-[[data-slot=inline-edit][data-settled]]/title:starting:opacity-0 tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:hidden';\n// Beside an InlineEdit the icon box is exactly one line tall, so a taller icon overhangs it evenly.\nexport const titleIconClass =\n  'tw:flex tw:shrink-0 tw:items-center tw:group-has-[[data-slot=inline-edit]]/title-row:h-9';\nexport const titleCompactIconClass =\n  'tw:flex tw:shrink-0 tw:items-center tw:group-has-[[data-slot=inline-edit]]/title-row:h-7';\n// A title holding an InlineEdit may shrink below its text; an open rename takes the rest of the row.\nexport const titleClass =\n  'tw:m-0 tw:text-3xl tw:font-semibold tw:leading-9 tw:text-foreground tw:break-words tw:has-[[data-slot=inline-edit]]:min-w-0 tw:has-[[data-expanded]]:flex-1';\nexport const titleCompactClass =\n  'tw:m-0 tw:text-xl tw:font-semibold tw:leading-7 tw:text-foreground tw:break-words tw:has-[[data-slot=inline-edit]]:min-w-0 tw:has-[[data-expanded]]:flex-1';\n// Header badges always read as pills: force pill shape/case/tracking on any\n// Badge inside the slot via its `data-slot=\"badge\"` root (higher specificity\n// than the Badge's own variant classes, so it wins regardless of variant).\n// `tw:py-0` neutralises consumer-forced vertical padding (e.g. StatusLabel's\n// `tw:py-1.5`) so every header pill keeps the standard badge height.\n// Beside an InlineEdit an empty wrapper (no badges to show) collapses, so the title keeps the row.\nexport const badgesClass =\n  'tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:group-has-[[data-slot=inline-edit]]/title-row:empty:hidden tw:group-has-[[data-slot=inline-edit]]/title-row:has-[>:only-child:empty]:hidden tw:[&_[data-slot=badge]]:rounded-full tw:[&_[data-slot=badge]]:normal-case tw:[&_[data-slot=badge]]:tracking-normal tw:[&_[data-slot=badge]]:py-0';\nexport const descriptionClass =\n  'tw:m-0 tw:max-w-[800px] tw:break-words tw:text-sm tw:leading-5 tw:text-muted-foreground';\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\nimport {\n  actionsHiddenWhileRenamingClass,\n  badgesClass,\n  badgesHiddenWhileRenamingClass,\n  descriptionClass,\n  titleClass,\n  titleCompactClass,\n  titleCompactIconClass,\n  titleCompactLineClass,\n  titleGroupClass,\n  titleIconClass,\n  titleLineClass,\n  titleRowClass,\n} from './styles';\n\n// Pattern: docs/patterns/page-header/detail/detail-page-header.md\ntype PageHeaderDetailProps = Omit<ComponentProps<'header'>, 'title'> & {\n  /** Chain to the entity's parent. Don't end with the entity's own name — that's the `title`. */\n  breadcrumbs: ReactNode;\n  /** `DropdownMenu` for all other actions, on the breadcrumbs row. */\n  overflowActions?: ReactNode;\n  title: ReactNode;\n  /** Entity / type icon left of the title. */\n  titleIcon?: ReactNode;\n  /** `Badge`s beside the title (status, environment, version). */\n  badges?: ReactNode;\n  description?: ReactNode;\n  /** Smaller title for information-dense pages. */\n  compact?: boolean;\n  /** `Button` with the verb appropriate to the entity (Deploy / Run / Save). */\n  primaryAction?: ReactNode;\n  /** `Button variant=\"secondary\"`. Further actions go in `overflowActions`. */\n  secondaryAction?: ReactNode;\n  /** `Tabs` row below the title block. */\n  headerNav?: ReactNode;\n  /** Description on its own full-width row below title and actions, not in the title column. */\n  fullWidthDescription?: boolean;\n};\n\n/**\n * Page header for one entity with a parent hierarchy worth breadcrumbing.\n *\n * - Nest inside `PageLayout.Header`.\n * - A page with no parent hierarchy uses `PageHeader.Index`, even for one entity.\n *\n * @see RECIPES.md#list-detail\n */\nexport const PageHeaderDetail = ({\n  ref,\n  className,\n  breadcrumbs,\n  overflowActions,\n  title,\n  titleIcon,\n  badges,\n  description,\n  compact = false,\n  primaryAction,\n  secondaryAction,\n  headerNav,\n  fullWidthDescription = false,\n  ...props\n}: PageHeaderDetailProps) => {\n  const iconClass = compact ? titleCompactIconClass : titleIconClass;\n  const lineClass = compact ? titleCompactLineClass : titleLineClass;\n  const titleRow = (\n    <div\n      className={cn(titleRowClass, 'tw:min-w-64 tw:flex-1 tw:pr-2 tw:has-[[data-expanded]]:pr-0')}\n    >\n      {titleIcon && <span className={iconClass}>{titleIcon}</span>}\n      <h1 className={compact ? titleCompactClass : titleClass}>{title}</h1>\n      {badges && (\n        <div className={cn(badgesClass, lineClass, badgesHiddenWhileRenamingClass)}>{badges}</div>\n      )}\n    </div>\n  );\n  const actions = (primaryAction || secondaryAction) && (\n    <div\n      className={cn(\n        'tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2',\n        actionsHiddenWhileRenamingClass,\n      )}\n    >\n      {secondaryAction}\n      {primaryAction}\n    </div>\n  );\n  const descriptionNode = description && <p className={descriptionClass}>{description}</p>;\n  return (\n    <header\n      ref={ref}\n      className={cn('tw:flex tw:w-full tw:flex-col tw:gap-4', className)}\n      {...props}\n    >\n      <div className=\"tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-4\">\n        <div className=\"tw:min-w-0 tw:flex-1\">{breadcrumbs}</div>\n        {overflowActions && (\n          <div className=\"tw:flex tw:shrink-0 tw:items-center tw:gap-2\">{overflowActions}</div>\n        )}\n      </div>\n\n      {fullWidthDescription ? (\n        <div className=\"tw:flex tw:w-full tw:flex-col tw:gap-2\">\n          <div\n            className={cn(\n              titleGroupClass,\n              'tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3',\n            )}\n          >\n            {titleRow}\n            {actions}\n          </div>\n          {descriptionNode}\n        </div>\n      ) : (\n        <div\n          className={cn(\n            titleGroupClass,\n            'tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3',\n          )}\n        >\n          <div className=\"tw:flex tw:min-w-64 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2 tw:has-[[data-expanded]]:pr-0\">\n            <div className={titleRowClass}>\n              {titleIcon && <span className={iconClass}>{titleIcon}</span>}\n              <h1 className={compact ? titleCompactClass : titleClass}>{title}</h1>\n              {badges && (\n                <div className={cn(badgesClass, lineClass, badgesHiddenWhileRenamingClass)}>\n                  {badges}\n                </div>\n              )}\n            </div>\n            {descriptionNode}\n          </div>\n          {actions}\n        </div>\n      )}\n\n      {headerNav}\n    </header>\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { descriptionClass, titleClass, titleRowClass } from './styles';\n\n// Pattern: docs/patterns/page-header/index/index-page-header.md\ntype PageHeaderIndexProps = Omit<ComponentProps<'header'>, 'title'> & {\n  title: ReactNode;\n  /** Prose below the title; `metadata` wins when both are set. */\n  description?: ReactNode;\n  /** Count summary (\"3 buckets and 39 tables\"). Wins over `description`. */\n  metadata?: ReactNode;\n  /** Icon-only docs button (`Button variant=\"invisible\" icon={<BookOpen />}`). */\n  documentation?: ReactNode;\n  /** The one primary \"create X\" `Button`. */\n  action?: ReactNode;\n  /** `Tabs` row below the title block. */\n  headerNav?: ReactNode;\n  /** Description on its own full-width row; actions wrap below the title on narrow widths. */\n  fullWidthDescription?: boolean;\n};\n\n/**\n * Page header for top-level list / collection pages.\n *\n * - No breadcrumbs, no overflow menu.\n * - Search and filters belong in `PageToolbar`, not here.\n */\nexport const PageHeaderIndex = ({\n  ref,\n  className,\n  title,\n  description,\n  metadata,\n  documentation,\n  action,\n  headerNav,\n  fullWidthDescription = false,\n  ...props\n}: PageHeaderIndexProps) => {\n  const subtitle = metadata ?? description;\n  const hasActions = Boolean(documentation || action);\n  return (\n    <header\n      ref={ref}\n      className={cn('tw:flex tw:w-full tw:flex-col tw:gap-4', className)}\n      {...props}\n    >\n      {fullWidthDescription ? (\n        <div className=\"tw:flex tw:w-full tw:flex-col tw:gap-2\">\n          <div className=\"tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3\">\n            <div className={cn(titleRowClass, 'tw:min-w-64 tw:flex-1 tw:pr-2')}>\n              <h1 className={titleClass}>{title}</h1>\n            </div>\n            {hasActions && (\n              <div className=\"tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2\">\n                {documentation}\n                {action}\n              </div>\n            )}\n          </div>\n          {subtitle && <p className={descriptionClass}>{subtitle}</p>}\n        </div>\n      ) : (\n        <div className=\"tw:flex tw:w-full tw:items-start tw:justify-between tw:gap-4\">\n          <div className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2\">\n            <div className={titleRowClass}>\n              <h1 className={titleClass}>{title}</h1>\n            </div>\n            {subtitle && <p className={descriptionClass}>{subtitle}</p>}\n          </div>\n          {hasActions && (\n            <div className=\"tw:flex tw:shrink-0 tw:items-center tw:gap-2\">\n              {documentation}\n              {action}\n            </div>\n          )}\n        </div>\n      )}\n      {headerNav}\n    </header>\n  );\n};\n","import { PageHeaderDetail } from './PageHeaderDetail';\nimport { PageHeaderIndex } from './PageHeaderIndex';\n\n/**\n * Page header whose variant types enforce the page-header patterns.\n *\n * - Nest inside `PageLayout.Header`; pass `@keboola/design` `Button`s into the slots.\n * - Other layouts: custom JSX in `PageLayout.Header`; routed tabs: `PageLayout.Tabs`.\n *\n * @see RECIPES.md#page-header-tabs\n */\nexport const PageHeader = {\n  /** List / collection pages. No breadcrumbs; `metadata` wins over `description`. */\n  Index: PageHeaderIndex,\n  /** Single-entity pages: required breadcrumbs, overflow menu, max 2 visible actions. */\n  Detail: PageHeaderDetail,\n};\n"],"mappings":"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"}

package/dist/{PageLayout-DiAAILuS.js → PageLayout-C9aXTpqV.js}

@@ -1,4 +1,4 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import { mergeRefs } from "./internal/utils/mergeRefs.js";
 import { createContext, use, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -165,4 +165,4 @@ const PageLayout = Object.assign(Root, {
 //#endregion
 export { PageLayout };
 
-//# sourceMappingURL=PageLayout-DiAAILuS.js.map
+//# sourceMappingURL=PageLayout-C9aXTpqV.js.map

package/dist/{PageLayout-DiAAILuS.js.map → PageLayout-C9aXTpqV.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PageLayout-DiAAILuS.js","names":[],"sources":["../src/blocks/SectionNav/constants.ts","../src/blocks/PageLayout/context.ts","../src/blocks/PageLayout/PageLayout.tsx"],"sourcesContent":["/**\n * Names the container query `SectionNav` reads to pick the tree over the dropdown.\n *\n * It has to sit on an **ancestor**: a container query matches descendants only, so the element that\n * names the container can never read it — and it cannot be `SectionNav`'s own wrapper either, whose\n * width is what the switch changes (256px in a row, full width in a column), which would oscillate.\n * `PageLayout.Content nav={…}` puts it on the right element for you.\n */\nexport const SECTION_NAV_CONTAINER = 'tw:@container/section-nav';\n","import { createContext, use } from 'react';\nimport type { RefObject } from 'react';\n\n/**\n * The `PageLayout` root element, so `PageLayout.Header` can publish its measured height as a CSS\n * custom property the whole page can read — `PageLayout.Content nav={…}` pins the nav to it.\n *\n * A slot rendered outside a `PageLayout` reads `null` and skips publishing rather than throwing:\n * `PageLayout.Footer` is already documented as usable on its own.\n */\nexport const PageLayoutRootContext = createContext<RefObject<HTMLDivElement | null> | null>(null);\n\nexport const usePageLayoutRoot = () => use(PageLayoutRootContext);\n","import { useEffect, useRef } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn, mergeRefs } from '../../utils';\nimport { SECTION_NAV_CONTAINER } from '../SectionNav/constants';\n\nimport { PageLayoutRootContext, usePageLayoutRoot } from './context';\n\n/** `maxWidth`: `narrow` for forms, `default` for most pages, `wide` for dense detail views, `full` edge-to-edge. */\ntype RootProps = ComponentProps<'div'> & {\n  maxWidth?: 'default' | 'narrow' | 'wide' | 'full';\n};\n\nconst maxWidthClass = {\n  narrow: 'tw:max-w-[976px]',\n  default: 'tw:max-w-[1280px]',\n  wide: 'tw:max-w-[1600px]',\n  full: 'tw:max-w-full',\n} as const;\n\nconst Root = ({ ref, className, maxWidth = 'full', children, ...props }: RootProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <PageLayoutRootContext value={rootRef}>\n      <div\n        ref={mergeRefs(ref ?? null, rootRef)}\n        className={cn(\n          'tw:flex tw:flex-col tw:gap-4 tw:w-full tw:mx-auto',\n          maxWidthClass[maxWidth],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </PageLayoutRootContext>\n  );\n};\n\nconst Breadcrumbs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n  <div ref={ref} className={cn('tw:w-full', className)} {...props}>\n    {children}\n  </div>\n);\n\nconst STICKY_CHROME_BLEED =\n  'tw:before:absolute tw:before:inset-x-[-0.5rem] tw:before:inset-y-0 tw:before:-z-10 tw:before:bg-background';\n\ntype HeaderProps = ComponentProps<'header'> & {\n  sticky?: boolean;\n};\n\nconst Header = ({ ref, className, sticky = false, children, ...props }: HeaderProps) => {\n  const rootRef = usePageLayoutRoot();\n  const headerRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const header = headerRef.current;\n    const root = rootRef?.current;\n\n    if (!sticky || !header || !root || typeof ResizeObserver === 'undefined') return;\n\n    const publish = () => {\n      root.style.setProperty(\n        '--page-header-height',\n        `${Math.round(header.getBoundingClientRect().height)}px`,\n      );\n    };\n\n    const observer = new ResizeObserver(publish);\n\n    observer.observe(header);\n    publish();\n\n    return () => {\n      observer.disconnect();\n      root.style.removeProperty('--page-header-height');\n    };\n  }, [sticky, rootRef]);\n\n  return (\n    <header\n      ref={mergeRefs(ref ?? null, headerRef)}\n      className={cn(\n        'tw:w-full',\n        sticky && ['tw:sticky tw:top-0 tw:z-20 tw:bg-background', STICKY_CHROME_BLEED],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {sticky && (\n        <div\n          aria-hidden\n          className=\"tw:pointer-events-none tw:absolute tw:inset-x-0 tw:top-full tw:h-6 tw:bg-linear-to-b tw:from-background tw:to-[rgb(var(--background)/0)]\"\n        />\n      )}\n    </header>\n  );\n};\n\nconst Tabs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:w-full tw:items-center tw:border-b tw:border-border', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\ntype ContentProps = ComponentProps<'div'> & {\n  nav?: ReactNode;\n};\n\nconst scrollParent = (from: HTMLElement): HTMLElement | null => {\n  for (let el = from.parentElement; el; el = el.parentElement) {\n    if (/auto|scroll/.test(getComputedStyle(el).overflowY)) return el;\n  }\n\n  return null;\n};\n\nconst useAvailableHeight = () => {\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const row = rowRef.current;\n\n    if (!row || typeof ResizeObserver === 'undefined') return;\n\n    const scroller = scrollParent(row);\n\n    const publish = () => {\n      const top = row.getBoundingClientRect().top + (scroller?.scrollTop ?? window.scrollY);\n      const room = scroller\n        ? scroller.clientHeight - (top - scroller.getBoundingClientRect().top)\n        : window.innerHeight - top;\n\n      row.style.setProperty('--section-nav-available', `${Math.max(0, Math.round(room))}px`);\n    };\n\n    const observer = new ResizeObserver(publish);\n\n    observer.observe(row);\n    if (scroller) observer.observe(scroller);\n    publish();\n\n    return () => observer.disconnect();\n  }, []);\n\n  return rowRef;\n};\n\nconst Content = ({ ref, className, nav, children, ...props }: ContentProps) => {\n  const rowRef = useAvailableHeight();\n\n  if (!nav) {\n    return (\n      <div\n        ref={ref}\n        className={cn('tw:flex tw:w-full tw:flex-1 tw:flex-col', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'tw:group/page-layout-content tw:flex tw:w-full tw:flex-1 tw:flex-col',\n        SECTION_NAV_CONTAINER,\n        className,\n      )}\n      {...props}\n    >\n      <div\n        ref={rowRef}\n        className=\"tw:flex tw:w-full tw:@[640px]/section-nav:flex-row tw:@[640px]/section-nav:gap-8 tw:@max-[640px]/section-nav:flex-col tw:@max-[640px]/section-nav:gap-4\"\n      >\n        <div\n          data-slot=\"page-layout-nav\"\n          className=\"tw:sticky tw:top-[calc(var(--page-header-height,0px)+1rem)] tw:z-10 tw:shrink-0 tw:self-start tw:@[640px]/section-nav:max-h-[var(--section-nav-available,100dvh)] tw:@[640px]/section-nav:w-64 tw:@[640px]/section-nav:overflow-y-auto tw:@[640px]/section-nav:supports-[animation-timeline:scroll()]:scroll-fade-y tw:@max-[640px]/section-nav:w-full tw:@max-[640px]/section-nav:bg-background tw:@max-[640px]/section-nav:before:absolute tw:@max-[640px]/section-nav:before:inset-x-[-0.5rem] tw:@max-[640px]/section-nav:before:top-[-1rem] tw:@max-[640px]/section-nav:before:bottom-0 tw:@max-[640px]/section-nav:before:-z-10 tw:@max-[640px]/section-nav:before:bg-background tw:@max-[640px]/section-nav:after:pointer-events-none tw:@max-[640px]/section-nav:after:absolute tw:@max-[640px]/section-nav:after:inset-x-0 tw:@max-[640px]/section-nav:after:top-full tw:@max-[640px]/section-nav:after:h-6 tw:@max-[640px]/section-nav:after:bg-linear-to-b tw:@max-[640px]/section-nav:after:from-background tw:@max-[640px]/section-nav:after:to-[rgb(var(--background)/0)]\"\n        >\n          {nav}\n        </div>\n        <div\n          data-slot=\"page-layout-content-body\"\n          className=\"tw:[--page-content-sticky-top:var(--page-header-height,0px)] tw:min-w-0 tw:flex-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n\ntype FooterProps = ComponentProps<'footer'> & {\n  sticky?: boolean;\n};\n\nconst Footer = ({ ref, className, sticky = false, children, ...props }: FooterProps) => (\n  <footer\n    ref={ref}\n    className={cn(\n      'tw:flex tw:w-full tw:items-center tw:justify-end tw:gap-3 tw:border-t tw:border-border tw:bg-background tw:px-6 tw:py-4',\n      sticky && ['tw:sticky tw:bottom-0 tw:z-10', STICKY_CHROME_BLEED],\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </footer>\n);\n\n/**\n * Page chrome for every new kbc-ui page: max-width column + vertical rhythm + named slots.\n *\n * - No outer padding: the shell owns the gutter to the app frame.\n * - Not for modal bodies or embedded widgets; the `Sidebar` lives in the app shell.\n * - Search / filter pills go in `PageToolbar`, never in the header.\n *\n * @see RECIPES.md#list-detail\n * @see RECIPES.md#section-nav\n */\nexport const PageLayout = Object.assign(Root, {\n  /** Usually composed by `PageHeader.Detail`; for layouts that fit neither `PageHeader` variant. */\n  Breadcrumbs,\n  /** `sticky` also publishes its height as `--page-header-height`, which `Content nav` pins to. */\n  Header,\n  /** Routing-based tab rows; use `Tabs` / `TabsContent` inside, never a raw `<button>`. */\n  Tabs,\n  /** `nav` (a `SectionNav`) makes it a two-column layout. */\n  Content,\n  /** Form submit bar; `sticky` pins it to the viewport. */\n  Footer,\n});\n"],"mappings":"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"}
+{"version":3,"file":"PageLayout-C9aXTpqV.js","names":[],"sources":["../src/blocks/SectionNav/constants.ts","../src/blocks/PageLayout/context.ts","../src/blocks/PageLayout/PageLayout.tsx"],"sourcesContent":["/**\n * Names the container query `SectionNav` reads to pick the tree over the dropdown.\n *\n * It has to sit on an **ancestor**: a container query matches descendants only, so the element that\n * names the container can never read it — and it cannot be `SectionNav`'s own wrapper either, whose\n * width is what the switch changes (256px in a row, full width in a column), which would oscillate.\n * `PageLayout.Content nav={…}` puts it on the right element for you.\n */\nexport const SECTION_NAV_CONTAINER = 'tw:@container/section-nav';\n","import { createContext, use } from 'react';\nimport type { RefObject } from 'react';\n\n/**\n * The `PageLayout` root element, so `PageLayout.Header` can publish its measured height as a CSS\n * custom property the whole page can read — `PageLayout.Content nav={…}` pins the nav to it.\n *\n * A slot rendered outside a `PageLayout` reads `null` and skips publishing rather than throwing:\n * `PageLayout.Footer` is already documented as usable on its own.\n */\nexport const PageLayoutRootContext = createContext<RefObject<HTMLDivElement | null> | null>(null);\n\nexport const usePageLayoutRoot = () => use(PageLayoutRootContext);\n","import { useEffect, useRef } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn, mergeRefs } from '../../utils';\nimport { SECTION_NAV_CONTAINER } from '../SectionNav/constants';\n\nimport { PageLayoutRootContext, usePageLayoutRoot } from './context';\n\n/** `maxWidth`: `narrow` for forms, `default` for most pages, `wide` for dense detail views, `full` edge-to-edge. */\ntype RootProps = ComponentProps<'div'> & {\n  maxWidth?: 'default' | 'narrow' | 'wide' | 'full';\n};\n\nconst maxWidthClass = {\n  narrow: 'tw:max-w-[976px]',\n  default: 'tw:max-w-[1280px]',\n  wide: 'tw:max-w-[1600px]',\n  full: 'tw:max-w-full',\n} as const;\n\nconst Root = ({ ref, className, maxWidth = 'full', children, ...props }: RootProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <PageLayoutRootContext value={rootRef}>\n      <div\n        ref={mergeRefs(ref ?? null, rootRef)}\n        className={cn(\n          'tw:flex tw:flex-col tw:gap-4 tw:w-full tw:mx-auto',\n          maxWidthClass[maxWidth],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </PageLayoutRootContext>\n  );\n};\n\nconst Breadcrumbs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n  <div ref={ref} className={cn('tw:w-full', className)} {...props}>\n    {children}\n  </div>\n);\n\nconst STICKY_CHROME_BLEED =\n  'tw:before:absolute tw:before:inset-x-[-0.5rem] tw:before:inset-y-0 tw:before:-z-10 tw:before:bg-background';\n\ntype HeaderProps = ComponentProps<'header'> & {\n  sticky?: boolean;\n};\n\nconst Header = ({ ref, className, sticky = false, children, ...props }: HeaderProps) => {\n  const rootRef = usePageLayoutRoot();\n  const headerRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const header = headerRef.current;\n    const root = rootRef?.current;\n\n    if (!sticky || !header || !root || typeof ResizeObserver === 'undefined') return;\n\n    const publish = () => {\n      root.style.setProperty(\n        '--page-header-height',\n        `${Math.round(header.getBoundingClientRect().height)}px`,\n      );\n    };\n\n    const observer = new ResizeObserver(publish);\n\n    observer.observe(header);\n    publish();\n\n    return () => {\n      observer.disconnect();\n      root.style.removeProperty('--page-header-height');\n    };\n  }, [sticky, rootRef]);\n\n  return (\n    <header\n      ref={mergeRefs(ref ?? null, headerRef)}\n      className={cn(\n        'tw:w-full',\n        sticky && ['tw:sticky tw:top-0 tw:z-20 tw:bg-background', STICKY_CHROME_BLEED],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {sticky && (\n        <div\n          aria-hidden\n          className=\"tw:pointer-events-none tw:absolute tw:inset-x-0 tw:top-full tw:h-6 tw:bg-linear-to-b tw:from-background tw:to-[rgb(var(--background)/0)]\"\n        />\n      )}\n    </header>\n  );\n};\n\nconst Tabs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:w-full tw:items-center tw:border-b tw:border-border', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\ntype ContentProps = ComponentProps<'div'> & {\n  nav?: ReactNode;\n};\n\nconst scrollParent = (from: HTMLElement): HTMLElement | null => {\n  for (let el = from.parentElement; el; el = el.parentElement) {\n    if (/auto|scroll/.test(getComputedStyle(el).overflowY)) return el;\n  }\n\n  return null;\n};\n\nconst useAvailableHeight = () => {\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const row = rowRef.current;\n\n    if (!row || typeof ResizeObserver === 'undefined') return;\n\n    const scroller = scrollParent(row);\n\n    const publish = () => {\n      const top = row.getBoundingClientRect().top + (scroller?.scrollTop ?? window.scrollY);\n      const room = scroller\n        ? scroller.clientHeight - (top - scroller.getBoundingClientRect().top)\n        : window.innerHeight - top;\n\n      row.style.setProperty('--section-nav-available', `${Math.max(0, Math.round(room))}px`);\n    };\n\n    const observer = new ResizeObserver(publish);\n\n    observer.observe(row);\n    if (scroller) observer.observe(scroller);\n    publish();\n\n    return () => observer.disconnect();\n  }, []);\n\n  return rowRef;\n};\n\nconst Content = ({ ref, className, nav, children, ...props }: ContentProps) => {\n  const rowRef = useAvailableHeight();\n\n  if (!nav) {\n    return (\n      <div\n        ref={ref}\n        className={cn('tw:flex tw:w-full tw:flex-1 tw:flex-col', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'tw:group/page-layout-content tw:flex tw:w-full tw:flex-1 tw:flex-col',\n        SECTION_NAV_CONTAINER,\n        className,\n      )}\n      {...props}\n    >\n      <div\n        ref={rowRef}\n        className=\"tw:flex tw:w-full tw:@[640px]/section-nav:flex-row tw:@[640px]/section-nav:gap-8 tw:@max-[640px]/section-nav:flex-col tw:@max-[640px]/section-nav:gap-4\"\n      >\n        <div\n          data-slot=\"page-layout-nav\"\n          className=\"tw:sticky tw:top-[calc(var(--page-header-height,0px)+1rem)] tw:z-10 tw:shrink-0 tw:self-start tw:@[640px]/section-nav:max-h-[var(--section-nav-available,100dvh)] tw:@[640px]/section-nav:w-64 tw:@[640px]/section-nav:overflow-y-auto tw:@[640px]/section-nav:supports-[animation-timeline:scroll()]:scroll-fade-y tw:@max-[640px]/section-nav:w-full tw:@max-[640px]/section-nav:bg-background tw:@max-[640px]/section-nav:before:absolute tw:@max-[640px]/section-nav:before:inset-x-[-0.5rem] tw:@max-[640px]/section-nav:before:top-[-1rem] tw:@max-[640px]/section-nav:before:bottom-0 tw:@max-[640px]/section-nav:before:-z-10 tw:@max-[640px]/section-nav:before:bg-background tw:@max-[640px]/section-nav:after:pointer-events-none tw:@max-[640px]/section-nav:after:absolute tw:@max-[640px]/section-nav:after:inset-x-0 tw:@max-[640px]/section-nav:after:top-full tw:@max-[640px]/section-nav:after:h-6 tw:@max-[640px]/section-nav:after:bg-linear-to-b tw:@max-[640px]/section-nav:after:from-background tw:@max-[640px]/section-nav:after:to-[rgb(var(--background)/0)]\"\n        >\n          {nav}\n        </div>\n        <div\n          data-slot=\"page-layout-content-body\"\n          className=\"tw:[--page-content-sticky-top:var(--page-header-height,0px)] tw:min-w-0 tw:flex-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n\ntype FooterProps = ComponentProps<'footer'> & {\n  sticky?: boolean;\n};\n\nconst Footer = ({ ref, className, sticky = false, children, ...props }: FooterProps) => (\n  <footer\n    ref={ref}\n    className={cn(\n      'tw:flex tw:w-full tw:items-center tw:justify-end tw:gap-3 tw:border-t tw:border-border tw:bg-background tw:px-6 tw:py-4',\n      sticky && ['tw:sticky tw:bottom-0 tw:z-10', STICKY_CHROME_BLEED],\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </footer>\n);\n\n/**\n * Page chrome for every new kbc-ui page: max-width column + vertical rhythm + named slots.\n *\n * - No outer padding: the shell owns the gutter to the app frame.\n * - Not for modal bodies or embedded widgets; the `Sidebar` lives in the app shell.\n * - Search / filter pills go in `PageToolbar`, never in the header.\n *\n * @see RECIPES.md#list-detail\n * @see RECIPES.md#section-nav\n */\nexport const PageLayout = Object.assign(Root, {\n  /** Usually composed by `PageHeader.Detail`; for layouts that fit neither `PageHeader` variant. */\n  Breadcrumbs,\n  /** `sticky` also publishes its height as `--page-header-height`, which `Content nav` pins to. */\n  Header,\n  /** Routing-based tab rows; use `Tabs` / `TabsContent` inside, never a raw `<button>`. */\n  Tabs,\n  /** `nav` (a `SectionNav`) makes it a two-column layout. */\n  Content,\n  /** Form submit bar; `sticky` pins it to the viewport. */\n  Footer,\n});\n"],"mappings":"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"}

package/dist/{PageToolbar-C06RKIif.js → PageToolbar-B_e7HGva.js}

@@ -1,8 +1,8 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { ChevronDown, Plus, X } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-B21oVcPU.js";
-import { Popover } from "./Popover-CEk915I1.js";
-import { Badge } from "./Badge-Dz0cj6rj.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { ChevronDown, Plus, X } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.js";
+import { Popover } from "./Popover-BU7nGOv-.js";
+import { Badge } from "./Badge-Ba3epgcI.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-C06RKIif.js.map
+//# sourceMappingURL=PageToolbar-B_e7HGva.js.map

package/dist/{PageToolbar-C06RKIif.js.map → PageToolbar-B_e7HGva.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PageToolbar-C06RKIif.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-B_e7HGva.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/{Pagination-DH3f6LN0.js → Pagination-DDp6PRqf.js}

@@ -1,6 +1,6 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { ChevronLeft, ChevronRight, Ellipsis } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-B21oVcPU.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { ChevronLeft, ChevronRight, Ellipsis } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Pagination/PaginationButton.tsx
 const PaginationButton = ({ ref, active: isActive = false, className, children, size = "icon", ...props }) => /* @__PURE__ */ jsx(Button, {
@@ -11,7 +11,7 @@ const PaginationButton = ({ ref, active: isActive = false, className, children,
 	"data-slot": "pagination-link",
 	"aria-current": isActive ? "page" : void 0,
 	"data-active": isActive,
-	className: cn("tw:data-[active=true]:bg-accent", "tw:data-[active=true]:text-accent-foreground", "tw:data-[active=true]:border-accent", className),
+	className: cn("tw:data-[active=true]:bg-selected", "tw:data-[active=true]:text-selected-foreground", "tw:data-[active=true]:border-selected", className),
 	children
 });
 //#endregion
@@ -67,4 +67,4 @@ Pagination.Ellipsis = PaginationEllipsis;
 //#endregion
 export { Pagination };
 
-//# sourceMappingURL=Pagination-DH3f6LN0.js.map
+//# sourceMappingURL=Pagination-DDp6PRqf.js.map

package/dist/Pagination-DDp6PRqf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination-DDp6PRqf.js","names":[],"sources":["../src/components/Pagination/PaginationButton.tsx","../src/components/Pagination/PaginationContent.tsx","../src/components/Pagination/PaginationEllipsis.tsx","../src/components/Pagination/PaginationItem.tsx","../src/components/Pagination/PaginationNext.tsx","../src/components/Pagination/PaginationPrevious.tsx","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\ntype Props = {\n  active?: boolean;\n} & Omit<ComponentProps<typeof Button>, 'variant'>;\n\nexport const PaginationButton = ({\n  ref,\n  active: isActive = false,\n  className,\n  children,\n  size = 'icon',\n  ...props\n}: Props) => (\n  <Button\n    {...props}\n    ref={ref}\n    variant=\"invisible\"\n    size={size}\n    data-slot=\"pagination-link\"\n    aria-current={isActive ? 'page' : undefined}\n    data-active={isActive}\n    className={cn(\n      'tw:data-[active=true]:bg-selected',\n      'tw:data-[active=true]:text-selected-foreground',\n      'tw:data-[active=true]:border-selected',\n      className,\n    )}\n  >\n    {children}\n  </Button>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'ul'>;\n\nexport const PaginationContent = ({ className, ...props }: Props) => (\n  <ul\n    {...props}\n    className={cn('tw:flex', 'tw:flex-row', 'tw:items-center', 'tw:gap-1', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { Ellipsis } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const PaginationEllipsis = ({ className, ...props }: Props) => (\n  <span\n    aria-hidden=\"true\"\n    className={cn(\n      // layout\n      'tw:flex',\n      'tw:p-2.5',\n      'tw:items-center',\n      'tw:justify-center',\n\n      'tw:text-foreground',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n      className,\n    )}\n    {...props}\n  >\n    <Ellipsis />\n  </span>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const PaginationItem = ({ className, ...props }: Props) => (\n  <li className={cn('tw:list-none', className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\n\nimport { ChevronRight } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PaginationButton } from './PaginationButton';\n\ntype Props = ComponentProps<typeof PaginationButton>;\n\nexport const PaginationNext = ({ children, className, ...props }: Props) => (\n  <PaginationButton\n    {...props}\n    aria-label=\"Go to next page\"\n    size=\"medium\"\n    className={cn('tw:flex-row-reverse', className)}\n  >\n    <ChevronRight className=\"tw:size-5\" />\n    {children ?? 'Next'}\n  </PaginationButton>\n);\n","import type { ComponentProps } from 'react';\n\nimport { ChevronLeft } from '../../icons';\n\nimport { PaginationButton } from './PaginationButton';\n\ntype Props = ComponentProps<typeof PaginationButton>;\n\nexport const PaginationPrevious = ({ children, ...props }: Props) => (\n  <PaginationButton {...props} size=\"medium\" aria-label=\"Go to previous page\">\n    <ChevronLeft className=\"tw:size-5\" />\n    {children ?? 'Previous'}\n  </PaginationButton>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { PaginationButton } from './PaginationButton';\nimport { PaginationContent } from './PaginationContent';\nimport { PaginationEllipsis } from './PaginationEllipsis';\nimport { PaginationItem } from './PaginationItem';\nimport { PaginationNext } from './PaginationNext';\nimport { PaginationPrevious } from './PaginationPrevious';\n\ntype Props = ComponentProps<'nav'>;\n\nexport const Pagination = ({ className, ...props }: Props) => (\n  <nav\n    {...props}\n    aria-label=\"pagination\"\n    className={cn(\n      'tailwindcss-preflight',\n      'tw:mx-auto',\n      'tw:flex',\n      'tw:w-full',\n      'tw:justify-center',\n      className,\n    )}\n  />\n);\n\nPagination.Content = PaginationContent;\nPagination.Item = PaginationItem;\nPagination.Button = PaginationButton;\nPagination.Previous = PaginationPrevious;\nPagination.Next = PaginationNext;\nPagination.Ellipsis = PaginationEllipsis;\n"],"mappings":";;;;;AASA,MAAa,oBAAoB,EAC/B,KACA,QAAQ,WAAW,OACnB,WACA,UACA,OAAO,QACP,GAAG,YAEH,oBAAC,QAAD;CACE,GAAI;CACC;CACL,SAAQ;CACF;CACN,aAAU;CACV,gBAAc,WAAW,SAAS,KAAA;CAClC,eAAa;CACb,WAAW,GACT,qCACA,kDACA,yCACA,SACF;CAEC;AACK,CAAA;;;AC3BV,MAAa,qBAAqB,EAAE,WAAW,GAAG,YAChD,oBAAC,MAAD;CACE,GAAI;CACJ,WAAW,GAAG,WAAW,eAAe,mBAAmB,YAAY,SAAS;AACjF,CAAA;;;ACHH,MAAa,sBAAsB,EAAE,WAAW,GAAG,YACjD,oBAAC,QAAD;CACE,eAAY;CACZ,WAAW,GAET,WACA,YACA,mBACA,qBAEA,sBACA,gDACA,SACF;CACA,GAAI;CAEJ,UAAA,oBAAC,UAAD,CAAW,CAAA;AACP,CAAA;;;AClBR,MAAa,kBAAkB,EAAE,WAAW,GAAG,YAC7C,oBAAC,MAAD;CAAI,WAAW,GAAG,gBAAgB,SAAS;CAAG,GAAI;AAAQ,CAAA;;;ACE5D,MAAa,kBAAkB,EAAE,UAAU,WAAW,GAAG,YACvD,qBAAC,kBAAD;CACE,GAAI;CACJ,cAAW;CACX,MAAK;CACL,WAAW,GAAG,uBAAuB,SAAS;CAJhD,UAAA,CAME,oBAAC,cAAD,EAAc,WAAU,YAAa,CAAA,GACpC,YAAY,MACG;;;;ACVpB,MAAa,sBAAsB,EAAE,UAAU,GAAG,YAChD,qBAAC,kBAAD;CAAkB,GAAI;CAAO,MAAK;CAAS,cAAW;CAAtD,UAAA,CACE,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA,GACnC,YAAY,UACG;;;;ACCpB,MAAa,cAAc,EAAE,WAAW,GAAG,YACzC,oBAAC,OAAD;CACE,GAAI;CACJ,cAAW;CACX,WAAW,GACT,yBACA,cACA,WACA,aACA,qBACA,SACF;AACD,CAAA;AAGH,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,SAAS;AACpB,WAAW,WAAW;AACtB,WAAW,OAAO;AAClB,WAAW,WAAW"}

package/dist/{Popconfirm-Dhzn7sy6.js → Popconfirm-BgV6a0sl.js}

@@ -1,9 +1,9 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { Button } from "./Button-B21oVcPU.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { Button } from "./Button-D2JqBAq7.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { Popover } from "./Popover-CEk915I1.js";
-import { Slot } from "@radix-ui/react-slot";
+import { Popover } from "./Popover-BU7nGOv-.js";
 import { createContext, use, useMemo, useState } from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Popconfirm/context.ts
 const PopconfirmContext = createContext(null);
@@ -163,4 +163,4 @@ Popconfirm.Trigger = PopconfirmTrigger;
 //#endregion
 export { Popconfirm };
 
-//# sourceMappingURL=Popconfirm-Dhzn7sy6.js.map
+//# sourceMappingURL=Popconfirm-BgV6a0sl.js.map

package/dist/{Popconfirm-Dhzn7sy6.js.map → Popconfirm-BgV6a0sl.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Popconfirm-Dhzn7sy6.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-BgV6a0sl.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-CEk915I1.js → Popover-BU7nGOv-.js}

@@ -1,4 +1,4 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import { useArgoDesign } from "./context-U293r3v-.js";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
@@ -43,7 +43,7 @@ const variants = cva([
 	variants: {
 		variant: {
 			default: ["tw:rounded-md"],
-			argo: ["tw:rounded-2xl"]
+			argo: ["tw:rounded-popover"]
 		},
 		matchTriggerWidth: {
 			true: ["tw:w-[var(--radix-popover-trigger-width)]"],
@@ -86,4 +86,4 @@ Popover.Close = Close;
 //#endregion
 export { Popover };
 
-//# sourceMappingURL=Popover-CEk915I1.js.map
+//# sourceMappingURL=Popover-BU7nGOv-.js.map

package/dist/Popover-BU7nGOv-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover-BU7nGOv-.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';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nconst variants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/popover-content',\n    'tw:z-[1055]',\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: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      variant: 'default',\n    },\n    variants: {\n      // Only radius differs; colours live in the base array.\n      variant: {\n        default: ['tw:rounded-md'],\n        argo: ['tw:rounded-popover'],\n      },\n      matchTriggerWidth: {\n        true: ['tw:w-[var(--radix-popover-trigger-width)]'],\n        false: [],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<typeof Content> &\n  Omit<VariantProps<typeof variants>, 'variant'> & {\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  const effectiveVariant: NonNullable<VariantProps<typeof variants>['variant']> = useArgoDesign()\n    ? 'argo'\n    : 'default';\n  return (\n    <Portal container={container}>\n      <Content\n        ref={ref}\n        align={matchTriggerWidth ? 'start' : align}\n        sideOffset={sideOffset}\n        className={cn(variants({ className, matchTriggerWidth, variant: effectiveVariant }))}\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};\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":";;;;;;AAQA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CAIA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB;EACf,mBAAmB;EACnB,SAAS;CACX;CACA,UAAU;EAER,SAAS;GACP,SAAS,CAAC,eAAe;GACzB,MAAM,CAAC,oBAAoB;EAC7B;EACA,mBAAmB;GACjB,MAAM,CAAC,2CAA2C;GAClD,OAAO,CAAC;EACV;CACF;AACF,CACF;AAUA,MAAa,kBAAkB,EAC7B,KACA,WACA,QAAQ,UACR,aAAa,GACb,oBAAoB,OACpB,UACA,iBACA,WACA,GAAG,YACQ;CACX,MAAM,mBAA0E,cAAc,IAC1F,SACA;CACJ,OACE,oBAAC,QAAD;EAAmB;EACjB,UAAA,oBAAC,SAAD;GACO;GACL,OAAO,oBAAoB,UAAU;GACzB;GACZ,WAAW,GAAG,SAAS;IAAE;IAAW;IAAmB,SAAS;GAAiB,CAAC,CAAC;GACnF,kBAAkB,UAAU;IAE1B,MAAM,gBAAgB;IACtB,kBAAkB,KAAK;GACzB;GACA,GAAI;GAEH;EACM,CAAA;CACH,CAAA;AAEZ;;;AChHA,MAAa,WAAW,UAAiB,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;;;;AAK3D,QAAQ,UAAU;AAClB,QAAQ,UAAU;AAElB,QAAQ,SAAS;AACjB,QAAQ,QAAQ"}

package/dist/{RadioGroup-CYEp8Wnx.js → RadioGroup-C8EC3fqO.js}

@@ -1,10 +1,10 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip } from "./utils-Bd28bWgm.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { Tooltip } from "./utils-LQ4jJA-9.js";
 import { useArgoDesign } from "./context-U293r3v-.js";
-import { Circle } from "./icons-wcA70iQx.js";
-import { radioCircleVariants, radioIndicatorVariants, radioItemButtonVariants, radioVariants } from "./styles-DBGXH5-_.js";
+import { Circle } from "./icons-ZIeZXXS7.js";
+import { radioCircleVariants, radioIndicatorVariants, radioItemButtonVariants, radioVariants } from "./styles-BDA5rQz3.js";
 import { Separator } from "./internal/components/Separator.js";
-import { FieldBox } from "./FieldBox-D7DYtX_m.js";
+import { FieldBox } from "./FieldBox-BrxLkY9C.js";
 import { createContext, use, useId } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -117,4 +117,4 @@ RadioGroup.Separator = RadioGroupSeparator;
 //#endregion
 export { RadioGroup };
 
-//# sourceMappingURL=RadioGroup-CYEp8Wnx.js.map
+//# sourceMappingURL=RadioGroup-C8EC3fqO.js.map

package/dist/{RadioGroup-CYEp8Wnx.js.map → RadioGroup-C8EC3fqO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-CYEp8Wnx.js","names":[],"sources":["../src/components/RadioGroup/context.ts","../src/components/RadioGroup/Radio.tsx","../src/components/RadioGroup/RadioGroupItemButton.tsx","../src/components/RadioGroup/RadioGroupItem.tsx","../src/components/RadioGroup/RadioGroupSeparator.tsx","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nexport type Variant = 'radio' | 'button' | 'radio-block';\nexport type Orientation = 'vertical' | 'horizontal';\n\nconst RadioGroupContext = createContext<{\n  variant: Variant;\n  orientation: Orientation;\n}>({\n  variant: 'radio',\n  orientation: 'horizontal',\n});\n\nexport const RadioGroupProvider = RadioGroupContext;\n\nexport const useRadioGroupContext = () => use(RadioGroupContext);\n","import type { ComponentProps } from 'react';\nimport { Indicator, Item } from '@radix-ui/react-radio-group';\n\nimport { Circle } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioCircleVariants, radioIndicatorVariants, radioVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const Radio = ({ className, styleVariant = 'default', ...props }: Props) => (\n  <Item\n    {...props}\n    className={cn(\n      radioCircleVariants({ variant: styleVariant }),\n      radioVariants({ variant: styleVariant }),\n      className,\n    )}\n  >\n    <Indicator className={cn('tw:flex', 'tw:items-center', 'tw:justify-center')}>\n      {/* Lucide Circle is stroke-only — force fill to match the stroke (currentColor)\n          so the indicator reads as a solid dot. */}\n      <Circle className={radioIndicatorVariants({ variant: styleVariant })} />\n    </Indicator>\n  </Item>\n);\n","import type { ComponentProps } from 'react';\nimport { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioItemButtonVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const RadioGroupItemButton = ({\n  ref,\n  className,\n  children,\n  styleVariant = 'default',\n  ...props\n}: Props) => (\n  <Item\n    ref={ref}\n    {...props}\n    className={cn(radioItemButtonVariants({ variant: styleVariant }), className)}\n  >\n    {children}\n  </Item>\n);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\nimport { FieldBox } from '../FieldBox';\nimport { useArgoDesign } from '../ThemeProvider/context';\nimport type { Props as TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\nimport { useRadioGroupContext } from './context';\nimport { Radio } from './Radio';\nimport { RadioGroupItemButton } from './RadioGroupItemButton';\n\ntype ItemProps = Omit<ComponentProps<typeof Item>, 'asChild' | 'value'>;\n\ntype Props<T extends string = string> = ItemProps & {\n  value: T;\n  tooltip?: ReactNode;\n  tooltipVariant?: TooltipProps['variant'];\n  tooltipPlacement?: TooltipProps['placement'];\n  description?: ReactNode;\n};\n\nexport const RadioGroupItem = <T extends string = string>({\n  children,\n  className,\n  tooltip,\n  tooltipVariant,\n  tooltipPlacement,\n  description,\n  ...props\n}: Props<T>) => {\n  const { variant } = useRadioGroupContext();\n  const styleVariant = useArgoDesign() ? 'argo' : 'default';\n  const id = useId();\n\n  const item = (() => {\n    if (variant === 'button')\n      return (\n        <RadioGroupItemButton styleVariant={styleVariant} {...props} className={className}>\n          {children}\n        </RadioGroupItemButton>\n      );\n\n    return (\n      <FieldBox\n        variant={variant === 'radio-block' ? 'boxed' : 'default'}\n        htmlFor={id}\n        control={<Radio styleVariant={styleVariant} {...props} id={id} />}\n        className={cn(variant === 'radio-block' && 'tw:flex-1', className)}\n      >\n        <FieldBox.Title>{children}</FieldBox.Title>\n        {description && <FieldBox.Description>{description}</FieldBox.Description>}\n      </FieldBox>\n    );\n  })();\n\n  if (!tooltip) {\n    return item;\n  }\n\n  return (\n    <Tooltip tooltip={tooltip} variant={tooltipVariant} placement={tooltipPlacement} triggerAsChild>\n      {item}\n    </Tooltip>\n  );\n};\n","import { Separator } from '../Separator';\n\nimport { useRadioGroupContext } from './context';\n\nexport const RadioGroupSeparator = () => {\n  const { orientation } = useRadioGroupContext();\n  const invertedOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n  const size = orientation === 'horizontal' ? '1/2' : 'full';\n  const className = orientation === 'horizontal' ? 'tw:mx-2' : 'tw:my-2';\n\n  return <Separator orientation={invertedOrientation} size={size} className={className} />;\n};\n","import type { ComponentProps } from 'react';\nimport * as RRadioGroup from '@radix-ui/react-radio-group';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport type { Orientation, Variant } from './context';\nimport { RadioGroupProvider } from './context';\nimport { RadioGroupItem } from './RadioGroupItem';\nimport { RadioGroupSeparator } from './RadioGroupSeparator';\n\nconst radioGroupVariants = cva(['tw:flex'], {\n  variants: {\n    orientation: {\n      horizontal: ['tw:gap-2'],\n      vertical: ['tw:flex-col', 'tw:gap-3'],\n    },\n    variant: {\n      button: [],\n      radio: [],\n      'radio-block': ['tw:w-full'],\n    },\n  },\n});\n\ntype Props<Value> = {\n  variant?: Variant;\n  orientation?: Orientation;\n  onValueChange?: (value: Value) => void;\n  value?: Value | null;\n  defaultValue?: Value | null;\n} & Omit<\n  ComponentProps<typeof RRadioGroup.Root>,\n  'asChild' | 'orientation' | 'onValueChange' | 'onChange' | 'value' | 'defaultValue'\n>;\n\nexport const RadioGroup = <Value extends string = string>({\n  variant = 'radio',\n  className,\n  disabled = false,\n  orientation = 'horizontal',\n  onValueChange,\n  children,\n  value,\n  defaultValue,\n  ...props\n}: Props<Value>) => (\n  <RRadioGroup.Root\n    {...props}\n    onValueChange={onValueChange}\n    orientation={orientation}\n    className={cn(radioGroupVariants({ orientation, variant, className }))}\n    disabled={disabled}\n    value={value ?? void 0}\n    defaultValue={defaultValue ?? void 0}\n  >\n    <RadioGroupProvider value={{ variant, orientation }}>{children}</RadioGroupProvider>\n  </RRadioGroup.Root>\n);\n\nRadioGroup.Item = RadioGroupItem;\nRadioGroup.Separator = RadioGroupSeparator;\n"],"mappings":";;;;;;;;;;;;;AAKA,MAAM,oBAAoB,cAGvB;CACD,SAAS;CACT,aAAa;AACf,CAAC;AAED,MAAa,qBAAqB;AAElC,MAAa,6BAA6B,IAAI,iBAAiB;;;ACJ/D,MAAa,SAAS,EAAE,WAAW,eAAe,WAAW,GAAG,YAC9D,oBAAC,MAAD;CACE,GAAI;CACJ,WAAW,GACT,oBAAoB,EAAE,SAAS,aAAa,CAAC,GAC7C,cAAc,EAAE,SAAS,aAAa,CAAC,GACvC,SACF;CAEA,UAAA,oBAAC,WAAD;EAAW,WAAW,GAAG,WAAW,mBAAmB,mBAAmB;EAGxE,UAAA,oBAAC,QAAD,EAAQ,WAAW,uBAAuB,EAAE,SAAS,aAAa,CAAC,EAAI,CAAA;CAC9D,CAAA;AACP,CAAA;;;ACfR,MAAa,wBAAwB,EACnC,KACA,WACA,UACA,eAAe,WACf,GAAG,YAEH,oBAAC,MAAD;CACO;CACL,GAAI;CACJ,WAAW,GAAG,wBAAwB,EAAE,SAAS,aAAa,CAAC,GAAG,SAAS;CAE1E;AACG,CAAA;;;ACCR,MAAa,kBAA6C,EACxD,UACA,WACA,SACA,gBACA,kBACA,aACA,GAAG,YACW;CACd,MAAM,EAAE,YAAY,qBAAqB;CACzC,MAAM,eAAe,cAAc,IAAI,SAAS;CAChD,MAAM,KAAK,MAAM;CAEjB,MAAM,cAAc;EAClB,IAAI,YAAY,UACd,OACE,oBAAC,sBAAD;GAAoC;GAAc,GAAI;GAAkB;GACrE;EACmB,CAAA;EAG1B,OACE,qBAAC,UAAD;GACE,SAAS,YAAY,gBAAgB,UAAU;GAC/C,SAAS;GACT,SAAS,oBAAC,OAAD;IAAqB;IAAc,GAAI;IAAW;GAAK,CAAA;GAChE,WAAW,GAAG,YAAY,iBAAiB,aAAa,SAAS;GAJnE,UAAA,CAME,oBAAC,SAAS,OAAV,EAAiB,SAAyB,CAAA,GACzC,eAAe,oBAAC,SAAS,aAAV,EAAA,UAAuB,YAAkC,CAAA,CACjE;;CAEd,EAAA,CAAG;CAEH,IAAI,CAAC,SACH,OAAO;CAGT,OACE,oBAAC,SAAD;EAAkB;EAAS,SAAS;EAAgB,WAAW;EAAkB,gBAAA;EAC9E,UAAA;CACM,CAAA;AAEb;;;AC/DA,MAAa,4BAA4B;CACvC,MAAM,EAAE,gBAAgB,qBAAqB;CAK7C,OAAO,oBAAC,WAAD;EAAW,aAJU,gBAAgB,eAAe,aAAa;EAIpB,MAHvC,gBAAgB,eAAe,QAAQ;EAGY,WAF9C,gBAAgB,eAAe,YAAY;CAE0B,CAAA;AACzF;;;ACAA,MAAM,qBAAqB,IAAI,CAAC,SAAS,GAAG,EAC1C,UAAU;CACR,aAAa;EACX,YAAY,CAAC,UAAU;EACvB,UAAU,CAAC,eAAe,UAAU;CACtC;CACA,SAAS;EACP,QAAQ,CAAC;EACT,OAAO,CAAC;EACR,eAAe,CAAC,WAAW;CAC7B;AACF,EACF,CAAC;AAaD,MAAa,cAA6C,EACxD,UAAU,SACV,WACA,WAAW,OACX,cAAc,cACd,eACA,UACA,OACA,cACA,GAAG,YAEH,oBAAC,YAAY,MAAb;CACE,GAAI;CACW;CACF;CACb,WAAW,GAAG,mBAAmB;EAAE;EAAa;EAAS;CAAU,CAAC,CAAC;CAC3D;CACV,OAAO,SAAS,KAAK;CACrB,cAAc,gBAAgB,KAAK;CAEnC,UAAA,oBAAC,oBAAD;EAAoB,OAAO;GAAE;GAAS;EAAY;EAAI;CAA6B,CAAA;AACnE,CAAA;AAGpB,WAAW,OAAO;AAClB,WAAW,YAAY"}
+{"version":3,"file":"RadioGroup-C8EC3fqO.js","names":[],"sources":["../src/components/RadioGroup/context.ts","../src/components/RadioGroup/Radio.tsx","../src/components/RadioGroup/RadioGroupItemButton.tsx","../src/components/RadioGroup/RadioGroupItem.tsx","../src/components/RadioGroup/RadioGroupSeparator.tsx","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nexport type Variant = 'radio' | 'button' | 'radio-block';\nexport type Orientation = 'vertical' | 'horizontal';\n\nconst RadioGroupContext = createContext<{\n  variant: Variant;\n  orientation: Orientation;\n}>({\n  variant: 'radio',\n  orientation: 'horizontal',\n});\n\nexport const RadioGroupProvider = RadioGroupContext;\n\nexport const useRadioGroupContext = () => use(RadioGroupContext);\n","import type { ComponentProps } from 'react';\nimport { Indicator, Item } from '@radix-ui/react-radio-group';\n\nimport { Circle } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioCircleVariants, radioIndicatorVariants, radioVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const Radio = ({ className, styleVariant = 'default', ...props }: Props) => (\n  <Item\n    {...props}\n    className={cn(\n      radioCircleVariants({ variant: styleVariant }),\n      radioVariants({ variant: styleVariant }),\n      className,\n    )}\n  >\n    <Indicator className={cn('tw:flex', 'tw:items-center', 'tw:justify-center')}>\n      {/* Lucide Circle is stroke-only — force fill to match the stroke (currentColor)\n          so the indicator reads as a solid dot. */}\n      <Circle className={radioIndicatorVariants({ variant: styleVariant })} />\n    </Indicator>\n  </Item>\n);\n","import type { ComponentProps } from 'react';\nimport { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioItemButtonVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const RadioGroupItemButton = ({\n  ref,\n  className,\n  children,\n  styleVariant = 'default',\n  ...props\n}: Props) => (\n  <Item\n    ref={ref}\n    {...props}\n    className={cn(radioItemButtonVariants({ variant: styleVariant }), className)}\n  >\n    {children}\n  </Item>\n);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\nimport { FieldBox } from '../FieldBox';\nimport { useArgoDesign } from '../ThemeProvider/context';\nimport type { Props as TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\nimport { useRadioGroupContext } from './context';\nimport { Radio } from './Radio';\nimport { RadioGroupItemButton } from './RadioGroupItemButton';\n\ntype ItemProps = Omit<ComponentProps<typeof Item>, 'asChild' | 'value'>;\n\ntype Props<T extends string = string> = ItemProps & {\n  value: T;\n  tooltip?: ReactNode;\n  tooltipVariant?: TooltipProps['variant'];\n  tooltipPlacement?: TooltipProps['placement'];\n  description?: ReactNode;\n};\n\nexport const RadioGroupItem = <T extends string = string>({\n  children,\n  className,\n  tooltip,\n  tooltipVariant,\n  tooltipPlacement,\n  description,\n  ...props\n}: Props<T>) => {\n  const { variant } = useRadioGroupContext();\n  const styleVariant = useArgoDesign() ? 'argo' : 'default';\n  const id = useId();\n\n  const item = (() => {\n    if (variant === 'button')\n      return (\n        <RadioGroupItemButton styleVariant={styleVariant} {...props} className={className}>\n          {children}\n        </RadioGroupItemButton>\n      );\n\n    return (\n      <FieldBox\n        variant={variant === 'radio-block' ? 'boxed' : 'default'}\n        htmlFor={id}\n        control={<Radio styleVariant={styleVariant} {...props} id={id} />}\n        className={cn(variant === 'radio-block' && 'tw:flex-1', className)}\n      >\n        <FieldBox.Title>{children}</FieldBox.Title>\n        {description && <FieldBox.Description>{description}</FieldBox.Description>}\n      </FieldBox>\n    );\n  })();\n\n  if (!tooltip) {\n    return item;\n  }\n\n  return (\n    <Tooltip tooltip={tooltip} variant={tooltipVariant} placement={tooltipPlacement} triggerAsChild>\n      {item}\n    </Tooltip>\n  );\n};\n","import { Separator } from '../Separator';\n\nimport { useRadioGroupContext } from './context';\n\nexport const RadioGroupSeparator = () => {\n  const { orientation } = useRadioGroupContext();\n  const invertedOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n  const size = orientation === 'horizontal' ? '1/2' : 'full';\n  const className = orientation === 'horizontal' ? 'tw:mx-2' : 'tw:my-2';\n\n  return <Separator orientation={invertedOrientation} size={size} className={className} />;\n};\n","import type { ComponentProps } from 'react';\nimport * as RRadioGroup from '@radix-ui/react-radio-group';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport type { Orientation, Variant } from './context';\nimport { RadioGroupProvider } from './context';\nimport { RadioGroupItem } from './RadioGroupItem';\nimport { RadioGroupSeparator } from './RadioGroupSeparator';\n\nconst radioGroupVariants = cva(['tw:flex'], {\n  variants: {\n    orientation: {\n      horizontal: ['tw:gap-2'],\n      vertical: ['tw:flex-col', 'tw:gap-3'],\n    },\n    variant: {\n      button: [],\n      radio: [],\n      'radio-block': ['tw:w-full'],\n    },\n  },\n});\n\ntype Props<Value> = {\n  variant?: Variant;\n  orientation?: Orientation;\n  onValueChange?: (value: Value) => void;\n  value?: Value | null;\n  defaultValue?: Value | null;\n} & Omit<\n  ComponentProps<typeof RRadioGroup.Root>,\n  'asChild' | 'orientation' | 'onValueChange' | 'onChange' | 'value' | 'defaultValue'\n>;\n\nexport const RadioGroup = <Value extends string = string>({\n  variant = 'radio',\n  className,\n  disabled = false,\n  orientation = 'horizontal',\n  onValueChange,\n  children,\n  value,\n  defaultValue,\n  ...props\n}: Props<Value>) => (\n  <RRadioGroup.Root\n    {...props}\n    onValueChange={onValueChange}\n    orientation={orientation}\n    className={cn(radioGroupVariants({ orientation, variant, className }))}\n    disabled={disabled}\n    value={value ?? void 0}\n    defaultValue={defaultValue ?? void 0}\n  >\n    <RadioGroupProvider value={{ variant, orientation }}>{children}</RadioGroupProvider>\n  </RRadioGroup.Root>\n);\n\nRadioGroup.Item = RadioGroupItem;\nRadioGroup.Separator = RadioGroupSeparator;\n"],"mappings":";;;;;;;;;;;;;AAKA,MAAM,oBAAoB,cAGvB;CACD,SAAS;CACT,aAAa;AACf,CAAC;AAED,MAAa,qBAAqB;AAElC,MAAa,6BAA6B,IAAI,iBAAiB;;;ACJ/D,MAAa,SAAS,EAAE,WAAW,eAAe,WAAW,GAAG,YAC9D,oBAAC,MAAD;CACE,GAAI;CACJ,WAAW,GACT,oBAAoB,EAAE,SAAS,aAAa,CAAC,GAC7C,cAAc,EAAE,SAAS,aAAa,CAAC,GACvC,SACF;CAEA,UAAA,oBAAC,WAAD;EAAW,WAAW,GAAG,WAAW,mBAAmB,mBAAmB;EAGxE,UAAA,oBAAC,QAAD,EAAQ,WAAW,uBAAuB,EAAE,SAAS,aAAa,CAAC,EAAI,CAAA;CAC9D,CAAA;AACP,CAAA;;;ACfR,MAAa,wBAAwB,EACnC,KACA,WACA,UACA,eAAe,WACf,GAAG,YAEH,oBAAC,MAAD;CACO;CACL,GAAI;CACJ,WAAW,GAAG,wBAAwB,EAAE,SAAS,aAAa,CAAC,GAAG,SAAS;CAE1E;AACG,CAAA;;;ACCR,MAAa,kBAA6C,EACxD,UACA,WACA,SACA,gBACA,kBACA,aACA,GAAG,YACW;CACd,MAAM,EAAE,YAAY,qBAAqB;CACzC,MAAM,eAAe,cAAc,IAAI,SAAS;CAChD,MAAM,KAAK,MAAM;CAEjB,MAAM,cAAc;EAClB,IAAI,YAAY,UACd,OACE,oBAAC,sBAAD;GAAoC;GAAc,GAAI;GAAkB;GACrE;EACmB,CAAA;EAG1B,OACE,qBAAC,UAAD;GACE,SAAS,YAAY,gBAAgB,UAAU;GAC/C,SAAS;GACT,SAAS,oBAAC,OAAD;IAAqB;IAAc,GAAI;IAAW;GAAK,CAAA;GAChE,WAAW,GAAG,YAAY,iBAAiB,aAAa,SAAS;GAJnE,UAAA,CAME,oBAAC,SAAS,OAAV,EAAiB,SAAyB,CAAA,GACzC,eAAe,oBAAC,SAAS,aAAV,EAAA,UAAuB,YAAkC,CAAA,CACjE;;CAEd,EAAA,CAAG;CAEH,IAAI,CAAC,SACH,OAAO;CAGT,OACE,oBAAC,SAAD;EAAkB;EAAS,SAAS;EAAgB,WAAW;EAAkB,gBAAA;EAC9E,UAAA;CACM,CAAA;AAEb;;;AC/DA,MAAa,4BAA4B;CACvC,MAAM,EAAE,gBAAgB,qBAAqB;CAK7C,OAAO,oBAAC,WAAD;EAAW,aAJU,gBAAgB,eAAe,aAAa;EAIpB,MAHvC,gBAAgB,eAAe,QAAQ;EAGY,WAF9C,gBAAgB,eAAe,YAAY;CAE0B,CAAA;AACzF;;;ACAA,MAAM,qBAAqB,IAAI,CAAC,SAAS,GAAG,EAC1C,UAAU;CACR,aAAa;EACX,YAAY,CAAC,UAAU;EACvB,UAAU,CAAC,eAAe,UAAU;CACtC;CACA,SAAS;EACP,QAAQ,CAAC;EACT,OAAO,CAAC;EACR,eAAe,CAAC,WAAW;CAC7B;AACF,EACF,CAAC;AAaD,MAAa,cAA6C,EACxD,UAAU,SACV,WACA,WAAW,OACX,cAAc,cACd,eACA,UACA,OACA,cACA,GAAG,YAEH,oBAAC,YAAY,MAAb;CACE,GAAI;CACW;CACF;CACb,WAAW,GAAG,mBAAmB;EAAE;EAAa;EAAS;CAAU,CAAC,CAAC;CAC3D;CACV,OAAO,SAAS,KAAK;CACrB,cAAc,gBAAgB,KAAK;CAEnC,UAAA,oBAAC,oBAAD;EAAoB,OAAO;GAAE;GAAS;EAAY;EAAI;CAA6B,CAAA;AACnE,CAAA;AAGpB,WAAW,OAAO;AAClB,WAAW,YAAY"}

package/dist/{Resizable-D3vYToZH.js → Resizable-D8zs0kcq.js}

@@ -1,4 +1,4 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 import { Group, Panel as ResizablePanel, Separator, useDefaultLayout } from "react-resizable-panels";
@@ -49,4 +49,4 @@ const ResizablePanelGroup = ({ className, orientation = "horizontal", ...props }
 //#endregion
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup, useDefaultLayout };
 
-//# sourceMappingURL=Resizable-D3vYToZH.js.map
+//# sourceMappingURL=Resizable-D8zs0kcq.js.map

package/dist/{Resizable-D3vYToZH.js.map → Resizable-D8zs0kcq.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Resizable-D3vYToZH.js","names":[],"sources":["../src/components/Resizable/ResizableHandle.tsx","../src/components/Resizable/ResizablePanelGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Separator } from 'react-resizable-panels';\nimport { cva } from 'class-variance-authority';\n\n// v4 renders the separator with `aria-orientation`: a separator between horizontally-arranged\n// panels is vertical (default here); one between vertically-stacked panels is horizontal.\nconst resizableHandleVariants = cva([\n  // base styles\n  'tw:bg-border',\n  'tw:relative',\n  'tw:flex',\n  'tw:w-px',\n  'tw:items-center',\n  'tw:justify-center',\n\n  // focus styles\n  'tw:focus-visible:ring-ring',\n  'tw:focus-visible:ring-1',\n  'tw:focus-visible:ring-offset-1',\n  'tw:focus-visible:ring-offset-ring-offset',\n  'tw:focus-visible:outline-hidden',\n\n  // after pseudo-element for horizontal\n  'tw:after:absolute',\n  'tw:after:inset-y-0',\n  'tw:after:left-1/2',\n  'tw:after:w-1',\n  'tw:after:-translate-x-1/2',\n\n  // horizontal separator (vertical panel group): center a full-width 4px hit target;\n  // top-1/2 + bottom-auto override the base inset-y-0 so the height takes effect\n  'tw:aria-[orientation=horizontal]:h-px',\n  'tw:aria-[orientation=horizontal]:w-full',\n  'tw:aria-[orientation=horizontal]:after:left-0',\n  'tw:aria-[orientation=horizontal]:after:top-1/2',\n  'tw:aria-[orientation=horizontal]:after:bottom-auto',\n  'tw:aria-[orientation=horizontal]:after:h-1',\n  'tw:aria-[orientation=horizontal]:after:w-full',\n  'tw:aria-[orientation=horizontal]:after:translate-x-0',\n  'tw:aria-[orientation=horizontal]:after:-translate-y-1/2',\n\n  // handle icon rotation for horizontal separator\n  'tw:[&[aria-orientation=horizontal]>div]:rotate-90',\n]);\n\nexport const ResizableHandle = ({ className, ...props }: ComponentProps<typeof Separator>) => {\n  return <Separator className={resizableHandleVariants({ className })} {...props} />;\n};\n","import type { ComponentProps } from 'react';\nimport { Group } from 'react-resizable-panels';\n\nimport { cn } from '../../utils';\n\nexport { useDefaultLayout } from 'react-resizable-panels';\n\nexport const ResizablePanelGroup = ({\n  className,\n  orientation = 'horizontal',\n  ...props\n}: ComponentProps<typeof Group>) => {\n  return (\n    <Group\n      orientation={orientation}\n      className={cn(\n        'tw:flex tw:h-full tw:w-full',\n        orientation === 'vertical' && 'tw:flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;AAMA,MAAM,0BAA0B,IAAI;CAElC;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAIA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;AACF,CAAC;AAED,MAAa,mBAAmB,EAAE,WAAW,GAAG,YAA8C;CAC5F,OAAO,oBAAC,WAAD;EAAW,WAAW,wBAAwB,EAAE,UAAU,CAAC;EAAG,GAAI;CAAQ,CAAA;AACnF;;;ACxCA,MAAa,uBAAuB,EAClC,WACA,cAAc,cACd,GAAG,YAC+B;CAClC,OACE,oBAAC,OAAD;EACe;EACb,WAAW,GACT,+BACA,gBAAgB,cAAc,eAC9B,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"Resizable-D8zs0kcq.js","names":[],"sources":["../src/components/Resizable/ResizableHandle.tsx","../src/components/Resizable/ResizablePanelGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Separator } from 'react-resizable-panels';\nimport { cva } from 'class-variance-authority';\n\n// v4 renders the separator with `aria-orientation`: a separator between horizontally-arranged\n// panels is vertical (default here); one between vertically-stacked panels is horizontal.\nconst resizableHandleVariants = cva([\n  // base styles\n  'tw:bg-border',\n  'tw:relative',\n  'tw:flex',\n  'tw:w-px',\n  'tw:items-center',\n  'tw:justify-center',\n\n  // focus styles\n  'tw:focus-visible:ring-ring',\n  'tw:focus-visible:ring-1',\n  'tw:focus-visible:ring-offset-1',\n  'tw:focus-visible:ring-offset-ring-offset',\n  'tw:focus-visible:outline-hidden',\n\n  // after pseudo-element for horizontal\n  'tw:after:absolute',\n  'tw:after:inset-y-0',\n  'tw:after:left-1/2',\n  'tw:after:w-1',\n  'tw:after:-translate-x-1/2',\n\n  // horizontal separator (vertical panel group): center a full-width 4px hit target;\n  // top-1/2 + bottom-auto override the base inset-y-0 so the height takes effect\n  'tw:aria-[orientation=horizontal]:h-px',\n  'tw:aria-[orientation=horizontal]:w-full',\n  'tw:aria-[orientation=horizontal]:after:left-0',\n  'tw:aria-[orientation=horizontal]:after:top-1/2',\n  'tw:aria-[orientation=horizontal]:after:bottom-auto',\n  'tw:aria-[orientation=horizontal]:after:h-1',\n  'tw:aria-[orientation=horizontal]:after:w-full',\n  'tw:aria-[orientation=horizontal]:after:translate-x-0',\n  'tw:aria-[orientation=horizontal]:after:-translate-y-1/2',\n\n  // handle icon rotation for horizontal separator\n  'tw:[&[aria-orientation=horizontal]>div]:rotate-90',\n]);\n\nexport const ResizableHandle = ({ className, ...props }: ComponentProps<typeof Separator>) => {\n  return <Separator className={resizableHandleVariants({ className })} {...props} />;\n};\n","import type { ComponentProps } from 'react';\nimport { Group } from 'react-resizable-panels';\n\nimport { cn } from '../../utils';\n\nexport { useDefaultLayout } from 'react-resizable-panels';\n\nexport const ResizablePanelGroup = ({\n  className,\n  orientation = 'horizontal',\n  ...props\n}: ComponentProps<typeof Group>) => {\n  return (\n    <Group\n      orientation={orientation}\n      className={cn(\n        'tw:flex tw:h-full tw:w-full',\n        orientation === 'vertical' && 'tw:flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;AAMA,MAAM,0BAA0B,IAAI;CAElC;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAIA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;AACF,CAAC;AAED,MAAa,mBAAmB,EAAE,WAAW,GAAG,YAA8C;CAC5F,OAAO,oBAAC,WAAD;EAAW,WAAW,wBAAwB,EAAE,UAAU,CAAC;EAAG,GAAI;CAAQ,CAAA;AACnF;;;ACxCA,MAAa,uBAAuB,EAClC,WACA,cAAc,cACd,GAAG,YAC+B;CAClC,OACE,oBAAC,OAAD;EACe;EACb,WAAW,GACT,+BACA,gBAAgB,cAAc,eAC9B,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/{Search-DmkQo716.js → Search-aaUMI4ix.js}

@@ -1,6 +1,6 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { createPrefixedString, debounce, noop } from "./utils-Bd28bWgm.js";
-import { Search as Search$1, Sparkles, X } from "./icons-wcA70iQx.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { createPrefixedString, debounce, noop } from "./utils-LQ4jJA-9.js";
+import { Search as Search$1, Sparkles, X } from "./icons-ZIeZXXS7.js";
 import { useEffect, useMemo, useState } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -181,4 +181,4 @@ const SearchForm = ({ ref, onSubmit, name = "search-field", ...props }) => {
 //#endregion
 export { Search, SearchForm };
 
-//# sourceMappingURL=Search-DmkQo716.js.map
+//# sourceMappingURL=Search-aaUMI4ix.js.map