@keboola/design 11.4.0 → 11.5.0

package/dist/{Navbar-B2UsolVU.js → Navbar-Liy1TPI7.js}

@@ -1,7 +1,7 @@
 import { cn } from "./classNames-BzrkDnOD.js";
 import { Search } from "./icons-Cek151jC.js";
 import { ScrollArea } from "./internal/components/ScrollArea.js";
-import { BrandLogo } from "./BrandLogo-Dmi7jo21.js";
+import { BrandLogo } from "./BrandLogo-CoKBk4MI.js";
 import { Root, Slot, Slottable } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -280,10 +280,10 @@ const navbarClassnames = cva([
 			"tw:before:absolute",
 			"tw:before:left-0",
 			"tw:before:top-0",
-			"tw:before:data-[accent=blue]:bg-sidebar-primary",
-			"tw:before:data-[accent=purple]:bg-purple-500",
-			"tw:before:data-[accent=green]:bg-primary-500",
-			"tw:before:data-[accent=orange]:bg-warning-500"
+			"tw:data-[accent=blue]:before:bg-sidebar-primary",
+			"tw:data-[accent=purple]:before:bg-purple-500",
+			"tw:data-[accent=green]:before:bg-primary-500",
+			"tw:data-[accent=orange]:before:bg-warning-500"
 		],
 		false: ""
 	} }
@@ -322,4 +322,4 @@ Navbar.MenuAvatar = NavbarMenuAvatar;
 //#endregion
 export { Navbar };
 
-//# sourceMappingURL=Navbar-B2UsolVU.js.map
+//# sourceMappingURL=Navbar-Liy1TPI7.js.map

