@supertype.ai/foundations 0.1.32 → 0.1.33

package/README.md

@@ -66,7 +66,7 @@ untagged git dependency resolves to a different commit on a fresh install.
 
 ```jsonc
 // package.json
-"@supertype.ai/foundations": "https://github.com/supertypeai/foundations.git#v0.1.32"
+"@supertype.ai/foundations": "https://github.com/supertypeai/foundations.git#v0.1.33"
 ```
 
 </details>

package/dist/typography/header.d.ts

@@ -54,7 +54,8 @@ export declare function TypographyH3({ className, variant, children, ...props }:
 /** The card / panel title: 14px in the product, 20 on an editorial surface. */
 export declare function TypographyH4({ className, children, ...props }: React.ComponentProps<"h4">): import("react").JSX.Element;
 declare const eyebrowVariants: (props?: ({
-    tone?: "label" | "heading" | null | undefined;
+    tone?: "muted" | "label" | "heading" | "subtle" | null | undefined;
+    size?: "sm" | "xs" | "2xs" | "3xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * The eyebrow's ramp as a class, for a caller that cannot render our element —
@@ -62,7 +63,7 @@ declare const eyebrowVariants: (props?: ({
  * `headingClass`. It exists so a consumer needing the class can take ours rather
  * than hand-rolling a copy that drifts from the component.
  */
-export declare const eyebrowClass: (tone?: VariantProps<typeof eyebrowVariants>["tone"]) => string;
+export declare const eyebrowClass: (tone?: VariantProps<typeof eyebrowVariants>["tone"], size?: VariantProps<typeof eyebrowVariants>["size"]) => string;
 /**
  * An all-caps micro-label above a stat or a group of controls, and — since the
  * deck was folded into it — the standfirst that sits with a page title.
@@ -70,5 +71,5 @@ export declare const eyebrowClass: (tone?: VariantProps<typeof eyebrowVariants>[
  * `as` covers the case the span cannot: an eyebrow that is also the section's
  * heading. See `TypographyTag` in as.tsx for why the classes hold across tags.
  */
-export declare function TypographyEyebrow({ className, tone, as, children, ...props }: WithAs<VariantProps<typeof eyebrowVariants>>): import("react").JSX.Element;
+export declare function TypographyEyebrow({ className, tone, size, as, children, ...props }: WithAs<VariantProps<typeof eyebrowVariants>>): import("react").JSX.Element;
 export {};

package/dist/typography/header.js

@@ -92,15 +92,32 @@ export function TypographyH4({ className, children, ...props }) {
 }
 const eyebrowVariants = cva("block uppercase tracking-wider", {
     variants: {
+        /** Ink and weight. Every tone states its ink: an eyebrow names the section
+         *  under it, and one that takes its colour from its surroundings is not a
+         *  heading. Weight is load-bearing too, since caps at this size lose their
+         *  shape at 400. */
         tone: {
-            /**
-             * Weight is load-bearing here: uppercase at this size loses shape at 400.
-             * Primary ink, stated not inherited — an eyebrow names the section under it,
-             * and one that turns red from its surroundings is not a heading.
-             */
             heading: "text-xs font-semibold text-[color:var(--ink,var(--foreground))]",
             /** Stat cards invert it: the figure is the headline, so the label yields. */
             label: "text-2xs font-medium text-accent-foreground",
+            /** The dense product default: a micro-label over a group of controls,
+             *  quiet enough that the rows under it stay the thing being read. */
+            muted: "text-2xs font-medium text-[color:var(--ink-muted,var(--muted-foreground))]",
+            /** A rung quieter again, for a label the reader only needs on the way past:
+             *  a column head in a mock, a rail marker, a key in a spec table. */
+            subtle: "text-2xs font-medium text-subtle-foreground",
+        },
+        /**
+         * The rung, when the tone's own is wrong for the surface — a dense table head
+         * wants the smallest one, a page standfirst the largest. Declared after the
+         * tone so the merge keeps this one, and omitted it leaves the tone's rung
+         * standing, which is what every existing call site relies on.
+         */
+        size: {
+            sm: "text-sm",
+            xs: "text-xs",
+            "2xs": "text-2xs",
+            "3xs": "text-3xs",
         },
     },
     defaultVariants: { tone: "heading" },
@@ -111,7 +128,7 @@ const eyebrowVariants = cva("block uppercase tracking-wider", {
  * `headingClass`. It exists so a consumer needing the class can take ours rather
  * than hand-rolling a copy that drifts from the component.
  */
-export const eyebrowClass = (tone) => eyebrowVariants({ tone });
+export const eyebrowClass = (tone, size) => eyebrowVariants({ tone, size });
 /**
  * An all-caps micro-label above a stat or a group of controls, and — since the
  * deck was folded into it — the standfirst that sits with a page title.
@@ -119,6 +136,6 @@ export const eyebrowClass = (tone) => eyebrowVariants({ tone });
  * `as` covers the case the span cannot: an eyebrow that is also the section's
  * heading. See `TypographyTag` in as.tsx for why the classes hold across tags.
  */
-export function TypographyEyebrow({ className, tone, as, children, ...props }) {
-    return (_jsx(TextAs, { as: as, className: cn(eyebrowVariants({ tone }), className), ...props, children: children }));
+export function TypographyEyebrow({ className, tone, size, as, children, ...props }) {
+    return (_jsx(TextAs, { as: as, className: cn(eyebrowVariants({ tone, size }), className), ...props, children: children }));
 }

package/dist/typography/paragraph.d.ts

@@ -55,10 +55,11 @@ export declare function TypographyProseList(props: Preset<ListProps, typeof PROS
  * `sm` is the default because meta is separated from body by ink, not size;
  * the smaller rungs are a deliberate step down, not the norm.
  *
- * Leading is pinned per size rather than left to the rung. Plenty of captions
- * are a wrapped sentence, and the ramp's tight setting sets those cramped —
- * descenders nearly on the caps below. `leading-normal` writes `--tw-leading`,
- * the variable the `text-*` step reads, so 1.5 wins at every rung.
+ * The two upper rungs open their leading past the ramp: plenty of captions are
+ * a wrapped sentence, and the ramp sets those cramped at reading rungs. The
+ * micro rung keeps whatever the ramp gives it, which is already tuned tight —
+ * half again the glyph height at 11px reads as a stray gap under a one-line
+ * note, and it is the rung the labels beside it are set on.
  *
  * `inherit` is the parenthetical inside a heading, an eyebrow or a stat. It
  * takes the size of whatever set it and resets the weight, because the only

package/dist/typography/paragraph.js

@@ -86,10 +86,11 @@ export function TypographyProseList(props) {
  * `sm` is the default because meta is separated from body by ink, not size;
  * the smaller rungs are a deliberate step down, not the norm.
  *
- * Leading is pinned per size rather than left to the rung. Plenty of captions
- * are a wrapped sentence, and the ramp's tight setting sets those cramped —
- * descenders nearly on the caps below. `leading-normal` writes `--tw-leading`,
- * the variable the `text-*` step reads, so 1.5 wins at every rung.
+ * The two upper rungs open their leading past the ramp: plenty of captions are
+ * a wrapped sentence, and the ramp sets those cramped at reading rungs. The
+ * micro rung keeps whatever the ramp gives it, which is already tuned tight —
+ * half again the glyph height at 11px reads as a stray gap under a one-line
+ * note, and it is the rung the labels beside it are set on.
  *
  * `inherit` is the parenthetical inside a heading, an eyebrow or a stat. It
  * takes the size of whatever set it and resets the weight, because the only
@@ -101,7 +102,7 @@ const captionVariants = cva("text-[color:var(--ink-muted,var(--muted-foreground)
         size: {
             sm: "text-sm leading-normal",
             xs: "text-xs leading-normal",
-            "2xs": "text-2xs leading-normal",
+            "2xs": "text-2xs",
             inherit: "font-normal",
         },
     },

package/llms.txt

@@ -90,7 +90,7 @@ silently. Full reference: https://github.com/supertypeai/foundations
 - `TypographyMuted`, `TypographyProse`, `TypographyProseList` are presets. The
   prop each one pins is dropped from its type, so passing it fails to compile.
 - `TypographyCaption`, `TypographyLabel`, `TypographySmall`: `size?: "sm" | "xs" | "2xs" | "inherit"`, `as?`.
-- `TypographyEyebrow`: `tone?: "heading" | "label"`, `as?`.
+- `TypographyEyebrow`: `tone?: "heading" | "label" | "muted" | "subtle"`, `size?: "sm" | "xs" | "2xs" | "3xs"`, `as?`. Each tone carries the rung it is usually set at and `size` overrides it, so omitting it changes nothing. Reach for `muted` for the uppercase micro-label a dense product sets over a group of controls, and `subtle` for a column head or rail marker read on the way past — that shape hand-rolled is the most common way an app ends up spelling type classes.
 - `TypographyStat`: `size?: "inherit" | "card" | "panel" | "page" | "display"`, `figures?: "tabular" | "proportional"`. Keep tabular where a value updates in place.
 - `TypographyLink`: `href` (required), `tone?: Tone` (default `muted`), `addArrow?`, `newTab?`. The href decides internal versus external.
 - `TypographyHighlight`: `tone?: HighlightTone`, one of `"primary" | "success" | "ochre" | "terracotta" | "sage" | "fig"`, plus `seed?: number`. A separate type from `Tone` on purpose: this axis is categorical (which one it is) where `Tone` is semantic (what it means), the same split theme.css draws between the earth swatches and the status tokens.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supertype.ai/foundations",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "license": "MIT",
   "publishConfig": {
     "access": "public",