@keboola/design 11.0.0 → 11.0.1

package/dist/RadioGroup-sIveSsNa.js

@@ -0,0 +1,233 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Tooltip } from "./utils-D0c5VAyF.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { Circle } from "./icons-Cek151jC.js";
+import { Separator } from "./internal/components/Separator.js";
+import { FieldBox } from "./FieldBox-D7DYtX_m.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
+const RadioGroupContext = createContext({
+	variant: "radio",
+	orientation: "horizontal"
+});
+const RadioGroupProvider = RadioGroupContext;
+const useRadioGroupContext = () => use(RadioGroupContext);
+//#endregion
+//#region src/components/RadioGroup/styles.ts
+const radioVariants = cva([
+	"tw:bg-transparent",
+	"tw:p-0",
+	"tw:peer",
+	"tw:cursor-pointer",
+	"tw:whitespace-nowrap",
+	"tw:shrink-0",
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:disabled:cursor-not-allowed",
+	"tw:size-4",
+	"tw:rounded-full",
+	"tw:border",
+	"tw:border-solid"
+], {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: [
+			"tw:disabled:opacity-40",
+			"tw:data-[state=checked]:border-primary",
+			"tw:data-[state=unchecked]:border-neutral-200",
+			"tw:data-[state=unchecked]:hover:border-primary",
+			"tw:data-[state=unchecked]:disabled:hover:border-neutral-200",
+			"tw:focus-visible:ring-2",
+			"tw:focus-visible:ring-ring/30"
+		],
+		argo: [
+			"tw:disabled:opacity-50",
+			"tw:border-input",
+			"tw:transition-colors",
+			"tw:data-[state=checked]:bg-primary",
+			"tw:data-[state=checked]:border-primary",
+			"tw:data-[state=unchecked]:not-disabled:hover:bg-accent",
+			"tw:data-[state=checked]:not-disabled:hover:bg-primary",
+			"tw:focus-visible:outline-hidden",
+			"tw:focus-visible:border-primary",
+			"tw:focus-visible:ring-2",
+			"tw:focus-visible:ring-ring/50"
+		]
+	} }
+});
+const radioIndicatorVariants = cva(["tw:size-2.5", "tw:fill-current"], {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: ["tw:text-primary"],
+		argo: ["tw:text-primary-foreground"]
+	} }
+});
+const radioItemButtonVariants = cva([
+	"tw:bg-transparent",
+	"tw:p-0",
+	"tw:peer",
+	"tw:cursor-pointer",
+	"tw:whitespace-nowrap",
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:disabled:cursor-not-allowed",
+	"tw:w-full",
+	"tw:px-2",
+	"tw:py-1.5",
+	"tw:uppercase",
+	"tw:font-semibold",
+	"tw:font-sans",
+	"tw:text-[11px]",
+	"tw:whitespace-nowrap",
+	"tw:tracking-widest",
+	"tw:leading-[18px]",
+	"tw:border",
+	"tw:border-solid",
+	"tw:rounded"
+], {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: [
+			"tw:disabled:opacity-40",
+			"tw:text-secondary-600",
+			"tw:border-secondary-500",
+			"tw:data-[state=unchecked]:hover:bg-secondary-500",
+			"tw:data-[state=unchecked]:hover:text-white",
+			"tw:data-[state=unchecked]:disabled:hover:bg-white",
+			"tw:data-[state=unchecked]:disabled:hover:text-secondary-500",
+			"tw:data-[state=checked]:disabled:cursor-not-allowed",
+			"tw:data-[state=unchecked]:bg-white",
+			"tw:data-[state=checked]:bg-secondary-500",
+			"tw:data-[state=checked]:text-white",
+			"tw:data-[state=checked]:cursor-default",
+			"tw:focus-visible:outline",
+			"tw:focus-visible:outline-ring",
+			"tw:focus-visible:ring-4",
+			"tw:focus-visible:ring-ring/30"
+		],
+		argo: [
+			"tw:disabled:opacity-50",
+			"tw:text-foreground",
+			"tw:border-input",
+			"tw:transition-colors",
+			"tw:data-[state=unchecked]:bg-muted",
+			"tw:data-[state=unchecked]:not-disabled:hover:bg-accent",
+			"tw:data-[state=unchecked]:not-disabled:hover:text-accent-foreground",
+			"tw:data-[state=checked]:bg-primary",
+			"tw:data-[state=checked]:border-primary",
+			"tw:data-[state=checked]:text-primary-foreground",
+			"tw:data-[state=checked]:not-disabled:cursor-default",
+			"tw:focus-visible:outline-hidden",
+			"tw:focus-visible:border-primary",
+			"tw:focus-visible:ring-2",
+			"tw:focus-visible:ring-ring/50"
+		]
+	} }
+});
+//#endregion
+//#region src/components/RadioGroup/Radio.tsx
+const Radio = ({ className, styleVariant = "default", ...props }) => /* @__PURE__ */ jsx(Item, {
+	...props,
+	className: cn(radioVariants({ variant: styleVariant }), className),
+	children: /* @__PURE__ */ jsx(Indicator, {
+		className: cn("tw:flex", "tw:items-center", "tw:justify-center"),
+		children: /* @__PURE__ */ jsx(Circle, { className: radioIndicatorVariants({ variant: styleVariant }) })
+	})
+});
+//#endregion
+//#region src/components/RadioGroup/RadioGroupItemButton.tsx
+const RadioGroupItemButton = ({ ref, className, children, styleVariant = "default", ...props }) => /* @__PURE__ */ jsx(Item, {
+	ref,
+	...props,
+	className: cn(radioItemButtonVariants({ variant: styleVariant }), className),
+	children
+});
+//#endregion
+//#region src/components/RadioGroup/RadioGroupItem.tsx
+const RadioGroupItem = ({ children, className, tooltip, tooltipVariant, tooltipPlacement, description, ...props }) => {
+	const { variant } = useRadioGroupContext();
+	const styleVariant = useArgoDesign() ? "argo" : "default";
+	const id = useId();
+	const item = (() => {
+		if (variant === "button") return /* @__PURE__ */ jsx(RadioGroupItemButton, {
+			styleVariant,
+			...props,
+			className,
+			children
+		});
+		return /* @__PURE__ */ jsxs(FieldBox, {
+			variant: variant === "radio-block" ? "boxed" : "default",
+			htmlFor: id,
+			control: /* @__PURE__ */ jsx(Radio, {
+				styleVariant,
+				...props,
+				id
+			}),
+			className: cn(variant === "radio-block" && "tw:flex-1", className),
+			children: [/* @__PURE__ */ jsx(FieldBox.Title, { children }), description && /* @__PURE__ */ jsx(FieldBox.Description, { children: description })]
+		});
+	})();
+	if (!tooltip) return item;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		tooltip,
+		variant: tooltipVariant,
+		placement: tooltipPlacement,
+		triggerAsChild: true,
+		children: item
+	});
+};
+//#endregion
+//#region src/components/RadioGroup/RadioGroupSeparator.tsx
+const RadioGroupSeparator = () => {
+	const { orientation } = useRadioGroupContext();
+	return /* @__PURE__ */ jsx(Separator, {
+		orientation: orientation === "horizontal" ? "vertical" : "horizontal",
+		size: orientation === "horizontal" ? "1/2" : "full",
+		className: orientation === "horizontal" ? "tw:mx-2" : "tw:my-2"
+	});
+};
+//#endregion
+//#region src/components/RadioGroup/RadioGroup.tsx
+const radioGroupVariants = cva(["tw:flex"], { variants: {
+	orientation: {
+		horizontal: ["tw:gap-2"],
+		vertical: ["tw:flex-col", "tw:gap-3"]
+	},
+	variant: {
+		button: [],
+		radio: [],
+		"radio-block": ["tw:w-full"]
+	}
+} });
+const RadioGroup = ({ variant = "radio", className, disabled = false, orientation = "horizontal", onValueChange, children, value, defaultValue, ...props }) => /* @__PURE__ */ jsx(RRadioGroup.Root, {
+	...props,
+	onValueChange,
+	orientation,
+	className: cn(radioGroupVariants({
+		orientation,
+		variant,
+		className
+	})),
+	disabled,
+	value: value ?? void 0,
+	defaultValue: defaultValue ?? void 0,
+	children: /* @__PURE__ */ jsx(RadioGroupProvider, {
+		value: {
+			variant,
+			orientation
+		},
+		children
+	})
+});
+RadioGroup.Item = RadioGroupItem;
+RadioGroup.Separator = RadioGroupSeparator;
+//#endregion
+export { RadioGroup };
+
+//# sourceMappingURL=RadioGroup-sIveSsNa.js.map