package/dist/{Navbar-B2UsolVU.js.map → Navbar-Liy1TPI7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Navbar-B2UsolVU.js","names":["variants","variants"],"sources":["../src/components/Navbar/NavbarContent.tsx","../src/components/Navbar/NavbarFooter.tsx","../src/components/Navbar/NavbarHeader.tsx","../src/components/Navbar/NavbarMenu.tsx","../src/components/Navbar/NavbarMenuAvatar.tsx","../src/components/Navbar/NavbarMenuItemAdornment.tsx","../src/components/Navbar/NavbarMenuButton.tsx","../src/components/Navbar/NavbarMenuItem.tsx","../src/components/Navbar/Navbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\nimport { ScrollArea } from '../ScrollArea';\n\ntype Props = {\n  className?: string;\n  children?: ReactNode;\n};\n\nexport const NavbarContent = ({ children, className }: Props) => (\n  <ScrollArea\n    type=\"auto\"\n    orientation=\"horizontal\"\n    className=\"tw:flex-1\"\n    scrollBarClassName=\"tw:h-1.5\"\n  >\n    <div className={cn('tw:flex', 'tw:py-1.5', className)}>{children}</div>\n  </ScrollArea>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n// `flex items-center`, not a bare block: this slot is documented to hold several\n// items (search, notifications, avatar). As a block they are inline-level boxes\n// aligned on a text baseline, so a button carrying an icon and a text-only button\n// sit at different heights — visibly off-centre against the bar. Centring them is\n// a no-op for the common single-`Navbar.Menu` child, and `gap` only applies\n// between siblings, so existing compositions keep their spacing.\nexport const NavbarFooter = ({ children, className, ...rest }: Props) => (\n  <div {...rest} className={cn('tw:flex tw:items-center tw:gap-2 tw:py-1.5', className)}>\n    {children}\n  </div>\n);\n","import { type ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { BrandLogo } from '../BrandLogo';\n\ntype Props = ComponentProps<'div'>;\n\nexport const NavbarHeader = ({ children, className, ...rest }: Props) => (\n  // BrandLogo reads the nearest ThemeProvider (or the default context) and\n  // renders null when the active brand ships no logo, so no provider gate needed.\n  <div {...rest} className={cn('tw:overflow-hidden', 'tw:py-1.5', className)}>\n    {children ?? <BrandLogo variant=\"wordmark\" className=\"tw:h-7\" />}\n  </div>\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\n// `tw:m-0` alongside `tw:p-0`: browsers give `<ul>` a default block margin. In a plain\n// app the scoped preflight resets it, but in kbc-ui the legacy Bootstrap layer (which sits\n// above the preflight so Bootstrap padding survives on its own elements) re-applies\n// `ul { margin-bottom: 10px }`, which then inflates this menu's height and pushes the whole\n// navbar row off-center. Resetting the margin explicitly (utilities beat the legacy layer)\n// keeps the row centered everywhere.\nconst variants = cva(\n  ['tw:m-0', 'tw:p-0', 'tw:flex', 'tw:items-center', 'tw:justify-center', 'tw:gap-2'],\n  {\n    variants: {\n      marker: {\n        none: [],\n        'forward-slash': [\n          // Style all li children with pseudo-element marker\n          'tw:[&_li]:flex',\n          'tw:[&_li]:items-center',\n          'tw:[&_li]:before:content-[\"/\"]',\n          'tw:[&_li]:before:text-border',\n          'tw:[&_li]:before:text-sm',\n          'tw:[&_li]:before:mr-0.5',\n          'tw:[&_li:not(:first-child)]:before:ml-0.5',\n        ],\n      },\n    },\n    defaultVariants: {\n      marker: 'none',\n    },\n  },\n);\n\ntype Props = ComponentProps<'ul'> & VariantProps<typeof variants>;\n\nexport const NavbarMenu = ({ className, marker, ...rest }: Props) => (\n  <ul {...rest} className={variants({ marker, className })} />\n);\n","import type { ComponentProps } from 'react';\nimport * as RadixAvatar from '@radix-ui/react-avatar';\nimport BoringAvatar from 'boring-avatars';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'> & {\n  src?: string;\n  alt?: string;\n};\n\nexport const NavbarMenuAvatar = ({ ref, className, type = 'button', src, alt, ...rest }: Props) => {\n  const altText = alt ?? 'Avatar';\n\n  return (\n    <button\n      {...rest}\n      ref={ref}\n      type={type}\n      className={cn(\n        'tw:flex',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:size-8',\n\n        'tw:aspect-square',\n        'tw:overflow-hidden',\n        'tw:shrink-0',\n\n        'tw:rounded-lg',\n        'tw:bg-transparent',\n        'tw:cursor-pointer',\n\n        // Disabled state\n        'tw:disabled:opacity-50',\n        'tw:disabled:cursor-not-allowed',\n\n        // Focus-visible (matches SidebarMenuButton exactly)\n        'tw:focus-visible:outline-hidden',\n        'tw:focus-visible:ring-2',\n        'tw:focus-visible:ring-sidebar-ring/50',\n        className,\n      )}\n    >\n      <RadixAvatar.Root>\n        <RadixAvatar.Image src={src} alt={altText} className=\"tw:size-full tw:object-cover\" />\n\n        <RadixAvatar.Fallback asChild>\n          <BoringAvatar\n            square\n            name={altText}\n            variant=\"beam\"\n            colors={['#1F8FFF', '#004787', '#28D8FF', '#925cff', '#A8C2E6']}\n            size={32}\n          />\n        </RadixAvatar.Fallback>\n      </RadixAvatar.Root>\n    </button>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst variants = cva(\n  [\n    'tw:flex',\n    'tw:justify-center',\n    'tw:items-center',\n\n    'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n    'tw:[&:not(svg)]:h-5',\n    'tw:[&:not(svg)]:min-w-5',\n\n    'tw:p-1',\n    'tw:aspect-square',\n    'tw:rounded-md',\n  ],\n  {\n    defaultVariants: { variant: 'icon-accent' },\n    variants: {\n      variant: {\n        icon: ['tw:text-sidebar-foreground', 'tw:[&_svg]:text-sidebar-foreground'],\n        'icon-emphasized': ['tw:text-white', 'tw:[&_svg]:text-white'],\n        'icon-accent': [\n          // color-aware accent styling\n          'tw:group-data-[accent=blue]/navbar:text-sidebar-primary',\n          'tw:group-data-[accent=blue]/navbar:[&_svg]:text-sidebar-primary',\n          'tw:group-data-[accent=purple]/navbar:text-purple-500',\n          'tw:group-data-[accent=purple]/navbar:[&_svg]:text-purple-500',\n          'tw:group-data-[accent=orange]/navbar:text-warning-500',\n          'tw:group-data-[accent=orange]/navbar:[&_svg]:text-warning-500',\n          'tw:group-data-[accent=green]/navbar:text-primary-500',\n          'tw:group-data-[accent=green]/navbar:[&_svg]:text-primary-500',\n        ],\n        'icon-accent-emphasized': [\n          'tw:text-white',\n          'tw:[&_svg]:text-white',\n\n          'tw:group-data-[accent=blue]/navbar:bg-sidebar-primary',\n          'tw:group-data-[accent=purple]/navbar:bg-purple-500',\n          'tw:group-data-[accent=orange]/navbar:bg-warning-500',\n          'tw:group-data-[accent=green]/navbar:bg-primary-500',\n        ],\n        'icon-button': ['tw:size-4', 'tw:!p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n        shortcut: ['tw:bg-muted', 'tw:text-sidebar-foreground', 'tw:ml-auto'],\n      },\n    },\n  },\n);\n\ntype Props = { asChild?: boolean } & ComponentProps<'span'> & VariantProps<typeof variants>;\n\nexport const NavbarMenuItemAdornment = ({\n  ref,\n  asChild = false,\n  className,\n  variant = 'icon-accent',\n  ...props\n}: Props) => {\n  const Comp = asChild ? Slot : 'span';\n\n  return <Comp {...props} ref={ref} className={variants({ variant, className })} />;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Search } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';\n\nconst variants = cva(\n  [\n    'tw:group/navbar-menu-button',\n    'tw:box-border',\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-2',\n    'tw:bg-transparent',\n\n    'tw:leading-9',\n\n    'tw:border',\n    'tw:rounded-lg',\n    'tw:whitespace-nowrap',\n    'tw:select-none',\n\n    // focus-visible\n    'tw:!outline-hidden',\n    'tw:focus-visible:ring-2',\n    'tw:focus-visible:ring-sidebar-ring/50',\n\n    // disabled\n    'tw:disabled:opacity-50',\n    'tw:disabled:hover:bg-transparent',\n    'tw:disabled:cursor-not-allowed',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:max-h-9',\n          'tw:border-transparent',\n          'tw:py-2',\n          'tw:px-1.5',\n          'tw:text-sidebar-foreground',\n          'tw:hover:bg-sidebar-accent',\n          'tw:aria-expanded:bg-sidebar-accent',\n\n          // Active page. Mirrors `Sidebar.MenuButton`, which styles `aria-current=\"page\"` — a top nav\n          // needs the same affordance, and without it a Navbar-shelled app cannot show where you are.\n          // `aria-current` rather than a prop: with `asChild` the slot is an <a>, and that is the\n          // attribute a router sets on an active link (TanStack's `Link` does it for free).\n          'tw:aria-[current=page]:bg-sidebar-accent',\n          'tw:aria-[current=page]:font-medium',\n        ],\n        emphasized: [\n          'tw:max-h-9',\n          'tw:border-transparent',\n          'tw:py-2',\n          'tw:px-1.5',\n\n          'tw:text-sidebar-foreground',\n          'tw:hover:bg-sidebar-accent',\n          'tw:aria-expanded:bg-sidebar-accent',\n\n          'tw:aria-[current=page]:bg-sidebar-accent',\n\n          'tw:font-semibold',\n        ],\n        icon: [\n          'tw:size-8',\n          'tw:aspect-square',\n          'tw:justify-center',\n          'tw:font-normal',\n          'tw:border-transparent',\n          'tw:text-primary',\n          'tw:[&_svg]:!text-primary',\n          'tw:hover:bg-sidebar-accent',\n          'tw:aria-expanded:bg-sidebar-accent',\n        ],\n        search: [\n          'tw:max-h-8',\n          'tw:min-w-52',\n          'tw:px-3',\n          'tw:py-1',\n          'tw:font-normal',\n          'tw:border-input',\n          'tw:text-muted-foreground',\n          'tw:[&_svg]:!text-muted-foreground',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'button'> & {\n  /** Optional leading-icon slot. Pass a Lucide icon node to render an adornment before children. */\n  icon?: ReactNode;\n  asChild?: boolean;\n} & VariantProps<typeof variants>;\n\nexport const NavbarMenuButton = ({\n  ref,\n  className,\n  type = 'button',\n  children,\n  icon,\n  asChild = false,\n  variant = 'default',\n  ...rest\n}: Props) => {\n  const Comp = asChild ? Root : 'button';\n  const isSearchVariant = variant === 'search';\n  const isEmphasizedVariant = variant === 'emphasized';\n  const adornment = isSearchVariant ? <Search /> : icon;\n\n  const adornmentVariant: ComponentProps<typeof NavbarMenuItemAdornment>['variant'] = (() => {\n    if (isSearchVariant || variant === 'icon') return 'icon-button';\n    if (isEmphasizedVariant) return 'icon-accent-emphasized';\n    return 'icon-accent';\n  })();\n\n  return (\n    <Comp\n      {...rest}\n      ref={ref}\n      type={type}\n      data-variant={variant}\n      className={cn(variants({ className, variant }))}\n    >\n      {adornment && (\n        <NavbarMenuItemAdornment variant={adornmentVariant}>{adornment}</NavbarMenuItemAdornment>\n      )}\n\n      <Slottable>{children}</Slottable>\n    </Comp>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const NavbarMenuItem = ({ className, ...rest }: Props) => (\n  <li {...rest} className={cn('tw:flex', 'tw:items-center', 'tw:gap-2', className)} />\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { NavbarContent } from './NavbarContent';\nimport { NavbarFooter } from './NavbarFooter';\nimport { NavbarHeader } from './NavbarHeader';\nimport { NavbarMenu } from './NavbarMenu';\nimport { NavbarMenuAvatar } from './NavbarMenuAvatar';\nimport { NavbarMenuButton } from './NavbarMenuButton';\nimport { NavbarMenuItem } from './NavbarMenuItem';\nimport { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';\n\nconst navbarClassnames = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/navbar',\n    'tw:sticky',\n    'tw:top-0',\n    'tw:z-50',\n    'tw:flex',\n    'tw:gap-2',\n    'tw:items-center',\n\n    // The left side is intentionally smaller to align the logo with the sidebar icons.\n    'tw:pl-2',\n    'tw:pr-3',\n\n    'tw:bg-sidebar',\n    // Pairs with `bg-sidebar` — required, not cosmetic.\n    // - Without it `currentColor` inside the bar resolves to the UA's black, invisible\n    //   on the dark scheme's sidebar surface.\n    // - Content inheriting it: plain text, and a `BrandLogo` whose SVG fills with\n    //   `currentColor`.\n    'tw:text-sidebar-foreground',\n    'tw:text-xs',\n    'tw:leading-4',\n  ],\n  {\n    defaultVariants: {\n      bordered: false,\n    },\n    variants: {\n      bordered: {\n        true: [\n          'tw:before:content',\n          'tw:before:h-0.5',\n          'tw:before:w-full',\n          'tw:before:absolute',\n          'tw:before:left-0',\n          'tw:before:top-0',\n          'tw:before:data-[accent=blue]:bg-sidebar-primary',\n          'tw:before:data-[accent=purple]:bg-purple-500',\n          'tw:before:data-[accent=green]:bg-primary-500',\n          'tw:before:data-[accent=orange]:bg-warning-500',\n        ],\n        false: '',\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'nav'> &\n  VariantProps<typeof navbarClassnames> & {\n    accent?: 'blue' | 'purple' | 'green' | 'orange';\n  };\n\n/**\n * Top navigation bar for the app shell. Host inside `<AppShell.Header>` to give a\n * top-nav (or `keboola-legacy` top-bar) layout its primary navigation, brand mark,\n * and account/actions area.\n *\n * **Composition:** `Navbar.Header` (left — brand / logo), `Navbar.Content` (center —\n * primary `Navbar.Menu` of `Navbar.MenuItem` + `Navbar.MenuButton`, horizontally\n * scrollable), and `Navbar.Footer` (right — search, notifications, `Navbar.MenuAvatar`).\n * `bordered` renders a top accent hairline whose color follows `accent`. Renders a\n * `<nav>` landmark with a default `aria-label` — override it via `aria-label` /\n * `aria-labelledby` when a page has more than one nav.\n *\n * @see AppShell — pair with `AppShell.Header`; the sidebar rail uses `Sidebar` instead.\n */\nexport const Navbar = ({ className, accent = 'blue', bordered = false, ...rest }: Props) => (\n  // A `<nav>` (not `<header>`): it's hosted inside `AppShell.Header`, which is\n  // already the `<header>` landmark — nesting a second `<header>` is invalid and\n  // muddies landmark navigation. `aria-label` comes first so a caller-supplied\n  // label in `...rest` overrides the default.\n  <nav\n    aria-label=\"Main navigation\"\n    {...rest}\n    data-accent={accent}\n    className={navbarClassnames({ bordered, className })}\n  />\n);\n\nNavbar.Header = NavbarHeader;\nNavbar.Footer = NavbarFooter;\nNavbar.Content = NavbarContent;\n\nNavbar.Menu = NavbarMenu;\nNavbar.MenuItem = NavbarMenuItem;\nNavbar.MenuButton = NavbarMenuButton;\nNavbar.MenuItemAdornment = NavbarMenuItemAdornment;\nNavbar.MenuAvatar = NavbarMenuAvatar;\n"],"mappings":";;;;;;;;;;AAUA,MAAa,iBAAiB,EAAE,UAAU,gBACxC,oBAAC,YAAD;CACE,MAAK;CACL,aAAY;CACZ,WAAU;CACV,oBAAmB;CAEnB,UAAA,oBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,aAAa,SAAS;EAAI;CAAc,CAAA;AAC5D,CAAA;;;ACNd,MAAa,gBAAgB,EAAE,UAAU,WAAW,GAAG,WACrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,8CAA8C,SAAS;CACjF;AACE,CAAA;;;ACRP,MAAa,gBAAgB,EAAE,UAAU,WAAW,GAAG,WAGrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,sBAAsB,aAAa,SAAS;CACtE,UAAA,YAAY,oBAAC,WAAD;EAAW,SAAQ;EAAW,WAAU;CAAU,CAAA;AAC5D,CAAA;;;ACFP,MAAMA,aAAW,IACf;CAAC;CAAU;CAAU;CAAW;CAAmB;CAAqB;AAAU,GAClF;CACE,UAAU,EACR,QAAQ;EACN,MAAM,CAAC;EACP,iBAAiB;GAEf;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,QAAQ,OACV;AACF,CACF;AAIA,MAAa,cAAc,EAAE,WAAW,QAAQ,GAAG,WACjD,oBAAC,MAAD;CAAI,GAAI;CAAM,WAAWA,WAAS;EAAE;EAAQ;CAAU,CAAC;AAAI,CAAA;;;AC1B7D,MAAa,oBAAoB,EAAE,KAAK,WAAW,OAAO,UAAU,KAAK,KAAK,GAAG,WAAkB;CACjG,MAAM,UAAU,OAAO;CAEvB,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACC;EACN,WAAW,GACT,WACA,mBACA,qBACA,aAEA,oBACA,sBACA,eAEA,iBACA,qBACA,qBAGA,0BACA,kCAGA,mCACA,2BACA,yCACA,SACF;EAEA,UAAA,qBAAC,YAAY,MAAb,EAAA,UAAA,CACE,oBAAC,YAAY,OAAb;GAAwB;GAAK,KAAK;GAAS,WAAU;EAAgC,CAAA,GAErF,oBAAC,YAAY,UAAb;GAAsB,SAAA;GACpB,UAAA,oBAAC,cAAD;IACE,QAAA;IACA,MAAM;IACN,SAAQ;IACR,QAAQ;KAAC;KAAW;KAAW;KAAW;KAAW;IAAS;IAC9D,MAAM;GACP,CAAA;EACmB,CAAA,CACN,EAAA,CAAA;CACZ,CAAA;AAEZ;;;ACtDA,MAAMC,aAAW,IACf;CACE;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,SAAS,cAAc;CAC1C,UAAU,EACR,SAAS;EACP,MAAM,CAAC,8BAA8B,oCAAoC;EACzE,mBAAmB,CAAC,iBAAiB,uBAAuB;EAC5D,eAAe;GAEb;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,0BAA0B;GACxB;GACA;GAEA;GACA;GACA;GACA;EACF;EACA,eAAe;GAAC;GAAa;GAAW;EAA4C;EACpF,UAAU;GAAC;GAAe;GAA8B;EAAY;CACtE,EACF;AACF,CACF;AAIA,MAAa,2BAA2B,EACtC,KACA,UAAU,OACV,WACA,UAAU,eACV,GAAG,YACQ;CAGX,OAAO,oBAFM,UAAU,OAAO,QAEvB;EAAM,GAAI;EAAY;EAAK,WAAWA,WAAS;GAAE;GAAS;EAAU,CAAC;CAAI,CAAA;AAClF;;;ACtDA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;GACP;GACA;GACA;GACA;GACA;GACA;GACA;GAMA;GACA;EACF;EACA,YAAY;GACV;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CACF;AAQA,MAAa,oBAAoB,EAC/B,KACA,WACA,OAAO,UACP,UACA,MACA,UAAU,OACV,UAAU,WACV,GAAG,WACQ;CACX,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,kBAAkB,YAAY;CACpC,MAAM,sBAAsB,YAAY;CACxC,MAAM,YAAY,kBAAkB,oBAAC,QAAD,CAAS,CAAA,IAAI;CAEjD,MAAM,0BAAqF;EACzF,IAAI,mBAAmB,YAAY,QAAQ,OAAO;EAClD,IAAI,qBAAqB,OAAO;EAChC,OAAO;CACT,EAAA,CAAG;CAEH,OACE,qBAAC,MAAD;EACE,GAAI;EACC;EACC;EACN,gBAAc;EACd,WAAW,GAAG,SAAS;GAAE;GAAW;EAAQ,CAAC,CAAC;EALhD,UAAA,CAOG,aACC,oBAAC,yBAAD;GAAyB,SAAS;GAAmB,UAAA;EAAmC,CAAA,GAG1F,oBAAC,WAAD,EAAY,SAAoB,CAAA,CAC5B;;AAEV;;;ACtIA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAC7C,oBAAC,MAAD;CAAI,GAAI;CAAM,WAAW,GAAG,WAAW,mBAAmB,YAAY,SAAS;AAAI,CAAA;;;ACMrF,MAAM,mBAAmB,IACvB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CAMA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,UAAU,MACZ;CACA,UAAU,EACR,UAAU;EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;CACT,EACF;AACF,CACF;;;;;;;;;;;;;;;AAqBA,MAAa,UAAU,EAAE,WAAW,SAAS,QAAQ,WAAW,OAAO,GAAG,WAKxE,oBAAC,OAAD;CACE,cAAW;CACX,GAAI;CACJ,eAAa;CACb,WAAW,iBAAiB;EAAE;EAAU;CAAU,CAAC;AACpD,CAAA;AAGH,OAAO,SAAS;AAChB,OAAO,SAAS;AAChB,OAAO,UAAU;AAEjB,OAAO,OAAO;AACd,OAAO,WAAW;AAClB,OAAO,aAAa;AACpB,OAAO,oBAAoB;AAC3B,OAAO,aAAa"}
+{"version":3,"file":"Navbar-Liy1TPI7.js","names":["variants","variants"],"sources":["../src/components/Navbar/NavbarContent.tsx","../src/components/Navbar/NavbarFooter.tsx","../src/components/Navbar/NavbarHeader.tsx","../src/components/Navbar/NavbarMenu.tsx","../src/components/Navbar/NavbarMenuAvatar.tsx","../src/components/Navbar/NavbarMenuItemAdornment.tsx","../src/components/Navbar/NavbarMenuButton.tsx","../src/components/Navbar/NavbarMenuItem.tsx","../src/components/Navbar/Navbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\nimport { ScrollArea } from '../ScrollArea';\n\ntype Props = {\n  className?: string;\n  children?: ReactNode;\n};\n\nexport const NavbarContent = ({ children, className }: Props) => (\n  <ScrollArea\n    type=\"auto\"\n    orientation=\"horizontal\"\n    className=\"tw:flex-1\"\n    scrollBarClassName=\"tw:h-1.5\"\n  >\n    <div className={cn('tw:flex', 'tw:py-1.5', className)}>{children}</div>\n  </ScrollArea>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n// `flex items-center`, not a bare block: this slot is documented to hold several\n// items (search, notifications, avatar). As a block they are inline-level boxes\n// aligned on a text baseline, so a button carrying an icon and a text-only button\n// sit at different heights — visibly off-centre against the bar. Centring them is\n// a no-op for the common single-`Navbar.Menu` child, and `gap` only applies\n// between siblings, so existing compositions keep their spacing.\nexport const NavbarFooter = ({ children, className, ...rest }: Props) => (\n  <div {...rest} className={cn('tw:flex tw:items-center tw:gap-2 tw:py-1.5', className)}>\n    {children}\n  </div>\n);\n","import { type ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { BrandLogo } from '../BrandLogo';\n\ntype Props = ComponentProps<'div'>;\n\nexport const NavbarHeader = ({ children, className, ...rest }: Props) => (\n  // BrandLogo reads the nearest ThemeProvider (or the default context) and\n  // renders null when the active brand ships no logo, so no provider gate needed.\n  <div {...rest} className={cn('tw:overflow-hidden', 'tw:py-1.5', className)}>\n    {children ?? <BrandLogo variant=\"wordmark\" className=\"tw:h-7\" />}\n  </div>\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\n// `tw:m-0` alongside `tw:p-0`: browsers give `<ul>` a default block margin. In a plain\n// app the scoped preflight resets it, but in kbc-ui the legacy Bootstrap layer (which sits\n// above the preflight so Bootstrap padding survives on its own elements) re-applies\n// `ul { margin-bottom: 10px }`, which then inflates this menu's height and pushes the whole\n// navbar row off-center. Resetting the margin explicitly (utilities beat the legacy layer)\n// keeps the row centered everywhere.\nconst variants = cva(\n  ['tw:m-0', 'tw:p-0', 'tw:flex', 'tw:items-center', 'tw:justify-center', 'tw:gap-2'],\n  {\n    variants: {\n      marker: {\n        none: [],\n        'forward-slash': [\n          // Style all li children with pseudo-element marker\n          'tw:[&_li]:flex',\n          'tw:[&_li]:items-center',\n          'tw:[&_li]:before:content-[\"/\"]',\n          'tw:[&_li]:before:text-border',\n          'tw:[&_li]:before:text-sm',\n          'tw:[&_li]:before:mr-0.5',\n          'tw:[&_li:not(:first-child)]:before:ml-0.5',\n        ],\n      },\n    },\n    defaultVariants: {\n      marker: 'none',\n    },\n  },\n);\n\ntype Props = ComponentProps<'ul'> & VariantProps<typeof variants>;\n\nexport const NavbarMenu = ({ className, marker, ...rest }: Props) => (\n  <ul {...rest} className={variants({ marker, className })} />\n);\n","import type { ComponentProps } from 'react';\nimport * as RadixAvatar from '@radix-ui/react-avatar';\nimport BoringAvatar from 'boring-avatars';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'> & {\n  src?: string;\n  alt?: string;\n};\n\nexport const NavbarMenuAvatar = ({ ref, className, type = 'button', src, alt, ...rest }: Props) => {\n  const altText = alt ?? 'Avatar';\n\n  return (\n    <button\n      {...rest}\n      ref={ref}\n      type={type}\n      className={cn(\n        'tw:flex',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:size-8',\n\n        'tw:aspect-square',\n        'tw:overflow-hidden',\n        'tw:shrink-0',\n\n        'tw:rounded-lg',\n        'tw:bg-transparent',\n        'tw:cursor-pointer',\n\n        // Disabled state\n        'tw:disabled:opacity-50',\n        'tw:disabled:cursor-not-allowed',\n\n        // Focus-visible (matches SidebarMenuButton exactly)\n        'tw:focus-visible:outline-hidden',\n        'tw:focus-visible:ring-2',\n        'tw:focus-visible:ring-sidebar-ring/50',\n        className,\n      )}\n    >\n      <RadixAvatar.Root>\n        <RadixAvatar.Image src={src} alt={altText} className=\"tw:size-full tw:object-cover\" />\n\n        <RadixAvatar.Fallback asChild>\n          <BoringAvatar\n            square\n            name={altText}\n            variant=\"beam\"\n            colors={['#1F8FFF', '#004787', '#28D8FF', '#925cff', '#A8C2E6']}\n            size={32}\n          />\n        </RadixAvatar.Fallback>\n      </RadixAvatar.Root>\n    </button>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst variants = cva(\n  [\n    'tw:flex',\n    'tw:justify-center',\n    'tw:items-center',\n\n    'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n    'tw:[&:not(svg)]:h-5',\n    'tw:[&:not(svg)]:min-w-5',\n\n    'tw:p-1',\n    'tw:aspect-square',\n    'tw:rounded-md',\n  ],\n  {\n    defaultVariants: { variant: 'icon-accent' },\n    variants: {\n      variant: {\n        icon: ['tw:text-sidebar-foreground', 'tw:[&_svg]:text-sidebar-foreground'],\n        'icon-emphasized': ['tw:text-white', 'tw:[&_svg]:text-white'],\n        'icon-accent': [\n          // color-aware accent styling\n          'tw:group-data-[accent=blue]/navbar:text-sidebar-primary',\n          'tw:group-data-[accent=blue]/navbar:[&_svg]:text-sidebar-primary',\n          'tw:group-data-[accent=purple]/navbar:text-purple-500',\n          'tw:group-data-[accent=purple]/navbar:[&_svg]:text-purple-500',\n          'tw:group-data-[accent=orange]/navbar:text-warning-500',\n          'tw:group-data-[accent=orange]/navbar:[&_svg]:text-warning-500',\n          'tw:group-data-[accent=green]/navbar:text-primary-500',\n          'tw:group-data-[accent=green]/navbar:[&_svg]:text-primary-500',\n        ],\n        'icon-accent-emphasized': [\n          'tw:text-white',\n          'tw:[&_svg]:text-white',\n\n          'tw:group-data-[accent=blue]/navbar:bg-sidebar-primary',\n          'tw:group-data-[accent=purple]/navbar:bg-purple-500',\n          'tw:group-data-[accent=orange]/navbar:bg-warning-500',\n          'tw:group-data-[accent=green]/navbar:bg-primary-500',\n        ],\n        'icon-button': ['tw:size-4', 'tw:!p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n        shortcut: ['tw:bg-muted', 'tw:text-sidebar-foreground', 'tw:ml-auto'],\n      },\n    },\n  },\n);\n\ntype Props = { asChild?: boolean } & ComponentProps<'span'> & VariantProps<typeof variants>;\n\nexport const NavbarMenuItemAdornment = ({\n  ref,\n  asChild = false,\n  className,\n  variant = 'icon-accent',\n  ...props\n}: Props) => {\n  const Comp = asChild ? Slot : 'span';\n\n  return <Comp {...props} ref={ref} className={variants({ variant, className })} />;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Search } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';\n\nconst variants = cva(\n  [\n    'tw:group/navbar-menu-button',\n    'tw:box-border',\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-2',\n    'tw:bg-transparent',\n\n    'tw:leading-9',\n\n    'tw:border',\n    'tw:rounded-lg',\n    'tw:whitespace-nowrap',\n    'tw:select-none',\n\n    // focus-visible\n    'tw:!outline-hidden',\n    'tw:focus-visible:ring-2',\n    'tw:focus-visible:ring-sidebar-ring/50',\n\n    // disabled\n    'tw:disabled:opacity-50',\n    'tw:disabled:hover:bg-transparent',\n    'tw:disabled:cursor-not-allowed',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:max-h-9',\n          'tw:border-transparent',\n          'tw:py-2',\n          'tw:px-1.5',\n          'tw:text-sidebar-foreground',\n          'tw:hover:bg-sidebar-accent',\n          'tw:aria-expanded:bg-sidebar-accent',\n\n          // Active page. Mirrors `Sidebar.MenuButton`, which styles `aria-current=\"page\"` — a top nav\n          // needs the same affordance, and without it a Navbar-shelled app cannot show where you are.\n          // `aria-current` rather than a prop: with `asChild` the slot is an <a>, and that is the\n          // attribute a router sets on an active link (TanStack's `Link` does it for free).\n          'tw:aria-[current=page]:bg-sidebar-accent',\n          'tw:aria-[current=page]:font-medium',\n        ],\n        emphasized: [\n          'tw:max-h-9',\n          'tw:border-transparent',\n          'tw:py-2',\n          'tw:px-1.5',\n\n          'tw:text-sidebar-foreground',\n          'tw:hover:bg-sidebar-accent',\n          'tw:aria-expanded:bg-sidebar-accent',\n\n          'tw:aria-[current=page]:bg-sidebar-accent',\n\n          'tw:font-semibold',\n        ],\n        icon: [\n          'tw:size-8',\n          'tw:aspect-square',\n          'tw:justify-center',\n          'tw:font-normal',\n          'tw:border-transparent',\n          'tw:text-primary',\n          'tw:[&_svg]:!text-primary',\n          'tw:hover:bg-sidebar-accent',\n          'tw:aria-expanded:bg-sidebar-accent',\n        ],\n        search: [\n          'tw:max-h-8',\n          'tw:min-w-52',\n          'tw:px-3',\n          'tw:py-1',\n          'tw:font-normal',\n          'tw:border-input',\n          'tw:text-muted-foreground',\n          'tw:[&_svg]:!text-muted-foreground',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'button'> & {\n  /** Optional leading-icon slot. Pass a Lucide icon node to render an adornment before children. */\n  icon?: ReactNode;\n  asChild?: boolean;\n} & VariantProps<typeof variants>;\n\nexport const NavbarMenuButton = ({\n  ref,\n  className,\n  type = 'button',\n  children,\n  icon,\n  asChild = false,\n  variant = 'default',\n  ...rest\n}: Props) => {\n  const Comp = asChild ? Root : 'button';\n  const isSearchVariant = variant === 'search';\n  const isEmphasizedVariant = variant === 'emphasized';\n  const adornment = isSearchVariant ? <Search /> : icon;\n\n  const adornmentVariant: ComponentProps<typeof NavbarMenuItemAdornment>['variant'] = (() => {\n    if (isSearchVariant || variant === 'icon') return 'icon-button';\n    if (isEmphasizedVariant) return 'icon-accent-emphasized';\n    return 'icon-accent';\n  })();\n\n  return (\n    <Comp\n      {...rest}\n      ref={ref}\n      type={type}\n      data-variant={variant}\n      className={cn(variants({ className, variant }))}\n    >\n      {adornment && (\n        <NavbarMenuItemAdornment variant={adornmentVariant}>{adornment}</NavbarMenuItemAdornment>\n      )}\n\n      <Slottable>{children}</Slottable>\n    </Comp>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const NavbarMenuItem = ({ className, ...rest }: Props) => (\n  <li {...rest} className={cn('tw:flex', 'tw:items-center', 'tw:gap-2', className)} />\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { NavbarContent } from './NavbarContent';\nimport { NavbarFooter } from './NavbarFooter';\nimport { NavbarHeader } from './NavbarHeader';\nimport { NavbarMenu } from './NavbarMenu';\nimport { NavbarMenuAvatar } from './NavbarMenuAvatar';\nimport { NavbarMenuButton } from './NavbarMenuButton';\nimport { NavbarMenuItem } from './NavbarMenuItem';\nimport { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';\n\nconst navbarClassnames = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/navbar',\n    'tw:sticky',\n    'tw:top-0',\n    'tw:z-50',\n    'tw:flex',\n    'tw:gap-2',\n    'tw:items-center',\n\n    // The left side is intentionally smaller to align the logo with the sidebar icons.\n    'tw:pl-2',\n    'tw:pr-3',\n\n    'tw:bg-sidebar',\n    // Pairs with `bg-sidebar` — required, not cosmetic.\n    // - Without it `currentColor` inside the bar resolves to the UA's black, invisible\n    //   on the dark scheme's sidebar surface.\n    // - Content inheriting it: plain text, and a `BrandLogo` whose SVG fills with\n    //   `currentColor`.\n    'tw:text-sidebar-foreground',\n    'tw:text-xs',\n    'tw:leading-4',\n  ],\n  {\n    defaultVariants: {\n      bordered: false,\n    },\n    variants: {\n      bordered: {\n        true: [\n          'tw:before:content',\n          'tw:before:h-0.5',\n          'tw:before:w-full',\n          'tw:before:absolute',\n          'tw:before:left-0',\n          'tw:before:top-0',\n          'tw:data-[accent=blue]:before:bg-sidebar-primary',\n          'tw:data-[accent=purple]:before:bg-purple-500',\n          'tw:data-[accent=green]:before:bg-primary-500',\n          'tw:data-[accent=orange]:before:bg-warning-500',\n        ],\n        false: '',\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'nav'> &\n  VariantProps<typeof navbarClassnames> & {\n    accent?: 'blue' | 'purple' | 'green' | 'orange';\n  };\n\n/**\n * Top navigation bar for the app shell. Host inside `<AppShell.Header>` to give a\n * top-nav (or `keboola-legacy` top-bar) layout its primary navigation, brand mark,\n * and account/actions area.\n *\n * **Composition:** `Navbar.Header` (left — brand / logo), `Navbar.Content` (center —\n * primary `Navbar.Menu` of `Navbar.MenuItem` + `Navbar.MenuButton`, horizontally\n * scrollable), and `Navbar.Footer` (right — search, notifications, `Navbar.MenuAvatar`).\n * `bordered` renders a top accent hairline whose color follows `accent`. Renders a\n * `<nav>` landmark with a default `aria-label` — override it via `aria-label` /\n * `aria-labelledby` when a page has more than one nav.\n *\n * @see AppShell — pair with `AppShell.Header`; the sidebar rail uses `Sidebar` instead.\n */\nexport const Navbar = ({ className, accent = 'blue', bordered = false, ...rest }: Props) => (\n  // A `<nav>` (not `<header>`): it's hosted inside `AppShell.Header`, which is\n  // already the `<header>` landmark — nesting a second `<header>` is invalid and\n  // muddies landmark navigation. `aria-label` comes first so a caller-supplied\n  // label in `...rest` overrides the default.\n  <nav\n    aria-label=\"Main navigation\"\n    {...rest}\n    data-accent={accent}\n    className={navbarClassnames({ bordered, className })}\n  />\n);\n\nNavbar.Header = NavbarHeader;\nNavbar.Footer = NavbarFooter;\nNavbar.Content = NavbarContent;\n\nNavbar.Menu = NavbarMenu;\nNavbar.MenuItem = NavbarMenuItem;\nNavbar.MenuButton = NavbarMenuButton;\nNavbar.MenuItemAdornment = NavbarMenuItemAdornment;\nNavbar.MenuAvatar = NavbarMenuAvatar;\n"],"mappings":";;;;;;;;;;AAUA,MAAa,iBAAiB,EAAE,UAAU,gBACxC,oBAAC,YAAD;CACE,MAAK;CACL,aAAY;CACZ,WAAU;CACV,oBAAmB;CAEnB,UAAA,oBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,aAAa,SAAS;EAAI;CAAc,CAAA;AAC5D,CAAA;;;ACNd,MAAa,gBAAgB,EAAE,UAAU,WAAW,GAAG,WACrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,8CAA8C,SAAS;CACjF;AACE,CAAA;;;ACRP,MAAa,gBAAgB,EAAE,UAAU,WAAW,GAAG,WAGrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,sBAAsB,aAAa,SAAS;CACtE,UAAA,YAAY,oBAAC,WAAD;EAAW,SAAQ;EAAW,WAAU;CAAU,CAAA;AAC5D,CAAA;;;ACFP,MAAMA,aAAW,IACf;CAAC;CAAU;CAAU;CAAW;CAAmB;CAAqB;AAAU,GAClF;CACE,UAAU,EACR,QAAQ;EACN,MAAM,CAAC;EACP,iBAAiB;GAEf;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,QAAQ,OACV;AACF,CACF;AAIA,MAAa,cAAc,EAAE,WAAW,QAAQ,GAAG,WACjD,oBAAC,MAAD;CAAI,GAAI;CAAM,WAAWA,WAAS;EAAE;EAAQ;CAAU,CAAC;AAAI,CAAA;;;AC1B7D,MAAa,oBAAoB,EAAE,KAAK,WAAW,OAAO,UAAU,KAAK,KAAK,GAAG,WAAkB;CACjG,MAAM,UAAU,OAAO;CAEvB,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACC;EACN,WAAW,GACT,WACA,mBACA,qBACA,aAEA,oBACA,sBACA,eAEA,iBACA,qBACA,qBAGA,0BACA,kCAGA,mCACA,2BACA,yCACA,SACF;EAEA,UAAA,qBAAC,YAAY,MAAb,EAAA,UAAA,CACE,oBAAC,YAAY,OAAb;GAAwB;GAAK,KAAK;GAAS,WAAU;EAAgC,CAAA,GAErF,oBAAC,YAAY,UAAb;GAAsB,SAAA;GACpB,UAAA,oBAAC,cAAD;IACE,QAAA;IACA,MAAM;IACN,SAAQ;IACR,QAAQ;KAAC;KAAW;KAAW;KAAW;KAAW;IAAS;IAC9D,MAAM;GACP,CAAA;EACmB,CAAA,CACN,EAAA,CAAA;CACZ,CAAA;AAEZ;;;ACtDA,MAAMC,aAAW,IACf;CACE;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,SAAS,cAAc;CAC1C,UAAU,EACR,SAAS;EACP,MAAM,CAAC,8BAA8B,oCAAoC;EACzE,mBAAmB,CAAC,iBAAiB,uBAAuB;EAC5D,eAAe;GAEb;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,0BAA0B;GACxB;GACA;GAEA;GACA;GACA;GACA;EACF;EACA,eAAe;GAAC;GAAa;GAAW;EAA4C;EACpF,UAAU;GAAC;GAAe;GAA8B;EAAY;CACtE,EACF;AACF,CACF;AAIA,MAAa,2BAA2B,EACtC,KACA,UAAU,OACV,WACA,UAAU,eACV,GAAG,YACQ;CAGX,OAAO,oBAFM,UAAU,OAAO,QAEvB;EAAM,GAAI;EAAY;EAAK,WAAWA,WAAS;GAAE;GAAS;EAAU,CAAC;CAAI,CAAA;AAClF;;;ACtDA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;GACP;GACA;GACA;GACA;GACA;GACA;GACA;GAMA;GACA;EACF;EACA,YAAY;GACV;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CACF;AAQA,MAAa,oBAAoB,EAC/B,KACA,WACA,OAAO,UACP,UACA,MACA,UAAU,OACV,UAAU,WACV,GAAG,WACQ;CACX,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,kBAAkB,YAAY;CACpC,MAAM,sBAAsB,YAAY;CACxC,MAAM,YAAY,kBAAkB,oBAAC,QAAD,CAAS,CAAA,IAAI;CAEjD,MAAM,0BAAqF;EACzF,IAAI,mBAAmB,YAAY,QAAQ,OAAO;EAClD,IAAI,qBAAqB,OAAO;EAChC,OAAO;CACT,EAAA,CAAG;CAEH,OACE,qBAAC,MAAD;EACE,GAAI;EACC;EACC;EACN,gBAAc;EACd,WAAW,GAAG,SAAS;GAAE;GAAW;EAAQ,CAAC,CAAC;EALhD,UAAA,CAOG,aACC,oBAAC,yBAAD;GAAyB,SAAS;GAAmB,UAAA;EAAmC,CAAA,GAG1F,oBAAC,WAAD,EAAY,SAAoB,CAAA,CAC5B;;AAEV;;;ACtIA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAC7C,oBAAC,MAAD;CAAI,GAAI;CAAM,WAAW,GAAG,WAAW,mBAAmB,YAAY,SAAS;AAAI,CAAA;;;ACMrF,MAAM,mBAAmB,IACvB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CAMA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,UAAU,MACZ;CACA,UAAU,EACR,UAAU;EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;CACT,EACF;AACF,CACF;;;;;;;;;;;;;;;AAqBA,MAAa,UAAU,EAAE,WAAW,SAAS,QAAQ,WAAW,OAAO,GAAG,WAKxE,oBAAC,OAAD;CACE,cAAW;CACX,GAAI;CACJ,eAAa;CACb,WAAW,iBAAiB;EAAE;EAAU;CAAU,CAAC;AACpD,CAAA;AAGH,OAAO,SAAS;AAChB,OAAO,SAAS;AAChB,OAAO,UAAU;AAEjB,OAAO,OAAO;AACd,OAAO,WAAW;AAClB,OAAO,aAAa;AACpB,OAAO,oBAAoB;AAC3B,OAAO,aAAa"}

