@elmeragroup/fuse 0.1.0-canary.1

package/components/card/card-variants.js

@@ -0,0 +1,73 @@
+import { tv } from "tailwind-variants";
+//#region src/components/card/card-variants.ts
+/**
+* PUBLIC slot recipe. `text-field`'s `card` variant and
+* `CheckboxCard` compose it, so it ships from `@elmeragroup/fuse/card`.
+* Horizontal cards keep their header text in a grid and wrap whole sections when
+* the container cannot fit them side by side.
+* One axis only — the external ref's surface/padding axes are decomposed away.
+*/
+const cardVariants = tv({
+	slots: {
+		base: "shadow-xs flex flex-col rounded-lg border bg-card text-card-foreground",
+		cardHeader: "@container/card-header grid auto-rows-min items-start gap-1.5 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+		cardTag: "text-sm font-semibold text-muted-foreground",
+		cardTitle: "font-semibold leading-none",
+		cardDescription: "text-muted-foreground",
+		cardAction: "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+		cardContent: "",
+		cardFooter: "flex items-center"
+	},
+	variants: { direction: {
+		vertical: {
+			cardHeader: "p-6",
+			cardContent: "p-6 pt-0",
+			cardFooter: "p-6 pt-0"
+		},
+		horizontal: {
+			base: "flex-row flex-wrap items-start gap-6 p-6",
+			cardHeader: "min-w-0 flex-[2_1_16rem] wrap-anywhere",
+			cardContent: "min-w-0 flex-[1_1_12rem] wrap-anywhere",
+			cardFooter: "min-w-0 flex-[1_1_8rem] wrap-anywhere",
+			cardTitle: "text-xl"
+		}
+	} },
+	defaultVariants: { direction: "vertical" }
+});
+/**
+* Module-private type-scale recipes for `Card.Title` / `Card.Description`.
+* Not exported from `@elmeragroup/fuse/card` — there is no borrow
+* pattern. Kept off `cardVariants` because `direction="horizontal"` already
+* sets `cardTitle: "text-xl"`; a second `size` axis on that slot would fight
+* through twMerge. `size` is a type-scale axis, not a density control-box rung:
+* it does not read `--control-*`.
+*/
+const cardTitleVariants = tv({
+	variants: { size: {
+		default: "text-base",
+		sm: "text-sm",
+		lg: "text-lg",
+		xl: "text-xl",
+		"2xl": "text-2xl",
+		"3xl": "text-3xl",
+		"4xl": "text-4xl",
+		"5xl": "text-5xl",
+		"6xl": "text-6xl"
+	} },
+	defaultVariants: { size: "2xl" }
+});
+const cardDescriptionVariants = tv({
+	variants: { size: {
+		xs: "text-xs",
+		sm: "text-sm",
+		default: "text-base",
+		lg: "text-lg",
+		xl: "text-xl",
+		"2xl": "text-2xl"
+	} },
+	defaultVariants: { size: "sm" }
+});
+//#endregion
+export { cardDescriptionVariants, cardTitleVariants, cardVariants };
+
+//# sourceMappingURL=card-variants.js.map

