@psnext/design-system 1.1.0 → 1.2.0

package/dist/patterns/MediaObject/index.cjs

@@ -0,0 +1,108 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+const require_primitives_Heading_index = require("../../primitives/Heading/index.cjs");
+const require_primitives_Text_index = require("../../primitives/Text/index.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+//#region src/patterns/MediaObject/MediaObject.tsx
+/** Root <article> surface of a media card; consumers compose the parts inside it. */
+function MediaObject({ className, interactive, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {
+		"data-slot": "media-object",
+		className: require_cn.cn("group/media flex flex-col overflow-hidden rounded-2xl border bg-card", interactive && "transition-all hover:-translate-y-0.5 hover:shadow-md", className),
+		...props
+	});
+}
+/** Top media image of a card; renders a 16/9 cover image that scales on hover. */
+function MediaObjectImage({ className, alt, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		"data-slot": "media-object-image",
+		alt,
+		className: require_cn.cn("aspect-[16/9] w-full object-cover transition-transform group-hover/media:scale-[1.02]", className),
+		...props
+	});
+}
+/** Square container for the icon-top card variant; place an Icon inside it. */
+function MediaObjectIcon({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "media-object-icon",
+		className: require_cn.cn("flex size-10 shrink-0 items-center justify-center", className),
+		...props
+	});
+}
+/** Padded body region of a card that holds the title, text, and actions. */
+function MediaObjectContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "media-object-content",
+		className: require_cn.cn("flex flex-1 flex-col gap-3 p-5", className),
+		...props
+	});
+}
+/** Card title; wraps the Heading primitive rendered as an <h3>. */
+function MediaObjectTitle({ size, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Heading_index.Heading, {
+		"data-slot": "media-object-title",
+		as: "h3",
+		size: size ?? "4",
+		...props
+	});
+}
+/** Supporting body copy; wraps the Text primitive (muted, small). */
+function MediaObjectText({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Text_index.Text, {
+		"data-slot": "media-object-text",
+		variant: "muted",
+		size: "small",
+		...props
+	});
+}
+/** Action row pinned to the bottom of the content; holds a Button or Link. */
+function MediaObjectActions({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "media-object-actions",
+		className: require_cn.cn("mt-auto flex items-center gap-2 pt-2", className),
+		...props
+	});
+}
+const mediaObjectGroupVariants = (0, class_variance_authority.cva)("grid", {
+	variants: {
+		columns: {
+			1: "grid-cols-1",
+			2: "grid-cols-1 sm:grid-cols-2",
+			3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+			4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+		},
+		gap: {
+			sm: "gap-4",
+			md: "gap-6",
+			lg: "gap-8"
+		}
+	},
+	defaultVariants: {
+		columns: 3,
+		gap: "lg"
+	}
+});
+/** Responsive grid wrapper that lays out a set of MediaObject cards. */
+function MediaObjectGroup({ className, columns, gap, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "media-object-group",
+		className: require_cn.cn(mediaObjectGroupVariants({
+			columns,
+			gap
+		}), className),
+		...props
+	});
+}
+//#endregion
+exports.MediaObject = MediaObject;
+exports.MediaObjectActions = MediaObjectActions;
+exports.MediaObjectContent = MediaObjectContent;
+exports.MediaObjectGroup = MediaObjectGroup;
+exports.MediaObjectIcon = MediaObjectIcon;
+exports.MediaObjectImage = MediaObjectImage;
+exports.MediaObjectText = MediaObjectText;
+exports.MediaObjectTitle = MediaObjectTitle;
+exports.mediaObjectGroupVariants = mediaObjectGroupVariants;
+
+//# sourceMappingURL=index.cjs.map