package/dist/RadioGroup-sIveSsNa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup-sIveSsNa.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/Resizable-D3vYToZH.js

@@ -0,0 +1,52 @@
+import { cn } from "./classNames-BzrkDnOD.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
+const resizableHandleVariants = cva([
+	"tw:bg-border",
+	"tw:relative",
+	"tw:flex",
+	"tw:w-px",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:focus-visible:ring-ring",
+	"tw:focus-visible:ring-1",
+	"tw:focus-visible:ring-offset-1",
+	"tw:focus-visible:ring-offset-ring-offset",
+	"tw:focus-visible:outline-hidden",
+	"tw:after:absolute",
+	"tw:after:inset-y-0",
+	"tw:after:left-1/2",
+	"tw:after:w-1",
+	"tw:after:-translate-x-1/2",
+	"tw:aria-[orientation=horizontal]:h-px",
+	"tw:aria-[orientation=horizontal]:w-full",
+	"tw:aria-[orientation=horizontal]:after:left-0",
+	"tw:aria-[orientation=horizontal]:after:top-1/2",
+	"tw:aria-[orientation=horizontal]:after:bottom-auto",
+	"tw:aria-[orientation=horizontal]:after:h-1",
+	"tw:aria-[orientation=horizontal]:after:w-full",
+	"tw:aria-[orientation=horizontal]:after:translate-x-0",
+	"tw:aria-[orientation=horizontal]:after:-translate-y-1/2",
+	"tw:[&[aria-orientation=horizontal]>div]:rotate-90"
+]);
+const ResizableHandle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Separator, {
+		className: resizableHandleVariants({ className }),
+		...props
+	});
+};
+//#endregion
+//#region src/components/Resizable/ResizablePanelGroup.tsx
+const ResizablePanelGroup = ({ className, orientation = "horizontal", ...props }) => {
+	return /* @__PURE__ */ jsx(Group, {
+		orientation,
+		className: cn("tw:flex tw:h-full tw:w-full", orientation === "vertical" && "tw:flex-col", className),
+		...props
+	});
+};
+//#endregion
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup, useDefaultLayout };
+
+//# sourceMappingURL=Resizable-D3vYToZH.js.map

