atlas-react-kit 1.2.0 → 1.2.2

package/dist/tabs.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import {} from "class-variance-authority";
 import { Slot, Tabs as TabsPrimitive } from "radix-ui";
+import { activeLinkAttributes, activeLinkSelector, } from "./internal/active-link.js";
 import { focusRing } from "./internal/styles.js";
 import { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants, } from "./internal/tabs-styles.js";
 import { useDragScroll } from "./internal/use-drag-scroll.js";
@@ -37,7 +38,7 @@ function TabsScroller({ variant = "default", orientation = "horizontal", classNa
         const scroller = ref.current;
         if (!scroller)
             return;
-        const active = scroller.querySelector('[aria-current="page"], [data-state="active"]');
+        const active = scroller.querySelector(activeLinkSelector);
         if (!active || active === revealed.current)
             return;
         revealed.current = active;
@@ -74,7 +75,7 @@ function TabsContent({ className, ...props }) {
  */
 function TabsNavLink({ asChild, active, className, ...props }) {
     const Comp = asChild ? Slot.Root : "a";
-    return (_jsx(Comp, { "data-slot": "tabs-nav-link", "data-state": active ? "active" : "inactive", "aria-current": active ? "page" : undefined, className: cn(tabsTriggerVariants(), className), ...props }));
+    return (_jsx(Comp, { "data-slot": "tabs-nav-link", ...activeLinkAttributes(active), className: cn(tabsTriggerVariants(), className), ...props }));
 }
 /**
  * Tab-styled links for a view switcher that changes the URL. Use this, not

package/dist/toast.js

@@ -5,6 +5,7 @@ import { CircleAlertIcon, CircleCheckIcon, InfoIcon, LoaderCircleIcon, XIcon, }
 import { useTheme } from "next-themes";
 import { Toaster as Sonner, toast as sonnerToast, } from "sonner";
 import { buttonVariants } from "./button.js";
+import { statusTone } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Copies only the kit's options, so plain JavaScript callers cannot hand the
@@ -42,7 +43,7 @@ const toast = Object.assign(show(sonnerToast), {
  *
  * Icon policy: a plain `toast()` has no icon. `success`, `info`, `warning`,
  * `error`, and `loading` each show a status icon. Tone colors the icon, title,
- * and border (same approach as Alert), not the body text.
+ * and border (`statusTone`, shared with Alert), not the body text.
  *
  * Close button: a circular badge centred on the top-right corner (`-top-2
  * -right-2`, half outside the border). Ghost / icon-xs still supplies the
@@ -70,22 +71,22 @@ const classNames = {
     // falls back to the title's width, so a one-word toast stays compact.
     // 1.625rem = 16px icon + 10px gap-x-2.5.
     content: "flex min-w-0 flex-1 basis-full flex-col gap-1 [[data-icon]+&]:basis-[calc(100%-1.625rem)]",
-    title: "font-medium leading-5",
+    title: "font-medium leading-5 text-(--status-tone)",
     description: "leading-5 text-muted-foreground",
     icon: "flex size-4 shrink-0 items-center justify-center [&_svg]:size-4",
     actionButton: cn(buttonVariants({ size: "xs" }), "shrink-0"),
     cancelButton: cn(buttonVariants({ variant: "outline", size: "xs" }), "shrink-0"),
     closeButton: cn(buttonVariants({ variant: "ghost", size: "icon-xs" }), "!absolute !-top-2 !-right-2 !left-auto !z-10 !size-6 !rounded-full !border !border-border !bg-popover !p-0 !text-muted-foreground !shadow-xs !translate-x-0 !translate-y-0 hover:!border-border hover:!bg-popover hover:!text-foreground focus-visible:!text-foreground active:!translate-y-0 [&_svg]:!size-3"),
-    success: "border-success/40 [&_[data-title]]:text-success",
-    info: "[&_[data-title]]:text-foreground",
-    warning: "border-warning/40 [&_[data-title]]:text-warning",
-    error: "border-destructive/40 [&_[data-title]]:text-destructive",
+    success: statusTone.success,
+    info: statusTone.neutral,
+    warning: statusTone.warning,
+    error: statusTone.destructive,
 };
 const icons = {
-    success: _jsx(CircleCheckIcon, { "aria-hidden": true, className: "text-success" }),
-    info: _jsx(InfoIcon, { "aria-hidden": true, className: "text-foreground" }),
-    warning: _jsx(CircleAlertIcon, { "aria-hidden": true, className: "text-warning" }),
-    error: _jsx(CircleAlertIcon, { "aria-hidden": true, className: "text-destructive" }),
+    success: _jsx(CircleCheckIcon, { "aria-hidden": true, className: "text-(--status-tone)" }),
+    info: _jsx(InfoIcon, { "aria-hidden": true, className: "text-(--status-tone)" }),
+    warning: _jsx(CircleAlertIcon, { "aria-hidden": true, className: "text-(--status-tone)" }),
+    error: _jsx(CircleAlertIcon, { "aria-hidden": true, className: "text-(--status-tone)" }),
     loading: (_jsx(LoaderCircleIcon, { "aria-hidden": true, className: "animate-spin text-muted-foreground" })),
     close: _jsx(XIcon, { "aria-hidden": true, className: "size-3" }),
 };

package/dist/toggle-group.d.ts

@@ -12,6 +12,6 @@ type ToggleGroupLayoutProps = {
     /** Lay items out in a row or a column. Default `horizontal`. */
     orientation?: "horizontal" | "vertical";
 };
-declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & ToggleGroupLayoutProps): React.JSX.Element;
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, onKeyDown, onPointerDown, onFocus, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & ToggleGroupLayoutProps): React.JSX.Element;
 declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): React.JSX.Element;
 export { ToggleGroup, ToggleGroupItem };