package/components/card/card-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-variants.js","names":[],"sources":["../../../src/components/card/card-variants.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\n/**\n * PUBLIC slot recipe. `text-field`'s `card` variant and\n * `CheckboxCard` compose it, so it ships from `@elmeragroup/fuse/card`.\n * Horizontal cards keep their header text in a grid and wrap whole sections when\n * the container cannot fit them side by side.\n * One axis only — the external ref's surface/padding axes are decomposed away.\n */\nexport const cardVariants = tv({\n  slots: {\n    base: \"shadow-xs flex flex-col rounded-lg border bg-card text-card-foreground\",\n    cardHeader:\n      \"@container/card-header grid auto-rows-min items-start gap-1.5 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n    cardTag: \"text-sm font-semibold text-muted-foreground\",\n    cardTitle: \"font-semibold leading-none\",\n    cardDescription: \"text-muted-foreground\",\n    cardAction: \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n    cardContent: \"\",\n    cardFooter: \"flex items-center\",\n  },\n  variants: {\n    direction: {\n      vertical: {\n        cardHeader: \"p-6\",\n        cardContent: \"p-6 pt-0\",\n        cardFooter: \"p-6 pt-0\",\n      },\n      horizontal: {\n        base: \"flex-row flex-wrap items-start gap-6 p-6\",\n        cardHeader: \"min-w-0 flex-[2_1_16rem] wrap-anywhere\",\n        cardContent: \"min-w-0 flex-[1_1_12rem] wrap-anywhere\",\n        cardFooter: \"min-w-0 flex-[1_1_8rem] wrap-anywhere\",\n        cardTitle: \"text-xl\",\n      },\n    },\n  },\n  defaultVariants: {\n    direction: \"vertical\",\n  },\n});\n\n/**\n * Module-private type-scale recipes for `Card.Title` / `Card.Description`.\n * Not exported from `@elmeragroup/fuse/card` — there is no borrow\n * pattern. Kept off `cardVariants` because `direction=\"horizontal\"` already\n * sets `cardTitle: \"text-xl\"`; a second `size` axis on that slot would fight\n * through twMerge. `size` is a type-scale axis, not a density control-box rung:\n * it does not read `--control-*`.\n */\nexport const cardTitleVariants = tv({\n  variants: {\n    size: {\n      default: \"text-base\",\n      sm: \"text-sm\",\n      lg: \"text-lg\",\n      xl: \"text-xl\",\n      \"2xl\": \"text-2xl\",\n      \"3xl\": \"text-3xl\",\n      \"4xl\": \"text-4xl\",\n      \"5xl\": \"text-5xl\",\n      \"6xl\": \"text-6xl\",\n    },\n  },\n  defaultVariants: {\n    size: \"2xl\",\n  },\n});\n\nexport const cardDescriptionVariants = tv({\n  variants: {\n    size: {\n      xs: \"text-xs\",\n      sm: \"text-sm\",\n      default: \"text-base\",\n      lg: \"text-lg\",\n      xl: \"text-xl\",\n      \"2xl\": \"text-2xl\",\n    },\n  },\n  defaultVariants: {\n    size: \"sm\",\n  },\n});\n"],"mappings":";;;;;;;;;AASA,MAAa,eAAe,GAAG;CAC7B,OAAO;EACL,MAAM;EACN,YACE;EACF,SAAS;EACT,WAAW;EACX,iBAAiB;EACjB,YAAY;EACZ,aAAa;EACb,YAAY;CACd;CACA,UAAU,EACR,WAAW;EACT,UAAU;GACR,YAAY;GACZ,aAAa;GACb,YAAY;EACd;EACA,YAAY;GACV,MAAM;GACN,YAAY;GACZ,aAAa;GACb,YAAY;GACZ,WAAW;EACb;CACF,EACF;CACA,iBAAiB,EACf,WAAW,WACb;AACF,CAAC;;;;;;;;;AAUD,MAAa,oBAAoB,GAAG;CAClC,UAAU,EACR,MAAM;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,MACR;AACF,CAAC;AAED,MAAa,0BAA0B,GAAG;CACxC,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

package/components/card/card.d.ts

@@ -0,0 +1,45 @@
+import { cardDescriptionVariants, cardTitleVariants, cardVariants } from "./card-variants.js";
+import { HTMLAttributes, ReactElement, ReactNode } from "react";
+import { VariantProps } from "tailwind-variants";
+//#region src/components/card/card.d.ts
+type CardVariantProps = VariantProps<typeof cardVariants>;
+type CardDivProps = HTMLAttributes<HTMLDivElement> & CardVariantProps;
+type CardTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & CardVariantProps & {
+  /**
+   * Heading element level — `1`–`6` picks the rendered `h1`–`h6`. Defaults to `3`, so
+   * a card titles itself without assuming its place in the document outline.
+   */
+  level?: CardTitleLevel;
+  /** Typography size for the title, mapped to a `text-{size}` class. Defaults to `2xl`. */
+  size?: NonNullable<VariantProps<typeof cardTitleVariants>["size"]>;
+  /**
+   * Rendered before `children` — the title becomes a flex row (`items-center gap-x-1.5`)
+   * and any `svg` is sized to `5`.
+   */
+  icon?: ReactNode;
+};
+type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement> & CardVariantProps & {
+  /** Typography size for the description, mapped to a `text-{size}` class. Defaults to `sm`. */
+  size?: NonNullable<VariantProps<typeof cardDescriptionVariants>["size"]>;
+};
+declare function CardRoot({ className, direction, ...props }: CardDivProps): ReactElement;
+declare function CardHeader({ className, direction, ...props }: CardDivProps): ReactElement;
+declare function CardTag({ className, direction, ...props }: CardDivProps): ReactElement;
+declare function CardTitle({ children, className, direction, level, size, icon, ...props }: CardTitleProps): ReactElement;
+declare function CardDescription({ className, direction, size, ...props }: CardDescriptionProps): ReactElement;
+declare function CardAction({ className, direction, ...props }: CardDivProps): ReactElement;
+declare function CardContent({ className, direction, ...props }: CardDivProps): ReactElement;
+declare function CardFooter({ className, direction, ...props }: CardDivProps): ReactElement;
+export declare const Card: {
+  Root: typeof CardRoot;
+  Header: typeof CardHeader;
+  Tag: typeof CardTag;
+  Title: typeof CardTitle;
+  Description: typeof CardDescription;
+  Action: typeof CardAction;
+  Content: typeof CardContent;
+  Footer: typeof CardFooter;
+};
+//#endregion
+//# sourceMappingURL=card.d.ts.map

package/components/card/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","names":[],"sources":["../../../src/components/card/card.tsx"],"mappings":";;;;KAOK,mBAAmB,oBAAoB;KAEvC,eAAe,eAAe,kBAAkB;KAEhD;KAEA,iBAAiB,eAAe,sBACnC;;;;;EAKE,QAAQ;;EAER,OAAO,YAAY,oBAAoB;;;;;EAKvC,OAAO;;KAGN,uBAAuB,eAAe,wBACzC;;EAEE,OAAO,YAAY,oBAAoB;;iBAGlC,WAAW,WAAW,cAAc,SAAS,eAAe;iBAM5D,aAAa,WAAW,cAAc,SAAS,eAAe;iBAM9D,UAAU,WAAW,cAAc,SAAS,eAAe;iBAM3D,YACP,UACA,WACA,WACA,OACA,MACA,SACG,SACF,iBAAiB;iBAsBX,kBACP,WACA,WACA,SACG,SACF,uBAAuB;iBAYjB,aAAa,WAAW,cAAc,SAAS,eAAe;iBAM9D,cAAc,WAAW,cAAc,SAAS,eAAe;iBAM/D,aAAa,WAAW,cAAc,SAAS,eAAe;qBAe1D;EACX,aAAI;EACJ,eAAM;EACN,YAAG;EACH,cAAK;EACL,oBAAW;EACX,eAAM;EACN,gBAAO;EACP,eAAM"}

package/components/card/card.js

@@ -0,0 +1,92 @@
+import { cn } from "../../styles/cn.js";
+import { cardDescriptionVariants, cardTitleVariants, cardVariants } from "./card-variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/card/card.tsx
+function CardRoot({ className, direction, ...props }) {
+	const { base } = cardVariants({ direction });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		className: cn(base(), className),
+		...props
+	});
+}
+function CardHeader({ className, direction, ...props }) {
+	const { cardHeader } = cardVariants({ direction });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: cn(cardHeader(), className),
+		...props
+	});
+}
+function CardTag({ className, direction, ...props }) {
+	const { cardTag } = cardVariants({ direction });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-tag",
+		className: cn(cardTag(), className),
+		...props
+	});
+}
+function CardTitle({ children, className, direction, level = 3, size = "2xl", icon, ...props }) {
+	const { cardTitle } = cardVariants({ direction });
+	const Heading = `h${level}`;
+	return /* @__PURE__ */ jsxs(Heading, {
+		"data-slot": "card-title",
+		className: cn(cardTitleVariants({ size }), cardTitle({ className: icon ? "flex items-center gap-x-1.5 [&>svg]:size-5" : void 0 }), className),
+		...props,
+		children: [icon ?? null, children]
+	});
+}
+function CardDescription({ className, direction, size = "sm", ...props }) {
+	const { cardDescription } = cardVariants({ direction });
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "card-description",
+		className: cn(cardDescriptionVariants({ size }), cardDescription(), className),
+		...props
+	});
+}
+function CardAction({ className, direction, ...props }) {
+	const { cardAction } = cardVariants({ direction });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-action",
+		className: cn(cardAction(), className),
+		...props
+	});
+}
+function CardContent({ className, direction, ...props }) {
+	const { cardContent } = cardVariants({ direction });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: cn(cardContent(), className),
+		...props
+	});
+}
+function CardFooter({ className, direction, ...props }) {
+	const { cardFooter } = cardVariants({ direction });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: cn(cardFooter(), className),
+		...props
+	});
+}
+CardRoot.displayName = "Card.Root";
+CardHeader.displayName = "Card.Header";
+CardTag.displayName = "Card.Tag";
+CardTitle.displayName = "Card.Title";
+CardDescription.displayName = "Card.Description";
+CardAction.displayName = "Card.Action";
+CardContent.displayName = "Card.Content";
+CardFooter.displayName = "Card.Footer";
+const Card = {
+	Root: CardRoot,
+	Header: CardHeader,
+	Tag: CardTag,
+	Title: CardTitle,
+	Description: CardDescription,
+	Action: CardAction,
+	Content: CardContent,
+	Footer: CardFooter
+};
+//#endregion
+export { Card };
+
+//# sourceMappingURL=card.js.map

