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

package/components/Meter/meter.module.css

@@ -1,384 +0,0 @@
-/*
- * Meter (§10.18; constructions §8.9). CVA functions `meter` and
- * `meterStatus`. Ink only: track edges, indicators, filled cells, ticks,
- * the arrow and labels are --primary12; the track interior shows the
- * ground; ring tracks are --role-hairline. No part uses the secondary, so a
- * meter never reads as a chart series. Status glyphs take --role-status of
- * their own status scale. Colors are role variables only.
- *
- * Print [D126]: the indicator and filled cells compose `patternHatch`. On
- * screen its --primary12 marks sit on the part's own --primary12 fill and
- * disappear into it; in print the fill drops and the 45° hatch (its layer
- * carries `print-color-adjust: exact`) prints black inside the outline,
- * closed by an edge at the value.
- *
- * Local properties (counts and positions, never colors):
- *   --meter-stops, --meter-stop-index   ordinal geometry, set inline
- *   --meter-threshold                   the threshold position, set inline
- */
-
-/* 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: typeLabel from '../../utils/type.module.css';
-}
-
-.value {
-  composes: typeData from '../../utils/type.module.css';
-}
-
-.stopLabel {
-  composes: typeLabel from '../../utils/type.module.css';
-}
-
-.statusText {
-  composes: typeCaption from '../../utils/type.module.css';
-}
-
-.indicator {
-  composes: patternHatch from '../../utils/pattern.module.css';
-}
-
-.cellFilled {
-  composes: patternHatch from '../../utils/pattern.module.css';
-}
-
-@layer base {
-  /* Label and value above a full-width track (§8.9 responsive baseline). */
-  .base {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    grid-template-areas:
-      'label readout'
-      'track track';
-    align-items: baseline;
-    gap: var(--size-px-1) var(--size-px-3);
-    min-inline-size: 0;
-    color: var(--primary12);
-  }
-
-  .label {
-    grid-area: label;
-    color: var(--primary12);
-  }
-
-  .readout {
-    grid-area: readout;
-    justify-self: end;
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--size-px-1) var(--size-px-2);
-  }
-
-  .value {
-    color: var(--primary12);
-    white-space: nowrap;
-  }
-
-  /* Linear: a --border-size-1 outlined --primary12 track, 8 px tall, square in data modules. */
-  .track {
-    grid-area: track;
-    align-self: center;
-    position: relative;
-    box-sizing: content-box;
-    block-size: calc(var(--size-px-2) - 2 * var(--border-size-1));
-    border: var(--border-size-1) solid var(--primary12);
-    border-radius: var(--ds-radius-none);
-  }
-
-  /* Solid --primary12; its height is Base UI's inline `inherit`. Only the value edge prints as a line. */
-  .indicator {
-    display: block;
-    box-sizing: border-box;
-    border-width: 0;
-    border-inline-end-width: var(--border-size-1);
-    background-color: var(--primary12);
-  }
-
-  /* Threshold: a --ds-space-12 tick at --border-size-2 across the track (a border, so it prints). */
-  .threshold {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: var(--meter-threshold);
-    inline-size: 0;
-    block-size: var(--ds-space-12);
-    margin-block-start: calc(var(--ds-space-12) / -2);
-    margin-inline-start: calc(var(--border-size-2) / -2);
-    border-inline-start: var(--border-size-2) solid var(--primary12);
-  }
-
-  /* Segmented: outlined --ds-space-12 cells, --border-size-1, 2 px apart; filled cells solid. */
-  .cell {
-    flex: none;
-    box-sizing: border-box;
-    inline-size: var(--ds-space-12);
-    block-size: var(--ds-space-12);
-    border: var(--border-size-1) solid var(--primary12);
-  }
-
-  .cellFilled {
-    background-color: var(--primary12);
-  }
-
-  /* Ordinal: a --border-size-1 track with stop ticks, caps labels under the stops. */
-  .stop {
-    position: absolute;
-    inset-block-start: var(--ds-space-12);
-    inset-inline-start: calc((var(--meter-stop-index) + 0.5) / var(--meter-stops) * 100%);
-    block-size: var(--size-px-2);
-    margin-inline-start: calc(var(--border-size-1) / -2);
-    border-inline-start: var(--border-size-1) solid var(--primary12);
-  }
-
-  .stopActive {
-    margin-inline-start: calc(var(--border-size-2) / -2);
-    border-inline-start-width: var(--border-size-2);
-  }
-
-  /* The active stop's arrow-triangle: outlined, never filled (§1.5.8). */
-  .arrow {
-    display: none;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: calc((var(--meter-stop-index) + 0.5) / var(--meter-stops) * 100%);
-    inline-size: var(--ds-space-12);
-    block-size: var(--size-px-2);
-    margin-inline-start: calc(var(--ds-space-12) / -2);
-    overflow: visible;
-    fill: none;
-    stroke: var(--primary12);
-    stroke-width: var(--ds-stroke-1-25);
-    stroke-linejoin: round;
-  }
-
-  .stops {
-    grid-area: stops;
-    display: grid;
-    grid-template-columns: repeat(var(--meter-stops), minmax(0, 1fr));
-    column-gap: var(--size-px-1);
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .stopLabel {
-    color: var(--primary12);
-    text-align: center;
-    overflow-wrap: anywhere;
-  }
-
-  /* The active label is bold and one step larger, so it never depends on the arrow alone. */
-  .stopLabelActive {
-    --type-weight: var(--font-weight-7);
-
-    font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-caption);
-  }
-
-  /* Ring: a --border-size-2 --primary12 arc over a --role-hairline track, always with its value. */
-  .ring {
-    grid-area: track;
-    display: block;
-    inline-size: var(--size-px-4);
-    block-size: var(--size-px-4);
-    overflow: visible;
-  }
-
-  .ringTrack,
-  .ringArc {
-    fill: none;
-    stroke-width: var(--border-size-2);
-  }
-
-  .ringTrack {
-    stroke: var(--role-hairline);
-  }
-
-  .ringArc {
-    stroke: var(--primary12);
-  }
-
-  /* Status: the §1.5.4 glyph in --role-status (its status scale) plus the word in --primary12. */
-  .status {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--size-px-1);
-  }
-
-  .success,
-  .warning,
-  .danger {
-    color: var(--primary12);
-  }
-
-  .statusGlyph {
-    flex: none;
-    display: block;
-    inline-size: var(--size-px-3);
-    block-size: var(--size-px-3);
-    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;
-  }
-
-  .statusText {
-    color: var(--primary12);
-  }
-
-  /* The meter-panel container (§10.18): a stack of meters that reflow on its width. */
-  .panel {
-    container: meter-panel / inline-size;
-    /* Size containment leaves no intrinsic width: fill the box, never collapse as a flex or shrink-to-fit item. */
-    inline-size: 100%;
-    display: grid;
-    gap: var(--size-px-5);
-    min-inline-size: 0;
-  }
-
-  @media (forced-colors: active) {
-    .indicator,
-    .cellFilled {
-      forced-color-adjust: none;
-      background-color: CanvasText;
-    }
-
-    .ringArc {
-      forced-color-adjust: none;
-      stroke: CanvasText;
-    }
-
-    .statusGlyph {
-      forced-color-adjust: none;
-      color: CanvasText;
-      fill: Canvas;
-      stroke: Canvas;
-    }
-  }
-}
-
-@layer variants {
-  .steps .track {
-    justify-self: start;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--border-size-2);
-    block-size: auto;
-    border-width: 0;
-  }
-
-  /* Ordinal: arrow, 4 px, ticks crossing the 1 px line; labels below; the value is the active label. */
-  .ordinal {
-    grid-template-areas:
-      'label readout'
-      'track track'
-      'stops stops';
-  }
-
-  .ordinal .track {
-    block-size: var(--size-px-4);
-    border-width: 0;
-  }
-
-  .ordinal .track::before {
-    content: '';
-    position: absolute;
-    inset-block-start: calc(var(--ds-space-12) + var(--size-px-1));
-    inset-inline: calc(50% / var(--meter-stops));
-    border-block-start: var(--border-size-1) solid var(--primary12);
-  }
-
-  .ordinal .arrow {
-    display: block;
-  }
-
-  /* Ring: inline, the ring beside its value; its tracks pack at the start even when stretched in a panel. */
-  .kindRing {
-    display: inline-grid;
-    grid-template-columns: auto auto auto;
-    grid-template-areas: 'label track readout';
-    justify-content: start;
-    align-items: center;
-    column-gap: var(--size-px-2);
-  }
-
-  /* Viewport fallback: label | track | value in one row from --md-n-above… */
-  @media (min-width: 768px) {
-    .bar,
-    .steps {
-      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
-      grid-template-areas: 'label track readout';
-    }
-
-    /* The ordinal scale takes the track column, its labels under it. */
-    .ordinal {
-      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
-      grid-template-areas:
-        'label track readout'
-        '. stops .';
-    }
-  }
-
-  /* …refined by the meter-panel container: stacked below 768 px, rows from 768 (§5.10.2). */
-  @container meter-panel (width < 768px) {
-    .bar,
-    .steps {
-      grid-template-columns: minmax(0, 1fr) auto;
-      grid-template-areas:
-        'label readout'
-        'track track';
-    }
-
-    .ordinal {
-      grid-template-columns: minmax(0, 1fr) auto;
-      grid-template-areas:
-        'label readout'
-        'track track'
-        'stops stops';
-    }
-  }
-
-  @container meter-panel (width >= 768px) {
-    .bar,
-    .steps {
-      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
-      grid-template-areas: 'label track readout';
-    }
-
-    .ordinal {
-      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
-      grid-template-areas:
-        'label track readout'
-        '. stops .';
-    }
-  }
-
-  /*
-   * Below 360 px of the panel, ordinal labels turn vertical (§10.18), all
-   * kept: each reads upward and hangs from its tick, so a long word never
-   * breaks mid-word in a narrow column.
-   */
-  @container meter-panel (width < 360px) {
-    .stopLabel {
-      justify-self: center;
-      writing-mode: sideways-lr;
-      text-align: end;
-      overflow-wrap: normal;
-    }
-  }
-}
-
-@layer print {
-  @media print {
-    /* Linear and segmented values print as the 45° hatch (composed); the numeral and status stay. */
-    .base {
-      break-inside: avoid;
-    }
-  }
-}