package/dist/patterns/MediaObject/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","Heading","Text"],"sources":["../../../src/patterns/MediaObject/MediaObject.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { Heading, type HeadingProps } from \"@/primitives/Heading\";\nimport { Text } from \"@/primitives/Text\";\nimport { cn } from \"@/utils\";\n\n// MediaObject — a COMPOSITIONAL media card (Radix-style parts the consumer\n// assembles). Replaces the legacy landing \"media cards\" (image + title + text +\n// action) and slingshot \"feature cards\" (icon + title + description + action).\n// Each part is a thin styled wrapper carrying a data-slot; spacing and hover are\n// driven entirely by Tailwind tokens + CSS group-hover (no JS state).\n\n// MediaObject — root <article>. `interactive` opts into the CSS hover lift.\ntype MediaObjectProps = React.ComponentProps<\"article\"> & {\n  /** Add a CSS hover lift + shadow on hover (pure CSS, no JS state). */\n  interactive?: boolean;\n};\n\n/** Root <article> surface of a media card; consumers compose the parts inside it. */\nfunction MediaObject({ className, interactive, ...props }: MediaObjectProps) {\n  return (\n    <article\n      data-slot=\"media-object\"\n      className={cn(\n        \"group/media flex flex-col overflow-hidden rounded-2xl border bg-card\",\n        interactive && \"transition-all hover:-translate-y-0.5 hover:shadow-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectImage — the top media. `alt` is required for accessibility.\ntype MediaObjectImageProps = React.ComponentProps<\"img\"> & {\n  /** Required alt text describing the media (enforced for accessibility). */\n  alt: string;\n};\n\n/** Top media image of a card; renders a 16/9 cover image that scales on hover. */\nfunction MediaObjectImage({ className, alt, ...props }: MediaObjectImageProps) {\n  return (\n    // biome-ignore lint/a11y/useAltText: alt is required via props typing.\n    <img\n      data-slot=\"media-object-image\"\n      alt={alt}\n      className={cn(\n        \"aspect-[16/9] w-full object-cover transition-transform group-hover/media:scale-[1.02]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectIcon — the icon-top variant container; consumer renders an Icon inside.\n/** Square container for the icon-top card variant; place an Icon inside it. */\nfunction MediaObjectIcon({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"media-object-icon\"\n      className={cn(\"flex size-10 shrink-0 items-center justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectContent — the body region holding title/text/actions.\n/** Padded body region of a card that holds the title, text, and actions. */\nfunction MediaObjectContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"media-object-content\"\n      className={cn(\"flex flex-1 flex-col gap-3 p-5\", className)}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectTitle — reuses the Heading primitive (rendered as <h3>).\ntype MediaObjectTitleProps = Omit<HeadingProps, \"as\"> & {\n  /** Heading size step passthrough (defaults to \"4\"). */\n  size?: HeadingProps[\"size\"];\n};\n\n/** Card title; wraps the Heading primitive rendered as an <h3>. */\nfunction MediaObjectTitle({ size, ...props }: MediaObjectTitleProps) {\n  return <Heading data-slot=\"media-object-title\" as=\"h3\" size={size ?? \"4\"} {...props} />;\n}\n\n// MediaObjectText — reuses the Text primitive (muted, small body).\n/** Supporting body copy; wraps the Text primitive (muted, small). */\nfunction MediaObjectText({ ...props }: React.ComponentProps<typeof Text>) {\n  return <Text data-slot=\"media-object-text\" variant=\"muted\" size=\"small\" {...props} />;\n}\n\n// MediaObjectActions — pinned to the bottom of the content; holds a Button/Link.\n/** Action row pinned to the bottom of the content; holds a Button or Link. */\nfunction MediaObjectActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"media-object-actions\"\n      className={cn(\"mt-auto flex items-center gap-2 pt-2\", className)}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectGroup — responsive grid container. `columns` gives equal-width,\n// aligned items; `gap` lets the enclosing section own its spacing rhythm.\nconst mediaObjectGroupVariants = cva(\"grid\", {\n  variants: {\n    columns: {\n      1: \"grid-cols-1\",\n      2: \"grid-cols-1 sm:grid-cols-2\",\n      3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n      4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n    },\n    gap: {\n      sm: \"gap-4\",\n      md: \"gap-6\",\n      lg: \"gap-8\",\n    },\n  },\n  defaultVariants: {\n    columns: 3,\n    gap: \"lg\",\n  },\n});\n\ntype MediaObjectGroupProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof mediaObjectGroupVariants>;\n\n/** Responsive grid wrapper that lays out a set of MediaObject cards. */\nfunction MediaObjectGroup({ className, columns, gap, ...props }: MediaObjectGroupProps) {\n  return (\n    <div\n      data-slot=\"media-object-group\"\n      className={cn(mediaObjectGroupVariants({ columns, gap }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  MediaObject,\n  MediaObjectImage,\n  MediaObjectIcon,\n  MediaObjectContent,\n  MediaObjectTitle,\n  MediaObjectText,\n  MediaObjectActions,\n  MediaObjectGroup,\n  mediaObjectGroupVariants,\n  type MediaObjectProps,\n  type MediaObjectImageProps,\n  type MediaObjectTitleProps,\n  type MediaObjectGroupProps,\n};\n"],"mappings":";;;;;;;;AAoBA,SAAS,YAAY,EAAE,WAAW,aAAa,GAAG,SAA2B;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,wEACA,eAAe,yDACf,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AASA,SAAS,iBAAiB,EAAE,WAAW,KAAK,GAAG,SAAgC;CAC7E,OAEE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACL;EACL,WAAWA,WAAAA,GACT,yFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAIA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsC;CAChF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;;AASA,SAAS,iBAAiB,EAAE,MAAM,GAAG,SAAgC;CACnE,OAAO,iBAAA,GAAA,kBAAA,KAACC,iCAAAA,SAAD;EAAS,aAAU;EAAqB,IAAG;EAAK,MAAM,QAAQ;EAAK,GAAI;CAAQ,CAAA;AACxF;;AAIA,SAAS,gBAAgB,EAAE,GAAG,SAA4C;CACxE,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,MAAD;EAAM,aAAU;EAAoB,SAAQ;EAAQ,MAAK;EAAQ,GAAI;CAAQ,CAAA;AACtF;;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsC;CAChF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWF,WAAAA,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAIA,MAAM,4BAAA,GAAA,yBAAA,KAA+B,QAAQ;CAC3C,UAAU;EACR,SAAS;GACP,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;EACL;EACA,KAAK;GACH,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,KAAK;CACP;AACF,CAAC;;AAMD,SAAS,iBAAiB,EAAE,WAAW,SAAS,KAAK,GAAG,SAAgC;CACtF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,yBAAyB;GAAE;GAAS;EAAI,CAAC,GAAG,SAAS;EACnE,GAAI;CACL,CAAA;AAEL"}

package/dist/patterns/MediaObject/index.d.cts