package/dist/toggle-group.js

@@ -5,15 +5,49 @@ import {} from "class-variance-authority";
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import { cn } from "./utils.js";
 import { toggleVariants } from "./toggle.js";
+/** The keys Radix's roving focus moves between items with. */
+const arrowKeys = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);
+function isItem(target) {
+    return (target instanceof HTMLElement && target.dataset.slot === "toggle-group-item");
+}
 const ToggleGroupContext = React.createContext({
     size: "default",
     variant: "default",
     spacing: 2,
     orientation: "horizontal",
 });
-function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", children, ...props }) {
+function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", children, onKeyDown, onPointerDown, onFocus, ...props }) {
+    // The item an arrow key was pressed on, until focus lands on the next one.
+    // A single group's items are radios, and focus that arrives by arrow key
+    // selects, as in any radio group; Tab and clicks do not.
+    const arrowFrom = React.useRef(null);
+    const selectsOnArrow = props.type === "single" && props.rovingFocus !== false;
     const context = React.useMemo(() => ({ variant, size, spacing, orientation }), [variant, size, spacing, orientation]);
-    return (_jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit max-w-full flex-row flex-wrap items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-none data-vertical:flex-col data-vertical:flex-nowrap data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: context, children: children }) }));
+    return (_jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            // Radix moves focus to the next item once the key has bubbled up.
+            if (selectsOnArrow &&
+                arrowKeys.has(event.key) &&
+                isItem(event.target) &&
+                !(event.metaKey || event.ctrlKey || event.altKey || event.shiftKey)) {
+                arrowFrom.current = event.target;
+            }
+        }, onPointerDown: (event) => {
+            onPointerDown?.(event);
+            arrowFrom.current = null;
+        }, onFocus: (event) => {
+            onFocus?.(event);
+            const from = arrowFrom.current;
+            arrowFrom.current = null;
+            const item = event.target;
+            // Clicking runs the selection Radix already owns, onValueChange included.
+            if (from &&
+                from !== item &&
+                isItem(item) &&
+                item.getAttribute("aria-checked") !== "true") {
+                item.click();
+            }
+        }, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit max-w-full flex-row flex-wrap items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-none data-vertical:flex-col data-vertical:flex-nowrap data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: context, children: children }) }));
 }
 function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
     const context = React.useContext(ToggleGroupContext);

package/dist/tooltip.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { overlaySideSlide } from "./internal/overlay-styles.js";
+import { OVERLAY_SIDE_OFFSET, overlaySideSlide, } from "./internal/overlay-styles.js";
 import { cn } from "./utils.js";
 /** True inside a TooltipProvider, so `Tooltip` does not add its own. */
 const HasTooltipProvider = React.createContext(false);
