@imfusion/web-ui 0.8.1-dev.18.g2355b181 → 0.8.1-dev.20.g50b02289

package/CHANGELOG.md

@@ -28,6 +28,8 @@ workflows already ask for stay as they are. Say "change my profile" to answer ag
   - `Typo.Eyebrow` sets a short mono, uppercase label above a heading, in the quiet `support` color by default.
   - `Card.Status` marks a card's outcome with a tinted column or band and the `info`, `positive`, `warning`, or `negative`
     glyph that `Callout` uses for the same status.
+  - `Typo` body members (`P`, `Lead`, `Detail`, `Small`, `Blockquote`, `Highlight`, `Link`, and the lists) take an
+    optional `weight` of `regular`, `medium`, or `strong`, for short body text on cards that reads thin at the regular weight.
 - Components — Stephan Wenninger <wenninger@imfusion.com>
   - `Slider.Root` has a `variant="position"` that draws a scrollbar-like trough and bar thumb for picking one position in a
     range.

package/dist/components/typo/typo.d.ts

@@ -5,14 +5,18 @@ declare const typo: (props?: ({
     variant?: "primary" | "positive" | "negative" | "oncolor" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TypoProps = VariantProps<typeof typo>;
+type WeightProps = {
+    /** Font weight. Omit to keep the member's default; `medium` firms up short body text on cards. */
+    weight?: "regular" | "medium" | "strong";
+};
 type HeadingProps = useRender.ComponentProps<"h1"> & TypoProps;
 type LongHeadingProps = HeadingProps & {
     /** Whether lines after the first use a translucent text color. */
     fadeAfterFirstLine?: boolean;
 };
-type ParagraphProps = useRender.ComponentProps<"p"> & TypoProps;
+type ParagraphProps = useRender.ComponentProps<"p"> & TypoProps & WeightProps;
 export type TypoLinkKind = "external" | "internal";
-type LinkProps = useRender.ComponentProps<"a"> & TypoProps & {
+type LinkProps = useRender.ComponentProps<"a"> & TypoProps & WeightProps & {
     /** Link target scope. `"external"` (default) opens in a new tab; `"internal"` stays in the current tab. */
     kind?: TypoLinkKind;
 };
@@ -42,32 +46,32 @@ export declare namespace H4 {
     var displayName: string;
 }
 /** Typo.P — body paragraph. */
-export declare function P({ variant, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function P({ variant, weight, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace P {
     var displayName: string;
 }
 /** Typo.Lead — emphasised intro paragraph. */
-export declare function Lead({ variant, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Lead({ variant, weight, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Lead {
     var displayName: string;
 }
 /** Typo.Detail — compact UI text, between Small (12px) and P (16px). */
-export declare function Detail({ variant, render, ...props }: useRender.ComponentProps<"p"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Detail({ variant, weight, render, ...props }: useRender.ComponentProps<"p"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Detail {
     var displayName: string;
 }
 /** Typo.Small — fine print. */
-export declare function Small({ variant, render, ...props }: useRender.ComponentProps<"small"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Small({ variant, weight, render, ...props }: useRender.ComponentProps<"small"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Small {
     var displayName: string;
 }
 /** Typo.Eyebrow — short uppercase label above a heading. Also called a kicker or overline. */
-export declare function Eyebrow({ variant, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Eyebrow({ variant, render, ...props }: useRender.ComponentProps<"p"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Eyebrow {
     var displayName: string;
 }
 /** Typo.Blockquote — pulled quotation. */
-export declare function Blockquote({ variant, render, ...props }: useRender.ComponentProps<"blockquote"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Blockquote({ variant, weight, render, ...props }: useRender.ComponentProps<"blockquote"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Blockquote {
     var displayName: string;
 }
@@ -80,22 +84,22 @@ export declare namespace InlineCode {
     var displayName: string;
 }
 /** Typo.Highlight — inline mark/highlight. */
-export declare function Highlight({ variant, render, ...props }: useRender.ComponentProps<"mark"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Highlight({ variant, weight, render, ...props }: useRender.ComponentProps<"mark"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Highlight {
     var displayName: string;
 }
 /** Typo.Link — inline anchor with an optional local Web UI directional icon. */
-export declare function Link({ variant, kind, render, ...props }: LinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Link({ variant, weight, kind, render, ...props }: LinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Link {
     var displayName: string;
 }
 /** Typo.OrderedList — numbered list. */
-export declare function OrderedList({ variant, render, ...props }: useRender.ComponentProps<"ol"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function OrderedList({ variant, weight, render, ...props }: useRender.ComponentProps<"ol"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace OrderedList {
     var displayName: string;
 }
 /** Typo.UnorderedList — bulleted list. */
-export declare function UnorderedList({ variant, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function UnorderedList({ variant, weight, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace UnorderedList {
     var displayName: string;
 }