@@ -0,0 +1,71 @@
+import { n as HeadingProps } from "../../index28.cjs";
+import { t as Text } from "../../index60.cjs";
+import * as react_jsx_runtime232 from "react/jsx-runtime";
+import * as class_variance_authority_types22 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+//#region src/patterns/MediaObject/MediaObject.d.ts
+type MediaObjectProps = React.ComponentProps<"article"> & {
+  /** Add a CSS hover lift + shadow on hover (pure CSS, no JS state). */
+  interactive?: boolean;
+};
+/** Root <article> surface of a media card; consumers compose the parts inside it. */
+declare function MediaObject({
+  className,
+  interactive,
+  ...props
+}: MediaObjectProps): react_jsx_runtime232.JSX.Element;
+type MediaObjectImageProps = React.ComponentProps<"img"> & {
+  /** Required alt text describing the media (enforced for accessibility). */
+  alt: string;
+};
+/** Top media image of a card; renders a 16/9 cover image that scales on hover. */
+declare function MediaObjectImage({
+  className,
+  alt,
+  ...props
+}: MediaObjectImageProps): react_jsx_runtime232.JSX.Element;
+/** Square container for the icon-top card variant; place an Icon inside it. */
+declare function MediaObjectIcon({
+  className,
+  ...props
+}: React.ComponentProps<"div">): react_jsx_runtime232.JSX.Element;
+/** Padded body region of a card that holds the title, text, and actions. */
+declare function MediaObjectContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">): react_jsx_runtime232.JSX.Element;
+type MediaObjectTitleProps = Omit<HeadingProps, "as"> & {
+  /** Heading size step passthrough (defaults to "4"). */
+  size?: HeadingProps["size"];
+};
+/** Card title; wraps the Heading primitive rendered as an <h3>. */
+declare function MediaObjectTitle({
+  size,
+  ...props
+}: MediaObjectTitleProps): react_jsx_runtime232.JSX.Element;
+/** Supporting body copy; wraps the Text primitive (muted, small). */
+declare function MediaObjectText({
+  ...props
+}: React.ComponentProps<typeof Text>): react_jsx_runtime232.JSX.Element;
+/** Action row pinned to the bottom of the content; holds a Button or Link. */
+declare function MediaObjectActions({
+  className,
+  ...props
+}: React.ComponentProps<"div">): react_jsx_runtime232.JSX.Element;
+declare const mediaObjectGroupVariants: (props?: ({
+  columns?: 1 | 2 | 3 | 4 | null | undefined;
+  gap?: "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types22.ClassProp) | undefined) => string;
+type MediaObjectGroupProps = React.ComponentProps<"div"> & VariantProps<typeof mediaObjectGroupVariants>;
+/** Responsive grid wrapper that lays out a set of MediaObject cards. */
+declare function MediaObjectGroup({
+  className,
+  columns,
+  gap,
+  ...props
+}: MediaObjectGroupProps): react_jsx_runtime232.JSX.Element;
+//#endregion
+export { MediaObject, MediaObjectActions, MediaObjectContent, MediaObjectGroup, type MediaObjectGroupProps, MediaObjectIcon, MediaObjectImage, type MediaObjectImageProps, type MediaObjectProps, MediaObjectText, MediaObjectTitle, type MediaObjectTitleProps, mediaObjectGroupVariants };
+//# sourceMappingURL=index.d.cts.map

package/dist/patterns/MediaObject/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../../src/patterns/MediaObject/MediaObject.tsx"],"mappings":";;;;;;;;KAcK,gBAAA,GAAmB,KAAA,CAAM;;;;AAVW;AAUG,iBAMnC,WAAA,CAAW;EAAA,SAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EAAuC,gBAAvC,CAAA,EAAuD,oBAAA,CAAA,GAAA,CAAA,OAAvD;KAef,qBAAA,GAAwB,KAAA,CAAM,cAff,CAAA,KAAA,CAAA,GAAA;;KAAc,EAAA,MAAA;;;AAAyC,iBAqBlE,gBAAA,CArBkE;EAAA,SAAA;EAAA,GAAA;EAAA,GAAA;AAAA,CAAA,EAqBnB,qBArBmB,CAAA,EAqBE,oBAAA,CAAA,GAAA,CAAA,OArBF;AAAA;AAe1B,iBAuBxC,eAAA,CAjBgB;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAiByB,KAAA,CAAM,cAjB/B,CAAA,KAAA,CAAA,CAAA,EAiBoD,oBAAA,CAAA,GAAA,CAAA,OAjBpD;;iBA6BhB,kBAAA,CA7BmB;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA6ByB,KAAA,CAAM,cA7B/B,CAAA,KAAA,CAAA,CAAA,EA6BoD,oBAAA,CAAA,GAAA,CAAA,OA7BpD;KAwCvB,qBAAA,GAAwB,IAxCU,CAwCL,YAxCK,EAAA,IAAA,CAAA,GAAA;;MAAsC,CAAA,EA0CpE,YA1CoE,CAAA,MAAA,CAAA;AAAA,CAAA;AAAA;iBA8CpE,gBAAA,CA7Be;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EA6BsB,qBA7BtB,CAAA,EA6B2C,oBAAA,CAAA,GAAA,CAAA,OA7B3C;;iBAmCf,eAAA,CAnC+C;EAAA,GAAA;AAAA,CAAA,EAmCjB,KAAA,CAAM,cAnCW,CAAA,OAmCW,IAnCX,CAAA,CAAA,EAmCgB,oBAAA,CAAA,GAAA,CAAA,OAnChB;;AAAqB,iBAyCpE,kBAAA,CAzCoE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAyCxB,KAAA,CAAM,cAzCkB,CAAA,KAAA,CAAA,CAAA,EAyCG,oBAAA,CAAA,GAAA,CAAA,OAzCH;AAAA,cAqDvE,wBAzCqB,EAAA,CAAA,KAAgC,CAAhC,EAAA,CAAA;EAAA,OAAA,CAAA,EAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,IAAA,GAAA,SAAA;KAAG,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,SAAA;IA2D5B,gCAAA,CAAA,SA3DyD,CAAA,GAAA,SAAA,EAAA,GAAA,MAAA;KA6DtD,qBAAA,GAAwB,KAAA,CAAM,cA7D6C,CAAA,KAAA,CAAA,GA8D9E,YA9D8E,CAAA,OA8D1D,wBA9D0D,CAAA;AAAA;AAAA,iBAiEvE,gBAAA,CAtDiB;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;EAAA,GAAA;AAAA,CAAA,EAsDuC,qBAtDvC,CAAA,EAsD4D,oBAAA,CAAA,GAAA,CAAA,OAtD5D"}

package/dist/patterns/MediaObject/index.d.ts

@@ -0,0 +1,71 @@
+import { n as HeadingProps } from "../../index28.js";
+import { t as Text } from "../../index60.js";
+import * as React from "react";
+import * as react_jsx_runtime135 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types14 from "class-variance-authority/types";
+
+//#region src/patterns/MediaObject/MediaObject.d.ts
+type MediaObjectProps = React.ComponentProps<"article"> & {
+  /** Add a CSS hover lift + shadow on hover (pure CSS, no JS state). */
+  interactive?: boolean;
+};
+/** Root <article> surface of a media card; consumers compose the parts inside it. */
+declare function MediaObject({
+  className,
+  interactive,
+  ...props
+}: MediaObjectProps): react_jsx_runtime135.JSX.Element;
+type MediaObjectImageProps = React.ComponentProps<"img"> & {
+  /** Required alt text describing the media (enforced for accessibility). */
+  alt: string;
+};
+/** Top media image of a card; renders a 16/9 cover image that scales on hover. */
+declare function MediaObjectImage({
+  className,
+  alt,
+  ...props
+}: MediaObjectImageProps): react_jsx_runtime135.JSX.Element;
+/** Square container for the icon-top card variant; place an Icon inside it. */
+declare function MediaObjectIcon({
+  className,
+  ...props
+}: React.ComponentProps<"div">): react_jsx_runtime135.JSX.Element;
+/** Padded body region of a card that holds the title, text, and actions. */
+declare function MediaObjectContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">): react_jsx_runtime135.JSX.Element;
+type MediaObjectTitleProps = Omit<HeadingProps, "as"> & {
+  /** Heading size step passthrough (defaults to "4"). */
+  size?: HeadingProps["size"];
+};
+/** Card title; wraps the Heading primitive rendered as an <h3>. */
+declare function MediaObjectTitle({
+  size,
+  ...props
+}: MediaObjectTitleProps): react_jsx_runtime135.JSX.Element;
+/** Supporting body copy; wraps the Text primitive (muted, small). */
+declare function MediaObjectText({
+  ...props
+}: React.ComponentProps<typeof Text>): react_jsx_runtime135.JSX.Element;
+/** Action row pinned to the bottom of the content; holds a Button or Link. */
+declare function MediaObjectActions({
+  className,
+  ...props
+}: React.ComponentProps<"div">): react_jsx_runtime135.JSX.Element;
+declare const mediaObjectGroupVariants: (props?: ({
+  columns?: 1 | 2 | 3 | 4 | null | undefined;
+  gap?: "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types14.ClassProp) | undefined) => string;
+type MediaObjectGroupProps = React.ComponentProps<"div"> & VariantProps<typeof mediaObjectGroupVariants>;
+/** Responsive grid wrapper that lays out a set of MediaObject cards. */
+declare function MediaObjectGroup({
+  className,
+  columns,
+  gap,
+  ...props
+}: MediaObjectGroupProps): react_jsx_runtime135.JSX.Element;
+//#endregion
+export { MediaObject, MediaObjectActions, MediaObjectContent, MediaObjectGroup, type MediaObjectGroupProps, MediaObjectIcon, MediaObjectImage, type MediaObjectImageProps, type MediaObjectProps, MediaObjectText, MediaObjectTitle, type MediaObjectTitleProps, mediaObjectGroupVariants };
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/MediaObject/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/patterns/MediaObject/MediaObject.tsx"],"mappings":";;;;;;;;KAcK,gBAAA,GAAmB,KAAA,CAAM;;;;AAVW;AAUG,iBAMnC,WAAA,CAAW;EAAA,SAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EAAuC,gBAAvC,CAAA,EAAuD,oBAAA,CAAA,GAAA,CAAA,OAAvD;KAef,qBAAA,GAAwB,KAAA,CAAM,cAff,CAAA,KAAA,CAAA,GAAA;;KAAc,EAAA,MAAA;;;AAAyC,iBAqBlE,gBAAA,CArBkE;EAAA,SAAA;EAAA,GAAA;EAAA,GAAA;AAAA,CAAA,EAqBnB,qBArBmB,CAAA,EAqBE,oBAAA,CAAA,GAAA,CAAA,OArBF;AAAA;AAe1B,iBAuBxC,eAAA,CAjBgB;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAiByB,KAAA,CAAM,cAjB/B,CAAA,KAAA,CAAA,CAAA,EAiBoD,oBAAA,CAAA,GAAA,CAAA,OAjBpD;;iBA6BhB,kBAAA,CA7BmB;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA6ByB,KAAA,CAAM,cA7B/B,CAAA,KAAA,CAAA,CAAA,EA6BoD,oBAAA,CAAA,GAAA,CAAA,OA7BpD;KAwCvB,qBAAA,GAAwB,IAxCU,CAwCL,YAxCK,EAAA,IAAA,CAAA,GAAA;;MAAsC,CAAA,EA0CpE,YA1CoE,CAAA,MAAA,CAAA;AAAA,CAAA;AAAA;iBA8CpE,gBAAA,CA7Be;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EA6BsB,qBA7BtB,CAAA,EA6B2C,oBAAA,CAAA,GAAA,CAAA,OA7B3C;;iBAmCf,eAAA,CAnC+C;EAAA,GAAA;AAAA,CAAA,EAmCjB,KAAA,CAAM,cAnCW,CAAA,OAmCW,IAnCX,CAAA,CAAA,EAmCgB,oBAAA,CAAA,GAAA,CAAA,OAnChB;;AAAqB,iBAyCpE,kBAAA,CAzCoE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAyCxB,KAAA,CAAM,cAzCkB,CAAA,KAAA,CAAA,CAAA,EAyCG,oBAAA,CAAA,GAAA,CAAA,OAzCH;AAAA,cAqDvE,wBAzCqB,EAAA,CAAA,KAAgC,CAAhC,EAAA,CAAA;EAAA,OAAA,CAAA,EAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,IAAA,GAAA,SAAA;KAAG,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,SAAA;IA2D5B,gCAAA,CAAA,SA3DyD,CAAA,GAAA,SAAA,EAAA,GAAA,MAAA;KA6DtD,qBAAA,GAAwB,KAAA,CAAM,cA7D6C,CAAA,KAAA,CAAA,GA8D9E,YA9D8E,CAAA,OA8D1D,wBA9D0D,CAAA;AAAA;AAAA,iBAiEvE,gBAAA,CAtDiB;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;EAAA,GAAA;AAAA,CAAA,EAsDuC,qBAtDvC,CAAA,EAsD4D,oBAAA,CAAA,GAAA,CAAA,OAtD5D"}

package/dist/patterns/MediaObject/index.js

@@ -0,0 +1,99 @@
+import { t as cn } from "../../cn.js";
+import { Heading } from "../../primitives/Heading/index.js";
+import { Text } from "../../primitives/Text/index.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/patterns/MediaObject/MediaObject.tsx
+/** Root <article> surface of a media card; consumers compose the parts inside it. */
+function MediaObject({ className, interactive, ...props }) {
+	return /* @__PURE__ */ jsx("article", {
+		"data-slot": "media-object",
+		className: cn("group/media flex flex-col overflow-hidden rounded-2xl border bg-card", interactive && "transition-all hover:-translate-y-0.5 hover:shadow-md", className),
+		...props
+	});
+}
+/** Top media image of a card; renders a 16/9 cover image that scales on hover. */
+function MediaObjectImage({ className, alt, ...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		"data-slot": "media-object-image",
+		alt,
+		className: cn("aspect-[16/9] w-full object-cover transition-transform group-hover/media:scale-[1.02]", className),
+		...props
+	});
+}
+/** Square container for the icon-top card variant; place an Icon inside it. */
+function MediaObjectIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-object-icon",
+		className: cn("flex size-10 shrink-0 items-center justify-center", className),
+		...props
+	});
+}
+/** Padded body region of a card that holds the title, text, and actions. */
+function MediaObjectContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-object-content",
+		className: cn("flex flex-1 flex-col gap-3 p-5", className),
+		...props
+	});
+}
+/** Card title; wraps the Heading primitive rendered as an <h3>. */
+function MediaObjectTitle({ size, ...props }) {
+	return /* @__PURE__ */ jsx(Heading, {
+		"data-slot": "media-object-title",
+		as: "h3",
+		size: size ?? "4",
+		...props
+	});
+}
+/** Supporting body copy; wraps the Text primitive (muted, small). */
+function MediaObjectText({ ...props }) {
+	return /* @__PURE__ */ jsx(Text, {
+		"data-slot": "media-object-text",
+		variant: "muted",
+		size: "small",
+		...props
+	});
+}
+/** Action row pinned to the bottom of the content; holds a Button or Link. */
+function MediaObjectActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-object-actions",
+		className: cn("mt-auto flex items-center gap-2 pt-2", className),
+		...props
+	});
+}
+const mediaObjectGroupVariants = cva("grid", {
+	variants: {
+		columns: {
+			1: "grid-cols-1",
+			2: "grid-cols-1 sm:grid-cols-2",
+			3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+			4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+		},
+		gap: {
+			sm: "gap-4",
+			md: "gap-6",
+			lg: "gap-8"
+		}
+	},
+	defaultVariants: {
+		columns: 3,
+		gap: "lg"
+	}
+});
+/** Responsive grid wrapper that lays out a set of MediaObject cards. */
+function MediaObjectGroup({ className, columns, gap, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-object-group",
+		className: cn(mediaObjectGroupVariants({
+			columns,
+			gap
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { MediaObject, MediaObjectActions, MediaObjectContent, MediaObjectGroup, MediaObjectIcon, MediaObjectImage, MediaObjectText, MediaObjectTitle, mediaObjectGroupVariants };
+
+//# sourceMappingURL=index.js.map

package/dist/patterns/MediaObject/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/patterns/MediaObject/MediaObject.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { Heading, type HeadingProps } from \"@/primitives/Heading\";\nimport { Text } from \"@/primitives/Text\";\nimport { cn } from \"@/utils\";\n\n// MediaObject — a COMPOSITIONAL media card (Radix-style parts the consumer\n// assembles). Replaces the legacy landing \"media cards\" (image + title + text +\n// action) and slingshot \"feature cards\" (icon + title + description + action).\n// Each part is a thin styled wrapper carrying a data-slot; spacing and hover are\n// driven entirely by Tailwind tokens + CSS group-hover (no JS state).\n\n// MediaObject — root <article>. `interactive` opts into the CSS hover lift.\ntype MediaObjectProps = React.ComponentProps<\"article\"> & {\n  /** Add a CSS hover lift + shadow on hover (pure CSS, no JS state). */\n  interactive?: boolean;\n};\n\n/** Root <article> surface of a media card; consumers compose the parts inside it. */\nfunction MediaObject({ className, interactive, ...props }: MediaObjectProps) {\n  return (\n    <article\n      data-slot=\"media-object\"\n      className={cn(\n        \"group/media flex flex-col overflow-hidden rounded-2xl border bg-card\",\n        interactive && \"transition-all hover:-translate-y-0.5 hover:shadow-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectImage — the top media. `alt` is required for accessibility.\ntype MediaObjectImageProps = React.ComponentProps<\"img\"> & {\n  /** Required alt text describing the media (enforced for accessibility). */\n  alt: string;\n};\n\n/** Top media image of a card; renders a 16/9 cover image that scales on hover. */\nfunction MediaObjectImage({ className, alt, ...props }: MediaObjectImageProps) {\n  return (\n    // biome-ignore lint/a11y/useAltText: alt is required via props typing.\n    <img\n      data-slot=\"media-object-image\"\n      alt={alt}\n      className={cn(\n        \"aspect-[16/9] w-full object-cover transition-transform group-hover/media:scale-[1.02]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectIcon — the icon-top variant container; consumer renders an Icon inside.\n/** Square container for the icon-top card variant; place an Icon inside it. */\nfunction MediaObjectIcon({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"media-object-icon\"\n      className={cn(\"flex size-10 shrink-0 items-center justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectContent — the body region holding title/text/actions.\n/** Padded body region of a card that holds the title, text, and actions. */\nfunction MediaObjectContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"media-object-content\"\n      className={cn(\"flex flex-1 flex-col gap-3 p-5\", className)}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectTitle — reuses the Heading primitive (rendered as <h3>).\ntype MediaObjectTitleProps = Omit<HeadingProps, \"as\"> & {\n  /** Heading size step passthrough (defaults to \"4\"). */\n  size?: HeadingProps[\"size\"];\n};\n\n/** Card title; wraps the Heading primitive rendered as an <h3>. */\nfunction MediaObjectTitle({ size, ...props }: MediaObjectTitleProps) {\n  return <Heading data-slot=\"media-object-title\" as=\"h3\" size={size ?? \"4\"} {...props} />;\n}\n\n// MediaObjectText — reuses the Text primitive (muted, small body).\n/** Supporting body copy; wraps the Text primitive (muted, small). */\nfunction MediaObjectText({ ...props }: React.ComponentProps<typeof Text>) {\n  return <Text data-slot=\"media-object-text\" variant=\"muted\" size=\"small\" {...props} />;\n}\n\n// MediaObjectActions — pinned to the bottom of the content; holds a Button/Link.\n/** Action row pinned to the bottom of the content; holds a Button or Link. */\nfunction MediaObjectActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"media-object-actions\"\n      className={cn(\"mt-auto flex items-center gap-2 pt-2\", className)}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectGroup — responsive grid container. `columns` gives equal-width,\n// aligned items; `gap` lets the enclosing section own its spacing rhythm.\nconst mediaObjectGroupVariants = cva(\"grid\", {\n  variants: {\n    columns: {\n      1: \"grid-cols-1\",\n      2: \"grid-cols-1 sm:grid-cols-2\",\n      3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n      4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n    },\n    gap: {\n      sm: \"gap-4\",\n      md: \"gap-6\",\n      lg: \"gap-8\",\n    },\n  },\n  defaultVariants: {\n    columns: 3,\n    gap: \"lg\",\n  },\n});\n\ntype MediaObjectGroupProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof mediaObjectGroupVariants>;\n\n/** Responsive grid wrapper that lays out a set of MediaObject cards. */\nfunction MediaObjectGroup({ className, columns, gap, ...props }: MediaObjectGroupProps) {\n  return (\n    <div\n      data-slot=\"media-object-group\"\n      className={cn(mediaObjectGroupVariants({ columns, gap }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  MediaObject,\n  MediaObjectImage,\n  MediaObjectIcon,\n  MediaObjectContent,\n  MediaObjectTitle,\n  MediaObjectText,\n  MediaObjectActions,\n  MediaObjectGroup,\n  mediaObjectGroupVariants,\n  type MediaObjectProps,\n  type MediaObjectImageProps,\n  type MediaObjectTitleProps,\n  type MediaObjectGroupProps,\n};\n"],"mappings":";;;;;;;AAoBA,SAAS,YAAY,EAAE,WAAW,aAAa,GAAG,SAA2B;CAC3E,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,wEACA,eAAe,yDACf,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AASA,SAAS,iBAAiB,EAAE,WAAW,KAAK,GAAG,SAAgC;CAC7E,OAEE,oBAAC,OAAD;EACE,aAAU;EACL;EACL,WAAW,GACT,yFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAIA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsC;CAChF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;;AASA,SAAS,iBAAiB,EAAE,MAAM,GAAG,SAAgC;CACnE,OAAO,oBAAC,SAAD;EAAS,aAAU;EAAqB,IAAG;EAAK,MAAM,QAAQ;EAAK,GAAI;CAAQ,CAAA;AACxF;;AAIA,SAAS,gBAAgB,EAAE,GAAG,SAA4C;CACxE,OAAO,oBAAC,MAAD;EAAM,aAAU;EAAoB,SAAQ;EAAQ,MAAK;EAAQ,GAAI;CAAQ,CAAA;AACtF;;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsC;CAChF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAIA,MAAM,2BAA2B,IAAI,QAAQ;CAC3C,UAAU;EACR,SAAS;GACP,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;EACL;EACA,KAAK;GACH,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,KAAK;CACP;AACF,CAAC;;AAMD,SAAS,iBAAiB,EAAE,WAAW,SAAS,KAAK,GAAG,SAAgC;CACtF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yBAAyB;GAAE;GAAS;EAAI,CAAC,GAAG,SAAS;EACnE,GAAI;CACL,CAAA;AAEL"}

package/dist/patterns/SectionCard/index.cjs

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+const require_primitives_Card_index = require("../../primitives/Card/index.cjs");
+const require_primitives_Heading_index = require("../../primitives/Heading/index.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/patterns/SectionCard/SectionCard.tsx
+/** Glass section panel with a header (title + optional action) and a body slot for arbitrary children. */
+function SectionCard({ title, action, className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Card_index.Card, {
+		"data-slot": "section-card",
+		variant: "glass",
+		tint: "light",
+		className: require_cn.cn("gap-5 rounded-2xl p-5 sm:p-6", className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-slot": "section-card-header",
+			className: "flex items-center justify-between gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Heading_index.Heading, {
+				"data-slot": "section-card-title",
+				size: "3",
+				children: title
+			}), action ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-slot": "section-card-action",
+				children: action
+			}) : null]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-slot": "section-card-body",
+			children
+		})]
+	});
+}
+//#endregion
+exports.SectionCard = SectionCard;
+
+//# sourceMappingURL=index.cjs.map

