@pushwoosh/kit-typography 1.14.0 → 2.1.0

package/h1/h1.types.d.ts

@@ -1,6 +1,7 @@
-import type { JSX, ReactNode, Ref } from 'react';
-/** Props of {@link H1}: every `<h1>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
+import type { CSSProperties, JSX, ReactNode, Ref } from 'react';
+/** Props of {@link H1}: every `<h1>` attribute plus `boxRef` — `ref` is taken by the wrapper — and `$textTransform`. */
 export type H1Props = Omit<JSX.IntrinsicElements['h1'], 'ref'> & {
     readonly boxRef?: Ref<HTMLHeadingElement>;
     readonly children: ReactNode;
+    readonly $textTransform?: CSSProperties['textTransform'];
 };

package/h1/styles.d.ts

@@ -1,4 +1,7 @@
+import type { CSSProperties } from 'react';
 /** Styled `<h1>` behind {@link H1}; use it when you need to extend the styles. */
-export declare const H1Box: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;
+export declare const H1Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
+    style?: CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $textTransform?: CSSProperties["textTransform"];
+}>> & string;

package/h1/styles.js

@@ -4,5 +4,7 @@ import { variants } from '../map';
 export const H1Box = styled.h1.withConfig({
   displayName: "H1Box",
   componentId: "sc-58pfxn-0"
-})(["margin:0;", ""], variants.h1);
+})(["margin:0;", " ", ""], variants.h1, ({
+  $textTransform
+}) => $textTransform && `text-transform: ${$textTransform};`);
 H1Box.displayName = 'H1Box';

package/h2/h2.types.d.ts

@@ -1,6 +1,7 @@
-import type { JSX, ReactNode, Ref } from 'react';
-/** Props of {@link H2}: every `<h2>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
+import type { CSSProperties, JSX, ReactNode, Ref } from 'react';
+/** Props of {@link H2}: every `<h2>` attribute plus `boxRef` — `ref` is taken by the wrapper — and `$textTransform`. */
 export type H2Props = Omit<JSX.IntrinsicElements['h2'], 'ref'> & {
     readonly boxRef?: Ref<HTMLHeadingElement>;
     readonly children: ReactNode;
+    readonly $textTransform?: CSSProperties['textTransform'];
 };

package/h2/styles.d.ts

@@ -1,4 +1,7 @@
+import type { CSSProperties } from 'react';
 /** Styled `<h2>` behind {@link H2}; use it when you need to extend the styles. */
-export declare const H2Box: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;
+export declare const H2Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
+    style?: CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $textTransform?: CSSProperties["textTransform"];
+}>> & string;

package/h2/styles.js

@@ -4,5 +4,7 @@ import { variants } from '../map';
 export const H2Box = styled.h2.withConfig({
   displayName: "H2Box",
   componentId: "sc-1a137gg-0"
-})(["margin:0;", ""], variants.h2);
+})(["margin:0;", " ", ""], variants.h2, ({
+  $textTransform
+}) => $textTransform && `text-transform: ${$textTransform};`);
 H2Box.displayName = 'H2Box';

package/h3/h3.types.d.ts

@@ -1,6 +1,7 @@
-import type { JSX, ReactNode, Ref } from 'react';
-/** Props of {@link H3}: every `<h3>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
+import type { CSSProperties, JSX, ReactNode, Ref } from 'react';
+/** Props of {@link H3}: every `<h3>` attribute plus `boxRef` — `ref` is taken by the wrapper — and `$textTransform`. */
 export type H3Props = Omit<JSX.IntrinsicElements['h3'], 'ref'> & {
     readonly boxRef?: Ref<HTMLHeadingElement>;
     readonly children: ReactNode;
+    readonly $textTransform?: CSSProperties['textTransform'];
 };

package/h3/styles.d.ts

@@ -1,4 +1,7 @@
+import type { CSSProperties } from 'react';
 /** Styled `<h3>` behind {@link H3}; use it when you need to extend the styles. */
-export declare const H3Box: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;
+export declare const H3Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
+    style?: CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $textTransform?: CSSProperties["textTransform"];
+}>> & string;

package/h3/styles.js

@@ -4,5 +4,7 @@ import { variants } from '../map';
 export const H3Box = styled.h3.withConfig({
   displayName: "H3Box",
   componentId: "sc-4j45cg-0"
-})(["margin:0;", ""], variants.h3);
+})(["margin:0;", " ", ""], variants.h3, ({
+  $textTransform
+}) => $textTransform && `text-transform: ${$textTransform};`);
 H3Box.displayName = 'H3Box';

package/h4/h4.component.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import { type H4Props } from './h4.types';
-/** Small heading — renders `<h4>` with the `h4` typography variant. */
+/** Smallest heading — renders `<h4>` with the `h4` typography variant. */
 export declare function H4(props: H4Props): ReactElement;