package/components/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from \"react\";\n\nimport type { VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../../styles/cn\";\nimport { cardDescriptionVariants, cardTitleVariants, cardVariants } from \"./card-variants\";\n\ntype CardVariantProps = VariantProps<typeof cardVariants>;\n\ntype CardDivProps = HTMLAttributes<HTMLDivElement> & CardVariantProps;\n\ntype CardTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\ntype CardTitleProps = HTMLAttributes<HTMLHeadingElement> &\n  CardVariantProps & {\n    /**\n     * Heading element level — `1`–`6` picks the rendered `h1`–`h6`. Defaults to `3`, so\n     * a card titles itself without assuming its place in the document outline.\n     */\n    level?: CardTitleLevel;\n    /** Typography size for the title, mapped to a `text-{size}` class. Defaults to `2xl`. */\n    size?: NonNullable<VariantProps<typeof cardTitleVariants>[\"size\"]>;\n    /**\n     * Rendered before `children` — the title becomes a flex row (`items-center gap-x-1.5`)\n     * and any `svg` is sized to `5`.\n     */\n    icon?: ReactNode;\n  };\n\ntype CardDescriptionProps = HTMLAttributes<HTMLParagraphElement> &\n  CardVariantProps & {\n    /** Typography size for the description, mapped to a `text-{size}` class. Defaults to `sm`. */\n    size?: NonNullable<VariantProps<typeof cardDescriptionVariants>[\"size\"]>;\n  };\n\nfunction CardRoot({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { base } = cardVariants({ direction });\n\n  return <div data-slot=\"card\" className={cn(base(), className)} {...props} />;\n}\n\nfunction CardHeader({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardHeader } = cardVariants({ direction });\n\n  return <div data-slot=\"card-header\" className={cn(cardHeader(), className)} {...props} />;\n}\n\nfunction CardTag({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardTag } = cardVariants({ direction });\n\n  return <div data-slot=\"card-tag\" className={cn(cardTag(), className)} {...props} />;\n}\n\nfunction CardTitle({\n  children,\n  className,\n  direction,\n  level = 3,\n  size = \"2xl\",\n  icon,\n  ...props\n}: CardTitleProps): ReactElement {\n  const { cardTitle } = cardVariants({ direction });\n  const Heading = `h${level}` as const;\n\n  return (\n    <Heading\n      data-slot=\"card-title\"\n      className={cn(\n        cardTitleVariants({ size }),\n        cardTitle({\n          // `direction=\"horizontal\"` pins `text-xl` here, so the size class must come first.\n          className: icon ? \"flex items-center gap-x-1.5 [&>svg]:size-5\" : undefined,\n        }),\n        className\n      )}\n      {...props}>\n      {icon ?? null}\n      {children}\n    </Heading>\n  );\n}\n\nfunction CardDescription({\n  className,\n  direction,\n  size = \"sm\",\n  ...props\n}: CardDescriptionProps): ReactElement {\n  const { cardDescription } = cardVariants({ direction });\n\n  return (\n    <p\n      data-slot=\"card-description\"\n      className={cn(cardDescriptionVariants({ size }), cardDescription(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardAction } = cardVariants({ direction });\n\n  return <div data-slot=\"card-action\" className={cn(cardAction(), className)} {...props} />;\n}\n\nfunction CardContent({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardContent } = cardVariants({ direction });\n\n  return <div data-slot=\"card-content\" className={cn(cardContent(), className)} {...props} />;\n}\n\nfunction CardFooter({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardFooter } = cardVariants({ direction });\n\n  return <div data-slot=\"card-footer\" className={cn(cardFooter(), className)} {...props} />;\n}\n\nCardRoot.displayName = \"Card.Root\";\nCardHeader.displayName = \"Card.Header\";\nCardTag.displayName = \"Card.Tag\";\nCardTitle.displayName = \"Card.Title\";\nCardDescription.displayName = \"Card.Description\";\nCardAction.displayName = \"Card.Action\";\nCardContent.displayName = \"Card.Content\";\nCardFooter.displayName = \"Card.Footer\";\n\nexport const Card = {\n  Root: CardRoot,\n  Header: CardHeader,\n  Tag: CardTag,\n  Title: CardTitle,\n  Description: CardDescription,\n  Action: CardAction,\n  Content: CardContent,\n  Footer: CardFooter,\n};\n"],"mappings":";;;;AAmCA,SAAS,SAAS,EAAE,WAAW,WAAW,GAAG,SAAqC;CAChF,MAAM,EAAE,SAAS,aAAa,EAAE,UAAU,CAAC;CAE3C,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAW,GAAG,KAAK,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7E;AAEA,SAAS,WAAW,EAAE,WAAW,WAAW,GAAG,SAAqC;CAClF,MAAM,EAAE,eAAe,aAAa,EAAE,UAAU,CAAC;CAEjD,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,WAAW,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;AAEA,SAAS,QAAQ,EAAE,WAAW,WAAW,GAAG,SAAqC;CAC/E,MAAM,EAAE,YAAY,aAAa,EAAE,UAAU,CAAC;CAE9C,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAW,WAAW,GAAG,QAAQ,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AACpF;AAEA,SAAS,UAAU,EACjB,UACA,WACA,WACA,QAAQ,GACR,OAAO,OACP,MACA,GAAG,SAC4B;CAC/B,MAAM,EAAE,cAAc,aAAa,EAAE,UAAU,CAAC;CAChD,MAAM,UAAU,IAAI;CAEpB,OACE,qBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,kBAAkB,EAAE,KAAK,CAAC,GAC1B,UAAU,EAER,WAAW,OAAO,+CAA+C,KAAA,EACnE,CAAC,GACD,SACF;EACA,GAAI;EAVN,UAAA,CAWG,QAAQ,MACR,QACM;;AAEb;AAEA,SAAS,gBAAgB,EACvB,WACA,WACA,OAAO,MACP,GAAG,SACkC;CACrC,MAAM,EAAE,oBAAoB,aAAa,EAAE,UAAU,CAAC;CAEtD,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,EAAE,KAAK,CAAC,GAAG,gBAAgB,GAAG,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,WAAW,GAAG,SAAqC;CAClF,MAAM,EAAE,eAAe,aAAa,EAAE,UAAU,CAAC;CAEjD,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,WAAW,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;AAEA,SAAS,YAAY,EAAE,WAAW,WAAW,GAAG,SAAqC;CACnF,MAAM,EAAE,gBAAgB,aAAa,EAAE,UAAU,CAAC;CAElD,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,YAAY,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC5F;AAEA,SAAS,WAAW,EAAE,WAAW,WAAW,GAAG,SAAqC;CAClF,MAAM,EAAE,eAAe,aAAa,EAAE,UAAU,CAAC;CAEjD,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,WAAW,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;AAEA,SAAS,cAAc;AACvB,WAAW,cAAc;AACzB,QAAQ,cAAc;AACtB,UAAU,cAAc;AACxB,gBAAgB,cAAc;AAC9B,WAAW,cAAc;AACzB,YAAY,cAAc;AAC1B,WAAW,cAAc;AAEzB,MAAa,OAAO;CAClB,MAAM;CACN,QAAQ;CACR,KAAK;CACL,OAAO;CACP,aAAa;CACb,QAAQ;CACR,SAAS;CACT,QAAQ;AACV"}

