@rojaostudio/ds 2.0.0-next.10 → 2.0.0-next.11

package/dist/components/heading.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/** The [RDS] type scale for titles: band 36/48, heading 24/30, value 20/30. */
+type HeadingLevel = 'band' | 'heading' | 'value';
+/** default: text/heading (navy on light in Rojão, white on dark and on the brand plate). accent: the logo orange. */
+type HeadingTone = 'default' | 'accent';
+/** The element in the page outline. The visual level never decides it: the order of the page does. */
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** The size, from the type scale (Figma `level`). */
+    level?: HeadingLevel;
+    /** The colour of the brand pair (Figma `tone`). The Mark takes the other one. */
+    tone?: HeadingTone;
+    /** The heading element. Default h2. */
+    as?: HeadingElement;
+    /** The text (Figma `text`), with an optional <Heading.Mark> stretch (Figma `showMark` + `mark`). */
+    children: ReactNode;
+}
+interface HeadingMarkProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+}
+/**
+ * Heading.Mark — Figma [RDS] .heading/mark. A stretch of the title in the other colour of the pair: accent inside a
+ * default Heading, default inside an accent one. A plain span: screen readers read the whole title, unannounced.
+ */
+declare function HeadingMark({ className, children, ...rest }: HeadingMarkProps): react.JSX.Element;
+/**
+ * Heading — Figma [RDS] Content/Heading. A title in the brand pair: one colour, or both in the same title with a
+ * Heading.Mark. The colour is chosen per screen; tone=default is the rule. Orange on white fails contrast even for
+ * a large title (2.9:1 in Rojão): tone=accent belongs on dark or on the brand plate. Styles: heading.css.
+ */
+declare function HeadingRoot({ level, tone, as: Tag, className, children, ...rest }: HeadingProps): react.JSX.Element;
+/** `<Heading>` with `<Heading.Mark>` for the stretch in the other colour. */
+declare const Heading: typeof HeadingRoot & {
+    Mark: typeof HeadingMark;
+};
+
+export { Heading, type HeadingElement, type HeadingLevel, HeadingMark, type HeadingMarkProps, type HeadingProps, type HeadingTone };

package/dist/components/heading.js

@@ -0,0 +1,25 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+function HeadingMark(_a) {
+  var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, rest), { className: ["rds-heading__mark", className].filter(Boolean).join(" "), children }));
+}
+function HeadingRoot(_c) {
+  var _d = _c, { level = "heading", tone = "default", as: Tag = "h2", className, children } = _d, rest = __objRest(_d, ["level", "tone", "as", "className", "children"]);
+  return /* @__PURE__ */ jsx(
+    Tag,
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-heading", `rds-heading--${level}`, tone === "accent" && "rds-heading--accent", className].filter(Boolean).join(" "),
+      children
+    })
+  );
+}
+const Heading = Object.assign(HeadingRoot, { Mark: HeadingMark });
+export {
+  Heading,
+  HeadingMark
+};

package/dist/components/index.d.ts

@@ -77,6 +77,7 @@ export { Switch, SwitchProps } from './switch.js';
 export { Tooltip, TooltipProps, TooltipSide } from './tooltip.js';
 export { ToastFn, ToastOptions, ToastTone, ToastVariant, ToastView, ToastViewProps, Toaster, ToasterProps, toast, toastClassName, useToast } from './toast.js';
 export { Separator, SeparatorOrientation, SeparatorProps } from './separator.js';
+export { Heading, HeadingElement, HeadingLevel, HeadingMark, HeadingMarkProps, HeadingProps, HeadingTone } from './heading.js';
 export { Avatar, AvatarGroup, AvatarGroupProps, AvatarGroupSize, AvatarProps, AvatarSize, AvatarType, AvatarVariant, initials } from './avatar.js';
 export { IconButton, IconButtonProps } from './icon-button.js';
 export { ButtonGroup, ButtonGroupOrientation, ButtonGroupProps } from './button-group.js';

package/dist/components/index.js

@@ -84,6 +84,7 @@ import { Switch } from "./switch.js";
 import { Tooltip } from "./tooltip.js";
 import { Toaster, ToastView, toast, useToast, toastClassName } from "./toast.js";
 import { Separator } from "./separator.js";
+import { Heading, HeadingMark } from "./heading.js";
 import { Avatar, AvatarGroup, initials } from "./avatar.js";
 import { IconButton } from "./icon-button.js";
 import { ButtonGroup } from "./button-group.js";
@@ -208,6 +209,8 @@ export {
   GoogleButton,
   GoogleConsent,
   GoogleSignIn,
+  Heading,
+  HeadingMark,
   HoverCard,
   IconButton,
   Input,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.10",
+  "version": "2.0.0-next.11",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",
@@ -191,7 +191,7 @@
     "@radix-ui/react-toggle": "^1.1.18",
     "@radix-ui/react-toggle-group": "^1.1.19",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@rojaostudio/ds-core": "1.1.0-next.5"
+    "@rojaostudio/ds-core": "1.1.0-next.6"
   },
   "scripts": {
     "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:rds && pnpm run build:native && tsup",

package/styles/rds/components-styles.css

@@ -4785,6 +4785,48 @@ input:focus-visible + .rds-checkbox__box {
   }
 }
 
+/* components/heading.css */
+/* @tokens heading */
+/*
+ * Heading (Content collection, heading/*): a title in the brand pair. heading/default is text/heading, heading/accent
+ * the logo orange; .heading/mark paints a stretch in the other one. level follows the type scale (band, heading,
+ * value), all bold.
+ */
+.rds-heading {
+  margin: 0;
+  font-family: var(--type-font-stack);
+  font-weight: var(--type-heading-weight);
+  color: var(--heading-default);
+  text-wrap: balance;
+}
+
+.rds-heading--band {
+  font-size: var(--type-band-size);
+  line-height: var(--type-band-line);
+}
+
+.rds-heading--heading {
+  font-size: var(--type-heading-size);
+  line-height: var(--type-heading-line);
+}
+
+.rds-heading--value {
+  font-size: var(--type-value-size);
+  line-height: var(--type-value-line);
+}
+
+.rds-heading--accent {
+  color: var(--heading-accent);
+}
+
+.rds-heading__mark {
+  color: var(--heading-accent);
+}
+
+.rds-heading--accent .rds-heading__mark {
+  color: var(--heading-default);
+}
+
 /* components/hover-card.css */
 /* @tokens hovercard */
 /* HoverCard (Feedback collection, hovercard/*): 320 wide, 16 inside, 12 between avatar and text, elevation/overlay. */

package/styles/rds/components.css

@@ -386,6 +386,8 @@
   --choice-list-item-trailing-disabled: var(--text-disabled);
   --choice-list-focus-ring: var(--focus-ring);
   --choice-list-item-description-selected: var(--text-on-tint);
+  --heading-default: var(--text-heading);
+  --heading-accent: var(--colors-accent-default);
 
   /* external */
   --google-button-light-background: #ffffff;

package/styles/rds/theme.css

@@ -11,7 +11,7 @@
   --colors-accent-default: #ff6a00;
   --colors-accent-hover: #ff9640;
   --colors-accent-invert: #ffffff;
-  --text-heading: #ff6a00;
+  --text-heading: #1b2a4a;
   --text-body: #27272a;
   --text-link: #006bb5;
   --surface-page: #f4f4f5;