@blakesteve/roster 4.8.1 → 4.9.0

package/dist/components/atoms/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,75 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { selectTriggerVariants } from '../Select/select-variants';
+import { SelectOption } from '../Select/Select';
+import { Chip } from '../Chip/Chip';
+export type MultiSelectValue = string | number;
+export interface MultiSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">, VariantProps<typeof selectTriggerVariants> {
+    /** Same option shape as `Select`. */
+    options: SelectOption[];
+    value: MultiSelectValue[];
+    onChange: (value: MultiSelectValue[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    label?: string;
+    /** Classes for the trigger button itself. Mirrors `Select`. */
+    triggerClassName?: string;
+    /** Classes for the popup panel. Mirrors `Select`. */
+    optionsClassName?: string;
+    /** Supporting text under the trigger. */
+    helperText?: string;
+    /**
+     * The message for an invalid selection. Implies `error`, so a caller cannot
+     * set the red ring and forget to say why. Mirrors `Select`.
+     */
+    errorMessage?: string;
+    /**
+     * How the selection reads in the closed trigger.
+     *
+     * `chips` names every selection, which is the point of the component when
+     * the list is short. `count` is the escape hatch for a field that would
+     * otherwise grow to five rows on a narrow screen — `maxChips` handles the
+     * middle ground.
+     */
+    display?: "chips" | "count";
+    /**
+     * Chips to show before the rest collapse into a `+N` chip. `undefined` shows
+     * all of them.
+     */
+    maxChips?: number;
+    /** Adds a control that clears the whole selection. */
+    clearable?: boolean;
+    /** Color scheme for the selection chips. */
+    chipColorScheme?: React.ComponentProps<typeof Chip>["colorScheme"];
+    /**
+     * Fill for the selection chips. `outline` by default, and deliberately.
+     *
+     * The trigger's own default variant paints `--roster-control-bg`, which is
+     * `transparent` — so a chip sits on whatever the page is, not on a surface
+     * this component controls. A `soft neutral` chip is `gray-100`, which on the
+     * library's own `gray-50` page is a 1.04:1 rectangle: the chips rendered,
+     * measured correct, and could not be seen. `outline` is the one fill whose
+     * identity is a border rather than a background.
+     *
+     * Chip's own outline palette is not enough on its own, though, and that is
+     * why the chips below take `text-inherit` and `border-current`. Chip holds
+     * its border to 3:1 against a PAGE; this component can be told to paint its
+     * own surface, and `variant="slate"` paints `gray-700` — byte-identical to
+     * the neutral chip's own `gray-700` label. That rendered chip-shaped holes
+     * with no readable text at 1.00:1. Inheriting means the chip cannot disagree
+     * with the surface it was just placed on.
+     */
+    chipVariant?: React.ComponentProps<typeof Chip>["variant"];
+    /** Accessible name for the clear control. */
+    clearLabel?: string;
+    /**
+     * Builds the accessible name for a chip's dismiss control.
+     *
+     * A row of buttons all named "Remove" is a row a screen reader user cannot
+     * tell apart, so this takes the label rather than being a constant.
+     */
+    removeLabel?: (label: string) => string;
+}
+declare const MultiSelect: ({ options, value, onChange, placeholder, disabled, variant, size, error, className, triggerClassName, optionsClassName, helperText, errorMessage, label, display, maxChips, clearable, chipColorScheme, chipVariant, clearLabel, removeLabel, ...props }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+export { MultiSelect };

package/dist/components/molecules/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,58 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Checkbox } from '../../atoms/Checkbox/Checkbox';
+import { checkboxGroupOptionsVariants, checkboxGroupPanelVariants } from './checkbox-group-variants';
+export type CheckboxGroupOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Supporting text under the option's label. */
+    description?: string;
+};
+export type CheckboxGroupCategory = {
+    /** Heading for this run of options. Rendered as an `Eyebrow`. */
+    category: string;
+    options: CheckboxGroupOption[];
+};
+type CheckboxGroupOptions = CheckboxGroupOption[] | CheckboxGroupCategory[];
+export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue">, Omit<VariantProps<typeof checkboxGroupPanelVariants>, "error">, Pick<VariantProps<typeof checkboxGroupOptionsVariants>, "columns"> {
+    /**
+     * A flat list, or a list of `{ category, options }` groups. Mixing the two
+     * is not supported: the first entry decides how the whole array is read.
+     */
+    options: CheckboxGroupOptions;
+    /** The selected values. Unknown values are preserved, not dropped. */
+    value: string[];
+    onChange: (value: string[]) => void;
+    /** The group's name. Becomes the fieldset's accessible name. */
+    label?: string;
+    /** Supporting text under the options. */
+    helperText?: string;
+    /**
+     * The message for an invalid selection. Implies the error state, so a caller
+     * cannot color the text red and forget to say why.
+     *
+     * What it repaints depends on `variant`, and the difference is worth
+     * knowing: `panel` gets an error border, `plain` has no boundary to repaint
+     * and so the message *is* the whole error state. Narrower than `Input`'s or
+     * `Select`'s, which both ring the control itself — a checkbox is not the
+     * thing that is invalid here, the selection is.
+     */
+    errorMessage?: string;
+    /**
+     * Caps the options' height and scrolls past it. A number is pixels.
+     *
+     * Applied inline rather than as a class because the useful values here are
+     * arbitrary — `240` is mega-squad's, yours will differ — and an arbitrary
+     * Tailwind value built from a prop is a class that does not exist at build
+     * time, which is exactly what `check-classes-emit` fails the build over.
+     */
+    maxHeight?: number | string;
+    /** Disables every option, and dims the label and helper text with them. */
+    disabled?: boolean;
+    colorScheme?: React.ComponentProps<typeof Checkbox>["colorScheme"];
+    /** Classes for the options' container. `className` lands on the fieldset. */
+    panelClassName?: string;
+}
+declare const CheckboxGroup: ({ options, value, onChange, label, helperText, errorMessage, maxHeight, disabled, variant, size, columns, colorScheme, className, panelClassName, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export { CheckboxGroup };

package/dist/components/molecules/CheckboxGroup/checkbox-group-variants.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The container the options sit in.
+ *
+ * `plain` is the default because a checkbox group is not inherently a box: a
+ * short list of three options wants to sit on the form the way a Select's
+ * label and trigger do, with no chrome of its own.
+ *
+ * `panel` is the long-list case — the grouped, scrollable list mega-squad
+ * hand-rolled for its sports picker. It deliberately does NOT read
+ * `--roster-popover-*`: that family is documented as "a panel that floats over
+ * the page", and this one is in the flow.
+ *
+ * Its fill is `Card`'s `soft` exactly. Its border is deliberately two ramp
+ * steps heavier than that card's — `gray-200` against the card's `gray-100`,
+ * and no `/50` in dark. A card's hairline separates one block of content from
+ * the page; this one has to read as the wall a scroll region ends at, and at
+ * `gray-100` it did not.
+ */
+export declare const checkboxGroupPanelVariants: (props?: ({
+    variant?: "plain" | "panel" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    error?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * The options themselves.
+ *
+ * Every column count starts at one and widens at a breakpoint. A two-column
+ * checkbox list on a 320px screen is two columns of truncated labels, which is
+ * the layout this exists to avoid.
+ */
+export declare const checkboxGroupOptionsVariants: (props?: ({
+    columns?: 1 | 2 | 3 | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/molecules/Toast/Toast.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from 'class-variance-authority';
+import { toastVariants } from './toast-variants';
+import * as React from "react";
+export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof toastVariants> {
+    /** The message itself. */
+    children: React.ReactNode;
+    /** Optional bolded first line above the message, as on `Alert`. */
+    title?: React.ReactNode;
+    /** Replaces the icon chosen for the color scheme. Pass `null` for none. */
+    icon?: React.ReactNode;
+    /** Presence adds a dismiss control. */
+    onDismiss?: () => void;
+    /** Accessible name for the dismiss control. */
+    dismissLabel?: string;
+}
+/**
+ * The body of a toast: icon, message, optional dismiss.
+ *
+ * Presentational and controlled. It does not queue, position or time itself —
+ * `Toaster` does that, and this stays renderable on its own so it can be
+ * tested and viewed without a running queue.
+ *
+ * `role` is deliberately not set here. A toast's urgency depends on what it is
+ * saying, not on how it looks, and the same body is used for all of them.
+ * `Toaster` decides: `alert` / `assertive` for errors, and react-hot-toast's
+ * `status` / `polite` for the rest. Rendered on its own, this sets no role at
+ * all, which is correct for a component that does not know why it exists.
+ */
+declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+export { Toast };

package/dist/components/molecules/Toast/Toaster.d.ts

@@ -0,0 +1,33 @@
+import { ToasterProps as HotToasterProps } from 'react-hot-toast';
+import { ToastProps } from './Toast';
+export interface ToasterProps extends Pick<HotToasterProps, "position" | "gutter" | "reverseOrder" | "containerClassName"> {
+    /** Milliseconds a toast stays up. */
+    duration?: number;
+    /** Adds a dismiss control to every toast. */
+    dismissible?: boolean;
+    /**
+     * Fill treatment for every toast in the queue.
+     *
+     * `soft` is the default and is quiet enough that a stack does not shout.
+     * Reach for `solid` when toasts land over photography, video or any surface
+     * the app does not control, where a tint is a gamble.
+     */
+    variant?: ToastProps["variant"];
+}
+/**
+ * Mount once, near the root. Everything else goes through `toast`.
+ *
+ * This wraps react-hot-toast rather than replacing it, because both consumers
+ * already depend on it at the same version and already write
+ * `toast.success(...)`. Wrapping means their call sites do not move; what
+ * changes is that the toast stops being styled with hardcoded hex in each app
+ * — game-verdict pinned `#1a1f2e` and `#10b981`, mega-squad `#413f3c` and
+ * `#f3eee3`, neither of which is in either app's palette any more.
+ *
+ * The `children` render prop is used rather than `toastOptions`, so the body
+ * is a real Roster component instead of a set of inline styles handed to
+ * someone else's markup. That is what lets `Toast` be tested and viewed on its
+ * own, and what lets a toast carry a title, a dismiss control and the popover
+ * tokens.
+ */
+export declare function Toaster({ position, duration, dismissible, variant, gutter, reverseOrder, containerClassName, }: ToasterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/Toast/toast-api.d.ts

@@ -0,0 +1,38 @@
+import { Renderable, Toast, ToastOptions, ValueOrFunction } from 'react-hot-toast';
+/** Everything react-hot-toast accepts as a message, including a render fn. */
+type Message = ValueOrFunction<Renderable, Toast>;
+/**
+ * The imperative handle: `toast.success("Saved")` from anywhere.
+ *
+ * A thin re-export of react-hot-toast's, with the gaps filled. Both consumers
+ * had already written this wrapper themselves — `gameToast` and `megaToast` —
+ * which is the usual sign it belongs in the library.
+ *
+ * The file is `toast-api.ts` rather than `toast.ts` because `Toast.tsx` sits
+ * beside it and the two collide on a case-insensitive filesystem. The export
+ * is still `toast`.
+ *
+ * `info` and `warning` are the additions, and they are not cosmetic.
+ * react-hot-toast ships `success`, `error`, `loading` and `blank` only, so an
+ * app wanting an informational toast has to improvise. One improvised by
+ * calling `toast.error`, so every informational message in that app rendered
+ * as an error — a bug that survived because the wrapper was three lines long
+ * and nobody re-read it.
+ */
+export declare const toast: ((message: Message, options?: ToastOptions) => string) & {
+    success: (message: Message, options?: ToastOptions) => string;
+    error: (message: Message, options?: ToastOptions) => string;
+    info: (message: Message, options?: ToastOptions) => string;
+    warning: (message: Message, options?: ToastOptions) => string;
+    loading: (message: Message, options?: ToastOptions) => string;
+    custom: (message: Renderable | import('react-hot-toast').ValueFunction<Renderable, Toast>, options?: ToastOptions) => string;
+    dismiss: (toastId?: string, toasterId?: string) => void;
+    remove: (toastId?: string, toasterId?: string) => void;
+    promise: <T>(promise: Promise<T> | (() => Promise<T>), msgs: {
+        loading: Renderable;
+        success?: ValueOrFunction<Renderable, T>;
+        error?: ValueOrFunction<Renderable, any>;
+    }, opts?: import('react-hot-toast').DefaultToastOptions) => Promise<T>;
+};
+export declare const TONE_PREFIX = "rst-toast-tone-";
+export {};

package/dist/components/molecules/Toast/toast-variants.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Toast vs Alert.
+ *
+ * Alert is an inline notice strip: it sits in the flow of a page or a form,
+ * stays as long as the condition does, and the reader finds it by looking at
+ * the thing it is about. Toast is transient chrome floating over everything,
+ * announced rather than found, and gone in a few seconds.
+ *
+ * They share a color language on purpose — the same six schemes and the same
+ * icons — because "this failed" should not be two different reds depending on
+ * where it is said. What Toast adds is elevation and an opaque surface: it is
+ * drawn over arbitrary page content, so a tint that reads correctly inside a
+ * form can disappear over an image.
+ *
+ * The left stripe is Alert's. Toast borders on all sides instead, because a
+ * floating object needs a complete edge to read as detached from the page
+ * rather than as something that fell out of the layout.
+ */
+export declare const toastVariants: (props?: ({
+    colorScheme?: "primary" | "amber" | "success" | "error" | "neutral" | "info" | null | undefined;
+    variant?: "soft" | "solid" | "glass" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/data-table.es.js

@@ -1,5 +1,5 @@
 "use client";
-import { j as e, T as C, a as S, b as l, c as P, F as a, f as w, d as y, e as v, g as c, B as n, h as N, i as R, k as T, l as k } from "./Table--O-sD53L.js";
+import { j as e, T as C, a as S, b as l, c as P, F as a, f as w, d as y, e as v, g as c, B as n, h as N, i as R, k as T, l as k } from "./Table-C1JbdA7q.js";
 import { useState as F } from "react";
 import { tableFeatures as I, sortFns as A, rowPaginationFeature as M, rowSortingFeature as z, createPaginatedRowModel as D, createSortedRowModel as G, useTable as H, flexRender as g } from "@tanstack/react-table";
 import { c as o } from "./utils-hNxf9HpA.js";

package/dist/index.d.ts

@@ -15,6 +15,9 @@ export * from './components/atoms/Input/input-variants';
 export * from './components/atoms/Link/Link';
 export * from './components/atoms/Link/link-variants';
 export * from './components/atoms/PasswordInput/PasswordInput';
+export * from './components/atoms/Combobox/Combobox';
+export * from './components/atoms/Chip/Chip';
+export * from './components/atoms/Chip/chip-variants';
 export * from './components/atoms/Pill/Pill';
 export * from './components/atoms/Pill/pill-variants';
 export * from './components/atoms/Eyebrow/Eyebrow';
@@ -25,6 +28,7 @@ export * from './components/atoms/LabeledDivider/LabeledDivider';
 export * from './components/atoms/Stat/Stat';
 export * from './components/atoms/Stat/stat-variants';
 export * from './components/atoms/ThemeToggle/ThemeToggle';
+export * from './components/atoms/MultiSelect/MultiSelect';
 export * from './components/atoms/Select/Select';
 export * from './components/atoms/Select/select-variants';
 export * from './components/atoms/Spinner/Spinner';
@@ -37,6 +41,10 @@ export * from './components/atoms/LiquidTabs/LiquidTabs';
 export * from './components/atoms/Tooltip/Tooltip';
 export * from './components/atoms/CollapsibleSection/CollapsibleSection';
 export * from './components/atoms/SegmentBar/SegmentBar';
+export * from './components/molecules/Toast/Toast';
+export * from './components/molecules/Toast/toast-variants';
+export * from './components/molecules/Toast/Toaster';
+export * from './components/molecules/Toast/toast-api';
 export * from './components/molecules/Alert/Alert';
 export * from './components/molecules/Alert/alert-variants';
 export * from './components/molecules/Accordion/Accordion';
@@ -44,6 +52,8 @@ export * from './components/molecules/DescriptionList/DescriptionList';
 export * from './components/molecules/DescriptionList/description-list-variants';
 export * from './components/molecules/Pullquote/Pullquote';
 export * from './components/molecules/Pullquote/pullquote-variants';
+export * from './components/molecules/CheckboxGroup/CheckboxGroup';
+export * from './components/molecules/CheckboxGroup/checkbox-group-variants';
 export * from './components/molecules/Breadcrumbs/Breadcrumbs';
 export * from './components/molecules/Breadcrumbs/breadcrumb-variants';
 export * from './components/molecules/CallToAction/CallToAction';

package/dist/internal/PopupOption.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+/**
+ * One row in an anchored popup: the label, truncated, and the check mark that
+ * marks it selected.
+ *
+ * Extracted because it was copy-pasted between `Select` and `Combobox` and the
+ * rendered markup was byte-identical — which is the definition of the thing
+ * this module exists to hold. The README claimed the option rows were already
+ * shared before they were; this is that claim becoming true.
+ *
+ * It takes the Headless UI option component rather than importing one, because
+ * `ListboxOption` and `ComboboxOption` are different components with the same
+ * shape, and the alternative is this module knowing which caller it has.
+ */
+export declare function PopupOption({ as: Option, value, disabled, size, children, }: {
+    as: React.ElementType;
+    value: string | number;
+    disabled?: boolean;
+    size?: "sm" | "default" | "lg" | null;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/internal/popup.d.ts

@@ -0,0 +1,103 @@
+import * as React from "react";
+/**
+ * The presentation shared by every anchored popup Roster opens off a control:
+ * `Select`'s menu, `Combobox`'s and `MultiSelect`'s, and whatever anchored
+ * popup comes next.
+ *
+ * Internal, and not exported from the package. Its contract is with those
+ * components, not with consumers — the escape hatch a consumer reaches for is
+ * `optionsClassName` on the component itself.
+ *
+ * It exists because the alternative is copying two subtle things into each
+ * one. Both have already been got wrong in a real app:
+ *
+ * - the `.dark` carry below, which is why a consumer's menu once rendered in
+ *   Roster's grays while the trigger above it took their palette
+ * - the absence of a height utility in `POPUP_PANEL`, which reads like an
+ *   oversight until you know Headless UI writes `max-height` inline
+ */
+/**
+ * Carries a subtree-scoped `.dark` across the portal.
+ *
+ * Headless UI attaches an anchored panel to `<body>`, so it leaves whatever
+ * `.dark` subtree the trigger sits in. That is fine when `.dark` is on
+ * `<html>` — the portal is still a descendant — and wrong when a page scopes
+ * dark mode to part of itself, which Roster's README explicitly permits: the
+ * panel renders light against a dark page.
+ *
+ * `closest` finds the NEAREST `.dark`, which is exactly what
+ * `@custom-variant dark (&:where(.dark, .dark *))` matches, so this reproduces
+ * the cascade rather than second-guessing it. Applying the class to the panel
+ * covers the panel itself through the `&:where(.dark, …)` half, and its
+ * options through `.dark *`. Idempotent when `.dark` is already on the root.
+ *
+ * Read once, on mount. A theme TOGGLE does not need this at all: it flips
+ * `.dark` on `<html>`, and the portal is already a descendant of `<html>`. The
+ * only case this covers is a scoped `.dark`, which is part of a page's
+ * structure rather than something that changes at runtime.
+ */
+export declare function useDarkScope<T extends HTMLElement>(): {
+    ref: React.RefObject<T | null>;
+    inDarkScope: boolean;
+};
+/**
+ * The panel's own classes, minus anything a caller should decide.
+ *
+ * Deliberately no `max-h-*` and no `overflow-*`. Headless UI's `size`
+ * middleware writes both INLINE on this element whenever `anchor` is set:
+ *
+ *     Object.assign(floating.style, {
+ *       overflow: "auto",
+ *       maxHeight: `min(var(--anchor-max-height, 100vh), Npx)`,
+ *     })
+ *
+ * so the panel has always been capped at the space between the trigger and the
+ * viewport edge, and has always scrolled. A utility here would lose to that
+ * inline rule anyway. `--anchor-max-height` is READ by that expression and
+ * never set by Headless UI — it is an author hook like `--anchor-gap` — so a
+ * consumer wanting a shorter menu sets the variable, not a height:
+ * `optionsClassName="rst:[--anchor-max-height:20rem]"`.
+ *
+ * The surface comes from `--roster-popover-*`, so a consumer who repaints the
+ * trigger with `--roster-control-*` does not open a hardcoded white sheet
+ * under it.
+ */
+export declare const POPUP_PANEL: string;
+/**
+ * Matching the panel's width to the control it opens from — and WHICH control
+ * that is depends on the component, which is why this is not folded into
+ * `POPUP_PANEL`.
+ *
+ * Headless UI writes both variables inline on the panel. For a `Listbox` the
+ * button IS the whole trigger, so `--button-width` is right. For a `Combobox`
+ * the trigger is the text input and the button is the little chevron beside
+ * it, so `--button-width` is about 20px and the panel renders as an
+ * unreadable sliver. Use `--input-width` there.
+ */
+/**
+ * Whether the panel should render on the dark palette.
+ *
+ * Two reasons it might, and they are unrelated:
+ *
+ * - the control sits inside a `.dark` subtree, which the portaled panel does
+ *   not inherit — that is `inDarkScope`, above.
+ * - the control's own variant NAMES a dark surface. `slate` paints `gray-700`
+ *   in light mode, and its panel was rendering white: a dark trigger opening a
+ *   white sheet, which is the exact mismatch `--roster-popover-*` was
+ *   introduced to stop. The token family only ever covered the variant that
+ *   reads tokens; the ones that name a surface were left behind.
+ *
+ * The fix reuses the dark palette rather than inventing a slate one, because
+ * every state in that palette already exists and has already been measured —
+ * `dark:data-focus:bg-primary-900/30` and `dark:data-selected:bg-gray-700/50`
+ * are designed for a dark sheet. Painting a bespoke slate panel would have
+ * meant a third set of option states with no contrast pass behind them.
+ *
+ * Shared here rather than repeated in three components, for the same reason
+ * everything else in this module is.
+ */
+export declare function popupInDarkPalette(inDarkScope: boolean, variant: string | null | undefined): boolean;
+export declare const POPUP_WIDTH_OF_BUTTON = "rst:w-(--button-width)";
+export declare const POPUP_WIDTH_OF_INPUT = "rst:w-(--input-width)";
+/** Where an anchored panel opens, and the only value Roster uses. */
+export declare const POPUP_ANCHOR: "bottom start";

package/dist/meta.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.8.1",
-  "tests": 1117,
-  "testFiles": 93
+  "version": "4.9.0",
+  "tests": 1318,
+  "testFiles": 106
 }