v3.0.5

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Typography } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const scale = [6  { label: "h1", meta: "36px / 600 / 1.11 / tight", sample: "Build better interfaces", type: "h1" },7  {8    label: "h2",9    meta: "30px / 600 / 1.17 / tight",10    sample: "Built for the intelligence age",11    type: "h2",12  },13  { label: "h3", meta: "24px / 600 / 1.25 / tight", sample: "Pricing on your terms", type: "h3" },14  {15    label: "h4",16    meta: "20px / 600 / 1.33 / tight",17    sample: "Apply to the startup program",18    type: "h4",19  },20  { label: "h5", meta: "18px / 600 / 1.39 / tight", sample: "Card titles", type: "h5" },21  { label: "h6", meta: "16px / 600 / 1.50 / tight", sample: "Smaller feature headers", type: "h6" },22  {23    label: "body",24    meta: "16px / 400 / 1.75",25    sample: "Primary body text used across documentation, marketing copy, and descriptions.",26    type: "body",27  },28  {29    label: "body-sm",30    meta: "14px / 400 / 1.50",31    sample: "Secondary body, table cells, navigation, and sidebar items.",32    type: "body-sm",33  },34  {35    label: "body-xs",36    meta: "12px / 400 / 1.25",37    sample: "Captions, badges, helper text, and fine print.",38    type: "body-xs",39  },40  { label: "code", meta: "14px / mono", sample: "pnpm add @lenso/ui", type: "code" },41] as const;42const styles = stylex.create({43  column: { display: "flex", width: "100%", flexDirection: "column" },44  row: {45    display: "grid",46    gridTemplateColumns: "160px 1fr",47    alignItems: "center",48    gap: 32,49    paddingBlock: 20,50    borderBlockEndWidth: { default: 1, ":last-child": 0 },51    borderBlockEndStyle: "solid",52    borderBlockEndColor: "var(--border)",53  },54  caption: { display: "flex", flexShrink: 0, flexDirection: "column", gap: 2 },55  label: { fontSize: 14, lineHeight: "20px", fontWeight: 600, color: "var(--foreground)" },56  meta: { fontSize: 12, lineHeight: "16px", whiteSpace: "nowrap", color: "var(--muted)" },57});58export function TypographyScale() {59  return (60    <div {...stylex.props(styles.column)}>61      {scale.map((row) => (62        <div key={row.label} {...stylex.props(styles.row)}>63          <div {...stylex.props(styles.caption)}>64            <span {...stylex.props(styles.label)}>{row.label}</span>65            <span {...stylex.props(styles.meta)}>{row.meta}</span>66          </div>67          <Typography type={row.type}>{row.sample}</Typography>68        </div>69      ))}70    </div>71  );72}73export default TypographyScale;