atlas-react-kit 0.6.1 → 0.7.0

package/COMPONENTS.md

@@ -38,7 +38,7 @@ no root component barrel.
 | `separator`, `skeleton`       | `Separator`, `Skeleton`                                                                                                                                                                                                                                                                               |
 | `slider`                      | `Slider`; `value` number, `onValueChange`, optional `onValueCommit`, `min`, `max`, `step`, `disabled`, `id`, `aria-labelledby`, `className`. Radix Slider; 44px thumb hit; square track; primary fill. Name it with `aria-labelledby`.                                                                |
 | `sortable-table-head`         | `SortableTableHead`; `sorted`, `direction` (`asc` \                                                                                                                                                                                                                                                   |
-| `sonner`                      | `Toaster`; Sonner props, with `next-themes` theme defaults                                                                                                                                                                                                                                            |
+| `sonner`                      | `Toaster`, `toast`; kit-styled toasts (status icons, kit buttons, close button); import `toast` from here, not `sonner`                                                                                                                                                                               |
 | `spinner`                     | `Spinner`; `role="status"` with `aria-label` (default `Loading`)                                                                                                                                                                                                                                      |
 | `stat-tile`                   | `StatTile`, `statTileGrid`, `sectionLabel`; `label`, `value`, optional `sub`, `children`, `className`.                                                                                                                                                                                                |
 | `switch`                      | `Switch`; settings that apply immediately; square track and thumb                                                                                                                                                                                                                                     |

package/README.md

@@ -7,7 +7,7 @@ keeping locally (`InfoTip`, `ColorLegend`, `SearchPicker`, `Markdown`,
 React 19 and Tailwind 4 are required.
 
 ```sh
-npm install --save-exact atlas-react-kit@0.6.1
+npm install --save-exact atlas-react-kit@0.7.0
 ```
 
 Import components by subpath:
@@ -116,7 +116,7 @@ artifact with the package owner's npm login:
 ```sh
 mkdir -p release-artifacts
 npm pack --pack-destination release-artifacts
-npm publish ./release-artifacts/atlas-react-kit-0.6.1.tgz --access public
+npm publish ./release-artifacts/atlas-react-kit-0.7.0.tgz --access public
 ```
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md) for adding components, the browser

package/dist/sonner.d.ts

@@ -1,4 +1,8 @@
-import * as React from "react";
-import { type ToasterProps } from "sonner";
-declare const Toaster: ({ ...props }: ToasterProps) => React.JSX.Element;
-export { Toaster };
+import { toast, type ToasterProps } from "sonner";
+/**
+ * Mount one near the app root and call `toast()` from this module (not from
+ * `sonner` directly), so the app and the toaster always share one Sonner.
+ */
+declare const Toaster: ({ toastOptions, ...props }: ToasterProps) => import("react").JSX.Element;
+export { Toaster, toast };
+export type { ToasterProps };

package/dist/sonner.js

@@ -1,15 +1,61 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import { CircleAlertIcon, CircleCheckIcon, InfoIcon, LoaderCircleIcon, XIcon, } from "lucide-react";
 import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
-const Toaster = ({ ...props }) => {
+import { Toaster as Sonner, toast } from "sonner";
+import { buttonVariants } from "./button.js";
+import { cn } from "./utils.js";
+/**
+ * Toasts drawn entirely with kit classes. Sonner's own styles are unlayered
+ * CSS that Tailwind utilities cannot override, so the toaster runs Sonner
+ * `unstyled` and styles every part here: the popover surface, Alert-style
+ * status icons (the tone colors the icon, title, and border, not the body
+ * text), kit buttons for actions, and a labelled close button with the
+ * shared focus ring.
+ */
+const classNames = {
+    toast: "flex w-(--width) flex-wrap items-start justify-end gap-3 rounded-none border border-border bg-popover p-4 pr-10 text-sm text-popover-foreground shadow-lg",
+    // Fills the row beside the icon, so action buttons wrap to their own row
+    // (aligned right by the toast's justify-end).
+    content: "flex min-w-0 flex-1 basis-[calc(100%-1.75rem)] flex-col gap-0.5",
+    title: "font-medium leading-5",
+    description: "leading-5 text-muted-foreground",
+    icon: "mt-0.5 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 text-muted-foreground"),
+    success: "border-success/40 [&_[data-title]]:text-success",
+    warning: "border-warning/40 [&_[data-title]]:text-warning",
+    error: "border-destructive/40 [&_[data-title]]:text-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" }),
+    loading: (_jsx(LoaderCircleIcon, { "aria-hidden": true, className: "animate-spin text-muted-foreground" })),
+    close: _jsx(XIcon, { "aria-hidden": true }),
+};
+/** Merge app class names onto the kit's, part by part. */
+function mergeClassNames(extra) {
+    if (!extra)
+        return classNames;
+    const merged = { ...classNames };
+    for (const [part, value] of Object.entries(extra)) {
+        merged[part] = cn(classNames[part], value);
+    }
+    return merged;
+}
+/**
+ * Mount one near the app root and call `toast()` from this module (not from
+ * `sonner` directly), so the app and the toaster always share one Sonner.
+ */
+const Toaster = ({ toastOptions, ...props }) => {
     const { theme = "system" } = useTheme();
-    return (_jsx(Sonner, { theme: theme, className: "toaster group", style: {
-            "--normal-bg": "var(--popover)",
-            "--normal-text": "var(--popover-foreground)",
-            "--normal-border": "var(--border)",
-            "--border-radius": "0px",
-        }, ...props }));
+    return (_jsx(Sonner, { theme: theme, className: "toaster group", closeButton: true, icons: icons, ...props, toastOptions: {
+            ...toastOptions,
+            unstyled: true,
+            classNames: mergeClassNames(toastOptions?.classNames),
+        } }));
 };
-export { Toaster };
+export { Toaster, toast };

package/package.json

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

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

@@ -39,8 +39,8 @@ and tells Tailwind to scan the kit's compiled files:
 
 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/sonner`; call `toast()` from the `sonner` package, which the
-app should list as its own dependency. Fix missing setup rather than working
+`atlas-react-kit/sonner`; import `toast` from `atlas-react-kit/sonner` too,
+never from `sonner` (a second copy of Sonner never reaches the kit's toaster). Fix missing setup rather than working
 around unstyled components.
 
 ## 3. Pick the kit component for the job