package/dist/patterns/SectionCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Card","cn","Heading"],"sources":["../../../src/patterns/SectionCard/SectionCard.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { Card } from \"@/primitives/Card\";\nimport { Heading } from \"@/primitives/Heading\";\nimport { cn } from \"@/utils\";\n\n// SectionCard — a large glass \"section that contains cards\": a glass Card panel\n// with a header row (title + optional right-aligned action) and a body slot for\n// arbitrary children (e.g. a grid of cards or a MediaObjectGroup).\ntype SectionCardProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** Section title rendered in the header. */\n  title: React.ReactNode;\n  /** Optional right-aligned action slot (e.g. a Button). */\n  action?: React.ReactNode;\n};\n\n/** Glass section panel with a header (title + optional action) and a body slot for arbitrary children. */\nfunction SectionCard({ title, action, className, children, ...props }: SectionCardProps) {\n  return (\n    <Card\n      data-slot=\"section-card\"\n      variant=\"glass\"\n      tint=\"light\"\n      className={cn(\"gap-5 rounded-2xl p-5 sm:p-6\", className)}\n      {...props}\n    >\n      <div data-slot=\"section-card-header\" className=\"flex items-center justify-between gap-3\">\n        <Heading data-slot=\"section-card-title\" size=\"3\">\n          {title}\n        </Heading>\n        {action ? <div data-slot=\"section-card-action\">{action}</div> : null}\n      </div>\n      <div data-slot=\"section-card-body\">{children}</div>\n    </Card>\n  );\n}\n\nexport { SectionCard, type SectionCardProps };\n"],"mappings":";;;;;;;AAiBA,SAAS,YAAY,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAA2B;CACvF,OACE,iBAAA,GAAA,kBAAA,MAACA,8BAAAA,MAAD;EACE,aAAU;EACV,SAAQ;EACR,MAAK;EACL,WAAWC,WAAAA,GAAG,gCAAgC,SAAS;EACvD,GAAI;YALN,CAOE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,aAAU;GAAsB,WAAU;aAA/C,CACE,iBAAA,GAAA,kBAAA,KAACC,iCAAAA,SAAD;IAAS,aAAU;IAAqB,MAAK;cAC1C;GACM,CAAA,GACR,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,aAAU;cAAuB;GAAY,CAAA,IAAI,IAC7D;MACL,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,aAAU;GAAqB;EAAc,CAAA,CAC9C;;AAEV"}

