@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.1

package/components/NumberField/number-field.module.css

@@ -1,429 +0,0 @@
-/*
- * Number Field (§10.4). CVA function `numberField`. Parts: `base` (the
- * root), `group` (the field box), `decrement`, `input`, `increment`,
- * `affix` (prefix or suffix unit), `scrub` (the scrub area on the label);
- * `valueText` / `valueAmount` / `valueReadout` and `unitText` / `unitCaption`
- * carry the type role per kind (a composed type role cannot be switched from
- * a descendant selector); `edge` / `edgeLine` and `cellEdge` / `cellEdgeLine`
- * draw the dotted disabled edges as true dots [D36, D68]. Colors are role
- * variables only; local custom properties carry dimensions only.
- *
- * The stepper is confirmed [D174]: square −/+ cells butted to the input,
- * divided by --border-size-1 rules, one --radius-1 outer radius [D41].
- */
-
-/* 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. */
-.valueText {
-  composes: typeBodyUi from '../../utils/type.module.css';
-}
-
-.valueAmount {
-  composes: typeItemhead from '../../utils/type.module.css';
-}
-
-.valueReadout {
-  composes: typeReadout from '../../utils/type.module.css';
-}
-
-.unitText {
-  composes: typeBodyUi typeMuted from '../../utils/type.module.css';
-}
-
-.unitCaption {
-  composes: typeCaption typeMuted from '../../utils/type.module.css';
-}
-
-.edgeLine,
-.cellEdgeLine {
-  composes: lineDottedFine from '../../utils/line.module.css';
-}
-
-@layer base {
-  .base {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    min-inline-size: 0;
-    color: var(--primary12);
-  }
-
-  /* The scrub area wraps the label; scrubbing is for fine pointers (§10.4). */
-  .scrub {
-    display: inline-flex;
-    align-self: start;
-  }
-
-  /*
-   * The group is the §10.1 field box: --size-px-8 tall, --radius-1 outside
-   * and 0 at the seams, --border-size-1 --role-rule; at least --size-px-12
-   * wide at every width.
-   */
-  .group {
-    /* Local dimensions. */
-    --number-field-edge: var(--border-size-1);
-    --number-field-radius: var(--radius-1);
-
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    box-sizing: border-box;
-    inline-size: 100%;
-    min-inline-size: var(--size-px-12);
-    block-size: var(--size-px-8);
-    border: var(--number-field-edge) solid var(--role-rule);
-    border-radius: var(--number-field-radius);
-    overflow: clip;
-    background: none;
-    color: var(--primary12);
-  }
-
-  /* The value: type-body-ui with data numerals, centered, so it never jitters while stepping. */
-  .input {
-    flex: 1 1 auto;
-    inline-size: 100%;
-    min-inline-size: 0;
-    margin: 0;
-    padding-block: 0;
-    padding-inline: var(--ds-space-12);
-    border: 0;
-    border-radius: 0;
-    background: none;
-    color: inherit;
-    font-variant-numeric: var(--ds-numerals-data);
-    text-align: center;
-    appearance: none;
-  }
-
-  .input::placeholder {
-    color: var(--role-muted);
-  }
-
-  /* Units in --role-muted, joined to the value by a no-break space [D32]. */
-  .affix {
-    flex: none;
-    align-self: center;
-    white-space: nowrap;
-  }
-
-  /* With a unit, the value ends at the unit, so "12 kg" reads as one run. */
-  .group:has(.affix) .input {
-    padding-inline: 0;
-    text-align: end;
-  }
-
-  .input + .affix {
-    padding-inline-end: var(--ds-space-12);
-  }
-
-  .affix:has(+ .input) {
-    padding-inline-start: var(--ds-space-12);
-  }
-
-  /* Step cells: --size-px-8 squares joined to the input; glyphs remove / add, inline tier [D166]. */
-  .decrement,
-  .increment {
-    position: relative;
-    flex: none;
-    display: grid;
-    place-items: center;
-    inline-size: var(--size-px-8);
-    margin: 0;
-    padding: 0;
-    border: 0 solid var(--role-rule);
-    border-radius: 0;
-    background: none;
-    color: var(--primary12);
-    appearance: none;
-  }
-
-  /* Disabled edge hosts, shown only while disabled. */
-  .edge {
-    display: none;
-    position: absolute;
-    inset-block-start: calc(var(--ds-dot-fine) / 2);
-    inset-inline-start: calc(var(--ds-dot-fine) / 2);
-    inline-size: calc(100% - var(--ds-dot-fine));
-    block-size: calc(100% - var(--ds-dot-fine));
-    overflow: visible;
-    pointer-events: none;
-  }
-
-  .edgeLine {
-    fill: none;
-    stroke: var(--role-disabled-edge);
-    rx: calc(var(--number-field-radius) - var(--ds-dot-fine) / 2);
-  }
-
-  /* A step cell's dotted divider (or, on the readout, its dotted circle). */
-  .cellEdge {
-    display: none;
-    position: absolute;
-    inset-block: 0;
-    inline-size: var(--ds-dot-fine);
-    block-size: 100%;
-    overflow: visible;
-    pointer-events: none;
-  }
-
-  /* The divider sits where the cell's solid rule was: its last pixel column. */
-  .decrement .cellEdge {
-    inset-inline-end: 0;
-  }
-
-  .increment .cellEdge {
-    inset-inline-start: 0;
-  }
-
-  .cellEdgeLine {
-    fill: none;
-    stroke: var(--role-disabled-edge);
-  }
-
-  @media (forced-colors: active) {
-    .edgeLine,
-    .cellEdgeLine {
-      stroke: currentColor;
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .group,
-    .decrement,
-    .increment {
-      transition-property: border-color, background-color, color;
-      transition-duration: var(--ds-duration-quick);
-      transition-timing-function: var(--ease-out-3);
-    }
-  }
-
-  /* From --lg-n-above the group hugs its content and never stretches (§10.4). */
-  @media (min-width: 1024px) {
-    .group {
-      inline-size: fit-content;
-    }
-
-    .input {
-      inline-size: auto;
-      min-inline-size: 6ch;
-      field-sizing: content;
-    }
-  }
-}
-
-@layer variants {
-  /* Stepper (default): the cells are divided from the input by --border-size-1 rules. */
-  .stepper .decrement {
-    border-inline-end-width: var(--border-size-1);
-  }
-
-  .stepper .increment {
-    border-inline-start-width: var(--border-size-1);
-  }
-
-  /* Amount: no steppers; the value in type-itemhead with lining tabular figures, from the start. */
-  .amount .input {
-    text-align: start;
-  }
-
-  /*
-   * Readout: in-flow circular −/+ buttons around a large mono value with a
-   * unit caption, for dashboards. No field box.
-   */
-  .readout .group {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    grid-template-areas:
-      'decrement value increment'
-      'decrement unit increment';
-    align-items: center;
-    column-gap: var(--size-px-3);
-    block-size: auto;
-    min-inline-size: 0;
-    border: 0;
-    border-radius: 0;
-    overflow: visible;
-  }
-
-  .readout .input {
-    grid-area: value;
-    inline-size: 100%;
-    padding: 0;
-    text-align: center;
-    field-sizing: fixed;
-  }
-
-  .readout .affix {
-    grid-area: unit;
-    justify-self: center;
-    padding: 0;
-  }
-
-  .readout .decrement,
-  .readout .increment {
-    --number-field-cell-edge: var(--border-size-2);
-
-    inline-size: var(--ds-size-control-md);
-    block-size: var(--ds-size-control-md);
-    border: var(--number-field-cell-edge) solid var(--primary12);
-    border-radius: var(--radius-round);
-  }
-
-  .readout .decrement {
-    grid-area: decrement;
-  }
-
-  .readout .increment {
-    grid-area: increment;
-  }
-
-  /* Every readout target reaches --ds-size-hit [D43]. */
-  .readout .decrement::after,
-  .readout .increment::after {
-    content: '';
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-    inline-size: var(--ds-size-hit);
-    block-size: var(--ds-size-hit);
-    translate: -50% -50%;
-  }
-
-  .readout .cellEdge {
-    inset: calc(var(--ds-dot-fine) / 2);
-    inline-size: calc(100% - var(--ds-dot-fine));
-    block-size: calc(100% - var(--ds-dot-fine));
-  }
-
-  /* Stack guard: below --xs-n-below the readout buttons stack under the value [D73]. */
-  @media (max-width: 359.98px) {
-    .readout .group {
-      grid-template-columns: 1fr 1fr;
-      grid-template-areas:
-        'value value'
-        'unit unit'
-        'decrement increment';
-      row-gap: var(--size-px-2);
-      justify-items: center;
-    }
-  }
-
-  /*
-   * Plate: the group's face is the nested white scope's --primary1 (§10.1).
-   * The group is also a Ground face, whose own classes share the base
-   * layer, so its display and edge are restated here.
-   */
-  .plate .group {
-    display: flex;
-    border: var(--number-field-edge) solid var(--role-rule);
-    background-color: var(--primary1);
-  }
-}
-
-@layer states {
-  /* Hover (not disabled): the 1 px edge steps to --primary12 at the same weight [D140]. */
-  .group:hover:not([data-disabled], [data-readonly], [data-invalid]) {
-    border-color: var(--primary12);
-  }
-
-  /*
-   * Step cells and readout buttons: the glyph swaps to the next tier's
-   * weight on hover and press (Icon weight="interactive", hosted by the
-   * cell; §10.1 icon states). The readout edge never changes [D181].
-   */
-
-  /* Focus: the ring on any focus of the input, drawn outside the group [D90]. */
-  .group[data-focused] {
-    outline: var(--border-size-2) solid var(--primary12);
-    outline-offset: var(--border-size-2);
-  }
-
-  .input:focus-visible {
-    outline: none;
-  }
-
-  /* The readout has no box: the ring surrounds the value. */
-  .readout .group[data-focused] {
-    outline: none;
-  }
-
-  .readout .input:focus {
-    outline: var(--border-size-2) solid var(--primary12);
-    outline-offset: var(--border-size-2);
-  }
-
-  /* Held step cell: the inverse pair [D84]. */
-  .decrement:active:not([data-disabled]),
-  .increment:active:not([data-disabled]) {
-    background-color: var(--primary12);
-    color: var(--role-inverse);
-  }
-
-  /* Error: the --border-size-2 edge in --role-status (the danger scale) [D141, D155]. */
-  .group[data-invalid] {
-    --number-field-edge: var(--border-size-2);
-
-    border-color: var(--role-status);
-  }
-
-  /* Disabled: dotted edges, --role-muted inks, no face; never dimmed [D16, D85]. */
-  .group[data-disabled] {
-    --number-field-edge: 0px;
-
-    padding: var(--border-size-1);
-    border-style: none;
-    background: none;
-    color: var(--role-muted);
-  }
-
-  .group[data-disabled] .edge {
-    display: block;
-  }
-
-  /* A step cell at its minimum or maximum (or in a disabled field): dotted edge, --role-muted glyph. */
-  .decrement[data-disabled],
-  .increment[data-disabled] {
-    border-style: none;
-    color: var(--role-muted);
-  }
-
-  .decrement[data-disabled] {
-    padding-inline-end: var(--border-size-1);
-  }
-
-  .increment[data-disabled] {
-    padding-inline-start: var(--border-size-1);
-  }
-
-  .decrement[data-disabled] .cellEdge,
-  .increment[data-disabled] .cellEdge {
-    display: block;
-  }
-
-  /* Read-only: the box is removed, a --border-size-1 bottom rule remains; steppers leave. */
-  .group[data-readonly] {
-    border-width: 0 0 var(--border-size-1);
-    border-radius: var(--ds-radius-none);
-    background: none;
-  }
-
-  .group[data-readonly] .decrement,
-  .group[data-readonly] .increment {
-    display: none;
-  }
-}
-
-@layer print {
-  @media print {
-    /* The value and its unit print in the frame; step cells are interaction only. */
-    .decrement,
-    .increment {
-      display: none;
-    }
-
-    .input::placeholder {
-      font-size: 0;
-    }
-  }
-}

package/components/Pagination/Pagination.d.ts

@@ -1,112 +0,0 @@
-import * as React from 'react';
-import { type VariantProps } from 'class-variance-authority';
-export declare const pagination: (props?: ({
-    kind?: "compact" | "step" | "dots" | "numbered" | "more" | 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;
-export type PaginationVariants = VariantProps<typeof pagination>;
-export type PaginationKind = NonNullable<PaginationVariants['kind']>;
-/** The items on the current page, for the printed state line (§7.12.1). */
-export interface PaginationItems {
-    /** The first item's position on this page, e.g. 41. */
-    first: number;
-    /** The last item's position on this page, e.g. 50. */
-    last: number;
-    /** The item count across every page, e.g. 118. */
-    total: number;
-}
-/** The props every form shares: `nav` props, the page, the count, the labels and the color axes. */
-interface PaginationCommonProps extends Omit<React.ComponentPropsWithRef<'nav'>, 'children'> {
-    /** The current page (or item), 1-based. */
-    page: number;
-    /** The page (or item) count. */
-    count: number;
-    /**
-     * Builds each anchor, e.g. `(href) => <NextLink href={href} />`. Default: a
-     * plain `<a href>`.
-     */
-    renderLink?: (href: string) => React.ReactElement;
-    /**
-     * Primary Radix scale: numerals, labels, the current bar and the focus
-     * ring. Never defaulted; omitted, it inherits the scope [D133].
-     */
-    primary?: PaginationVariants['primary'];
-    /** Secondary Radix scale: the Previous and Next arrows on light grounds. Never defaulted. */
-    secondary?: PaginationVariants['secondary'];
-    /**
-     * The Previous label, authored in sentence case; the CSS sets the caps
-     * [D165]. On the step pager it is the ‹ button's accessible name. Default
-     * "Previous".
-     */
-    previousLabel?: string;
-    /**
-     * The Next label, authored in sentence case; the CSS sets the caps
-     * [D165]. On the step pager it is the › button's accessible name. Default
-     * "Next".
-     */
-    nextLabel?: string;
-    /** The items on this page. Given, the pager prints "Items 41–50 of 118." in its place. */
-    items?: PaginationItems;
-    /** The full list's URL, printed after the state line per §7.6 ("Full list (example.org/birds)"). */
-    fullListHref?: string;
-}
-/** Which form, and how it moves between pages. */
-type PaginationFormProps = {
-    /**
-     * `numbered` (default): ‹ Previous · 1 … 4 5 6 … 12 · Next ›, shown
-     * from 768 px of its own width and compact below. `compact`:
-     * ‹ Previous · Page 5 of 12 · Next › at every width, for lists over 50
-     * pages.
-     */
-    kind?: 'numbered' | 'compact';
-    /** Every page's URL: each page is a link, never a click handler alone (P8). */
-    getHref: (page: number) => string;
-    onPageChange?: never;
-    moreLabel?: never;
-} | {
-    /**
-     * `step`: icon-only ‹ › circles around a mono "3 of 12", for carousels
-     * and figures. `dots`: the step pager plus up to 8 dots, the count
-     * still shown; with more than 8 it is the plain step pager. Neither
-     * prints.
-     */
-    kind: 'step' | 'dots';
-    /** Given, the step buttons are links to these URLs. */
-    getHref?: (page: number) => string;
-    /** Called with the target page when a step button is pressed. Pass it, `getHref`, or both. */
-    onPageChange?: (page: number) => void;
-    moreLabel?: never;
-} | {
-    /**
-     * `more`: the count ("Showing 20 of 54") over an outline "Show More"
-     * Button, for feeds. Each step is a link to the next page's URL (P8);
-     * the Button is omitted once everything shows.
-     */
-    kind: 'more';
-    /** Every page's URL; the Button links to the next one. */
-    getHref: (page: number) => string;
-    /** The items showing, for "Showing 20 of 54" and the printed state line. */
-    items: PaginationItems;
-    /** The Button's label, authored in title case [D160]. Default "Show More". */
-    moreLabel?: string;
-    onPageChange?: never;
-};
-/** Props for Pagination: `nav` props, the page, the count, the form and how it moves, and the color axes. */
-export type PaginationProps = PaginationCommonProps & PaginationFormProps;
-/**
- * A `nav` named "Pagination". `numbered` and `compact`: Previous at the
- * start, the page numbers (or the "Page 5 of 12" status) centered, Next at
- * the end; Previous and Next are `type-label` caps with Material Symbols
- * `chevron_left` / `chevron_right` at the inline tier; page numerals are
- * mono at `type-label` size with tabular figures, so a changing count never
- * shifts the row [D165, D174, D175]. The current page is unlinked, bold and
- * barred. `step` and `dots`: icon-only ‹ › circles around a mono "3 of 12"
- * (plus up to 8 dots). `more`: "Showing 20 of 54" over a "Show More"
- * Button. At the ends a control is omitted and its space kept, never
- * disabled. The pager is hidden in print; with `items` the linked forms
- * print one state line instead.
- */
-export declare function Pagination(props: PaginationProps): React.JSX.Element | null;
-export {};
-//# sourceMappingURL=Pagination.d.ts.map

package/components/Pagination/Pagination.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA6CjE,eAAO,MAAM,UAAU;;;;8EAgBrB,CAAA;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAA;AAChE,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAA;AAEpE,2EAA2E;AAC3E,MAAM,WAAW,eAAe;IAC9B,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAA;IACZ,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,oGAAoG;AACpG,UAAU,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1F,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAA;IACZ,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAA;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAA;IACvC,6FAA6F;IAC7F,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,oGAAoG;IACpG,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,kDAAkD;AAClD,KAAK,mBAAmB,GACpB;IACE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IAC7B,+EAA+E;IAC/E,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,SAAS,CAAC,EAAE,KAAK,CAAA;CAClB,GACD;IACE;;;;;OAKG;IACH,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,8FAA8F;IAC9F,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,KAAK,CAAA;CAClB,GACD;IACE;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,4EAA4E;IAC5E,KAAK,EAAE,eAAe,CAAA;IACtB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,KAAK,CAAA;CACrB,CAAA;AAEL,6GAA6G;AAC7G,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,mBAAmB,CAAA;AAuFzE;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,4BA4MhD"}