atlas-react-kit 0.9.1 → 0.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DESIGN_RULES.md +3 -1
- package/README.md +2 -2
- package/dist/toast.js +7 -2
- package/package.json +1 -1
package/DESIGN_RULES.md
CHANGED
|
@@ -85,7 +85,9 @@ still read normal words.
|
|
|
85
85
|
Primitives have square corners. Reserve `rounded-full` for dots, avatars,
|
|
86
86
|
other circles, and the toast close badge. Card and dialog titles already use
|
|
87
87
|
uppercase, tracked `font-heading` styling. Toasts are overlay popovers with
|
|
88
|
-
the same square corners and Alert padding (`
|
|
88
|
+
the same square corners and Alert left/vertical padding (`pl-4 py-3`). Right
|
|
89
|
+
padding is `pr-6` so copy clears the floating close badge. Icon-to-text is
|
|
90
|
+
`gap-x-2.5` so the status icon and copy read as one unit. The close control is
|
|
89
91
|
a circular badge centred on the top-right corner (half outside the border),
|
|
90
92
|
not a control in the text row. A plain `toast()` has no icon — status icons
|
|
91
93
|
belong to `success`, `info`, `warning`, `error`, and `loading`. Tone colors
|
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@ keeping locally (`InfoTip`, `ColorLegend`, `SearchPicker`, `Markdown`,
|
|
|
7
7
|
React 19 and Tailwind 4 are required.
|
|
8
8
|
|
|
9
9
|
```sh
|
|
10
|
-
npm install --save-exact atlas-react-kit@0.9.
|
|
10
|
+
npm install --save-exact atlas-react-kit@0.9.2
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
Import components by subpath:
|
|
@@ -129,7 +129,7 @@ artifact with the package owner's npm login:
|
|
|
129
129
|
```sh
|
|
130
130
|
mkdir -p release-artifacts
|
|
131
131
|
npm pack --pack-destination release-artifacts
|
|
132
|
-
npm publish ./release-artifacts/atlas-react-kit-0.9.
|
|
132
|
+
npm publish ./release-artifacts/atlas-react-kit-0.9.2.tgz --access public
|
|
133
133
|
```
|
|
134
134
|
|
|
135
135
|
See [CONTRIBUTING.md](./CONTRIBUTING.md) for adding components, the browser
|
package/dist/toast.js
CHANGED
|
@@ -51,13 +51,18 @@ const toast = Object.assign(show(sonnerToast), {
|
|
|
51
51
|
* popover fill, border, and muted text beat those fills. The 24px hit area
|
|
52
52
|
* is the badge itself; the X is 12px. `overflow-visible` on the toast and
|
|
53
53
|
* toaster keeps stacked badges from being clipped.
|
|
54
|
+
*
|
|
55
|
+
* Padding is asymmetric: `pl-4` matches Alert; `pr-6` clears the badge
|
|
56
|
+
* (about 16px of it sits inside the border). Icon-to-text is `gap-x-2.5`
|
|
57
|
+
* so the status icon and copy read as one unit.
|
|
54
58
|
*/
|
|
55
59
|
const classNames = {
|
|
56
|
-
toast: "relative flex w-max max-w-[min(356px,calc(100vw-2rem))] flex-wrap items-center justify-end gap-x-
|
|
60
|
+
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",
|
|
57
61
|
// Fills the row beside the icon, so action buttons wrap to their own row
|
|
58
62
|
// (aligned right by the toast's justify-end). Without an icon the basis
|
|
59
63
|
// falls back to the title's width, so a one-word toast stays compact.
|
|
60
|
-
|
|
64
|
+
// 1.625rem = 16px icon + 10px gap-x-2.5.
|
|
65
|
+
content: "flex min-w-0 flex-1 basis-full flex-col gap-1 [[data-icon]+&]:basis-[calc(100%-1.625rem)]",
|
|
61
66
|
title: "font-medium leading-5",
|
|
62
67
|
description: "leading-5 text-muted-foreground",
|
|
63
68
|
icon: "flex size-4 shrink-0 items-center justify-center [&_svg]:size-4",
|