package/dist/patterns/SectionCard/index.d.cts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime215 from "react/jsx-runtime";
+import * as React from "react";
+
+//#region src/patterns/SectionCard/SectionCard.d.ts
+type SectionCardProps = Omit<React.ComponentProps<"div">, "title"> & {
+  /** Section title rendered in the header. */
+  title: React.ReactNode;
+  /** Optional right-aligned action slot (e.g. a Button). */
+  action?: React.ReactNode;
+};
+/** Glass section panel with a header (title + optional action) and a body slot for arbitrary children. */
+declare function SectionCard({
+  title,
+  action,
+  className,
+  children,
+  ...props
+}: SectionCardProps): react_jsx_runtime215.JSX.Element;
+//#endregion
+export { SectionCard, type SectionCardProps };
+//# sourceMappingURL=index.d.cts.map

package/dist/patterns/SectionCard/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../../src/patterns/SectionCard/SectionCard.tsx"],"mappings":";;;;KASK,gBAAA,GAAmB,KAAK,KAAA,CAAM;;SAE1B,KAAA,CAAM;EAFV;EAAgB,MAAA,CAAA,EAIV,KAAA,CAAM,SAJI;;;iBAQZ,WAAA,CANM;EAAA,KAAA;EAAA,MAAA;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAMwD,gBANxD,CAAA,EAMwE,oBAAA,CAAA,GAAA,CAAA,OANxE"}