package/components/checkbox/checkbox-item.d.ts

@@ -0,0 +1,54 @@
+import { ItemContent, ItemDescription } from "../item/item-markup.js";
+import { SelectionItemActions, SelectionItemSubSection, SelectionItemTitle } from "../selection-item/selection-item.js";
+import { ReactElement, ReactNode } from "react";
+//#region src/components/checkbox/checkbox-item.d.ts
+type CheckboxItemBaseProps = {
+  /** Forwards `disabled` to the inner Checkbox and applies disabled hatch styling on the shell. */
+  isDisabled?: boolean;
+  /** Forwards `readOnly` to the inner Checkbox. */
+  isReadOnly?: boolean;
+  /**
+   * Where the control sits in the labelled row. Forwarded to `SelectionItem.Shell`.
+   * Default `"start"`.
+   */
+  controlPosition?: "start" | "end";
+  /** Extra classes, merged onto the shell via `cn`. */
+  className?: string;
+  /**
+   * Row children, partitioned by the row. Direct `CheckboxItem.SubSection` (the
+   * same object as `SelectionItem.SubSection`) children render outside the label.
+   */
+  children?: ReactNode;
+};
+/**
+ * Discriminated parent-vs-value union. Parent rows derive tri-state from the
+ * group's `allValues` and must not set `value`.
+ */
+export type CheckboxItemProps = CheckboxItemBaseProps & ({
+  /** Member value in the group. Required unless `parent`. */
+  value: string;
+  /** When true, this row is the tri-state parent. Incompatible with `value`. */
+  parent?: false;
+} | {
+  /** Tri-state parent — checked/indeterminate/unchecked from the group's `allValues`. */
+  parent: true;
+  /** Parent rows must not set `value`. */
+  value?: never;
+});
+/**
+ * Labeled selection row over `SelectionItem.Shell`. Server-compatible: it renders the
+ * client `SelectionItem.Shell`, which wires Field.Item and the label. The namespace
+ * aliases `Title`, `Description`, `Content`, `Actions` and `SubSection` are the exact
+ * `SelectionItem.*` objects, so `child.type` partitioning works with either spelling.
+ */
+export declare function CheckboxItem({ value, parent, isDisabled, isReadOnly, controlPosition, className, children }: CheckboxItemProps): ReactElement;
+export declare namespace CheckboxItem {
+  var displayName: string;
+  var Title: typeof SelectionItemTitle;
+  var Description: typeof ItemDescription;
+  var Content: typeof ItemContent;
+  var Actions: typeof SelectionItemActions;
+  var SubSection: typeof SelectionItemSubSection;
+}
+//#endregion
+//# sourceMappingURL=checkbox-item.d.ts.map

package/components/checkbox/checkbox-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-item.d.ts","names":[],"sources":["../../../src/components/checkbox/checkbox-item.tsx"],"mappings":";;;;KAaK;;EAEH;;EAEA;;;;;EAKA;;EAEA;;;;;EAKA,WAAW;;;;;;YAOD,oBAAoB;;EAIxB;;EAEA;;;EAIA;;EAEA;;;;;;;;wBAUQ,eACd,OACA,QACA,YACA,YACA,iBACA,WACA,YACC,oBAAoB;yBARP;;oBAAA"}

package/components/checkbox/checkbox-item.js

@@ -0,0 +1,42 @@
+import { SelectionItemShell } from "../selection-item/selection-item.js";
+import { Checkbox } from "./checkbox.js";
+import { SelectionItem } from "../selection-item/index.js";
+import { partitionSubSections } from "../selection-item/partition-sub-sections.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/checkbox/checkbox-item.tsx
+/**
+* Labeled selection row over `SelectionItem.Shell`. Server-compatible: it renders the
+* client `SelectionItem.Shell`, which wires Field.Item and the label. The namespace
+* aliases `Title`, `Description`, `Content`, `Actions` and `SubSection` are the exact
+* `SelectionItem.*` objects, so `child.type` partitioning works with either spelling.
+*/
+function CheckboxItem({ value, parent, isDisabled, isReadOnly, controlPosition = "start", className, children }) {
+	const { row, subSections } = partitionSubSections(children);
+	return /* @__PURE__ */ jsx(SelectionItemShell, {
+		dataSlot: "checkbox-item",
+		isDisabled,
+		controlPosition,
+		className,
+		control: parent === true ? /* @__PURE__ */ jsx(Checkbox, {
+			parent: true,
+			disabled: isDisabled,
+			readOnly: isReadOnly
+		}) : /* @__PURE__ */ jsx(Checkbox, {
+			value,
+			disabled: isDisabled,
+			readOnly: isReadOnly
+		}),
+		subSections,
+		children: row
+	});
+}
+CheckboxItem.displayName = "CheckboxItem";
+CheckboxItem.Title = SelectionItem.Title;
+CheckboxItem.Description = SelectionItem.Description;
+CheckboxItem.Content = SelectionItem.Content;
+CheckboxItem.Actions = SelectionItem.Actions;
+CheckboxItem.SubSection = SelectionItem.SubSection;
+//#endregion
+export { CheckboxItem };
+
+//# sourceMappingURL=checkbox-item.js.map

