@crewlethq/ui 0.2.0 → 0.3.0

package/dist/BrandLockup/BrandLockup.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+/** What a caller is handed when it draws the link element itself. */
+export interface BrandLinkProps {
+    className: string;
+    children: ReactNode;
+    /** Present only when `href` was given; a router link takes its own target. */
+    href?: string | undefined;
+    'aria-label': string;
+}
+export interface BrandLockupProps {
+    /** The product's name, and the name of the link. Required, for that reason. */
+    name: string;
+    /** The mark. DECORATION: the name beside it is what a reader is told. */
+    mark?: ReactNode;
+    /**
+     * Where the reader is: the company, the workspace, "Superadmin". It sits
+     * under the product name, because on this screen the company is the subject
+     * and the product is the tool.
+     */
+    context?: ReactNode;
+    /** Home. Without it, and without `renderLink`, the lockup is not a link. */
+    href?: string | undefined;
+    /** Draws the link element, for a router that owns navigation (conlet's NavLink). */
+    renderLink?: ((props: BrandLinkProps) => ReactNode) | undefined;
+    className?: string | undefined;
+}
+/**
+ * The mark, the product name and what the reader is inside, as one block at
+ * the head of the rail.
+ *
+ * THE LINK IS NAMED BY THE PRODUCT, and the context line is outside it. Inside
+ * it, the link's accessible name would be "Crewlet Acme Holdings" and would
+ * change whenever the company was renamed, so the one landmark that always
+ * means "go home" would be announced differently on every deployment. It stays
+ * readable, drawn on the line below and indented to the name above it by the
+ * mark's own box, which is a component variable rather than a guess.
+ *
+ * The mark is hidden from assistive technology: a logo beside its own name is
+ * the definition of decoration.
+ */
+export declare function BrandLockup({ name, mark, context, href, renderLink, className }: BrandLockupProps): import("react/jsx-runtime").JSX.Element;

package/dist/BrandLockup/index.d.ts

@@ -0,0 +1,3 @@
+import './BrandLockup.css';
+export { BrandLockup } from './BrandLockup.js';
+export type { BrandLinkProps, BrandLockupProps } from './BrandLockup.js';

package/dist/BrandLockup/index.js

@@ -0,0 +1,2 @@
+export { BrandLockup } from '../chunk-WNI2WSJF.js';
+import '../chunk-ODEQTPFM.js';

package/dist/BrandLockup-6ISDEHPJ.css