package/dist/patterns/SectionCard/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as react_jsx_runtime115 from "react/jsx-runtime";
+
+//#region src/patterns/SectionCard/SectionCard.d.ts
+type SectionCardProps = Omit<React.ComponentProps<"div">, "title"> & {
+  /** Section title rendered in the header. */
+  title: React.ReactNode;
+  /** Optional right-aligned action slot (e.g. a Button). */
+  action?: React.ReactNode;
+};
+/** Glass section panel with a header (title + optional action) and a body slot for arbitrary children. */
+declare function SectionCard({
+  title,
+  action,
+  className,
+  children,
+  ...props
+}: SectionCardProps): react_jsx_runtime115.JSX.Element;
+//#endregion
+export { SectionCard, type SectionCardProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/SectionCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/patterns/SectionCard/SectionCard.tsx"],"mappings":";;;;KASK,gBAAA,GAAmB,KAAK,KAAA,CAAM;;SAE1B,KAAA,CAAM;EAFV;EAAgB,MAAA,CAAA,EAIV,KAAA,CAAM,SAJI;;;iBAQZ,WAAA,CANM;EAAA,KAAA;EAAA,MAAA;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAMwD,gBANxD,CAAA,EAMwE,oBAAA,CAAA,GAAA,CAAA,OANxE"}

package/dist/patterns/SectionCard/index.js

@@ -0,0 +1,34 @@
+import { t as cn } from "../../cn.js";
+import { Card } from "../../primitives/Card/index.js";
+import { Heading } from "../../primitives/Heading/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/patterns/SectionCard/SectionCard.tsx
+/** Glass section panel with a header (title + optional action) and a body slot for arbitrary children. */
+function SectionCard({ title, action, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		"data-slot": "section-card",
+		variant: "glass",
+		tint: "light",
+		className: cn("gap-5 rounded-2xl p-5 sm:p-6", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "section-card-header",
+			className: "flex items-center justify-between gap-3",
+			children: [/* @__PURE__ */ jsx(Heading, {
+				"data-slot": "section-card-title",
+				size: "3",
+				children: title
+			}), action ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "section-card-action",
+				children: action
+			}) : null]
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "section-card-body",
+			children
+		})]
+	});
+}
+//#endregion
+export { SectionCard };
+
+//# sourceMappingURL=index.js.map

