atlas-react-kit 0.9.0 → 0.9.2

package/DESIGN_RULES.md

@@ -82,9 +82,17 @@ still read normal words.
 
 ## Shape and composition
 
-Primitives have square corners. Reserve `rounded-full` for dots, avatars, and
-other circles. Card and dialog titles already use uppercase, tracked
-`font-heading` styling.
+Primitives have square corners. Reserve `rounded-full` for dots, avatars,
+other circles, and the toast close badge. Card and dialog titles already use
+uppercase, tracked `font-heading` styling. Toasts are overlay popovers with
+the same square corners and Alert left/vertical padding (`pl-4 py-3`). Right
+padding is `pr-6` so copy clears the floating close badge. Icon-to-text is
+`gap-x-2.5` so the status icon and copy read as one unit. The close control is
+a circular badge centred on the top-right corner (half outside the border),
+not a control in the text row. A plain `toast()` has no icon — status icons
+belong to `success`, `info`, `warning`, `error`, and `loading`. Tone colors
+the icon, title, and border, not the body. Width is the content up to 356px,
+or the viewport minus gutters on small screens.
 
 Use `EmptyPanel` for empty states, `TableBodySkeleton` for loading table bodies,
 and `<Card flush>` for an edge-to-edge list or table. `Table` scrolls wide

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.9.0
+npm install --save-exact atlas-react-kit@0.9.2
 ```
 
 Import components by subpath:
@@ -129,7 +129,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.9.0.tgz --access public
+npm publish ./release-artifacts/atlas-react-kit-0.9.2.tgz --access public
 ```
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md) for adding components, the browser

package/dist/toast.js

@@ -37,23 +37,40 @@ const toast = Object.assign(show(sonnerToast), {
 /**
  * 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.
+ * `unstyled` and styles every part here.
+ *
+ * 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.
+ *
+ * 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
+ * shared focus ring, but Sonner's unlayered `[data-button]` default
+ * (`background: var(--normal-text)`) and the dark `[data-close-button]` rule
+ * (not gated on `data-styled`) would paint a foreground square. Important
+ * popover fill, border, and muted text beat those fills. The 24px hit area
+ * is the badge itself; the X is 12px. `overflow-visible` on the toast and
+ * toaster keeps stacked badges from being clipped.
+ *
+ * Padding is asymmetric: `pl-4` matches Alert; `pr-6` clears the badge
+ * (about 16px of it sits inside the border). Icon-to-text is `gap-x-2.5`
+ * so the status icon and copy read as one unit.
  */
 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",
+    toast: "relative flex w-max max-w-[min(356px,calc(100vw-2rem))] flex-wrap items-center justify-end gap-x-2.5 gap-y-2 overflow-visible rounded-none border border-border bg-popover py-3 pl-4 pr-6 text-sm text-popover-foreground shadow-md",
     // 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",
+    // (aligned right by the toast's justify-end). Without an icon the basis
+    // 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",
     description: "leading-5 text-muted-foreground",
-    icon: "mt-0.5 flex size-4 shrink-0 items-center justify-center [&_svg]:size-4",
+    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 text-muted-foreground"),
+    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",
 };
@@ -63,7 +80,7 @@ const icons = {
     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 }),
+    close: _jsx(XIcon, { "aria-hidden": true, className: "size-3" }),
 };
 /**
  * Mount one near the app root, and show toasts with `toast()` from this
@@ -71,6 +88,6 @@ const icons = {
  */
 const Toaster = ({ position, closeButton = true, expand, visibleToasts, duration, }) => {
     const { theme = "system" } = useTheme();
-    return (_jsx(Sonner, { theme: theme, className: "toaster group", position: position, closeButton: closeButton, expand: expand, visibleToasts: visibleToasts, duration: duration, icons: icons, toastOptions: { unstyled: true, classNames } }));
+    return (_jsx(Sonner, { theme: theme, className: "toaster group overflow-visible", position: position, closeButton: closeButton, expand: expand, visibleToasts: visibleToasts, duration: duration, icons: icons, toastOptions: { unstyled: true, classNames } }));
 };
 export { Toaster, toast };

package/package.json

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