@krizaka/ui 3.51.0 → 3.53.0

package/dist/text-style.d.ts

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { CSSProperties } from 'react';
+
+type StyledTextProps<T extends React.ElementType = "p"> = {
+    /** The element drawn: `h1`…`h6`, `p`, `span`, `div`. */
+    as?: T;
+    /** The stored text style — validated here: anything invalid draws the default. */
+    value?: unknown;
+    /** Merged after the style's own class. */
+    className?: string;
+    children?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "value" | "className" | "style" | "children">;
+/** A text role drawn from a `TextStyle`: its font, size, weight, spacing, alignment, case and tone, all from CSS variables. */
+declare function StyledText<T extends React.ElementType = "p">({ as, value, className, children, ...rest }: StyledTextProps<T>): React.JSX.Element;
+
+/** The curated families of `@krizaka/fonts`, by role: `display` (the headlines), `text` (reading), `mono` (the typewriter), `cahier` (the pen). */
+declare const fontIds: readonly ["display", "text", "mono", "cahier"];
+type FontId = (typeof fontIds)[number];
+/** The steps of the type scale, smallest to largest. Never pixels. */
+declare const sizeSteps: readonly ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"];
+type SizeStep = (typeof sizeSteps)[number];
+declare const textWeights: readonly [400, 500, 600, 700];
+type TextWeight = (typeof textWeights)[number];
+declare const leadings: readonly ["tight", "normal", "relaxed"];
+type Leading = (typeof leadings)[number];
+declare const trackings: readonly ["tight", "normal", "wide"];
+type Tracking = (typeof trackings)[number];
+declare const aligns: readonly ["start", "center", "end"];
+type Align = (typeof aligns)[number];
+declare const cases: readonly ["none", "upper", "small-caps"];
+type Case = (typeof cases)[number];
+/** The text roles of the tokens, and the brand hue. */
+declare const toneIds: readonly ["primary", "secondary", "muted", "accent"];
+type ToneId = (typeof toneIds)[number];
+/** A text style: what a shop owner chooses, stored as it is. */
+type TextStyle = {
+    font: FontId;
+    size: SizeStep;
+    weight: TextWeight;
+    leading: Leading;
+    tracking: Tracking;
+    align: Align;
+    case: Case;
+    italic: boolean;
+    tone: ToneId;
+};
+/** What `parseTextStyle` answers for anything that is not a text style. */
+declare const defaultTextStyle: Readonly<TextStyle>;
+/** The weights each face is cut in: a picker offers these, never a synthesised bold. */
+declare const fontWeights: Readonly<Record<FontId, readonly TextWeight[]>>;
+/**
+ * Validates what was stored (or sent): the text style, or `defaultTextStyle` for anything invalid — a free font name, a
+ * hex colour, a pixel size, CSS text, a value that is not an object. Keys a text style does not have are dropped; keys it
+ * lacks (a value stored before one was added) take their default. Usable on a server.
+ */
+declare function parseTextStyle(input: unknown): TextStyle;
+/** The `className` and `style` that draw a text style. Built from fixed tables of CSS variables only. */
+declare function textStyleProps(style: unknown): {
+    className: string;
+    style: CSSProperties;
+};
+/** A colour read from the page, as `[r, g, b]` in 0–255, or `null` when it cannot be read (the check then says nothing). */
+declare function parseColor(text: string): [number, number, number] | null;
+/** The WCAG contrast ratio of two colours (1 – 21). */
+declare function contrastRatio(foreground: [number, number, number], background: [number, number, number]): number;
+/** The ratio WCAG asks of large text. */
+declare const largeTextRatio = 3;
+/** The ratio WCAG asks of body text. */
+declare const bodyTextRatio = 4.5;
+/** Large text for WCAG: 24 px and over, or bold from 18.66 px (`xl`, 20 px, in bold). */
+declare function isLargeText(style: Pick<TextStyle, "size" | "weight">): boolean;
+/** The ratio a style's text must reach on its surface. */
+declare const requiredContrast: (style: Pick<TextStyle, "size" | "weight">) => number;
+
+/** The controls of the picker, in the order they are drawn. */
+declare const textStyleFields: readonly ["font", "size", "weight", "leading", "tracking", "align", "case", "italic", "tone"];
+type TextStyleField = (typeof textStyleFields)[number];
+type TextStyleLabels = {
+    /** The name of the whole control. */
+    picker: string;
+    font: string;
+    size: string;
+    weight: string;
+    leading: string;
+    tracking: string;
+    align: string;
+    case: string;
+    italic: string;
+    tone: string;
+    presets: string;
+    preview: string;
+    fonts: Record<FontId, string>;
+    weights: Record<TextWeight, string>;
+    leadings: Record<Leading, string>;
+    trackings: Record<Tracking, string>;
+    aligns: Record<Align, string>;
+    cases: Record<Case, string>;
+    tones: Record<ToneId, string>;
+    /** The contrast warning: `{ratio}` is what the tone reaches, `{min}` what it must. */
+    contrastWarning: string;
+    /** The small-text warning: `{size}` is the smallest step advised for body text. */
+    minSizeWarning: string;
+};
+/** The English words. */
+declare const textStyleLabels: TextStyleLabels;
+/** The French words. */
+declare const textStyleLabelsFr: TextStyleLabels;
+type TextStylePreset = {
+    /** A stable key. */
+    id: string;
+    /** The name on the button, passed translated (« Titre », « Prix »…). */
+    label: string;
+    /** The style it applies; what it does not say takes the default. Validated when applied. */
+    value: Partial<TextStyle>;
+};
+type TextStylePickerProps = {
+    /** The text style, controlled. Validated by `parseTextStyle`: anything invalid shows the default. */
+    value: TextStyle;
+    /** Called with the whole new text style at each change. */
+    onChange: (value: TextStyle) => void;
+    /** The sample the preview shows, passed translated ("Boulangerie Martin"). */
+    previewText: string;
+    /** Styles the person can start from, as data. */
+    presets?: readonly TextStylePreset[];
+    /** The controls to show, in the order of `textStyleFields` (just `["font", "size"]`). A preset then changes only these. */
+    fields?: readonly TextStyleField[];
+    /** A denser form for a popover from a toolbar. */
+    compact?: boolean;
+    /** The words, passed translated: `textStyleLabels` (EN) or `textStyleLabelsFr`, or the host's own. */
+    labels?: Partial<TextStyleLabels>;
+    /** The colour the text will sit on, for the preview and the contrast check (a CSS colour). By default the page's own surface. */
+    surface?: string;
+    /**
+     * What the text is for: `body` (reading text, which `minBodySize` guards) or `title` (a heading, which may be small).
+     * @default "body"
+     */
+    role?: "body" | "title";
+    /**
+     * The smallest step advised for body text: under it, a warning shows — the size is never forced.
+     * @default "sm"
+     */
+    minBodySize?: SizeStep;
+    /** Merged last on the root. */
+    className?: string;
+};
+/** The control of a text style: font, size, weight, spacing, alignment, case, italic and tone, with a live preview. */
+declare function TextStylePicker({ value, onChange, previewText, presets, fields, compact, labels: given, surface, role, minBodySize, className, }: TextStylePickerProps): React.JSX.Element;
+
+export { type Align, type Case, type FontId, type Leading, type SizeStep, StyledText, type StyledTextProps, type TextStyle, type TextStyleField, type TextStyleLabels, TextStylePicker, type TextStylePickerProps, type TextStylePreset, type TextWeight, type ToneId, type Tracking, aligns, bodyTextRatio, cases, contrastRatio, defaultTextStyle, fontIds, fontWeights, isLargeText, largeTextRatio, leadings, parseColor, parseTextStyle, requiredContrast, sizeSteps, textStyleFields, textStyleLabels, textStyleLabelsFr, textStyleProps, textWeights, toneIds, trackings };

package/dist/text-style.js

@@ -0,0 +1,399 @@
+"use client";
+
+// src/cx.ts
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/text-style/text-style.ts
+import * as z from "zod/mini";
+var fontIds = ["display", "text", "mono", "cahier"];
+var sizeSteps = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"];
+var textWeights = [400, 500, 600, 700];
+var leadings = ["tight", "normal", "relaxed"];
+var trackings = ["tight", "normal", "wide"];
+var aligns = ["start", "center", "end"];
+var cases = ["none", "upper", "small-caps"];
+var toneIds = ["primary", "secondary", "muted", "accent"];
+var defaultTextStyle = Object.freeze({
+  font: "text",
+  size: "md",
+  weight: 400,
+  leading: "normal",
+  tracking: "normal",
+  align: "start",
+  case: "none",
+  italic: false,
+  tone: "primary"
+});
+var fontWeights = {
+  display: [400],
+  text: [400, 600, 700],
+  mono: [400, 700],
+  cahier: [500]
+};
+var schema = z.object({
+  font: z.enum(fontIds),
+  size: z.enum(sizeSteps),
+  weight: z.union([z.literal(400), z.literal(500), z.literal(600), z.literal(700)]),
+  leading: z.enum(leadings),
+  tracking: z.enum(trackings),
+  align: z.enum(aligns),
+  case: z.enum(cases),
+  italic: z.boolean(),
+  tone: z.enum(toneIds)
+});
+function parseTextStyle(input) {
+  if (typeof input !== "object" || input === null || Array.isArray(input)) return { ...defaultTextStyle };
+  const own = Object.fromEntries(Object.entries(input).filter(([, v]) => v !== void 0));
+  const parsed = schema.safeParse({ ...defaultTextStyle, ...own });
+  return parsed.success ? { ...parsed.data } : { ...defaultTextStyle };
+}
+var rem = { xs: "0.75rem", sm: "0.875rem", md: "1rem", lg: "1.125rem", xl: "1.25rem", "2xl": "1.5rem", "3xl": "1.875rem", "4xl": "2.25rem" };
+var lineHeight = { tight: "1.15", normal: "1.4", relaxed: "1.7" };
+var letterSpacing = { tight: "-0.02em", normal: "0em", wide: "0.08em" };
+var textAlign = { start: "start", center: "center", end: "end" };
+var tone = {
+  primary: "var(--kz-text-primary)",
+  secondary: "var(--kz-text-secondary)",
+  muted: "var(--kz-text-muted)",
+  accent: "var(--kz-accent-text)"
+};
+var fontVariable = {
+  display: "var(--kz-font-display)",
+  text: "var(--kz-font-text)",
+  mono: "var(--kz-font-mono)",
+  cahier: "var(--kz-font-cahier)"
+};
+var sizeVariable = (step) => `var(--kz-text-style-${step}, ${rem[step]})`;
+var toneVariable = (id) => tone[id];
+function textStyleProps(style) {
+  const v = parseTextStyle(style);
+  return {
+    className: "kz-text-style",
+    style: {
+      fontFamily: fontVariable[v.font],
+      fontSize: sizeVariable(v.size),
+      fontWeight: v.weight,
+      lineHeight: `var(--kz-text-style-leading-${v.leading}, ${lineHeight[v.leading]})`,
+      letterSpacing: `var(--kz-text-style-tracking-${v.tracking}, ${letterSpacing[v.tracking]})`,
+      textAlign: textAlign[v.align],
+      textTransform: v.case === "upper" ? "uppercase" : "none",
+      fontVariantCaps: v.case === "small-caps" ? "small-caps" : "normal",
+      fontStyle: v.italic ? "italic" : "normal",
+      color: toneVariable(v.tone)
+    }
+  };
+}
+function parseColor(text) {
+  const value = text.trim().toLowerCase();
+  const hex = /^#([0-9a-f]{3,8})$/.exec(value)?.[1];
+  if (hex && [3, 4, 6, 8].includes(hex.length)) {
+    const full = hex.length <= 4 ? [...hex].map((c) => c + c).join("") : hex;
+    return [0, 2, 4].map((i) => Number.parseInt(full.slice(i, i + 2), 16));
+  }
+  const rgb = /^rgba?\(([^)]+)\)$/.exec(value)?.[1];
+  if (rgb) {
+    const parts = rgb.split(/[\s,/]+/).filter(Boolean).slice(0, 3).map((p) => p.endsWith("%") ? Number.parseFloat(p) / 100 * 255 : Number.parseFloat(p));
+    return parts.length === 3 && parts.every(Number.isFinite) ? parts : null;
+  }
+  const srgb = /^color\(srgb\s+([^)]+)\)$/.exec(value)?.[1];
+  if (srgb) {
+    const parts = srgb.split(/[\s/]+/).filter(Boolean).slice(0, 3).map((p) => Number.parseFloat(p) * 255);
+    return parts.length === 3 && parts.every(Number.isFinite) ? parts : null;
+  }
+  return null;
+}
+var channel = (c) => {
+  const s = Math.min(Math.max(c, 0), 255) / 255;
+  return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+};
+var luminance = ([r, g, b]) => 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+function contrastRatio(foreground, background) {
+  const a = luminance(foreground);
+  const b = luminance(background);
+  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+}
+var largeTextRatio = 3;
+var bodyTextRatio = 4.5;
+function isLargeText(style) {
+  const at = sizeSteps.indexOf(style.size);
+  return at >= sizeSteps.indexOf("2xl") || at >= sizeSteps.indexOf("xl") && style.weight >= 700;
+}
+var requiredContrast = (style) => isLargeText(style) ? largeTextRatio : bodyTextRatio;
+var isUnderMinimumSize = (size, minimum) => sizeSteps.indexOf(size) < sizeSteps.indexOf(minimum);
+
+// src/text-style/styled-text.tsx
+import { jsx } from "react/jsx-runtime";
+function StyledText({ as, value, className, children, ...rest }) {
+  const Tag = as ?? "p";
+  const props = textStyleProps(value);
+  return /* @__PURE__ */ jsx(Tag, { ...rest, className: cx(props.className, className), style: props.style, children });
+}
+
+// src/text-style/text-style-picker.tsx
+import { Button } from "@krizaka/ui/button";
+import { RadioGroup } from "@krizaka/ui/radio-group";
+import { Slider } from "@krizaka/ui/slider";
+import { Switch } from "@krizaka/ui/switch";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import * as React from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var textStyleFields = ["font", "size", "weight", "leading", "tracking", "align", "case", "italic", "tone"];
+var textStyleLabels = {
+  picker: "Text style",
+  font: "Font",
+  size: "Size",
+  weight: "Weight",
+  leading: "Line height",
+  tracking: "Letter spacing",
+  align: "Alignment",
+  case: "Case",
+  italic: "Italic",
+  tone: "Colour",
+  presets: "Presets",
+  preview: "Preview",
+  fonts: { display: "Display", text: "Text", mono: "Typewriter", cahier: "Pen" },
+  weights: { 400: "Regular", 500: "Medium", 600: "Semibold", 700: "Bold" },
+  leadings: { tight: "Tight", normal: "Normal", relaxed: "Relaxed" },
+  trackings: { tight: "Tight", normal: "Normal", wide: "Wide" },
+  aligns: { start: "Start", center: "Centre", end: "End" },
+  cases: { none: "Aa", upper: "AA", "small-caps": "Small caps" },
+  tones: { primary: "Primary", secondary: "Secondary", muted: "Muted", accent: "Accent" },
+  contrastWarning: "This colour reaches only {ratio}:1 on the background; {min}:1 is needed to read it comfortably.",
+  minSizeWarning: "Body text under \u201C{size}\u201D is hard to read."
+};
+var textStyleLabelsFr = {
+  picker: "Style du texte",
+  font: "Police",
+  size: "Taille",
+  weight: "Graisse",
+  leading: "Interligne",
+  tracking: "Espacement des lettres",
+  align: "Alignement",
+  case: "Casse",
+  italic: "Italique",
+  tone: "Couleur",
+  presets: "Pr\xE9r\xE9glages",
+  preview: "Aper\xE7u",
+  fonts: { display: "Titre", text: "Texte", mono: "Machine \xE0 \xE9crire", cahier: "Stylo" },
+  weights: { 400: "Normal", 500: "Moyen", 600: "Demi-gras", 700: "Gras" },
+  leadings: { tight: "Serr\xE9", normal: "Normal", relaxed: "A\xE9r\xE9" },
+  trackings: { tight: "Serr\xE9", normal: "Normal", wide: "Large" },
+  aligns: { start: "D\xE9but", center: "Centr\xE9", end: "Fin" },
+  cases: { none: "Aa", upper: "AA", "small-caps": "Petites capitales" },
+  tones: { primary: "Principale", secondary: "Secondaire", muted: "Discr\xE8te", accent: "Accent" },
+  contrastWarning: "Cette couleur n\u2019atteint que {ratio}:1 sur le fond ; {min}:1 est n\xE9cessaire pour la lire confortablement.",
+  minSizeWarning: "Un texte courant sous \xAB {size} \xBB se lit mal."
+};
+function parseColorWithAlpha(text) {
+  const value = text.trim().toLowerCase();
+  if (value === "transparent") return [0, 0, 0, 0];
+  const color = parseColor(value);
+  if (!color) return null;
+  const hex = /^#([0-9a-f]{4}|[0-9a-f]{8})$/.exec(value)?.[1];
+  if (hex) {
+    const alpha2 = hex.length === 4 ? Number.parseInt(hex[3] + hex[3], 16) : Number.parseInt(hex.slice(6, 8), 16);
+    return [...color, alpha2 / 255];
+  }
+  const components = /^rgba?\(([^)]+)\)$/.exec(value)?.[1] ?? /^color\(srgb\s+([^)]+)\)$/.exec(value)?.[1];
+  if (!components) return [...color, 1];
+  const [channels, slashAlpha] = components.split("/");
+  const parts = channels.trim().split(/[\s,]+/).filter(Boolean);
+  const alpha = slashAlpha?.trim() ?? (parts.length === 4 ? parts[3] : void 0);
+  if (alpha === void 0) return [...color, 1];
+  const parsed = alpha.endsWith("%") ? Number.parseFloat(alpha) / 100 : Number.parseFloat(alpha);
+  return Number.isFinite(parsed) && parsed >= 0 && parsed <= 1 ? [...color, parsed] : null;
+}
+var over = (foreground, background) => {
+  const alpha = foreground[3] + background[3] * (1 - foreground[3]);
+  if (alpha === 0) return [0, 0, 0, 0];
+  return [
+    (foreground[0] * foreground[3] + background[0] * background[3] * (1 - foreground[3])) / alpha,
+    (foreground[1] * foreground[3] + background[1] * background[3] * (1 - foreground[3])) / alpha,
+    (foreground[2] * foreground[3] + background[2] * background[3] * (1 - foreground[3])) / alpha,
+    alpha
+  ];
+};
+function surfaceOf(element) {
+  const layers = [];
+  for (let node = element; node; node = node.parentElement) {
+    layers.push(node);
+    if (node === document.documentElement) break;
+  }
+  let background = [0, 0, 0, 0];
+  for (const node of layers.reverse()) {
+    const color = window.getComputedStyle(node).backgroundColor;
+    const layer = color ? parseColorWithAlpha(color) : [0, 0, 0, 0];
+    if (!layer) return null;
+    background = over(layer, background);
+  }
+  return background[3] >= 1 ? [background[0], background[1], background[2]] : null;
+}
+function useContrast(ref, key) {
+  const [measurement, setMeasurement] = React.useState(null);
+  React.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const measure = () => {
+      const sample = element.querySelector("[data-text-style-sample]") ?? element;
+      const computed = window.getComputedStyle(sample);
+      const foreground = parseColor(computed.color);
+      const background = surfaceOf(sample);
+      const fontSize = Number.parseFloat(computed.fontSize);
+      const fontWeight = Number.parseFloat(computed.fontWeight);
+      const required = fontSize >= 24 || fontSize >= 18.66 && fontWeight >= 700 ? 3 : 4.5;
+      setMeasurement(foreground && background && Number.isFinite(fontSize) && Number.isFinite(fontWeight) ? { ratio: contrastRatio(foreground, background), required } : null);
+    };
+    measure();
+    if (typeof MutationObserver === "undefined") return;
+    const observer = new MutationObserver(measure);
+    for (let node = element; node; node = node.parentElement) {
+      observer.observe(node, { attributes: true, attributeFilter: ["class", "style", "data-theme"] });
+      if (node === document.documentElement) break;
+    }
+    return () => observer.disconnect();
+  }, [ref, key]);
+  return measurement;
+}
+var nearest = (weights, weight) => weights.reduce((best, w) => Math.abs(w - weight) < Math.abs(best - weight) ? w : best, weights[0]);
+function TextStylePicker({
+  value,
+  onChange,
+  previewText,
+  presets,
+  fields = textStyleFields,
+  compact,
+  labels: given,
+  surface,
+  role = "body",
+  minBodySize = "sm",
+  className
+}) {
+  const labels = { ...textStyleLabels, ...given };
+  const style = parseTextStyle(value);
+  const shown = (field) => fields.includes(field);
+  const id = React.useId();
+  const previewRef = React.useRef(null);
+  const measurement = useContrast(previewRef, `${style.font}|${style.size}|${style.weight}|${style.tone}|${surface ?? ""}`);
+  const set = (patch) => onChange(parseTextStyle({ ...style, ...patch }));
+  const setFont = (font) => set({ font, weight: nearest(fontWeights[font], style.weight) });
+  const applyPreset = (preset) => {
+    const next = parseTextStyle(preset.value);
+    const patch = Object.fromEntries(textStyleFields.filter(shown).map((f) => [f, next[f]]));
+    if (patch.font !== void 0 || patch.weight !== void 0) {
+      const font = patch.font ?? style.font;
+      const weight = patch.weight ?? style.weight;
+      set({ ...patch, weight: nearest(fontWeights[font], weight) });
+    } else {
+      set(patch);
+    }
+  };
+  const warnings = [];
+  if (measurement && measurement.ratio < measurement.required) {
+    warnings.push(labels.contrastWarning.replace("{ratio}", measurement.ratio.toFixed(1)).replace("{min}", String(measurement.required)));
+  }
+  if (role === "body" && isUnderMinimumSize(style.size, minBodySize)) warnings.push(labels.minSizeWarning.replace("{size}", minBodySize));
+  const group = (field, title, control, className2) => /* @__PURE__ */ jsxs("div", { className: cx("flex min-w-0 flex-col gap-2", className2), "data-field": field, children: [
+    /* @__PURE__ */ jsx2("span", { id: `${id}-${field}`, className: "text-xs font-semibold text-fg-secondary", children: title }),
+    control
+  ] }, field);
+  const segmented = (field, title, items, current, text, choose, disabled) => group(
+    field,
+    title,
+    /* @__PURE__ */ jsx2(RadioGroup.Root, { variant: "segmented", "aria-labelledby": `${id}-${field}`, value: String(current), onValueChange: (next) => choose(items.find((item) => String(item) === next)), className: "w-full max-w-full", children: items.map((item) => /* @__PURE__ */ jsx2(RadioGroup.Segment, { value: String(item), disabled: disabled?.(item), className: "min-w-0 px-1 text-xs", children: text(item) }, item)) }),
+    "sm:col-span-2"
+  );
+  const controls = {
+    font: () => group(
+      "font",
+      labels.font,
+      /* @__PURE__ */ jsx2(RadioGroup.Root, { variant: "cards", "aria-labelledby": `${id}-font`, value: style.font, onValueChange: (next) => setFont(next), className: "grid-cols-[repeat(auto-fit,minmax(9rem,1fr))]", children: fontIds.map((font) => /* @__PURE__ */ jsx2(RadioGroup.Card, { value: font, style: { fontFamily: fontVariable[font] }, children: labels.fonts[font] }, font)) })
+    ),
+    size: () => group(
+      "size",
+      labels.size,
+      /* @__PURE__ */ jsx2(
+        Slider,
+        {
+          label: labels.size,
+          min: 0,
+          max: sizeSteps.length - 1,
+          step: 1,
+          ticks: true,
+          value: sizeSteps.indexOf(style.size),
+          onValueChange: (index) => set({ size: sizeSteps[index] }),
+          formatValue: (index) => sizeSteps[index],
+          floatingValue: true
+        }
+      )
+    ),
+    weight: () => segmented("weight", labels.weight, textWeights, style.weight, (w) => labels.weights[w], (weight) => set({ weight }), (w) => !fontWeights[style.font].includes(w)),
+    leading: () => segmented("leading", labels.leading, leadings, style.leading, (l) => labels.leadings[l], (leading) => set({ leading })),
+    tracking: () => segmented("tracking", labels.tracking, trackings, style.tracking, (t) => labels.trackings[t], (tracking) => set({ tracking })),
+    align: () => segmented("align", labels.align, aligns, style.align, (a) => labels.aligns[a], (align) => set({ align })),
+    case: () => segmented("case", labels.case, cases, style.case, (c) => labels.cases[c], (next) => set({ case: next })),
+    italic: () => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3", "data-field": "italic", children: [
+      /* @__PURE__ */ jsx2("span", { id: `${id}-italic`, className: "text-xs font-semibold text-fg-secondary", children: labels.italic }),
+      /* @__PURE__ */ jsx2(Switch, { "aria-labelledby": `${id}-italic`, checked: style.italic, onCheckedChange: (italic) => set({ italic }) })
+    ] }, "italic"),
+    tone: () => group(
+      "tone",
+      labels.tone,
+      /* @__PURE__ */ jsx2(RadioGroupPrimitive.Root, { "aria-labelledby": `${id}-tone`, value: style.tone, onValueChange: (next) => set({ tone: next }), orientation: "horizontal", className: "flex flex-wrap gap-3", children: toneIds.map((tone2) => /* @__PURE__ */ jsx2(
+        RadioGroupPrimitive.Item,
+        {
+          value: tone2,
+          "aria-label": labels.tones[tone2],
+          title: labels.tones[tone2],
+          style: { backgroundColor: toneVariable(tone2) },
+          className: "h-8 w-8 rounded-full border border-border-strong focus-visible:outline-hidden focus-visible:focus-ring data-[state=checked]:ring-2 data-[state=checked]:ring-accent data-[state=checked]:ring-offset-2 data-[state=checked]:ring-offset-surface-0"
+        },
+        tone2
+      )) })
+    )
+  };
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": labels.picker, "data-compact": compact ? "" : void 0, className: cx("flex min-w-0 flex-col", compact ? "gap-3" : "gap-5", className), children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: previewRef,
+        "data-preview": "",
+        "aria-label": labels.preview,
+        role: "group",
+        style: surface ? { backgroundColor: surface } : void 0,
+        className: cx("min-w-0 overflow-hidden rounded-xl border border-border-default", surface ? "" : "bg-surface-1", compact ? "p-3" : "p-5"),
+        children: /* @__PURE__ */ jsx2(StyledText, { as: "p", value: style, className: "break-words", "data-text-style-sample": "", children: previewText })
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { role: "status", "aria-live": "polite", "data-warnings": "", children: warnings.map((warning) => /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-fg-warning", children: warning }, warning)) }),
+    presets?.length ? /* @__PURE__ */ jsx2("div", { role: "group", "aria-label": labels.presets, className: "flex flex-wrap gap-2", children: presets.map((preset) => /* @__PURE__ */ jsx2(Button, { type: "button", size: "sm", variant: "outline", onClick: () => applyPreset(preset), children: preset.label }, preset.id)) }) : null,
+    /* @__PURE__ */ jsx2("div", { className: cx("grid grid-cols-1 gap-x-6", compact ? "gap-y-3" : "gap-y-5 sm:grid-cols-2"), children: textStyleFields.filter(shown).map((field) => /* @__PURE__ */ jsx2(React.Fragment, { children: controls[field]() }, field)) })
+  ] });
+}
+export {
+  StyledText,
+  TextStylePicker,
+  aligns,
+  bodyTextRatio,
+  cases,
+  contrastRatio,
+  defaultTextStyle,
+  fontIds,
+  fontWeights,
+  isLargeText,
+  largeTextRatio,
+  leadings,
+  parseColor,
+  parseTextStyle,
+  requiredContrast,
+  sizeSteps,
+  textStyleFields,
+  textStyleLabels,
+  textStyleLabelsFr,
+  textStyleProps,
+  textWeights,
+  toneIds,
+  trackings
+};
+//# sourceMappingURL=text-style.js.map