package/dist/PageHeader-Q3IpCnQd.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader-Q3IpCnQd.js","names":[],"sources":["../src/blocks/PageHeader/styles.ts","../src/blocks/PageHeader/PageHeaderDetail.tsx","../src/blocks/PageHeader/PageHeaderIndex.tsx","../src/blocks/PageHeader/PageHeader.tsx"],"sourcesContent":["export const titleRowClass = 'tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2';\nexport const titleClass =\n  'tw:m-0 tw:text-3xl tw:font-semibold tw:leading-9 tw:text-foreground tw:break-words';\nexport const titleCompactClass =\n  'tw:m-0 tw:text-xl tw:font-semibold tw:leading-7 tw:text-foreground tw:break-words';\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.\nexport const badgesClass =\n  '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';\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  badgesClass,\n  descriptionClass,\n  titleClass,\n  titleCompactClass,\n  titleRowClass,\n} from './styles';\n\n// Detail page header — single entity pages (bucket, flow, data app, …).\n// Pattern: docs/patterns/page-header/detail/detail-page-header.md\n//   - Breadcrumbs are required; overflow menu sits on the breadcrumbs row.\n//   - Max two visible actions: `primaryAction` + optional `secondaryAction`.\n//   - All other actions belong in the breadcrumbs-row overflow menu.\n/**\n * Props for `PageHeader.Detail`. Detail pages enforce mandatory breadcrumbs, ≤ 2 visible actions, and an\n * overflow-menu slot on the breadcrumbs row.\n */\ntype PageHeaderDetailProps = Omit<ComponentProps<'header'>, 'title'> & {\n  /** `Breadcrumb` chain ending in the entity name (last item is not a link). Required. */\n  breadcrumbs: ReactNode;\n  /** `DropdownMenu` for tertiary actions. Sits on the breadcrumbs row, not the title row. */\n  overflowActions?: ReactNode;\n  title: ReactNode;\n  /** Optional icon rendered immediately left of the title (entity / component / type icon). */\n  titleIcon?: ReactNode;\n  /** Inline `Badge`s rendered next to the title (status, environment, version). Always rendered as pills. */\n  badges?: ReactNode;\n  description?: ReactNode;\n  /** Compact title mode: renders a smaller title since the breadcrumb already shows the entity name. Default `false`. */\n  compact?: boolean;\n  /** Primary action (`Button`). Use the verb appropriate to the entity (Deploy / Run / Save). */\n  primaryAction?: ReactNode;\n  /** Optional second action (`Button variant=\"secondary\"`). Everything beyond goes in `overflowActions`. */\n  secondaryAction?: ReactNode;\n  /** Optional `Tabs` row below the title block. */\n  headerNav?: ReactNode;\n  /**\n   * Opt into the responsive layout: the description spans its own full-width row below the title/actions row\n   * instead of sharing the title column. Defaults to `false` (description sits inside the title column).\n   * Enabled per the `sidebar-navigation` feature in kbc-ui; leaving it off keeps existing consumers\n   * byte-identical.\n   */\n  fullWidthDescription?: boolean;\n};\n\n/**\n * Page header for single-entity pages.\n *\n * **When to use:** the page shows one entity (a bucket, flow, data app) with a parent hierarchy worth\n * breadcrumbing. Primary action is typically \"edit / deploy / run on this entity\".\n * **When NOT to use:** for top-level list pages use `PageHeader.Index`. For pages without a parent\n * hierarchy use `PageHeader.Index` even if they show one entity.\n * **Composition:** nest inside `PageLayout.Header`. Pass `Button`s for actions. Anything beyond the\n * 2-visible-actions cap belongs in `overflowActions` (a `DropdownMenu`), not in extra slots.\n *\n * @see RECIPES.md#list-detail — for the list-page → detail-page navigation pattern\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 titleRow = (\n    <div className={cn(titleRowClass, 'tw:min-w-64 tw:flex-1 tw:pr-2')}>\n      {titleIcon && <span className=\"tw:flex tw:shrink-0 tw:items-center\">{titleIcon}</span>}\n      <h1 className={compact ? titleCompactClass : titleClass}>{title}</h1>\n      {badges && <div className={badgesClass}>{badges}</div>}\n    </div>\n  );\n  const actions = (primaryAction || secondaryAction) && (\n    <div className=\"tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2\">\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 className=\"tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3\">\n            {titleRow}\n            {actions}\n          </div>\n          {descriptionNode}\n        </div>\n      ) : (\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=\"tw:flex tw:min-w-64 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2\">\n            <div className={titleRowClass}>\n              {titleIcon && (\n                <span className=\"tw:flex tw:shrink-0 tw:items-center\">{titleIcon}</span>\n              )}\n              <h1 className={compact ? titleCompactClass : titleClass}>{title}</h1>\n              {badges && <div className={badgesClass}>{badges}</div>}\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// Index page header — list / collection pages (Flows, Storage, Jobs, …).\n// Pattern: docs/patterns/page-header/index/index-page-header.md\n//   - No breadcrumbs (top-level pages).\n//   - `metadata` wins over `description` (mutually exclusive in pattern).\n//   - At most one primary `action`; pair with the `documentation` icon button.\n/**\n * Props for `PageHeader.Index`. Index pages have no breadcrumbs and no overflow menu — search and filters\n * belong in `PageToolbar`, not here.\n */\ntype PageHeaderIndexProps = Omit<ComponentProps<'header'>, 'title'> & {\n  title: ReactNode;\n  /** Prose description shown below the title. Mutually exclusive with `metadata` in the pattern; `metadata` wins when both are passed. */\n  description?: ReactNode;\n  /** Count / system summary shown below the title (e.g. \"3 buckets and 39 tables\"). Wins over `description`. */\n  metadata?: ReactNode;\n  /** Icon-only docs button (`Button variant=\"invisible\" icon={<BookOpen />}`). Sits next to `action`. */\n  documentation?: ReactNode;\n  /** Primary \"create / add new X\" `Button`. */\n  action?: ReactNode;\n  /** Optional `Tabs` row rendered below the title block. Use only when >1 dataset / section is worth navigating to. */\n  headerNav?: ReactNode;\n  /**\n   * Opt into the responsive layout: the description spans its own full-width row below the title, and the\n   * action group wraps beneath the title (right-aligned) on narrow widths instead of shrinking. Defaults to\n   * `false` (the description shares the title column and actions stay `shrink-0`). Enabled per the\n   * `sidebar-navigation` feature in kbc-ui; leaving it off keeps existing consumers byte-identical.\n   */\n  fullWidthDescription?: boolean;\n};\n\n/**\n * Page header for top-level list / collection pages.\n *\n * **When to use:** the page is a list (Flows, Storage, Jobs, …) with no parent in the same section.\n * Primary action is typically \"create / add a new X\".\n * **When NOT to use:** for single-entity detail pages use `PageHeader.Detail`; for layouts that don't fit\n * either pattern host custom JSX in `PageLayout.Header` directly.\n * **Composition:** nest inside `PageLayout.Header`. Pass `Button`s into `action` and\n * `documentation`. Search and filter chips 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 * Structured page-header block that encodes the evviku page-header patterns 1:1 at the type level.\n *\n * **When to use:** every kbc-ui page with a structured header (title + actions + optional badges /\n * description / tabs). Choose `PageHeader.Index` for list / collection pages, `PageHeader.Detail` for\n * single-entity pages with breadcrumbs.\n * **When NOT to use:** for layouts that don't match either pattern, host custom JSX inside\n * `PageLayout.Header` directly. For routing-driven tab rows below the header use `PageLayout.Tabs`.\n * **Composition:** nest inside `PageLayout.Header`. Pass `@keboola/design` `Button`s into the header slots\n * (chrome is brand-driven). The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).\n *\n * @see RECIPES.md#page-header-tabs — for the canonical page-header + tabs composition\n */\nexport const PageHeader = {\n  /** Index variant — top-level list / collection pages. No breadcrumbs; `metadata` wins over `description`. */\n  Index: PageHeaderIndex,\n  /** Detail variant — single-entity pages with required breadcrumbs and an overflow-actions slot. Max 2 visible actions. */\n  Detail: PageHeaderDetail,\n};\n"],"mappings":";;;AAAA,MAAa,gBAAgB;AAC7B,MAAa,aACX;AACF,MAAa,oBACX;;;;;;;;;;;;;;;ACyDF,MAAa,oBAAoB,EAC/B,KACA,WACA,aACA,iBACA,OACA,WACA,QACA,aACA,UAAU,OACV,eACA,iBACA,WACA,uBAAuB,OACvB,GAAG,YACwB;CAC3B,MAAM,WACJ,qBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,+BAA+B;EAAjE,UAAA;GACG,aAAa,oBAAC,QAAD;IAAM,WAAU;IAAuC,UAAA;GAAgB,CAAA;GACrF,oBAAC,MAAD;IAAI,WAAW,UAAU,oBAAoB;IAAa,UAAA;GAAU,CAAA;GACnE,UAAU,oBAAC,OAAD;IAAK,WAAA;IAAyB,UAAA;GAAY,CAAA;EAClD;;CAEP,MAAM,WAAW,iBAAiB,oBAChC,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACG,iBACA,aACE;;CAEP,MAAM,kBAAkB,eAAe,oBAAC,KAAD;EAAG,WAAA;EAA8B,UAAA;CAAe,CAAA;CACvF,OACE,qBAAC,UAAD;EACO;EACL,WAAW,GAAG,0CAA0C,SAAS;EACjE,GAAI;EAHN,UAAA;GAKE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,OAAD;KAAK,WAAU;KAAwB,UAAA;IAAiB,CAAA,GACvD,mBACC,oBAAC,OAAD;KAAK,WAAU;KAAgD,UAAA;IAAqB,CAAA,CAEnF;;GAEJ,uBACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,UACA,OACE;IACJ,CAAA,GAAA,eACE;GAEL,CAAA,IAAA,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,qBAAC,OAAD;MAAK,WAAW;MAAhB,UAAA;OACG,aACC,oBAAC,QAAD;QAAM,WAAU;QAAuC,UAAA;OAAgB,CAAA;OAEzE,oBAAC,MAAD;QAAI,WAAW,UAAU,oBAAoB;QAAa,UAAA;OAAU,CAAA;OACnE,UAAU,oBAAC,OAAD;QAAK,WAAA;QAAyB,UAAA;OAAY,CAAA;MAClD;KACJ,CAAA,GAAA,eACE;IACJ,CAAA,GAAA,OACE;;GAGN;EACK;;AAEZ;;;;;;;;;;;;;ACrFA,MAAa,mBAAmB,EAC9B,KACA,WACA,OACA,aACA,UACA,eACA,QACA,WACA,uBAAuB,OACvB,GAAG,YACuB;CAC1B,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,QAAQ,iBAAiB,MAAM;CAClD,OACE,qBAAC,UAAD;EACO;EACL,WAAW,GAAG,0CAA0C,SAAS;EACjE,GAAI;EAHN,UAAA,CAKG,uBACC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,OAAD;KAAK,WAAW,GAAG,eAAe,+BAA+B;KAC/D,UAAA,oBAAC,MAAD;MAAI,WAAW;MAAa,UAAA;KAAU,CAAA;IACnC,CAAA,GACJ,cACC,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,eACA,MACE;IAEJ,CAAA,CAAA;GACJ,CAAA,GAAA,YAAY,oBAAC,KAAD;IAAG,WAAA;IAA8B,UAAA;GAAY,CAAA,CACvD;EAEL,CAAA,IAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,OAAD;KAAK,WAAW;KACd,UAAA,oBAAC,MAAD;MAAI,WAAW;MAAa,UAAA;KAAU,CAAA;IACnC,CAAA,GACJ,YAAY,oBAAC,KAAD;KAAG,WAAA;KAA8B,UAAA;IAAY,CAAA,CACvD;GACJ,CAAA,GAAA,cACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,eACA,MACE;GAEJ,CAAA,CAAA;EAEN,CAAA,GAAA,SACK;;AAEZ;;;;;;;;;;;;;;;;ACpFA,MAAa,aAAa;;CAExB,OAAO;;CAEP,QAAQ;AACV"}
+{"version":3,"file":"PageHeader-Q3IpCnQd.js","names":[],"sources":["../src/blocks/PageHeader/styles.ts","../src/blocks/PageHeader/PageHeaderDetail.tsx","../src/blocks/PageHeader/PageHeaderIndex.tsx","../src/blocks/PageHeader/PageHeader.tsx"],"sourcesContent":["export const titleRowClass = 'tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2';\nexport const titleClass =\n  'tw:m-0 tw:text-3xl tw:font-semibold tw:leading-9 tw:text-foreground tw:break-words';\nexport const titleCompactClass =\n  'tw:m-0 tw:text-xl tw:font-semibold tw:leading-7 tw:text-foreground tw:break-words';\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.\nexport const badgesClass =\n  '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';\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  badgesClass,\n  descriptionClass,\n  titleClass,\n  titleCompactClass,\n  titleRowClass,\n} from './styles';\n\n// Detail page header — single entity pages (bucket, flow, data app, …).\n// Pattern: docs/patterns/page-header/detail/detail-page-header.md\n//   - Breadcrumbs are required; overflow menu sits on the breadcrumbs row.\n//   - Max two visible actions: `primaryAction` + optional `secondaryAction`.\n//   - All other actions belong in the breadcrumbs-row overflow menu.\n/**\n * Props for `PageHeader.Detail`. Detail pages enforce mandatory breadcrumbs, ≤ 2 visible actions, and an\n * overflow-menu slot on the breadcrumbs row.\n */\ntype PageHeaderDetailProps = Omit<ComponentProps<'header'>, 'title'> & {\n  /**\n   * `Breadcrumb` chain to the entity's parent list / hierarchy. Required. Never repeat the\n   * entity's own name as a final, non-link item — it's already the `title` below.\n   */\n  breadcrumbs: ReactNode;\n  /** `DropdownMenu` for tertiary actions. Sits on the breadcrumbs row, not the title row. */\n  overflowActions?: ReactNode;\n  title: ReactNode;\n  /** Optional icon rendered immediately left of the title (entity / component / type icon). */\n  titleIcon?: ReactNode;\n  /** Inline `Badge`s rendered next to the title (status, environment, version). Always rendered as pills. */\n  badges?: ReactNode;\n  description?: ReactNode;\n  /** Compact title mode: renders a smaller title for information-dense pages. Default `false`. */\n  compact?: boolean;\n  /** Primary action (`Button`). Use the verb appropriate to the entity (Deploy / Run / Save). */\n  primaryAction?: ReactNode;\n  /** Optional second action (`Button variant=\"secondary\"`). Everything beyond goes in `overflowActions`. */\n  secondaryAction?: ReactNode;\n  /** Optional `Tabs` row below the title block. */\n  headerNav?: ReactNode;\n  /**\n   * Opt into the responsive layout: the description spans its own full-width row below the title/actions row\n   * instead of sharing the title column. Defaults to `false` (description sits inside the title column).\n   * Enabled per the `sidebar-navigation` feature in kbc-ui; leaving it off keeps existing consumers\n   * byte-identical.\n   */\n  fullWidthDescription?: boolean;\n};\n\n/**\n * Page header for single-entity pages.\n *\n * **When to use:** the page shows one entity (a bucket, flow, data app) with a parent hierarchy worth\n * breadcrumbing. Primary action is typically \"edit / deploy / run on this entity\".\n * **When NOT to use:** for top-level list pages use `PageHeader.Index`. For pages without a parent\n * hierarchy use `PageHeader.Index` even if they show one entity.\n * **Composition:** nest inside `PageLayout.Header`. Pass `Button`s for actions. Anything beyond the\n * 2-visible-actions cap belongs in `overflowActions` (a `DropdownMenu`), not in extra slots.\n *\n * @see RECIPES.md#list-detail — for the list-page → detail-page navigation pattern\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 titleRow = (\n    <div className={cn(titleRowClass, 'tw:min-w-64 tw:flex-1 tw:pr-2')}>\n      {titleIcon && <span className=\"tw:flex tw:shrink-0 tw:items-center\">{titleIcon}</span>}\n      <h1 className={compact ? titleCompactClass : titleClass}>{title}</h1>\n      {badges && <div className={badgesClass}>{badges}</div>}\n    </div>\n  );\n  const actions = (primaryAction || secondaryAction) && (\n    <div className=\"tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2\">\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 className=\"tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3\">\n            {titleRow}\n            {actions}\n          </div>\n          {descriptionNode}\n        </div>\n      ) : (\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=\"tw:flex tw:min-w-64 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2\">\n            <div className={titleRowClass}>\n              {titleIcon && (\n                <span className=\"tw:flex tw:shrink-0 tw:items-center\">{titleIcon}</span>\n              )}\n              <h1 className={compact ? titleCompactClass : titleClass}>{title}</h1>\n              {badges && <div className={badgesClass}>{badges}</div>}\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// Index page header — list / collection pages (Flows, Storage, Jobs, …).\n// Pattern: docs/patterns/page-header/index/index-page-header.md\n//   - No breadcrumbs (top-level pages).\n//   - `metadata` wins over `description` (mutually exclusive in pattern).\n//   - At most one primary `action`; pair with the `documentation` icon button.\n/**\n * Props for `PageHeader.Index`. Index pages have no breadcrumbs and no overflow menu — search and filters\n * belong in `PageToolbar`, not here.\n */\ntype PageHeaderIndexProps = Omit<ComponentProps<'header'>, 'title'> & {\n  title: ReactNode;\n  /** Prose description shown below the title. Mutually exclusive with `metadata` in the pattern; `metadata` wins when both are passed. */\n  description?: ReactNode;\n  /** Count / system summary shown below the title (e.g. \"3 buckets and 39 tables\"). Wins over `description`. */\n  metadata?: ReactNode;\n  /** Icon-only docs button (`Button variant=\"invisible\" icon={<BookOpen />}`). Sits next to `action`. */\n  documentation?: ReactNode;\n  /** Primary \"create / add new X\" `Button`. */\n  action?: ReactNode;\n  /** Optional `Tabs` row rendered below the title block. Use only when >1 dataset / section is worth navigating to. */\n  headerNav?: ReactNode;\n  /**\n   * Opt into the responsive layout: the description spans its own full-width row below the title, and the\n   * action group wraps beneath the title (right-aligned) on narrow widths instead of shrinking. Defaults to\n   * `false` (the description shares the title column and actions stay `shrink-0`). Enabled per the\n   * `sidebar-navigation` feature in kbc-ui; leaving it off keeps existing consumers byte-identical.\n   */\n  fullWidthDescription?: boolean;\n};\n\n/**\n * Page header for top-level list / collection pages.\n *\n * **When to use:** the page is a list (Flows, Storage, Jobs, …) with no parent in the same section.\n * Primary action is typically \"create / add a new X\".\n * **When NOT to use:** for single-entity detail pages use `PageHeader.Detail`; for layouts that don't fit\n * either pattern host custom JSX in `PageLayout.Header` directly.\n * **Composition:** nest inside `PageLayout.Header`. Pass `Button`s into `action` and\n * `documentation`. Search and filter chips 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 * Structured page-header block that encodes the evviku page-header patterns 1:1 at the type level.\n *\n * **When to use:** every kbc-ui page with a structured header (title + actions + optional badges /\n * description / tabs). Choose `PageHeader.Index` for list / collection pages, `PageHeader.Detail` for\n * single-entity pages with breadcrumbs.\n * **When NOT to use:** for layouts that don't match either pattern, host custom JSX inside\n * `PageLayout.Header` directly. For routing-driven tab rows below the header use `PageLayout.Tabs`.\n * **Composition:** nest inside `PageLayout.Header`. Pass `@keboola/design` `Button`s into the header slots\n * (chrome is brand-driven). The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).\n *\n * @see RECIPES.md#page-header-tabs — for the canonical page-header + tabs composition\n */\nexport const PageHeader = {\n  /** Index variant — top-level list / collection pages. No breadcrumbs; `metadata` wins over `description`. */\n  Index: PageHeaderIndex,\n  /** Detail variant — single-entity pages with required breadcrumbs and an overflow-actions slot. Max 2 visible actions. */\n  Detail: PageHeaderDetail,\n};\n"],"mappings":"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"}