package/h4/h4.component.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { H4Box } from './styles';
-/** Small heading — renders `<h4>` with the `h4` typography variant. */
+/** Smallest heading — renders `<h4>` with the `h4` typography variant. */
 export function H4(props) {
   const {
     boxRef,

package/h4/h4.types.d.ts

@@ -1,6 +1,7 @@
-import type { JSX, ReactNode, Ref } from 'react';
-/** Props of {@link H4}: every `<h4>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
+import type { CSSProperties, JSX, ReactNode, Ref } from 'react';
+/** Props of {@link H4}: every `<h4>` attribute plus `boxRef` — `ref` is taken by the wrapper — and `$textTransform`. */
 export type H4Props = Omit<JSX.IntrinsicElements['h4'], 'ref'> & {
     readonly boxRef?: Ref<HTMLHeadingElement>;
     readonly children: ReactNode;
+    readonly $textTransform?: CSSProperties['textTransform'];
 };

package/h4/styles.d.ts

@@ -1,4 +1,7 @@
+import type { CSSProperties } from 'react';
 /** Styled `<h4>` behind {@link H4}; use it when you need to extend the styles. */
-export declare const H4Box: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;
+export declare const H4Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
+    style?: CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $textTransform?: CSSProperties["textTransform"];
+}>> & string;

package/h4/styles.js

@@ -4,5 +4,7 @@ import { variants } from '../map';
 export const H4Box = styled.h4.withConfig({
   displayName: "H4Box",
   componentId: "sc-1eb3cj5-0"
-})(["margin:0;", ""], variants.h4);
+})(["margin:0;", " ", ""], variants.h4, ({
+  $textTransform
+}) => $textTransform && `text-transform: ${$textTransform};`);
 H4Box.displayName = 'H4Box';

package/index.d.ts

@@ -5,7 +5,6 @@ export * from './h1';
 export * from './h2';
 export * from './h3';
 export * from './h4';
-export * from './h5';
 export * from './paragraph';
 export { Text } from './text/Text';
-export { type TypographyVariant } from './map';
+export { variants, type TypographyVariant } from './map';

package/index.js

@@ -5,6 +5,6 @@ export * from './h1';
 export * from './h2';
 export * from './h3';
 export * from './h4';
-export * from './h5';
 export * from './paragraph';
-export { Text } from './text/Text';
+export { Text } from './text/Text';
+export { variants } from './map';

package/map.d.ts

@@ -11,10 +11,8 @@ export type TypographyVariant =
  | 'h2'
 /** Sub-section heading. */
  | 'h3'
-/** Small heading. */
+/** Smallest heading. */
  | 'h4'
-/** Smallest heading; `H5` also uppercases it, the variant alone does not. */
- | 'h5'
 /** Monospaced text: code, ids, tokens. */
  | 'code'
 /** Standalone figure — a metric tile, a total, an order amount. Not a heading: no `h*` tag. */

package/map.js

@@ -6,9 +6,8 @@ export const variants = {
   footnote: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.SMALL, FontWeight.REGULAR, LineHeight.SMALL),
   h1: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING1, FontWeight.BOLD, LineHeight.HEADING1),
   h2: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING2, FontWeight.BOLD, LineHeight.HEADING2),
-  h3: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING3, FontWeight.BOLD, LineHeight.HEADING3),
+  h3: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING3, FontWeight.MEDIUM, LineHeight.HEADING3),
   h4: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING4, FontWeight.MEDIUM, LineHeight.HEADING4),
-  h5: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING5, FontWeight.MEDIUM, LineHeight.HEADING5),
   code: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MONO, FontSize.REGULAR, FontWeight.REGULAR, LineHeight.REGULAR),
   display: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.DISPLAY, FontWeight.BOLD, LineHeight.DISPLAY)
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-typography",
-  "version": "1.14.0",
+  "version": "2.1.0",
   "description": "React component for build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -11,7 +11,7 @@
     "directory": "dist"
   },
   "dependencies": {
-    "@pushwoosh/kit-constants": "^2.2.0"
+    "@pushwoosh/kit-constants": "^3.1.0"
   },
   "devDependencies": {
     "@types/react": "^19.3.0",

package/h5/h5.component.d.ts

@@ -1,4 +0,0 @@
-import { type ReactElement } from 'react';
-import { type H5Props } from './h5.types';
-/** Smallest heading, rendered uppercase — renders `<h5>` with the `h5` typography variant. */
-export declare function H5(props: H5Props): ReactElement;

package/h5/h5.component.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { H5Box } from './styles';
-/** Smallest heading, rendered uppercase — renders `<h5>` with the `h5` typography variant. */
-export function H5(props) {
-  const {
-    boxRef,
-    ...rest
-  } = props;
-  return _jsx(H5Box, {
-    ...rest,
-    ref: boxRef
-  });
-}

package/h5/h5.types.d.ts

@@ -1,6 +0,0 @@
-import type { JSX, ReactNode, Ref } from 'react';
-/** Props of {@link H5}: every `<h5>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
-export type H5Props = Omit<JSX.IntrinsicElements['h5'], 'ref'> & {
-    readonly boxRef?: Ref<HTMLHeadingElement>;
-    readonly children: ReactNode;
-};

package/h5/h5.types.js

@@ -1 +0,0 @@
-export {};

package/h5/index.d.ts

@@ -1,3 +0,0 @@
-export * from './h5.component';
-export * from './styles';
-export * from './h5.types';

package/h5/index.js

@@ -1,3 +0,0 @@
-export * from './h5.component';
-export * from './styles';
-export * from './h5.types';

package/h5/styles.d.ts

@@ -1,4 +0,0 @@
-/** Styled `<h5>` behind {@link H5}; use it when you need to extend the styles. */
-export declare const H5Box: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;

package/h5/styles.js

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-import { variants } from '../map';
-/** Styled `<h5>` behind {@link H5}; use it when you need to extend the styles. */
-export const H5Box = styled.h5.withConfig({
-  displayName: "H5Box",
-  componentId: "sc-uuwth8-0"
-})(["margin:0;", " text-transform:uppercase;"], variants.h5);
-H5Box.displayName = 'H5Box';