@supertype.ai/foundations 0.1.31 → 0.1.32

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.32"
 ```
 
 </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/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";

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supertype.ai/foundations",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "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;
+}