package/dist/patterns/SectionCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/patterns/SectionCard/SectionCard.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { Card } from \"@/primitives/Card\";\nimport { Heading } from \"@/primitives/Heading\";\nimport { cn } from \"@/utils\";\n\n// SectionCard — a large glass \"section that contains cards\": a glass Card panel\n// with a header row (title + optional right-aligned action) and a body slot for\n// arbitrary children (e.g. a grid of cards or a MediaObjectGroup).\ntype SectionCardProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** Section title rendered in the header. */\n  title: React.ReactNode;\n  /** Optional right-aligned action slot (e.g. a Button). */\n  action?: React.ReactNode;\n};\n\n/** Glass section panel with a header (title + optional action) and a body slot for arbitrary children. */\nfunction SectionCard({ title, action, className, children, ...props }: SectionCardProps) {\n  return (\n    <Card\n      data-slot=\"section-card\"\n      variant=\"glass\"\n      tint=\"light\"\n      className={cn(\"gap-5 rounded-2xl p-5 sm:p-6\", className)}\n      {...props}\n    >\n      <div data-slot=\"section-card-header\" className=\"flex items-center justify-between gap-3\">\n        <Heading data-slot=\"section-card-title\" size=\"3\">\n          {title}\n        </Heading>\n        {action ? <div data-slot=\"section-card-action\">{action}</div> : null}\n      </div>\n      <div data-slot=\"section-card-body\">{children}</div>\n    </Card>\n  );\n}\n\nexport { SectionCard, type SectionCardProps };\n"],"mappings":";;;;;;AAiBA,SAAS,YAAY,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAA2B;CACvF,OACE,qBAAC,MAAD;EACE,aAAU;EACV,SAAQ;EACR,MAAK;EACL,WAAW,GAAG,gCAAgC,SAAS;EACvD,GAAI;YALN,CAOE,qBAAC,OAAD;GAAK,aAAU;GAAsB,WAAU;aAA/C,CACE,oBAAC,SAAD;IAAS,aAAU;IAAqB,MAAK;cAC1C;GACM,CAAA,GACR,SAAS,oBAAC,OAAD;IAAK,aAAU;cAAuB;GAAY,CAAA,IAAI,IAC7D;MACL,oBAAC,OAAD;GAAK,aAAU;GAAqB;EAAc,CAAA,CAC9C;;AAEV"}

package/dist/patterns/SectionHeading/index.cjs

@@ -0,0 +1,44 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+const require_primitives_Heading_index = require("../../primitives/Heading/index.cjs");
+const require_primitives_Text_index = require("../../primitives/Text/index.cjs");
+const require_layouts_Stack_index = require("../../layouts/Stack/index.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/patterns/SectionHeading/SectionHeading.tsx
+/** A hero/section title block with an optional eyebrow, heading, and subtitle. */
+function SectionHeading({ title, subtitle, eyebrow, align = "center", gradient = false, titleSize = "1", titleAs = "h2", className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_layouts_Stack_index.Stack, {
+		"data-slot": "section-heading",
+		gap: "sm",
+		align: align === "center" ? "center" : "start",
+		className: require_cn.cn(align === "center" && "text-center", className),
+		...props,
+		children: [
+			eyebrow ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Text_index.Text, {
+				"data-slot": "section-heading-eyebrow",
+				size: "caption",
+				variant: "muted",
+				children: eyebrow
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Heading_index.Heading, {
+				"data-slot": "section-heading-title",
+				as: titleAs,
+				size: titleSize,
+				gradient,
+				align,
+				children: title
+			}),
+			subtitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Text_index.Text, {
+				"data-slot": "section-heading-subtitle",
+				size: "large",
+				variant: "muted",
+				align,
+				children: subtitle
+			}) : null
+		]
+	});
+}
+//#endregion
+exports.SectionHeading = SectionHeading;
+
+//# sourceMappingURL=index.cjs.map

