@fairgarden/design 0.1.0-alpha.0

package/components/CTABlock/cta-block.module.css

@@ -0,0 +1,358 @@
+/*
+ * CTA Block (§11.10, the CTA banner). CVA function `ctaBlock`.
+ * Color roles (§11.10): CTA field ground = the preset's, edge --role-edge
+ * (the field's --primary12, drawn by Ground); kicker --role-heading; trail
+ * --role-accent; headline --primary12 over a pattern, else --role-heading;
+ * support --primary12; action and outline twin: the §9.2 Button's roles;
+ * decor --role-tint (the sunburst's tile ink); blob mount discs
+ * --secondary9 / --secondary7 and its mark --secondary-contrast (the
+ * ornament module's); crop marks --primary12.
+ * Colors are role variables only; local custom properties carry
+ * dimensions only.
+ */
+
+/* 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. */
+.kicker {
+  composes: typeKicker from '../../utils/type.module.css';
+}
+
+.headline {
+  composes: typeH2 from '../../utils/type.module.css';
+}
+
+.support {
+  composes: typeBody from '../../utils/type.module.css';
+}
+
+.frameLine {
+  composes: lineDashedFine from '../../utils/line.module.css';
+}
+
+.decorSunburst {
+  composes: patternSunburst from '../../utils/pattern.module.css';
+}
+
+@layer base {
+  .base {
+    position: relative;
+    display: block;
+    color: var(--primary12);
+  }
+
+  /*
+   * The content: the inline-size container `cta`. Baseline: a centered
+   * stack; kicker → headline --ds-space-56, headline → action --size-px-7.
+   */
+  .content {
+    container: cta / inline-size;
+    position: relative;
+    z-index: 1;
+    min-inline-size: 0;
+  }
+
+  .layout {
+    display: grid;
+    justify-items: center;
+    row-gap: var(--size-px-7);
+    min-inline-size: 0;
+    text-align: center;
+  }
+
+  .text {
+    display: grid;
+    justify-items: center;
+    min-inline-size: 0;
+    inline-size: 100%;
+  }
+
+  /* The kicker starts ≈ 15% of the column in while the headline centers (LTA). */
+  .kicker {
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-12);
+    justify-self: start;
+    margin: 0;
+    margin-block-end: var(--ds-space-56);
+    margin-inline-start: 15%;
+    color: var(--role-heading);
+    text-align: start;
+  }
+
+  .trail {
+    display: inline-flex;
+    flex: none;
+    max-inline-size: var(--size-px-12);
+    color: var(--role-accent);
+  }
+
+  .trail > :where(svg, img) {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  /* The headline: type-h2, centered, ≤ 45ch (--size-content-2). */
+  .headline {
+    max-inline-size: var(--size-content-2);
+    margin: 0;
+    color: var(--role-heading);
+    text-wrap: balance;
+  }
+
+  .support {
+    max-inline-size: var(--size-content-2);
+    margin: 0;
+    margin-block-start: var(--size-px-5);
+    color: var(--primary12);
+  }
+
+  /* Actions flex-wrap: the outline twin sits inline once both fit, below otherwise. */
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--ds-space-12);
+  }
+
+  /*
+   * Decoration behind the content, in --role-tint, clipped by its box (the
+   * block; the sunburst kind's reaches --ds-space-40 below it, below). A
+   * custom node sits centred on the bottom edge. `.base .decor` outranks
+   * the pattern class's own `position: relative` in this layer.
+   */
+  .base .decor {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    overflow: hidden;
+    color: var(--role-tint);
+    pointer-events: none;
+  }
+
+  .decor > :where(svg, img) {
+    display: block;
+    max-inline-size: none;
+  }
+
+  /* The blob mount (an OrnamentBlob, which colors its discs and mark), above the headline. */
+  .mount {
+    display: grid;
+    place-items: center;
+    margin-block-end: var(--size-px-5);
+  }
+
+  /* The crop-mark box (§4.5.5): a line-dashed-fine rectangle in --primary12, foreground so it prints. */
+  .frame {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .frameLine {
+    fill: none;
+    stroke: var(--primary12);
+  }
+
+  /* A "+" of --ds-mark-arm --border-size-1 arms at each corner, overhanging --ds-mark-overhang. */
+  .cornerMark {
+    position: absolute;
+    inline-size: var(--ds-mark-arm);
+    block-size: var(--ds-mark-arm);
+    overflow: visible;
+    fill: none;
+    stroke: var(--primary12);
+    stroke-width: var(--border-size-1);
+    pointer-events: none;
+  }
+
+  .startStart {
+    inset-block-start: calc(-1 * var(--ds-mark-overhang));
+    inset-inline-start: calc(-1 * var(--ds-mark-overhang));
+  }
+
+  .startEnd {
+    inset-block-start: calc(-1 * var(--ds-mark-overhang));
+    inset-inline-end: calc(-1 * var(--ds-mark-overhang));
+  }
+
+  .endStart {
+    inset-block-end: calc(-1 * var(--ds-mark-overhang));
+    inset-inline-start: calc(-1 * var(--ds-mark-overhang));
+  }
+
+  .endEnd {
+    inset-block-end: calc(-1 * var(--ds-mark-overhang));
+    inset-inline-end: calc(-1 * var(--ds-mark-overhang));
+  }
+}
+
+@layer variants {
+  /* Only --primary12 text sits on a pattern (§4.10.1) [D120]. */
+  .patterned .headline {
+    color: var(--primary12);
+  }
+
+  /*
+   * Sunburst: the decoration reaches --ds-space-40 below the block's bottom
+   * edge, into its band's bottom padding, and pattern-sunburst centres its
+   * origin there, so that edge clips the lower half (§4.10.1, §11.10).
+   */
+  .sunburst .decor {
+    inset-block-end: calc(-1 * var(--ds-space-40));
+  }
+
+  /* Mission: the mount replaces the kicker's trail; the headline follows it directly. */
+  .mission .kicker {
+    justify-self: center;
+    margin-inline-start: 0;
+  }
+
+  /*
+   * The CTA field [D177]: inset in the content container, never full-bleed;
+   * --ds-radius-20; padding --size-px-7, --size-px-10 from --lg-n-above
+   * (≥ the radius); Ground draws the --primary12 edge.
+   */
+  .field {
+    position: relative;
+    padding: var(--size-px-7);
+    border-radius: var(--ds-radius-20);
+  }
+
+  @media (min-width: 1024px) {
+    .field {
+      padding: var(--size-px-10);
+    }
+  }
+
+  /* Saturated campaign field: one ink; the kicker centers with the headline. */
+  .saturated .kicker {
+    justify-self: center;
+    margin-inline-start: 0;
+  }
+
+  /* Framed: the crop-mark box around --size-px-7 of padding, square. */
+  .framed {
+    padding: var(--size-px-7);
+    border-radius: var(--ds-radius-none);
+  }
+
+  /*
+   * Deep and framed: headline 7, actions 5 from 768 px of the content's
+   * container (Crab Fit's donate strip); viewport fallback --lg-n-above.
+   */
+  @media (min-width: 1024px) {
+    .deep .layout,
+    .framed .layout {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+      align-items: center;
+      column-gap: var(--ds-space-margin);
+      justify-items: stretch;
+      text-align: start;
+    }
+
+    .deep .text,
+    .framed .text {
+      grid-column: 1 / span 7;
+      justify-items: start;
+    }
+
+    .deep .actions,
+    .framed .actions {
+      grid-column: 8 / -1;
+      justify-content: flex-end;
+    }
+
+    .deep .kicker,
+    .framed .kicker {
+      margin-inline-start: 0;
+    }
+  }
+
+  @container cta (width < 768px) {
+    .deep .layout,
+    .framed .layout {
+      grid-template-columns: minmax(0, 1fr);
+      justify-items: center;
+      text-align: center;
+    }
+
+    .deep .text,
+    .framed .text,
+    .deep .actions,
+    .framed .actions {
+      grid-column: 1 / -1;
+    }
+
+    .deep .text,
+    .framed .text {
+      justify-items: center;
+    }
+
+    .deep .actions,
+    .framed .actions {
+      justify-content: center;
+    }
+  }
+
+  @container cta (width >= 768px) {
+    .deep .layout,
+    .framed .layout {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+      align-items: center;
+      column-gap: var(--ds-space-margin);
+      justify-items: stretch;
+      text-align: start;
+    }
+
+    .deep .text,
+    .framed .text {
+      grid-column: 1 / span 7;
+      justify-items: start;
+    }
+
+    .deep .actions,
+    .framed .actions {
+      grid-column: 8 / -1;
+      justify-content: flex-end;
+    }
+
+    .deep .kicker,
+    .framed .kicker {
+      margin-inline-start: 0;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /*
+     * The ornament drops; the block reads completely without it (LTA). The
+     * trail prints black at 0.75 pt and the blob mount drops its discs (the
+     * ornament module's print rules), its mark printing black (§6.6, §11.10).
+     */
+    .decor {
+      display: none;
+    }
+
+    /* Page-ground kinds print between rules; a CTA field prints its edge as a black frame (Ground). */
+    .sunburst,
+    .mission {
+      padding-block: var(--size-px-5);
+      border-block: var(--border-size-1) solid var(--primary12);
+    }
+
+    .base {
+      break-inside: avoid;
+    }
+
+    /* The framed kind's dashed frame (0.75 pt, 3 / 2.25 pt) and corner marks print as they are. */
+  }
+}

package/components/CTABlock/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CTABlock';
+//# sourceMappingURL=index.d.ts.map

package/components/CTABlock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/CTABlock/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/components/CTABlock/index.js

@@ -0,0 +1,2 @@
+export * from './CTABlock';
+//# sourceMappingURL=index.js.map

package/components/CTABlock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/CTABlock/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/components/Card/Card.d.ts

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type LinkProps } from '../Link';
+declare const card: (props?: ({
+    kind?: "block" | "entry" | "editorial" | null | undefined;
+    faced?: boolean | null | undefined;
+    lead?: boolean | null | undefined;
+    disabled?: boolean | 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 CardVariants = VariantProps<typeof card>;
+type CardKindProps = {
+    /** Editorial (default): open (bare) by default per §12.2; `faced` adds the face and edge. */
+    kind?: 'editorial';
+    /**
+     * Adds the face (a nested `white` Ground on a page ground, a `paper`
+     * light island inside a field or the night band) and its
+     * `--role-edge` edge. Editorial only. Default `false`: the open card
+     * (§12.2).
+     */
+    faced?: boolean;
+    /**
+     * The single lead card of a grid: horizontal, media 5 columns and
+     * text 7, once its `card-grid` container reaches 944 px (viewport
+     * fallback `--lg-n-above`); stacked below. Editorial only. Default
+     * `false`.
+     */
+    lead?: boolean;
+} | {
+    /** Block edge: featured cards only, one card family per page on 1–3 cards [D174]. */
+    kind: 'block';
+    /** Not available on block cards, which always draw their block edge. */
+    faced?: never;
+    /** Not available on block cards. */
+    lead?: never;
+} | {
+    /**
+     * Entry [D185]: compact and horizontal, a `white` face (a light
+     * island on the night hero) with a static `--border-size-2`
+     * `--primary12` edge. A leading `CardMedia` is the square image, flush
+     * to the start edge and as tall as the card; then a `CardKicker`
+     * (the category) and a `CardTitle` with its link. Used only as a
+     * hero's entry cards (§11.9).
+     */
+    kind: 'entry';
+    /** Not available on entry cards, which are always faced. */
+    faced?: never;
+    /** Not available on entry cards. */
+    lead?: never;
+};
+/** Props for Card: `article` props, `render`, and the kind, face and color axes. */
+export type CardProps = useRender.ComponentProps<'article'> & {
+    /**
+     * Primary Radix scale for the card and its face: text, rules and edges.
+     * Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: CardVariants['primary'];
+    /**
+     * Secondary Radix scale for the card and its face: the accents, such as
+     * the title link's underline. Never defaulted; omitted, it inherits the scope.
+     */
+    secondary?: CardVariants['secondary'];
+    /**
+     * Unavailable (a sold-out product, a past event): title and body in
+     * `--role-muted`, a `line-dotted-fine` edge, the action removed; the photo
+     * is untouched and nothing fades [D16]. Add the status word as a Badge.
+     * Default `false`.
+     */
+    disabled?: boolean;
+} & CardKindProps;
+/**
+ * The card frame. Plain children are fine (`<Card>…</Card>`); the optional
+ * parts `CardMedia`, `CardKicker`, `CardTitle` (+ `CardTitleLink`),
+ * `CardMeta`, `CardBody`, `CardChoice` and `CardFooter` give the §12.2
+ * anatomy and rhythm. Put a
+ * leading `CardMedia` first (a direct child) to run it flush to the frame.
+ * In a grid row, cards share one height and the footer sits at the bottom.
+ *
+ * Renders `<article>`; pass `render={<li />}` or similar to change it. The
+ * root is an inline-size container, so give it a width in shrink-to-fit
+ * contexts (flex items without stretch, floats).
+ */
+export declare function Card(props: CardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardMedia: `figure` props and `render`. */
+export type CardMediaProps = useRender.ComponentProps<'figure'>;
+/** Photo or drawing (`figure` with an `img`). Flush when first in a faced card; inset in a block card. */
+export declare function CardMedia(props: CardMediaProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardKicker: paragraph props and `render`. */
+export type CardKickerProps = useRender.ComponentProps<'p'>;
+/**
+ * The kicker above the title (§12.2 part `kicker`): a topic Tag, or a
+ * category in `type-label` caps in --primary12, as on the entry card.
+ */
+export declare function CardKicker(props: CardKickerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardTitle: heading props and `render` (default `<h3>`). */
+export type CardTitleProps = useRender.ComponentProps<'h3'>;
+/** `type-itemhead` in --primary12. Renders `<h3>`; pass `render={<h2 />}` to fit the outline. */
+export declare function CardTitle(props: CardTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardTitleLink: Link props except `kind`, which is always `title`. */
+export type CardTitleLinkProps = Omit<LinkProps, 'kind'>;
+/**
+ * The card's one primary link, inside `CardTitle`. A §9.3 title Link: its
+ * hit area stretches over the whole card; hover, focus and press underline
+ * the title; the card draws the focus ring outside its frame.
+ */
+export declare function CardTitleLink(props: CardTitleLinkProps): React.JSX.Element;
+/** Props for CardMeta: paragraph props and `render`. */
+export type CardMetaProps = useRender.ComponentProps<'p'>;
+/** Date, format, place joined by "·": `type-caption` in --role-muted. */
+export declare function CardMeta(props: CardMetaProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardBody: `div` props and `render`. */
+export type CardBodyProps = useRender.ComponentProps<'div'>;
+/** Two to four lines of `type-body-ui` in --primary12. */
+export declare function CardBody(props: CardBodyProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardChoice: `div` props and `render`. */
+export type CardChoiceProps = useRender.ComponentProps<'div'>;
+/**
+ * The option-card indicator slot (§12.2 part `choice`, §10.7): put the
+ * card's Checkbox or Radio here. Its `data-checked` steps the faced edge to
+ * `--border-size-2` in `--role-select-edge`; its `data-disabled` draws the
+ * unavailable edge and mutes the title and body. Sits above the stretched
+ * title link as its own control.
+ */
+export declare function CardChoice(props: CardChoiceProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardFooter: `div` props and `render`. */
+export type CardFooterProps = useRender.ComponentProps<'div'>;
+/**
+ * The action row (§12.2 part `action`): a sm outline Button, or a
+ * "READ MORE ›" standalone Link. Pinned to the card's bottom, so a grid
+ * row's actions align (§12.3); sits above the stretched title link; stacks
+ * below 360 px of card width; removed while the card is `disabled`.
+ */
+export declare function CardFooter(props: CardFooterProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Card.d.ts.map

package/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAA;AAuD9C,QAAA,MAAM,IAAI;;;;;;;8EA2BR,CAAA;AAEF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAA;AAE7C,KAAK,aAAa,GACd;IACE,6FAA6F;IAC7F,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,GACD;IACE,qFAAqF;IACrF,IAAI,EAAE,OAAO,CAAA;IACb,wEAAwE;IACxE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,oCAAoC;IACpC,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,GACD;IACE;;;;;;;OAOG;IACH,IAAI,EAAE,OAAO,CAAA;IACb,4DAA4D;IAC5D,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,oCAAoC;IACpC,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAEL,oFAAoF;AACpF,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG;IAC5D;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,aAAa,CAAA;AAEjB;;;;;;;;;;;GAWG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,0EA+EpC;AAED,wDAAwD;AACxD,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;AAE/D,0GAA0G;AAC1G,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,0EAQ9C;AAED,0DAA0D;AAC1D,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;AAE3D;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,0EAQhD;AAED,wEAAwE;AACxE,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAE3D,iGAAiG;AACjG,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,0EAQ9C;AAED,kFAAkF;AAClF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AAExD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAGtD;AAED,wDAAwD;AACxD,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;AAEzD,yEAAyE;AACzE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,0EAQ5C;AAED,oDAAoD;AACpD,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAE3D,0DAA0D;AAC1D,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,0EAQ5C;AAED,sDAAsD;AACtD,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAE7D;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,0EAQhD;AAED,sDAAsD;AACtD,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAE7D;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,0EAQhD"}