@psnext/design-system 1.0.0 → 1.2.0

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

@@ -0,0 +1,37 @@
+import { n as HeadingProps } from "../../index28.js";
+import * as React from "react";
+import * as react_jsx_runtime121 from "react/jsx-runtime";
+
+//#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_runtime121.JSX.Element;
+//#endregion
+export { SectionHeading, type SectionHeadingProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","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"}

package/dist/patterns/SectionHeading/index.js

@@ -0,0 +1,43 @@
+import { t as cn } from "../../cn.js";
+import { Heading } from "../../primitives/Heading/index.js";
+import { Text } from "../../primitives/Text/index.js";
+import { Stack } from "../../layouts/Stack/index.js";
+import { jsx, jsxs } from "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__ */ jsxs(Stack, {
+		"data-slot": "section-heading",
+		gap: "sm",
+		align: align === "center" ? "center" : "start",
+		className: cn(align === "center" && "text-center", className),
+		...props,
+		children: [
+			eyebrow ? /* @__PURE__ */ jsx(Text, {
+				"data-slot": "section-heading-eyebrow",
+				size: "caption",
+				variant: "muted",
+				children: eyebrow
+			}) : null,
+			/* @__PURE__ */ jsx(Heading, {
+				"data-slot": "section-heading-title",
+				as: titleAs,
+				size: titleSize,
+				gradient,
+				align,
+				children: title
+			}),
+			subtitle ? /* @__PURE__ */ jsx(Text, {
+				"data-slot": "section-heading-subtitle",
+				size: "large",
+				variant: "muted",
+				align,
+				children: subtitle
+			}) : null
+		]
+	});
+}
+//#endregion
+export { SectionHeading };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"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,qBAAC,OAAD;EACE,aAAU;EACV,KAAI;EACJ,OAAO,UAAU,WAAW,WAAW;EACvC,WAAW,GAAG,UAAU,YAAY,eAAe,SAAS;EAC5D,GAAI;YALN;GAOG,UACC,oBAAC,MAAD;IAAM,aAAU;IAA0B,MAAK;IAAU,SAAQ;cAC9D;GACG,CAAA,IACJ;GACJ,oBAAC,SAAD;IACE,aAAU;IACV,IAAI;IACJ,MAAM;IACI;IACH;cAEN;GACM,CAAA;GACR,WACC,oBAAC,MAAD;IAAM,aAAU;IAA2B,MAAK;IAAQ,SAAQ;IAAe;cAC5E;GACG,CAAA,IACJ;EACC;;AAEX"}