package/dist/text-style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cx.ts","../src/text-style/text-style.ts","../src/text-style/styled-text.tsx","../src/text-style/text-style-picker.tsx"],"sourcesContent":["/** Joins class names, skipping the falsy ones. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(\" \");\n}\n","// Server-safe (no hook, no React): the value of a text style, its validation and its CSS. A shop owner's choice is stored\n// by the app, so the value is plain data and its CSS is built from fixed tables of CSS variables — what comes from a\n// database never reaches a style sheet as text. The fonts are the curated roles of @krizaka/fonts (the product theme\n// says which family a role is), the sizes are the type scale's steps, the tones are the text roles and the brand hue.\nimport type { CSSProperties } from \"react\";\nimport * as z from \"zod/mini\";\n\n/** The curated families of `@krizaka/fonts`, by role: `display` (the headlines), `text` (reading), `mono` (the typewriter), `cahier` (the pen). */\nexport const fontIds = [\"display\", \"text\", \"mono\", \"cahier\"] as const;\nexport type FontId = (typeof fontIds)[number];\n\n/** The steps of the type scale, smallest to largest. Never pixels. */\nexport const sizeSteps = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\", \"3xl\", \"4xl\"] as const;\nexport type SizeStep = (typeof sizeSteps)[number];\n\nexport const textWeights = [400, 500, 600, 700] as const;\nexport type TextWeight = (typeof textWeights)[number];\n\nexport const leadings = [\"tight\", \"normal\", \"relaxed\"] as const;\nexport type Leading = (typeof leadings)[number];\n\nexport const trackings = [\"tight\", \"normal\", \"wide\"] as const;\nexport type Tracking = (typeof trackings)[number];\n\nexport const aligns = [\"start\", \"center\", \"end\"] as const;\nexport type Align = (typeof aligns)[number];\n\nexport const cases = [\"none\", \"upper\", \"small-caps\"] as const;\nexport type Case = (typeof cases)[number];\n\n/** The text roles of the tokens, and the brand hue. */\nexport const toneIds = [\"primary\", \"secondary\", \"muted\", \"accent\"] as const;\nexport type ToneId = (typeof toneIds)[number];\n\n/** A text style: what a shop owner chooses, stored as it is. */\nexport type TextStyle = {\n  font: FontId;\n  size: SizeStep;\n  weight: TextWeight;\n  leading: Leading;\n  tracking: Tracking;\n  align: Align;\n  case: Case;\n  italic: boolean;\n  tone: ToneId;\n};\n\n/** What `parseTextStyle` answers for anything that is not a text style. */\nexport const defaultTextStyle: Readonly<TextStyle> = Object.freeze({\n  font: \"text\",\n  size: \"md\",\n  weight: 400,\n  leading: \"normal\",\n  tracking: \"normal\",\n  align: \"start\",\n  case: \"none\",\n  italic: false,\n  tone: \"primary\",\n});\n\n/** The weights each face is cut in: a picker offers these, never a synthesised bold. */\nexport const fontWeights: Readonly<Record<FontId, readonly TextWeight[]>> = {\n  display: [400],\n  text: [400, 600, 700],\n  mono: [400, 700],\n  cahier: [500],\n};\n\nconst schema = z.object({\n  font: z.enum(fontIds),\n  size: z.enum(sizeSteps),\n  weight: z.union([z.literal(400), z.literal(500), z.literal(600), z.literal(700)]),\n  leading: z.enum(leadings),\n  tracking: z.enum(trackings),\n  align: z.enum(aligns),\n  case: z.enum(cases),\n  italic: z.boolean(),\n  tone: z.enum(toneIds),\n});\n\n/**\n * Validates what was stored (or sent): the text style, or `defaultTextStyle` for anything invalid — a free font name, a\n * hex colour, a pixel size, CSS text, a value that is not an object. Keys a text style does not have are dropped; keys it\n * lacks (a value stored before one was added) take their default. Usable on a server.\n */\nexport function parseTextStyle(input: unknown): TextStyle {\n  if (typeof input !== \"object\" || input === null || Array.isArray(input)) return { ...defaultTextStyle };\n  const own = Object.fromEntries(Object.entries(input).filter(([, v]) => v !== undefined));\n  const parsed = schema.safeParse({ ...defaultTextStyle, ...own });\n  return parsed.success ? { ...parsed.data } : { ...defaultTextStyle };\n}\n\nconst rem: Record<SizeStep, string> = { xs: \"0.75rem\", sm: \"0.875rem\", md: \"1rem\", lg: \"1.125rem\", xl: \"1.25rem\", \"2xl\": \"1.5rem\", \"3xl\": \"1.875rem\", \"4xl\": \"2.25rem\" };\nconst lineHeight: Record<Leading, string> = { tight: \"1.15\", normal: \"1.4\", relaxed: \"1.7\" };\nconst letterSpacing: Record<Tracking, string> = { tight: \"-0.02em\", normal: \"0em\", wide: \"0.08em\" };\nconst textAlign: Record<Align, CSSProperties[\"textAlign\"]> = { start: \"start\", center: \"center\", end: \"end\" };\nconst tone: Record<ToneId, string> = {\n  primary: \"var(--kz-text-primary)\",\n  secondary: \"var(--kz-text-secondary)\",\n  muted: \"var(--kz-text-muted)\",\n  accent: \"var(--kz-accent-text)\",\n};\n\n/** The CSS variable of a text role: the product theme's face for `display`, the preset's for the others. */\nexport const fontVariable: Readonly<Record<FontId, string>> = {\n  display: \"var(--kz-font-display)\",\n  text: \"var(--kz-font-text)\",\n  mono: \"var(--kz-font-mono)\",\n  cahier: \"var(--kz-font-cahier)\",\n};\n\n/** A step's size as a CSS value: `var(--kz-text-style-<step>, <rem>)` — a product may re-cut the scale with the variable. */\nexport const sizeVariable = (step: SizeStep): string => `var(--kz-text-style-${step}, ${rem[step]})`;\n\n/** A tone's colour as a CSS value: a role of the tokens. */\nexport const toneVariable = (id: ToneId): string => tone[id];\n\n/** The `className` and `style` that draw a text style. Built from fixed tables of CSS variables only. */\nexport function textStyleProps(style: unknown): { className: string; style: CSSProperties } {\n  const v = parseTextStyle(style);\n  return {\n    className: \"kz-text-style\",\n    style: {\n      fontFamily: fontVariable[v.font],\n      fontSize: sizeVariable(v.size),\n      fontWeight: v.weight,\n      lineHeight: `var(--kz-text-style-leading-${v.leading}, ${lineHeight[v.leading]})`,\n      letterSpacing: `var(--kz-text-style-tracking-${v.tracking}, ${letterSpacing[v.tracking]})`,\n      textAlign: textAlign[v.align],\n      textTransform: v.case === \"upper\" ? \"uppercase\" : \"none\",\n      fontVariantCaps: v.case === \"small-caps\" ? \"small-caps\" : \"normal\",\n      fontStyle: v.italic ? \"italic\" : \"normal\",\n      color: toneVariable(v.tone),\n    },\n  };\n}\n\n/** A colour read from the page, as `[r, g, b]` in 0–255, or `null` when it cannot be read (the check then says nothing). */\nexport function parseColor(text: string): [number, number, number] | null {\n  const value = text.trim().toLowerCase();\n  const hex = /^#([0-9a-f]{3,8})$/.exec(value)?.[1];\n  if (hex && [3, 4, 6, 8].includes(hex.length)) {\n    const full = hex.length <= 4 ? [...hex].map((c) => c + c).join(\"\") : hex;\n    return [0, 2, 4].map((i) => Number.parseInt(full.slice(i, i + 2), 16)) as [number, number, number];\n  }\n  const rgb = /^rgba?\\(([^)]+)\\)$/.exec(value)?.[1];\n  if (rgb) {\n    const parts = rgb.split(/[\\s,/]+/).filter(Boolean).slice(0, 3).map((p) => (p.endsWith(\"%\") ? (Number.parseFloat(p) / 100) * 255 : Number.parseFloat(p)));\n    return parts.length === 3 && parts.every(Number.isFinite) ? (parts as [number, number, number]) : null;\n  }\n  const srgb = /^color\\(srgb\\s+([^)]+)\\)$/.exec(value)?.[1];\n  if (srgb) {\n    const parts = srgb.split(/[\\s/]+/).filter(Boolean).slice(0, 3).map((p) => Number.parseFloat(p) * 255);\n    return parts.length === 3 && parts.every(Number.isFinite) ? (parts as [number, number, number]) : null;\n  }\n  return null;\n}\n\nconst channel = (c: number) => {\n  const s = Math.min(Math.max(c, 0), 255) / 255;\n  return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n};\nconst luminance = ([r, g, b]: [number, number, number]) => 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);\n\n/** The WCAG contrast ratio of two colours (1 – 21). */\nexport function contrastRatio(foreground: [number, number, number], background: [number, number, number]): number {\n  const a = luminance(foreground);\n  const b = luminance(background);\n  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);\n}\n\n/** The ratio WCAG asks of large text. */\nexport const largeTextRatio = 3;\n/** The ratio WCAG asks of body text. */\nexport const bodyTextRatio = 4.5;\n\n/** Large text for WCAG: 24 px and over, or bold from 18.66 px (`xl`, 20 px, in bold). */\nexport function isLargeText(style: Pick<TextStyle, \"size\" | \"weight\">): boolean {\n  const at = sizeSteps.indexOf(style.size);\n  return at >= sizeSteps.indexOf(\"2xl\") || (at >= sizeSteps.indexOf(\"xl\") && style.weight >= 700);\n}\n\n/** The ratio a style's text must reach on its surface. */\nexport const requiredContrast = (style: Pick<TextStyle, \"size\" | \"weight\">): number => (isLargeText(style) ? largeTextRatio : bodyTextRatio);\n\n/** True when body text in this step is under the minimum: a warning to show, never a size to force. */\nexport const isUnderMinimumSize = (size: SizeStep, minimum: SizeStep): boolean => sizeSteps.indexOf(size) < sizeSteps.indexOf(minimum);\n","// Server-safe: a text drawn with a stored text style. Whatever is passed as `value` goes through `parseTextStyle`.\nimport * as React from \"react\";\n\nimport { cx } from \"../cx\";\nimport { textStyleProps } from \"./text-style\";\n\nexport type StyledTextProps<T extends React.ElementType = \"p\"> = {\n  /** The element drawn: `h1`…`h6`, `p`, `span`, `div`. */\n  as?: T;\n  /** The stored text style — validated here: anything invalid draws the default. */\n  value?: unknown;\n  /** Merged after the style's own class. */\n  className?: string;\n  children?: React.ReactNode;\n} & Omit<React.ComponentPropsWithoutRef<T>, \"as\" | \"value\" | \"className\" | \"style\" | \"children\">;\n\n/** A text role drawn from a `TextStyle`: its font, size, weight, spacing, alignment, case and tone, all from CSS variables. */\nexport function StyledText<T extends React.ElementType = \"p\">({ as, value, className, children, ...rest }: StyledTextProps<T>) {\n  const Tag: React.ElementType = as ?? \"p\";\n  const props = textStyleProps(value);\n  return (\n    <Tag {...rest} className={cx(props.className, className)} style={props.style}>\n      {children}\n    </Tag>\n  );\n}\n","// Client (state, an observer). A control for the look of one text role — font, size, weight, spacing, alignment, case,\n// italic, tone — over the primitives: the font as a radio group whose options are drawn in their own face, the size as\n// a step slider, the choices as segmented radio groups, italic as a switch, the tone as swatches. It is controlled, shows\n// a live preview, and warns (never clamps) when the tone lacks contrast on the surface or body text is too small.\nimport { Button } from \"@krizaka/ui/button\";\nimport { RadioGroup } from \"@krizaka/ui/radio-group\";\nimport { Slider } from \"@krizaka/ui/slider\";\nimport { Switch } from \"@krizaka/ui/switch\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cx } from \"../cx\";\nimport { StyledText } from \"./styled-text\";\nimport {\n  type Align,\n  aligns,\n  type Case,\n  cases,\n  contrastRatio,\n  type FontId,\n  fontIds,\n  fontVariable,\n  fontWeights,\n  isUnderMinimumSize,\n  type Leading,\n  leadings,\n  parseColor,\n  parseTextStyle,\n  type SizeStep,\n  sizeSteps,\n  type TextStyle,\n  type TextWeight,\n  textWeights,\n  type ToneId,\n  toneIds,\n  toneVariable,\n  type Tracking,\n  trackings,\n} from \"./text-style\";\n\n/** The controls of the picker, in the order they are drawn. */\nexport const textStyleFields = [\"font\", \"size\", \"weight\", \"leading\", \"tracking\", \"align\", \"case\", \"italic\", \"tone\"] as const;\nexport type TextStyleField = (typeof textStyleFields)[number];\n\nexport type TextStyleLabels = {\n  /** The name of the whole control. */\n  picker: string;\n  font: string;\n  size: string;\n  weight: string;\n  leading: string;\n  tracking: string;\n  align: string;\n  case: string;\n  italic: string;\n  tone: string;\n  presets: string;\n  preview: string;\n  fonts: Record<FontId, string>;\n  weights: Record<TextWeight, string>;\n  leadings: Record<Leading, string>;\n  trackings: Record<Tracking, string>;\n  aligns: Record<Align, string>;\n  cases: Record<Case, string>;\n  tones: Record<ToneId, string>;\n  /** The contrast warning: `{ratio}` is what the tone reaches, `{min}` what it must. */\n  contrastWarning: string;\n  /** The small-text warning: `{size}` is the smallest step advised for body text. */\n  minSizeWarning: string;\n};\n\n/** The English words. */\nexport const textStyleLabels: TextStyleLabels = {\n  picker: \"Text style\",\n  font: \"Font\",\n  size: \"Size\",\n  weight: \"Weight\",\n  leading: \"Line height\",\n  tracking: \"Letter spacing\",\n  align: \"Alignment\",\n  case: \"Case\",\n  italic: \"Italic\",\n  tone: \"Colour\",\n  presets: \"Presets\",\n  preview: \"Preview\",\n  fonts: { display: \"Display\", text: \"Text\", mono: \"Typewriter\", cahier: \"Pen\" },\n  weights: { 400: \"Regular\", 500: \"Medium\", 600: \"Semibold\", 700: \"Bold\" },\n  leadings: { tight: \"Tight\", normal: \"Normal\", relaxed: \"Relaxed\" },\n  trackings: { tight: \"Tight\", normal: \"Normal\", wide: \"Wide\" },\n  aligns: { start: \"Start\", center: \"Centre\", end: \"End\" },\n  cases: { none: \"Aa\", upper: \"AA\", \"small-caps\": \"Small caps\" },\n  tones: { primary: \"Primary\", secondary: \"Secondary\", muted: \"Muted\", accent: \"Accent\" },\n  contrastWarning: \"This colour reaches only {ratio}:1 on the background; {min}:1 is needed to read it comfortably.\",\n  minSizeWarning: \"Body text under “{size}” is hard to read.\",\n};\n\n/** The French words. */\nexport const textStyleLabelsFr: TextStyleLabels = {\n  picker: \"Style du texte\",\n  font: \"Police\",\n  size: \"Taille\",\n  weight: \"Graisse\",\n  leading: \"Interligne\",\n  tracking: \"Espacement des lettres\",\n  align: \"Alignement\",\n  case: \"Casse\",\n  italic: \"Italique\",\n  tone: \"Couleur\",\n  presets: \"Préréglages\",\n  preview: \"Aperçu\",\n  fonts: { display: \"Titre\", text: \"Texte\", mono: \"Machine à écrire\", cahier: \"Stylo\" },\n  weights: { 400: \"Normal\", 500: \"Moyen\", 600: \"Demi-gras\", 700: \"Gras\" },\n  leadings: { tight: \"Serré\", normal: \"Normal\", relaxed: \"Aéré\" },\n  trackings: { tight: \"Serré\", normal: \"Normal\", wide: \"Large\" },\n  aligns: { start: \"Début\", center: \"Centré\", end: \"Fin\" },\n  cases: { none: \"Aa\", upper: \"AA\", \"small-caps\": \"Petites capitales\" },\n  tones: { primary: \"Principale\", secondary: \"Secondaire\", muted: \"Discrète\", accent: \"Accent\" },\n  contrastWarning: \"Cette couleur n’atteint que {ratio}:1 sur le fond ; {min}:1 est nécessaire pour la lire confortablement.\",\n  minSizeWarning: \"Un texte courant sous « {size} » se lit mal.\",\n};\n\nexport type TextStylePreset = {\n  /** A stable key. */\n  id: string;\n  /** The name on the button, passed translated (« Titre », « Prix »…). */\n  label: string;\n  /** The style it applies; what it does not say takes the default. Validated when applied. */\n  value: Partial<TextStyle>;\n};\n\nexport type TextStylePickerProps = {\n  /** The text style, controlled. Validated by `parseTextStyle`: anything invalid shows the default. */\n  value: TextStyle;\n  /** Called with the whole new text style at each change. */\n  onChange: (value: TextStyle) => void;\n  /** The sample the preview shows, passed translated (\"Boulangerie Martin\"). */\n  previewText: string;\n  /** Styles the person can start from, as data. */\n  presets?: readonly TextStylePreset[];\n  /** The controls to show, in the order of `textStyleFields` (just `[\"font\", \"size\"]`). A preset then changes only these. */\n  fields?: readonly TextStyleField[];\n  /** A denser form for a popover from a toolbar. */\n  compact?: boolean;\n  /** The words, passed translated: `textStyleLabels` (EN) or `textStyleLabelsFr`, or the host's own. */\n  labels?: Partial<TextStyleLabels>;\n  /** The colour the text will sit on, for the preview and the contrast check (a CSS colour). By default the page's own surface. */\n  surface?: string;\n  /**\n   * What the text is for: `body` (reading text, which `minBodySize` guards) or `title` (a heading, which may be small).\n   * @default \"body\"\n   */\n  role?: \"body\" | \"title\";\n  /**\n   * The smallest step advised for body text: under it, a warning shows — the size is never forced.\n   * @default \"sm\"\n   */\n  minBodySize?: SizeStep;\n  /** Merged last on the root. */\n  className?: string;\n};\n\ntype Rgb = [number, number, number];\ntype Rgba = [number, number, number, number];\n\nfunction parseColorWithAlpha(text: string): Rgba | null {\n  const value = text.trim().toLowerCase();\n  if (value === \"transparent\") return [0, 0, 0, 0];\n  const color = parseColor(value);\n  if (!color) return null;\n\n  const hex = /^#([0-9a-f]{4}|[0-9a-f]{8})$/.exec(value)?.[1];\n  if (hex) {\n    const alpha = hex.length === 4 ? Number.parseInt(hex[3]! + hex[3]!, 16) : Number.parseInt(hex.slice(6, 8), 16);\n    return [...color, alpha / 255];\n  }\n\n  const components =\n    /^rgba?\\(([^)]+)\\)$/.exec(value)?.[1] ??\n    /^color\\(srgb\\s+([^)]+)\\)$/.exec(value)?.[1];\n  if (!components) return [...color, 1];\n\n  const [channels, slashAlpha] = components.split(\"/\");\n  const parts = channels!.trim().split(/[\\s,]+/).filter(Boolean);\n  const alpha = slashAlpha?.trim() ?? (parts.length === 4 ? parts[3] : undefined);\n  if (alpha === undefined) return [...color, 1];\n  const parsed = alpha.endsWith(\"%\") ? Number.parseFloat(alpha) / 100 : Number.parseFloat(alpha);\n  return Number.isFinite(parsed) && parsed >= 0 && parsed <= 1 ? [...color, parsed] : null;\n}\n\nconst over = (foreground: Rgba, background: Rgba): Rgba => {\n  const alpha = foreground[3] + background[3] * (1 - foreground[3]);\n  if (alpha === 0) return [0, 0, 0, 0];\n  return [\n    (foreground[0] * foreground[3] + background[0] * background[3] * (1 - foreground[3])) / alpha,\n    (foreground[1] * foreground[3] + background[1] * background[3] * (1 - foreground[3])) / alpha,\n    (foreground[2] * foreground[3] + background[2] * background[3] * (1 - foreground[3])) / alpha,\n    alpha,\n  ];\n};\n\n/** The composited colour behind an element, or null when a background layer cannot be read. */\nfunction surfaceOf(element: HTMLElement): Rgb | null {\n  const layers: HTMLElement[] = [];\n  for (let node: HTMLElement | null = element; node; node = node.parentElement) {\n    layers.push(node);\n    if (node === document.documentElement) break;\n  }\n  let background: Rgba = [0, 0, 0, 0];\n  for (const node of layers.reverse()) {\n    const color = window.getComputedStyle(node).backgroundColor;\n    const layer: Rgba | null = color ? parseColorWithAlpha(color) : [0, 0, 0, 0];\n    if (!layer) return null;\n    background = over(layer, background);\n  }\n  return background[3] >= 1 ? [background[0], background[1], background[2]] : null;\n}\n\n/** What the tone reaches on its surface, measured on the preview as it is drawn (the theme and the product's tokens included). */\nfunction useContrast(ref: React.RefObject<HTMLElement | null>, key: string): { ratio: number; required: number } | null {\n  const [measurement, setMeasurement] = React.useState<{ ratio: number; required: number } | null>(null);\n  React.useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    const measure = () => {\n      const sample = element.querySelector<HTMLElement>(\"[data-text-style-sample]\") ?? element;\n      const computed = window.getComputedStyle(sample);\n      const foreground = parseColor(computed.color);\n      const background = surfaceOf(sample);\n      const fontSize = Number.parseFloat(computed.fontSize);\n      const fontWeight = Number.parseFloat(computed.fontWeight);\n      const required = fontSize >= 24 || (fontSize >= 18.66 && fontWeight >= 700) ? 3 : 4.5;\n      setMeasurement(foreground && background && Number.isFinite(fontSize) && Number.isFinite(fontWeight) ? { ratio: contrastRatio(foreground, background), required } : null);\n    };\n    measure();\n    if (typeof MutationObserver === \"undefined\") return;\n    const observer = new MutationObserver(measure);\n    for (let node: HTMLElement | null = element; node; node = node.parentElement) {\n      observer.observe(node, { attributes: true, attributeFilter: [\"class\", \"style\", \"data-theme\"] });\n      if (node === document.documentElement) break;\n    }\n    return () => observer.disconnect();\n  }, [ref, key]);\n  return measurement;\n}\n\nconst nearest = (weights: readonly TextWeight[], weight: TextWeight): TextWeight =>\n  weights.reduce((best, w) => (Math.abs(w - weight) < Math.abs(best - weight) ? w : best), weights[0]!);\n\n/** The control of a text style: font, size, weight, spacing, alignment, case, italic and tone, with a live preview. */\nexport function TextStylePicker({\n  value,\n  onChange,\n  previewText,\n  presets,\n  fields = textStyleFields,\n  compact,\n  labels: given,\n  surface,\n  role = \"body\",\n  minBodySize = \"sm\",\n  className,\n}: TextStylePickerProps) {\n  const labels = { ...textStyleLabels, ...given };\n  const style = parseTextStyle(value);\n  const shown = (field: TextStyleField) => fields.includes(field);\n  const id = React.useId();\n  const previewRef = React.useRef<HTMLDivElement>(null);\n  const measurement = useContrast(previewRef, `${style.font}|${style.size}|${style.weight}|${style.tone}|${surface ?? \"\"}`);\n\n  const set = (patch: Partial<TextStyle>) => onChange(parseTextStyle({ ...style, ...patch }));\n  const setFont = (font: FontId) => set({ font, weight: nearest(fontWeights[font], style.weight) });\n  const applyPreset = (preset: TextStylePreset) => {\n    const next = parseTextStyle(preset.value);\n    const patch = Object.fromEntries(textStyleFields.filter(shown).map((f) => [f, next[f]])) as Partial<TextStyle>;\n    if (patch.font !== undefined || patch.weight !== undefined) {\n      const font = patch.font ?? style.font;\n      const weight = patch.weight ?? style.weight;\n      set({ ...patch, weight: nearest(fontWeights[font], weight) });\n    } else {\n      set(patch);\n    }\n  };\n\n  const warnings: string[] = [];\n  if (measurement && measurement.ratio < measurement.required) {\n    warnings.push(labels.contrastWarning.replace(\"{ratio}\", measurement.ratio.toFixed(1)).replace(\"{min}\", String(measurement.required)));\n  }\n  if (role === \"body\" && isUnderMinimumSize(style.size, minBodySize)) warnings.push(labels.minSizeWarning.replace(\"{size}\", minBodySize));\n\n  const group = (field: TextStyleField, title: string, control: React.ReactNode, className?: string) => (\n    <div key={field} className={cx(\"flex min-w-0 flex-col gap-2\", className)} data-field={field}>\n      <span id={`${id}-${field}`} className=\"text-xs font-semibold text-fg-secondary\">\n        {title}\n      </span>\n      {control}\n    </div>\n  );\n  const segmented = <T extends string | number>(field: TextStyleField, title: string, items: readonly T[], current: T, text: (item: T) => string, choose: (item: T) => void, disabled?: (item: T) => boolean) =>\n    group(\n      field,\n      title,\n      <RadioGroup.Root variant=\"segmented\" aria-labelledby={`${id}-${field}`} value={String(current)} onValueChange={(next) => choose(items.find((item) => String(item) === next)!)} className=\"w-full max-w-full\">\n        {items.map((item) => (\n          <RadioGroup.Segment key={item} value={String(item)} disabled={disabled?.(item)} className=\"min-w-0 px-1 text-xs\">\n            {text(item)}\n          </RadioGroup.Segment>\n        ))}\n      </RadioGroup.Root>,\n      \"sm:col-span-2\",\n    );\n\n  const controls: Record<TextStyleField, () => React.ReactNode> = {\n    font: () =>\n      group(\n        \"font\",\n        labels.font,\n        <RadioGroup.Root variant=\"cards\" aria-labelledby={`${id}-font`} value={style.font} onValueChange={(next) => setFont(next as FontId)} className=\"grid-cols-[repeat(auto-fit,minmax(9rem,1fr))]\">\n          {fontIds.map((font) => (\n            <RadioGroup.Card key={font} value={font} style={{ fontFamily: fontVariable[font] }}>\n              {labels.fonts[font]}\n            </RadioGroup.Card>\n          ))}\n        </RadioGroup.Root>,\n      ),\n    size: () =>\n      group(\n        \"size\",\n        labels.size,\n        <Slider\n          label={labels.size}\n          min={0}\n          max={sizeSteps.length - 1}\n          step={1}\n          ticks\n          value={sizeSteps.indexOf(style.size)}\n          onValueChange={(index) => set({ size: sizeSteps[index]! })}\n          formatValue={(index) => sizeSteps[index]!}\n          floatingValue\n        />,\n      ),\n    weight: () => segmented(\"weight\", labels.weight, textWeights, style.weight, (w) => labels.weights[w], (weight) => set({ weight }), (w) => !fontWeights[style.font].includes(w)),\n    leading: () => segmented(\"leading\", labels.leading, leadings, style.leading, (l) => labels.leadings[l], (leading) => set({ leading })),\n    tracking: () => segmented(\"tracking\", labels.tracking, trackings, style.tracking, (t) => labels.trackings[t], (tracking) => set({ tracking })),\n    align: () => segmented(\"align\", labels.align, aligns, style.align, (a) => labels.aligns[a], (align) => set({ align })),\n    case: () => segmented(\"case\", labels.case, cases, style.case, (c) => labels.cases[c], (next) => set({ case: next })),\n    italic: () => (\n      <div key=\"italic\" className=\"flex min-w-0 items-center justify-between gap-3\" data-field=\"italic\">\n        <span id={`${id}-italic`} className=\"text-xs font-semibold text-fg-secondary\">\n          {labels.italic}\n        </span>\n        <Switch aria-labelledby={`${id}-italic`} checked={style.italic} onCheckedChange={(italic) => set({ italic })} />\n      </div>\n    ),\n    tone: () =>\n      group(\n        \"tone\",\n        labels.tone,\n        <RadioGroupPrimitive.Root aria-labelledby={`${id}-tone`} value={style.tone} onValueChange={(next) => set({ tone: next as ToneId })} orientation=\"horizontal\" className=\"flex flex-wrap gap-3\">\n          {toneIds.map((tone) => (\n            <RadioGroupPrimitive.Item\n              key={tone}\n              value={tone}\n              aria-label={labels.tones[tone]}\n              title={labels.tones[tone]}\n              style={{ backgroundColor: toneVariable(tone) }}\n              className=\"h-8 w-8 rounded-full border border-border-strong focus-visible:outline-hidden focus-visible:focus-ring data-[state=checked]:ring-2 data-[state=checked]:ring-accent data-[state=checked]:ring-offset-2 data-[state=checked]:ring-offset-surface-0\"\n            />\n          ))}\n        </RadioGroupPrimitive.Root>,\n      ),\n  };\n\n  return (\n    <div role=\"group\" aria-label={labels.picker} data-compact={compact ? \"\" : undefined} className={cx(\"flex min-w-0 flex-col\", compact ? \"gap-3\" : \"gap-5\", className)}>\n      <div\n        ref={previewRef}\n        data-preview=\"\"\n        aria-label={labels.preview}\n        role=\"group\"\n        style={surface ? { backgroundColor: surface } : undefined}\n        className={cx(\"min-w-0 overflow-hidden rounded-xl border border-border-default\", surface ? \"\" : \"bg-surface-1\", compact ? \"p-3\" : \"p-5\")}\n      >\n        <StyledText as=\"p\" value={style} className=\"break-words\" data-text-style-sample=\"\">\n          {previewText}\n        </StyledText>\n      </div>\n      <div role=\"status\" aria-live=\"polite\" data-warnings=\"\">\n        {warnings.map((warning) => (\n          <p key={warning} className=\"text-xs font-medium text-fg-warning\">\n            {warning}\n          </p>\n        ))}\n      </div>\n      {presets?.length ? (\n        <div role=\"group\" aria-label={labels.presets} className=\"flex flex-wrap gap-2\">\n          {presets.map((preset) => (\n            <Button key={preset.id} type=\"button\" size=\"sm\" variant=\"outline\" onClick={() => applyPreset(preset)}>\n              {preset.label}\n            </Button>\n          ))}\n        </div>\n      ) : null}\n      <div className={cx(\"grid grid-cols-1 gap-x-6\", compact ? \"gap-y-3\" : \"gap-y-5 sm:grid-cols-2\")}>\n        {textStyleFields.filter(shown).map((field) => (\n          <React.Fragment key={field}>{controls[field]()}</React.Fragment>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","alpha","className","tone"]}