package/components/checkbox/checkbox-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-item.js","names":[],"sources":["../../../src/components/checkbox/checkbox-item.tsx"],"sourcesContent":["/**\n * Server-visible `CheckboxItem`. The row is hook-free, so this module has no directive:\n * a server component runs it and reads `CheckboxItem.Title` and the other parts, while\n * `Checkbox` and `SelectionItem.Shell` stay client references it renders. It partitions\n * its own SubSections (see `partitionSubSections`) and passes them to the shell.\n */\nimport type { ReactElement, ReactNode } from \"react\";\n\nimport { SelectionItem } from \"../selection-item\";\nimport { partitionSubSections } from \"../selection-item/partition-sub-sections\";\nimport { SelectionItemShell } from \"../selection-item/selection-item\";\nimport { Checkbox } from \"./checkbox\";\n\ntype CheckboxItemBaseProps = {\n  /** Forwards `disabled` to the inner Checkbox and applies disabled hatch styling on the shell. */\n  isDisabled?: boolean;\n  /** Forwards `readOnly` to the inner Checkbox. */\n  isReadOnly?: boolean;\n  /**\n   * Where the control sits in the labelled row. Forwarded to `SelectionItem.Shell`.\n   * Default `\"start\"`.\n   */\n  controlPosition?: \"start\" | \"end\";\n  /** Extra classes, merged onto the shell via `cn`. */\n  className?: string;\n  /**\n   * Row children, partitioned by the row. Direct `CheckboxItem.SubSection` (the\n   * same object as `SelectionItem.SubSection`) children render outside the label.\n   */\n  children?: ReactNode;\n};\n\n/**\n * Discriminated parent-vs-value union. Parent rows derive tri-state from the\n * group's `allValues` and must not set `value`.\n */\nexport type CheckboxItemProps = CheckboxItemBaseProps &\n  (\n    | {\n        /** Member value in the group. Required unless `parent`. */\n        value: string;\n        /** When true, this row is the tri-state parent. Incompatible with `value`. */\n        parent?: false;\n      }\n    | {\n        /** Tri-state parent — checked/indeterminate/unchecked from the group's `allValues`. */\n        parent: true;\n        /** Parent rows must not set `value`. */\n        value?: never;\n      }\n  );\n\n/**\n * Labeled selection row over `SelectionItem.Shell`. Server-compatible: it renders the\n * client `SelectionItem.Shell`, which wires Field.Item and the label. The namespace\n * aliases `Title`, `Description`, `Content`, `Actions` and `SubSection` are the exact\n * `SelectionItem.*` objects, so `child.type` partitioning works with either spelling.\n */\nexport function CheckboxItem({\n  value,\n  parent,\n  isDisabled,\n  isReadOnly,\n  controlPosition = \"start\",\n  className,\n  children,\n}: CheckboxItemProps): ReactElement {\n  const { row, subSections } = partitionSubSections(children);\n  return (\n    <SelectionItemShell\n      dataSlot=\"checkbox-item\"\n      isDisabled={isDisabled}\n      controlPosition={controlPosition}\n      className={className}\n      control={\n        parent === true ? (\n          <Checkbox parent disabled={isDisabled} readOnly={isReadOnly} />\n        ) : (\n          <Checkbox value={value} disabled={isDisabled} readOnly={isReadOnly} />\n        )\n      }\n      subSections={subSections}>\n      {row}\n    </SelectionItemShell>\n  );\n}\n\nCheckboxItem.displayName = \"CheckboxItem\";\n\nCheckboxItem.Title = SelectionItem.Title;\nCheckboxItem.Description = SelectionItem.Description;\nCheckboxItem.Content = SelectionItem.Content;\nCheckboxItem.Actions = SelectionItem.Actions;\nCheckboxItem.SubSection = SelectionItem.SubSection;\n"],"mappings":";;;;;;;;;;;;AA0DA,SAAgB,aAAa,EAC3B,OACA,QACA,YACA,YACA,kBAAkB,SAClB,WACA,YACkC;CAClC,MAAM,EAAE,KAAK,gBAAgB,qBAAqB,QAAQ;CAC1D,OACE,oBAAC,oBAAD;EACE,UAAS;EACG;EACK;EACN;EACX,SACE,WAAW,OACT,oBAAC,UAAD;GAAU,QAAA;GAAO,UAAU;GAAY,UAAU;EAAa,CAAA,IAE9D,oBAAC,UAAD;GAAiB;GAAO,UAAU;GAAY,UAAU;EAAa,CAAA;EAG5D;EACZ,UAAA;CACiB,CAAA;AAExB;AAEA,aAAa,cAAc;AAE3B,aAAa,QAAQ,cAAc;AACnC,aAAa,cAAc,cAAc;AACzC,aAAa,UAAU,cAAc;AACrC,aAAa,UAAU,cAAc;AACrC,aAAa,aAAa,cAAc"}

package/components/checkbox/checkbox.d.ts

