@pipe0/react 0.0.4 → 0.0.6

package/dist/components/defaults/catalog/card-primitives.d.mts

@@ -1,6 +1,7 @@
-import { RenderProp } from "../../../utils/render-slot.mjs";
 import { Button } from "../../ui/button.mjs";
-import { ComponentProps, MouseEvent, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import * as _$react from "react";
+import { ComponentProps, MouseEvent } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/defaults/catalog/card-primitives.d.ts
@@ -23,43 +24,32 @@ declare function CatalogCard({
   ...rest
 }: CatalogCardProps): _$react_jsx_runtime0.JSX.Element;
 type CatalogCardHeaderState = {};
-interface CatalogCardHeaderProps {
-  render?: RenderProp<ComponentProps<"div">, CatalogCardHeaderState>;
-  className?: string;
-  children?: ReactNode;
-}
+interface CatalogCardHeaderProps extends useRender.ComponentProps<"div", CatalogCardHeaderState> {}
 declare function CatalogCardHeader({
   render,
   className,
-  children
-}: CatalogCardHeaderProps): ReactNode;
+  ...props
+}: CatalogCardHeaderProps): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
 interface CatalogCardTitleState {
   label: string;
 }
-interface CatalogCardTitleProps {
-  /** Override the displayed label. Defaults to `card.label` from context. */
-  children?: ReactNode;
-  render?: RenderProp<ComponentProps<"h3">, CatalogCardTitleState>;
-  className?: string;
-}
+interface CatalogCardTitleProps extends useRender.ComponentProps<"h3", CatalogCardTitleState> {}
 declare function CatalogCardTitle({
   children,
   render,
-  className
-}: CatalogCardTitleProps): ReactNode;
+  className,
+  ...props
+}: CatalogCardTitleProps): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
 interface CatalogCardDescriptionState {
   description: string;
 }
-interface CatalogCardDescriptionProps {
-  children?: ReactNode;
-  render?: RenderProp<ComponentProps<"p">, CatalogCardDescriptionState>;
-  className?: string;
-}
+interface CatalogCardDescriptionProps extends useRender.ComponentProps<"p", CatalogCardDescriptionState> {}
 declare function CatalogCardDescription({
   children,
   render,
-  className
-}: CatalogCardDescriptionProps): ReactNode;
+  className,
+  ...props
+}: CatalogCardDescriptionProps): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
 interface CatalogCardBadgesProps extends ComponentProps<"div"> {}
 declare function CatalogCardBadges({
   className,

package/dist/components/defaults/catalog/card-primitives.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"card-primitives.d.mts","names":[],"sources":["../../../../src/components/defaults/catalog/card-primitives.tsx"],"mappings":";;;;;;UAWiB,gBAAA,SAAyB,cAAA;EACxC,OAAA,IAAW,CAAA,EAAG,UAAA,CAAW,cAAA;AAAA;AAD3B;;;;;;;;;AAAA,iBAagB,WAAA,CAAA;EAAc,SAAA;EAAW,OAAA;EAAS,QAAA;EAAA,GAAa;AAAA,GAAQ,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA+B3E,sBAAA;AAAA,UAEK,sBAAA;EACf,MAAA,GAAS,UAAA,CAAW,cAAA,SAAuB,sBAAA;EAC3C,SAAA;EACA,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,iBAAA,CAAA;EAAoB,MAAA;EAAQ,SAAA;EAAW;AAAA,GAAY,sBAAA,GAAsB,SAAA;AAAA,UAkBxE,qBAAA;EACf,KAAA;AAAA;AAAA,UAGe,qBAAA;EA7DsD;EA+DrE,QAAA,GAAW,SAAA;EACX,MAAA,GAAS,UAAA,CAAW,cAAA,QAAsB,qBAAA;EAC1C,SAAA;AAAA;AAAA,iBAGc,gBAAA,CAAA;EAAmB,QAAA;EAAU,MAAA;EAAQ;AAAA,GAAa,qBAAA,GAAqB,SAAA;AAAA,UAwBtE,2BAAA;EACf,WAAA;AAAA;AAAA,UAGe,2BAAA;EACf,QAAA,GAAW,SAAA;EACX,MAAA,GAAS,UAAA,CAAW,cAAA,OAAqB,2BAAA;EACzC,SAAA;AAAA;AAAA,iBAGc,sBAAA,CAAA;EACd,QAAA;EACA,MAAA;EACA;AAAA,GACC,2BAAA,GAA2B,SAAA;AAAA,UAwBb,sBAAA,SAA+B,cAAA;AAAA,iBAEhC,iBAAA,CAAA;EAAoB,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAQ,sBAAA,GAAsB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAoBzE,qBAAA,SAA8B,IAAA,CAAK,cAAA,QAAsB,MAAA;EACxE,IAAA;AAAA;AAAA,iBAGc,gBAAA,CAAA;EACd,SAAA;EACA,OAAA;EACA,IAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,qBAAA,GAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"card-primitives.d.mts","names":[],"sources":["../../../../src/components/defaults/catalog/card-primitives.tsx"],"mappings":";;;;;;;UAYiB,gBAAA,SAAyB,cAAA;EACxC,OAAA,IAAW,CAAA,EAAG,UAAA,CAAW,cAAA;AAAA;;AAD3B;;;;;;;;iBAagB,WAAA,CAAA;EAAc,SAAA;EAAW,OAAA;EAAS,QAAA;EAAA,GAAa;AAAA,GAAQ,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA+B3E,sBAAA;AAAA,UAEK,sBAAA,SACP,SAAA,CAAU,cAAA,QAAsB,sBAAA;AAAA,iBAE1B,iBAAA,CAAA;EAAoB,MAAA;EAAQ,SAAA;EAAA,GAAc;AAAA,GAAS,sBAAA,GAAsB,OAAA,CAAA,YAAA,mBAAA,OAAA,CAAA,qBAAA;AAAA,UAoBxE,qBAAA;EACf,KAAA;AAAA;AAAA,UAGe,qBAAA,SACP,SAAA,CAAU,cAAA,OAAqB,qBAAA;AAAA,iBAEzB,gBAAA,CAAA;EACd,QAAA;EACA,MAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,qBAAA,GAAqB,OAAA,CAAA,YAAA,mBAAA,OAAA,CAAA,qBAAA;AAAA,UA2BP,2BAAA;EACf,WAAA;AAAA;AAAA,UAGe,2BAAA,SACP,SAAA,CAAU,cAAA,MAAoB,2BAAA;AAAA,iBAExB,sBAAA,CAAA;EACd,QAAA;EACA,MAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,2BAAA,GAA2B,OAAA,CAAA,YAAA,mBAAA,OAAA,CAAA,qBAAA;AAAA,UA2Bb,sBAAA,SAA+B,cAAA;AAAA,iBAEhC,iBAAA,CAAA;EAAoB,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAQ,sBAAA,GAAsB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAoBzE,qBAAA,SAA8B,IAAA,CAAK,cAAA,QAAsB,MAAA;EACxE,IAAA;AAAA;AAAA,iBAGc,gBAAA,CAAA;EACd,SAAA;EACA,OAAA;EACA,IAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,qBAAA,GAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/defaults/catalog/card-primitives.mjs

@@ -1,8 +1,9 @@
 import { cn } from "../../../lib/utils.mjs";
 import { useCatalogConfig } from "../../../context/catalog-config-context.mjs";
-import { renderSlot } from "../../../utils/render-slot.mjs";
 import { useAnyCatalogCardOptional } from "../../../context/catalog-card-context.mjs";
 import { Button } from "../../ui/button.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { Children } from "react";
 import { jsx } from "react/jsx-runtime";
 
@@ -35,45 +36,44 @@ function CatalogCard({ className, onClick, children, ...rest }) {
 		children
 	});
 }
