@fairgarden/design 0.1.0-alpha.0

package/components/Field/Field.js

@@ -0,0 +1,103 @@
+'use client';
+import * as React from 'react';
+import { Field as BaseField } from '@base-ui/react/field';
+import { cva } from 'class-variance-authority';
+import { resolveClassName, cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { StatusGlyph, statusScales } from '../../utils/StatusGlyph';
+import styles from './field.module.css';
+/*
+ * Field (§10.2): wires a control's label, description and error.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: field.module.css; CVA functions `field` (root) and `fieldError`
+ *   (the error part, which carries the computed danger scale).
+ * - Axes: `primary`, `secondary` → scales module classes.
+ * - Compound variants: none. Defaults: color axes none.
+ * - Color fallback: inherits the scope. While Base UI reports the field
+ *   invalid, the Field computes the danger scale and passes it as the
+ *   `secondary` of its error part and, through context, of its text-entry
+ *   or select control (§10.1) [D129]. It is never set on the root, so value
+ *   controls (Checkbox, Radio, Switch) keep their own secondary.
+ * - States: `data-invalid` → the §10.1 error state (the control draws the
+ *   edge, the error part the glyph and message); `data-disabled` → label
+ *   `--role-muted`; `data-valid`, `data-touched`, `data-dirty` → none;
+ *   `data-focused` → none here (the control draws the ring).
+ * - Parts: base, label, optional, description, error, errorGlyph.
+ * - Scope: none. Container: none; the Form root is the container.
+ */
+export const field = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/** The error part's own function: it takes a secondary the root does not (§1.11.3). */
+const fieldError = cva(styles.error, {
+    variants: {
+        secondary: secondaryScaleVariants,
+    },
+});
+/** The §1.5.4 danger scale, passed as `secondary` while a field is invalid [D129]. */
+export const dangerScale = statusScales.danger;
+const FieldInvalidContext = React.createContext(false);
+FieldInvalidContext.displayName = 'FieldInvalidContext';
+/**
+ * True while the nearest Field is invalid. Text-entry and select controls
+ * read it to take the danger scale as their `secondary` (§10.1) [D129].
+ */
+export function useFieldInvalid() {
+    return React.useContext(FieldInvalidContext);
+}
+/**
+ * A Base UI Field.Root: the stack of label, control, description and error.
+ * Validation follows §10.2: validate on submit, then on blur for a field
+ * that has already failed (`validationMode` on the Form).
+ */
+export function Field(props) {
+    const { primary, secondary, className, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement(BaseField.Root, { ...rest, ...scope, className: resolveClassName(className, (extra) => field({ primary, secondary, className: extra })) },
+        React.createElement(BaseField.Validity, null, (validity) => (React.createElement(FieldInvalidContext.Provider, { value: validity.validity.valid === false }, children)))));
+}
+/**
+ * The field label: `type-field-label` in `--primary12`, authored in title
+ * case up to about four words, sentence case for longer or question labels
+ * [D160]. For a Select or Combobox trigger pass `nativeLabel={false}`: the
+ * label then renders a `div` that focuses the control without opening it.
+ */
+export function FieldLabel(props) {
+    const { optional, className, children, nativeLabel, render, ...rest } = props;
+    const marker = optional === true ? '(optional)' : optional || null;
+    return (React.createElement(BaseField.Label, { ...rest, nativeLabel: nativeLabel, render: render ?? (nativeLabel === false ? React.createElement("div", null) : undefined), className: resolveClassName(className, (extra) => cx(styles.label, extra)) },
+        children,
+        marker ? (React.createElement(React.Fragment, null,
+            ' ',
+            React.createElement("span", { className: styles.optional }, marker))) : null));
+}
+/**
+ * Helper text: `type-caption` in `--role-muted`, `--size-px-1` below the
+ * box; sentence case. Base UI links it to the control with
+ * `aria-describedby`.
+ */
+export function FieldDescription(props) {
+    const { className, ...rest } = props;
+    return (React.createElement(BaseField.Description, { ...rest, className: resolveClassName(className, (extra) => cx(styles.description, extra)) }));
+}
+/**
+ * The error message, shown by Base UI while the field is invalid (or for
+ * the `match` it names): the danger glyph in `--role-status`, then the
+ * message in `type-caption` at `--font-weight-6` in `--primary12`. Word it
+ * as what happened plus how to fix it (§1.9.2). Without children it shows
+ * the browser's validation message.
+ */
+export function FieldError(props) {
+    const { className, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement(BaseField.Error, { ...rest, ...scope, className: resolveClassName(className, (extra) => fieldError({ secondary: dangerScale, className: extra })), render: (elementProps) => (React.createElement("div", { ...elementProps },
+            React.createElement(StatusGlyph, { status: "danger", className: styles.errorGlyph }),
+            React.createElement("span", null, elementProps.children))) }));
+}
+//# sourceMappingURL=Field.js.map

package/components/Field/Field.js.map

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

package/components/Field/field.module.css

@@ -0,0 +1,114 @@
+/*
+ * Field (§10.2, §10.1). CVA function `field`; the error part has its own
+ * function `fieldError`, because it carries the computed danger scale.
+ * Parts: `base` (the stack), `label`, `optional`, `description`, `error`,
+ * `errorGlyph`. The control's box is its own module (§10.1: modules do not
+ * compose each other's classes). Colors are role variables only; label case
+ * is authored, never set here [D160].
+ */
+
+/* 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. */
+.label {
+  composes: typeFieldLabel from '../../utils/type.module.css';
+}
+
+/* Helper text is muted text: one weight lighter in dark scopes, floored at 400 [D170]. */
+.description {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.error {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* The stack: label → box --size-px-2, box → description and error --size-px-1 (§10.1). */
+  .base {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .label {
+    align-self: start;
+    margin-block-end: var(--size-px-2);
+    color: var(--primary12);
+  }
+
+  /* "(optional)" sits in the label and takes its ink (§10.1). */
+  .optional {
+    color: inherit;
+  }
+
+  .description {
+    margin: 0;
+    margin-block-start: var(--size-px-1);
+  }
+
+  /* The message: type-caption at --font-weight-6 in --primary12, led by the danger glyph. */
+  .error {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-px-2);
+    margin-block-start: var(--size-px-1);
+    color: var(--primary12);
+  }
+
+  /*
+   * The danger glyph (◆ with its inner ×, §1.5.4) [D58] at --size-px-3:
+   * shape in --role-status (currentColor), the × knocked out in
+   * --role-status-fill. One line box tall so it sits on the first line.
+   */
+  .errorGlyph {
+    flex: none;
+    display: block;
+    inline-size: var(--size-px-3);
+    block-size: 1lh;
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--ds-stroke-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  @media (forced-colors: active) {
+    .errorGlyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * The message weight, --font-weight-6 (§10.1). It overrides the composed
+   * type-caption, which sits in `base`, so it is written one layer up.
+   */
+  .error {
+    font-weight: var(--font-weight-6);
+  }
+}
+
+@layer states {
+  /* Disabled: the label and "(optional)" take --role-muted; never dimmed [D16]. */
+  .label[data-disabled] {
+    color: var(--role-muted);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Labels, values and messages print; the global remap turns their inks black. */
+    .base {
+      break-inside: avoid;
+    }
+  }
+}

package/components/Field/index.d.ts

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

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

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

package/components/Field/index.js

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

package/components/Field/index.js.map

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

package/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
+import { type VariantProps } from 'class-variance-authority';
+export declare const fieldset: (props?: ({
+    variant?: "outline" | "text" | "ledger" | 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 FieldsetVariants = VariantProps<typeof fieldset>;
+/** Props for Fieldset: Base UI Fieldset.Root props plus the variant and color axes. */
+export type FieldsetProps = BaseFieldset.Root.Props & {
+    /**
+     * `text` (default) is open: a legend over a hairline rule. `outline` is
+     * the framed panel for technical forms and calculators; never nest two.
+     * `ledger` is the dotted frame for self-contained order and checklist
+     * forms, with `FieldsetLeader` rows.
+     */
+    variant?: FieldsetVariants['variant'];
+    /** Primary Radix scale: legend, frame and rules. Never defaulted [D133]. */
+    primary?: FieldsetVariants['primary'];
+    /** Secondary Radix scale: accepted, unused (structure is primary only). */
+    secondary?: FieldsetVariants['secondary'];
+};
+/**
+ * A Base UI Fieldset: a native `fieldset` whose first child is a
+ * `FieldsetLegend`. `disabled` disables the legend and every control in it;
+ * hiding the group is usually better.
+ */
+export declare function Fieldset(props: FieldsetProps): React.JSX.Element;
+/** Props for FieldsetLegend: Base UI Fieldset.Legend props. */
+export type FieldsetLegendProps = BaseFieldset.Legend.Props;
+/**
+ * The legend, a native `legend`: `type-field-label` in `--primary12`, title
+ * case up to about four words, sentence case for longer or question
+ * legends [D160]. Open fieldsets draw the hairline rule under it; framed
+ * fieldsets set it into the top edge.
+ */
+export declare function FieldsetLegend(props: FieldsetLegendProps): React.JSX.Element;
+/** Props for FieldsetLeader: SVG props without children. */
+export type FieldsetLeaderProps = Omit<React.ComponentPropsWithRef<'svg'>, 'children'>;
+/**
+ * The ledger's `line-dotted-fine` leader in `--role-rule`, running from a
+ * row's label to its control (Inciardi Prints). Place it between the two in
+ * a row that lays out inline; it grows to fill the space. Decorative.
+ */
+export declare function FieldsetLeader(props: FieldsetLeaderProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Fieldset.d.ts.map

package/components/Fieldset/Fieldset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../src/components/Fieldset/Fieldset.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA4BjE,eAAO,MAAM,QAAQ;;;;8EAcnB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAErD,uFAAuF;AACvF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,GAAG;IACpD;;;;;OAKG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CAC1C,CAAA;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAoB5C;AAED,+DAA+D;AAC/D,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,MAAM,CAAC,KAAK,CAAA;AAE3D;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAYxD;AAED,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAA;AAEtF;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAYxD"}

package/components/Fieldset/Fieldset.js

@@ -0,0 +1,80 @@
+'use client';
+import * as React from 'react';
+import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
+import { cva } from 'class-variance-authority';
+import { resolveClassName, cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './fieldset.module.css';
+/*
+ * Fieldset (§10.2): controls that answer one question, and every checkbox
+ * or radio group.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: fieldset.module.css; CVA function `fieldset`.
+ * - Axes: `variant` → text (open: legend plus hairline rule, no container),
+ *   outline (framed), ledger (the dotted frame with leader rows [D35]);
+ *   `primary`, `secondary` → scales module classes (structure takes
+ *   `primary` only; `secondary` is accepted unused).
+ * - Compound variants: none.
+ * - Defaults: variant text; color axes none.
+ * - Color fallback: inherits the scope.
+ * - States: root `data-disabled` → legend `--role-muted`, its controls
+ *   disabled (Base UI passes it down).
+ * - Parts: base, legend, rule, leader; `frame` / `frameLine` draw the
+ *   ledger's dotted frame in SVG.
+ * - Scope: none.
+ * - Container: none of its own. Framed padding reads the Form container
+ *   `form` (below 360 px: --ds-space-12), with the viewport as fallback.
+ */
+export const fieldset = cva(styles.base, {
+    variants: {
+        variant: {
+            text: styles.text,
+            outline: styles.outline,
+            ledger: styles.ledger,
+        },
+        // Color axes: never defaulted [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        variant: 'text',
+    },
+});
+/**
+ * A Base UI Fieldset: a native `fieldset` whose first child is a
+ * `FieldsetLegend`. `disabled` disables the legend and every control in it;
+ * hiding the group is usually better.
+ */
+export function Fieldset(props) {
+    const { variant, primary, secondary, className, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement(BaseFieldset.Root, { ...rest, ...scope, className: resolveClassName(className, (extra) => fieldset({ variant, primary, secondary, className: extra })) },
+        variant === 'ledger' ? (React.createElement("svg", { className: styles.frame, "aria-hidden": "true", focusable: "false" },
+            React.createElement("rect", { className: styles.frameLine, width: "100%", height: "100%" }))) : null,
+        children));
+}
+/**
+ * The legend, a native `legend`: `type-field-label` in `--primary12`, title
+ * case up to about four words, sentence case for longer or question
+ * legends [D160]. Open fieldsets draw the hairline rule under it; framed
+ * fieldsets set it into the top edge.
+ */
+export function FieldsetLegend(props) {
+    const { className, children, render, ...rest } = props;
+    return (React.createElement(BaseFieldset.Legend, { ...rest, render: render ?? React.createElement("legend", null), className: resolveClassName(className, (extra) => cx(styles.legend, extra)) },
+        children,
+        React.createElement("span", { className: styles.rule, "aria-hidden": "true" })));
+}
+/**
+ * The ledger's `line-dotted-fine` leader in `--role-rule`, running from a
+ * row's label to its control (Inciardi Prints). Place it between the two in
+ * a row that lays out inline; it grows to fill the space. Decorative.
+ */
+export function FieldsetLeader(props) {
+    const { className, ...rest } = props;
+    return (React.createElement("svg", { "aria-hidden": "true", focusable: "false", ...rest, className: cx(styles.leader, className) },
+        React.createElement("line", { className: styles.leaderLine, x1: "0", y1: "50%", x2: "100%", y2: "50%" })));
+}
+//# sourceMappingURL=Fieldset.js.map

package/components/Fieldset/Fieldset.js.map

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

package/components/Fieldset/fieldset.module.css

@@ -0,0 +1,167 @@
+/*
+ * Fieldset (§10.2). CVA function `fieldset`. Parts: `base` (the native
+ * fieldset), `legend`, `rule` (the open variant's hairline), `leader` (the
+ * ledger's dotted leader) with `leaderLine`, and `frame` / `frameLine`, the
+ * SVG that draws the ledger's `line-dotted` frame as true dots [D36, D68].
+ * Structure takes --primary12 and --role-* only; the legend is authored in
+ * title case up to about four words [D160].
+ */
+
+/* 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. */
+.legend {
+  composes: typeFieldLabel from '../../utils/type.module.css';
+}
+
+.frameLine {
+  composes: lineDotted from '../../utils/line.module.css';
+}
+
+.leaderLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  /* The native fieldset, reset: no UA border, padding or min-content floor [D154]. */
+  .base {
+    /* Local dimension: framed padding by tier. */
+    --fieldset-padding: var(--size-px-3);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-px-5);
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: var(--primary12);
+  }
+
+  /* Fieldsets stand --ds-space-40 apart; the Form's --size-px-5 gap supplies the rest. */
+  .base + .base {
+    margin-block-start: calc(var(--ds-space-40) - var(--size-px-5));
+  }
+
+  .legend {
+    padding: 0;
+    color: var(--primary12);
+  }
+
+  .rule {
+    display: none;
+  }
+
+  /* The ledger frame host covers the border box, inset by half a dot. */
+  .frame {
+    position: absolute;
+    inset-block-start: calc(var(--ds-dot) / 2);
+    inset-inline-start: calc(var(--ds-dot) / 2);
+    inline-size: calc(100% - var(--ds-dot));
+    block-size: calc(100% - var(--ds-dot));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .frameLine {
+    fill: none;
+    stroke: var(--role-rule);
+  }
+
+  /* A leader runs from the label to the control; it grows to fill the row. */
+  .leader {
+    flex: 1 1 var(--size-px-5);
+    align-self: center;
+    min-inline-size: var(--size-px-5);
+    block-size: var(--ds-dot-fine);
+    overflow: visible;
+  }
+
+  .leaderLine {
+    fill: none;
+    stroke: var(--role-rule);
+  }
+
+  @media (forced-colors: active) {
+    .frameLine,
+    .leaderLine {
+      stroke: CanvasText;
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * Open (default): the legend is an ordinary block (a floated legend is
+   * laid out as a flex item), then a --border-size-1 --role-hairline rule
+   * --ds-space-12 below it; content follows --size-px-5 below the rule.
+   */
+  .text .legend,
+  .ledger .legend {
+    float: inline-start;
+    inline-size: 100%;
+  }
+
+  .text .rule {
+    display: block;
+    margin-block-start: var(--ds-space-12);
+    border-block-start: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  /* Framed: a --ds-stroke-3 --primary12 frame, square; the legend sits in its top edge. */
+  .outline {
+    padding: var(--fieldset-padding);
+    border: var(--ds-stroke-3) solid var(--primary12);
+    border-radius: var(--ds-radius-none);
+  }
+
+  /* The legend's --size-px-2 break on each side of the frame line. */
+  .outline .legend {
+    padding-inline: var(--size-px-2);
+  }
+
+  /* Ledger: the dotted frame (the SVG) with padding inside it. */
+  .ledger {
+    padding: var(--fieldset-padding);
+  }
+
+  /* Framed padding: --size-px-3 at base, --size-px-7 from --lg-n-above (§10.2 tokens). */
+  @media (min-width: 1024px) {
+    .outline,
+    .ledger {
+      --fieldset-padding: var(--size-px-7);
+    }
+  }
+
+  /* Stack guard: viewport fallback first, then the Form container (§5.10.2) [D163]. */
+  @media (max-width: 359.98px) {
+    .outline,
+    .ledger {
+      --fieldset-padding: var(--ds-space-12);
+    }
+  }
+
+  @container form (width < 360px) {
+    .outline,
+    .ledger {
+      --fieldset-padding: var(--ds-space-12);
+    }
+  }
+}
+
+@layer states {
+  /* Disabled: the legend takes --role-muted with its controls; never dimmed [D16]. */
+  .legend[data-disabled] {
+    color: var(--role-muted);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Frames print through the remap (2.25 pt framed, dotted ledger); keep a group whole. */
+    .base {
+      break-inside: avoid;
+    }
+  }
+}

package/components/Fieldset/index.d.ts

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

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

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

package/components/Fieldset/index.js

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

package/components/Fieldset/index.js.map

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

package/components/Figure/Figure.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export declare const figure: (props?: ({
+    kind?: "plate" | "technical" | "photo" | null | undefined;
+    framed?: boolean | null | undefined;
+    sideCaption?: 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 FigureVariants = VariantProps<typeof figure>;
+/** Props for Figure: `figure` props and the kind, frame, caption-placement and color axes. */
+export type FigureProps = React.ComponentPropsWithRef<'figure'> & {
+    /**
+     * `photo` (default): an editorial photo, `--ds-radius-8`, the caption
+     * right-flush below it. `technical`: a chart, diagram or drawing, square,
+     * the caption left-aligned below it with the label on its own line.
+     * `plate`: a specimen plate on a nested `white` face over a fine dot
+     * grid, framed in the face's `--role-edge`; a two-ink chart may sit on it
+     * on any ground.
+     */
+    kind?: FigureVariants['kind'];
+    /** Technical figures: a `--border-size-1` `--role-rule` frame. Default `false`. */
+    framed?: boolean;
+    /**
+     * From 768 px of the figure's width, the caption sits in the adjacent
+     * column, top-aligned, beside the media. Default `false`.
+     */
+    sideCaption?: boolean;
+    /**
+     * Primary Radix scale: caption, label, credit and frames. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: FigureVariants['primary'];
+    /** Secondary Radix scale: unused by the figure itself. Never defaulted. */
+    secondary?: FigureVariants['secondary'];
+};
+/**
+ * The figure. Put a `FigureMedia` and a `FigureCaption` inside. Every
+ * figure gets a caption or a credit, for print; figure and caption never
+ * separate across printed pages.
+ */
+export declare function Figure(props: FigureProps): React.JSX.Element;
+/** Props for FigureMedia: `div` props. */
+export type FigureMediaProps = React.ComponentPropsWithRef<'div'>;
+/**
+ * The media box: an `img`, `svg` or chart. Photos fill the column;
+ * technical figures keep their native width and never scale up [D78]. A
+ * decorative photo (empty `alt`) is left out of print. On a plate it is the
+ * nested `white` face, which takes the figure's `primary` and `secondary`.
+ */
+export declare function FigureMedia(props: FigureMediaProps): React.JSX.Element;
+/** Props for FigureCaption: `figcaption` props plus the numbering and the credit. */
+export type FigureCaptionProps = React.ComponentPropsWithRef<'figcaption'> & {
+    /** The figure number; renders "Fig. 3" (or "Figure 003" with `numbering="catalog"`). */
+    number?: number | string;
+    /** `short` (default): "Fig. 3", "Fig. 3.2". `catalog`: "Figure 001" (menus, specimen sets, product sheets). */
+    numbering?: 'short' | 'catalog';
+    /** Replaces the generated label entirely. */
+    label?: React.ReactNode;
+    /** Adds "(DETAIL)" to the label, for a crop. */
+    detail?: boolean;
+    /** The credit, in the same run: "Photo: Name / Program" (`type-small`). */
+    credit?: React.ReactNode;
+};
+/**
+ * The caption: the label in `type-data`, the caption text (the children)
+ * in `type-caption` and the credit in `type-small`, all `--role-muted`.
+ * Number figures only where the text refers to them.
+ */
+export declare function FigureCaption(props: FigureCaptionProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Figure.d.ts.map

package/components/Figure/Figure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Figure.d.ts","sourceRoot":"","sources":["../../src/components/Figure/Figure.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA6CjE,eAAO,MAAM,MAAM;;;;;;8EAsBjB,CAAA;AAEF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAA;AAgBjD,8FAA8F;AAC9F,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,GAAG;IAChE;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAC7B,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;CACxC,CAAA;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAoBxC;AAED,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAA;AAEjE;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAkBlD;AAED,qFAAqF;AACrF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,qBAAqB,CAAC,YAAY,CAAC,GAAG;IAC3E,wFAAwF;IACxF,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,+GAA+G;IAC/G,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAuBtD"}