package/dist/Resizable-D3vYToZH.js.map

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

package/dist/Search-3UiqNZRj.js

@@ -0,0 +1,184 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { createPrefixedString, debounce, noop } from "./utils-D0c5VAyF.js";
+import { Search as Search$1, Sparkles, X } from "./icons-Cek151jC.js";
+import { useEffect, useMemo, useState } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Search/ClearButton.tsx
+const ClearButton = ({ onClick, testId }) => {
+	const handleMouseDown = (event) => {
+		event.preventDefault();
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		tabIndex: -1,
+		onMouseDown: handleMouseDown,
+		className: cn("tw:border-none", "tw:bg-transparent", "tw:p-0", "tw:flex", "tw:items-center", "tw:cursor-pointer", "tw:text-muted-foreground", "tw:hover:text-foreground"),
+		"data-testid": testId,
+		children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+	});
+};
+//#endregion
+//#region src/components/Search/styles.ts
+const searchWrapperVariants = cva([
+	"tw:flex",
+	"tw:items-center",
+	"tw:gap-2.5",
+	"tw:text-card-foreground",
+	"tw:transition-all",
+	"tw:font-sans",
+	"tw:has-[input[readonly]]:bg-secondary",
+	"tw:has-[input[readonly]]:focus-within:ring-0",
+	"tw:has-[input[readonly]]:outline-0",
+	"tw:disabled:opacity-40",
+	"tw:[&>input]:py-[15px]"
+], {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: [
+			"tw:rounded-lg",
+			"tw:px-5",
+			"tw:bg-card",
+			"tw:shadow-raised",
+			"tw:outline",
+			"tw:outline-1",
+			"tw:outline-transparent",
+			"tw:has-[input:focus]:outline-1",
+			"tw:has-[input:focus]:ring-4",
+			"tw:has-[input:focus]:outline-ring",
+			"tw:has-[input:focus]:ring-ring/30"
+		],
+		ai: [
+			"tailwindcss-preflight",
+			"tw:relative",
+			"tw:rounded-card",
+			"tw:px-4",
+			"tw:cursor-text",
+			"tw:border-2",
+			"tw:border-transparent",
+			"tw:bg-gradient-to-br",
+			"tw:from-secondary-600",
+			"tw:to-purple-600",
+			"tw:bg-origin-border",
+			"tw:shadow-[inset_0_100vw_rgb(var(--card))]",
+			"tw:has-[input:focus]:ring-4",
+			"tw:has-[input:focus]:ring-ring/30"
+		]
+	} }
+});
+const searchInputClassnames = [
+	"tw:border-none",
+	"tw:bg-transparent",
+	"tw:outline-hidden",
+	"tw:w-full",
+	"tw:p-0",
+	"tw:text-base",
+	"tw:leading-6",
+	"tw:font-normal",
+	"tw:font-sans",
+	"tw:placeholder:text-muted-foreground",
+	"tw:disabled:cursor-not-allowed"
+].join(" ");
+//#endregion
+//#region src/components/Search/utils.ts
+const genSearchTestId = (prefix = "") => {
+	const ps = createPrefixedString(prefix);
+	return {
+		toString: () => prefix,
+		wrapper: ps`search-wrapper`,
+		input: ps`search-input`,
+		clearButton: ps`search-clear-button`
+	};
+};
+//#endregion
+//#region src/components/Search/Search.tsx
+/**
+* @deprecated Use `SearchInput` instead. `Search` is kept only for the legacy (non-sidebar) layout.
+*/
+const Search = ({ ref, suffix, className, onBlur, onChange = noop, disabled = false, readOnly = false, disableDebounce = false, debounceDelay = 300, value: externalValue, defaultValue, testId: prefixTestId = "", placeholder = "Search", onClear, variant = "default", ...rest }) => {
+	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
+	]);
+	useEffect(() => {
+		if (externalValue == null) return;
+		setInternalValue(externalValue);
+	}, [externalValue]);
+	const handleChange = (event) => {
+		const currentValue = event.target.value;
+		setInternalValue(currentValue);
+		debouncedOnChange(currentValue, event);
+	};
+	const handleBlur = (event) => {
+		const currentValue = event.target.value;
+		setInternalValue(currentValue);
+		onBlur?.(currentValue, event);
+	};
+	const handleClear = (event) => {
+		setInternalValue("");
+		onChange?.("", event);
+		onClear?.();
+	};
+	const handleWrapperMouseDown = (event) => {
+		if (disabled || readOnly) return;
+		if (event.target.closest("button, a, input, textarea, [role=\"button\"]")) return;
+		event.preventDefault();
+		event.currentTarget.querySelector("input")?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(searchWrapperVariants({ variant }), { "tw:cursor-not-allowed tw:opacity-40": disabled }, className),
+		"data-testid": testId.wrapper,
+		onMouseDown: handleWrapperMouseDown,
+		children: [
+			variant === "ai" ? /* @__PURE__ */ jsx(Sparkles, { className: "tw:size-4 tw:shrink-0 tw:[&_*]:stroke-aigradient-600" }) : /* @__PURE__ */ jsx(Search$1, { className: "tw:size-4 tw:shrink-0 tw:text-neutral-400" }),
+			/* @__PURE__ */ jsx("input", {
+				...rest,
+				ref,
+				placeholder,
+				"data-testid": testId.input,
+				type: "text",
+				value: internalValue ?? "",
+				onChange: handleChange,
+				onBlur: handleBlur,
+				className: searchInputClassnames,
+				disabled,
+				readOnly
+			}),
+			isClearButtonVisible && /* @__PURE__ */ jsx(ClearButton, {
+				onClick: handleClear,
+				testId: testId.clearButton
+			}),
+			suffix
+		]
+	});
+};
+//#endregion
+//#region src/components/Search/SearchForm.tsx
+const SearchForm = ({ ref, onSubmit, name = "search-field", ...props }) => {
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		onSubmit(event.currentTarget.elements.namedItem(name).value);
+	};
+	const onClear = () => {
+		onSubmit("");
+	};
+	return /* @__PURE__ */ jsx("form", {
+		onSubmit: handleSubmit,
+		children: /* @__PURE__ */ jsx(Search, {
+			...props,
+			ref,
+			onClear,
+			name,
+			disableDebounce: true
+		})
+	});
+};
+//#endregion
+export { Search, SearchForm };
+
+//# sourceMappingURL=Search-3UiqNZRj.js.map

