@keboola/design 15.0.0 → 16.0.0

package/dist/{RadioGroup-B0TwHjBb.js → RadioGroup-B9oC8P15.js}

@@ -1,23 +1,22 @@
-import { cn } from "./classNames-DcGnTh2N.js";
-import { Tooltip } from "./utils-DwC9u0tM.js";
-import { Circle } from "./icons-ZIeZXXS7.js";
-import { radioCircleVariants, radioIndicatorVariants, radioItemButtonVariants, radioVariants } from "./styles-DxazJ8Mz.js";
-import { FieldBox } from "./FieldBox-BrxLkY9C.js";
+import { cn } from "./classNames-DkX30VJU.js";
+import { Tooltip } from "./utils-DjFceY3H.js";
+import { Circle } from "./icons-DDR9dFSr.js";
+import { radioCircleVariants, radioIndicatorVariants, radioItemButtonVariants, radioVariants } from "./styles-nwtCRF7y.js";
+import { FieldBox } from "./FieldBox-DdSdJ3ZN.js";
 import { Separator } from "./internal/components/Separator.js";
 import { createContext, use, useId } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as RRadioGroup from "@radix-ui/react-radio-group";
 import { Indicator, Item } from "@radix-ui/react-radio-group";
-//#region src/components/RadioGroup/context.ts
+// src/components/RadioGroup/context.ts
 const RadioGroupContext = createContext({
 	variant: "radio",
 	orientation: "horizontal"
 });
 const RadioGroupProvider = RadioGroupContext;
 const useRadioGroupContext = () => use(RadioGroupContext);
-//#endregion
-//#region src/components/RadioGroup/Radio.tsx
+// src/components/RadioGroup/Radio.tsx
 const Radio = ({ className, ...props }) => /* @__PURE__ */ jsx(Item, {
 	...props,
 	className: cn(radioCircleVariants(), radioVariants(), className),
@@ -26,16 +25,14 @@ const Radio = ({ className, ...props }) => /* @__PURE__ */ jsx(Item, {
 		children: /* @__PURE__ */ jsx(Circle, { className: radioIndicatorVariants() })
 	})
 });
-//#endregion
-//#region src/components/RadioGroup/RadioGroupItemButton.tsx
+// src/components/RadioGroup/RadioGroupItemButton.tsx
 const RadioGroupItemButton = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(Item, {
 	ref,
 	...props,
 	className: cn(radioItemButtonVariants(), className),
 	children
 });
-//#endregion
-//#region src/components/RadioGroup/RadioGroupItem.tsx
+// src/components/RadioGroup/RadioGroupItem.tsx
 const RadioGroupItem = ({ children, className, tooltip, tooltipVariant, tooltipPlacement, description, ...props }) => {
 	const { variant } = useRadioGroupContext();
 	const id = useId();
@@ -65,8 +62,7 @@ const RadioGroupItem = ({ children, className, tooltip, tooltipVariant, tooltipP
 		children: item
 	});
 };