package/dist/{PageToolbar-DnbFt14Q.js → PageToolbar-DExqEYGl.js}

@@ -2,7 +2,7 @@ import { cn } from "./classNames-BzrkDnOD.js";
 import { ChevronDown, Plus, X } from "./icons-Cek151jC.js";
 import { Button } from "./Button-DsRrU5F1.js";
 import { Popover } from "./Popover-BEbQrC_P.js";
-import { Badge } from "./Badge-Ch26CXoP.js";
+import { Badge } from "./Badge-D0pXdekt.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/PageToolbar/PageToolbarToken.tsx
 /**
@@ -150,4 +150,4 @@ const PageToolbar = Object.assign(Root, {
 //#endregion
 export { PageToolbar };
 
-//# sourceMappingURL=PageToolbar-DnbFt14Q.js.map
+//# sourceMappingURL=PageToolbar-DExqEYGl.js.map

package/dist/{PageToolbar-DnbFt14Q.js.map → PageToolbar-DExqEYGl.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PageToolbar-DnbFt14Q.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 slot sizes itself between `min-w-64` and `max-w-md`, so the search field has to fill it —\n      // without this the input stays content-width (≈224px inside a 448px slot) and truncates its own\n      // placeholder, and every caller ends up hand-picking a width class to compensate.\n      //\n      // - First child only. The documented composition is the search field followed by filter pills;\n      //   stretching every child would size the pills to match 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 * Two-row toolbar for index pages — search on the left, filter / sort / utility / view\n * controls on the right, an optional Active Filters row below for filter chips or tokens.\n *\n * **When to use:** every index page that supports search or filtering. Hosts inside\n * `PageLayout` as the search / filter row, between `PageLayout.Header` and `PageLayout.Content`.\n * **When NOT to use:** detail pages, form pages, or anywhere there is no search / filter\n * surface. For routing-based tab rows reach for `PageLayout.Tabs`.\n *\n * **Recommended composition (enforced at the call site):**\n *\n * - `Search` sits on the left; the right cluster auto-aligns via flex.\n * - Right cluster order: `Filters` → `Sort` → `Actions` → `View`. View controls are always\n *   the final control group — do not render any control after `View`.\n * - `ActiveFilters` is the second row. Render it only when one or more filters are active.\n * - `Clear` self-aligns to the far right of `ActiveFilters`.\n *\n * The block is variant-agnostic: render filter chips (Standard variant, non-editable) or\n * tokens (Query Builder variant, editable) into `ActiveFilters` as plain children — do not\n * mix the two 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  /** Left slot — typically a `SearchInput`. */\n  Search,\n  /** Right cluster — host the four control groups below in the recommended order. */\n  Right,\n  /** Filter controls (`Combobox`, `Select`, `DatePicker`). */\n  Filters: ControlGroup,\n  /** Sort control. */\n  Sort: ControlGroup,\n  /** Utility actions (Export, Refresh, …). */\n  Actions: ControlGroup,\n  /** View toggle (List / Grid). Always render last in the right cluster. */\n  View: ControlGroup,\n  /**\n   * Active filters row. Render only when one or more filters are active. Pass filter chips\n   * (Standard variant) or tokens (Query Builder variant) as children, optionally followed\n   * by `AddFilter` / `Clear`.\n   */\n  ActiveFilters,\n  /** Non-editable filter chip (Standard variant) — `Badge` pill with a dismiss button. */\n  Chip,\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   */\n  Token: PageToolbarToken,\n  /** \"+ Add filter\" action — typically rendered after the chips/tokens in `ActiveFilters`. */\n  AddFilter,\n  /** \"Clear all\" action — self-aligns to the far right of `ActiveFilters`. */\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,oGAQA,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;;;;;;;;;;;;;;;;;;;;;;;;AA0BV,MAAa,cAAc,OAAO,OAAO,MAAM;;CAE7C;;CAEA;;CAEA,SAAS;;CAET,MAAM;;CAEN,SAAS;;CAET,MAAM;;;;;;CAMN;;CAEA;;;;;;CAMA,OAAO;;CAEP;;CAEA;AACF,CAAC"}
+{"version":3,"file":"PageToolbar-DExqEYGl.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 slot sizes itself between `min-w-64` and `max-w-md`, so the search field has to fill it —\n      // without this the input stays content-width (≈224px inside a 448px slot) and truncates its own\n      // placeholder, and every caller ends up hand-picking a width class to compensate.\n      //\n      // - First child only. The documented composition is the search field followed by filter pills;\n      //   stretching every child would size the pills to match 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 * Two-row toolbar for index pages — search on the left, filter / sort / utility / view\n * controls on the right, an optional Active Filters row below for filter chips or tokens.\n *\n * **When to use:** every index page that supports search or filtering. Hosts inside\n * `PageLayout` as the search / filter row, between `PageLayout.Header` and `PageLayout.Content`.\n * **When NOT to use:** detail pages, form pages, or anywhere there is no search / filter\n * surface. For routing-based tab rows reach for `PageLayout.Tabs`.\n *\n * **Recommended composition (enforced at the call site):**\n *\n * - `Search` sits on the left; the right cluster auto-aligns via flex.\n * - Right cluster order: `Filters` → `Sort` → `Actions` → `View`. View controls are always\n *   the final control group — do not render any control after `View`.\n * - `ActiveFilters` is the second row. Render it only when one or more filters are active.\n * - `Clear` self-aligns to the far right of `ActiveFilters`.\n *\n * The block is variant-agnostic: render filter chips (Standard variant, non-editable) or\n * tokens (Query Builder variant, editable) into `ActiveFilters` as plain children — do not\n * mix the two 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  /** Left slot — typically a `SearchInput`. */\n  Search,\n  /** Right cluster — host the four control groups below in the recommended order. */\n  Right,\n  /** Filter controls (`Combobox`, `Select`, `DatePicker`). */\n  Filters: ControlGroup,\n  /** Sort control. */\n  Sort: ControlGroup,\n  /** Utility actions (Export, Refresh, …). */\n  Actions: ControlGroup,\n  /** View toggle (List / Grid). Always render last in the right cluster. */\n  View: ControlGroup,\n  /**\n   * Active filters row. Render only when one or more filters are active. Pass filter chips\n   * (Standard variant) or tokens (Query Builder variant) as children, optionally followed\n   * by `AddFilter` / `Clear`.\n   */\n  ActiveFilters,\n  /** Non-editable filter chip (Standard variant) — `Badge` pill with a dismiss button. */\n  Chip,\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   */\n  Token: PageToolbarToken,\n  /** \"+ Add filter\" action — typically rendered after the chips/tokens in `ActiveFilters`. */\n  AddFilter,\n  /** \"Clear all\" action — self-aligns to the far right of `ActiveFilters`. */\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,oGAQA,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;;;;;;;;;;;;;;;;;;;;;;;;AA0BV,MAAa,cAAc,OAAO,OAAO,MAAM;;CAE7C;;CAEA;;CAEA,SAAS;;CAET,MAAM;;CAEN,SAAS;;CAET,MAAM;;;;;;CAMN;;CAEA;;;;;;CAMA,OAAO;;CAEP;;CAEA;AACF,CAAC"}