@@ -0,0 +1,95 @@
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+//#region src/components/checkbox/checkbox.d.ts
+/**
+ * Unlabeled 16px checkbox over the base-ui primitive. Client component, because base-ui
+ * Checkbox owns the checked state. The indicator is internal: Phosphor regular `Minus`
+ * when indeterminate, `Check` otherwise. Labeled usage composes `Field.Root` and
+ * `Field.Label`, or `CheckboxItem`. A disabled checkbox dims to 50% on its own, also
+ * outside a field. Internal themes round the box with the one radius, and external themes
+ * keep the reference's 4px corner.
+ */
+export declare function Checkbox({ className, ...props }: ComponentProps<typeof Checkbox$1.Root>): ReactElement;
+export declare namespace Checkbox {
+  var displayName: string;
+}
+export type CheckboxGroupProps = {
+  /** Fieldset legend, rendered as `Field.Legend variant="label"`. The legend row is omitted when absent. */
+  label?: string;
+  /** Supporting copy, rendered as `Field.Description`. */
+  description?: string;
+  /** Error copy, rendered as `Field.Error` when truthy. Accepts any `ReactNode`. */
+  errorMessage?: ReactNode;
+  /**
+   * Layout of the group primitive, and of CheckboxItemGroup's stacked-card list.
+   * Vertical: primitive `flex-col gap-2`; item list connected `flex-col gap-0`.
+   * Horizontal: primitive `flex-wrap gap-4`; item list `flex-row flex-wrap gap-4`
+   * with individually rounded cards. Maps through `selectionGroupOrientationVariants`.
+   */
+  orientation?: "vertical" | "horizontal";
+  /** Controlled selected values. */
+  value?: string[];
+  /** Uncontrolled initial selected values. */
+  defaultValue?: string[];
+  /** Called with the selected `string[]`, not the event. Mapped to base-ui `onValueChange`. */
+  onChange?: (value: string[]) => void;
+  /**
+   * Enables the tri-state `parent` checkbox. Base-ui derives checked/indeterminate
+   * from whether the group's value is a subset of these members.
+   */
+  allValues?: string[];
+  /** Forwards `disabled` to `Field.Root` and the group primitive. */
+  isDisabled?: boolean;
+  /** Forwards `invalid` to `Field.Root`. */
+  isInvalid?: boolean;
+  /**
+   * Set on `Field.Root`, not the group primitive. Base-ui's CheckboxGroup has no
+   * `name`; Field context threads it to member hidden inputs. RadioGroup puts
+   * `name` on its primitive — the face is the same `name?: string` either way.
+   */
+  name?: string;
+  /** Forwarded to the group primitive. */
+  id?: string;
+  /** Extra classes, merged onto the group primitive via `cn`. */
+  className?: string;
+  /** Group members — typically `Checkbox` or `CheckboxItem`. */
+  children?: ReactNode;
+};
+/**
+ * Labeled checkbox group composite over Field and base-ui CheckboxGroup. Client component,
+ * because it wires Field validity and the group primitive.
+ */
+export declare function CheckboxGroup({ label, description, errorMessage, orientation, value, defaultValue, onChange, allValues, isDisabled, isInvalid, name, id, className, children }: CheckboxGroupProps): ReactElement;
+export declare namespace CheckboxGroup {
+  var displayName: string;
+}
+/**
+ * Stacked-card group: `CheckboxGroup` wrapping children in the private
+ * SelectionItem list (`role="list"`). `orientation` is forwarded to the labeled
+ * outer group and to that list: vertical remains connected `flex-col gap-0`;
+ * horizontal is `flex-row flex-wrap gap-4` with individually rounded cards.
+ */
+export declare function CheckboxItemGroup({ orientation, ...props }: CheckboxGroupProps): ReactElement;
+export declare namespace CheckboxItemGroup {
+  var displayName: string;
+}
+export type CheckboxDescriptionProps = {
+  /** Typically a `Checkbox`. */
+  children?: ReactNode;
+  /**
+   * Trailing note. A string renders as a muted `<small>`; any other node renders
+   * intact. Visual-only — not wired to `aria-describedby`. Use Field description
+   * wiring when programmatic association is required.
+   */
+  describedBy?: ReactNode;
+};
+/**
+ * Inline "checkbox + trailing note" row. The note is
+ * visual-only; it does not become an accessible description.
+ */
+export declare function CheckboxDescription({ children, describedBy }: CheckboxDescriptionProps): ReactElement;
+export declare namespace CheckboxDescription {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=checkbox.d.ts.map

package/components/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../../src/components/checkbox/checkbox.tsx"],"mappings":";;;;;;;;;;;wBA4BgB,WACd,cACG,SACF,sBAAsB,WAAkB,QAAQ;yBAHnC;MAAA;;YA+BJ;;EAEV;;EAEA;;EAEA,eAAe;;;;;;;EAOf;;EAEA;;EAEA;;EAEA,YAAY;;;;;EAKZ;;EAEA;;EAEA;;;;;;EAMA;;EAEA;;EAEA;;EAEA,WAAW;;;;;;wBAOG,gBACd,OACA,aACA,cACA,aACA,OACA,cACA,UACA,WACA,YACA,WACA,MACA,IACA,WACA,YACC,qBAAqB;yBAfR;MAAA;;;;;;;;wBA8CA,oBAAoB,gBAA6B,SAAS,qBAAqB;yBAA/E;MAAA;;YAUJ;;EAEV,WAAW;;;;;;EAMX,cAAc;;;;;;wBAOA,sBAAsB,UAAU,eAAe,2BAA2B;yBAA1E;MAAA"}

package/components/checkbox/checkbox.js

@@ -0,0 +1,106 @@
+"use client";
+import { cn } from "../../styles/cn.js";
+import { dataStateFaceClass } from "../../styles/state-face.js";
+import { selfFocusRingClass } from "../../styles/utils.js";
+import { definedProps } from "../../internal/defined-props.js";
+import { mergeClassName } from "../../styles/merge-class-name.js";
+import { Check } from "../../icons/generated/check.js";
+import { Minus } from "../../icons/generated/minus.js";
+import { isTextNode } from "../../internal/is-text-node.js";
+import { checkboxCornerClass } from "../../styles/corner-radius.js";
+import { FieldFrame } from "../field/field-frame.js";
+import { selectionGroupOrientationVariants } from "../selection-item/selection-item-variants.js";
+import { SelectionGroupLayout, SelectionItemGroup } from "../selection-item/selection-item.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
+//#region src/components/checkbox/checkbox.tsx
+/**
+* Unlabeled 16px checkbox over the base-ui primitive. Client component, because base-ui
+* Checkbox owns the checked state. The indicator is internal: Phosphor regular `Minus`
+* when indeterminate, `Check` otherwise. Labeled usage composes `Field.Root` and
+* `Field.Label`, or `CheckboxItem`. A disabled checkbox dims to 50% on its own, also
+* outside a field. Internal themes round the box with the one radius, and external themes
+* keep the reference's 4px corner.
+*/
+function Checkbox({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		"data-slot": "checkbox",
+		className: mergeClassName(className, "peer shadow-xs ease-out relative flex size-4 max-w-4 shrink-0 items-center justify-center border border-input bg-card transition-[color,background-color,border-color,box-shadow] duration-150 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 after:content-[''] data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground", checkboxCornerClass, selfFocusRingClass, dataStateFaceClass, "aria-invalid:aria-checked:border-primary data-invalid:aria-checked:border-primary"),
+		...definedProps(props),
+		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {
+				...indicatorProps,
+				children: state.indeterminate ? /* @__PURE__ */ jsx(Minus, {}) : /* @__PURE__ */ jsx(Check, {})
+			})
+		})
+	});
+}
+/**
+* Labeled checkbox group composite over Field and base-ui CheckboxGroup. Client component,
+* because it wires Field validity and the group primitive.
+*/
+function CheckboxGroup({ label, description, errorMessage, orientation = "vertical", value, defaultValue, onChange, allValues, isDisabled, isInvalid, name, id, className, children }) {
+	return /* @__PURE__ */ jsx(FieldFrame, {
+		heading: "legend",
+		label,
+		description,
+		errorMessage,
+		name,
+		invalid: isInvalid,
+		disabled: isDisabled,
+		children: /* @__PURE__ */ jsx(CheckboxGroup$1, {
+			"data-slot": "checkbox-group",
+			id,
+			value,
+			defaultValue,
+			onValueChange: onChange,
+			allValues,
+			disabled: isDisabled,
+			className: cn(selectionGroupOrientationVariants({ orientation }).group(), className),
+			children: /* @__PURE__ */ jsx(SelectionGroupLayout, {
+				orientation,
+				children
+			})
+		})
+	});
+}
+/**
+* Stacked-card group: `CheckboxGroup` wrapping children in the private
+* SelectionItem list (`role="list"`). `orientation` is forwarded to the labeled
+* outer group and to that list: vertical remains connected `flex-col gap-0`;
+* horizontal is `flex-row flex-wrap gap-4` with individually rounded cards.
+*/
+function CheckboxItemGroup({ orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxGroup, {
+		...props,
+		orientation,
+		children: /* @__PURE__ */ jsx(SelectionItemGroup, {
+			orientation,
+			children: props.children
+		})
+	});
+}
+/**
+* Inline "checkbox + trailing note" row. The note is
+* visual-only; it does not become an accessible description.
+*/
+function CheckboxDescription({ children, describedBy }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start gap-2",
+		children: [children, isTextNode(describedBy) ? /* @__PURE__ */ jsx("small", {
+			className: "text-sm text-muted-foreground",
+			children: describedBy
+		}) : describedBy]
+	});
+}
+Checkbox.displayName = "Checkbox";
+CheckboxGroup.displayName = "CheckboxGroup";
+CheckboxItemGroup.displayName = "CheckboxItemGroup";
+CheckboxDescription.displayName = "CheckboxDescription";
+//#endregion
+export { Checkbox, CheckboxDescription, CheckboxGroup, CheckboxItemGroup };
+
+//# sourceMappingURL=checkbox.js.map