@@ -28,7 +28,7 @@ function Tooltip({ ...props }) {
 function TooltipTrigger({ ...props }) {
     return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
-function TooltipContent({ className, arrowClassName, sideOffset = 4, children, ...props }) {
+function TooltipContent({ className, arrowClassName, sideOffset = OVERLAY_SIDE_OFFSET, children, ...props }) {
     return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn(overlaySideSlide, 
             // Radix tooltips open as "delayed-open" or "instant-open", which
             // the shared data-open fade does not match.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",

package/skills/atlas-react-kit/SKILL.md

@@ -28,23 +28,21 @@ than guessing.
 
 ## 2. Check the project setup once
 
-Components render unstyled unless the app's global stylesheet imports the theme
-and tells Tailwind to scan the kit's compiled files:
+Components render unstyled unless the app's global stylesheet imports the
+theme and tells Tailwind to scan the kit's compiled files. Compare the app
+with the setup in the package's README (the stylesheet lines and dark mode):
 
-```css
-@import "tailwindcss";
-@import "atlas-react-kit/theme.css";
-@source "../node_modules/atlas-react-kit/dist"; /* relative to this CSS file */
+```sh
+cat "$KIT/README.md"
 ```
 
-Dark mode needs `ThemeProvider` from `atlas-react-kit/theme-provider` near the
-root (or a `dark` class on an ancestor). Toasts need one `<Toaster />` from
-`atlas-react-kit/toast`; show them with `toast()` from the same module, using
-only the options it declares. Never import a toast library such as `sonner`
-directly: the kit owns the toast API, and a second copy never reaches its
-toaster. Some entry points need optional peers; install the extras from the
-"Optional peer dependencies" table in `COMPONENTS.md` when you import them.
-Fix missing setup rather than working around unstyled components.
+Toasts need one `<Toaster />` from `atlas-react-kit/toast`; show them with
+`toast()` from the same module, using only the options it declares. Never
+import a toast library such as `sonner` directly: the kit owns the toast API,
+and a second copy never reaches its toaster. Some entry points need optional
+peers; install the extras from the "Optional peer dependencies" table in
+`COMPONENTS.md` when you import them. Fix missing setup rather than working
+around unstyled components.
 
 ## 3. Pick the kit component for the job
 
@@ -54,48 +52,54 @@ Import each component from its subpath, e.g.
 
 | Need                                                       | Use                                                                                                                     |
 | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| Short fixed list (a handful of options)                    | `Select` family from `select`                                                                                           |
-| Long or searchable list (timezones, currencies)            | `Combobox` from `combobox` with `{ value, label }[]` options; set `creatable` to invent a value the catalog lacks       |
+| Short fixed list (a handful of options)                    | `Select` from `select`                                                                                                  |
+| Long or searchable list (timezones, currencies)            | `Combobox` from `combobox`                                                                                              |
 | Always-visible searchable list (places)                    | `SearchPicker` from `search-picker`                                                                                     |
-| One date, or a from/to range                               | `DatePickerButton` from `date-picker` (`mode="range"` for ranges)                                                       |
+| One date, or a from/to range                               | `DatePickerButton` from `date-picker`                                                                                   |
 | Date and time (not `datetime-local`)                       | `DateTimePickerButton` from `date-time-picker`                                                                          |
 | Labelled field with error text                             | `FormTextField`, `FormSelectField`, `FormDatePickerField`, `FormDateTimePickerField`, `FormMarkdownField` from `form/*` |
 | Checkbox, checkbox group, toggle group, combobox in a form | `FormCheckboxField`, `FormCheckboxGroupField`, `FormToggleGroupField`, `FormComboboxField` from `form/*`                |
 | Custom control the kit has no form field for               | `FormControlField` from `form/control-field`                                                                            |
 | Form-level error (save failed)                             | `FormFeedbackField` from `form/feedback-field`                                                                          |
-| Content panels on one page                                 | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` from `tabs`                                                            |
-| View switch that changes the URL                           | `TabsNav` with `TabsNavLink` from `tabs` (`asChild` for a router link); Next: `next/tabs-nav-link`                      |
-| App shell nav (Calendar, Tasks, Settings)                  | `NavLink` from `nav-link` (`asChild` for a router link); Next: `next/nav-link`; `active={isNavActive(pathname, href)}`  |
-| Focus the first invalid field when a submit fails          | `focusFirstInvalid(formId)` from `form/focus-first-invalid`; give fields `id={field.name}`                              |
+| Focus the first invalid field when a submit fails          | `focusFirstInvalid` from `form/focus-first-invalid`; fields without a `field` prop take `fieldName={field.name}`        |
+| Content panels on one page                                 | `Tabs` from `tabs`                                                                                                      |
+| View switch that changes the URL                           | `TabsNav` and `TabsNavLink` from `tabs`; in Next, `next/tabs-nav-link`                                                  |
+| App shell nav (Calendar, Tasks, Settings)                  | `NavLink` from `nav-link`; in Next, `next/nav-link`                                                                     |
 | Skip-to-content link                                       | `SkipLink` from `skip-link`                                                                                             |
 | Page title row with actions                                | `PageHeader` from `page-header`                                                                                         |
-| Previous / today / next period                             | `PeriodStepper` from `period-stepper`; `next/period-stepper` for URL periods                                            |
-| Cards in columns that drag                                 | `KanbanBoard` from `kanban`; `KanbanSkeleton` while loading                                                             |
-| SVG chart axes, grid, tooltip, legend                      | `chart` helpers (`chartFrame`, `ChartYAxisGrid`, `ChartTooltip`, `ChartLegend`)                                         |
-| Status chip (paid, pending, failed)                        | `Badge variant="soft"` with `tone="success"`, `"warning"`, `"destructive"`, or `"neutral"`                              |
-| Data table                                                 | `Table` family from `table`; `SortableTableHead`; `TableBodySkeleton` while loading                                     |
+| Previous / today / next period                             | `PeriodStepper` from `period-stepper`; for URL periods in Next, `next/period-stepper`                                   |
+| Cards in columns that drag                                 | `KanbanBoard` from `kanban`                                                                                             |
+| SVG chart axes, grid, tooltip, legend                      | `chartFrame` and the other helpers from `chart`                                                                         |
+| Status chip (paid, pending, failed)                        | `Badge` from `badge`                                                                                                    |
+| Data table                                                 | `Table` from `table`                                                                                                    |
+| Sortable column header                                     | `SortableTableHead` from `sortable-table-head`                                                                          |
+| Table body while loading                                   | `TableBodySkeleton` from `table-body-skeleton`                                                                          |
 | Nothing to show yet                                        | `EmptyPanel` from `empty-panel`                                                                                         |
-| Grouped content                                            | `Card` family from `card`; `<Card flush>` for an edge-to-edge table or list                                             |
-| Modal                                                      | `Dialog` family from `dialog`                                                                                           |
-| Label for an icon button, or a short hint                  | `Tooltip` from `tooltip`; keep `aria-label` on icon buttons                                                             |
-| Longer help from a glyph                                   | `InfoTip` / `InlineTip` from `info-tip` (not `Tooltip`)                                                                 |
+| Grouped content                                            | `Card` from `card`                                                                                                      |
+| Modal                                                      | `Dialog` from `dialog`                                                                                                  |
+| Label for an icon button, or a short hint                  | `Tooltip` from `tooltip`                                                                                                |
+| Longer help from a glyph                                   | `InfoTip` from `info-tip`                                                                                               |
 | Color scale key                                            | `ColorLegend` from `color-legend`                                                                                       |
-| GitHub-flavoured Markdown                                  | `Markdown` from `markdown`; write/preview with `FormMarkdownField`                                                      |
-| Summary figure in a strip                                  | `StatTile` from `stat-tile` (`statTileGrid`, `sectionLabel`)                                                            |
-| Value against a scale, optional ticks                      | `Meter` from `meter` (not `Progress`)                                                                                   |
+| GitHub-flavoured Markdown                                  | `Markdown` from `markdown`                                                                                              |
+| Summary figure in a strip                                  | `StatTile` from `stat-tile`                                                                                             |
+| Value against a scale, optional ticks                      | `Meter` from `meter`                                                                                                    |
 | Number on a continuous scale                               | `Slider` from `slider`                                                                                                  |
-| Row actions or an overflow menu of commands                | `DropdownMenu` family from `dropdown-menu`                                                                              |
-| Setting that applies immediately                           | `Switch` from `switch`; `Checkbox` for choices submitted with a form                                                    |
-| One choice from a few visible options                      | `RadioGroup` and `RadioGroupItem` from `radio-group`                                                                    |
-| Inline message about a page or section                     | `Alert` from `alert` (`success`, `warning`, `destructive` variants)                                                     |
-| Person or workspace image                                  | `Avatar`, `AvatarImage`, `AvatarFallback` from `avatar`                                                                 |
-| Sections that expand in place                              | `Accordion` family from `accordion`                                                                                     |
-| Pages of a long list                                       | `Pagination` family from `pagination`                                                                                   |
-| Where the page sits in a hierarchy                         | `Breadcrumb` family from `breadcrumb`                                                                                   |
-| Work in progress                                           | `Progress` from `progress` when the percent is known, else `Spinner` from `spinner`                                     |
+| Row actions or an overflow menu of commands                | `DropdownMenu` from `dropdown-menu`                                                                                     |
+| Setting that applies immediately                           | `Switch` from `switch`                                                                                                  |
+| On/off choice submitted with a form                        | `Checkbox` from `checkbox`                                                                                              |
+| One choice from a few visible options                      | `RadioGroup` from `radio-group`                                                                                         |
+| Inline message about a page or section                     | `Alert` from `alert`                                                                                                    |
+| Person or workspace image                                  | `Avatar` from `avatar`                                                                                                  |
+| Sections that expand in place                              | `Accordion` from `accordion`                                                                                            |
+| Pages of a long list                                       | `Pagination` from `pagination`                                                                                          |
+| Where the page sits in a hierarchy                         | `Breadcrumb` from `breadcrumb`                                                                                          |
+| Job with a known percentage                                | `Progress` from `progress`                                                                                              |
+| Wait of unknown length                                     | `Spinner` from `spinner`                                                                                                |
 | Crash recovery around a section                            | `ErrorBoundary` from `error-boundary`                                                                                   |
 | Conditional classes                                        | `cn` from `utils`                                                                                                       |
 
+The parts, props, and options of each are in its `COMPONENTS.md` row.
+
 If nothing fits, build the piece in the app from kit primitives and semantic
 tokens. Do not copy kit source into the app; a missing shared component belongs
 in the atlas-design-system repository.