-//#endregion
-//#region src/components/RadioGroup/RadioGroupSeparator.tsx
+// src/components/RadioGroup/RadioGroupSeparator.tsx
 const RadioGroupSeparator = () => {
 	const { orientation } = useRadioGroupContext();
 	return /* @__PURE__ */ jsx(Separator, {
@@ -75,8 +71,7 @@ const RadioGroupSeparator = () => {
 		className: orientation === "horizontal" ? "tw:mx-2" : "tw:my-2"
 	});
 };
-//#endregion
-//#region src/components/RadioGroup/RadioGroup.tsx
+// src/components/RadioGroup/RadioGroup.tsx
 const radioGroupVariants = cva(["tw:flex"], { variants: {
 	orientation: {
 		horizontal: ["tw:gap-2"],
@@ -110,7 +105,6 @@ const RadioGroup = ({ variant = "radio", className, disabled = false, orientatio
 });
 RadioGroup.Item = RadioGroupItem;
 RadioGroup.Separator = RadioGroupSeparator;
-//#endregion
 export { RadioGroup };
 
-//# sourceMappingURL=RadioGroup-B0TwHjBb.js.map
+//# sourceMappingURL=RadioGroup-B9oC8P15.js.map

package/dist/{RadioGroup-B0TwHjBb.js.map → RadioGroup-B9oC8P15.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-B0TwHjBb.js","names":[],"sources":["../src/components/RadioGroup/context.ts","../src/components/RadioGroup/Radio.tsx","../src/components/RadioGroup/RadioGroupItemButton.tsx","../src/components/RadioGroup/RadioGroupItem.tsx","../src/components/RadioGroup/RadioGroupSeparator.tsx","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nexport type Variant = 'radio' | 'button' | 'radio-block';\nexport type Orientation = 'vertical' | 'horizontal';\n\nconst RadioGroupContext = createContext<{\n  variant: Variant;\n  orientation: Orientation;\n}>({\n  variant: 'radio',\n  orientation: 'horizontal',\n});\n\nexport const RadioGroupProvider = RadioGroupContext;\n\nexport const useRadioGroupContext = () => use(RadioGroupContext);\n","import type { ComponentProps } from 'react';\nimport { Indicator, Item } from '@radix-ui/react-radio-group';\n\nimport { Circle } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { radioCircleVariants, radioIndicatorVariants, radioVariants } from './styles';\n\nexport const Radio = ({ className, ...props }: ComponentProps<typeof Item>) => (\n  <Item {...props} className={cn(radioCircleVariants(), radioVariants(), 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()} />\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 { radioItemButtonVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item>;\n\nexport const RadioGroupItemButton = ({ ref, className, children, ...props }: Props) => (\n  <Item ref={ref} {...props} className={cn(radioItemButtonVariants(), className)}>\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 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 id = useId();\n\n  const item = (() => {\n    if (variant === 'button')\n      return (\n        <RadioGroupItemButton {...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 {...props} id={id} />}\n        className={cn(variant === 'radio-block' && 'tw:flex-1', className)}\n      >\n        <FieldBox.Title>{children}</FieldBox.Title>\n        {description && <FieldBox.Description>{description}</FieldBox.Description>}\n      </FieldBox>\n    );\n  })();\n\n  if (!tooltip) {\n    return item;\n  }\n\n  return (\n    <Tooltip tooltip={tooltip} variant={tooltipVariant} placement={tooltipPlacement} triggerAsChild>\n      {item}\n    </Tooltip>\n  );\n};\n","import { Separator } from '../Separator';\n\nimport { useRadioGroupContext } from './context';\n\nexport const RadioGroupSeparator = () => {\n  const { orientation } = useRadioGroupContext();\n  const invertedOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n  const size = orientation === 'horizontal' ? '1/2' : 'full';\n  const className = orientation === 'horizontal' ? 'tw:mx-2' : 'tw:my-2';\n\n  return <Separator orientation={invertedOrientation} size={size} className={className} />;\n};\n","import type { ComponentProps } from 'react';\nimport * as RRadioGroup from '@radix-ui/react-radio-group';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport type { Orientation, Variant } from './context';\nimport { RadioGroupProvider } from './context';\nimport { RadioGroupItem } from './RadioGroupItem';\nimport { RadioGroupSeparator } from './RadioGroupSeparator';\n\nconst radioGroupVariants = cva(['tw:flex'], {\n  variants: {\n    orientation: {\n      horizontal: ['tw:gap-2'],\n      vertical: ['tw:flex-col', 'tw:gap-3'],\n    },\n    variant: {\n      button: [],\n      radio: [],\n      'radio-block': ['tw:w-full'],\n    },\n  },\n});\n\ntype Props<Value> = {\n  variant?: Variant;\n  orientation?: Orientation;\n  onValueChange?: (value: Value) => void;\n  value?: Value | null;\n  defaultValue?: Value | null;\n} & Omit<\n  ComponentProps<typeof RRadioGroup.Root>,\n  'asChild' | 'orientation' | 'onValueChange' | 'onChange' | 'value' | 'defaultValue'\n>;\n\nexport const RadioGroup = <Value extends string = string>({\n  variant = 'radio',\n  className,\n  disabled = false,\n  orientation = 'horizontal',\n  onValueChange,\n  children,\n  value,\n  defaultValue,\n  ...props\n}: Props<Value>) => (\n  <RRadioGroup.Root\n    {...props}\n    onValueChange={onValueChange}\n    orientation={orientation}\n    className={cn(radioGroupVariants({ orientation, variant, className }))}\n    disabled={disabled}\n    value={value ?? void 0}\n    defaultValue={defaultValue ?? void 0}\n  >\n    <RadioGroupProvider value={{ variant, orientation }}>{children}</RadioGroupProvider>\n  </RRadioGroup.Root>\n);\n\nRadioGroup.Item = RadioGroupItem;\nRadioGroup.Separator = RadioGroupSeparator;\n"],"mappings":";;;;;;;;;;;;AAKA,MAAM,oBAAoB,cAGvB;CACD,SAAS;CACT,aAAa;AACf,CAAC;AAED,MAAa,qBAAqB;AAElC,MAAa,6BAA6B,IAAI,iBAAiB;;;ACP/D,MAAa,SAAS,EAAE,WAAW,GAAG,YACpC,oBAAC,MAAD;CAAM,GAAI;CAAO,WAAW,GAAG,oBAAoB,GAAG,cAAc,GAAG,SAAS;CAC9E,UAAA,oBAAC,WAAD;EAAW,WAAW,GAAG,WAAW,mBAAmB,mBAAmB;EAGxE,UAAA,oBAAC,QAAD,EAAQ,WAAW,uBAAuB,EAAI,CAAA;CACrC,CAAA;AACP,CAAA;;;ACNR,MAAa,wBAAwB,EAAE,KAAK,WAAW,UAAU,GAAG,YAClE,oBAAC,MAAD;CAAW;CAAK,GAAI;CAAO,WAAW,GAAG,wBAAwB,GAAG,SAAS;CAC1E;AACG,CAAA;;;ACWR,MAAa,kBAA6C,EACxD,UACA,WACA,SACA,gBACA,kBACA,aACA,GAAG,YACW;CACd,MAAM,EAAE,YAAY,qBAAqB;CACzC,MAAM,KAAK,MAAM;CAEjB,MAAM,cAAc;EAClB,IAAI,YAAY,UACd,OACE,oBAAC,sBAAD;GAAsB,GAAI;GAAkB;GACzC;EACmB,CAAA;EAG1B,OACE,qBAAC,UAAD;GACE,SAAS,YAAY,gBAAgB,UAAU;GAC/C,SAAS;GACT,SAAS,oBAAC,OAAD;IAAO,GAAI;IAAW;GAAK,CAAA;GACpC,WAAW,GAAG,YAAY,iBAAiB,aAAa,SAAS;GAJnE,UAAA,CAME,oBAAC,SAAS,OAAV,EAAiB,SAAyB,CAAA,GACzC,eAAe,oBAAC,SAAS,aAAV,EAAA,UAAuB,YAAkC,CAAA,CACjE;;CAEd,EAAA,CAAG;CAEH,IAAI,CAAC,SACH,OAAO;CAGT,OACE,oBAAC,SAAD;EAAkB;EAAS,SAAS;EAAgB,WAAW;EAAkB,gBAAA;EAC9E,UAAA;CACM,CAAA;AAEb;;;AC7DA,MAAa,4BAA4B;CACvC,MAAM,EAAE,gBAAgB,qBAAqB;CAK7C,OAAO,oBAAC,WAAD;EAAW,aAJU,gBAAgB,eAAe,aAAa;EAIpB,MAHvC,gBAAgB,eAAe,QAAQ;EAGY,WAF9C,gBAAgB,eAAe,YAAY;CAE0B,CAAA;AACzF;;;ACAA,MAAM,qBAAqB,IAAI,CAAC,SAAS,GAAG,EAC1C,UAAU;CACR,aAAa;EACX,YAAY,CAAC,UAAU;EACvB,UAAU,CAAC,eAAe,UAAU;CACtC;CACA,SAAS;EACP,QAAQ,CAAC;EACT,OAAO,CAAC;EACR,eAAe,CAAC,WAAW;CAC7B;AACF,EACF,CAAC;AAaD,MAAa,cAA6C,EACxD,UAAU,SACV,WACA,WAAW,OACX,cAAc,cACd,eACA,UACA,OACA,cACA,GAAG,YAEH,oBAAC,YAAY,MAAb;CACE,GAAI;CACW;CACF;CACb,WAAW,GAAG,mBAAmB;EAAE;EAAa;EAAS;CAAU,CAAC,CAAC;CAC3D;CACV,OAAO,SAAS,KAAK;CACrB,cAAc,gBAAgB,KAAK;CAEnC,UAAA,oBAAC,oBAAD;EAAoB,OAAO;GAAE;GAAS;EAAY;EAAI;CAA6B,CAAA;AACnE,CAAA;AAGpB,WAAW,OAAO;AAClB,WAAW,YAAY"}
+{"version":3,"file":"RadioGroup-B9oC8P15.js","names":[],"sources":["../src/components/RadioGroup/context.ts","../src/components/RadioGroup/Radio.tsx","../src/components/RadioGroup/RadioGroupItemButton.tsx","../src/components/RadioGroup/RadioGroupItem.tsx","../src/components/RadioGroup/RadioGroupSeparator.tsx","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nexport type Variant = 'radio' | 'button' | 'radio-block';\nexport type Orientation = 'vertical' | 'horizontal';\n\nconst RadioGroupContext = createContext<{\n  variant: Variant;\n  orientation: Orientation;\n}>({\n  variant: 'radio',\n  orientation: 'horizontal',\n});\n\nexport const RadioGroupProvider = RadioGroupContext;\n\nexport const useRadioGroupContext = () => use(RadioGroupContext);\n","import type { ComponentProps } from 'react';\nimport { Indicator, Item } from '@radix-ui/react-radio-group';\n\nimport { Circle } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { radioCircleVariants, radioIndicatorVariants, radioVariants } from './styles';\n\nexport const Radio = ({ className, ...props }: ComponentProps<typeof Item>) => (\n  <Item {...props} className={cn(radioCircleVariants(), radioVariants(), 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()} />\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 { radioItemButtonVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item>;\n\nexport const RadioGroupItemButton = ({ ref, className, children, ...props }: Props) => (\n  <Item ref={ref} {...props} className={cn(radioItemButtonVariants(), className)}>\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 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 id = useId();\n\n  const item = (() => {\n    if (variant === 'button')\n      return (\n        <RadioGroupItemButton {...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 {...props} id={id} />}\n        className={cn(variant === 'radio-block' && 'tw:flex-1', className)}\n      >\n        <FieldBox.Title>{children}</FieldBox.Title>\n        {description && <FieldBox.Description>{description}</FieldBox.Description>}\n      </FieldBox>\n    );\n  })();\n\n  if (!tooltip) {\n    return item;\n  }\n\n  return (\n    <Tooltip tooltip={tooltip} variant={tooltipVariant} placement={tooltipPlacement} triggerAsChild>\n      {item}\n    </Tooltip>\n  );\n};\n","import { Separator } from '../Separator';\n\nimport { useRadioGroupContext } from './context';\n\nexport const RadioGroupSeparator = () => {\n  const { orientation } = useRadioGroupContext();\n  const invertedOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n  const size = orientation === 'horizontal' ? '1/2' : 'full';\n  const className = orientation === 'horizontal' ? 'tw:mx-2' : 'tw:my-2';\n\n  return <Separator orientation={invertedOrientation} size={size} className={className} />;\n};\n","import type { ComponentProps } from 'react';\nimport * as RRadioGroup from '@radix-ui/react-radio-group';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport type { Orientation, Variant } from './context';\nimport { RadioGroupProvider } from './context';\nimport { RadioGroupItem } from './RadioGroupItem';\nimport { RadioGroupSeparator } from './RadioGroupSeparator';\n\nconst radioGroupVariants = cva(['tw:flex'], {\n  variants: {\n    orientation: {\n      horizontal: ['tw:gap-2'],\n      vertical: ['tw:flex-col', 'tw:gap-3'],\n    },\n    variant: {\n      button: [],\n      radio: [],\n      'radio-block': ['tw:w-full'],\n    },\n  },\n});\n\ntype Props<Value> = {\n  variant?: Variant;\n  orientation?: Orientation;\n  onValueChange?: (value: Value) => void;\n  value?: Value | null;\n  defaultValue?: Value | null;\n} & Omit<\n  ComponentProps<typeof RRadioGroup.Root>,\n  'asChild' | 'orientation' | 'onValueChange' | 'onChange' | 'value' | 'defaultValue'\n>;\n\nexport const RadioGroup = <Value extends string = string>({\n  variant = 'radio',\n  className,\n  disabled = false,\n  orientation = 'horizontal',\n  onValueChange,\n  children,\n  value,\n  defaultValue,\n  ...props\n}: Props<Value>) => (\n  <RRadioGroup.Root\n    {...props}\n    onValueChange={onValueChange}\n    orientation={orientation}\n    className={cn(radioGroupVariants({ orientation, variant, className }))}\n    disabled={disabled}\n    value={value ?? void 0}\n    defaultValue={defaultValue ?? void 0}\n  >\n    <RadioGroupProvider value={{ variant, orientation }}>{children}</RadioGroupProvider>\n  </RRadioGroup.Root>\n);\n\nRadioGroup.Item = RadioGroupItem;\nRadioGroup.Separator = RadioGroupSeparator;\n"],"mappings":";;;;;;;;;;;;AAKA,MAAM,oBAAoB,cAGvB;CACD,SAAS;CACT,aAAa;AACf,CAAC;AAED,MAAa,qBAAqB;AAElC,MAAa,6BAA6B,IAAI,iBAAiB;;ACP/D,MAAa,SAAS,EAAE,WAAW,GAAG,YACpC,oBAAC,MAAD;CAAM,GAAI;CAAO,WAAW,GAAG,oBAAoB,GAAG,cAAc,GAAG,SAAS;CAC9E,UAAA,oBAAC,WAAD;EAAW,WAAW,GAAG,WAAW,mBAAmB,mBAAmB;EAGxE,UAAA,oBAAC,QAAD,EAAQ,WAAW,uBAAuB,EAAI,CAAA;CACrC,CAAA;AACP,CAAA;;ACNR,MAAa,wBAAwB,EAAE,KAAK,WAAW,UAAU,GAAG,YAClE,oBAAC,MAAD;CAAW;CAAK,GAAI;CAAO,WAAW,GAAG,wBAAwB,GAAG,SAAS;CAC1E;AACG,CAAA;;ACWR,MAAa,kBAA6C,EACxD,UACA,WACA,SACA,gBACA,kBACA,aACA,GAAG,YACW;CACd,MAAM,EAAE,YAAY,qBAAqB;CACzC,MAAM,KAAK,MAAM;CAEjB,MAAM,cAAc;EAClB,IAAI,YAAY,UACd,OACE,oBAAC,sBAAD;GAAsB,GAAI;GAAkB;GACzC;EACmB,CAAA;EAG1B,OACE,qBAAC,UAAD;GACE,SAAS,YAAY,gBAAgB,UAAU;GAC/C,SAAS;GACT,SAAS,oBAAC,OAAD;IAAO,GAAI;IAAW;GAAK,CAAA;GACpC,WAAW,GAAG,YAAY,iBAAiB,aAAa,SAAS;GAJnE,UAAA,CAME,oBAAC,SAAS,OAAV,EAAiB,SAAyB,CAAA,GACzC,eAAe,oBAAC,SAAS,aAAV,EAAA,UAAuB,YAAkC,CAAA,CACjE;;CAEd,EAAA,CAAG;CAEH,IAAI,CAAC,SACH,OAAO;CAGT,OACE,oBAAC,SAAD;EAAkB;EAAS,SAAS;EAAgB,WAAW;EAAkB,gBAAA;EAC9E,UAAA;CACM,CAAA;AAEb;;AC7DA,MAAa,4BAA4B;CACvC,MAAM,EAAE,gBAAgB,qBAAqB;CAK7C,OAAO,oBAAC,WAAD;EAAW,aAJU,gBAAgB,eAAe,aAAa;EAIpB,MAHvC,gBAAgB,eAAe,QAAQ;EAGY,WAF9C,gBAAgB,eAAe,YAAY;CAE0B,CAAA;AACzF;;ACAA,MAAM,qBAAqB,IAAI,CAAC,SAAS,GAAG,EAC1C,UAAU;CACR,aAAa;EACX,YAAY,CAAC,UAAU;EACvB,UAAU,CAAC,eAAe,UAAU;CACtC;CACA,SAAS;EACP,QAAQ,CAAC;EACT,OAAO,CAAC;EACR,eAAe,CAAC,WAAW;CAC7B;AACF,EACF,CAAC;AAaD,MAAa,cAA6C,EACxD,UAAU,SACV,WACA,WAAW,OACX,cAAc,cACd,eACA,UACA,OACA,cACA,GAAG,YAEH,oBAAC,YAAY,MAAb;CACE,GAAI;CACW;CACF;CACb,WAAW,GAAG,mBAAmB;EAAE;EAAa;EAAS;CAAU,CAAC,CAAC;CAC3D;CACV,OAAO,SAAS,KAAK;CACrB,cAAc,gBAAgB,KAAK;CAEnC,UAAA,oBAAC,oBAAD;EAAoB,OAAO;GAAE;GAAS;EAAY;EAAI;CAA6B,CAAA;AACnE,CAAA;AAGpB,WAAW,OAAO;AAClB,WAAW,YAAY"}

package/dist/{Resizable-D8zs0kcq.js → Resizable-Co-L3qg7.js}

@@ -1,8 +1,8 @@
-import { cn } from "./classNames-DcGnTh2N.js";
+import { cn } from "./classNames-DkX30VJU.js";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 import { Group, Panel as ResizablePanel, Separator, useDefaultLayout } from "react-resizable-panels";
-//#region src/components/Resizable/ResizableHandle.tsx
+// src/components/Resizable/ResizableHandle.tsx
 const resizableHandleVariants = cva([
 	"tw:bg-border",
 	"tw:relative",
@@ -37,8 +37,7 @@ const ResizableHandle = ({ className, ...props }) => {
 		...props
 	});
 };
-//#endregion
-//#region src/components/Resizable/ResizablePanelGroup.tsx
+// src/components/Resizable/ResizablePanelGroup.tsx
 const ResizablePanelGroup = ({ className, orientation = "horizontal", ...props }) => {
 	return /* @__PURE__ */ jsx(Group, {
 		orientation,
@@ -46,7 +45,6 @@ const ResizablePanelGroup = ({ className, orientation = "horizontal", ...props }
 		...props
 	});
 };
-//#endregion
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup, useDefaultLayout };
 
-//# sourceMappingURL=Resizable-D8zs0kcq.js.map
+//# sourceMappingURL=Resizable-Co-L3qg7.js.map

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

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

package/dist/{Search-vyZwGKMU.js → Search-OgaNjqQM.js}

@@ -1,10 +1,11 @@
-import { cn } from "./classNames-DcGnTh2N.js";
-import { createPrefixedString, debounce, noop } from "./utils-DwC9u0tM.js";
-import { Search as Search$1, Sparkles, X } from "./icons-ZIeZXXS7.js";
-import { useEffect, useMemo, useState } from "react";
+import { cn } from "./classNames-DkX30VJU.js";
+import { createPrefixedString, debounce, noop } from "./utils-DjFceY3H.js";
+import { Search as Search$1, Sparkles, X } from "./icons-DDR9dFSr.js";
+import { useStableCallback } from "./internal/hooks/useStableCallback.js";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Search/ClearButton.tsx
+// src/components/Search/ClearButton.tsx
 const ClearButton = ({ onClick, testId }) => {
 	const handleMouseDown = (event) => {
 		event.preventDefault();
@@ -19,8 +20,7 @@ const ClearButton = ({ onClick, testId }) => {
 		children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
 	});
 };
-//#endregion
-//#region src/components/Search/styles.ts
+// src/components/Search/styles.ts
 const searchWrapperVariants = cva([
 	"tw:flex",
 	"tw:items-center",
@@ -80,8 +80,7 @@ const searchInputClassnames = [
 	"tw:placeholder:text-muted-foreground",
 	"tw:disabled:cursor-not-allowed"
 ].join(" ");
-//#endregion
-//#region src/components/Search/utils.ts
+// src/components/Search/utils.ts
 const genSearchTestId = (prefix = "") => {
 	const ps = createPrefixedString(prefix);
 	return {
@@ -91,8 +90,7 @@ const genSearchTestId = (prefix = "") => {
 		clearButton: ps`search-clear-button`
 	};
 };
-//#endregion
-//#region src/components/Search/Search.tsx
+// src/components/Search/Search.tsx
 /**
 * @deprecated Use `SearchInput` instead. `Search` is kept only for the legacy (non-sidebar) layout.
 */
@@ -100,19 +98,26 @@ const Search = ({ ref, suffix, className, onBlur, onChange = noop, disabled = fa
 	const [internalValue, setInternalValue] = useState(() => externalValue != null ? externalValue : defaultValue);
 	const isClearButtonVisible = internalValue !== "" && !disabled && !readOnly;
 	const testId = genSearchTestId(prefixTestId);
-	const debouncedOnChange = useMemo(() => disableDebounce ? onChange : debounce(onChange, debounceDelay), [
-		disableDebounce,
-		debounceDelay,
-		onChange
-	]);
+	const debounceInFlightRef = useRef(false);
+	const handleDebouncedChange = useStableCallback((value, event) => {
+		debounceInFlightRef.current = false;
+		onChange(value, event);
+	});
+	const debouncedOnChange = useMemo(() => debounce(handleDebouncedChange, debounceDelay), [handleDebouncedChange, debounceDelay]);
+	useEffect(() => () => debouncedOnChange.cancel(), [debouncedOnChange]);
 	useEffect(() => {
 		if (externalValue == null) return;
+		if (debounceInFlightRef.current) return;
 		setInternalValue(externalValue);
 	}, [externalValue]);
 	const handleChange = (event) => {
 		const currentValue = event.target.value;
 		setInternalValue(currentValue);
-		debouncedOnChange(currentValue, event);
+		if (disableDebounce) onChange(currentValue, event);
+		else {
+			debounceInFlightRef.current = true;
+			debouncedOnChange(currentValue, event);
+		}
 	};
 	const handleBlur = (event) => {
 		const currentValue = event.target.value;
@@ -120,6 +125,8 @@ const Search = ({ ref, suffix, className, onBlur, onChange = noop, disabled = fa
 		onBlur?.(currentValue, event);
 	};
 	const handleClear = (event) => {
+		debouncedOnChange.cancel();
+		debounceInFlightRef.current = false;
 		setInternalValue("");
 		onChange?.("", event);
 		onClear?.();
@@ -157,8 +164,7 @@ const Search = ({ ref, suffix, className, onBlur, onChange = noop, disabled = fa
 		]
 	});
 };
-//#endregion
-//#region src/components/Search/SearchForm.tsx
+// src/components/Search/SearchForm.tsx
 const SearchForm = ({ ref, onSubmit, name = "search-field", ...props }) => {
 	const handleSubmit = (event) => {
 		event.preventDefault();
@@ -178,7 +184,6 @@ const SearchForm = ({ ref, onSubmit, name = "search-field", ...props }) => {
 		})
 	});
 };
-//#endregion
 export { Search, SearchForm };
 
-//# sourceMappingURL=Search-vyZwGKMU.js.map
+//# sourceMappingURL=Search-OgaNjqQM.js.map

package/dist/Search-OgaNjqQM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search-OgaNjqQM.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, useRef, 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 { useStableCallback } from '../../hooks/useStableCallback';\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  // A pending debounced call; the controlled-value sync skips while set so typed characters survive.\n  const debounceInFlightRef = useRef(false);\n\n  // Stable, so a new `onChange` never recreates the debounce and strands a pending call.\n  const handleDebouncedChange = useStableCallback(\n    (value: string, event: ChangeEvent<HTMLInputElement>) => {\n      debounceInFlightRef.current = false;\n      onChange(value, event);\n    },\n  );\n\n  const debouncedOnChange = useMemo(\n    () => debounce(handleDebouncedChange, debounceDelay),\n    [handleDebouncedChange, debounceDelay],\n  );\n\n  useEffect(() => () => debouncedOnChange.cancel(), [debouncedOnChange]);\n\n  // Skipped while a debounced call is in flight, so the input doesn't snap back mid-typing.\n  useEffect(() => {\n    if (externalValue == null) return; // uncontrolled state\n    if (debounceInFlightRef.current) return;\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    if (disableDebounce) {\n      onChange(currentValue, event);\n    } else {\n      debounceInFlightRef.current = true;\n      debouncedOnChange(currentValue, event);\n    }\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    debouncedOnChange.cancel();\n    debounceInFlightRef.current = false;\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-muted-foreground\" />\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-DyYXyw3u.js → SearchInput-eLS-uvOn.js}

@@ -1,9 +1,10 @@
-import { debounce } from "./utils-DwC9u0tM.js";
-import { Search, X } from "./icons-ZIeZXXS7.js";
-import { InputGroup } from "./InputGroup-CZv_7QlM.js";
+import { debounce } from "./utils-DjFceY3H.js";
+import { Search, X } from "./icons-DDR9dFSr.js";
+import { useStableCallback } from "./internal/hooks/useStableCallback.js";
+import { InputGroup } from "./InputGroup-BWeanEo7.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/blocks/SearchInput/SearchInput.tsx
+// src/blocks/SearchInput/SearchInput.tsx
 /**
 * Debounced search input with a search icon and optional clear button.
 *
@@ -15,26 +16,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const SearchInput = ({ ref, state, focusVariant, className, value: valueProp, defaultValue, onValueChange, onValueBlur, onChange, onBlur, onClear, allowClear = false, disableDebounce = false, debounceDelay = 300, disabled, readOnly, ...restInputProps }) => {
 	const [internalValue, setInternalValue] = useState(valueProp != null ? valueProp : defaultValue ?? "");
 	const debounceInFlightRef = useRef(false);
-	const cancelRef = useRef(() => {});
-	const debouncedOnValueChange = useMemo(() => {
-		if (!onValueChange || disableDebounce) {
-			cancelRef.current = () => {};
-			return onValueChange;
-		}
-		const d = debounce((val) => {
-			debounceInFlightRef.current = false;
-			onValueChange(val);
-		}, debounceDelay);
-		cancelRef.current = d.cancel;
-		return d;
-	}, [
-		onValueChange,
-		disableDebounce,
-		debounceDelay
-	]);
-	useEffect(() => {
-		return () => cancelRef.current();
-	}, [debouncedOnValueChange]);
+	const handleDebouncedValueChange = useStableCallback((val) => {
+		debounceInFlightRef.current = false;
+		onValueChange?.(val);
+	});
+	const debouncedOnValueChange = useMemo(() => debounce(handleDebouncedValueChange, debounceDelay), [handleDebouncedValueChange, debounceDelay]);
+	useEffect(() => () => debouncedOnValueChange.cancel(), [debouncedOnValueChange]);
 	useEffect(() => {
 		if (valueProp == null) return;
 		if (debounceInFlightRef.current) return;
@@ -44,8 +31,11 @@ const SearchInput = ({ ref, state, focusVariant, className, value: valueProp, de
 	const handleChange = (event) => {
 		const val = event.target.value;
 		setInternalValue(val);
-		if (!disableDebounce && debouncedOnValueChange) debounceInFlightRef.current = true;
-		debouncedOnValueChange?.(val);
+		if (disableDebounce) onValueChange?.(val);
+		else if (onValueChange) {
+			debounceInFlightRef.current = true;
+			debouncedOnValueChange(val);
+		}
 		onChange?.(event);
 	};
 	const handleBlur = (event) => {
@@ -53,7 +43,7 @@ const SearchInput = ({ ref, state, focusVariant, className, value: valueProp, de
 		onBlur?.(event);
 	};
 	const handleClear = () => {
-		cancelRef.current();
+		debouncedOnValueChange.cancel();
 		debounceInFlightRef.current = false;
 		setInternalValue("");
 		onValueChange?.("");
@@ -89,7 +79,6 @@ const SearchInput = ({ ref, state, focusVariant, className, value: valueProp, de
 		]
 	});
 };
-//#endregion
 export { SearchInput };
 
-//# sourceMappingURL=SearchInput-DyYXyw3u.js.map
+//# sourceMappingURL=SearchInput-eLS-uvOn.js.map

package/dist/SearchInput-eLS-uvOn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput-eLS-uvOn.js","names":[],"sources":["../src/blocks/SearchInput/SearchInput.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ChangeEventHandler, ComponentProps, FocusEventHandler } from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { Search, X } from '../../icons';\nimport { debounce } from '../../utils';\n\ntype InputGroupProps = Pick<ComponentProps<typeof InputGroup>, 'focusVariant' | 'state'>;\n\ntype InputGroupInputProps = Omit<ComponentProps<typeof InputGroup.Input>, 'value' | 'defaultValue'>;\n\n/**\n * - `onValueChange` is debounced by default (300ms).\n * - `value={null}` / `undefined` is uncontrolled (falls back to `defaultValue`, else empty).\n * - `value={\"\"}` is controlled-empty.\n */\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: string | null;\n    defaultValue?: string | null;\n    /** Debounced; fires at once on clear and with `disableDebounce`. Use `onChange` per keystroke. */\n    onValueChange?: (value: string) => void;\n    /** Called with the value on blur. */\n    onValueBlur?: (value: string) => void;\n    onClear?: () => void;\n    /** Shows the clear (x) button while the value is non-empty. */\n    allowClear?: boolean;\n    /** `onValueChange` fires on every keystroke. */\n    disableDebounce?: boolean;\n    /** In ms, default 300; ignored with `disableDebounce`. */\n    debounceDelay?: number;\n  };\n\n/**\n * Debounced search input with a search icon and optional clear button.\n *\n * - Use for list / table search and free-text filters, e.g. in `PageToolbar.Search`.\n * - Not for plain text (`TextInput`) or picking from a known list (`Combobox`).\n *\n * @see RECIPES.md#filter-toolbar\n */\nexport const SearchInput = ({\n  ref,\n\n  // group props\n  state,\n  focusVariant,\n  className,\n\n  // own props\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n  onClear,\n  allowClear = false,\n  disableDebounce = false,\n  debounceDelay = 300,\n\n  // input props\n  disabled,\n  readOnly,\n  ...restInputProps\n}: Props) => {\n  const [internalValue, setInternalValue] = useState<string>(\n    valueProp != null ? valueProp : (defaultValue ?? ''),\n  );\n\n  // A pending debounced call; the controlled-value sync skips while set so typed characters survive.\n  const debounceInFlightRef = useRef(false);\n\n  // Stable, so a new `onValueChange` never recreates the debounce and strands a pending call.\n  const handleDebouncedValueChange = useStableCallback((val: string) => {\n    debounceInFlightRef.current = false;\n    onValueChange?.(val);\n  });\n\n  const debouncedOnValueChange = useMemo(\n    () => debounce(handleDebouncedValueChange, debounceDelay),\n    [handleDebouncedValueChange, debounceDelay],\n  );\n\n  useEffect(() => () => debouncedOnValueChange.cancel(), [debouncedOnValueChange]);\n\n  // Skipped while a debounced call is in flight, so the input doesn't snap back mid-typing.\n  useEffect(() => {\n    if (valueProp == null) return;\n    if (debounceInFlightRef.current) return;\n    setInternalValue(valueProp);\n  }, [valueProp]);\n\n  const canClear = allowClear && !!internalValue && !disabled && !readOnly;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    const val = event.target.value;\n    setInternalValue(val);\n    if (disableDebounce) {\n      onValueChange?.(val);\n    } else if (onValueChange) {\n      debounceInFlightRef.current = true;\n      debouncedOnValueChange(val);\n    }\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    onValueBlur?.(event.target.value);\n    onBlur?.(event);\n  };\n\n  const handleClear = () => {\n    debouncedOnValueChange.cancel();\n    debounceInFlightRef.current = false;\n    setInternalValue('');\n    onValueChange?.('');\n    onClear?.();\n  };\n\n  return (\n    <InputGroup state={state} focusVariant={focusVariant} className={className}>\n      <InputGroup.Addon align=\"inline-start\">\n        <Search className=\"tw:size-4 tw:shrink-0 tw:text-muted-foreground\" />\n      </InputGroup.Addon>\n\n      <InputGroup.Input\n        {...restInputProps}\n        ref={ref}\n        value={internalValue}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      {canClear && (\n        <InputGroup.Addon align=\"inline-end\">\n          <InputGroup.Button\n            aria-label=\"Clear search\"\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={handleClear}\n          >\n            <X className=\"tw:size-4\" />\n          </InputGroup.Button>\n        </InputGroup.Addon>\n      )}\n    </InputGroup>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AA0CA,MAAa,eAAe,EAC1B,KAGA,OACA,cACA,WAGA,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,SACA,aAAa,OACb,kBAAkB,OAClB,gBAAgB,KAGhB,UACA,UACA,GAAG,qBACQ;CACX,MAAM,CAAC,eAAe,oBAAoB,SACxC,aAAa,OAAO,YAAa,gBAAgB,EACnD;CAGA,MAAM,sBAAsB,OAAO,KAAK;CAGxC,MAAM,6BAA6B,mBAAmB,QAAgB;EACpE,oBAAoB,UAAU;EAC9B,gBAAgB,GAAG;CACrB,CAAC;CAED,MAAM,yBAAyB,cACvB,SAAS,4BAA4B,aAAa,GACxD,CAAC,4BAA4B,aAAa,CAC5C;CAEA,sBAAsB,uBAAuB,OAAO,GAAG,CAAC,sBAAsB,CAAC;CAG/E,gBAAgB;EACd,IAAI,aAAa,MAAM;EACvB,IAAI,oBAAoB,SAAS;EACjC,iBAAiB,SAAS;CAC5B,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,WAAW,cAAc,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC;CAEhE,MAAM,gBAAsD,UAAU;EACpE,MAAM,MAAM,MAAM,OAAO;EACzB,iBAAiB,GAAG;EACpB,IAAI,iBACF,gBAAgB,GAAG;OACd,IAAI,eAAe;GACxB,oBAAoB,UAAU;GAC9B,uBAAuB,GAAG;EAC5B;EACA,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EACjE,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAEA,MAAM,oBAAoB;EACxB,uBAAuB,OAAO;EAC9B,oBAAoB,UAAU;EAC9B,iBAAiB,EAAE;EACnB,gBAAgB,EAAE;EAClB,UAAU;CACZ;CAEA,OACE,qBAAC,YAAD;EAAmB;EAAqB;EAAyB;EAAjE,UAAA;GACE,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IACtB,UAAA,oBAAC,QAAD,EAAQ,WAAU,iDAAkD,CAAA;GACpD,CAAA;GAElB,oBAAC,WAAW,OAAZ;IACE,GAAI;IACC;IACL,OAAO;IACP,UAAU;IACV,QAAQ;IACE;IACA;GACX,CAAA;GAEA,YACC,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IACtB,UAAA,oBAAC,WAAW,QAAZ;KACE,cAAW;KACX,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;IACT,CAAA;GACH,CAAA;EAEV;;AAEhB"}

package/dist/{SectionNav-tLK3iF6c.js → SectionNav-L81iJBo3.js}

@@ -1,13 +1,13 @@
-import { cn } from "./classNames-DcGnTh2N.js";
-import { noop } from "./utils-DwC9u0tM.js";
-import { ChevronDown } from "./icons-ZIeZXXS7.js";
-import { Button } from "./Button-BNkyYU8u.js";
-import { DropdownMenu } from "./DropdownMenu-CcVbZ_5u.js";
-import { Badge } from "./Badge-5GHIsgRS.js";
-import { Collapsible } from "./Collapsible-DD4xTL75.js";
+import { cn } from "./classNames-DkX30VJU.js";
+import { noop } from "./utils-DjFceY3H.js";
+import { ChevronDown } from "./icons-DDR9dFSr.js";
+import { Button } from "./Button-DbvGzEDb.js";
+import { DropdownMenu } from "./DropdownMenu-Ba9atqDa.js";
+import { Badge } from "./Badge-CFRhducL.js";
+import { Collapsible } from "./Collapsible-zsXk4Vpp.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region src/blocks/SectionNav/SectionNavItemContent.tsx
+// src/blocks/SectionNav/SectionNavItemContent.tsx
 /** One row's body, shared by the tree and the collapsed dropdown. */
 const SectionNavItemContent = ({ item, active, showDescription = false, expanded, showIcon = true }) => {
 	const Icon = item.icon;
@@ -35,8 +35,7 @@ const SectionNavItemContent = ({ item, active, showDescription = false, expanded
 		})]
 	});
 };
-//#endregion
-//#region src/blocks/SectionNav/SectionNavGroupRow.tsx
+// src/blocks/SectionNav/SectionNavGroupRow.tsx
 /**
 * The ring is **inset**, not an outline. A row is exactly as wide as the nav column, and
 * `PageLayout.Content nav` makes that column a scroll container (`overflow-y-auto`, which forces
@@ -114,8 +113,7 @@ const SectionNavGroupRow = ({ group, activeId, renderItem, showDescriptions }) =
 		}) })]
 	});
 };
-//#endregion
-//#region src/blocks/SectionNav/SectionNav.tsx
+// src/blocks/SectionNav/SectionNav.tsx
 /**
 * One page's grouped section nav: a tree when wide, a dropdown when narrow, both rendered via `renderItem`.
 *
@@ -238,7 +236,6 @@ const SectionNav = ({ groups, activeId, renderItem, showDescriptions = false, la
 		})] })
 	})] });
 };
-//#endregion
 export { SectionNav };
 
-//# sourceMappingURL=SectionNav-tLK3iF6c.js.map
+//# sourceMappingURL=SectionNav-L81iJBo3.js.map

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

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