@mitcsutt/kiln-ui 0.2.0 → 0.2.2

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

@@ -28,6 +28,14 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
     dateTime?: string;
 }
 /**
+ * Body text in the theme's text face, with a size, tone and weight from the scale.
+ *
+ * @remarks
+ * `Text` is a paragraph by default and any inline element with `as` (`span`, `strong`, `em`,
+ * `small`, `label`, `time`). Size, tone, weight and measure are props, so text never needs a
+ * class.
+ *
+ * @privateRemarks
  * Body text. Paragraphs by default; any inline role via `as`.
  *
  * <Text size="sm" tone="muted">Updated 3 minutes ago</Text>

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

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["styles","Text_module_default","Text","forwardRef","Comp","rest","lines","truncate","responsive","size","cx","className","baseValue","tone","weight","numeric","align","measure","mergeStyles","responsiveVars","s","style"],"sources":["../../../../src/components/typography/Text/Text.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { baseValue, mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport styles from './Text.module.css'\n\nexport type TextSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport type TextTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'positive' | 'caution' | 'critical' | 'inverse'\nexport type TextWeight = 'regular' | 'medium' | 'strong'\nexport type TextAlign = 'start' | 'center' | 'end'\n/** Line-length cap from the width tokens: `narrow` 32rem · `text` 42rem · `content` 68rem. */\nexport type TextMeasure = 'narrow' | 'text' | 'content'\nexport type TextElement = 'p' | 'span' | 'div' | 'label' | 'strong' | 'em' | 'small' | 'time'\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  /** Step on the type scale. Omit to inherit the surrounding size. Responsive. */\n  size?: Responsive<TextSize>\n  /** Colour role. Omit to inherit. Status tones use the AA-safe `-text` variants. */\n  tone?: TextTone\n  /** Omit to inherit (so `as=\"strong\"` stays bold). */\n  weight?: TextWeight\n  /** Tabular lining figures in the theme's numeric face — for anything that aligns or updates. */\n  numeric?: boolean\n  /** `true` clips to one line with an ellipsis; a number clamps to that many lines. */\n  truncate?: boolean | number\n  align?: TextAlign\n  /** Cap the line length with a `--width-*` token (`max-inline-size`). Default: none. */\n  measure?: TextMeasure\n  as?: TextElement\n  /** For `as=\"label\"`. */\n  htmlFor?: string\n  /** For `as=\"time\"`. */\n  dateTime?: string\n}\n\n/**\n * Body text. Paragraphs by default; any inline role via `as`.\n *\n * <Text size=\"sm\" tone=\"muted\">Updated 3 minutes ago</Text>\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(function Text(\n  {\n    size,\n    tone,\n    weight,\n    numeric = false,\n    truncate,\n    align,\n    measure,\n    as: Comp = 'p',\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const lines =\n    truncate === true ? 1 : typeof truncate === 'number' && truncate > 0 ? truncate : undefined\n  const responsive = size !== undefined && typeof size !== 'string'\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.text, className)}\n      data-size={baseValue(size)}\n      data-responsive={responsive || undefined}\n      data-tone={tone}\n      data-weight={weight}\n      data-numeric={numeric || undefined}\n      data-truncate={lines === undefined ? undefined : lines === 1 ? 'line' : 'lines'}\n      data-align={align}\n      data-measure={measure}\n      style={mergeStyles(\n        responsive ? responsiveVars('text-size', size, (s) => `var(--text-${s})`) : undefined,\n        lines !== undefined && lines > 1 ? ({ '--text-lines': lines } as CSSProperties) : undefined,\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;AAwCA,IAAaE,IAAOC,EAAmC,SACrD,EACE,SACA,SACA,WACA,aAAU,IACV,aACA,UACA,YACA,IAAIC,IAAO,KACX,cACA,UACA,GAAGC,KAEL,GACA;CACA,IAAMC,IACJC,MAAa,KAAO,IAAI,OAAOA,KAAa,YAAYA,IAAW,IAAIA,IAAW,KAAA,GAC9EC,IAAaC,MAAS,KAAA,KAAa,OAAOA,KAAS;CACzD,OACE,kBAACL,GAAD;EAEO;EACL,WAAWM,EAAGV,EAAO,MAAMW,CAAS;EACpC,aAAWC,EAAUH,CAAI;EACzB,mBAAiBD,KAAc,KAAA;EAC/B,aAAWK;EACX,eAAaC;EACb,gBAAcC,KAAW,KAAA;EACzB,iBAAeT,MAAU,KAAA,IAAY,KAAA,IAAYA,MAAU,IAAI,SAAS;EACxE,cAAYU;EACZ,gBAAcC;EACd,OAAOC,EACLV,IAAaW,EAAe,aAAaV,IAAO,MAAM,cAAcW,EAAE,EAAE,IAAI,KAAA,GAC5Ed,MAAU,KAAA,KAAaA,IAAQ,IAAK,EAAE,gBAAgBA,EAAM,IAAsB,KAAA,GAClFe,CACF;EACA,GAAIhB;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Text.js","names":["styles","Text_module_default","Text","forwardRef","Comp","rest","lines","truncate","responsive","size","cx","className","baseValue","tone","weight","numeric","align","measure","mergeStyles","responsiveVars","s","style"],"sources":["../../../../src/components/typography/Text/Text.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { baseValue, mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport styles from './Text.module.css'\n\nexport type TextSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport type TextTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'positive' | 'caution' | 'critical' | 'inverse'\nexport type TextWeight = 'regular' | 'medium' | 'strong'\nexport type TextAlign = 'start' | 'center' | 'end'\n/** Line-length cap from the width tokens: `narrow` 32rem · `text` 42rem · `content` 68rem. */\nexport type TextMeasure = 'narrow' | 'text' | 'content'\nexport type TextElement = 'p' | 'span' | 'div' | 'label' | 'strong' | 'em' | 'small' | 'time'\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  /** Step on the type scale. Omit to inherit the surrounding size. Responsive. */\n  size?: Responsive<TextSize>\n  /** Colour role. Omit to inherit. Status tones use the AA-safe `-text` variants. */\n  tone?: TextTone\n  /** Omit to inherit (so `as=\"strong\"` stays bold). */\n  weight?: TextWeight\n  /** Tabular lining figures in the theme's numeric face — for anything that aligns or updates. */\n  numeric?: boolean\n  /** `true` clips to one line with an ellipsis; a number clamps to that many lines. */\n  truncate?: boolean | number\n  align?: TextAlign\n  /** Cap the line length with a `--width-*` token (`max-inline-size`). Default: none. */\n  measure?: TextMeasure\n  as?: TextElement\n  /** For `as=\"label\"`. */\n  htmlFor?: string\n  /** For `as=\"time\"`. */\n  dateTime?: string\n}\n\n/**\n * Body text in the theme's text face, with a size, tone and weight from the scale.\n *\n * @remarks\n * `Text` is a paragraph by default and any inline element with `as` (`span`, `strong`, `em`,\n * `small`, `label`, `time`). Size, tone, weight and measure are props, so text never needs a\n * class.\n *\n * @privateRemarks\n * Body text. Paragraphs by default; any inline role via `as`.\n *\n * <Text size=\"sm\" tone=\"muted\">Updated 3 minutes ago</Text>\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(function Text(\n  {\n    size,\n    tone,\n    weight,\n    numeric = false,\n    truncate,\n    align,\n    measure,\n    as: Comp = 'p',\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const lines =\n    truncate === true ? 1 : typeof truncate === 'number' && truncate > 0 ? truncate : undefined\n  const responsive = size !== undefined && typeof size !== 'string'\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.text, className)}\n      data-size={baseValue(size)}\n      data-responsive={responsive || undefined}\n      data-tone={tone}\n      data-weight={weight}\n      data-numeric={numeric || undefined}\n      data-truncate={lines === undefined ? undefined : lines === 1 ? 'line' : 'lines'}\n      data-align={align}\n      data-measure={measure}\n      style={mergeStyles(\n        responsive ? responsiveVars('text-size', size, (s) => `var(--text-${s})`) : undefined,\n        lines !== undefined && lines > 1 ? ({ '--text-lines': lines } as CSSProperties) : undefined,\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;AAgDA,IAAaE,IAAOC,EAAmC,SACrD,EACE,SACA,SACA,WACA,aAAU,IACV,aACA,UACA,YACA,IAAIC,IAAO,KACX,cACA,UACA,GAAGC,KAEL,GACA;CACA,IAAMC,IACJC,MAAa,KAAO,IAAI,OAAOA,KAAa,YAAYA,IAAW,IAAIA,IAAW,KAAA,GAC9EC,IAAaC,MAAS,KAAA,KAAa,OAAOA,KAAS;CACzD,OACE,kBAACL,GAAD;EAEO;EACL,WAAWM,EAAGV,EAAO,MAAMW,CAAS;EACpC,aAAWC,EAAUH,CAAI;EACzB,mBAAiBD,KAAc,KAAA;EAC/B,aAAWK;EACX,eAAaC;EACb,gBAAcC,KAAW,KAAA;EACzB,iBAAeT,MAAU,KAAA,IAAY,KAAA,IAAYA,MAAU,IAAI,SAAS;EACxE,cAAYU;EACZ,gBAAcC;EACd,OAAOC,EACLV,IAAaW,EAAe,aAAaV,IAAO,MAAM,cAAcW,EAAE,EAAE,IAAI,KAAA,GAC5Ed,MAAU,KAAA,KAAaA,IAAQ,IAAK,EAAE,gBAAgBA,EAAM,IAAsB,KAAA,GAClFe,CACF;EACA,GAAIhB;CACL,CAAA;AAEL,CAAC"}