package/dist/Search-3UiqNZRj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search-3UiqNZRj.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-D2fcOv7E.js

@@ -0,0 +1,102 @@
+import { debounce } from "./utils-D0c5VAyF.js";
+import { Search, X } from "./icons-Cek151jC.js";
+import { InputGroup } from "./InputGroup-BJWsI35s.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/SearchInput/SearchInput.tsx
+/**
+* Debounced search input with a leading magnifying-glass icon and optional clear button.
+*
+* **When to use:** the search field inside `PageToolbar.Search`, list / table search, combobox-less
+* free-text filters. `onValueChange` is debounced so callers can wire it directly to fetches without
+* `useMemo` plumbing.
+* **When NOT to use:** for a plain string input use `TextInput`; for selecting from a known enumerated
+* list use `Combobox` (which has its own search built in).
+* **Composition:** typically rendered in `PageToolbar.Search` next to `MultiCombobox` filter pills. Use
+* `allowClear` for the canonical x-to-reset affordance.
+*
+* @see RECIPES.md#filter-toolbar — for the search + filter chips toolbar pattern
+*/
+const SearchInput = ({ ref, state, variant, focusVariant, sizing, 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]);
+	useEffect(() => {
+		if (valueProp == null) return;
+		if (debounceInFlightRef.current) return;
+		setInternalValue(valueProp);
+	}, [valueProp]);
+	const canClear = allowClear && !!internalValue && !disabled && !readOnly;
+	const handleChange = (event) => {
+		const val = event.target.value;
+		setInternalValue(val);
+		if (!disableDebounce && debouncedOnValueChange) debounceInFlightRef.current = true;
+		debouncedOnValueChange?.(val);
+		onChange?.(event);
+	};
+	const handleBlur = (event) => {
+		onValueBlur?.(event.target.value);
+		onBlur?.(event);
+	};
+	const handleClear = () => {
+		cancelRef.current();
+		debounceInFlightRef.current = false;
+		setInternalValue("");
+		onValueChange?.("");
+		onClear?.();
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		state,
+		variant,
+		sizing,
+		focusVariant,
+		className,
+		children: [
+			/* @__PURE__ */ jsx(InputGroup.Addon, {
+				align: "inline-start",
+				children: /* @__PURE__ */ jsx(Search, { className: "tw:size-4 tw:shrink-0 tw:text-muted-foreground" })
+			}),
+			/* @__PURE__ */ jsx(InputGroup.Input, {
+				...restInputProps,
+				ref,
+				value: internalValue,
+				onChange: handleChange,
+				onBlur: handleBlur,
+				disabled,
+				readOnly
+			}),
+			canClear && /* @__PURE__ */ jsx(InputGroup.Addon, {
+				align: "inline-end",
+				children: /* @__PURE__ */ jsx(InputGroup.Button, {
+					"aria-label": "Clear search",
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: handleClear,
+					children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { SearchInput };
+
+//# sourceMappingURL=SearchInput-D2fcOv7E.js.map

package/dist/SearchInput-D2fcOv7E.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput-D2fcOv7E.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 { Search, X } from '../../icons';\nimport { debounce } from '../../utils';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<ComponentProps<typeof InputGroup.Input>, 'value' | 'defaultValue'>;\n\n/**\n * Props for `SearchInput`. `onValueChange` is debounced by default (300ms) so callers can wire it directly\n * to expensive filter / fetch operations without `useMemo` plumbing. `value={null}` / `value={undefined}`\n * is treated as \"not provided\" — the component falls back to `defaultValue` (or, if absent, internal\n * state initialized to empty). `value={\"\"}` is controlled-empty.\n */\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: string | null;\n    defaultValue?: string | null;\n    /** Called with the latest string value after the debounce window (default 300ms). Fires synchronously on clear and when `disableDebounce` is set. For sync echo of every keystroke use `onChange`. */\n    onValueChange?: (value: string) => void;\n    /** Called with the string value on blur. */\n    onValueBlur?: (value: string) => void;\n    /** Called when the user clicks the clear button. Receives no arguments — the value is reset to \"\". */\n    onClear?: () => void;\n    /** Render the trailing clear (x) button when there's a non-empty value. */\n    allowClear?: boolean;\n    /** Bypass the debounce — `onValueChange` fires synchronously on every keystroke. */\n    disableDebounce?: boolean;\n    /** Debounce window in ms. Default 300. Ignored when `disableDebounce` is set. */\n    debounceDelay?: number;\n  };\n\n/**\n * Debounced search input with a leading magnifying-glass icon and optional clear button.\n *\n * **When to use:** the search field inside `PageToolbar.Search`, list / table search, combobox-less\n * free-text filters. `onValueChange` is debounced so callers can wire it directly to fetches without\n * `useMemo` plumbing.\n * **When NOT to use:** for a plain string input use `TextInput`; for selecting from a known enumerated\n * list use `Combobox` (which has its own search built in).\n * **Composition:** typically rendered in `PageToolbar.Search` next to `MultiCombobox` filter pills. Use\n * `allowClear` for the canonical x-to-reset affordance.\n *\n * @see RECIPES.md#filter-toolbar — for the search + filter chips toolbar pattern\n */\nexport const SearchInput = ({\n  ref,\n\n  // group props\n  state,\n  variant,\n  focusVariant,\n  sizing,\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  // Tracks whether a debounced call is pending so the controlled-value sync\n  // effect doesn't overwrite characters the user typed during the debounce window.\n  const debounceInFlightRef = useRef(false);\n  const cancelRef = useRef<() => void>(() => {});\n\n  const debouncedOnValueChange = useMemo(() => {\n    if (!onValueChange || disableDebounce) {\n      cancelRef.current = () => {};\n      return onValueChange;\n    }\n    const d = debounce((val: string) => {\n      debounceInFlightRef.current = false;\n      onValueChange(val);\n    }, debounceDelay);\n    cancelRef.current = d.cancel;\n    return d;\n  }, [onValueChange, disableDebounce, debounceDelay]);\n\n  // Cancel any pending debounced call when the debounced fn changes or on unmount.\n  useEffect(() => {\n    return () => cancelRef.current();\n  }, [debouncedOnValueChange]);\n\n  // Sync controlled value — but skip while a debounced call is in flight to\n  // avoid snapping the input back to the old value 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 && debouncedOnValueChange) debounceInFlightRef.current = true;\n    debouncedOnValueChange?.(val);\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    cancelRef.current();\n    debounceInFlightRef.current = false;\n    setInternalValue('');\n    onValueChange?.('');\n    onClear?.();\n  };\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\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":";;;;;;;;;;;;;;;;;;;AAmDA,MAAa,eAAe,EAC1B,KAGA,OACA,SACA,cACA,QACA,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;CAIA,MAAM,sBAAsB,OAAO,KAAK;CACxC,MAAM,YAAY,aAAyB,CAAC,CAAC;CAE7C,MAAM,yBAAyB,cAAc;EAC3C,IAAI,CAAC,iBAAiB,iBAAiB;GACrC,UAAU,gBAAgB,CAAC;GAC3B,OAAO;EACT;EACA,MAAM,IAAI,UAAU,QAAgB;GAClC,oBAAoB,UAAU;GAC9B,cAAc,GAAG;EACnB,GAAG,aAAa;EAChB,UAAU,UAAU,EAAE;EACtB,OAAO;CACT,GAAG;EAAC;EAAe;EAAiB;CAAa,CAAC;CAGlD,gBAAgB;EACd,aAAa,UAAU,QAAQ;CACjC,GAAG,CAAC,sBAAsB,CAAC;CAI3B,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,CAAC,mBAAmB,wBAAwB,oBAAoB,UAAU;EAC9E,yBAAyB,GAAG;EAC5B,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EACjE,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAEA,MAAM,oBAAoB;EACxB,UAAU,QAAQ;EAClB,oBAAoB,UAAU;EAC9B,iBAAiB,EAAE;EACnB,gBAAgB,EAAE;EAClB,UAAU;CACZ;CAEA,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA;GAOE,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"}