@@ -0,0 +1,108 @@
+/*
+ * The brand lockup at the head of the rail.
+ *
+ * ONE INSET FOR THE WHOLE RAIL, so the mark, the group labels and the row
+ * text all start on the same vertical line. The lockup has no row of its own,
+ * so it adds the rail's gutter to a row's pad rather than spending a literal
+ * somebody has to remember to move when either changes.
+ */
+
+/*
+ * IT FITS THE BAR IT IS DRAWN BESIDE. The rail's head is the top bar's own
+ * height (64px, a fixed token at every density), so the lockup has to come in
+ * under that height with its context line on: mark 24 plus one 11px line at
+ * the document's own leading plus twice the block padding is 56.5px at the
+ * normal density and 58.7px at comfortable. It was 66.5px, which grew the head
+ * past the bar and put a visible kink across the window on every deployment
+ * that names a company.
+ *
+ * NO GAP BETWEEN THE TWO LINES. They are one lockup rather than two stacked
+ * labels, and the leading is the space between them: a gap on top of it reads
+ * as a product name with a caption under it, which is the wrong relation. Both
+ * lines take the DOCUMENT'S leading rather than a tight step of their own,
+ * because the eight pixels it spends here are eight the rail's head already
+ * has and the two lines otherwise sit closer together than any other pair of
+ * lines in the product.
+ */
+.crewlet-brand {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  /* The mark's box, and what the context line is indented by. It is also the
+     link's target height, so it sits on the 24px floor rather than under it.
+     A consumer with a wider mark sets this rather than editing two rules. */
+  --crewlet-brand-mark: 24px;
+  padding: var(--spacing-2) calc(var(--size-nav-gutter) + var(--size-nav-row-pad));
+}
+
+.crewlet-brand__home {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-primary);
+  text-decoration: none;
+}
+
+.crewlet-brand__home:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-brand__mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--crewlet-brand-mark);
+  height: var(--crewlet-brand-mark);
+}
+
+.crewlet-brand__mark > * {
+  width: 100%;
+  height: 100%;
+}
+
+.crewlet-brand__name {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Indented to the name above it by the mark's own box, and truncated: a
+   company name is as long as somebody registered it.
+
+   THE RAIL'S OWN MICRO-LABEL REGISTER, which is the wide step rather than the
+   wider one an Eyebrow takes: this line and the nav's group labels are the two
+   uppercase runs in the rail, they sit twenty pixels apart, and at the wider
+   step the company's name was visibly broader than the sections under it
+   rather than quieter than them. The suite holds the two together. */
+.crewlet-brand__context {
+  padding-left: calc(var(--crewlet-brand-mark) + var(--spacing-2));
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  /* THE REGULAR WEIGHT, which is the one thing that separates this line from
+     the nav's group labels below it. The two are the only uppercase runs in
+     the rail and they sit twenty pixels apart; drawn at the same size, the
+     same tracking and the same weight they read as two headings of one list
+     rather than as the company's name above the sections in it. A group name
+     is what a reader scans, so the weight stays there and goes from here. */
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--font-letter-spacing-wide);
+  line-height: var(--font-line-height-normal);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/Button/Button.d.ts

@@ -0,0 +1,88 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'tertiary' | 'accent' | 'danger';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonShape = 'square' | 'pill';
+interface ButtonLook {
+    /** The hierarchy, not a palette: primary is the one action on the screen. */
+    variant?: ButtonVariant | undefined;
+    size?: ButtonSize | undefined;
+    shape?: ButtonShape | undefined;
+    /** Drawn before the label. A glyph component, not a name. */
+    leadingIcon?: ReactNode;
+    /** Drawn after the label: a chevron, an external mark, a count. */
+    trailingIcon?: ReactNode;
+    /** Fills the line it is on. */
+    block?: boolean | undefined;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonLook {
+    /** Sets `aria-pressed`: a toggle that is on, such as a filter. */
+    pressed?: boolean | undefined;
+    /**
+     * Mid-action. The spinner takes the leading icon's place, the label stays
+     * put, and the press does nothing.
+     *
+     * NOT the native `disabled`, which takes focus away from the control the
+     * reader just used and drops it on the page body, then refuses to give it
+     * back when the action finishes. `aria-disabled` with `aria-busy` says the
+     * same thing to a screen reader and leaves focus where it was.
+     */
+    loading?: boolean | undefined;
+    /**
+     * Unavailable, and why. It reads the same as `disabled` to a screen reader
+     * and keeps its focus and its pointer events, which is the whole point: a
+     * natively disabled button takes no hover and no focus, so the tooltip
+     * explaining why "Review and save" cannot be pressed is unreachable by
+     * exactly the reader who needs it. The reason is linked with
+     * `aria-describedby`, so it is read after the name rather than instead of it.
+     */
+    disabledReason?: string | undefined;
+    /**
+     * Render the single child element with the Button's styling merged onto it
+     * instead of a native button, to put this look on a router's own Link while
+     * keeping its navigation. Mirrors the Radix `asChild` API.
+     *
+     * Ignored by `loading`: a link has no pending state to show.
+     */
+    asChild?: boolean | undefined;
+}
+/**
+ * The button recipe, spelled once for every element drawn as a button.
+ *
+ * IT FORWARDS EVERYTHING. A menu trigger needs `aria-haspopup`,
+ * `aria-expanded`, `aria-controls`, a ref to hand focus back to and a
+ * `tabIndex` of -1 when the keyboard reaches its actions another way; a list's
+ * Move buttons need a ref and a name longer than their tooltip; a canvas node
+ * needs a data attribute a stylesheet reads. Without those, each of them
+ * hand-wrote the class list beside the primitive, and a recipe spelled in two
+ * places is how the two drift apart.
+ *
+ * An icon-only button is named by its `title` unless `aria-label` names it
+ * more precisely: "Move goal 2 of 3 up" where the tooltip says "Move up".
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, ButtonLook {
+    href: string;
+    /**
+     * Leaves the application. Opens a tab and withholds the referrer and the
+     * opener, which a link to somebody else's site must never be without, and
+     * draws the mark that says so unless the caller supplies its own trailing
+     * icon or turns it off.
+     */
+    external?: boolean | undefined;
+}
+/**
+ * A link drawn as a button: it goes somewhere rather than doing something.
+ *
+ * An action that navigates has to be a real anchor, so it can be opened in a
+ * tab, copied, and read as a link. It wears exactly the class list the
+ * matching Button wears, because it used to be a hand-written anchor carrying
+ * the recipe at each call site.
+ *
+ * There is deliberately no `asChild` here and no `loading`: `asChild` would
+ * push `target` and `rel` back out to every call site, and a link has no
+ * pending state.
+ */
+export declare const ButtonLink: import("react").ForwardRefExoticComponent<ButtonLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/Button/index.d.ts

@@ -0,0 +1,3 @@
+import './Button.css';
+export { Button, ButtonLink } from './Button.js';
+export type { ButtonLinkProps, ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from './Button.js';

package/dist/Button/index.js

@@ -0,0 +1,3 @@
+export { Button, ButtonLink } from '../chunk-BZYDZBAN.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Button-D4J6B4MA.css

@@ -0,0 +1,302 @@
+/*
+ * The button, and the link drawn as one.
+ *
+ * SIX VARIANTS, AND THEY ARE A HIERARCHY RATHER THAN A PALETTE. primary is the
+ * one action on the screen and takes the accent fill; secondary is everything
+ * else; outline is the branded yes on a page that already has a primary;
+ * tertiary is for a dense toolbar; danger is destructive, and the only one
+ * that spends the critical hue. accent is primary's own recipe under the name
+ * a caller may already have written.
+ *
+ * THE ONE ACTION IS THE ACCENT FILL. It reads as the answer a screen is
+ * asking for, which is what a filled monochrome button could not do beside a
+ * secondary of the same neutral family: on the dark palette a white primary
+ * and a light-grey secondary were one pair of greys, and the reader had to
+ * compare them to find the action.
+ *
+ * Every size is a --size-control-* step, so a button, a select and an input in
+ * one row are the same height at every density, and none of them can fall
+ * under the 24px a finger can hit. The padding ramp is one spacing step per
+ * size, so a small button in a toolbar is tight and a large one on a landing
+ * page is not.
+ */
+
+.crewlet-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  font-family: var(--font-family-sans);
+  /*
+   * MEDIUM, and the tracking left alone. A control's label is read at a
+   * glance rather than for sense, and the semibold it carried made a row of
+   * three buttons read as three headings; the negative tracking it carried
+   * with it is a display-size correction that closes up 12px text.
+   */
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-normal);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/*
+ * A BUTTON IS NOT A LINK, WHATEVER ELEMENT IT IS. Several of these controls
+ * are anchors, because a step that leaves for somebody else's site has to be a
+ * real href, and a document baseline underlines a hovered link. That is right
+ * for a link inside a sentence and wrong for something drawn as a filled
+ * button: "Install on GitHub" grew an underline the Create button beside it
+ * never had, so two controls that are the same act looked like two kinds of
+ * thing.
+ */
+.crewlet-btn,
+.crewlet-btn:hover {
+  text-decoration: none;
+}
+
+/*
+ * THE FOCUS RING IS AN OUTLINE. Forced-colors mode drops every box-shadow and
+ * keeps outlines, so a ring drawn as a shadow disappears for exactly the
+ * readers who most need one.
+ */
+.crewlet-btn:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-btn:disabled,
+.crewlet-btn[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/*
+ * Only the natively disabled one stops taking the pointer. A soft-disabled
+ * button keeps its hover and its focus on purpose: the tooltip that explains
+ * why it cannot be pressed is unreachable otherwise.
+ */
+.crewlet-btn:disabled {
+  pointer-events: none;
+}
+
+/* Sizes: the height is the control step, and the padding is one scale step
+   per size. min-height rather than height, so a label that wraps is read
+   rather than clipped. */
+.crewlet-btn--small {
+  min-height: var(--size-control-sm);
+  padding: 0 var(--spacing-2);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-btn--medium {
+  min-height: var(--size-control-md);
+  padding: 0 var(--spacing-3);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-btn--large {
+  min-height: var(--size-control-lg);
+  padding: 0 var(--spacing-4);
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-btn--square {
+  border-radius: var(--radius-md);
+}
+
+.crewlet-btn--pill {
+  border-radius: var(--radius-pill);
+}
+
+/* A pill spends one step more than its square, because a rounded end eats the
+   room a straight one gives the first letter. */
+.crewlet-btn--pill.crewlet-btn--small {
+  padding: 0 var(--spacing-3);
+}
+
+.crewlet-btn--pill.crewlet-btn--medium {
+  padding: 0 var(--spacing-4);
+}
+
+.crewlet-btn--pill.crewlet-btn--large {
+  padding: 0 var(--spacing-5);
+}
+
+.crewlet-btn--block {
+  width: 100%;
+}
+
+/*
+ * Primary: the accent fill, and the one action on the screen.
+ *
+ * `accent` is the same recipe under the other name it is written as. They are
+ * one rule rather than two, so the pair cannot drift into two blues, and the
+ * name stays because call sites already spell it.
+ *
+ * THE BORDER IS TRANSPARENT rather than the fill: a filled control needs no
+ * boundary, and one drawn in the fill's own colour makes the button a step
+ * wider than the secondary beside it in every forced-colors stylesheet that
+ * repaints backgrounds and keeps borders.
+ */
+.crewlet-btn--primary,
+.crewlet-btn--accent {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+  border-color: transparent;
+}
+
+.crewlet-btn--primary:hover:not(:disabled):not([aria-disabled='true']),
+.crewlet-btn--accent:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-brand-accent-hover);
+  border-color: transparent;
+}
+
+.crewlet-btn--primary:active:not(:disabled):not([aria-disabled='true']),
+.crewlet-btn--accent:active:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-brand-accent-active);
+  border-color: transparent;
+}
+
+/* Secondary: a surface with a visible boundary. Everything else. */
+.crewlet-btn--secondary {
+  background: var(--color-surface-subtle);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-default);
+}
+
+.crewlet-btn--secondary:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border-hover);
+}
+
+.crewlet-btn--secondary:active:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-surface-pressed);
+}
+
+/* Outline: the branded secondary. Its ink is the accent's text step, never
+   the fill, which is not a text colour on any surface. */
+.crewlet-btn--outline {
+  background: transparent;
+  color: var(--color-brand-accent-ink);
+  border-color: var(--color-brand-accent);
+}
+
+.crewlet-btn--outline:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-brand-accent-soft);
+}
+
+/* Tertiary: borderless, for a dense toolbar. */
+.crewlet-btn--tertiary {
+  background: transparent;
+  color: var(--color-text-secondary);
+  border-color: transparent;
+}
+
+.crewlet-btn--tertiary:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-btn--tertiary:active:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-surface-pressed);
+}
+
+/*
+ * Danger: destructive, and the only button that spends the critical hue.
+ *
+ * A SECONDARY THAT HAS GONE RED, not a red slab. It sits in the same row as
+ * Cancel and it is the button a reader must not press by reflex, so it holds
+ * the secondary's own weight until it is pointed at and states itself in its
+ * INK, which is the step measured as text; the red fill it used to carry
+ * pulled the eye to the destructive answer first on every dialog that had one.
+ * The hue arrives on hover, as the tint plus the full fill on the boundary.
+ */
+.crewlet-btn--danger {
+  background: var(--color-surface-subtle);
+  color: var(--color-feedback-danger-ink);
+  border-color: var(--color-border-default);
+}
+
+.crewlet-btn--danger:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-feedback-danger-soft);
+  border-color: var(--color-feedback-danger);
+}
+
+.crewlet-btn--danger:active:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-feedback-danger-soft);
+  border-color: var(--color-feedback-danger-hover);
+}
+
+/* A toggle that is on. Drawn from the state a screen reader is already told
+   about, so the two cannot disagree. */
+.crewlet-btn[aria-pressed='true'] {
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+  border-color: var(--color-brand-accent-soft-strong);
+}
+
+.crewlet-btn__icon,
+.crewlet-btn__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+/*
+ * A glyph inside a button follows the label's own size, which is what lets one
+ * rule serve every step. The SVG sits on the baseline as an inline box, where
+ * the font ligature this replaced was inline-block and centred itself.
+ */
+.crewlet-btn__icon .crewlet-glyph {
+  width: 1em;
+  height: 1em;
+}
+
+/*
+ * Pending. The spinner takes the leading icon's place, so a button that has
+ * one neither moves nor changes width mid-action, and the label stays exactly
+ * as it was: a button whose text becomes "Saving" has stopped saying what it
+ * does.
+ */
+.crewlet-btn__spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--radius-circle);
+  opacity: 0.7;
+  animation: crewlet-btn-spin var(--motion-duration-slow) linear infinite;
+  flex: none;
+}
+
+@keyframes crewlet-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* A disabled button already reads as unavailable; a loading one should still
+   read as this button, mid-action. */
+.crewlet-btn--loading {
+  cursor: progress;
+}
+
+/*
+ * A spinner that cannot spin should not pretend to, and a colour change that
+ * cannot fade is still a colour change. The ring reads as pending either way.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-btn {
+    transition: none;
+  }
+
+  .crewlet-btn__spinner {
+    animation: none;
+  }
+}

package/dist/CalendarGrid/CalendarGrid.d.ts

@@ -0,0 +1,87 @@
+/** A day, with the month 0-based as `Date` has it. */
+export interface CalendarDate {
+    year: number;
+    month: number;
+    day: number;
+}
+export declare const sameDay: (a: CalendarDate, b: CalendarDate) => boolean;
+/** Negative when `a` is earlier, positive when later, zero on the same day. */
+export declare function compareDays(a: CalendarDate, b: CalendarDate): number;
+export declare const daysInMonth: (year: number, month: number) => number;
+/** The same day shifted by `days`, rolling over months and years. */
+export declare function shiftDay(date: CalendarDate, days: number): CalendarDate;
+/** The same day in another month, clamped to that month's length. */
+export declare function shiftMonth(date: CalendarDate, months: number): CalendarDate;
+export declare const today: () => CalendarDate;
+export interface CalendarGridProps {
+    /** Names the grid. A month grid with no name is announced as "grid". */
+    label: string;
+    /** The month on screen. */
+    year: number;
+    month: number;
+    /** Where the roving focus is. It is a DAY, and it may be outside the month on screen. */
+    focused: CalendarDate;
+    onFocusedChange: (next: CalendarDate) => void;
+    /** Asked for when the focus walks out of the month on screen. */
+    onMonthChange?: ((year: number, month: number) => void) | undefined;
+    /** Taking a day. A disabled day never reaches this. */
+    onSelect: (date: CalendarDate) => void;
+    /** The chosen days: one, or the two ends of a range. */
+    selected?: readonly CalendarDate[] | undefined;
+    /** Whether a day lies strictly inside the chosen range. */
+    inRange?: ((date: CalendarDate) => boolean) | undefined;
+    /** Whether a day may be taken. A disabled day stays focusable, and says so. */
+    isDisabled?: ((date: CalendarDate) => boolean) | undefined;
+    onHover?: ((date: CalendarDate | null) => void) | undefined;
+    /** 0 is Sunday (the United States), 1 is Monday (ISO 8601). */
+    firstDayOfWeek?: 0 | 1;
+    /** Whether the days either side of the month are drawn. */
+    showOutsideDays?: boolean;
+    /** What a day is CALLED. The full date, because "3" names nothing on its own. */
+    dayLabel?: ((date: CalendarDate) => string) | undefined;
+    monthNames?: readonly string[];
+    weekdayNames?: readonly string[];
+    weekdayMarks?: readonly string[];
+    className?: string;
+}
+/**
+ * A month of days, as a real grid.
+ *
+ * WHAT IT REPLACES. Two pickers drew 42 buttons in a row and called the
+ * container a grid. The role was a claim the markup did not keep: a grid
+ * holds rows and a gridcell sits in one, so a screen reader told it was
+ * reading a grid found no rows to move between, and axe refused the role
+ * outright. Every one of those buttons was also its own tab stop, so a
+ * keyboard user reached the day after next by pressing Tab forty times, and
+ * no arrow key did anything at all.
+ *
+ * THE RULES IT KEEPS.
+ *
+ * - ONE TAB STOP for the whole month, with the arrows moving inside it: Left
+ *   and Right a day, Up and Down a week, Home and End the ends of the week,
+ *   Page a month and Shift+Page a year. Walking out of the month on screen
+ *   turns the page rather than stopping at the edge.
+ * - A DAY IS CALLED BY ITS DATE. "3" names nothing: a reader arrowing across
+ *   a month heard a run of numbers with no month, no weekday and no year in
+ *   any of them.
+ * - THE STATE IS EXPOSED, not just drawn: `aria-selected` on the chosen days
+ *   and `aria-current="date"` on today, which is the difference between a
+ *   ring somebody can see and a fact somebody can hear.
+ * - A DISABLED DAY STAYS FOCUSABLE and says it is disabled. Skipped instead,
+ *   a month whose first half is out of bounds swallows every arrow press
+ *   until the keyboard happens to land somewhere allowed.
+ * - A RANGE IS ONE BAND, not two chips and some tinted squares. The grid asks
+ *   `inRange` about each chosen day's NEIGHBOURS to learn which end it is, so
+ *   the band's ends are drawn closed and its middle is drawn open. Nothing new
+ *   is passed in for it: two more props naming the ends would be a second
+ *   statement of the range that could disagree with `inRange` about where it
+ *   stops.
+ * - A PADDING CELL IS AN EMPTY CELL, not a hidden one. Where the days either
+ *   side of the month are not drawn (`showOutsideDays: false`, which is what
+ *   a two-month range view uses), the cell still has to be a `gridcell`: a
+ *   `row` whose cells are all `aria-hidden` owns nothing, which is a grid
+ *   with rows a screen reader cannot read and an axe violation
+ *   (`aria-required-children`) with it. It carries no name, no state and no
+ *   tab stop, because there is no day there to name, tint or move to.
+ */
+export declare function CalendarGrid({ label, year, month, focused, onFocusedChange, onMonthChange, onSelect, selected, inRange, isDisabled, onHover, firstDayOfWeek, showOutsideDays, dayLabel, monthNames, weekdayNames, weekdayMarks, className, }: CalendarGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/CalendarGrid/index.d.ts

@@ -0,0 +1,3 @@
+import './CalendarGrid.css';
+export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today, } from './CalendarGrid.js';
+export type { CalendarDate, CalendarGridProps } from './CalendarGrid.js';

package/dist/CalendarGrid/index.js

@@ -0,0 +1,2 @@
+export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from '../chunk-GXQ3B46I.js';
+import '../chunk-ODEQTPFM.js';