package/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["CheckboxPrimitive","CheckboxGroupPrimitive"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactElement, ReactNode } from \"react\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { CheckboxGroup as CheckboxGroupPrimitive } from \"@base-ui/react/checkbox-group\";\n\nimport { Check } from \"../../icons/generated/check\";\nimport { Minus } from \"../../icons/generated/minus\";\nimport { definedProps } from \"../../internal/defined-props\";\nimport { isTextNode } from \"../../internal/is-text-node\";\nimport { cn } from \"../../styles/cn\";\nimport { checkboxCornerClass } from \"../../styles/corner-radius\";\nimport { mergeClassName } from \"../../styles/merge-class-name\";\nimport { dataStateFaceClass } from \"../../styles/state-face\";\nimport { selfFocusRingClass } from \"../../styles/utils\";\nimport { FieldFrame } from \"../field/field-frame\";\nimport { SelectionGroupLayout, SelectionItemGroup } from \"../selection-item/selection-item\";\nimport { selectionGroupOrientationVariants } from \"../selection-item/selection-item-variants\";\n\n/**\n * Unlabeled 16px checkbox over the base-ui primitive. Client component, because base-ui\n * Checkbox owns the checked state. The indicator is internal: Phosphor regular `Minus`\n * when indeterminate, `Check` otherwise. Labeled usage composes `Field.Root` and\n * `Field.Label`, or `CheckboxItem`. A disabled checkbox dims to 50% on its own, also\n * outside a field. Internal themes round the box with the one radius, and external themes\n * keep the reference's 4px corner.\n */\nexport function Checkbox({\n  className,\n  ...props\n}: ComponentProps<typeof CheckboxPrimitive.Root>): ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={mergeClassName(\n        className,\n        // The root is a <span>, which never matches `:disabled`, so the state face keys off\n        // Base UI's `data-disabled` and `data-invalid` attributes, plus a consumer's\n        // `aria-invalid`. A checked invalid box keeps its primary border beside the ring.\n        // oxlint-disable-next-line elmera/no-local-focus-ring -- native outline off; ring comes from the shared adapter\n        \"peer shadow-xs ease-out relative flex size-4 max-w-4 shrink-0 items-center justify-center border border-input bg-card transition-[color,background-color,border-color,box-shadow] duration-150 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 after:content-[''] data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground\",\n        checkboxCornerClass,\n        selfFocusRingClass,\n        dataStateFaceClass,\n        \"aria-invalid:aria-checked:border-primary data-invalid:aria-checked:border-primary\"\n      )}\n      {...definedProps(props)}>\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n        render={(indicatorProps, state) => (\n          <span {...indicatorProps}>{state.indeterminate ? <Minus /> : <Check />}</span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport type CheckboxGroupProps = {\n  /** Fieldset legend, rendered as `Field.Legend variant=\"label\"`. The legend row is omitted when absent. */\n  label?: string;\n  /** Supporting copy, rendered as `Field.Description`. */\n  description?: string;\n  /** Error copy, rendered as `Field.Error` when truthy. Accepts any `ReactNode`. */\n  errorMessage?: ReactNode;\n  /**\n   * Layout of the group primitive, and of CheckboxItemGroup's stacked-card list.\n   * Vertical: primitive `flex-col gap-2`; item list connected `flex-col gap-0`.\n   * Horizontal: primitive `flex-wrap gap-4`; item list `flex-row flex-wrap gap-4`\n   * with individually rounded cards. Maps through `selectionGroupOrientationVariants`.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Controlled selected values. */\n  value?: string[];\n  /** Uncontrolled initial selected values. */\n  defaultValue?: string[];\n  /** Called with the selected `string[]`, not the event. Mapped to base-ui `onValueChange`. */\n  onChange?: (value: string[]) => void;\n  /**\n   * Enables the tri-state `parent` checkbox. Base-ui derives checked/indeterminate\n   * from whether the group's value is a subset of these members.\n   */\n  allValues?: string[];\n  /** Forwards `disabled` to `Field.Root` and the group primitive. */\n  isDisabled?: boolean;\n  /** Forwards `invalid` to `Field.Root`. */\n  isInvalid?: boolean;\n  /**\n   * Set on `Field.Root`, not the group primitive. Base-ui's CheckboxGroup has no\n   * `name`; Field context threads it to member hidden inputs. RadioGroup puts\n   * `name` on its primitive — the face is the same `name?: string` either way.\n   */\n  name?: string;\n  /** Forwarded to the group primitive. */\n  id?: string;\n  /** Extra classes, merged onto the group primitive via `cn`. */\n  className?: string;\n  /** Group members — typically `Checkbox` or `CheckboxItem`. */\n  children?: ReactNode;\n};\n\n/**\n * Labeled checkbox group composite over Field and base-ui CheckboxGroup. Client component,\n * because it wires Field validity and the group primitive.\n */\nexport function CheckboxGroup({\n  label,\n  description,\n  errorMessage,\n  orientation = \"vertical\",\n  value,\n  defaultValue,\n  onChange,\n  allValues,\n  isDisabled,\n  isInvalid,\n  name,\n  id,\n  className,\n  children,\n}: CheckboxGroupProps): ReactElement {\n  return (\n    <FieldFrame\n      heading=\"legend\"\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      name={name}\n      invalid={isInvalid}\n      disabled={isDisabled}>\n      <CheckboxGroupPrimitive\n        data-slot=\"checkbox-group\"\n        id={id}\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={onChange}\n        allValues={allValues}\n        disabled={isDisabled}\n        className={cn(selectionGroupOrientationVariants({ orientation }).group(), className)}>\n        <SelectionGroupLayout orientation={orientation}>{children}</SelectionGroupLayout>\n      </CheckboxGroupPrimitive>\n    </FieldFrame>\n  );\n}\n\n/**\n * Stacked-card group: `CheckboxGroup` wrapping children in the private\n * SelectionItem list (`role=\"list\"`). `orientation` is forwarded to the labeled\n * outer group and to that list: vertical remains connected `flex-col gap-0`;\n * horizontal is `flex-row flex-wrap gap-4` with individually rounded cards.\n */\nexport function CheckboxItemGroup({ orientation = \"vertical\", ...props }: CheckboxGroupProps): ReactElement {\n  // The default is spelled here because the docs API extractor reads a part's\n  // documented defaults out of its own destructuring.\n  return (\n    <CheckboxGroup {...props} orientation={orientation}>\n      <SelectionItemGroup orientation={orientation}>{props.children}</SelectionItemGroup>\n    </CheckboxGroup>\n  );\n}\n\nexport type CheckboxDescriptionProps = {\n  /** Typically a `Checkbox`. */\n  children?: ReactNode;\n  /**\n   * Trailing note. A string renders as a muted `<small>`; any other node renders\n   * intact. Visual-only — not wired to `aria-describedby`. Use Field description\n   * wiring when programmatic association is required.\n   */\n  describedBy?: ReactNode;\n};\n\n/**\n * Inline \"checkbox + trailing note\" row. The note is\n * visual-only; it does not become an accessible description.\n */\nexport function CheckboxDescription({ children, describedBy }: CheckboxDescriptionProps): ReactElement {\n  // Only a string `describedBy` becomes the muted `<small>` note.\n  return (\n    <div className=\"flex items-start gap-2\">\n      {children}\n      {isTextNode(describedBy) ? (\n        <small className=\"text-sm text-muted-foreground\">{describedBy}</small>\n      ) : (\n        describedBy\n      )}\n    </div>\n  );\n}\n\nCheckbox.displayName = \"Checkbox\";\nCheckboxGroup.displayName = \"CheckboxGroup\";\nCheckboxItemGroup.displayName = \"CheckboxItemGroup\";\nCheckboxDescription.displayName = \"CheckboxDescription\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,SAAS,EACvB,WACA,GAAG,SAC2D;CAC9D,OACE,oBAACA,WAAkB,MAAnB;EACE,aAAU;EACV,WAAW,eACT,WAKA,udACA,qBACA,oBACA,oBACA,mFACF;EACA,GAAI,aAAa,KAAK;EACtB,UAAA,oBAACA,WAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GACV,SAAS,gBAAgB,UACvB,oBAAC,QAAD;IAAM,GAAI;IAAiB,UAAA,MAAM,gBAAgB,oBAAC,OAAD,CAAQ,CAAA,IAAI,oBAAC,OAAD,CAAQ,CAAA;GAAQ,CAAA;EAEhF,CAAA;CACqB,CAAA;AAE5B;;;;;AAiDA,SAAgB,cAAc,EAC5B,OACA,aACA,cACA,cAAc,YACd,OACA,cACA,UACA,WACA,YACA,WACA,MACA,IACA,WACA,YACmC;CACnC,OACE,oBAAC,YAAD;EACE,SAAQ;EACD;EACM;EACC;EACR;EACN,SAAS;EACT,UAAU;EACV,UAAA,oBAACC,iBAAD;GACE,aAAU;GACN;GACG;GACO;GACd,eAAe;GACJ;GACX,UAAU;GACV,WAAW,GAAG,kCAAkC,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,GAAG,SAAS;GACnF,UAAA,oBAAC,sBAAD;IAAmC;IAAc;GAA+B,CAAA;EAC1D,CAAA;CACd,CAAA;AAEhB;;;;;;;AAQA,SAAgB,kBAAkB,EAAE,cAAc,YAAY,GAAG,SAA2C;CAG1G,OACE,oBAAC,eAAD;EAAe,GAAI;EAAoB;EACrC,UAAA,oBAAC,oBAAD;GAAiC;GAAc,UAAA,MAAM;EAA6B,CAAA;CACrE,CAAA;AAEnB;;;;;AAiBA,SAAgB,oBAAoB,EAAE,UAAU,eAAuD;CAErG,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACG,UACA,WAAW,WAAW,IACrB,oBAAC,SAAD;GAAO,WAAU;GAAiC,UAAA;EAAmB,CAAA,IAErE,WAEC;;AAET;AAEA,SAAS,cAAc;AACvB,cAAc,cAAc;AAC5B,kBAAkB,cAAc;AAChC,oBAAoB,cAAc"}

