@fairgarden/design 0.1.0-alpha.0

package/components/Avatar/Avatar.js

@@ -0,0 +1,154 @@
+'use client';
+import * as React from 'react';
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../Ground';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { StatusGlyph, statusLabels, statusScales } from '../../utils/StatusGlyph';
+import styles from './avatar.module.css';
+import groupStyles from './avatar-group.module.css';
+/*
+ * Avatar (§10.12): a person or organization beside a byline, comment,
+ * member list or account menu.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: avatar.module.css (`avatar`, `avatarStatus`);
+ *   avatar-group.module.css (`avatarGroup`, the composed group).
+ * - Axes: `size` → xs | sm | md | lg | xl (24 / 32 / 40 / 64 / 128 px; each
+ *   sets --avatar-size, the ring weight and the initials size) [D155];
+ *   `primary`, `secondary` → scales module classes (`secondary` unused).
+ * - Compound variants: none.
+ * - Defaults: size md; color axes: none.
+ * - Color fallback: inherits the scope. The status part: the status scale of
+ *   its `status` [D129].
+ * - States: the Fallback renders while the Image is loading or failed (Base
+ *   UI's loading status; the Root sets no attribute) → the initials face; as
+ *   a link or menu trigger, the element's `:hover` → a ring up to 40 px
+ *   steps --role-rule → --primary12 at the same weight, unchanged from
+ *   64 px [D181], and `:focus-visible` → ring outside the frame.
+ * - Parts: base (frame and ring), image, fallback (initials), status (with
+ *   `statusGlyph`); Avatar Group base, item, more.
+ * - Scope: `fallback` and the `status` disc are nested face scopes (the
+ *   white preset; light islands on dark grounds); otherwise none.
+ * - Container: none; inherits its context.
+ */
+export const avatar = cva(styles.base, {
+    variants: {
+        size: {
+            xs: styles.xs,
+            sm: styles.sm,
+            md: styles.md,
+            lg: styles.lg,
+            xl: styles.xl,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+/** The status disc's class. */
+export const avatarStatus = cva(styles.status);
+/** The group's classes: its size publishes the overlap. */
+export const avatarGroup = cva(groupStyles.base, {
+    variants: {
+        size: {
+            xs: groupStyles.xs,
+            sm: groupStyles.sm,
+            md: groupStyles.md,
+            lg: groupStyles.lg,
+            xl: groupStyles.xl,
+        },
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+/** The initials face and status disc: nested white faces that read the same on every ground. */
+const FACE_PRESET = 'white';
+/** A group's size, inherited by its avatars. */
+const AvatarSizeContext = React.createContext(undefined);
+/**
+ * The circular frame and its ring. Compose `AvatarImage` (a photo or a
+ * seal), `AvatarFallback` (1–2 initials, shown until the image loads or if
+ * it fails) and an optional `AvatarStatus`. Give the image alt text with the
+ * name, or empty alt when the name is adjacent. As a link or menu trigger,
+ * wrap it (or pass `render`): on hover a ring up to 40 px steps to
+ * `--primary12` at the same weight.
+ */
+export function Avatar(props) {
+    const { size, primary, secondary, className, ...rest } = props;
+    const groupSize = React.useContext(AvatarSizeContext);
+    const scope = useScopeAttributes();
+    return (React.createElement(BaseAvatar.Root, { ...rest, ...scope, className: resolveClassName(className, (extra) => avatar({ size: size ?? groupSize, primary, secondary, className: extra })) }));
+}
+/** The photo or seal, cropped to the circle. Prints in grayscale. */
+export function AvatarImage(props) {
+    const { className, ...rest } = props;
+    return (React.createElement(BaseAvatar.Image, { ...rest, className: resolveClassName(className, (extra) => cx(styles.image, extra)) }));
+}
+/**
+ * The initials face: a nested white face (`--primary1`) with 1–2 caps
+ * initials in the UI sans at weight 700 and `--primary12`, the same on every
+ * ground. Never color-code initials backgrounds.
+ */
+export function AvatarFallback(props) {
+    const { className, children, delay, ...rest } = props;
+    return (React.createElement(Ground, { kind: "face", preset: FACE_PRESET, render: React.createElement(BaseAvatar.Fallback, { delay: delay, ...rest }), className: typeof className === 'string' ? cx(styles.fallback, className) : styles.fallback }, children));
+}
+/**
+ * The status glyph (§1.5.4, with its inner mark) on its own white disc at
+ * the frame's bottom end, `--size-px-3`, in `--role-status` of its status
+ * scale.
+ */
+export function AvatarStatus(props) {
+    const { status, label, className, ...rest } = props;
+    return (React.createElement(Ground, { ...rest, kind: "face", preset: FACE_PRESET, secondary: statusScales[status], render: React.createElement("span", null), className: avatarStatus({ className }) },
+        React.createElement(StatusGlyph, { status: status, label: label ?? statusLabels[status], className: styles.statusGlyph })));
+}
+const defaultMoreLabel = (count) => `${count} more`;
+/**
+ * Overlapping avatars (−25%) separated by a `--size-px-1` ring in
+ * `--role-halo`, ending in a "+N" initials avatar: 3 avatars at base, up to
+ * 5 from 1024 px.
+ */
+export function AvatarGroup(props) {
+    const { render, ref, className, size, total, primary, secondary, moreLabel = defaultMoreLabel, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const resolvedSize = size ?? 'md';
+    const avatars = React.Children.toArray(children).filter(React.isValidElement);
+    const shown = avatars.slice(0, 5);
+    const count = Math.max(total ?? avatars.length, avatars.length);
+    const moreBase = count - Math.min(3, shown.length);
+    const moreWide = count - shown.length;
+    const more = (n, visibility) => (React.createElement("span", { key: `more-${visibility ?? 'all'}`, className: cx(groupStyles.item, visibility) },
+        React.createElement(Avatar, { size: resolvedSize, role: "img", "aria-label": moreLabel(n), className: groupStyles.more },
+            React.createElement(AvatarFallback, { "aria-hidden": "true" },
+                "+",
+                n))));
+    const content = (React.createElement(AvatarSizeContext.Provider, { value: resolvedSize },
+        shown.map((child, index) => (React.createElement("span", { key: child.key ?? index, className: index >= 3 ? cx(groupStyles.item, groupStyles.extra) : groupStyles.item }, child))),
+        moreBase > 0 && moreBase === moreWide ? more(moreBase) : null,
+        moreBase > 0 && moreBase !== moreWide ? more(moreBase, groupStyles.moreBase) : null,
+        moreWide > 0 && moreBase !== moreWide ? more(moreWide, groupStyles.moreWide) : null));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            role: 'group',
+            className: avatarGroup({ size: resolvedSize, primary, secondary, className }),
+            children: content,
+        }, rest),
+    });
+}
+//# sourceMappingURL=Avatar.js.map

package/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}

package/components/Avatar/avatar-group.module.css

@@ -0,0 +1,72 @@
+/*
+ * Avatar Group (§10.12). Parts: `base` (the row), `item` (each avatar's
+ * --role-halo ring, a --size-px-1 halo-colored clearance), `more` (the
+ * "+N" initials avatar). Overlap −25% of the diameter. 3 avatars at base,
+ * up to 5 from --lg-n-above. Local custom properties carry dimensions only:
+ *   --avatar-group-size  the avatars' diameter, from the size class
+ */
+
+@layer base {
+  .base {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    max-inline-size: 100%;
+  }
+
+  /* The separation ring: --role-halo (--primary1 in every scope and mode) [D150]. */
+  .item {
+    display: inline-flex;
+    flex: none;
+    padding: var(--size-px-1);
+    border-radius: var(--radius-round);
+    background-color: var(--role-halo);
+  }
+
+  .item + .item {
+    margin-inline-start: calc(-0.25 * var(--avatar-group-size) - 2 * var(--size-px-1));
+  }
+
+  .more {
+    cursor: default;
+  }
+
+  /* 3 plus "+N" at base; up to 5 from --lg-n-above, each tier with its own count. */
+  .extra,
+  .moreWide {
+    display: none;
+  }
+
+  @media (min-width: 1024px) {
+    .extra,
+    .moreWide {
+      display: inline-flex;
+    }
+
+    .moreBase {
+      display: none;
+    }
+  }
+}
+
+@layer variants {
+  .xs {
+    --avatar-group-size: var(--size-px-5);
+  }
+
+  .sm {
+    --avatar-group-size: var(--size-px-7);
+  }
+
+  .md {
+    --avatar-group-size: var(--ds-size-control-md);
+  }
+
+  .lg {
+    --avatar-group-size: var(--size-px-9);
+  }
+
+  .xl {
+    --avatar-group-size: var(--ds-size-avatar-xl);
+  }
+}

package/components/Avatar/avatar.module.css

@@ -0,0 +1,180 @@
+/*
+ * Avatar (§10.12). Parts: `base` (the circular frame and its ring), `image`
+ * (photo or seal), `fallback` (the initials face, a nested face scope),
+ * `status` (the status disc, also a face scope) and `statusGlyph`. Colors are role
+ * variables only; local custom properties carry dimensions only:
+ *   --avatar-size        the frame's diameter
+ *   --avatar-ring        the ring weight (it never changes on hover)
+ *   --avatar-initials    the initials' size (≈ 40% of the diameter, rem)
+ */
+
+@layer base {
+  .base {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    inline-size: var(--avatar-size);
+    block-size: var(--avatar-size);
+    border: var(--avatar-ring) solid var(--role-rule);
+    border-radius: var(--radius-round);
+    color: var(--primary12);
+    vertical-align: middle;
+    user-select: none;
+  }
+
+  .image {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: var(--radius-round);
+    object-fit: cover;
+  }
+
+  /*
+   * The initials face: --primary1 named directly with --primary12 letters
+   * [D144]; `.base .fallback` outranks the composed Ground's own paint.
+   * Caps in the UI sans at weight 700, never below the 12 px floor.
+   */
+  .base .fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: hidden;
+    border-radius: var(--radius-round);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    font-family: var(--ds-font-ui);
+    font-size: var(--avatar-initials);
+    font-weight: var(--font-weight-7);
+    line-height: var(--ds-leading-display);
+    letter-spacing: 0;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  /* The status disc: a face named --primary1, a --border-size-1 --role-rule edge, at the frame bottom end. */
+  .base .status {
+    position: absolute;
+    inset-block-end: calc(-1 * var(--avatar-ring));
+    inset-inline-end: calc(-1 * var(--avatar-ring));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    border: var(--border-size-1) solid var(--role-rule);
+    border-radius: var(--radius-round);
+    background-color: var(--primary1);
+  }
+
+  /* The §1.5.4 glyph at --size-px-3: shape and mark --role-status, knockouts the disc's face. */
+  .statusGlyph {
+    display: block;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--primary1);
+    stroke: var(--primary1);
+    stroke-width: var(--ds-stroke-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Hover transition [D181]: --ds-duration-quick, --ease-out-3. */
+  @media (prefers-reduced-motion: no-preference) {
+    .base {
+      transition-property: border-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .statusGlyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer variants {
+  /* Sizes (§1.5.12): 24 / 32 / 40 px take a --border-size-1 --role-rule ring… */
+  .xs {
+    --avatar-size: var(--size-px-5);
+    --avatar-ring: var(--border-size-1);
+    --avatar-initials: var(--font-size-0);
+  }
+
+  .sm {
+    --avatar-size: var(--size-px-7);
+    --avatar-ring: var(--border-size-1);
+    --avatar-initials: var(--font-size-0);
+  }
+
+  .md {
+    --avatar-size: var(--ds-size-control-md);
+    --avatar-ring: var(--border-size-1);
+    --avatar-initials: var(--font-size-1);
+  }
+
+  /* …64 / 128 px a --border-size-2 --primary12 ring (Brad Frost). */
+  .lg {
+    --avatar-size: var(--size-px-9);
+    --avatar-ring: var(--border-size-2);
+    --avatar-initials: var(--font-size-4);
+
+    border-color: var(--primary12);
+  }
+
+  .xl {
+    --avatar-size: var(--ds-size-avatar-xl);
+    --avatar-ring: var(--border-size-2);
+    --avatar-initials: var(--ds-font-size-display);
+
+    border-color: var(--primary12);
+  }
+}
+
+@layer states {
+  /*
+   * As a link or menu trigger (not disabled): up to 40 px the --role-rule
+   * ring steps to --primary12 at the same weight (D140's step, applied by
+   * analogy; derived, flagged); from 64 px the ring is already --primary12
+   * and does not change [D181]. An adjacent name link takes its own
+   * --role-link-hover.
+   */
+  :is(a, button):not(:disabled, [data-disabled]):hover > .base,
+  .base:is(a, button):not(:disabled, [data-disabled]):hover {
+    border-color: var(--primary12);
+  }
+
+  /* Focus: the ring outside the frame, keyboard only [D45]. */
+  :is(a, button):focus-visible > .base,
+  .base:is(a, button):focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Grayscale photos inside a 0.75 pt ring; initials print black on white. */
+    .base {
+      border-width: var(--border-size-1);
+    }
+
+    .image {
+      filter: grayscale(1);
+    }
+  }
+}

package/components/Avatar/index.d.ts

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

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

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

package/components/Avatar/index.js

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

package/components/Avatar/index.js.map

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

package/components/Badge/Badge.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { StatusGlyph, statusScales, type Status, type StatusGlyphProps } from '../../utils/StatusGlyph';
+export { StatusGlyph, statusScales, type StatusGlyphProps };
+export declare const badge: (props?: ({
+    variant?: "solid" | "static" | "sticker" | null | undefined;
+    status?: "info" | "warning" | "success" | "danger" | null | undefined;
+    numeric?: 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 BadgeVariants = VariantProps<typeof badge>;
+export type BadgeStatus = Status;
+/** The glyph's accessible name: the status in words, so it is never shape or color alone. */
+export declare const statusWords: Record<BadgeStatus, string>;
+type BadgeKindProps = {
+    /**
+     * Omitted: the outline badge (`--ds-stroke-1-5` `--primary12` edge and
+     * label). `solid`: the pill badge, a step-9 fill of the secondary with
+     * its edge and a contrast-ink label; on a scale with no step-9 text ink
+     * (pink, red, crimson, gold, ruby, tomato) it takes the static fill.
+     * `static`: the static fill, a `--secondary4` fill with a
+     * `--secondary11` edge and a `--primary12` label (§10.11). `sticker`: a
+     * nested paper face with a ring and bold caps, the same on every
+     * ground; one per module.
+     */
+    variant?: 'solid' | 'static' | 'sticker';
+    status?: never;
+    numeric?: false;
+} | {
+    variant?: never;
+    /**
+     * The status badge: a §1.5.4 glyph plus the word (children), on the
+     * status fill with a status edge. Sets `secondary` to the status scale.
+     */
+    status: BadgeStatus;
+    numeric?: false;
+} | {
+    variant?: never;
+    status?: never;
+    /** A count: a numeral in `type-data` in an outline pill at least 20 px wide. */
+    numeric: true;
+};
+/** Props for Badge: `span` props, `render`, the kind (variant, status or numeric) and the color axes. */
+export type BadgeProps = useRender.ComponentProps<'span'> & BadgeKindProps & {
+    /**
+     * Primary Radix scale: the outline, sticker and count inks. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: BadgeVariants['primary'];
+    /**
+     * Secondary Radix scale: the solid pill's fill (the accent or taxonomy
+     * scale). With `status`, the status scale replaces it unless passed.
+     */
+    secondary?: BadgeVariants['secondary'];
+    /** The status glyph's accessible name; defaults to the English status word. */
+    statusLabel?: string;
+};
+/**
+ * A static label in caps (`type-label`, authored in sentence case; badges
+ * keep caps [D160]), 24 px tall, `--radius-round`. Use one badge per item,
+ * two at most. On saturated grounds use the outline badge: they take no
+ * accent fills. Fills drop in print; edges and words print black.
+ */
+export declare function Badge(props: BadgeProps): React.JSX.Element | null;
+//# sourceMappingURL=Badge.d.ts.map

package/components/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge/Badge.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;AASjE,OAAO,EACL,WAAW,EAEX,YAAY,EACZ,KAAK,MAAM,EACX,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAA;AAIhC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,CAAA;AA4B3D,eAAO,MAAM,KAAK;;;;;;8EAuBhB,CAAA;AAEF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAA;AAE/C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAA;AAEhC,6FAA6F;AAC7F,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAgB,CAAA;AAmBpE,KAAK,cAAc,GACf;IACE;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;IACxC,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAA;IACf;;;OAGG;IACH,MAAM,EAAE,WAAW,CAAA;IACnB,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,gFAAgF;IAChF,OAAO,EAAE,IAAI,CAAA;CACd,CAAA;AAEL,yGAAyG;AACzG,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,GACvD,cAAc,GAAG;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAA;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;IACtC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAEH;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,4BA2EtC"}

package/components/Badge/Badge.js

@@ -0,0 +1,118 @@
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../Ground';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { StatusGlyph, statusLabels, statusScales, } from '../../utils/StatusGlyph';
+import styles from './badge.module.css';
+// The shared status glyph (src/utils), re-exported here for existing imports.
+export { StatusGlyph, statusScales };
+/*
+ * Badge (§10.11): a short static label, a state or a count; never a button,
+ * never more than three words.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: badge.module.css; CVA function `badge`.
+ * - Axes: `variant` → solid | static | sticker (the `base` class is the
+ *   outline badge, so outline needs no value; `static` → `staticFill`, the
+ *   --secondary4 fill with a --secondary11 edge and a --primary12 label,
+ *   which a solid pill on a "none" scale also takes); `status` → info |
+ *   success | warning | danger (the status badge: glyph plus word,
+ *   §1.5.4); `numeric` →
+ *   `numeric` (a count in `type-data`); `primary`, `secondary` → scales
+ *   module classes.
+ * - Compound variants: none. Excluded in the types: `status` with
+ *   `variant`; `numeric` with `variant` or `status`.
+ * - Defaults: numeric false, no variant, no status; color axes: none.
+ * - Color fallback: inherits the scope (the solid pill takes the scope's
+ *   accent secondary, or the taxonomy scale passed as `secondary`); with
+ *   `status`, secondary = the status scale [D129].
+ * - States: none (static).
+ * - Parts: base, glyph (status only), label, count.
+ * - Scope: `sticker` → the root is a nested face scope (paper preset, a
+ *   light island on dark grounds); otherwise none.
+ * - Container: none; inherits its context.
+ */
+export const badge = cva(styles.base, {
+    variants: {
+        variant: {
+            solid: styles.solid,
+            static: styles.staticFill,
+            sticker: styles.sticker,
+        },
+        status: {
+            info: styles.info,
+            success: styles.success,
+            warning: styles.warning,
+            danger: styles.danger,
+        },
+        numeric: {
+            true: styles.numeric,
+        },
+        // Color axes: never defaulted [D133]; status computes secondary.
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        numeric: false,
+    },
+});
+/** The glyph's accessible name: the status in words, so it is never shape or color alone. */
+export const statusWords = statusLabels;
+/**
+ * Scales with no step-9 text ink in a light scope (§1.4.7): a solid pill on
+ * them takes the static fill (`variant="static"`: `--secondary4`,
+ * `--secondary11` edge, `--primary12` label) instead.
+ */
+const staticFillScales = new Set([
+    'crimson',
+    'gold',
+    'pink',
+    'red',
+    'ruby',
+    'tomato',
+]);
+/** The sticker's face scope: a nested paper face [D144]. */
+const STICKER_PRESET = 'paper';
+/**
+ * A static label in caps (`type-label`, authored in sentence case; badges
+ * keep caps [D160]), 24 px tall, `--radius-round`. Use one badge per item,
+ * two at most. On saturated grounds use the outline badge: they take no
+ * accent fills. Fills drop in print; edges and words print black.
+ */
+export function Badge(props) {
+    const { render, ref, className, variant, status, numeric, primary, secondary, statusLabel, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const content = status ? (React.createElement(React.Fragment, null,
+        React.createElement(StatusGlyph, { status: status, label: statusLabel ?? statusWords[status], className: styles.glyph }),
+        React.createElement("span", { className: styles.label }, children))) : numeric ? (React.createElement("span", { className: styles.count }, children)) : (React.createElement("span", { className: styles.label }, children));
+    const resolvedVariant = variant === 'solid' && secondary != null && staticFillScales.has(secondary)
+        ? 'static'
+        : variant;
+    const element = useRender({
+        enabled: variant !== 'sticker',
+        defaultTagName: 'span',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            className: badge({
+                variant: resolvedVariant,
+                status,
+                numeric: numeric ?? false,
+                primary,
+                secondary: secondary ?? (status ? statusScales[status] : undefined),
+                className,
+            }),
+            children: content,
+        }, rest),
+    });
+    if (variant !== 'sticker')
+        return element;
+    // The sticker is its own face scope; Ground writes the scope (and the light island).
+    return (React.createElement(Ground, { ...rest, ref: ref, kind: "face", preset: STICKER_PRESET, primary: primary ?? undefined, render: render ?? React.createElement("span", null), className: badge({ variant, className }) }, content));
+}
+//# sourceMappingURL=Badge.js.map

package/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EACL,oBAAoB,EACpB,sBAAsB,GAEvB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,kBAAkB,EAAyB,MAAM,mBAAmB,CAAA;AAC7E,OAAO,EACL,WAAW,EACX,YAAY,EACZ,YAAY,GAGb,MAAM,yBAAyB,CAAA;AAChC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,8EAA8E;AAC9E,OAAO,EAAE,WAAW,EAAE,YAAY,EAAyB,CAAA;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACpC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,MAAM,EAAE,MAAM,CAAC,UAAU;YACzB,OAAO,EAAE,MAAM,CAAC,OAAO;SACxB;QACD,MAAM,EAAE;YACN,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,MAAM,EAAE,MAAM,CAAC,MAAM;SACtB;QACD,OAAO,EAAE;YACP,IAAI,EAAE,MAAM,CAAC,OAAO;SACrB;QACD,iEAAiE;QACjE,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,OAAO,EAAE,KAAK;KACf;CACF,CAAC,CAAA;AAMF,6FAA6F;AAC7F,MAAM,CAAC,MAAM,WAAW,GAAgC,YAAY,CAAA;AAEpE;;;;GAIG;AACH,MAAM,gBAAgB,GAA4B,IAAI,GAAG,CAAa;IACpE,SAAS;IACT,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;IACN,QAAQ;CACT,CAAC,CAAA;AAEF,4DAA4D;AAC5D,MAAM,cAAc,GAAqB,OAAO,CAAA;AAmDhD;;;;;GAKG;AACH,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,MAAM,EACN,GAAG,EACH,SAAS,EACT,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,WAAW,EACX,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAElC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CACvB;QACE,oBAAC,WAAW,IACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,EACzC,SAAS,EAAE,MAAM,CAAC,KAAK,GACvB;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,QAAQ,CAAQ,CAC/C,CACJ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CACZ,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,QAAQ,CAAQ,CACjD,CAAC,CAAC,CAAC,CACF,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,QAAQ,CAAQ,CACjD,CAAA;IAED,MAAM,eAAe,GACnB,OAAO,KAAK,OAAO,IAAI,SAAS,IAAI,IAAI,IAAI,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC;QACzE,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,OAAO,CAAA;IAEb,MAAM,OAAO,GAAG,SAAS,CAAC;QACxB,OAAO,EAAE,OAAO,KAAK,SAAS;QAC9B,cAAc,EAAE,MAAM;QACtB,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CACf;YACE,GAAG,KAAK;YACR,SAAS,EAAE,KAAK,CAAC;gBACf,OAAO,EAAE,eAAe;gBACxB,MAAM;gBACN,OAAO,EAAE,OAAO,IAAI,KAAK;gBACzB,OAAO;gBACP,SAAS,EAAE,SAAS,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;gBACnE,SAAS;aACV,CAAC;YACF,QAAQ,EAAE,OAAO;SAClB,EACD,IAAI,CACL;KACF,CAAC,CAAA;IAEF,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO,OAAO,CAAA;IAEzC,qFAAqF;IACrF,OAAO,CACL,oBAAC,MAAM,OACA,IAA0C,EAC/C,GAAG,EAAE,GAA6B,EAClC,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,cAAc,EACtB,OAAO,EAAE,OAAO,IAAI,SAAS,EAC7B,MAAM,EAAE,MAAM,IAAI,iCAAQ,EAC1B,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,IAEvC,OAAO,CACD,CACV,CAAA;AACH,CAAC"}