package/dist/{Popconfirm-CILjmzKI.js → Popconfirm-5pBzT_HQ.js}

@@ -1,8 +1,9 @@
 import { cn } from "./classNames-BzrkDnOD.js";
 import { Button } from "./Button-DsRrU5F1.js";
+import { useStableCallback } from "./internal/hooks/useStableCallback.js";
 import { Popover } from "./Popover-BEbQrC_P.js";
 import { Slot } from "@radix-ui/react-slot";
-import { createContext, use, useMemo, useRef, useState } from "react";
+import { createContext, use, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Popconfirm/context.ts
 const PopconfirmContext = createContext(null);
@@ -117,10 +118,8 @@ const noop = () => void 0;
 const Popconfirm = ({ children, onConfirm = noop, onCancel = noop, variant = "confirm", enabled = true, onOpenChange = noop, open, skipAsyncWait = false, ...rest }) => {
 	const [isLoading, setIsLoading] = useState(false);
 	const [isOpen, setIsOpen] = useState(false);
-	const confirmRef = useRef(onConfirm);
-	const cancelRef = useRef(onCancel);
-	confirmRef.current = onConfirm;
-	cancelRef.current = onCancel;
+	const handleConfirm = useStableCallback(onConfirm);
+	const handleCancel = useStableCallback(onCancel);
 	const handleOnOpenChange = (open) => {
 		setIsOpen(open);
 		onOpenChange(open);
@@ -130,20 +129,20 @@ const Popconfirm = ({ children, onConfirm = noop, onCancel = noop, variant = "co
 		isLoading,
 		enabled,
 		onConfirm: (event) => {
-			const result = confirmRef.current(event);
+			const result = handleConfirm(event);
 			if (!(result instanceof Promise) || skipAsyncWait) return;
 			event.preventDefault();
 			setIsLoading(true);
 			result.then(() => setIsOpen(false)).finally(() => setIsLoading(false));
 		},
-		onCancel: (event) => {
-			cancelRef.current(event);
-		}
+		onCancel: handleCancel
 	}), [
 		variant,
 		isLoading,
 		enabled,
-		skipAsyncWait
+		skipAsyncWait,
+		handleConfirm,
+		handleCancel
 	]);
 	return /* @__PURE__ */ jsx(Popover, {
 		...rest,
@@ -164,4 +163,4 @@ Popconfirm.Trigger = PopconfirmTrigger;
 //#endregion
 export { Popconfirm };
 
-//# sourceMappingURL=Popconfirm-CILjmzKI.js.map
+//# sourceMappingURL=Popconfirm-5pBzT_HQ.js.map

package/dist/{Popconfirm-CILjmzKI.js.map → Popconfirm-5pBzT_HQ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Popconfirm-CILjmzKI.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, useRef, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\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 confirmRef = useRef(onConfirm);\n  const cancelRef = useRef(onCancel);\n  confirmRef.current = onConfirm;\n  cancelRef.current = 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 = confirmRef.current(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: (event) => {\n        cancelRef.current(event);\n      },\n    }),\n    [variant, isLoading, enabled, skipAsyncWait],\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-5pBzT_HQ.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/{RadioGroup-XFzFd1ti.js → RadioGroup-DXPbSj8P.js}

@@ -1,5 +1,5 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip } from "./utils-B5Z52hYs.js";
+import { Tooltip } from "./utils-DSvrhU8E.js";
 import { useArgoDesign } from "./context-D7X470dy.js";
 import { Circle } from "./icons-Cek151jC.js";
 import { Separator } from "./internal/components/Separator.js";
@@ -230,4 +230,4 @@ RadioGroup.Separator = RadioGroupSeparator;
 //#endregion
 export { RadioGroup };
 
-//# sourceMappingURL=RadioGroup-XFzFd1ti.js.map
+//# sourceMappingURL=RadioGroup-DXPbSj8P.js.map

package/dist/{RadioGroup-XFzFd1ti.js.map → RadioGroup-DXPbSj8P.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-XFzFd1ti.js","names":[],"sources":["../src/components/RadioGroup/context.ts","../src/components/RadioGroup/styles.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 { cva } from 'class-variance-authority';\n\nexport const radioVariants = cva(\n  [\n    // reset\n    'tw:bg-transparent',\n    'tw:p-0',\n    'tw:peer',\n    'tw:cursor-pointer',\n    'tw:whitespace-nowrap',\n    'tw:shrink-0',\n\n    // position\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n\n    'tw:disabled:cursor-not-allowed',\n\n    'tw:size-4',\n\n    // border\n    'tw:rounded-full',\n    'tw:border',\n    'tw:border-solid',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:disabled:opacity-40',\n\n          'tw:data-[state=checked]:border-primary',\n          'tw:data-[state=unchecked]:border-neutral-200',\n          'tw:data-[state=unchecked]:hover:border-primary',\n          'tw:data-[state=unchecked]:disabled:hover:border-neutral-200',\n\n          'tw:focus-visible:ring-2',\n          'tw:focus-visible:ring-ring/30',\n        ],\n        argo: [\n          'tw:disabled:opacity-50',\n\n          'tw:border-input',\n          'tw:transition-colors',\n\n          'tw:data-[state=checked]:bg-primary',\n          'tw:data-[state=checked]:border-primary',\n\n          'tw:data-[state=unchecked]:not-disabled:hover:bg-accent',\n          'tw:data-[state=checked]:not-disabled:hover:bg-primary',\n\n          'tw:focus-visible:outline-hidden',\n          'tw:focus-visible:border-primary',\n          'tw:focus-visible:ring-2',\n          'tw:focus-visible:ring-ring/50',\n        ],\n      },\n    },\n  },\n);\n\nexport const radioIndicatorVariants = cva(['tw:size-2.5', 'tw:fill-current'], {\n  defaultVariants: {\n    variant: 'default',\n  },\n  variants: {\n    variant: {\n      default: ['tw:text-primary'],\n      argo: ['tw:text-primary-foreground'],\n    },\n  },\n});\n\nexport const radioItemButtonVariants = cva(\n  [\n    // reset\n    'tw:bg-transparent',\n    'tw:p-0',\n    'tw:peer',\n    'tw:cursor-pointer',\n    'tw:whitespace-nowrap',\n\n    // position\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n\n    'tw:disabled:cursor-not-allowed',\n\n    // layouts\n    'tw:w-full',\n    'tw:px-2',\n    'tw:py-1.5',\n\n    // fonts\n    'tw:uppercase',\n    'tw:font-semibold',\n    'tw:font-sans',\n    'tw:text-[11px]',\n    'tw:whitespace-nowrap',\n    'tw:tracking-widest',\n    'tw:leading-[18px]',\n\n    // border\n    'tw:border',\n    'tw:border-solid',\n    'tw:rounded',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:disabled:opacity-40',\n          'tw:text-secondary-600',\n          'tw:border-secondary-500',\n\n          'tw:data-[state=unchecked]:hover:bg-secondary-500',\n          'tw:data-[state=unchecked]:hover:text-white',\n\n          'tw:data-[state=unchecked]:disabled:hover:bg-white',\n          'tw:data-[state=unchecked]:disabled:hover:text-secondary-500',\n          'tw:data-[state=checked]:disabled:cursor-not-allowed',\n\n          'tw:data-[state=unchecked]:bg-white',\n          'tw:data-[state=checked]:bg-secondary-500',\n          'tw:data-[state=checked]:text-white',\n          'tw:data-[state=checked]:cursor-default',\n\n          'tw:focus-visible:outline',\n          'tw:focus-visible:outline-ring',\n          'tw:focus-visible:ring-4',\n          'tw:focus-visible:ring-ring/30',\n        ],\n        argo: [\n          'tw:disabled:opacity-50',\n          'tw:text-foreground',\n          'tw:border-input',\n          'tw:transition-colors',\n\n          // muted filled control surface — gray, distinct from white containers; not the app-background token\n          'tw:data-[state=unchecked]:bg-muted',\n          'tw:data-[state=unchecked]:not-disabled:hover:bg-accent',\n          'tw:data-[state=unchecked]:not-disabled:hover:text-accent-foreground',\n\n          'tw:data-[state=checked]:bg-primary',\n          'tw:data-[state=checked]:border-primary',\n          'tw:data-[state=checked]:text-primary-foreground',\n          'tw:data-[state=checked]:not-disabled:cursor-default',\n\n          'tw:focus-visible:outline-hidden',\n          'tw:focus-visible:border-primary',\n          'tw:focus-visible:ring-2',\n          'tw:focus-visible:ring-ring/50',\n        ],\n      },\n    },\n  },\n);\n\nexport type RadioStyleVariant = 'default' | 'argo';\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 { radioIndicatorVariants, radioVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const Radio = ({ className, styleVariant = 'default', ...props }: Props) => (\n  <Item {...props} className={cn(radioVariants({ variant: styleVariant }), className)}>\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":"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"}
+{"version":3,"file":"RadioGroup-DXPbSj8P.js","names":[],"sources":["../src/components/RadioGroup/context.ts","../src/components/RadioGroup/styles.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 { cva } from 'class-variance-authority';\n\nexport const radioVariants = cva(\n  [\n    // reset\n    'tw:bg-transparent',\n    'tw:p-0',\n    'tw:peer',\n    'tw:cursor-pointer',\n    'tw:whitespace-nowrap',\n    'tw:shrink-0',\n\n    // position\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n\n    'tw:disabled:cursor-not-allowed',\n\n    'tw:size-4',\n\n    // border\n    'tw:rounded-full',\n    'tw:border',\n    'tw:border-solid',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:disabled:opacity-40',\n\n          'tw:data-[state=checked]:border-primary',\n          'tw:data-[state=unchecked]:border-neutral-200',\n          'tw:data-[state=unchecked]:hover:border-primary',\n          'tw:data-[state=unchecked]:disabled:hover:border-neutral-200',\n\n          'tw:focus-visible:ring-2',\n          'tw:focus-visible:ring-ring/30',\n        ],\n        argo: [\n          'tw:disabled:opacity-50',\n\n          'tw:border-input',\n          'tw:transition-colors',\n\n          'tw:data-[state=checked]:bg-primary',\n          'tw:data-[state=checked]:border-primary',\n\n          'tw:data-[state=unchecked]:not-disabled:hover:bg-accent',\n          'tw:data-[state=checked]:not-disabled:hover:bg-primary',\n\n          'tw:focus-visible:outline-hidden',\n          'tw:focus-visible:border-primary',\n          'tw:focus-visible:ring-2',\n          'tw:focus-visible:ring-ring/50',\n        ],\n      },\n    },\n  },\n);\n\nexport const radioIndicatorVariants = cva(['tw:size-2.5', 'tw:fill-current'], {\n  defaultVariants: {\n    variant: 'default',\n  },\n  variants: {\n    variant: {\n      default: ['tw:text-primary'],\n      argo: ['tw:text-primary-foreground'],\n    },\n  },\n});\n\nexport const radioItemButtonVariants = cva(\n  [\n    // reset\n    'tw:bg-transparent',\n    'tw:p-0',\n    'tw:peer',\n    'tw:cursor-pointer',\n    'tw:whitespace-nowrap',\n\n    // position\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n\n    'tw:disabled:cursor-not-allowed',\n\n    // layouts\n    'tw:w-full',\n    'tw:px-2',\n    'tw:py-1.5',\n\n    // fonts\n    'tw:uppercase',\n    'tw:font-semibold',\n    'tw:font-sans',\n    'tw:text-[11px]',\n    'tw:whitespace-nowrap',\n    'tw:tracking-widest',\n    'tw:leading-[18px]',\n\n    // border\n    'tw:border',\n    'tw:border-solid',\n    'tw:rounded',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:disabled:opacity-40',\n          'tw:text-secondary-600',\n          'tw:border-secondary-500',\n\n          'tw:data-[state=unchecked]:hover:bg-secondary-500',\n          'tw:data-[state=unchecked]:hover:text-white',\n\n          'tw:data-[state=unchecked]:disabled:hover:bg-white',\n          'tw:data-[state=unchecked]:disabled:hover:text-secondary-500',\n          'tw:data-[state=checked]:disabled:cursor-not-allowed',\n\n          'tw:data-[state=unchecked]:bg-white',\n          'tw:data-[state=checked]:bg-secondary-500',\n          'tw:data-[state=checked]:text-white',\n          'tw:data-[state=checked]:cursor-default',\n\n          'tw:focus-visible:outline',\n          'tw:focus-visible:outline-ring',\n          'tw:focus-visible:ring-4',\n          'tw:focus-visible:ring-ring/30',\n        ],\n        argo: [\n          'tw:disabled:opacity-50',\n          'tw:text-foreground',\n          'tw:border-input',\n          'tw:transition-colors',\n\n          // muted filled control surface — gray, distinct from white containers; not the app-background token\n          'tw:data-[state=unchecked]:bg-muted',\n          'tw:data-[state=unchecked]:not-disabled:hover:bg-accent',\n          'tw:data-[state=unchecked]:not-disabled:hover:text-accent-foreground',\n\n          'tw:data-[state=checked]:bg-primary',\n          'tw:data-[state=checked]:border-primary',\n          'tw:data-[state=checked]:text-primary-foreground',\n          'tw:data-[state=checked]:not-disabled:cursor-default',\n\n          'tw:focus-visible:outline-hidden',\n          'tw:focus-visible:border-primary',\n          'tw:focus-visible:ring-2',\n          'tw:focus-visible:ring-ring/50',\n        ],\n      },\n    },\n  },\n);\n\nexport type RadioStyleVariant = 'default' | 'argo';\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 { radioIndicatorVariants, radioVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const Radio = ({ className, styleVariant = 'default', ...props }: Props) => (\n  <Item {...props} className={cn(radioVariants({ variant: styleVariant }), className)}>\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":"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"}

package/dist/{Search-4Bxtt8hS.js → Search-5uQAiNIP.js}

@@ -1,5 +1,5 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { createPrefixedString, debounce, noop } from "./utils-B5Z52hYs.js";
+import { createPrefixedString, debounce, noop } from "./utils-DSvrhU8E.js";
 import { Search as Search$1, Sparkles, X } from "./icons-Cek151jC.js";
 import { useEffect, useMemo, useState } from "react";
 import { cva } from "class-variance-authority";
@@ -181,4 +181,4 @@ const SearchForm = ({ ref, onSubmit, name = "search-field", ...props }) => {
 //#endregion
 export { Search, SearchForm };
 
-//# sourceMappingURL=Search-4Bxtt8hS.js.map
+//# sourceMappingURL=Search-5uQAiNIP.js.map

package/dist/{Search-4Bxtt8hS.js.map → Search-5uQAiNIP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Search-4Bxtt8hS.js","names":["SearchIcon"],"sources":["../src/components/Search/ClearButton.tsx","../src/components/Search/styles.ts","../src/components/Search/utils.ts","../src/components/Search/Search.tsx","../src/components/Search/SearchForm.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  testId?: string;\n};\n\nexport const ClearButton = ({ onClick, testId }: Props) => {\n  // Prevent default, as we do not want to lose input focus.\n  const handleMouseDown: MouseEventHandler<HTMLButtonElement> = (event) => {\n    event.preventDefault();\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      tabIndex={-1} // clear button should not be focusable\n      onMouseDown={handleMouseDown}\n      className={cn(\n        // reset\n        'tw:border-none',\n        'tw:bg-transparent',\n        'tw:p-0',\n\n        // positioning\n        'tw:flex',\n        'tw:items-center',\n\n        'tw:cursor-pointer',\n        'tw:text-muted-foreground',\n        'tw:hover:text-foreground',\n      )}\n      data-testid={testId}\n    >\n      <X className=\"tw:size-4\" />\n    </button>\n  );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const searchWrapperVariants = cva(\n  [\n    // positioning\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-2.5',\n\n    // base\n    'tw:text-card-foreground',\n    'tw:transition-all',\n    'tw:font-sans',\n\n    // readonly — `secondary` over `muted`, which is too close to the `card` fill to\n    // read as non-editable in either scheme\n    'tw:has-[input[readonly]]:bg-secondary',\n    'tw:has-[input[readonly]]:focus-within:ring-0',\n    'tw:has-[input[readonly]]:outline-0',\n\n    // disabled\n    'tw:disabled:opacity-40',\n\n    // default input padding (was sizing.default)\n    'tw:[&>input]:py-[15px]',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:rounded-lg',\n          'tw:px-5',\n          'tw:bg-card',\n          'tw:shadow-raised',\n          // outline\n          'tw:outline',\n          'tw:outline-1',\n          'tw:outline-transparent',\n          // focus\n          'tw:has-[input:focus]:outline-1',\n          'tw:has-[input:focus]:ring-4',\n          'tw:has-[input:focus]:outline-ring',\n          'tw:has-[input:focus]:ring-ring/30',\n        ],\n        ai: [\n          'tailwindcss-preflight',\n          'tw:relative',\n          'tw:rounded-card',\n          'tw:px-4',\n          'tw:cursor-text',\n          'tw:border-2',\n          'tw:border-transparent',\n          'tw:bg-gradient-to-br',\n          'tw:from-secondary-600',\n          'tw:to-purple-600',\n          'tw:bg-origin-border',\n          // Floods the interior so the gradient shows only in the 2px border box.\n          'tw:shadow-[inset_0_100vw_rgb(var(--card))]',\n          // focus\n          'tw:has-[input:focus]:ring-4',\n          'tw:has-[input:focus]:ring-ring/30',\n        ],\n      },\n    },\n  },\n);\n\nexport const searchInputClassnames = [\n  // reset\n  'tw:border-none',\n  'tw:bg-transparent',\n  'tw:outline-hidden',\n  'tw:w-full',\n  'tw:p-0',\n\n  // base\n  'tw:text-base',\n  'tw:leading-6',\n  'tw:font-normal',\n  'tw:font-sans',\n\n  // placeholder\n  'tw:placeholder:text-muted-foreground',\n\n  // disabled\n  'tw:disabled:cursor-not-allowed',\n].join(' ');\n","import { createPrefixedString } from '../../utils';\n\nexport const genSearchTestId = (prefix: string = '') => {\n  const ps = createPrefixedString(prefix);\n  return {\n    toString: () => prefix,\n    wrapper: ps`search-wrapper`,\n    input: ps`search-input`,\n    clearButton: ps`search-clear-button`,\n  };\n};\n","import { useEffect, useMemo, useState } from 'react';\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentProps,\n  FocusEvent,\n  FocusEventHandler,\n  MouseEvent,\n  MouseEventHandler,\n  ReactNode,\n} from 'react';\n\nimport { Search as SearchIcon, Sparkles } from '../../icons';\nimport { cn, debounce, noop } from '../../utils';\n\nimport { ClearButton } from './ClearButton';\nimport { searchInputClassnames, searchWrapperVariants } from './styles';\nimport { genSearchTestId } from './utils';\n\ntype SearchChangeEventHandler = (\n  value: string,\n  event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,\n) => void;\n\ntype SearchBlurEventHandler = (value: string, event: FocusEvent<HTMLInputElement, Element>) => void;\n\ntype Props = {\n  suffix?: ReactNode;\n  disableDebounce?: boolean;\n  debounceDelay?: number;\n  onChange?: SearchChangeEventHandler;\n  onBlur?: SearchBlurEventHandler;\n  value?: string | null;\n  defaultValue?: string | null;\n  testId?: string;\n  onClear?: () => void;\n  variant?: 'default' | 'ai';\n} & Omit<\n  ComponentProps<'input'>,\n  'type' | 'onBlur' | 'onChange' | 'value' | 'defaultValue' | 'prefix' | 'suffix'\n>;\n\n/**\n * @deprecated Use `SearchInput` instead. `Search` is kept only for the legacy (non-sidebar) layout.\n */\nexport const Search = ({\n  ref,\n  suffix,\n  className,\n  onBlur,\n  onChange = noop,\n  disabled = false,\n  readOnly = false,\n  disableDebounce = false,\n  debounceDelay = 300,\n  value: externalValue,\n  defaultValue,\n  testId: prefixTestId = '',\n  placeholder = 'Search',\n  onClear,\n  variant = 'default',\n  ...rest\n}: Props) => {\n  const [internalValue, setInternalValue] = useState(() =>\n    externalValue != null ? externalValue : defaultValue,\n  );\n  const hasValue = internalValue !== '';\n\n  const isClearButtonVisible = hasValue && !disabled && !readOnly;\n  const testId = genSearchTestId(prefixTestId);\n\n  const debouncedOnChange = useMemo(\n    () => (disableDebounce ? onChange : debounce(onChange, debounceDelay)),\n    [disableDebounce, debounceDelay, onChange],\n  );\n\n  useEffect(() => {\n    if (externalValue == null) return; // uncontrolled state\n    // oxlint-disable-next-line react-x/set-state-in-effect\n    setInternalValue(externalValue);\n  }, [externalValue]);\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    const currentValue = event.target.value;\n    setInternalValue(currentValue);\n    debouncedOnChange(currentValue, event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    const currentValue = event.target.value;\n    setInternalValue(currentValue);\n    onBlur?.(currentValue, event);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setInternalValue('');\n    onChange?.('', event);\n    onClear?.();\n  };\n\n  // Clicking anywhere in the field that isn't an interactive control (the leading icon,\n  // the empty chrome) focuses the input — the whole pill acts as one click target.\n  const handleWrapperMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n    if (disabled || readOnly) return;\n    if ((event.target as HTMLElement).closest('button, a, input, textarea, [role=\"button\"]')) {\n      return;\n    }\n    event.preventDefault();\n    event.currentTarget.querySelector('input')?.focus();\n  };\n\n  return (\n    // Mouse-only convenience: clicking the chrome focuses the input. The input itself is the\n    // real interactive/focusable target, so no extra role or key handler is needed here.\n    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      className={cn(\n        searchWrapperVariants({ variant }),\n        {\n          'tw:cursor-not-allowed tw:opacity-40': disabled,\n        },\n        className,\n      )}\n      data-testid={testId.wrapper}\n      onMouseDown={handleWrapperMouseDown}\n    >\n      {variant === 'ai' ? (\n        <Sparkles className=\"tw:size-4 tw:shrink-0 tw:[&_*]:stroke-aigradient-600\" />\n      ) : (\n        <SearchIcon className=\"tw:size-4 tw:shrink-0 tw:text-neutral-400\" />\n      )}\n\n      <input\n        {...rest}\n        ref={ref}\n        placeholder={placeholder}\n        data-testid={testId.input}\n        type=\"text\"\n        value={internalValue ?? ''}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        className={searchInputClassnames}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      {isClearButtonVisible && <ClearButton onClick={handleClear} testId={testId.clearButton} />}\n\n      {suffix}\n    </div>\n  );\n};\n","import type { ComponentProps, FormEventHandler } from 'react';\n\nimport { Search } from './Search';\n\ntype Props = {\n  onSubmit: (value: string) => void;\n} & Omit<ComponentProps<typeof Search>, 'onClear' | 'onBlur' | 'onSubmit'>;\n\nexport const SearchForm = ({ ref, onSubmit, name = 'search-field', ...props }: Props) => {\n  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {\n    event.preventDefault();\n    const searchEl = event.currentTarget.elements.namedItem(name) as HTMLInputElement;\n    onSubmit(searchEl.value);\n  };\n\n  const onClear = () => {\n    onSubmit('');\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <Search\n        {...props}\n        ref={ref}\n        onClear={onClear}\n        name={name}\n        // Debounce has no meaning when we use submit, which is triggered by pressing enter.\n        disableDebounce\n      />\n    </form>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Search-5uQAiNIP.js","names":["SearchIcon"],"sources":["../src/components/Search/ClearButton.tsx","../src/components/Search/styles.ts","../src/components/Search/utils.ts","../src/components/Search/Search.tsx","../src/components/Search/SearchForm.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  testId?: string;\n};\n\nexport const ClearButton = ({ onClick, testId }: Props) => {\n  // Prevent default, as we do not want to lose input focus.\n  const handleMouseDown: MouseEventHandler<HTMLButtonElement> = (event) => {\n    event.preventDefault();\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      tabIndex={-1} // clear button should not be focusable\n      onMouseDown={handleMouseDown}\n      className={cn(\n        // reset\n        'tw:border-none',\n        'tw:bg-transparent',\n        'tw:p-0',\n\n        // positioning\n        'tw:flex',\n        'tw:items-center',\n\n        'tw:cursor-pointer',\n        'tw:text-muted-foreground',\n        'tw:hover:text-foreground',\n      )}\n      data-testid={testId}\n    >\n      <X className=\"tw:size-4\" />\n    </button>\n  );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const searchWrapperVariants = cva(\n  [\n    // positioning\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-2.5',\n\n    // base\n    'tw:text-card-foreground',\n    'tw:transition-all',\n    'tw:font-sans',\n\n    // readonly — `secondary` over `muted`, which is too close to the `card` fill to\n    // read as non-editable in either scheme\n    'tw:has-[input[readonly]]:bg-secondary',\n    'tw:has-[input[readonly]]:focus-within:ring-0',\n    'tw:has-[input[readonly]]:outline-0',\n\n    // disabled\n    'tw:disabled:opacity-40',\n\n    // default input padding (was sizing.default)\n    'tw:[&>input]:py-[15px]',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:rounded-lg',\n          'tw:px-5',\n          'tw:bg-card',\n          'tw:shadow-raised',\n          // outline\n          'tw:outline',\n          'tw:outline-1',\n          'tw:outline-transparent',\n          // focus\n          'tw:has-[input:focus]:outline-1',\n          'tw:has-[input:focus]:ring-4',\n          'tw:has-[input:focus]:outline-ring',\n          'tw:has-[input:focus]:ring-ring/30',\n        ],\n        ai: [\n          'tailwindcss-preflight',\n          'tw:relative',\n          'tw:rounded-card',\n          'tw:px-4',\n          'tw:cursor-text',\n          'tw:border-2',\n          'tw:border-transparent',\n          'tw:bg-gradient-to-br',\n          'tw:from-secondary-600',\n          'tw:to-purple-600',\n          'tw:bg-origin-border',\n          // Floods the interior so the gradient shows only in the 2px border box.\n          'tw:shadow-[inset_0_100vw_rgb(var(--card))]',\n          // focus\n          'tw:has-[input:focus]:ring-4',\n          'tw:has-[input:focus]:ring-ring/30',\n        ],\n      },\n    },\n  },\n);\n\nexport const searchInputClassnames = [\n  // reset\n  'tw:border-none',\n  'tw:bg-transparent',\n  'tw:outline-hidden',\n  'tw:w-full',\n  'tw:p-0',\n\n  // base\n  'tw:text-base',\n  'tw:leading-6',\n  'tw:font-normal',\n  'tw:font-sans',\n\n  // placeholder\n  'tw:placeholder:text-muted-foreground',\n\n  // disabled\n  'tw:disabled:cursor-not-allowed',\n].join(' ');\n","import { createPrefixedString } from '../../utils';\n\nexport const genSearchTestId = (prefix: string = '') => {\n  const ps = createPrefixedString(prefix);\n  return {\n    toString: () => prefix,\n    wrapper: ps`search-wrapper`,\n    input: ps`search-input`,\n    clearButton: ps`search-clear-button`,\n  };\n};\n","import { useEffect, useMemo, useState } from 'react';\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentProps,\n  FocusEvent,\n  FocusEventHandler,\n  MouseEvent,\n  MouseEventHandler,\n  ReactNode,\n} from 'react';\n\nimport { Search as SearchIcon, Sparkles } from '../../icons';\nimport { cn, debounce, noop } from '../../utils';\n\nimport { ClearButton } from './ClearButton';\nimport { searchInputClassnames, searchWrapperVariants } from './styles';\nimport { genSearchTestId } from './utils';\n\ntype SearchChangeEventHandler = (\n  value: string,\n  event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,\n) => void;\n\ntype SearchBlurEventHandler = (value: string, event: FocusEvent<HTMLInputElement, Element>) => void;\n\ntype Props = {\n  suffix?: ReactNode;\n  disableDebounce?: boolean;\n  debounceDelay?: number;\n  onChange?: SearchChangeEventHandler;\n  onBlur?: SearchBlurEventHandler;\n  value?: string | null;\n  defaultValue?: string | null;\n  testId?: string;\n  onClear?: () => void;\n  variant?: 'default' | 'ai';\n} & Omit<\n  ComponentProps<'input'>,\n  'type' | 'onBlur' | 'onChange' | 'value' | 'defaultValue' | 'prefix' | 'suffix'\n>;\n\n/**\n * @deprecated Use `SearchInput` instead. `Search` is kept only for the legacy (non-sidebar) layout.\n */\nexport const Search = ({\n  ref,\n  suffix,\n  className,\n  onBlur,\n  onChange = noop,\n  disabled = false,\n  readOnly = false,\n  disableDebounce = false,\n  debounceDelay = 300,\n  value: externalValue,\n  defaultValue,\n  testId: prefixTestId = '',\n  placeholder = 'Search',\n  onClear,\n  variant = 'default',\n  ...rest\n}: Props) => {\n  const [internalValue, setInternalValue] = useState(() =>\n    externalValue != null ? externalValue : defaultValue,\n  );\n  const hasValue = internalValue !== '';\n\n  const isClearButtonVisible = hasValue && !disabled && !readOnly;\n  const testId = genSearchTestId(prefixTestId);\n\n  const debouncedOnChange = useMemo(\n    () => (disableDebounce ? onChange : debounce(onChange, debounceDelay)),\n    [disableDebounce, debounceDelay, onChange],\n  );\n\n  useEffect(() => {\n    if (externalValue == null) return; // uncontrolled state\n    // oxlint-disable-next-line react-x/set-state-in-effect\n    setInternalValue(externalValue);\n  }, [externalValue]);\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    const currentValue = event.target.value;\n    setInternalValue(currentValue);\n    debouncedOnChange(currentValue, event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    const currentValue = event.target.value;\n    setInternalValue(currentValue);\n    onBlur?.(currentValue, event);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setInternalValue('');\n    onChange?.('', event);\n    onClear?.();\n  };\n\n  // Clicking anywhere in the field that isn't an interactive control (the leading icon,\n  // the empty chrome) focuses the input — the whole pill acts as one click target.\n  const handleWrapperMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n    if (disabled || readOnly) return;\n    if ((event.target as HTMLElement).closest('button, a, input, textarea, [role=\"button\"]')) {\n      return;\n    }\n    event.preventDefault();\n    event.currentTarget.querySelector('input')?.focus();\n  };\n\n  return (\n    // Mouse-only convenience: clicking the chrome focuses the input. The input itself is the\n    // real interactive/focusable target, so no extra role or key handler is needed here.\n    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      className={cn(\n        searchWrapperVariants({ variant }),\n        {\n          'tw:cursor-not-allowed tw:opacity-40': disabled,\n        },\n        className,\n      )}\n      data-testid={testId.wrapper}\n      onMouseDown={handleWrapperMouseDown}\n    >\n      {variant === 'ai' ? (\n        <Sparkles className=\"tw:size-4 tw:shrink-0 tw:[&_*]:stroke-aigradient-600\" />\n      ) : (\n        <SearchIcon className=\"tw:size-4 tw:shrink-0 tw:text-neutral-400\" />\n      )}\n\n      <input\n        {...rest}\n        ref={ref}\n        placeholder={placeholder}\n        data-testid={testId.input}\n        type=\"text\"\n        value={internalValue ?? ''}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        className={searchInputClassnames}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      {isClearButtonVisible && <ClearButton onClick={handleClear} testId={testId.clearButton} />}\n\n      {suffix}\n    </div>\n  );\n};\n","import type { ComponentProps, FormEventHandler } from 'react';\n\nimport { Search } from './Search';\n\ntype Props = {\n  onSubmit: (value: string) => void;\n} & Omit<ComponentProps<typeof Search>, 'onClear' | 'onBlur' | 'onSubmit'>;\n\nexport const SearchForm = ({ ref, onSubmit, name = 'search-field', ...props }: Props) => {\n  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {\n    event.preventDefault();\n    const searchEl = event.currentTarget.elements.namedItem(name) as HTMLInputElement;\n    onSubmit(searchEl.value);\n  };\n\n  const onClear = () => {\n    onSubmit('');\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <Search\n        {...props}\n        ref={ref}\n        onClear={onClear}\n        name={name}\n        // Debounce has no meaning when we use submit, which is triggered by pressing enter.\n        disableDebounce\n      />\n    </form>\n  );\n};\n"],"mappings":"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"}

package/dist/{SearchInput-f_oY9T4Z.js → SearchInput-D4UgAXJK.js}

@@ -1,6 +1,6 @@
-import { debounce } from "./utils-B5Z52hYs.js";
+import { debounce } from "./utils-DSvrhU8E.js";
 import { Search, X } from "./icons-Cek151jC.js";
-import { InputGroup } from "./InputGroup-BnLHY0eq.js";
+import { InputGroup } from "./InputGroup-DcZRlVnN.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/SearchInput/SearchInput.tsx
@@ -99,4 +99,4 @@ const SearchInput = ({ ref, state, variant, focusVariant, sizing, className, val
 //#endregion
 export { SearchInput };
 
-//# sourceMappingURL=SearchInput-f_oY9T4Z.js.map
+//# sourceMappingURL=SearchInput-D4UgAXJK.js.map