thread-ui 0.9.0 → 0.12.0

package/dist/components/typography/heading/heading.d.ts

@@ -0,0 +1,38 @@
+import { SubtitleProps, TypographyHeadingProps } from './heading.types';
+/**
+ * Display-level heading. Renders as `h1`
+ *
+ * @example
+ * <Title align="center">Welcome</Title>
+ * <Title subtitle="Last updated March 2025">Welcome</Title>
+ */
+export declare const Title: (props: TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Primary heading
+ *
+ * @example
+ * <H1>Page Title</H1>
+ */
+export declare const H1: (props: TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Secondary heading
+ *
+ * @example
+ * <H2>Section Title</H2>
+ */
+export declare const H2: (props: TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Tertiary heading
+ *
+ * @example
+ * <H3>Subsection Title</H3>
+ */
+export declare const H3: (props: TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Standalone secondary text rendered as an inline `span`.
+ * For subtitles attached to headings, use the `subtitle` prop on Title/H1/H2/H3 instead.
+ *
+ * @example
+ * <Subtitle>Last updated March 2025</Subtitle>
+ */
+export declare const Subtitle: ({ children, align, color, truncate, fontFamily, indent, }: SubtitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/typography/heading/heading.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getResolvedTypographyValues, getTextColorStyles } from '../../../utils';
+import { renderHeading } from './render-heading';
+import { getTypographyStyles } from '../shared-utils/get-typography-styles';
+import { getPresentationStyles } from '../shared-utils/get-presentation-styles';
+import { cx } from '../../../styled-system/css';
+/**
+ * Display-level heading. Renders as `h1`
+ *
+ * @example
+ * <Title align="center">Welcome</Title>
+ * <Title subtitle="Last updated March 2025">Welcome</Title>
+ */
+export const Title = (props) => renderHeading('title', 'h1', props);
+/**
+ * Primary heading
+ *
+ * @example
+ * <H1>Page Title</H1>
+ */
+export const H1 = (props) => renderHeading('h1', 'h1', props);
+/**
+ * Secondary heading
+ *
+ * @example
+ * <H2>Section Title</H2>
+ */
+export const H2 = (props) => renderHeading('h2', 'h2', props);
+/**
+ * Tertiary heading
+ *
+ * @example
+ * <H3>Subsection Title</H3>
+ */
+export const H3 = (props) => renderHeading('h3', 'h3', props);
+/**
+ * Standalone secondary text rendered as an inline `span`.
+ * For subtitles attached to headings, use the `subtitle` prop on Title/H1/H2/H3 instead.
+ *
+ * @example
+ * <Subtitle>Last updated March 2025</Subtitle>
+ */
+export const Subtitle = ({ children, align = 'left', color = 'secondary', truncate = false, fontFamily, indent, }) => {
+    const resolved = getResolvedTypographyValues({
+        role: 'body',
+        fontSize: 'body.sm',
+        marginBottom: 'none',
+        fontFamily,
+    });
+    const className = cx(getTypographyStyles(resolved), getPresentationStyles({ indent, align, truncate: truncate || undefined }), getTextColorStyles(color));
+    return (_jsx("span", { className: className, style: { display: 'block', marginTop: '0.2em' }, children: children }));
+};
+//# sourceMappingURL=heading.js.map

package/dist/components/typography/heading/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../../src/components/typography/heading/heading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,2BAA2B,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEzC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAE5F;;;;;GAKG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAEtF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAEtF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAEtF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,KAAK,GAAG,WAAW,EACnB,QAAQ,GAAG,KAAK,EAChB,UAAU,EACV,MAAM,GACS,EAAE,EAAE;IACnB,MAAM,QAAQ,GAAG,2BAA2B,CAAC;QAC5C,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,SAAS;QACnB,YAAY,EAAE,MAAM;QACpB,UAAU;KACV,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,EAAE,CACnB,mBAAmB,CAAC,QAAQ,CAAC,EAC7B,qBAAqB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAAE,CAAC,EACzE,kBAAkB,CAAC,KAAK,CAAC,CACzB,CAAC;IAEF,OAAO,CACN,eAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,YACzE,QAAQ,GACH,CACP,CAAC;AACH,CAAC,CAAC"}

package/dist/components/typography/heading/heading.types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { TypographyProps } from '../typography.types';
+import { FontFamilyOptions, Prettify } from '../../../types';
+/** Shared Heading Props */
+export type TypographyHeadingProps = Prettify<TypographyProps & {
+    /** Optional subtitle rendered beneath the heading */
+    subtitle?: ReactNode;
+}>;
+/** Subtitle Component Props */
+export type SubtitleProps = Prettify<TypographyProps & {
+    fontFamily?: Extract<FontFamilyOptions, 'body' | 'heading'>;
+    indent?: boolean;
+}>;

package/dist/components/typography/heading/heading.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=heading.types.js.map

package/dist/components/typography/heading/heading.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.types.js","sourceRoot":"","sources":["../../../../src/components/typography/heading/heading.types.ts"],"names":[],"mappings":""}

package/dist/components/typography/heading/render-heading.d.ts

@@ -0,0 +1,16 @@
+import { TypographyHeadingProps } from './heading.types';
+/** Subtitle role mapping: subtitle under a heading uses one-step-down typography role. */
+declare const SUBTITLE_ROLE_MAP: {
+    readonly title: "h1";
+    readonly h1: "h2";
+    readonly h2: "h3";
+    readonly h3: "body";
+};
+type HeadingRoleKey = keyof typeof SUBTITLE_ROLE_MAP;
+/**
+ * Internal helper rendering a heading with optional subtitle.
+ * Wraps in <hgroup> when subtitle is present.
+ *
+ */
+export declare const renderHeading: (role: HeadingRoleKey, HeadingTag: "h1" | "h2" | "h3", { children, align, inline, color, truncate, subtitle, }: TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/typography/heading/render-heading.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getResolvedTypographyValues, getTextColorStyles } from '../../../utils';
+import { cx } from '../../../styled-system/css';
+import { getTypographyStyles } from '../shared-utils/get-typography-styles';
+import { getPresentationStyles } from '../shared-utils/get-presentation-styles';
+/** Subtitle role mapping: subtitle under a heading uses one-step-down typography role. */
+const SUBTITLE_ROLE_MAP = {
+    title: 'h1',
+    h1: 'h2',
+    h2: 'h3',
+    h3: 'body',
+};
+/**
+ * Internal helper rendering a heading with optional subtitle.
+ * Wraps in <hgroup> when subtitle is present.
+ *
+ */
+export const renderHeading = (role, HeadingTag, { children, align = 'left', inline = false, color = 'standard', truncate = false, subtitle, }) => {
+    // If no subtitle, pass marginBottom through unless inline
+    if (!subtitle) {
+        const resolved = getResolvedTypographyValues({
+            role,
+            marginBottom: inline ? 'none' : undefined,
+        });
+        const headingClass = cx(getTypographyStyles(resolved), getPresentationStyles({ align, truncate: truncate || undefined }), getTextColorStyles(color));
+        return _jsx(HeadingTag, { className: headingClass, children: children });
+    }
+    // Wrap subtitle and heading in hgroup, add margin to wrapper
+    const headingResolved = getResolvedTypographyValues({
+        role,
+        marginBottom: 'none',
+    });
+    const headingClass = cx(getTypographyStyles(headingResolved), getPresentationStyles({ align, truncate: truncate || undefined }), getTextColorStyles(color));
+    const subtitleRole = SUBTITLE_ROLE_MAP[role];
+    const subtitleResolved = getResolvedTypographyValues({
+        role: subtitleRole,
+        fontFamily: 'heading',
+        marginBottom: 'none',
+    });
+    const subtitleClass = cx(getTypographyStyles(subtitleResolved), getPresentationStyles({ align, truncate: truncate || undefined }), getTextColorStyles('text-secondary'));
+    // Derive hgroup outer margin from heading
+    const wrapperResolved = getResolvedTypographyValues({
+        role,
+        marginBottom: inline ? 'none' : undefined,
+    });
+    const wrapperClass = getTypographyStyles({
+        fontSize: wrapperResolved.fontSize,
+        marginBottom: wrapperResolved.marginBottom,
+    });
+    return (_jsxs("hgroup", { className: wrapperClass, children: [_jsx(HeadingTag, { className: headingClass, children: children }), _jsx("p", { className: subtitleClass, children: subtitle })] }));
+};
+//# sourceMappingURL=render-heading.js.map

package/dist/components/typography/heading/render-heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-heading.js","sourceRoot":"","sources":["../../../../src/components/typography/heading/render-heading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,2BAA2B,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE1E,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAEhF,0FAA0F;AAC1F,MAAM,iBAAiB,GAAG;IACzB,KAAK,EAAE,IAAI;IACX,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,MAAM;CACD,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAC5B,IAAoB,EACpB,UAA8B,EAC9B,EACC,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,UAAU,EAClB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GACgB,EACxB,EAAE;IACH,0DAA0D;IAC1D,IAAI,CAAC,QAAQ,EAAE,CAAC;QACf,MAAM,QAAQ,GAAG,2BAA2B,CAAC;YAC5C,IAAI;YACJ,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;SACzC,CAAC,CAAC;QAEH,MAAM,YAAY,GAAG,EAAE,CACtB,mBAAmB,CAAC,QAAQ,CAAC,EAC7B,qBAAqB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAAE,CAAC,EACjE,kBAAkB,CAAC,KAAK,CAAC,CACzB,CAAC;QAEF,OAAO,KAAC,UAAU,IAAC,SAAS,EAAE,YAAY,YAAG,QAAQ,GAAc,CAAC;IACrE,CAAC;IAED,6DAA6D;IAC7D,MAAM,eAAe,GAAG,2BAA2B,CAAC;QACnD,IAAI;QACJ,YAAY,EAAE,MAAM;KACpB,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,EAAE,CACtB,mBAAmB,CAAC,eAAe,CAAC,EACpC,qBAAqB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAAE,CAAC,EACjE,kBAAkB,CAAC,KAAK,CAAC,CACzB,CAAC;IAEF,MAAM,YAAY,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,gBAAgB,GAAG,2BAA2B,CAAC;QACpD,IAAI,EAAE,YAAY;QAClB,UAAU,EAAE,SAAS;QACrB,YAAY,EAAE,MAAM;KACpB,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,EAAE,CACvB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,qBAAqB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAAE,CAAC,EACjE,kBAAkB,CAAC,gBAAgB,CAAC,CACpC,CAAC;IAEF,0CAA0C;IAC1C,MAAM,eAAe,GAAG,2BAA2B,CAAC;QACnD,IAAI;QACJ,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;KACzC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,mBAAmB,CAAC;QACxC,QAAQ,EAAE,eAAe,CAAC,QAAQ;QAClC,YAAY,EAAE,eAAe,CAAC,YAAY;KAC1C,CAAC,CAAC;IAEH,OAAO,CACN,kBAAQ,SAAS,EAAE,YAAY,aAC9B,KAAC,UAAU,IAAC,SAAS,EAAE,YAAY,YAAG,QAAQ,GAAc,EAC5D,YAAG,SAAS,EAAE,aAAa,YAAG,QAAQ,GAAK,IACnC,CACT,CAAC;AACH,CAAC,CAAC"}

package/dist/components/typography/index.d.ts

@@ -1,3 +1,9 @@
-export type { TypographyProps, TextProps } from './typography';
-export { Title, H1, H2, H3, Text, Subtitle, List, OrderedList } from './typography';
+export type { BaseTypographyPresentationProps, ExpandedTypographyPresentationProps, TypographyProps, } from './typography.types';
+export type { TypographyHeadingProps, SubtitleProps } from './heading/heading.types';
+export type { TypographyBodyTypes, TextProps, ListProps, OrderedListProps, } from './body/body.types';
+export type { CodeProps } from './code/code.types';
 export * from './page-header';
+export { Title, H1, H2, H3, Subtitle } from './heading/heading';
+export { Text } from './body/text';
+export { List, OrderedList } from './body/list';
+export { Code } from './code/code';

package/dist/components/typography/index.js

@@ -1,3 +1,6 @@
-export { Title, H1, H2, H3, Text, Subtitle, List, OrderedList } from './typography';
 export * from './page-header';
+export { Title, H1, H2, H3, Subtitle } from './heading/heading';
+export { Text } from './body/text';
+export { List, OrderedList } from './body/list';
+export { Code } from './code/code';
 //# sourceMappingURL=index.js.map

package/dist/components/typography/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/typography/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEpF,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/typography/index.ts"],"names":[],"mappings":"AAiBA,cAAc,eAAe,CAAC;AAE9B,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/typography/page-header/page-header.js

@@ -1,15 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { css, cx } from '../../../styled-system/css';
-import { container } from '../../../styled-system/patterns';
-import { Divider, Subtitle, Title } from '../../../components';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from '../../../styled-system/css';
+import { Container, Divider, Subtitle, Title } from '../../../components';
 const styles = {
-    container: cx(container(), css({
-        marginY: '4',
-    })),
     caption: css({
         width: { md: '50%' },
         paddingX: { md: '1' },
         marginX: 'auto',
+        marginY: '4',
     }),
     spacer: css({
         display: 'inline-block',
@@ -23,6 +20,6 @@ const styles = {
  * <PageHeader title="Our Team" caption="Meet the people behind the product." center />
  */
 export const PageHeader = ({ title, caption, center }) => {
-    return (_jsxs("div", { className: styles.container, children: [_jsx(Title, { align: "center", inline: true, children: title }), caption && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("div", { className: styles.caption, children: _jsxs(Subtitle, { align: center ? 'center' : 'left', children: [!center && _jsx("span", { className: styles.spacer }), caption] }) })] })), _jsx(Divider, { width: "33%" })] }));
+    return (_jsxs(Container, { children: [_jsx(Title, { align: "center", inline: true, children: title }), caption && (_jsx(_Fragment, { children: _jsx("div", { className: styles.caption, children: _jsx(Subtitle, { indent: center ? false : true, fontFamily: "heading", align: center ? 'center' : 'left', children: caption }) }) })), _jsx(Divider, { marginY: "16px", width: "33%" })] }));
 };
 //# sourceMappingURL=page-header.js.map

package/dist/components/typography/page-header/page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../../src/components/typography/page-header/page-header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAO,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAExD,MAAM,MAAM,GAAG;IACd,SAAS,EAAE,EAAE,CACZ,SAAS,EAAE,EACX,GAAG,CAAC;QACH,OAAO,EAAE,GAAG;KACZ,CAAC,CACF;IACD,OAAO,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE;QACpB,QAAQ,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE;QACrB,OAAO,EAAE,MAAM;KACf,CAAC;IACF,MAAM,EAAE,GAAG,CAAC;QACX,OAAO,EAAE,cAAc;QACvB,WAAW,EAAE,GAAG;KAChB,CAAC;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAmB,EAAE,EAAE;IACzE,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC/B,KAAC,KAAK,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,kBAC1B,KAAK,GACC,EACP,OAAO,IAAI,CACX,8BACC,cAAM,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC7B,MAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,aACzC,CAAC,MAAM,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,MAAM,GAAS,EAClD,OAAO,IACE,GACN,IACJ,CACH,EACD,KAAC,OAAO,IAAC,KAAK,EAAC,KAAK,GAAG,IAClB,CACN,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../../src/components/typography/page-header/page-header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAW,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAEnE,MAAM,MAAM,GAAG;IACd,OAAO,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE;QACpB,QAAQ,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE;QACrB,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,GAAG;KACZ,CAAC;IACF,MAAM,EAAE,GAAG,CAAC;QACX,OAAO,EAAE,cAAc;QACvB,WAAW,EAAE,GAAG;KAChB,CAAC;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAmB,EAAE,EAAE;IACzE,OAAO,CACN,MAAC,SAAS,eACT,KAAC,KAAK,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,kBAC1B,KAAK,GACC,EACP,OAAO,IAAI,CACX,4BACC,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC7B,KAAC,QAAQ,IACR,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAC7B,UAAU,EAAC,SAAS,EACpB,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,YAEhC,OAAO,GACE,GACN,GACJ,CACH,EACD,KAAC,OAAO,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,GAAG,IAC3B,CACZ,CAAC;AACH,CAAC,CAAC"}

package/dist/components/typography/shared-utils/get-presentation-styles.d.ts

@@ -0,0 +1,2 @@
+import { ExpandedTypographyPresentationProps } from '../typography.types';
+export declare const getPresentationStyles: (props: ExpandedTypographyPresentationProps) => string;

package/dist/components/typography/shared-utils/get-presentation-styles.js

@@ -0,0 +1,31 @@
+import { cva } from '../../../styled-system/css';
+/** Presentation CVA for align/truncate. Not part of the typography chord. */
+const getPresentationStylesCva = cva({
+    variants: {
+        align: {
+            left: { textAlign: 'left' },
+            center: { textAlign: 'center' },
+        },
+        truncate: {
+            true: {
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+            },
+        },
+        indent: {
+            true: {
+                textIndent: '4',
+            },
+            false: {},
+        },
+        underline: {
+            true: { textDecorationLine: 'underline' },
+            false: {},
+        },
+    },
+});
+export const getPresentationStyles = (props) => {
+    return getPresentationStylesCva(props);
+};
+//# sourceMappingURL=get-presentation-styles.js.map

package/dist/components/typography/shared-utils/get-presentation-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-presentation-styles.js","sourceRoot":"","sources":["../../../../src/components/typography/shared-utils/get-presentation-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAG1C,6EAA6E;AAC7E,MAAM,wBAAwB,GAAG,GAAG,CAAC;IACpC,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE;YAC3B,MAAM,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;SAC/B;QACD,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,QAAQ;gBACpB,YAAY,EAAE,UAAU;aACxB;SACD;QACD,MAAM,EAAE;YACP,IAAI,EAAE;gBACL,UAAU,EAAE,GAAG;aACf;YACD,KAAK,EAAE,EAAE;SACT;QACD,SAAS,EAAE;YACV,IAAI,EAAE,EAAE,kBAAkB,EAAE,WAAW,EAAE;YACzC,KAAK,EAAE,EAAE;SACT;KACD;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA0C,EAAE,EAAE;IACnF,OAAO,wBAAwB,CAAC,KAAK,CAAC,CAAC;AACxC,CAAC,CAAC"}

package/dist/components/typography/shared-utils/get-typography-styles.d.ts

@@ -0,0 +1,3 @@
+import { TypographyRole } from '../../../theme/theme-typography-system';
+import { DeepPartial } from '../../../types';
+export declare const getTypographyStyles: (props: DeepPartial<TypographyRole>) => string;

package/dist/components/typography/shared-utils/get-typography-styles.js

@@ -0,0 +1,56 @@
+import { cva } from '../../../styled-system/css';
+/** Typography CVA — map individual token keys to style declarations. */
+const getTypographyStylesCva = cva({
+    variants: {
+        fontFamily: {
+            body: { fontFamily: 'body' },
+            heading: { fontFamily: 'heading' },
+            mono: { fontFamily: 'mono' },
+        },
+        fontSize: {
+            'heading.sm': { fontSize: 'heading.sm' },
+            'heading.md': { fontSize: 'heading.md' },
+            'heading.lg': { fontSize: 'heading.lg' },
+            'heading.xl': { fontSize: 'heading.xl' },
+            'body.xxs': { fontSize: 'body.xxs' },
+            'body.xs': { fontSize: 'body.xs' },
+            'body.sm': { fontSize: 'body.sm' },
+            'body.md': { fontSize: 'body.md' },
+            'body.lg': { fontSize: 'body.lg' },
+            'body.xl': { fontSize: 'body.xl' },
+        },
+        fontWeight: {
+            regular: { fontWeight: 'regular' },
+            medium: { fontWeight: 'medium' },
+            semibold: { fontWeight: 'semibold' },
+            bold: { fontWeight: 'bold' },
+        },
+        lineHeight: {
+            none: { lineHeight: 'none' },
+            tighter: { lineHeight: 'tighter' },
+            tight: { lineHeight: 'tight' },
+            normal: { lineHeight: 'normal' },
+            loose: { lineHeight: 'loose' },
+            looser: { lineHeight: 'looser' },
+        },
+        letterSpacing: {
+            tight: { letterSpacing: 'tight' },
+            normal: { letterSpacing: 'normal' },
+            wide: { letterSpacing: 'wide' },
+        },
+        marginBottom: {
+            none: { marginBottom: 'none' },
+            xxs: { marginBottom: 'xxs' },
+            xs: { marginBottom: 'xs' },
+            sm: { marginBottom: 'sm' },
+            md: { marginBottom: 'md' },
+            lg: { marginBottom: 'lg' },
+            xl: { marginBottom: 'xl' },
+            xxl: { marginBottom: 'xxl' },
+        },
+    },
+});
+export const getTypographyStyles = (props) => {
+    return getTypographyStylesCva(props);
+};
+//# sourceMappingURL=get-typography-styles.js.map

package/dist/components/typography/shared-utils/get-typography-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-typography-styles.js","sourceRoot":"","sources":["../../../../src/components/typography/shared-utils/get-typography-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAK1C,wEAAwE;AACxE,MAAM,sBAAsB,GAAG,GAAG,CAAC;IAClC,QAAQ,EAAE;QACT,UAAU,EAAE;YACX,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;YAC5B,OAAO,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE;YAClC,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;SAC5B;QACD,QAAQ,EAAE;YACT,YAAY,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE;YACxC,YAAY,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE;YACxC,YAAY,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE;YACxC,YAAY,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE;YACxC,UAAU,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;YACpC,SAAS,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;YAClC,SAAS,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;YAClC,SAAS,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;YAClC,SAAS,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;YAClC,SAAS,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;SAClC;QACD,UAAU,EAAE;YACX,OAAO,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE;YAClC,MAAM,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;YAChC,QAAQ,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE;YACpC,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;SAC5B;QACD,UAAU,EAAE;YACX,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;YAC5B,OAAO,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE;YAClC,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE;YAC9B,MAAM,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;YAChC,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE;YAC9B,MAAM,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;SAChC;QACD,aAAa,EAAE;YACd,KAAK,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE;YACjC,MAAM,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE;YACnC,IAAI,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE;SAC/B;QACD,YAAY,EAAE;YACb,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE;YAC9B,GAAG,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE;YAC5B,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;YAC1B,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;YAC1B,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;YAC1B,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;YAC1B,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;YAC1B,GAAG,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE;SAC5B;KACD;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAkC,EAAE,EAAE;IACzE,OAAO,sBAAsB,CAAC,KAAK,CAAC,CAAC;AACtC,CAAC,CAAC"}

package/dist/components/typography/typography.d.ts

@@ -1,5 +1,4 @@
-import { ColoredTextOptions } from '../../types';
-import { ExpandedUtilitySizes } from '../../types/theme/theme.types';
+import { BodyFontSizeOptions, ColoredTextOptions, FontFamilyOptions, FontWeightOptions, LetterSpacingOptions, LineHeightOptions, SpacingScaleOptions } from '../../types';
 import { ReactNode } from 'react';
 export type TypographyProps = {
     children: ReactNode;
@@ -12,55 +11,78 @@ export type TypographyProps = {
     /** Truncates text to a single line with ellipsis @default `false` */
     truncate?: boolean;
 };
+export type HeadingProps = TypographyProps & {
+    /** Optional subtitle rendered beneath the heading */
+    subtitle?: ReactNode;
+};
 /**
- * Display-level heading. Renders as `h1` at 3rem/700 weight.
+ * Display-level heading. Renders as `h1`
  *
  * @example
  * <Title align="center">Welcome</Title>
+ * <Title subtitle="Last updated March 2025">Welcome</Title>
  */
-export declare const Title: ({ children, align, inline, color, truncate, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Title: (props: HeadingProps) => import("react/jsx-runtime").JSX.Element;
 /**
- * Primary heading. Renders as `h1` at 2rem/600 weight.
+ * Primary heading
  *
  * @example
  * <H1>Page Title</H1>
  */
-export declare const H1: ({ children, align, color, inline, truncate, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const H1: (props: HeadingProps) => import("react/jsx-runtime").JSX.Element;
 /**
- * Secondary heading. Renders as `h2` at 1.5rem/600 weight.
+ * Secondary heading
  *
  * @example
  * <H2>Section Title</H2>
  */
-export declare const H2: ({ children, align, color, inline, truncate, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const H2: (props: HeadingProps) => import("react/jsx-runtime").JSX.Element;
 /**
- * Tertiary heading. Renders as `h3` at 1.25rem/600 weight.
+ * Tertiary heading
  *
  * @example
  * <H3>Subsection Title</H3>
  */
-export declare const H3: ({ children, align, color, inline, truncate, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
-export type TextProps = TypographyProps & {
-    /** Applies semibold weight @default `false` */
-    bold?: boolean;
-    /** Font size @default `'md'` */
-    size?: keyof ExpandedUtilitySizes;
+export declare const H3: (props: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export type BodyTextProps = TypographyProps & {
+    /** Font size — body scale only @default `'md'` */
+    size?: BodyFontSizeOptions;
+    /** Font weight override @default role default (`'regular'`) */
+    weight?: FontWeightOptions;
+    /** Line height override @default role default (`'normal'`) */
+    lineHeight?: LineHeightOptions;
+    /** Letter spacing override @default role default (`'normal'`) */
+    letterSpacing?: LetterSpacingOptions;
+    /** Bottom margin override @default role default (`'0.5em'`) */
+    marginBottom?: SpacingScaleOptions;
+};
+export type TextProps = BodyTextProps & {
+    indent?: boolean;
 };
 /**
  * Body text. Renders as `p` by default or `span` when `inline` is true.
  *
+ * Allows for individual attribute overrides for customization
+ *
  * @example
- * <Text size="sm" bold>Important note</Text>
+ * <Text>Default Text</Text>
+ * @example
+ * <Text size="sm" weight="semibold">Important note</Text>
  */
-export declare const Text: ({ children, align, inline, color, bold, size, truncate, }: TextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Text: ({ children, align, inline, color, size, weight, lineHeight, letterSpacing, marginBottom, truncate, indent, }: TextProps) => import("react/jsx-runtime").JSX.Element;
+export type SubtitleProps = TypographyProps & {
+    fontFamily?: Extract<FontFamilyOptions, 'body' | 'heading'>;
+    indent?: boolean;
+};
 /**
- * Secondary text rendered as an inline `span`. Fluid font size between 0.875rem and 1.5rem.
+ * Standalone secondary text rendered as an inline `span`.
+ * For subtitles attached to headings, use the `subtitle` prop on Title/H1/H2/H3 instead.
  *
  * @example
  * <Subtitle>Last updated March 2025</Subtitle>
  */
-export declare const Subtitle: ({ children, align, color, truncate, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
-export type ListProps = Omit<TextProps, 'bold' | 'children' | 'inline' | 'truncate'> & {
+export declare const Subtitle: ({ children, align, color, truncate, fontFamily, indent, }: SubtitleProps) => import("react/jsx-runtime").JSX.Element;
+export type ListProps = Omit<BodyTextProps, 'children' | 'inline' | 'truncate' | 'marginBottom'> & {
     /** Items to render in the list */
     items: Array<string | ReactNode>;
     /** List marker style @default `'disc'` */
@@ -72,7 +94,7 @@ export type ListProps = Omit<TextProps, 'bold' | 'children' | 'inline' | 'trunca
  * @example
  * <List items={['Apples', 'Oranges', 'Bananas']} decoration="circle" />
  */
-export declare const List: ({ align, color, size, items, decoration, }: ListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const List: ({ align, color, size, weight, lineHeight, letterSpacing, items, decoration, }: ListProps) => import("react/jsx-runtime").JSX.Element;
 export type OrderedListProps = Omit<ListProps, 'decoration'>;
 /**
  * Ordered list with decimal numbering.
@@ -80,4 +102,15 @@ export type OrderedListProps = Omit<ListProps, 'decoration'>;
  * @example
  * <OrderedList items={['First', 'Second', 'Third']} />
  */
-export declare const OrderedList: ({ align, color, size, items, }: OrderedListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OrderedList: ({ align, color, size, weight, lineHeight, letterSpacing, items, }: OrderedListProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Code typography component for code display. Renders as `<code>`.
+ *
+ * @example
+ * <Text>Run <Code>npm install</Code> to get started.</Text>
+ */
+export type CodeProps = TypographyProps & {
+    /** Font size — body scale only @default `'sm'` */
+    size?: BodyFontSizeOptions;
+};
+export declare const Code: ({ children, align, color, size, truncate, }: CodeProps) => import("react/jsx-runtime").JSX.Element;