package/components/NavDrawer/NavDrawer.d.ts

@@ -1,113 +0,0 @@
-import * as React from 'react';
-import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
-import { type VariantProps } from 'class-variance-authority';
-import { type SitemapSection } from '../../utils/navigation';
-export declare const navigationDrawer: (props?: ({
-    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 NavigationDrawerVariants = VariantProps<typeof navigationDrawer>;
-/** Props for NavDrawer. */
-export type NavDrawerProps = {
-    /**
-     * The top-level rows from the shared navigation data (utils/navigation),
-     * the object that also feeds `NavigationMenuSections` and `Footer`'s
-     * `sitemap` [D187]. A section with links is a group (its landing page
-     * first, then its links); one with only an `href` is a direct link. They
-     * come before `children`.
-     */
-    sections?: readonly SitemapSection[];
-    /** The top-level rows: `NavDrawerGroup`s and direct `NavDrawerLink`s. */
-    children?: React.ReactNode;
-    /** The fixed footer zone: a `NavDrawerFooter`. */
-    footer?: React.ReactNode;
-    /** The menu Button's label, authored in title case [D160]. Default "Menu". */
-    label?: string;
-    /** The close control's label. Default "Close". */
-    closeLabel?: string;
-    /** The drawer `nav`'s name. Default "Main". */
-    navLabel?: string;
-    /** The logo repeated in the drawer's bar. Default: the Navigation Bar's. */
-    logo?: React.ReactNode;
-    /** The logo link. Default: the Navigation Bar's, else "/". */
-    logoHref?: string;
-    /** The logo link's accessible name. Default: the Navigation Bar's. */
-    logoLabel?: string;
-    /** The current page's URL path. Default: the Navigation Bar's. */
-    currentPath?: string;
-    /** Controlled open state. */
-    open?: boolean;
-    /** Initial open state. Default `false`. */
-    defaultOpen?: boolean;
-    /** Called when the drawer opens or closes. */
-    onOpenChange?: (open: boolean) => void;
-    /** Override the header scope's primary. Never defaulted [D133]. */
-    primary?: NavigationDrawerVariants['primary'];
-    /** Override the header scope's secondary. Never defaulted. */
-    secondary?: NavigationDrawerVariants['secondary'];
-    /** Class names for the sheet, added after its own. */
-    className?: string;
-    /** Class names for the menu Button, added after its own. */
-    triggerClassName?: string;
-};
-/**
- * The navigation drawer below --ds-nav-inline-n-above [D183]: the menu
- * Button (the `menu` icon plus "Menu"; × plus "Close" while open) and a
- * modal Dialog sheet in the header's own scope, full screen below
- * --md-n-above and a 480 px side sheet with a --ds-stroke-3 inner edge
- * from it. The sheet repeats the header's bar with the close control where
- * the menu Button was, lists independent Collapsible groups and direct
- * links in a Scroll Area, and keeps its footer fixed. Focus moves to the
- * first row, is trapped, and returns to the menu Button; no backdrop is
- * painted. If the viewport reaches the inline threshold while open, it
- * closes and focus goes to the matching bar item. Put it in the Navigation
- * Bar's `drawer` slot.
- */
-export declare function NavDrawer(props: NavDrawerProps): React.JSX.Element;
-/** Props for NavDrawerGroup: Base UI Collapsible Root props, the row label and its links. */
-export type NavDrawerGroupProps = Omit<BaseCollapsible.Root.Props, 'children'> & {
-    /** The group row's label, in the display serif (`type-itemhead`). */
-    label: React.ReactNode;
-    /** The group's `NavDrawerLink`s. Nest groups one level deep at most. */
-    children?: React.ReactNode;
-};
-/**
- * One top-level group: an independent Collapsible whose trigger row shows
- * LTA's expand/collapse glyph [D109] (outward in --role-muted, inward in
- * --primary12 when open; it swaps, never rotates), over its child links on
- * an indent guide. A group holding the current page opens by default and
- * its row takes the start-edge bar (`aria-current="true"`).
- */
-export declare function NavDrawerGroup(props: NavDrawerGroupProps): React.JSX.Element;
-/** Props for NavDrawerLink: anchor props plus an explicit current flag. */
-export type NavDrawerLinkProps = React.ComponentProps<'a'> & {
-    /** Marks the link as the current page. Default: its path equals the drawer's `currentPath`. */
-    active?: boolean;
-};
-/**
- * A drawer link. At the top level it is a direct link, styled as a group
- * row without the glyph (the bare-text underline on hover); in a group, a
- * `type-body-ui` child link on the indent guide; in the footer, a utility
- * link. Child and footer links are list links, whose hover is color only
- * [D181]. The current page takes `aria-current="page"`, the --ds-stroke-3
- * start-edge bar and weight 700.
- */
-export declare function NavDrawerLink(props: NavDrawerLinkProps): React.JSX.Element;
-/** Props for NavDrawerFooter: `div` props, the action and the locale Select. */
-export type NavDrawerFooterProps = Omit<React.ComponentProps<'div'>, 'children'> & {
-    /** The primary pill: a `solid` Button at `size="lg"`, hugging its label. */
-    action?: React.ReactNode;
-    /** The locale Select (or a locale link). */
-    locale?: React.ReactNode;
-    /** Utility links (`NavDrawerLink`s): the utility bar's links, repeated. */
-    children?: React.ReactNode;
-};
-/**
- * The drawer's fixed footer zone, under a --border-size-2 --role-rule: the
- * primary pill first (where the header's action goes below 360 px), then
- * the utility links at a --ds-size-hit pitch, then the locale Select. Put
- * it in the drawer's `footer`.
- */
-export declare function NavDrawerFooter(props: NavDrawerFooterProps): React.JSX.Element;
-export {};
-//# sourceMappingURL=NavDrawer.d.ts.map

package/components/NavDrawer/NavDrawer.d.ts.map

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