-function CatalogCardHeader({ render, className, children }) {
+function CatalogCardHeader({ render, className, ...props }) {
 	const { classNames } = useCatalogConfig();
-	return renderSlot({
+	return useRender({
 		defaultTagName: "div",
 		render,
 		state: {},
-		props: {
-			"data-p0": "catalog-card-header",
+		props: mergeProps({
 			className: cn("pz:flex pz:items-start pz:gap-2", classNames?.cardHeader, className),
-			children
-		}
+			"data-p0": "catalog-card-header"
+		}, props)
 	});
 }
-function CatalogCardTitle({ children, render, className }) {
+function CatalogCardTitle({ children, render, className, ...props }) {
 	const { classNames } = useCatalogConfig();
 	const label = (useAnyCatalogCardOptional()?.card)?.label ?? "";
-	return renderSlot({
+	return useRender({
 		defaultTagName: "h3",
 		render,
 		state: { label },
-		props: {
-			"data-p0": "catalog-card-title",
+		props: mergeProps({
 			className: cn("pz:text-sm pz:font-semibold pz:leading-tight pz:m-0 pz:line-clamp-2 pz:flex-1", classNames?.cardLabel, className),
-			children: children ?? label
-		}
+			children: children ?? label,
+			"data-p0": "catalog-card-title"
+		}, props)
 	});
 }
-function CatalogCardDescription({ children, render, className }) {
+function CatalogCardDescription({ children, render, className, ...props }) {
 	const { classNames } = useCatalogConfig();
 	const description = (useAnyCatalogCardOptional()?.card)?.description ?? "";
-	return renderSlot({
+	return useRender({
 		defaultTagName: "p",
 		render,
 		state: { description },
-		props: {
-			"data-p0": "catalog-card-description",
+		props: mergeProps({
 			className: cn("pz:text-xs pz:text-muted-foreground pz:m-0 pz:line-clamp-2", classNames?.cardDescription, className),
-			children: children ?? description
-		}
+			children: children ?? description,
+			"data-p0": "catalog-card-description"
+		}, props)
 	});
 }
 function CatalogCardBadges({ className, children, ...rest }) {

package/dist/components/defaults/catalog/card-primitives.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"card-primitives.mjs","names":[],"sources":["../../../../src/components/defaults/catalog/card-primitives.tsx"],"sourcesContent":["import { Children, type ComponentProps, type MouseEvent, type ReactNode } from \"react\";\nimport { useAnyCatalogCardOptional } from \"../../../context/catalog-card-context.js\";\nimport { useCatalogConfig } from \"../../../context/catalog-config-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport { type RenderProp, renderSlot } from \"../../../utils/render-slot.js\";\nimport { Button } from \"../../ui/button.js\";\n\n/* -------------------------------------------------------------------------- */\n/* Card root                                                                  */\n/* -------------------------------------------------------------------------- */\n\nexport interface CatalogCardProps extends ComponentProps<\"div\"> {\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n}\n\n/**\n * Bare flat card container. Defaults are structural only (flex column) so\n * consumers can override paddings/colors/borders via `classNames.card` or\n * `className` without fighting the cascade.\n *\n * Most consumers use `<PipeCatalogCard>` / `<SearchCatalogCard>` /\n * `<SearchesCatalogCard>` instead, which provides the card context for\n * self-binding child primitives.\n */\nexport function CatalogCard({ className, onClick, children, ...rest }: CatalogCardProps) {\n  const { classNames } = useCatalogConfig();\n  const interactive = !!onClick;\n  return (\n    <div\n      data-p0=\"catalog-card\"\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.(e as unknown as MouseEvent<HTMLDivElement>);\n              }\n            }\n          : undefined\n      }\n      className={cn(\"pz:flex pz:flex-col\", classNames?.card, className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Card header                                                                */\n/* -------------------------------------------------------------------------- */\n\nexport type CatalogCardHeaderState = {};\n\nexport interface CatalogCardHeaderProps {\n  render?: RenderProp<ComponentProps<\"div\">, CatalogCardHeaderState>;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function CatalogCardHeader({ render, className, children }: CatalogCardHeaderProps) {\n  const { classNames } = useCatalogConfig();\n  return renderSlot({\n    defaultTagName: \"div\",\n    render,\n    state: {} as CatalogCardHeaderState,\n    props: {\n      \"data-p0\": \"catalog-card-header\",\n      className: cn(\"pz:flex pz:items-start pz:gap-2\", classNames?.cardHeader, className),\n      children,\n    } as ComponentProps<\"div\">,\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/* Card title — self-binds to card.label                                      */\n/* -------------------------------------------------------------------------- */\n\nexport interface CatalogCardTitleState {\n  label: string;\n}\n\nexport interface CatalogCardTitleProps {\n  /** Override the displayed label. Defaults to `card.label` from context. */\n  children?: ReactNode;\n  render?: RenderProp<ComponentProps<\"h3\">, CatalogCardTitleState>;\n  className?: string;\n}\n\nexport function CatalogCardTitle({ children, render, className }: CatalogCardTitleProps) {\n  const { classNames } = useCatalogConfig();\n  const card = useAnyCatalogCardOptional()?.card;\n  const label = (card?.label ?? \"\") as string;\n  return renderSlot({\n    defaultTagName: \"h3\",\n    render,\n    state: { label },\n    props: {\n      \"data-p0\": \"catalog-card-title\",\n      className: cn(\n        \"pz:text-sm pz:font-semibold pz:leading-tight pz:m-0 pz:line-clamp-2 pz:flex-1\",\n        classNames?.cardLabel,\n        className,\n      ),\n      children: children ?? label,\n    } as ComponentProps<\"h3\">,\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/* Card description — self-binds to card.description                          */\n/* -------------------------------------------------------------------------- */\n\nexport interface CatalogCardDescriptionState {\n  description: string;\n}\n\nexport interface CatalogCardDescriptionProps {\n  children?: ReactNode;\n  render?: RenderProp<ComponentProps<\"p\">, CatalogCardDescriptionState>;\n  className?: string;\n}\n\nexport function CatalogCardDescription({\n  children,\n  render,\n  className,\n}: CatalogCardDescriptionProps) {\n  const { classNames } = useCatalogConfig();\n  const card = useAnyCatalogCardOptional()?.card;\n  const description = (card?.description ?? \"\") as string;\n  return renderSlot({\n    defaultTagName: \"p\",\n    render,\n    state: { description },\n    props: {\n      \"data-p0\": \"catalog-card-description\",\n      className: cn(\n        \"pz:text-xs pz:text-muted-foreground pz:m-0 pz:line-clamp-2\",\n        classNames?.cardDescription,\n        className,\n      ),\n      children: children ?? description,\n    } as ComponentProps<\"p\">,\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/* Card badges row + single badge button                                      */\n/* -------------------------------------------------------------------------- */\n\nexport interface CatalogCardBadgesProps extends ComponentProps<\"div\"> {}\n\nexport function CatalogCardBadges({ className, children, ...rest }: CatalogCardBadgesProps) {\n  const { classNames } = useCatalogConfig();\n  const visible = Children.toArray(children);\n  if (visible.length === 0) return null;\n  return (\n    <div\n      data-p0=\"catalog-card-badges\"\n      className={cn(\n        \"pz:flex pz:flex-wrap pz:gap-1.5 pz:items-center\",\n        classNames?.cardBadges,\n        className,\n      )}\n      onClick={(e) => e.stopPropagation()}\n      {...rest}\n    >\n      {visible}\n    </div>\n  );\n}\n\nexport interface CatalogCardBadgeProps extends Omit<ComponentProps<typeof Button>, \"size\"> {\n  size?: \"xs\" | \"sm\";\n}\n\nexport function CatalogCardBadge({\n  className,\n  variant = \"outline\",\n  size = \"xs\",\n  onClick,\n  ...rest\n}: CatalogCardBadgeProps) {\n  const { classNames } = useCatalogConfig();\n  return (\n    <Button\n      data-p0=\"catalog-card-badge\"\n      variant={variant}\n      size={size}\n      className={cn(classNames?.badge, className)}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClick?.(e);\n      }}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,SAAgB,YAAY,EAAE,WAAW,SAAS,UAAU,GAAG,QAA0B;CACvF,MAAM,EAAE,eAAe,kBAAkB;CACzC,MAAM,cAAc,CAAC,CAAC;AACtB,QACE,oBAAC,OAAD;EACE,WAAQ;EACR,MAAM,cAAc,WAAW;EAC/B,UAAU,cAAc,IAAI;EACnB;EACT,WACE,eACK,MAAM;AACL,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,MAAE,gBAAgB;AAClB,cAAU,EAA2C;;MAGzD;EAEN,WAAW,GAAG,uBAAuB,YAAY,MAAM,UAAU;EACjE,GAAI;EAEH;EACG;;AAgBV,SAAgB,kBAAkB,EAAE,QAAQ,WAAW,YAAoC;CACzF,MAAM,EAAE,eAAe,kBAAkB;AACzC,QAAO,WAAW;EAChB,gBAAgB;EAChB;EACA,OAAO,EAAE;EACT,OAAO;GACL,WAAW;GACX,WAAW,GAAG,mCAAmC,YAAY,YAAY,UAAU;GACnF;GACD;EACF,CAAC;;AAkBJ,SAAgB,iBAAiB,EAAE,UAAU,QAAQ,aAAoC;CACvF,MAAM,EAAE,eAAe,kBAAkB;CAEzC,MAAM,SADO,2BAA2B,EAAE,OACrB,SAAS;AAC9B,QAAO,WAAW;EAChB,gBAAgB;EAChB;EACA,OAAO,EAAE,OAAO;EAChB,OAAO;GACL,WAAW;GACX,WAAW,GACT,iFACA,YAAY,WACZ,UACD;GACD,UAAU,YAAY;GACvB;EACF,CAAC;;AAiBJ,SAAgB,uBAAuB,EACrC,UACA,QACA,aAC8B;CAC9B,MAAM,EAAE,eAAe,kBAAkB;CAEzC,MAAM,eADO,2BAA2B,EAAE,OACf,eAAe;AAC1C,QAAO,WAAW;EAChB,gBAAgB;EAChB;EACA,OAAO,EAAE,aAAa;EACtB,OAAO;GACL,WAAW;GACX,WAAW,GACT,8DACA,YAAY,iBACZ,UACD;GACD,UAAU,YAAY;GACvB;EACF,CAAC;;AASJ,SAAgB,kBAAkB,EAAE,WAAW,UAAU,GAAG,QAAgC;CAC1F,MAAM,EAAE,eAAe,kBAAkB;CACzC,MAAM,UAAU,SAAS,QAAQ,SAAS;AAC1C,KAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,QACE,oBAAC,OAAD;EACE,WAAQ;EACR,WAAW,GACT,mDACA,YAAY,YACZ,UACD;EACD,UAAU,MAAM,EAAE,iBAAiB;EACnC,GAAI;YAEH;EACG;;AAQV,SAAgB,iBAAiB,EAC/B,WACA,UAAU,WACV,OAAO,MACP,SACA,GAAG,QACqB;CACxB,MAAM,EAAE,eAAe,kBAAkB;AACzC,QACE,oBAAC,QAAD;EACE,WAAQ;EACC;EACH;EACN,WAAW,GAAG,YAAY,OAAO,UAAU;EAC3C,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,aAAU,EAAE;;EAEd,GAAI;EACJ"}
+{"version":3,"file":"card-primitives.mjs","names":[],"sources":["../../../../src/components/defaults/catalog/card-primitives.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { Children, type ComponentProps, type MouseEvent } from \"react\";\nimport { useAnyCatalogCardOptional } from \"../../../context/catalog-card-context.js\";\nimport { useCatalogConfig } from \"../../../context/catalog-config-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport { Button } from \"../../ui/button.js\";\n\n/* -------------------------------------------------------------------------- */\n/* Card root                                                                  */\n/* -------------------------------------------------------------------------- */\n\nexport interface CatalogCardProps extends ComponentProps<\"div\"> {\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n}\n\n/**\n * Bare flat card container. Defaults are structural only (flex column) so\n * consumers can override paddings/colors/borders via `classNames.card` or\n * `className` without fighting the cascade.\n *\n * Most consumers use `<PipeCatalogCard>` / `<SearchCatalogCard>` /\n * `<SearchesCatalogCard>` instead, which provides the card context for\n * self-binding child primitives.\n */\nexport function CatalogCard({ className, onClick, children, ...rest }: CatalogCardProps) {\n  const { classNames } = useCatalogConfig();\n  const interactive = !!onClick;\n  return (\n    <div\n      data-p0=\"catalog-card\"\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.(e as unknown as MouseEvent<HTMLDivElement>);\n              }\n            }\n          : undefined\n      }\n      className={cn(\"pz:flex pz:flex-col\", classNames?.card, className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Card header                                                                */\n/* -------------------------------------------------------------------------- */\n\nexport type CatalogCardHeaderState = {};\n\nexport interface CatalogCardHeaderProps\n  extends useRender.ComponentProps<\"div\", CatalogCardHeaderState> {}\n\nexport function CatalogCardHeader({ render, className, ...props }: CatalogCardHeaderProps) {\n  const { classNames } = useCatalogConfig();\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    state: {} as CatalogCardHeaderState,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"pz:flex pz:items-start pz:gap-2\", classNames?.cardHeader, className),\n        ...({ \"data-p0\": \"catalog-card-header\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/* Card title — self-binds to card.label                                      */\n/* -------------------------------------------------------------------------- */\n\nexport interface CatalogCardTitleState {\n  label: string;\n}\n\nexport interface CatalogCardTitleProps\n  extends useRender.ComponentProps<\"h3\", CatalogCardTitleState> {}\n\nexport function CatalogCardTitle({\n  children,\n  render,\n  className,\n  ...props\n}: CatalogCardTitleProps) {\n  const { classNames } = useCatalogConfig();\n  const card = useAnyCatalogCardOptional()?.card;\n  const label = (card?.label ?? \"\") as string;\n  return useRender({\n    defaultTagName: \"h3\",\n    render,\n    state: { label },\n    props: mergeProps<\"h3\">(\n      {\n        className: cn(\n          \"pz:text-sm pz:font-semibold pz:leading-tight pz:m-0 pz:line-clamp-2 pz:flex-1\",\n          classNames?.cardLabel,\n          className,\n        ),\n        children: children ?? label,\n        ...({ \"data-p0\": \"catalog-card-title\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/* Card description — self-binds to card.description                          */\n/* -------------------------------------------------------------------------- */\n\nexport interface CatalogCardDescriptionState {\n  description: string;\n}\n\nexport interface CatalogCardDescriptionProps\n  extends useRender.ComponentProps<\"p\", CatalogCardDescriptionState> {}\n\nexport function CatalogCardDescription({\n  children,\n  render,\n  className,\n  ...props\n}: CatalogCardDescriptionProps) {\n  const { classNames } = useCatalogConfig();\n  const card = useAnyCatalogCardOptional()?.card;\n  const description = (card?.description ?? \"\") as string;\n  return useRender({\n    defaultTagName: \"p\",\n    render,\n    state: { description },\n    props: mergeProps<\"p\">(\n      {\n        className: cn(\n          \"pz:text-xs pz:text-muted-foreground pz:m-0 pz:line-clamp-2\",\n          classNames?.cardDescription,\n          className,\n        ),\n        children: children ?? description,\n        ...({ \"data-p0\": \"catalog-card-description\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/* Card badges row + single badge button                                      */\n/* -------------------------------------------------------------------------- */\n\nexport interface CatalogCardBadgesProps extends ComponentProps<\"div\"> {}\n\nexport function CatalogCardBadges({ className, children, ...rest }: CatalogCardBadgesProps) {\n  const { classNames } = useCatalogConfig();\n  const visible = Children.toArray(children);\n  if (visible.length === 0) return null;\n  return (\n    <div\n      data-p0=\"catalog-card-badges\"\n      className={cn(\n        \"pz:flex pz:flex-wrap pz:gap-1.5 pz:items-center\",\n        classNames?.cardBadges,\n        className,\n      )}\n      onClick={(e) => e.stopPropagation()}\n      {...rest}\n    >\n      {visible}\n    </div>\n  );\n}\n\nexport interface CatalogCardBadgeProps extends Omit<ComponentProps<typeof Button>, \"size\"> {\n  size?: \"xs\" | \"sm\";\n}\n\nexport function CatalogCardBadge({\n  className,\n  variant = \"outline\",\n  size = \"xs\",\n  onClick,\n  ...rest\n}: CatalogCardBadgeProps) {\n  const { classNames } = useCatalogConfig();\n  return (\n    <Button\n      data-p0=\"catalog-card-badge\"\n      variant={variant}\n      size={size}\n      className={cn(classNames?.badge, className)}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClick?.(e);\n      }}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,YAAY,EAAE,WAAW,SAAS,UAAU,GAAG,QAA0B;CACvF,MAAM,EAAE,eAAe,kBAAkB;CACzC,MAAM,cAAc,CAAC,CAAC;AACtB,QACE,oBAAC,OAAD;EACE,WAAQ;EACR,MAAM,cAAc,WAAW;EAC/B,UAAU,cAAc,IAAI;EACnB;EACT,WACE,eACK,MAAM;AACL,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,MAAE,gBAAgB;AAClB,cAAU,EAA2C;;MAGzD;EAEN,WAAW,GAAG,uBAAuB,YAAY,MAAM,UAAU;EACjE,GAAI;EAEH;EACG;;AAaV,SAAgB,kBAAkB,EAAE,QAAQ,WAAW,GAAG,SAAiC;CACzF,MAAM,EAAE,eAAe,kBAAkB;AACzC,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,EAAE;EACT,OAAO,WACL;GACE,WAAW,GAAG,mCAAmC,YAAY,YAAY,UAAU;GAC7E,WAAW;GAClB,EACD,MACD;EACF,CAAC;;AAcJ,SAAgB,iBAAiB,EAC/B,UACA,QACA,WACA,GAAG,SACqB;CACxB,MAAM,EAAE,eAAe,kBAAkB;CAEzC,MAAM,SADO,2BAA2B,EAAE,OACrB,SAAS;AAC9B,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,EAAE,OAAO;EAChB,OAAO,WACL;GACE,WAAW,GACT,iFACA,YAAY,WACZ,UACD;GACD,UAAU,YAAY;GAChB,WAAW;GAClB,EACD,MACD;EACF,CAAC;;AAcJ,SAAgB,uBAAuB,EACrC,UACA,QACA,WACA,GAAG,SAC2B;CAC9B,MAAM,EAAE,eAAe,kBAAkB;CAEzC,MAAM,eADO,2BAA2B,EAAE,OACf,eAAe;AAC1C,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,EAAE,aAAa;EACtB,OAAO,WACL;GACE,WAAW,GACT,8DACA,YAAY,iBACZ,UACD;GACD,UAAU,YAAY;GAChB,WAAW;GAClB,EACD,MACD;EACF,CAAC;;AASJ,SAAgB,kBAAkB,EAAE,WAAW,UAAU,GAAG,QAAgC;CAC1F,MAAM,EAAE,eAAe,kBAAkB;CACzC,MAAM,UAAU,SAAS,QAAQ,SAAS;AAC1C,KAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,QACE,oBAAC,OAAD;EACE,WAAQ;EACR,WAAW,GACT,mDACA,YAAY,YACZ,UACD;EACD,UAAU,MAAM,EAAE,iBAAiB;EACnC,GAAI;YAEH;EACG;;AAQV,SAAgB,iBAAiB,EAC/B,WACA,UAAU,WACV,OAAO,MACP,SACA,GAAG,QACqB;CACxB,MAAM,EAAE,eAAe,kBAAkB;AACzC,QACE,oBAAC,QAAD;EACE,WAAQ;EACC;EACH;EACN,WAAW,GAAG,YAAY,OAAO,UAAU;EAC3C,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,aAAU,EAAE;;EAEd,GAAI;EACJ"}

package/dist/components/defaults/catalog/layout.mjs

@@ -1,11 +1,10 @@
 import { PortalContainerContext } from "../../../context/portal-container-context.mjs";
 import { cn } from "../../../lib/utils.mjs";
 import { useCatalogConfig } from "../../../context/catalog-config-context.mjs";
-import { renderSlot } from "../../../utils/render-slot.mjs";
-import { useCallback, useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/defaults/catalog/layout.tsx
 /**
@@ -23,17 +22,15 @@ function DefaultCatalogRoot({ className, render, children, ...props }) {
 		value: portalContainer,
 		children
 	});
-	return renderSlot({
+	return useRender({
 		defaultTagName: "div",
 		render,
-		state: {},
-		props: {
-			"data-p0": "catalog",
+		ref: portalRef,
+		props: mergeProps({
 			className: cn("pz:flex pz:flex-col pz:gap-4", classNames?.root, className),
-			ref: portalRef,
 			children: wrappedChildren,
-			...props
-		}
+			"data-p0": "catalog"
+		}, props)
 	});
 }
 function DefaultCatalogFilters({ className, render, ...props }) {

package/dist/components/defaults/catalog/layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/components/defaults/catalog/layout.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { type ComponentProps, type ReactNode, useCallback, useState } from \"react\";\nimport { useCatalogConfig } from \"../../../context/catalog-config-context.js\";\nimport { PortalContainerContext } from \"../../../context/portal-container-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport { type RenderProp, renderSlot } from \"../../../utils/render-slot.js\";\n\n/**\n * Outermost catalog wrapper. Owns the `PortalContainerContext.Provider` so\n * elements-react popovers/dropdowns mounted inside the catalog tree portal\n * back into this container — keeping them inside the catalog's CSS scope.\n */\nexport function DefaultCatalogRoot({\n  className,\n  render,\n  children,\n  ...props\n}: ComponentProps<\"div\"> & {\n  render?: RenderProp<ComponentProps<\"div\">, Record<never, never>>;\n}) {\n  const { classNames } = useCatalogConfig();\n  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n  const portalRef = useCallback((node: HTMLElement | null) => {\n    setPortalContainer(node);\n  }, []);\n\n  const wrappedChildren: ReactNode = (\n    <PortalContainerContext.Provider value={portalContainer}>\n      {children}\n    </PortalContainerContext.Provider>\n  );\n\n  return renderSlot({\n    defaultTagName: \"div\",\n    render,\n    state: {},\n    props: {\n      \"data-p0\": \"catalog\",\n      className: cn(\"pz:flex pz:flex-col pz:gap-4\", classNames?.root, className),\n      ref: portalRef,\n      children: wrappedChildren,\n      ...props,\n    } as ComponentProps<\"div\">,\n  });\n}\n\nexport function DefaultCatalogList({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const { classNames } = useCatalogConfig();\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"pz:grid pz:gap-3 pz:grid-cols-1 pz:sm:grid-cols-2 pz:lg:grid-cols-3\",\n          classNames?.list,\n          className,\n        ),\n        ...({ \"data-p0\": \"catalog-list\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n\nexport function DefaultCatalogFilters({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const { classNames } = useCatalogConfig();\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"pz:flex pz:flex-wrap pz:gap-2\", classNames?.filters, className),\n        ...({ \"data-p0\": \"catalog-filters\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;AAaA,SAAgB,mBAAmB,EACjC,WACA,QACA,UACA,GAAG,SAGF;CACD,MAAM,EAAE,eAAe,kBAAkB;CACzC,MAAM,CAAC,iBAAiB,sBAAsB,SAA6B,KAAK;CAChF,MAAM,YAAY,aAAa,SAA6B;AAC1D,qBAAmB,KAAK;IACvB,EAAE,CAAC;CAEN,MAAM,kBACJ,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;EACrC;EAC+B;AAGpC,QAAO,WAAW;EAChB,gBAAgB;EAChB;EACA,OAAO,EAAE;EACT,OAAO;GACL,WAAW;GACX,WAAW,GAAG,gCAAgC,YAAY,MAAM,UAAU;GAC1E,KAAK;GACL,UAAU;GACV,GAAG;GACJ;EACF,CAAC;;AA0BJ,SAAgB,sBAAsB,EACpC,WACA,QACA,GAAG,SAC+B;CAClC,MAAM,EAAE,eAAe,kBAAkB;AACzC,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE,WAAW,GAAG,iCAAiC,YAAY,SAAS,UAAU;GACxE,WAAW;GAClB,EACD,MACD;EACF,CAAC"}
+{"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/components/defaults/catalog/layout.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { type ReactNode, useCallback, useState } from \"react\";\nimport { useCatalogConfig } from \"../../../context/catalog-config-context.js\";\nimport { PortalContainerContext } from \"../../../context/portal-container-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\n\n/**\n * Outermost catalog wrapper. Owns the `PortalContainerContext.Provider` so\n * elements-react popovers/dropdowns mounted inside the catalog tree portal\n * back into this container — keeping them inside the catalog's CSS scope.\n */\nexport function DefaultCatalogRoot({\n  className,\n  render,\n  children,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const { classNames } = useCatalogConfig();\n  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n  const portalRef = useCallback((node: HTMLElement | null) => {\n    setPortalContainer(node);\n  }, []);\n\n  const wrappedChildren: ReactNode = (\n    <PortalContainerContext.Provider value={portalContainer}>\n      {children}\n    </PortalContainerContext.Provider>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    ref: portalRef,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"pz:flex pz:flex-col pz:gap-4\", classNames?.root, className),\n        children: wrappedChildren,\n        ...({ \"data-p0\": \"catalog\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n\nexport function DefaultCatalogList({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const { classNames } = useCatalogConfig();\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"pz:grid pz:gap-3 pz:grid-cols-1 pz:sm:grid-cols-2 pz:lg:grid-cols-3\",\n          classNames?.list,\n          className,\n        ),\n        ...({ \"data-p0\": \"catalog-list\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n\nexport function DefaultCatalogFilters({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const { classNames } = useCatalogConfig();\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"pz:flex pz:flex-wrap pz:gap-2\", classNames?.filters, className),\n        ...({ \"data-p0\": \"catalog-filters\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;AAYA,SAAgB,mBAAmB,EACjC,WACA,QACA,UACA,GAAG,SAC+B;CAClC,MAAM,EAAE,eAAe,kBAAkB;CACzC,MAAM,CAAC,iBAAiB,sBAAsB,SAA6B,KAAK;CAChF,MAAM,YAAY,aAAa,SAA6B;AAC1D,qBAAmB,KAAK;IACvB,EAAE,CAAC;CAEN,MAAM,kBACJ,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;EACrC;EAC+B;AAGpC,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,KAAK;EACL,OAAO,WACL;GACE,WAAW,GAAG,gCAAgC,YAAY,MAAM,UAAU;GAC1E,UAAU;GACJ,WAAW;GAClB,EACD,MACD;EACF,CAAC;;AA0BJ,SAAgB,sBAAsB,EACpC,WACA,QACA,GAAG,SAC+B;CAClC,MAAM,EAAE,eAAe,kBAAkB;AACzC,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE,WAAW,GAAG,iCAAiC,YAAY,SAAS,UAAU;GACxE,WAAW;GAClB,EACD,MACD;EACF,CAAC"}

package/dist/components/defaults/layout/field-wrapper.d.mts

@@ -1,9 +1,9 @@
 import { AnyFieldProps } from "../../../types/field-props.mjs";
 import { useRender } from "@base-ui/react/use-render";
-
 //#region src/components/defaults/layout/field-wrapper.d.ts
 interface DefaultFieldWrapperState {
-  field: AnyFieldProps;
+  disabled: boolean;
+  hasError: boolean;
 }
 interface DefaultFieldWrapperProps extends useRender.ComponentProps<"div", DefaultFieldWrapperState> {
   field: AnyFieldProps;

package/dist/components/defaults/layout/field-wrapper.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"field-wrapper.d.mts","names":[],"sources":["../../../../src/components/defaults/layout/field-wrapper.tsx"],"mappings":";;;;UAQiB,wBAAA;EACf,KAAA,EAAO,aAAA;AAAA;AAAA,UAGQ,wBAAA,SACP,SAAA,CAAU,cAAA,QAAsB,wBAAA;EACxC,KAAA,EAAO,aAAA;AAAA"}
+{"version":3,"file":"field-wrapper.d.mts","names":[],"sources":["../../../../src/components/defaults/layout/field-wrapper.tsx"],"mappings":";;;UAQiB,wBAAA;EACf,QAAA;EACA,QAAA;AAAA;AAAA,UAGe,wBAAA,SACP,SAAA,CAAU,cAAA,QAAsB,wBAAA;EACxC,KAAA,EAAO,aAAA;AAAA"}

package/dist/components/defaults/layout/field-wrapper.mjs

@@ -2,9 +2,9 @@ import { cn } from "../../../lib/utils.mjs";
 import { useFormConfig } from "../../../context/form-context.mjs";
 import { HoverInfo } from "../../hover-info.mjs";
 import { RichText } from "../../rich-text.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/defaults/layout/field-wrapper.tsx
 function DefaultFieldWrapper({ field, children, className, render, ...props }) {
@@ -47,7 +47,10 @@ function DefaultFieldWrapper({ field, children, className, render, ...props }) {
 	return useRender({
 		defaultTagName: "div",
 		render,
-		state: { field },
+		state: {
+			disabled: isDisabled,
+			hasError
+		},
 		props: mergeProps({
 			className: cn(classNames?.field ?? "pz:grid pz:gap-2", isDisabled && classNames?.fieldDisabled, className),
 			children: defaultContent,

package/dist/components/defaults/layout/field-wrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"field-wrapper.mjs","names":[],"sources":["../../../../src/components/defaults/layout/field-wrapper.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useFormConfig } from \"../../../context/form-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { AnyFieldProps } from \"../../../types/field-props.js\";\nimport { HoverInfo } from \"../../hover-info.js\";\nimport { RichText } from \"../../rich-text.js\";\n\nexport interface DefaultFieldWrapperState {\n  field: AnyFieldProps;\n}\n\nexport interface DefaultFieldWrapperProps\n  extends useRender.ComponentProps<\"div\", DefaultFieldWrapperState> {\n  field: AnyFieldProps;\n}\n\nexport function DefaultFieldWrapper({\n  field,\n  children,\n  className,\n  render,\n  ...props\n}: DefaultFieldWrapperProps) {\n  const { classNames } = useFormConfig();\n  const hasError = !!field.error;\n  const isDisabled = field.disabled;\n\n  // Boolean toggles render their label inline with the switch (settings-row\n  // pattern), so the wrapper's label/description block is suppressed for them.\n  const inlineLabel = field.kind === \"boolean_input\";\n\n  const defaultContent = (\n    <>\n      {!inlineLabel && (field.label || field.description || field.info) && (\n        <div className=\"pz:flex pz:flex-col pz:gap-1\">\n          <div className=\"pz:flex pz:items-center pz:gap-1.5\">\n            {field.label && (\n              <label\n                data-p0=\"label\"\n                htmlFor={field.id}\n                className={\n                  classNames?.label ??\n                  cn(\n                    \"pz:text-sm pz:leading-none pz:font-medium pz:select-none\",\n                    hasError && \"pz:text-destructive\",\n                  )\n                }\n              >\n                <RichText>{field.label}</RichText>\n              </label>\n            )}\n            {field.info && (\n              <HoverInfo>\n                <RichText>{field.info}</RichText>\n              </HoverInfo>\n            )}\n          </div>\n          {field.description && (\n            <p\n              data-p0=\"description\"\n              className={classNames?.description ?? \"pz:text-xs pz:text-muted-foreground\"}\n            >\n              <RichText>{field.description}</RichText>\n            </p>\n          )}\n        </div>\n      )}\n      {isDisabled ? (\n        <div className=\"pz:opacity-60 pz:pointer-events-none\">{children}</div>\n      ) : (\n        children\n      )}\n      {isDisabled && field.disabledReason && (\n        <div\n          data-p0=\"disabled-reason\"\n          className={\n            classNames?.disabledReason ??\n            \"pz:rounded-md pz:border pz:border-input pz:bg-muted/40 pz:px-3 pz:py-2 pz:text-xs pz:text-muted-foreground\"\n          }\n        >\n          <RichText>{field.disabledReason}</RichText>\n        </div>\n      )}\n      {hasError && (\n        <span\n          data-p0=\"error\"\n          className={classNames?.error ?? \"pz:text-destructive pz:text-xs pz:font-medium\"}\n          role=\"alert\"\n        >\n          <RichText>{field.error}</RichText>\n        </span>\n      )}\n    </>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    state: { field },\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          classNames?.field ?? \"pz:grid pz:gap-2\",\n          isDisabled && classNames?.fieldDisabled,\n          className,\n        ),\n        children: defaultContent,\n        ...({\n          \"data-p0\": \"field\",\n          \"data-p0-field\": field.path,\n          \"data-p0-kind\": field.kind,\n          ...(isDisabled ? { \"data-p0-disabled\": \"true\", \"aria-disabled\": \"true\" } : {}),\n        } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;AAiBA,SAAgB,oBAAoB,EAClC,OACA,UACA,WACA,QACA,GAAG,SACwB;CAC3B,MAAM,EAAE,eAAe,eAAe;CACtC,MAAM,WAAW,CAAC,CAAC,MAAM;CACzB,MAAM,aAAa,MAAM;CAMzB,MAAM,iBACJ;EACG,EAJe,MAAM,SAAS,qBAIb,MAAM,SAAS,MAAM,eAAe,MAAM,SAC1D,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,MAAM,SACL,oBAAC,SAAD;KACE,WAAQ;KACR,SAAS,MAAM;KACf,WACE,YAAY,SACZ,GACE,4DACA,YAAY,sBACb;eAGH,oBAAC,UAAD,YAAW,MAAM,OAAiB;KAC5B,GAET,MAAM,QACL,oBAAC,WAAD,YACE,oBAAC,UAAD,YAAW,MAAM,MAAgB,GACvB,EAEV;OACL,MAAM,eACL,oBAAC,KAAD;IACE,WAAQ;IACR,WAAW,YAAY,eAAe;cAEtC,oBAAC,UAAD,YAAW,MAAM,aAAuB;IACtC,EAEF;;EAEP,aACC,oBAAC,OAAD;GAAK,WAAU;GAAwC;GAAe,IAEtE;EAED,cAAc,MAAM,kBACnB,oBAAC,OAAD;GACE,WAAQ;GACR,WACE,YAAY,kBACZ;aAGF,oBAAC,UAAD,YAAW,MAAM,gBAA0B;GACvC;EAEP,YACC,oBAAC,QAAD;GACE,WAAQ;GACR,WAAW,YAAY,SAAS;GAChC,MAAK;aAEL,oBAAC,UAAD,YAAW,MAAM,OAAiB;GAC7B;EAER;AAGL,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,EAAE,OAAO;EAChB,OAAO,WACL;GACE,WAAW,GACT,YAAY,SAAS,oBACrB,cAAc,YAAY,eAC1B,UACD;GACD,UAAU;GAER,WAAW;GACX,iBAAiB,MAAM;GACvB,gBAAgB,MAAM;GACtB,GAAI,aAAa;IAAE,oBAAoB;IAAQ,iBAAiB;IAAQ,GAAG,EAAE;GAEhF,EACD,MACD;EACF,CAAC"}
+{"version":3,"file":"field-wrapper.mjs","names":[],"sources":["../../../../src/components/defaults/layout/field-wrapper.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useFormConfig } from \"../../../context/form-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { AnyFieldProps } from \"../../../types/field-props.js\";\nimport { HoverInfo } from \"../../hover-info.js\";\nimport { RichText } from \"../../rich-text.js\";\n\nexport interface DefaultFieldWrapperState {\n  disabled: boolean;\n  hasError: boolean;\n}\n\nexport interface DefaultFieldWrapperProps\n  extends useRender.ComponentProps<\"div\", DefaultFieldWrapperState> {\n  field: AnyFieldProps;\n}\n\nexport function DefaultFieldWrapper({\n  field,\n  children,\n  className,\n  render,\n  ...props\n}: DefaultFieldWrapperProps) {\n  const { classNames } = useFormConfig();\n  const hasError = !!field.error;\n  const isDisabled = field.disabled;\n\n  // Boolean toggles render their label inline with the switch (settings-row\n  // pattern), so the wrapper's label/description block is suppressed for them.\n  const inlineLabel = field.kind === \"boolean_input\";\n\n  const defaultContent = (\n    <>\n      {!inlineLabel && (field.label || field.description || field.info) && (\n        <div className=\"pz:flex pz:flex-col pz:gap-1\">\n          <div className=\"pz:flex pz:items-center pz:gap-1.5\">\n            {field.label && (\n              <label\n                data-p0=\"label\"\n                htmlFor={field.id}\n                className={\n                  classNames?.label ??\n                  cn(\n                    \"pz:text-sm pz:leading-none pz:font-medium pz:select-none\",\n                    hasError && \"pz:text-destructive\",\n                  )\n                }\n              >\n                <RichText>{field.label}</RichText>\n              </label>\n            )}\n            {field.info && (\n              <HoverInfo>\n                <RichText>{field.info}</RichText>\n              </HoverInfo>\n            )}\n          </div>\n          {field.description && (\n            <p\n              data-p0=\"description\"\n              className={classNames?.description ?? \"pz:text-xs pz:text-muted-foreground\"}\n            >\n              <RichText>{field.description}</RichText>\n            </p>\n          )}\n        </div>\n      )}\n      {isDisabled ? (\n        <div className=\"pz:opacity-60 pz:pointer-events-none\">{children}</div>\n      ) : (\n        children\n      )}\n      {isDisabled && field.disabledReason && (\n        <div\n          data-p0=\"disabled-reason\"\n          className={\n            classNames?.disabledReason ??\n            \"pz:rounded-md pz:border pz:border-input pz:bg-muted/40 pz:px-3 pz:py-2 pz:text-xs pz:text-muted-foreground\"\n          }\n        >\n          <RichText>{field.disabledReason}</RichText>\n        </div>\n      )}\n      {hasError && (\n        <span\n          data-p0=\"error\"\n          className={classNames?.error ?? \"pz:text-destructive pz:text-xs pz:font-medium\"}\n          role=\"alert\"\n        >\n          <RichText>{field.error}</RichText>\n        </span>\n      )}\n    </>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    state: { disabled: isDisabled, hasError },\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          classNames?.field ?? \"pz:grid pz:gap-2\",\n          isDisabled && classNames?.fieldDisabled,\n          className,\n        ),\n        children: defaultContent,\n        ...({\n          \"data-p0\": \"field\",\n          \"data-p0-field\": field.path,\n          \"data-p0-kind\": field.kind,\n          ...(isDisabled ? { \"data-p0-disabled\": \"true\", \"aria-disabled\": \"true\" } : {}),\n        } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAgB,oBAAoB,EAClC,OACA,UACA,WACA,QACA,GAAG,SACwB;CAC3B,MAAM,EAAE,eAAe,eAAe;CACtC,MAAM,WAAW,CAAC,CAAC,MAAM;CACzB,MAAM,aAAa,MAAM;CAMzB,MAAM,iBACJ;EACG,EAJe,MAAM,SAAS,qBAIb,MAAM,SAAS,MAAM,eAAe,MAAM,SAC1D,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,MAAM,SACL,oBAAC,SAAD;KACE,WAAQ;KACR,SAAS,MAAM;KACf,WACE,YAAY,SACZ,GACE,4DACA,YAAY,sBACb;eAGH,oBAAC,UAAD,YAAW,MAAM,OAAiB;KAC5B,GAET,MAAM,QACL,oBAAC,WAAD,YACE,oBAAC,UAAD,YAAW,MAAM,MAAgB,GACvB,EAEV;OACL,MAAM,eACL,oBAAC,KAAD;IACE,WAAQ;IACR,WAAW,YAAY,eAAe;cAEtC,oBAAC,UAAD,YAAW,MAAM,aAAuB;IACtC,EAEF;;EAEP,aACC,oBAAC,OAAD;GAAK,WAAU;GAAwC;GAAe,IAEtE;EAED,cAAc,MAAM,kBACnB,oBAAC,OAAD;GACE,WAAQ;GACR,WACE,YAAY,kBACZ;aAGF,oBAAC,UAAD,YAAW,MAAM,gBAA0B;GACvC;EAEP,YACC,oBAAC,QAAD;GACE,WAAQ;GACR,WAAW,YAAY,SAAS;GAChC,MAAK;aAEL,oBAAC,UAAD,YAAW,MAAM,OAAiB;GAC7B;EAER;AAGL,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GAAE,UAAU;GAAY;GAAU;EACzC,OAAO,WACL;GACE,WAAW,GACT,YAAY,SAAS,oBACrB,cAAc,YAAY,eAC1B,UACD;GACD,UAAU;GAER,WAAW;GACX,iBAAiB,MAAM;GACvB,gBAAgB,MAAM;GACtB,GAAI,aAAa;IAAE,oBAAoB;IAAQ,iBAAiB;IAAQ,GAAG,EAAE;GAEhF,EACD,MACD;EACF,CAAC"}

package/dist/components/defaults/layout/group.d.mts

@@ -1,12 +1,12 @@
-import { AnyFieldProps } from "../../../types/field-props.mjs";
 import { FormGroupHandle } from "../../../types/form-handle.mjs";
 import { useRender } from "@base-ui/react/use-render";
-
 //#region src/components/defaults/layout/group.d.ts
 interface DefaultGroupState {
-  group: FormGroupHandle;
-  fields: AnyFieldProps[];
   expanded: boolean;
+  hasErrors: boolean;
+  errorCount: number;
+  setCount: number;
+  dirtyCount: number;
 }
 interface DefaultGroupProps extends useRender.ComponentProps<"div", DefaultGroupState> {
   group: FormGroupHandle;

package/dist/components/defaults/layout/group.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/defaults/layout/group.tsx"],"mappings":";;;;;UAYiB,iBAAA;EACf,KAAA,EAAO,eAAA;EACP,MAAA,EAAQ,aAAA;EACR,QAAA;AAAA;AAAA,UAGe,iBAAA,SAA0B,SAAA,CAAU,cAAA,QAAsB,iBAAA;EACzE,KAAA,EAAO,eAAA;AAAA"}
+{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/defaults/layout/group.tsx"],"mappings":";;;UAYiB,iBAAA;EACf,QAAA;EACA,SAAA;EACA,UAAA;EACA,QAAA;EACA,UAAA;AAAA;AAAA,UAGe,iBAAA,SAA0B,SAAA,CAAU,cAAA,QAAsB,iBAAA;EACzE,KAAA,EAAO,eAAA;AAAA"}

package/dist/components/defaults/layout/group.mjs

@@ -4,76 +4,91 @@ import { IconGlyph } from "../../../widgets/icon-glyph.mjs";
 import { IconChevronDown } from "../../internal/icons.mjs";
 import { HoverInfo } from "../../hover-info.mjs";
 import { Badge } from "../../ui/badge.mjs";
-import { useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Accordion } from "@base-ui/react/accordion";
 
 //#region src/components/defaults/layout/group.tsx
+const ITEM_VALUE = "group";
 function DefaultGroup({ group, children, className, render, ...props }) {
 	const { classNames } = useFormConfig();
 	const [expanded, setExpanded] = useState(group.defaultExpand);
 	const hasErrors = group.errorCount > 0;
-	const defaultContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
-		type: "button",
-		"data-p0": "group-header",
-		className: classNames?.groupHeader ?? cn("pz:flex pz:items-center pz:justify-between pz:gap-4 pz:px-4 pz:py-2 pz:bg-muted pz:cursor-default pz:hover:shadow-sm pz:hover:bg-muted/80 pz:transition-colors pz:text-sm pz:font-medium pz:text-left", hasErrors && "pz:text-destructive pz:bg-destructive/10"),
-		onClick: () => setExpanded(!expanded),
-		"aria-expanded": expanded,
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: "pz:flex pz:items-center pz:gap-2",
-			children: [
-				group.iconKey && /* @__PURE__ */ jsx(IconGlyph, {
-					keyName: group.iconKey,
-					size: 14,
-					className: "pz:text-muted-foreground pz:shrink-0"
-				}),
-				group.label ?? group.key,
-				group.description && /* @__PURE__ */ jsx("span", {
-					onClick: (e) => e.stopPropagation(),
-					onKeyDown: (e) => e.stopPropagation(),
-					children: /* @__PURE__ */ jsx(HoverInfo, { children: group.description })
+	const countLabel = group.dirtyCount > 0 ? `${group.dirtyCount} modified` : group.setCount > 0 ? `${group.setCount} set` : null;
+	const defaultContent = /* @__PURE__ */ jsx(Accordion.Root, {
+		value: expanded ? [ITEM_VALUE] : [],
+		onValueChange: (next) => setExpanded(next.includes(ITEM_VALUE)),
+		children: /* @__PURE__ */ jsxs(Accordion.Item, {
+			value: ITEM_VALUE,
+			children: [/* @__PURE__ */ jsx(Accordion.Header, {
+				className: "pz:flex",
+				children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+					"data-p0": "group-header",
+					className: classNames?.groupHeader ?? cn("pz:group/group-trigger", "pz:flex pz:items-center pz:justify-between pz:gap-4 pz:w-full", "pz:px-3.5 pz:py-2.5 pz:cursor-pointer pz:text-sm pz:font-medium pz:text-left", "pz:transition-colors pz:hover:bg-muted/60", "pz:aria-expanded:hover:bg-transparent", "pz:focus-visible:outline-none", hasErrors && "pz:text-destructive pz:bg-destructive/10"),
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "pz:flex pz:items-center pz:gap-2",
+						children: [
+							group.iconKey && /* @__PURE__ */ jsx(IconGlyph, {
+								keyName: group.iconKey,
+								size: 14,
+								className: "pz:text-muted-foreground pz:shrink-0"
+							}),
+							group.label ?? group.key,
+							group.description && /* @__PURE__ */ jsx("span", {
+								onClick: (e) => e.stopPropagation(),
+								onKeyDown: (e) => e.stopPropagation(),
+								children: /* @__PURE__ */ jsx(HoverInfo, { children: group.description })
+							})
+						]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "pz:flex pz:items-center pz:gap-2",
+						children: [
+							countLabel && /* @__PURE__ */ jsx(Badge, {
+								variant: "secondary",
+								"data-p0": "group-badge",
+								children: countLabel
+							}),
+							hasErrors && /* @__PURE__ */ jsxs(Badge, {
+								variant: "destructive",
+								"data-p0": "group-error-badge",
+								children: [
+									group.errorCount,
+									" ",
+									group.errorCount === 1 ? "error" : "errors"
+								]
+							}),
+							/* @__PURE__ */ jsx(IconChevronDown, {
+								width: 16,
+								height: 16,
+								className: cn("pz:text-muted-foreground pz:transition-transform pz:duration-150", "pz:group-aria-expanded/group-trigger:rotate-180")
+							})
+						]
+					})]
 				})
-			]
-		}), /* @__PURE__ */ jsxs("span", {
-			className: "pz:flex pz:items-center pz:gap-2",
-			children: [
-				group.setCount > 0 && /* @__PURE__ */ jsxs(Badge, {
-					variant: "default",
-					"data-p0": "group-badge",
-					children: [group.setCount, " set"]
-				}),
-				hasErrors && /* @__PURE__ */ jsxs(Badge, {
-					variant: "destructive",
-					"data-p0": "group-error-badge",
-					children: [
-						group.errorCount,
-						" ",
-						group.errorCount === 1 ? "error" : "errors"
-					]
-				}),
-				/* @__PURE__ */ jsx(IconChevronDown, {
-					width: 16,
-					height: 16,
-					className: cn("pz:text-muted-foreground pz:transition-transform", expanded && "pz:rotate-180")
+			}), /* @__PURE__ */ jsx(Accordion.Panel, {
+				"data-p0": "group-content",
+				className: "pz:overflow-hidden pz:border-t pz:border-border pz:data-open:animate-accordion-down pz:data-closed:animate-accordion-up",
+				children: /* @__PURE__ */ jsx("div", {
+					className: classNames?.groupContent ?? cn("pz:flex pz:flex-col pz:gap-3 pz:px-3.5 pz:pb-3.5 pz:pt-2", "pz:h-(--accordion-panel-height) pz:data-ending-style:h-0 pz:data-starting-style:h-0"),
+					children
 				})
-			]
-		})]
-	}), expanded && /* @__PURE__ */ jsx("div", {
-		"data-p0": "group-content",
-		className: classNames?.groupContent ?? "pz:flex pz:flex-col pz:gap-3 pz:px-3 pz:pb-3 pz:pt-1",
-		children
-	})] });
+			})]
+		})
+	});
 	return useRender({
 		defaultTagName: "div",
 		render,
 		state: {
-			group,
-			fields: group.fields,
-			expanded
+			expanded,
+			hasErrors,
+			errorCount: group.errorCount,
+			setCount: group.setCount,
+			dirtyCount: group.dirtyCount
 		},
 		props: mergeProps({
-			className: cn(classNames?.group ?? cn("pz:flex pz:flex-col pz:gap-2 pz:border pz:border-input pz:rounded-md pz:overflow-hidden pz:mb-2", hasErrors && "pz:border-destructive"), className),
+			className: cn(classNames?.group ?? cn("pz:flex pz:flex-col pz:bg-card pz:border pz:border-border pz:rounded-lg pz:overflow-hidden", hasErrors && "pz:border-destructive"), className),
 			children: defaultContent,
 			"data-p0": "group",
 			"data-p0-group": group.key,

package/dist/components/defaults/layout/group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"group.mjs","names":[],"sources":["../../../../src/components/defaults/layout/group.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useState } from \"react\";\nimport { useFormConfig } from \"../../../context/form-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { AnyFieldProps } from \"../../../types/field-props.js\";\nimport type { FormGroupHandle } from \"../../../types/form-handle.js\";\nimport { IconGlyph } from \"../../../widgets/icon-glyph.js\";\nimport { HoverInfo } from \"../../hover-info.js\";\nimport { IconChevronDown } from \"../../internal/icons.js\";\nimport { Badge } from \"../../ui/badge.js\";\n\nexport interface DefaultGroupState {\n  group: FormGroupHandle;\n  fields: AnyFieldProps[];\n  expanded: boolean;\n}\n\nexport interface DefaultGroupProps extends useRender.ComponentProps<\"div\", DefaultGroupState> {\n  group: FormGroupHandle;\n}\n\nexport function DefaultGroup({ group, children, className, render, ...props }: DefaultGroupProps) {\n  const { classNames } = useFormConfig();\n  const [expanded, setExpanded] = useState(group.defaultExpand);\n  const hasErrors = group.errorCount > 0;\n\n  const defaultContent = (\n    <>\n      <button\n        type=\"button\"\n        data-p0=\"group-header\"\n        className={\n          classNames?.groupHeader ??\n          cn(\n            \"pz:flex pz:items-center pz:justify-between pz:gap-4 pz:px-4 pz:py-2 pz:bg-muted pz:cursor-default pz:hover:shadow-sm pz:hover:bg-muted/80 pz:transition-colors pz:text-sm pz:font-medium pz:text-left\",\n            hasErrors && \"pz:text-destructive pz:bg-destructive/10\",\n          )\n        }\n        onClick={() => setExpanded(!expanded)}\n        aria-expanded={expanded}\n      >\n        <span className=\"pz:flex pz:items-center pz:gap-2\">\n          {group.iconKey && (\n            <IconGlyph\n              keyName={group.iconKey}\n              size={14}\n              className=\"pz:text-muted-foreground pz:shrink-0\"\n            />\n          )}\n          {group.label ?? group.key}\n          {group.description && (\n            <span onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>\n              <HoverInfo>{group.description}</HoverInfo>\n            </span>\n          )}\n        </span>\n        <span className=\"pz:flex pz:items-center pz:gap-2\">\n          {group.setCount > 0 && (\n            <Badge variant=\"default\" data-p0=\"group-badge\">\n              {group.setCount} set\n            </Badge>\n          )}\n          {hasErrors && (\n            <Badge variant=\"destructive\" data-p0=\"group-error-badge\">\n              {group.errorCount} {group.errorCount === 1 ? \"error\" : \"errors\"}\n            </Badge>\n          )}\n          <IconChevronDown\n            width={16}\n            height={16}\n            className={cn(\n              \"pz:text-muted-foreground pz:transition-transform\",\n              expanded && \"pz:rotate-180\",\n            )}\n          />\n        </span>\n      </button>\n      {expanded && (\n        <div\n          data-p0=\"group-content\"\n          className={\n            classNames?.groupContent ?? \"pz:flex pz:flex-col pz:gap-3 pz:px-3 pz:pb-3 pz:pt-1\"\n          }\n        >\n          {children}\n        </div>\n      )}\n    </>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    state: { group, fields: group.fields, expanded },\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          classNames?.group ??\n            cn(\n              \"pz:flex pz:flex-col pz:gap-2 pz:border pz:border-input pz:rounded-md pz:overflow-hidden pz:mb-2\",\n              hasErrors && \"pz:border-destructive\",\n            ),\n          className,\n        ),\n        children: defaultContent,\n        ...({\n          \"data-p0\": \"group\",\n          \"data-p0-group\": group.key,\n          \"data-p0-expanded\": String(expanded),\n        } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;;;;AAsBA,SAAgB,aAAa,EAAE,OAAO,UAAU,WAAW,QAAQ,GAAG,SAA4B;CAChG,MAAM,EAAE,eAAe,eAAe;CACtC,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM,cAAc;CAC7D,MAAM,YAAY,MAAM,aAAa;CAErC,MAAM,iBACJ,8CACE,qBAAC,UAAD;EACE,MAAK;EACL,WAAQ;EACR,WACE,YAAY,eACZ,GACE,yMACA,aAAa,2CACd;EAEH,eAAe,YAAY,CAAC,SAAS;EACrC,iBAAe;YAXjB,CAaE,qBAAC,QAAD;GAAM,WAAU;aAAhB;IACG,MAAM,WACL,oBAAC,WAAD;KACE,SAAS,MAAM;KACf,MAAM;KACN,WAAU;KACV;IAEH,MAAM,SAAS,MAAM;IACrB,MAAM,eACL,oBAAC,QAAD;KAAM,UAAU,MAAM,EAAE,iBAAiB;KAAE,YAAY,MAAM,EAAE,iBAAiB;eAC9E,oBAAC,WAAD,YAAY,MAAM,aAAwB;KACrC;IAEJ;MACP,qBAAC,QAAD;GAAM,WAAU;aAAhB;IACG,MAAM,WAAW,KAChB,qBAAC,OAAD;KAAO,SAAQ;KAAU,WAAQ;eAAjC,CACG,MAAM,UAAS,OACV;;IAET,aACC,qBAAC,OAAD;KAAO,SAAQ;KAAc,WAAQ;eAArC;MACG,MAAM;MAAW;MAAE,MAAM,eAAe,IAAI,UAAU;MACjD;;IAEV,oBAAC,iBAAD;KACE,OAAO;KACP,QAAQ;KACR,WAAW,GACT,oDACA,YAAY,gBACb;KACD;IACG;KACA;KACR,YACC,oBAAC,OAAD;EACE,WAAQ;EACR,WACE,YAAY,gBAAgB;EAG7B;EACG,EAEP;AAGL,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GAAE;GAAO,QAAQ,MAAM;GAAQ;GAAU;EAChD,OAAO,WACL;GACE,WAAW,GACT,YAAY,SACV,GACE,mGACA,aAAa,wBACd,EACH,UACD;GACD,UAAU;GAER,WAAW;GACX,iBAAiB,MAAM;GACvB,oBAAoB,OAAO,SAAS;GAEvC,EACD,MACD;EACF,CAAC"}
+{"version":3,"file":"group.mjs","names":["AccordionPrimitive"],"sources":["../../../../src/components/defaults/layout/group.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useState } from \"react\";\nimport { useFormConfig } from \"../../../context/form-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { FormGroupHandle } from \"../../../types/form-handle.js\";\nimport { IconGlyph } from \"../../../widgets/icon-glyph.js\";\nimport { HoverInfo } from \"../../hover-info.js\";\nimport { IconChevronDown } from \"../../internal/icons.js\";\nimport { Badge } from \"../../ui/badge.js\";\n\nexport interface DefaultGroupState {\n  expanded: boolean;\n  hasErrors: boolean;\n  errorCount: number;\n  setCount: number;\n  dirtyCount: number;\n}\n\nexport interface DefaultGroupProps extends useRender.ComponentProps<\"div\", DefaultGroupState> {\n  group: FormGroupHandle;\n}\n\nconst ITEM_VALUE = \"group\";\n\nexport function DefaultGroup({ group, children, className, render, ...props }: DefaultGroupProps) {\n  const { classNames } = useFormConfig();\n  // Track open state alongside the accordion so consumers reading\n  // `state.expanded` (via render-prop) still get the right value.\n  const [expanded, setExpanded] = useState(group.defaultExpand);\n  const hasErrors = group.errorCount > 0;\n  const showDirty = group.dirtyCount > 0;\n  const countLabel = showDirty\n    ? `${group.dirtyCount} modified`\n    : group.setCount > 0\n      ? `${group.setCount} set`\n      : null;\n\n  const defaultContent = (\n    <AccordionPrimitive.Root\n      value={expanded ? [ITEM_VALUE] : []}\n      onValueChange={(next) => setExpanded(next.includes(ITEM_VALUE))}\n    >\n      <AccordionPrimitive.Item value={ITEM_VALUE}>\n        <AccordionPrimitive.Header className=\"pz:flex\">\n          <AccordionPrimitive.Trigger\n            data-p0=\"group-header\"\n            className={\n              classNames?.groupHeader ??\n              cn(\n                \"pz:group/group-trigger\",\n                \"pz:flex pz:items-center pz:justify-between pz:gap-4 pz:w-full\",\n                \"pz:px-3.5 pz:py-2.5 pz:cursor-pointer pz:text-sm pz:font-medium pz:text-left\",\n                \"pz:transition-colors pz:hover:bg-muted/60\",\n                \"pz:aria-expanded:hover:bg-transparent\",\n                \"pz:focus-visible:outline-none\",\n                hasErrors && \"pz:text-destructive pz:bg-destructive/10\",\n              )\n            }\n          >\n            <span className=\"pz:flex pz:items-center pz:gap-2\">\n              {group.iconKey && (\n                <IconGlyph\n                  keyName={group.iconKey}\n                  size={14}\n                  className=\"pz:text-muted-foreground pz:shrink-0\"\n                />\n              )}\n              {group.label ?? group.key}\n              {group.description && (\n                <span onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>\n                  <HoverInfo>{group.description}</HoverInfo>\n                </span>\n              )}\n            </span>\n            <span className=\"pz:flex pz:items-center pz:gap-2\">\n              {countLabel && (\n                <Badge variant=\"secondary\" data-p0=\"group-badge\">\n                  {countLabel}\n                </Badge>\n              )}\n              {hasErrors && (\n                <Badge variant=\"destructive\" data-p0=\"group-error-badge\">\n                  {group.errorCount} {group.errorCount === 1 ? \"error\" : \"errors\"}\n                </Badge>\n              )}\n              <IconChevronDown\n                width={16}\n                height={16}\n                className={cn(\n                  \"pz:text-muted-foreground pz:transition-transform pz:duration-150\",\n                  \"pz:group-aria-expanded/group-trigger:rotate-180\",\n                )}\n              />\n            </span>\n          </AccordionPrimitive.Trigger>\n        </AccordionPrimitive.Header>\n        <AccordionPrimitive.Panel\n          data-p0=\"group-content\"\n          // The library ships keyframes via `tw-animate-css` —\n          // `animate-accordion-down` / `animate-accordion-up` plus the\n          // `--accordion-panel-height` var that base-ui populates on the\n          // panel give a smooth height transition without JS measuring.\n          className=\"pz:overflow-hidden pz:border-t pz:border-border pz:data-open:animate-accordion-down pz:data-closed:animate-accordion-up\"\n        >\n          <div\n            className={\n              classNames?.groupContent ??\n              cn(\n                \"pz:flex pz:flex-col pz:gap-3 pz:px-3.5 pz:pb-3.5 pz:pt-2\",\n                \"pz:h-(--accordion-panel-height) pz:data-ending-style:h-0 pz:data-starting-style:h-0\",\n              )\n            }\n          >\n            {children}\n          </div>\n        </AccordionPrimitive.Panel>\n      </AccordionPrimitive.Item>\n    </AccordionPrimitive.Root>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    state: {\n      expanded,\n      hasErrors,\n      errorCount: group.errorCount,\n      setCount: group.setCount,\n      dirtyCount: group.dirtyCount,\n    },\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          classNames?.group ??\n            cn(\n              \"pz:flex pz:flex-col pz:bg-card pz:border pz:border-border pz:rounded-lg pz:overflow-hidden\",\n              hasErrors && \"pz:border-destructive\",\n            ),\n          className,\n        ),\n        children: defaultContent,\n        ...({\n          \"data-p0\": \"group\",\n          \"data-p0-group\": group.key,\n          \"data-p0-expanded\": String(expanded),\n        } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,aAAa;AAEnB,SAAgB,aAAa,EAAE,OAAO,UAAU,WAAW,QAAQ,GAAG,SAA4B;CAChG,MAAM,EAAE,eAAe,eAAe;CAGtC,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM,cAAc;CAC7D,MAAM,YAAY,MAAM,aAAa;CAErC,MAAM,aADY,MAAM,aAAa,IAEjC,GAAG,MAAM,WAAW,aACpB,MAAM,WAAW,IACf,GAAG,MAAM,SAAS,QAClB;CAEN,MAAM,iBACJ,oBAACA,UAAmB,MAApB;EACE,OAAO,WAAW,CAAC,WAAW,GAAG,EAAE;EACnC,gBAAgB,SAAS,YAAY,KAAK,SAAS,WAAW,CAAC;YAE/D,qBAACA,UAAmB,MAApB;GAAyB,OAAO;aAAhC,CACE,oBAACA,UAAmB,QAApB;IAA2B,WAAU;cACnC,qBAACA,UAAmB,SAApB;KACE,WAAQ;KACR,WACE,YAAY,eACZ,GACE,0BACA,iEACA,gFACA,6CACA,yCACA,iCACA,aAAa,2CACd;eAZL,CAeE,qBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,MAAM,WACL,oBAAC,WAAD;QACE,SAAS,MAAM;QACf,MAAM;QACN,WAAU;QACV;OAEH,MAAM,SAAS,MAAM;OACrB,MAAM,eACL,oBAAC,QAAD;QAAM,UAAU,MAAM,EAAE,iBAAiB;QAAE,YAAY,MAAM,EAAE,iBAAiB;kBAC9E,oBAAC,WAAD,YAAY,MAAM,aAAwB;QACrC;OAEJ;SACP,qBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,cACC,oBAAC,OAAD;QAAO,SAAQ;QAAY,WAAQ;kBAChC;QACK;OAET,aACC,qBAAC,OAAD;QAAO,SAAQ;QAAc,WAAQ;kBAArC;SACG,MAAM;SAAW;SAAE,MAAM,eAAe,IAAI,UAAU;SACjD;;OAEV,oBAAC,iBAAD;QACE,OAAO;QACP,QAAQ;QACR,WAAW,GACT,oEACA,kDACD;QACD;OACG;QACoB;;IACH,GAC5B,oBAACA,UAAmB,OAApB;IACE,WAAQ;IAKR,WAAU;cAEV,oBAAC,OAAD;KACE,WACE,YAAY,gBACZ,GACE,4DACA,sFACD;KAGF;KACG;IACmB,EACH;;EACF;AAG5B,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GACL;GACA;GACA,YAAY,MAAM;GAClB,UAAU,MAAM;GAChB,YAAY,MAAM;GACnB;EACD,OAAO,WACL;GACE,WAAW,GACT,YAAY,SACV,GACE,8FACA,aAAa,wBACd,EACH,UACD;GACD,UAAU;GAER,WAAW;GACX,iBAAiB,MAAM;GACvB,oBAAoB,OAAO,SAAS;GAEvC,EACD,MACD;EACF,CAAC"}

package/dist/components/defaults/layout/section.d.mts

@@ -1,13 +1,18 @@
-import { FormGroupHandle, FormSectionHandle } from "../../../types/form-handle.mjs";
+import { FormSectionHandle } from "../../../types/form-handle.mjs";
 import { useRender } from "@base-ui/react/use-render";
-
 //#region src/components/defaults/layout/section.d.ts
 interface DefaultSectionState {
-  section: FormSectionHandle;
-  groups: FormGroupHandle[];
+  hasErrors: boolean;
 }
 interface DefaultSectionProps extends useRender.ComponentProps<"div", DefaultSectionState> {
   section: FormSectionHandle;
+  /**
+   * Suppress the section's own header. Set when several consecutive sections
+   * share an umbrella label so the label only renders above the first
+   * section in the cluster (the renderer in `pipe-form/content.tsx` and
+   * `search-form/content.tsx` handles this automatically).
+   */
+  hideLabel?: boolean;
 }
 //#endregion
 export { DefaultSectionProps };

package/dist/components/defaults/layout/section.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"section.d.mts","names":[],"sources":["../../../../src/components/defaults/layout/section.tsx"],"mappings":";;;;UAMiB,mBAAA;EACf,OAAA,EAAS,iBAAA;EACT,MAAA,EAAQ,eAAA;AAAA;AAAA,UAGO,mBAAA,SAA4B,SAAA,CAAU,cAAA,QAAsB,mBAAA;EAC3E,OAAA,EAAS,iBAAA;AAAA"}
+{"version":3,"file":"section.d.mts","names":[],"sources":["../../../../src/components/defaults/layout/section.tsx"],"mappings":";;;UAMiB,mBAAA;EACf,SAAA;AAAA;AAAA,UAGe,mBAAA,SAA4B,SAAA,CAAU,cAAA,QAAsB,mBAAA;EAC3E,OAAA,EAAS,iBAAA;;;;AADX;;;EAQE,SAAA;AAAA"}

package/dist/components/defaults/layout/section.mjs

@@ -1,32 +1,30 @@
 import { cn } from "../../../lib/utils.mjs";
 import { useFormConfig } from "../../../context/form-context.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/defaults/layout/section.tsx
-function DefaultSection({ section, children, className, render, ...props }) {
+function DefaultSection({ section, children, className, render, hideLabel, ...props }) {
 	const { classNames } = useFormConfig();
-	const defaultContent = /* @__PURE__ */ jsxs(Fragment, { children: [section.label && /* @__PURE__ */ jsxs("div", {
+	const hasErrors = section.groups.some((g) => g.errorCount > 0);
+	const defaultContent = /* @__PURE__ */ jsxs(Fragment, { children: [!hideLabel && section.label && /* @__PURE__ */ jsxs("div", {
 		"data-p0": "section-header",
-		className: classNames?.sectionLabel ?? "pz:mb-2 pz:flex pz:flex-col pz:gap-1",
+		className: classNames?.sectionLabel ?? "pz:flex pz:items-center pz:gap-2.5 pz:px-1",
 		children: [/* @__PURE__ */ jsx("h2", {
-			className: "pz:text-sm pz:font-semibold pz:tracking-tight pz:m-0",
+			className: cn("pz:text-[10.5px] pz:font-medium pz:tracking-[0.12em] pz:uppercase pz:text-muted-foreground pz:m-0 pz:whitespace-nowrap"),
 			children: section.label
-		}), section.description && /* @__PURE__ */ jsx("p", {
-			className: cn("pz:text-xs pz:text-muted-foreground pz:m-0", classNames?.sectionDescription),
-			children: section.description
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "pz:flex-1 pz:h-px pz:bg-border"
 		})]
 	}), children] });
 	return useRender({
 		defaultTagName: "div",
 		render,
-		state: {
-			section,
-			groups: section.groups
-		},
+		state: { hasErrors },
 		props: mergeProps({
-			className: cn(classNames?.section ?? "pz:py-2", className),
+			className: cn(classNames?.section ?? "pz:flex pz:flex-col pz:gap-2", className),
 			children: defaultContent,
 			"data-p0": "section",
 			"data-p0-section": section.key