package/components/checkbox-card/checkbox-card.d.ts

@@ -0,0 +1,63 @@
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { VariantProps } from "tailwind-variants";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/components/checkbox-card/checkbox-card.d.ts
+declare const checkboxCardStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    default: "bg-card";
+    muted: "bg-muted";
+  };
+  isDisabled: {
+    true: string;
+  };
+}, undefined, "", {
+  variant: {
+    default: "bg-card";
+    muted: "bg-muted";
+  };
+  isDisabled: {
+    true: string;
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    default: "bg-card";
+    muted: "bg-muted";
+  };
+  isDisabled: {
+    true: string;
+  };
+}, undefined>>;
+export type CheckboxCardProps = Omit<ComponentProps<typeof Checkbox.Root>, "render" | "disabled" | "title" | "className"> & VariantProps<typeof checkboxCardStyles> & {
+  /** Extra content below the description, inside the label. */
+  children?: ReactNode;
+  /**
+   * Visible title. The native string `title` attribute is omitted so this
+   * `ReactNode` is not narrowed to `string`.
+   */
+  title: ReactNode;
+  /** Badge chips above the title. The row is omitted when `tags` is empty or absent. */
+  tags?: string[];
+  /** Supporting line under the title (`text-sm text-pretty`). */
+  description: string;
+  /** Trailing slot outside the label — clicks there do not toggle the checkbox. */
+  rightContent?: ReactNode;
+  /**
+   * Dims the card with the shared disabled look (50% opacity, `not-allowed` cursor) and
+   * sets `disabled` on the checkbox primitive.
+   * Primitive `disabled` is omitted from the pass-through.
+   */
+  isDisabled?: boolean;
+  /** Checkbox group membership value. */
+  value?: string;
+};
+/**
+ * Selectable marketing or product card over the base-ui Checkbox primitive. Client
+ * component, because it wires Field.Item, the label and the checkbox primitive. It needs a
+ * `Field.Root` ancestor, and a checkbox-group ancestor for `value` membership.
+ */
+export declare function CheckboxCard({ children, title, tags, description, variant, rightContent, isDisabled, value, ...other }: CheckboxCardProps): ReactElement;
+export declare namespace CheckboxCard {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=checkbox-card.d.ts.map