@fairgarden/design 0.1.0-0.canary.0

package/content/pricing/pricing.module.css

@@ -0,0 +1,493 @@
+/*
+ * Pricing (§12.9), v1 [D169]. The root `base` is the inline-size container
+ * `pricing` for the tiers and matrix kinds; `tierList` and `matrix` query
+ * it. Parts: base, price (the `data` element), qualifier, currency (or
+ * `unitCaption` in a tier), amount (`amountStat` in a tier, `amountMono` on
+ * a menu), cents, period, struck, save, tierList, tier, frame (a faced Card,
+ * which draws its own edge and face), badge, tierName, summary, features,
+ * feature, check, choice, action, matrixScroll, matrix, cellLabel, asOf,
+ * visuallyHidden; `badgeHalo` wraps the Badge and draws the edge knockout.
+ * Dense module: line semantics only. Colors are role variables only; local
+ * custom properties carry dimensions only:
+ *   --pricing-gap          the tier gutter (= --fgd-space-margin) [D42]
+ *   --pricing-badge-room   the room above each tier for the straddling badge
+ *   --pricing-edge         the tier's edge width (1 px; 3 px recommended or
+ *                          selected), which places the badge and its knockout
+ *
+ * Edges (§12.9) come from the faced Card, never restyled here: its face
+ * draws the rest edge at --border-size-1 in its --role-edge (--primary10 on
+ * a page ground, --primary12 as a light island) [D179]. The recommended and
+ * selected edges set the Card's `--card-frame` hook to --border-size-2-25, which
+ * draws the outer scope's --primary12 over that edge; the unavailable edge
+ * is the Card's own, from the Radio's data-disabled in its CardChoice.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.amountStat {
+  composes: typeStatCompact from '../../utils/type.module.css';
+}
+
+.amountMono {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.unitCaption {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.tierName {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.summary {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.features {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.matrix {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.asOf {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    --pricing-gap: var(--fgd-space-margin);
+    --pricing-badge-room: calc(var(--size-px-5) / 2);
+
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /* One price, kept on one line. */
+  .price {
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  .qualifier,
+  .currency,
+  .period,
+  .save {
+    color: var(--primary12);
+  }
+
+  /* Inline and sale figures: the surrounding type at --font-weight-7, data numerals. */
+  .amount {
+    color: var(--primary12);
+    font-weight: var(--font-weight-7);
+    font-variant-numeric: var(--fgd-numerals-data);
+  }
+
+  .amountStat,
+  .amountMono,
+  .unitCaption {
+    color: var(--primary12);
+  }
+
+  /* Retail cents: a superscript at 60%, never below --font-size-0 (§8.8). */
+  .cents {
+    font-size: max(0.6em, var(--font-size-0));
+    line-height: 0;
+    vertical-align: super;
+  }
+
+  /* The struck original: --role-muted, a --border-size-1-5 line-through; never a status color. */
+  .struck {
+    color: var(--role-muted);
+    text-decoration-line: line-through;
+    text-decoration-thickness: var(--border-size-1-5);
+    text-decoration-color: currentColor;
+    text-decoration-skip-ink: none;
+  }
+
+  .struck .amount {
+    font-weight: inherit;
+    color: inherit;
+  }
+
+  .visuallyHidden {
+    position: absolute;
+    inline-size: var(--border-size-1);
+    block-size: var(--border-size-1);
+    margin: calc(var(--border-size-1) * -1);
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* Tier list baseline (§1.11.11): stacked, the recommended tier authored first. Full
+     width even as the one flex item of a wrapping RadioGroup. */
+  .tierList {
+    display: grid;
+    grid-auto-flow: row;
+    box-sizing: border-box;
+    inline-size: 100%;
+    gap: var(--pricing-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Each tier leaves room above its frame for the straddling badge, so tops align. */
+  .tier {
+    --pricing-edge: var(--border-size-1);
+
+    position: relative;
+    display: grid;
+    min-inline-size: 0;
+    padding-block-start: var(--pricing-badge-room);
+  }
+
+  /*
+   * The badge straddles the frame's top edge, centered. Its ::before is a
+   * knockout exactly as tall as the edge, in the outer ground, so the edge
+   * breaks --fgd-space-halo on either side of the badge (§12.9 Tokens).
+   * It stacks above the Card's frame (its ::after, z-index 1, later in the
+   * tier), or the recommended edge would strike through the badge word.
+   */
+  .badge {
+    position: absolute;
+    z-index: var(--layer-2);
+    inset-block-start: calc(var(--pricing-badge-room) + var(--pricing-edge) / 2);
+    inset-inline: 0;
+    display: flex;
+    justify-content: center;
+    translate: 0 -50%;
+    pointer-events: none;
+  }
+
+  .badgeHalo {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    pointer-events: auto;
+  }
+
+  .badgeHalo::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset-block-start: 50%;
+    inset-inline: calc(-1 * var(--fgd-space-halo));
+    block-size: var(--pricing-edge);
+    translate: 0 -50%;
+    background-color: var(--role-ground);
+  }
+
+  /* The frame's contents: name → price → summary → features → choice → action. */
+  .tierName,
+  .summary {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .features {
+    display: grid;
+    gap: var(--size-px-2);
+    margin: var(--size-px-2) 0 0;
+    padding: 0;
+    list-style: none;
+    color: var(--primary12);
+  }
+
+  .feature {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-px-2);
+  }
+
+  /* The inline-tier check, centered on the feature's first line. */
+  .check {
+    flex: none;
+    margin-block-start: calc((1lh - var(--size-px-3)) / 2);
+    color: var(--primary12);
+  }
+
+  .choice,
+  .action {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--size-px-2);
+  }
+
+  .action {
+    margin-block-start: var(--size-px-2);
+  }
+
+  /* The matrix (§8.2): a scroll wrapper so it never widens the page. */
+  .matrixScroll {
+    max-inline-size: 100%;
+    overflow-x: auto;
+  }
+
+  .matrixScroll:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  .matrix {
+    inline-size: 100%;
+    border-collapse: collapse;
+    color: var(--primary12);
+    font-variant-numeric: var(--fgd-numerals-data);
+  }
+
+  .matrix th,
+  .matrix td {
+    position: relative;
+    padding: var(--size-px-2) var(--size-px-2-5);
+    text-align: start;
+    vertical-align: baseline;
+  }
+
+  .matrix th {
+    font-weight: var(--font-weight-6);
+  }
+
+  /* Prices are numbers (§8.2): right-aligned, and each column header aligns like its data. */
+  .matrix td,
+  .matrix thead th + th {
+    text-align: end;
+  }
+
+  /* Row rules in --role-rule; the header row closes with one too. */
+  .matrix thead tr,
+  .matrix tbody tr {
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /* The total rule: line-double-hair in --primary12 above the footer (minimum order). */
+  .matrix tfoot > tr:first-child > *::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    box-sizing: content-box;
+    block-size: var(--fgd-double-hair-gap);
+    border-block: var(--border-size-1) solid var(--primary12);
+  }
+
+  .matrix tfoot > tr:first-child > * {
+    padding-block-start: calc(var(--size-px-2) + var(--fgd-double-hair-gap) + 2 * var(--border-size-1));
+  }
+
+  /* The column name inside a cell shows only when rows become blocks. */
+  .cellLabel {
+    display: none;
+  }
+
+  .asOf {
+    margin: var(--size-px-5) 0 0;
+    color: var(--primary12);
+  }
+}
+
+@layer variants {
+  /* Inline: "From $49" in running text. */
+  .inline {
+    display: inline;
+  }
+
+  /* Menu: a mono figure, whole on its line or at a leader row's end. */
+  .menu {
+    white-space: nowrap;
+  }
+
+  /* Sale: struck original → current price → "Save $300", wrapping as words. */
+  .sale {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0 var(--size-px-2);
+  }
+
+  /* Tier set and matrix: the `pricing` container. */
+  .tiers,
+  .kindMatrix {
+    container: pricing / inline-size;
+    /* Size containment leaves no intrinsic width: fill the box, never collapse as a flex or shrink-to-fit item. */
+    inline-size: 100%;
+  }
+
+  .tiers .price {
+    display: block;
+  }
+
+  /* Recommended: a --border-size-2-25 --primary12 frame in the outer scope, through the Card's frame hook. */
+  .recommended {
+    --pricing-edge: var(--border-size-2-25);
+  }
+
+  .recommended .frame {
+    --card-frame: var(--border-size-2-25);
+  }
+
+  /* Viewport fallback: tier columns from --lg-n-above. */
+  @media (min-width: 1024px) {
+    .tierList {
+      grid-auto-flow: column;
+      grid-auto-columns: minmax(0, 1fr);
+      max-inline-size: var(--fgd-container-content);
+      margin-inline: auto;
+    }
+  }
+
+  /* Container (§5.10.2): stacked below 1024 px; one comparison row of columns from 1024. */
+  @container pricing (width < 1024px) {
+    .tierList {
+      grid-auto-flow: row;
+      grid-auto-columns: auto;
+      max-inline-size: none;
+    }
+  }
+
+  @container pricing (width >= 1024px) {
+    .tierList {
+      grid-auto-flow: column;
+      grid-auto-columns: minmax(0, 1fr);
+      max-inline-size: var(--fgd-container-content);
+      margin-inline: auto;
+    }
+  }
+
+  /* Matrix: columns kept down to 360 px, then one block per row (viewport fallback first). */
+  @media (max-width: 359.98px) {
+    .matrix,
+    .matrix tbody,
+    .matrix tfoot,
+    .matrix tr,
+    .matrix th,
+    .matrix td {
+      display: block;
+    }
+
+    .matrix thead {
+      display: none;
+    }
+
+    .matrix tr {
+      padding-block: var(--size-px-2);
+    }
+
+    .matrix th,
+    .matrix td {
+      padding-block: var(--size-px-1);
+      text-align: start;
+    }
+
+    .cellLabel {
+      display: inline;
+      margin-inline-end: var(--size-px-2);
+      font-weight: var(--font-weight-6);
+    }
+  }
+
+  @container pricing (width < 360px) {
+    .matrix,
+    .matrix tbody,
+    .matrix tfoot,
+    .matrix tr,
+    .matrix th,
+    .matrix td {
+      display: block;
+    }
+
+    .matrix thead {
+      display: none;
+    }
+
+    .matrix tr {
+      padding-block: var(--size-px-2);
+    }
+
+    .matrix th,
+    .matrix td {
+      padding-block: var(--size-px-1);
+      text-align: start;
+    }
+
+    .cellLabel {
+      display: inline;
+      margin-inline-end: var(--size-px-2);
+      font-weight: var(--font-weight-6);
+    }
+  }
+}
+
+@layer states {
+  /* Selected (the tier's Radio is checked): the edge steps to --border-size-2-25 in --primary12 [D15]. */
+  .tier:has(.choice [data-checked]) {
+    --pricing-edge: var(--border-size-2-25);
+  }
+
+  .tier:has(.choice [data-checked]) .frame {
+    --card-frame: var(--border-size-2-25);
+  }
+
+  /* Unavailable (the Radio is disabled): the Card's line-dotted-fine edge, even when
+     recommended, and --role-muted ink [D16]. */
+  .tier:has(.choice [data-disabled]) {
+    --pricing-edge: var(--fgd-dot-fine);
+  }
+
+  .tier:has(.choice [data-disabled]) .frame {
+    --card-frame: 0px;
+  }
+
+  .tier:has(.choice [data-disabled]) :is(.tierName, .summary, .price, .amountStat, .unitCaption, .features, .check) {
+    color: var(--role-muted);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Tiers print whole, stacked; the badge prints as a word above its frame; edges print
+       0.75 pt, the recommended frame 2.25 pt, through the border-size steps' print values. */
+    .base {
+      --pricing-gap: var(--size-px-5);
+    }
+
+    .tierList {
+      grid-auto-flow: row;
+      grid-auto-columns: auto;
+      max-inline-size: none;
+    }
+
+    .tier {
+      break-inside: avoid;
+      padding-block-start: 0;
+    }
+
+    .badge {
+      position: static;
+      justify-content: flex-start;
+      margin-block-end: var(--size-px-2);
+      translate: none;
+    }
+
+    .badgeHalo::before {
+      content: none;
+    }
+
+    .matrixScroll {
+      overflow: visible;
+    }
+
+    .matrix tr {
+      break-inside: avoid;
+    }
+  }
+}

package/content/profile/Profile.d.ts

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type AvatarProps } from '../../feedback/avatar';
+import { type LinkProps } from '../../actions/link';
+export declare const profile: (props?: ({
+    kind?: "byline" | "author" | "bio" | "team" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ProfileVariants = VariantProps<typeof profile>;
+/** The four profile builds (§12.15). */
+export type ProfileKind = 'byline' | 'author' | 'bio' | 'team';
+/** Props for Profile: `div` props, `render`, the kind and the color axes. */
+export type ProfileProps = useRender.ComponentProps<'div'> & {
+    /**
+     * Required. `byline`: inline, a 32 px portrait, "By Name" and the date
+     * joined by "·". `author`: the end-of-article block, portrait → serif
+     * name → description. `bio`: portrait at the start (64 px, 128 px from
+     * 768 px of container) beside the heading and body, even on phones.
+     * `team`: a grid of square photos with names and roles.
+     */
+    kind: ProfileKind;
+    /**
+     * Primary Radix scale: rings, frames, initials and text. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: ProfileVariants['primary'];
+    /**
+     * Secondary Radix scale: only the name-link and social-link underlines
+     * (`--role-accent`). Never defaulted.
+     */
+    secondary?: ProfileVariants['secondary'];
+};
+/**
+ * The profile module. A byline holds `ProfilePortrait`, `ProfileName` and
+ * `ProfileDate`; an author block `ProfilePortrait`, `ProfileName`,
+ * `ProfileBio`; a bio row `ProfilePortrait` and `ProfileDetails` (name,
+ * role, bio, links); a team `ProfileTeam` of `ProfileMember`s, each with a
+ * `ProfileTeamPhoto`, `ProfileName` and `ProfileRole`. Use real portraits
+ * or initials; never overlay names on photos, never dim former members.
+ */
+export declare function Profile(props: ProfileProps): React.JSX.Element;
+/** Props for ProfilePortrait: Avatar props; `size` follows the kind unless given. */
+export type ProfilePortraitProps = AvatarProps;
+/**
+ * The portrait: an Avatar sized by the kind (byline 32 px, author 40 px,
+ * bio 64 px stepping to 128 px from 768 px of container), with its ring per
+ * §10.12, taking the module's `primary` and `secondary` unless given its
+ * own. Compose `AvatarImage` (empty alt where the name is adjacent) and
+ * `AvatarFallback` (1–2 initials) inside; the fallback keeps the spacing.
+ */
+export declare function ProfilePortrait(props: ProfilePortraitProps): React.JSX.Element;
+/** Props for ProfileTeamPhoto: `img` props and `render`. */
+export type ProfileTeamPhotoProps = useRender.ComponentProps<'img'>;
+/**
+ * A team member's photo: a plain `img`, square at the cell's full width,
+ * `--radius-2-25`, framed in a `--border-size-1` `--role-hairline` line.
+ * Give it empty alt when the name follows.
+ */
+export declare function ProfileTeamPhoto(props: ProfileTeamPhotoProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for ProfileDetails: `div` props and `render`. */
+export type ProfileDetailsProps = useRender.ComponentProps<'div'>;
+/** The bio row's text column beside the portrait: name, role, bio and links. */
+export declare function ProfileDetails(props: ProfileDetailsProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for ProfileName: heading props and `render` (default `<h3>`; `<span>` in a byline). */
+export type ProfileNameProps = useRender.ComponentProps<'h3'>;
+/**
+ * The name in `--primary12`: `type-itemhead` for the author block, bio row
+ * and team, `type-body-ui` at `--font-weight-6` in a byline ("By Name").
+ * Renders `<h3>`, or `<span>` in a byline. Wrap a `ProfileNameLink` inside
+ * to link the profile.
+ */
+export declare function ProfileName(props: ProfileNameProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for ProfileNameLink: Link props except `kind`, which is always `title`. */
+export type ProfileNameLinkProps = Omit<LinkProps, 'kind'>;
+/**
+ * The profile's one link, inside `ProfileName`: a §9.3 title Link whose hit
+ * area stretches over the member (or the whole profile). Hover, focus and
+ * press underline the name; the item draws the focus ring.
+ */
+export declare function ProfileNameLink(props: ProfileNameLinkProps): React.JSX.Element;
+/** Props for ProfileRole: paragraph props and `render`. */
+export type ProfileRoleProps = useRender.ComponentProps<'p'>;
+/**
+ * Role or affiliation: `type-label` caps in `--primary12`. Former members
+ * say so in words ("Former board chair"); never dim them.
+ */
+export declare function ProfileRole(props: ProfileRoleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for ProfileBio: `div` props and `render`. */
+export type ProfileBioProps = useRender.ComponentProps<'div'>;
+/** A short bio or description, 3–5 lines of `type-body-ui` in `--primary12`; prints in full. */
+export declare function ProfileBio(props: ProfileBioProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for ProfileLinks: list props and `render`. */
+export type ProfileLinksProps = useRender.ComponentProps<'ul'>;
+/**
+ * Social and contact links, a `ul` of `li > Link`: text links with the
+ * `--role-accent` underline, or inline-tier icons. They sit above a
+ * stretched name link as their own tab stops. In print, write handles in
+ * text; icon-only links are omitted.
+ */
+export declare function ProfileLinks(props: ProfileLinksProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for ProfileDate: `time` props and `render`. */
+export type ProfileDateProps = useRender.ComponentProps<'time'>;
+/** The byline date, after a "·" separator: `type-caption` in `--primary12`. Pass `dateTime`. */
+export declare function ProfileDate(props: ProfileDateProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for ProfileTeam: list props and `render`. */
+export type ProfileTeamProps = useRender.ComponentProps<'ul'>;
+/**
+ * The team grid: 1-up below 360 px of container, 2-up from 360, 4-up from
+ * 768, up to 5-up from 1024 (auto-fit at 152 px without container-query
+ * support). Prints 3-up.
+ */
+export declare function ProfileTeam(props: ProfileTeamProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for ProfileMember: list-item props and `render`. */
+export type ProfileMemberProps = useRender.ComponentProps<'li'>;
+/** One team member: photo → name → role. A `ProfileNameLink` links the whole cell. */
+export declare function ProfileMember(props: ProfileMemberProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Profile.d.ts.map

package/content/profile/Profile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Profile.d.ts","sourceRoot":"","sources":["../../src/content/profile/Profile.tsx"],"names":[],"mappings":"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"}