@krizaka/ui 3.51.0 → 3.52.0

package/dist/text-style/server.d.ts

@@ -0,0 +1,63 @@
+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;
+};
+
+export { type Align, type Case, type FontId, type Leading, type SizeStep, StyledText, type StyledTextProps, type TextStyle, type TextWeight, type ToneId, type Tracking, aligns, cases, defaultTextStyle, fontIds, fontWeights, leadings, parseTextStyle, sizeSteps, textStyleProps, textWeights, toneIds, trackings };

package/dist/text-style/server.js

@@ -0,0 +1,109 @@
+// 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)
+    }
+  };
+}
+
+// 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 });
+}
+export {
+  StyledText,
+  aligns,
+  cases,
+  defaultTextStyle,
+  fontIds,
+  fontWeights,
+  leadings,
+  parseTextStyle,
+  sizeSteps,
+  textStyleProps,
+  textWeights,
+  toneIds,
+  trackings
+};
+//# sourceMappingURL=server.js.map

package/dist/text-style/server.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/cx.ts","../../src/text-style/text-style.ts","../../src/text-style/styled-text.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"],"mappings":";AACO,SAAS,MAAM,OAAyD;AAC7E,SAAO,MAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AACvC;;;ACEA,YAAY,OAAO;AAGZ,IAAM,UAAU,CAAC,WAAW,QAAQ,QAAQ,QAAQ;AAIpD,IAAM,YAAY,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,OAAO,OAAO,KAAK;AAGpE,IAAM,cAAc,CAAC,KAAK,KAAK,KAAK,GAAG;AAGvC,IAAM,WAAW,CAAC,SAAS,UAAU,SAAS;AAG9C,IAAM,YAAY,CAAC,SAAS,UAAU,MAAM;AAG5C,IAAM,SAAS,CAAC,SAAS,UAAU,KAAK;AAGxC,IAAM,QAAQ,CAAC,QAAQ,SAAS,YAAY;AAI5C,IAAM,UAAU,CAAC,WAAW,aAAa,SAAS,QAAQ;AAiB1D,IAAM,mBAAwC,OAAO,OAAO;AAAA,EACjE,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAGM,IAAM,cAA+D;AAAA,EAC1E,SAAS,CAAC,GAAG;AAAA,EACb,MAAM,CAAC,KAAK,KAAK,GAAG;AAAA,EACpB,MAAM,CAAC,KAAK,GAAG;AAAA,EACf,QAAQ,CAAC,GAAG;AACd;AAEA,IAAM,SAAW,SAAO;AAAA,EACtB,MAAQ,OAAK,OAAO;AAAA,EACpB,MAAQ,OAAK,SAAS;AAAA,EACtB,QAAU,QAAM,CAAG,UAAQ,GAAG,GAAK,UAAQ,GAAG,GAAK,UAAQ,GAAG,GAAK,UAAQ,GAAG,CAAC,CAAC;AAAA,EAChF,SAAW,OAAK,QAAQ;AAAA,EACxB,UAAY,OAAK,SAAS;AAAA,EAC1B,OAAS,OAAK,MAAM;AAAA,EACpB,MAAQ,OAAK,KAAK;AAAA,EAClB,QAAU,UAAQ;AAAA,EAClB,MAAQ,OAAK,OAAO;AACtB,CAAC;AAOM,SAAS,eAAe,OAA2B;AACxD,MAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,MAAM,QAAQ,KAAK,EAAG,QAAO,EAAE,GAAG,iBAAiB;AACtG,QAAM,MAAM,OAAO,YAAY,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,MAAM,MAAM,MAAS,CAAC;AACvF,QAAM,SAAS,OAAO,UAAU,EAAE,GAAG,kBAAkB,GAAG,IAAI,CAAC;AAC/D,SAAO,OAAO,UAAU,EAAE,GAAG,OAAO,KAAK,IAAI,EAAE,GAAG,iBAAiB;AACrE;AAEA,IAAM,MAAgC,EAAE,IAAI,WAAW,IAAI,YAAY,IAAI,QAAQ,IAAI,YAAY,IAAI,WAAW,OAAO,UAAU,OAAO,YAAY,OAAO,UAAU;AACvK,IAAM,aAAsC,EAAE,OAAO,QAAQ,QAAQ,OAAO,SAAS,MAAM;AAC3F,IAAM,gBAA0C,EAAE,OAAO,WAAW,QAAQ,OAAO,MAAM,SAAS;AAClG,IAAM,YAAuD,EAAE,OAAO,SAAS,QAAQ,UAAU,KAAK,MAAM;AAC5G,IAAM,OAA+B;AAAA,EACnC,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AACV;AAGO,IAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AACV;AAGO,IAAM,eAAe,CAAC,SAA2B,uBAAuB,IAAI,KAAK,IAAI,IAAI,CAAC;AAG1F,IAAM,eAAe,CAAC,OAAuB,KAAK,EAAE;AAGpD,SAAS,eAAe,OAA6D;AAC1F,QAAM,IAAI,eAAe,KAAK;AAC9B,SAAO;AAAA,IACL,WAAW;AAAA,IACX,OAAO;AAAA,MACL,YAAY,aAAa,EAAE,IAAI;AAAA,MAC/B,UAAU,aAAa,EAAE,IAAI;AAAA,MAC7B,YAAY,EAAE;AAAA,MACd,YAAY,+BAA+B,EAAE,OAAO,KAAK,WAAW,EAAE,OAAO,CAAC;AAAA,MAC9E,eAAe,gCAAgC,EAAE,QAAQ,KAAK,cAAc,EAAE,QAAQ,CAAC;AAAA,MACvF,WAAW,UAAU,EAAE,KAAK;AAAA,MAC5B,eAAe,EAAE,SAAS,UAAU,cAAc;AAAA,MAClD,iBAAiB,EAAE,SAAS,eAAe,eAAe;AAAA,MAC1D,WAAW,EAAE,SAAS,WAAW;AAAA,MACjC,OAAO,aAAa,EAAE,IAAI;AAAA,IAC5B;AAAA,EACF;AACF;;;AClHI;AAJG,SAAS,WAA8C,EAAE,IAAI,OAAO,WAAW,UAAU,GAAG,KAAK,GAAuB;AAC7H,QAAM,MAAyB,MAAM;AACrC,QAAM,QAAQ,eAAe,KAAK;AAClC,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,MAAM,WAAW,SAAS,GAAG,OAAO,MAAM,OACpE,UACH;AAEJ;","names":[]}

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 };