@supertype.ai/foundations 0.1.31 → 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.31"
+"@supertype.ai/foundations": "https://github.com/supertypeai/foundations.git#v0.1.33"
 ```
 
 </details>

package/dist/blocks/button.js

@@ -62,7 +62,7 @@ cn(FOCUS_RING, "focus-visible:border-ring"), "active:not-aria-[haspopup]:transla
         variant: {
             solid: `bg-(--tone-fill) text-(color:--tone-ink) hover:bg-(--tone-fill-hover) ${INK_ON_FILL}`,
             soft: "bg-(--tone-wash) text-(color:--tone-hue) hover:bg-(--tone-wash-hover)",
-            outline: "border-(color:--tone-line) bg-background text-(color:--tone-hue) hover:bg-(--tone-wash)",
+            outline: "border-(color:--tone-line) text-(color:--tone-hue) hover:bg-(--tone-wash)",
             ghost: "text-(color:--tone-hue) hover:bg-(--tone-wash)",
             // No box of its own: a button that reads as a link has to sit on the
             // text baseline, not on a 32px control's centre line.

package/dist/blocks/callout.js

@@ -12,6 +12,10 @@ import { TypographyCaption, TypographyLabel, TypographyMuted, TypographySmall, }
 // already drifted on the radius. Hand-rolled type styles are also exactly what the project's own
 // guidance forbids, and six copies is how a rule like that gets broken without anyone deciding to.
 //
+// The body is a slot, so it renders as a div in both densities. A caller passes a list, a
+// pair of paragraphs or a mono block of delivery errors, none of which may sit inside a <p>:
+// the parser closes it early and React reports a hydration error on a callout that looks fine.
+//
 // Deliberately not a shadcn Alert. Alert is a page-level, role="alert" affordance for something
 // that just happened; these are quiet, permanent explanations sitting inside a panel, and they
 // must not announce themselves to a screen reader every time a sheet opens.
@@ -30,7 +34,7 @@ const BOX = "border-(color:--tone-line) bg-(--tone-veil)";
 export function Callout({ icon: Icon, title, tone = "muted", density = "compact", bodyClassName, action, children, className, }) {
     const toned = toneClass(tone);
     if (density === "editorial") {
-        return (_jsxs("div", { className: cn("relative overflow-hidden rounded-lg border py-3.5 pl-5 pr-4", toned, BOX, className), children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-[3px] bg-(--tone-line)" }), _jsxs("div", { className: "flex items-start gap-2.5", children: [Icon && (_jsx(Icon, { className: "mt-0.5 size-4 shrink-0 text-(color:--tone-hue)" })), _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [title && (_jsx(TypographyLabel, { className: "text-(color:--tone-hue)", children: title })), _jsx(TypographyMuted, { className: cn("leading-relaxed", bodyClassName), children: children }), action && (_jsx("div", { className: "mt-1 flex items-center gap-1", children: action }))] })] })] }));
+        return (_jsxs("div", { className: cn("relative overflow-hidden rounded-lg border py-3.5 pl-5 pr-4", toned, BOX, className), children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-[3px] bg-(--tone-line)" }), _jsxs("div", { className: "flex items-start gap-2.5", children: [Icon && (_jsx(Icon, { className: "mt-0.5 size-4 shrink-0 text-(color:--tone-hue)" })), _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [title && (_jsx(TypographyLabel, { className: "text-(color:--tone-hue)", children: title })), _jsx(TypographyMuted, { as: "div", className: cn("leading-relaxed", bodyClassName), children: children }), action && (_jsx("div", { className: "mt-1 flex items-center gap-1", children: action }))] })] })] }));
     }
-    return (_jsxs("div", { className: cn("rounded-md border p-3", toned, BOX, className), children: [title && (_jsxs(TypographySmall, { className: "flex items-center gap-1.5 font-medium text-(color:--tone-hue)", children: [Icon && _jsx(Icon, { className: "size-3.5 shrink-0" }), title] })), _jsx(TypographyCaption, { className: cn("mt-1 block leading-relaxed", bodyClassName), children: children }), action && _jsx("div", { className: "mt-2 flex items-center gap-1", children: action })] }));
+    return (_jsxs("div", { className: cn("rounded-md border p-3", toned, BOX, className), children: [title && (_jsxs(TypographySmall, { className: "flex items-center gap-1.5 font-medium text-(color:--tone-hue)", children: [Icon && _jsx(Icon, { className: "size-3.5 shrink-0" }), title] })), _jsx(TypographyCaption, { as: "div", className: cn("mt-1 leading-relaxed", bodyClassName), children: children }), action && _jsx("div", { className: "mt-2 flex items-center gap-1", children: action })] }));
 }

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

@@ -11,12 +11,19 @@ declare const pVariants: (props?: ({
     tone?: "muted" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ParagraphVariants = VariantProps<typeof pVariants>;
-export declare function TypographyP({ className, variant, tone, children, ...props }: ComponentProps<"p"> & ParagraphVariants): import("react").JSX.Element;
+/**
+ * `as` is here for the reason the caption has it, one step further on: a
+ * component that hands its body to a caller cannot know whether what arrives is
+ * a sentence or a list, and a paragraph may hold neither a list nor a div. The
+ * HTML parser closes the `<p>` early and React reports a hydration error, so
+ * every wrapper of that shape (`Callout` was the one) renders `as="div"`.
+ */
+export declare function TypographyP({ className, variant, tone, as, children, ...props }: WithAs<ParagraphVariants>): import("react").JSX.Element;
 /** A preset's props: its base's, minus the axes it has decided. `keyof Pins` reads
  * the exclusion off the pinned object the preset also spreads, so the two cannot
  * drift — `<TypographyMuted tone="default">` used to compile and un-mute it. */
 type Preset<Base, Pins> = Omit<Base, keyof Pins>;
-type ParagraphProps = ComponentProps<"p"> & ParagraphVariants;
+type ParagraphProps = WithAs<ParagraphVariants>;
 /** The UI rung in the secondary ink. */
 declare const MUTED: {
     readonly tone: "muted";
@@ -48,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

@@ -25,8 +25,15 @@ const pVariants = cva("", {
     },
     defaultVariants: { variant: "ui", tone: "default" },
 });
-export function TypographyP({ className, variant, tone, children, ...props }) {
-    return (_jsx("p", { className: cn(pVariants({ variant, tone }), className), ...props, children: children }));
+/**
+ * `as` is here for the reason the caption has it, one step further on: a
+ * component that hands its body to a caller cannot know whether what arrives is
+ * a sentence or a list, and a paragraph may hold neither a list nor a div. The
+ * HTML parser closes the `<p>` early and React reports a hydration error, so
+ * every wrapper of that shape (`Callout` was the one) renders `as="div"`.
+ */
+export function TypographyP({ className, variant, tone, as = "p", children, ...props }) {
+    return (_jsx(TextAs, { as: as, className: cn(pVariants({ variant, tone }), className), ...props, children: children }));
 }
 /** The UI rung in the secondary ink. */
 const MUTED = { tone: "muted" };
@@ -79,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
@@ -94,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.31",
+  "version": "0.1.33",
   "license": "MIT",
   "publishConfig": {
     "access": "public",

package/src/type.css

@@ -71,3 +71,33 @@
 .editorial.font-heading {
   font-weight: var(--heading-weight);
 }
+
+/* A glyph set beside words, sized and seated so it belongs to the line.
+
+   Two numbers, both read off the font rather than chosen. Lucide draws its ink
+   across 22 of its 24 grid units, so a 0.8em box puts that ink at 1.02 times the
+   cap height of whatever rung it sits beside.
+
+   The seat corrects a bias the browser introduces. Centring aligns a glyph on the
+   middle of the line box, and the line box is built from the font's ascent and
+   descent rounded to whole pixels, which lands its middle below the middle of the
+   capitals: 0.31px low at the 11px rung, 0.46px at the 10px, 0.50px at the 13px.
+   So a centred glyph is always seated slightly low, by an amount that changes with
+   the rung, which is why hand nudges get written one place at a time and never
+   generalise. Lifting by 0.035em takes it back onto the cap band across the ramp.
+
+   A box pinned in pixels cannot hold the first number either, because the band it
+   has to match moves with the rung. Twelve pixels is 1.39 times the cap height at
+   the 11px rung and 1.53 at the 10px one, so the glyph climbs over the ascenders
+   and hangs well under the baseline while every letter beside it rests on it.
+
+   For a glyph inline with words. A glyph that stands alone, in a button, a nav
+   rail or an avatar slot, has no band to answer to and keeps a fixed size.
+
+   The 22-of-24 figure is lucide's grid. An app on a different icon set wants a
+   different box for the same ratio. */
+@utility icon-inline {
+  width: 0.8em;
+  height: 0.8em;
+  translate: 0 -0.035em;
+}