atlas-react-kit 0.8.2 → 0.9.1

package/COMPONENTS.md

@@ -5,6 +5,18 @@ underlying element or Radix props, including `className`, alongside their option
 Form helpers and `TableBodySkeleton` accept only their documented props. There is
 no root component barrel.
 
+Core entries need only the kit. These feature entries need an extra install
+(same version ranges as the kit's optional peers). `Toaster` also reads the
+theme from `next-themes`, so toast consumers install that too.
+
+| Entry points                                                                                           | Extra install                                    |
+| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------ |
+| `calendar`, `date-picker`, `date-time-picker`, `form/date-picker-field`, `form/date-time-picker-field` | `npm i react-day-picker@^10.0.1 date-fns@^4.4.0` |
+| `markdown`, `form/markdown-field`                                                                      | `npm i react-markdown@^10.1.0 remark-gfm@^4.0.1` |
+| `theme-provider`                                                                                       | `npm i next-themes@^0.4.6`                       |
+| `toast`                                                                                                | `npm i sonner@^2.0.7 next-themes@^0.4.6`         |
+| `next/tabs-nav-link`                                                                                   | `npm i next@^16.0.0`                             |
+
 | Subpath                       | Main exports and options                                                                                                                                                                                                                                                                                                                                                                 |
 | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `accordion`                   | `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`; Radix `type` `single` (with `collapsible`) or `multiple`                                                                                                                                                                                                                                                           |

package/DESIGN_RULES.md

@@ -82,9 +82,15 @@ 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 padding (`px-4 py-3`). 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.8.2
+npm install --save-exact atlas-react-kit@0.9.1
 ```
 
 Import components by subpath:
@@ -27,6 +27,18 @@ export function Example() {
 }
 ```
 
+Core entries need only the kit. These feature entries need an extra install
+(same version ranges as the kit's optional peers). `Toaster` also reads the
+theme from `next-themes`, so toast consumers install that too.
+
+| Entry points                                                                                           | Extra install                                    |
+| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------ |
+| `calendar`, `date-picker`, `date-time-picker`, `form/date-picker-field`, `form/date-time-picker-field` | `npm i react-day-picker@^10.0.1 date-fns@^4.4.0` |
+| `markdown`, `form/markdown-field`                                                                      | `npm i react-markdown@^10.1.0 remark-gfm@^4.0.1` |
+| `theme-provider`                                                                                       | `npm i next-themes@^0.4.6`                       |
+| `toast`                                                                                                | `npm i sonner@^2.0.7 next-themes@^0.4.6`         |
+| `next/tabs-nav-link`                                                                                   | `npm i next@^16.0.0`                             |
+
 In your global stylesheet, import the theme after Tailwind and register the
 installed JavaScript directory. Paths in `@source` are relative to that stylesheet;
 this example assumes it is one directory below the project root.
@@ -90,8 +102,9 @@ The public site is Storybook in `site/`. `npm run build --prefix site`
 typechecks the stories, builds Storybook into `site/dist`, then checks the
 static output. Vercel serves that directory; `/playground` and `/storybook`
 redirect to `/`. The site and Storybook dependencies are not part of the npm
-package. The optional Next.js 16 adapter requires Next only when imported. The
-package does not bundle React.
+package. Optional feature libraries (markdown, dates, toasts, theme, Next) are
+peer dependencies and are required only when those entry points are imported.
+The package does not bundle React.
 
 Run `npm run dev --prefix site` (or `npm run storybook --prefix site`) for the
 playground on port 6006. Existing examples live in `stories/` and are imported
@@ -116,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.8.2.tgz --access public
+npm publish ./release-artifacts/atlas-react-kit-0.9.1.tgz --access public
 ```
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md) for adding components, the browser

package/dist/markdown.d.ts

@@ -9,8 +9,8 @@ export type MarkdownProps = {
 };
 /**
  * GitHub-flavoured Markdown, token-styled and sanitized. No Next, no raw
- * HTML, no typography plugin. `react-markdown` and `remark-gfm` stay in this
- * module so other subpaths do not pay for them.
+ * HTML, no typography plugin. `react-markdown` and `remark-gfm` are optional
+ * peers imported only here so other subpaths do not pay for them.
  */
 declare function Markdown({ content, className }: MarkdownProps): import("react").JSX.Element;
 /** Alias used by apps that imported MarkdownContent. */

package/dist/markdown.js

@@ -51,8 +51,8 @@ const markdownComponents = {
 };
 /**
  * GitHub-flavoured Markdown, token-styled and sanitized. No Next, no raw
- * HTML, no typography plugin. `react-markdown` and `remark-gfm` stay in this
- * module so other subpaths do not pay for them.
+ * HTML, no typography plugin. `react-markdown` and `remark-gfm` are optional
+ * peers imported only here so other subpaths do not pay for them.
  */
 function Markdown({ content, className }) {
     return (_jsx("article", { "data-slot": "markdown", className: cn("flex flex-col gap-3 text-foreground", className), children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, urlTransform: safeMarkdownUrl, components: markdownComponents, children: content }) }));

package/dist/toast.js

@@ -37,23 +37,35 @@ 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.
  */
 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-3 gap-y-2 overflow-visible rounded-none border border-border bg-popover px-4 py-3 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.
+    content: "flex min-w-0 flex-1 basis-full flex-col gap-1 [[data-icon]+&]:basis-[calc(100%-1.75rem)]",
     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 +75,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 +83,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.8.2",
+  "version": "0.9.1",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",
@@ -255,27 +255,45 @@
     "access": "public"
   },
   "peerDependencies": {
+    "date-fns": "^4.4.0",
     "next": "^16.0.0",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
+    "react-day-picker": "^10.0.1",
     "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.7",
     "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
+    "date-fns": {
+      "optional": true
+    },
     "next": {
       "optional": true
+    },
+    "next-themes": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
     }
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "date-fns": "^4.4.0",
     "lucide-react": "^1.16.0",
-    "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
-    "react-day-picker": "^10.0.1",
-    "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1",
-    "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0"
   },
@@ -288,11 +306,17 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitest/coverage-v8": "4.1.11",
+    "date-fns": "^4.4.0",
     "jsdom": "^29.1.1",
     "next": "16.2.6",
+    "next-themes": "^0.4.6",
     "prettier": "^3.8.1",
     "react": "^19.2.4",
+    "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.4",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.7",
     "tailwindcss": "^4.2.1",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9"

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

@@ -42,7 +42,9 @@ 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. Fix missing setup rather than working
+toaster. Markdown, dates, toasts, and `ThemeProvider` are optional peers —
+install the extras listed in `COMPONENTS.md` when you import those entry
+points. Fix missing setup rather than working
 around unstyled components.
 
 ## 3. Pick the kit component for the job