package/dist/patterns/SectionHeading/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Stack","cn","Text","Heading"],"sources":["../../../src/patterns/SectionHeading/SectionHeading.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { Stack } from \"@/layouts/Stack\";\nimport { Heading, type HeadingProps } from \"@/primitives/Heading\";\nimport { Text } from \"@/primitives/Text\";\nimport { cn } from \"@/utils\";\n\n// SectionHeading — a hero/section title block composed from the foundation\n// primitives: an optional eyebrow (caption Text), a Heading, and an optional\n// subtitle (large muted Text). Centered by default. Covers the landing hero,\n// the gradient login heading, and (via composition) stacked-heading layouts.\n/** Props for the {@link SectionHeading} pattern. */\ntype SectionHeadingProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The main heading content. */\n  title: React.ReactNode;\n  /** Optional supporting copy rendered below the heading. */\n  subtitle?: React.ReactNode;\n  /** Optional small label rendered above the heading. */\n  eyebrow?: React.ReactNode;\n  /** Horizontal alignment of the block. Defaults to `center`. */\n  align?: \"center\" | \"left\";\n  /** Render the title with the brand gradient fill. */\n  gradient?: boolean;\n  /** Visual size of the title (Heading scale). Defaults to `1`. */\n  titleSize?: HeadingProps[\"size\"];\n  /** Semantic element for the title. Defaults to `h2`. */\n  titleAs?: React.ElementType;\n};\n\n/** A hero/section title block with an optional eyebrow, heading, and subtitle. */\nfunction SectionHeading({\n  title,\n  subtitle,\n  eyebrow,\n  align = \"center\",\n  gradient = false,\n  titleSize = \"1\",\n  titleAs = \"h2\",\n  className,\n  ...props\n}: SectionHeadingProps) {\n  return (\n    <Stack\n      data-slot=\"section-heading\"\n      gap=\"sm\"\n      align={align === \"center\" ? \"center\" : \"start\"}\n      className={cn(align === \"center\" && \"text-center\", className)}\n      {...props}\n    >\n      {eyebrow ? (\n        <Text data-slot=\"section-heading-eyebrow\" size=\"caption\" variant=\"muted\">\n          {eyebrow}\n        </Text>\n      ) : null}\n      <Heading\n        data-slot=\"section-heading-title\"\n        as={titleAs}\n        size={titleSize}\n        gradient={gradient}\n        align={align}\n      >\n        {title}\n      </Heading>\n      {subtitle ? (\n        <Text data-slot=\"section-heading-subtitle\" size=\"large\" variant=\"muted\" align={align}>\n          {subtitle}\n        </Text>\n      ) : null}\n    </Stack>\n  );\n}\n\nexport { SectionHeading, type SectionHeadingProps };\n"],"mappings":";;;;;;;;AA8BA,SAAS,eAAe,EACtB,OACA,UACA,SACA,QAAQ,UACR,WAAW,OACX,YAAY,KACZ,UAAU,MACV,WACA,GAAG,SACmB;CACtB,OACE,iBAAA,GAAA,kBAAA,MAACA,4BAAAA,OAAD;EACE,aAAU;EACV,KAAI;EACJ,OAAO,UAAU,WAAW,WAAW;EACvC,WAAWC,WAAAA,GAAG,UAAU,YAAY,eAAe,SAAS;EAC5D,GAAI;YALN;GAOG,UACC,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,MAAD;IAAM,aAAU;IAA0B,MAAK;IAAU,SAAQ;cAC9D;GACG,CAAA,IACJ;GACJ,iBAAA,GAAA,kBAAA,KAACC,iCAAAA,SAAD;IACE,aAAU;IACV,IAAI;IACJ,MAAM;IACI;IACH;cAEN;GACM,CAAA;GACR,WACC,iBAAA,GAAA,kBAAA,KAACD,8BAAAA,MAAD;IAAM,aAAU;IAA2B,MAAK;IAAQ,SAAQ;IAAe;cAC5E;GACG,CAAA,IACJ;EACC;;AAEX"}

package/dist/patterns/SectionHeading/index.d.cts

@@ -0,0 +1,37 @@
+import { n as HeadingProps } from "../../index28.cjs";
+import * as react_jsx_runtime202 from "react/jsx-runtime";
+import * as React from "react";
+
+//#region src/patterns/SectionHeading/SectionHeading.d.ts
+/** Props for the {@link SectionHeading} pattern. */
+type SectionHeadingProps = Omit<React.ComponentProps<"div">, "title"> & {
+  /** The main heading content. */
+  title: React.ReactNode;
+  /** Optional supporting copy rendered below the heading. */
+  subtitle?: React.ReactNode;
+  /** Optional small label rendered above the heading. */
+  eyebrow?: React.ReactNode;
+  /** Horizontal alignment of the block. Defaults to `center`. */
+  align?: "center" | "left";
+  /** Render the title with the brand gradient fill. */
+  gradient?: boolean;
+  /** Visual size of the title (Heading scale). Defaults to `1`. */
+  titleSize?: HeadingProps["size"];
+  /** Semantic element for the title. Defaults to `h2`. */
+  titleAs?: React.ElementType;
+};
+/** A hero/section title block with an optional eyebrow, heading, and subtitle. */
+declare function SectionHeading({
+  title,
+  subtitle,
+  eyebrow,
+  align,
+  gradient,
+  titleSize,
+  titleAs,
+  className,
+  ...props
+}: SectionHeadingProps): react_jsx_runtime202.JSX.Element;
+//#endregion
+export { SectionHeading, type SectionHeadingProps };
+//# sourceMappingURL=index.d.cts.map

package/dist/patterns/SectionHeading/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../../src/patterns/SectionHeading/SectionHeading.tsx"],"mappings":";;;;;;KAYK,mBAAA,GAAsB,KAAK,KAAA,CAAM;;EAAjC,KAAA,EAEI,KAAA,CAAM,SAFS;EAAA;UAAQ,CAAM,EAIzB,KAAA,CAAM,SAJmB;;SAE7B,CAAA,EAIG,KAAA,CAAM,SAJH;;OAIH,CAAA,EAAA,QAAM,GAAA,MAAA;;UAQN,CAAM,EAAA,OAAA;EAAW;EAIpB,SAAA,CAAA,EANK,YAMS,CAAA,MAAA,CAAA;EAAA;SACrB,CAAA,EALU,KAAA,CAAM,WAKhB;;;iBADO,cAAA,CAIP;EAAA,KAAA;EAAA,QAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,OAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAMC,mBAND,CAAA,EAMoB,oBAAA,CAAA,GAAA,CAAA,OANpB"}