atlas-react-kit 0.8.1 → 0.9.0

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`                                                                                                                                                                                                                                                           |
@@ -43,7 +55,7 @@ no root component barrel.
 | `switch`                      | `Switch`; settings that apply immediately; square track and thumb                                                                                                                                                                                                                                                                                                                        |
 | `table`                       | Table, header, body, footer, row, head, cell, caption; root scroller is `min-w-0 overflow-x-auto` with a fade cue; cells are `px-2` below `sm`                                                                                                                                                                                                                                           |
 | `table-body-skeleton`         | `TableBodySkeleton`; `columns`, optional `rows` (default 5)                                                                                                                                                                                                                                                                                                                              |
-| `tabs`                        | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `tabsListVariants`, `tabsTriggerVariants`; list `variant` is `default` or `line`; style `TabsNav` links with `tabsTriggerVariants()`; `TabsNav` / `TabsList` scroll horizontally only (`overflow-y` hidden, edge fade, active item into view) — do not wrap them in `overflow-x-auto`                                       |
+| `tabs`                        | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `tabsListVariants`, `tabsTriggerVariants`; list `variant` is `default` or `line`; style `TabsNav` links with `tabsTriggerVariants()`; `TabsNav` / `TabsList` scroll horizontally only (`overflow-y` hidden, `p-1` counted in the scroller height, edge fade, active item into view) — do not wrap them in `overflow-x-auto` |
 | `toast`                       | `Toaster`, `toast`; mount one `Toaster` (`position`, `closeButton` (default on), `expand`, `visibleToasts`, `duration`), then `toast(message, options)`, `.success`, `.info`, `.warning`, `.error`, `.loading`, `.dismiss(id?)`. Options: `id` (replaces that toast), `description`, `duration`, `action` / `cancel` as `{ label, onClick }`. Kit-owned API: no toast library is exposed |
 | `toggle`                      | `Toggle`, `toggleVariants`, `selectedToggleChrome`; `variant`, `size`. Pressed state is the selected wash, text, and border via `data-state=on`, `aria-pressed`, and `aria-checked`                                                                                                                                                                                                      |
 | `toggle-group`                | `ToggleGroup`, `ToggleGroupItem`; `variant`, `size`. Items share `toggleVariants`, so single (radio) and multiple selections match a pressed `Toggle`                                                                                                                                                                                                                                    |

package/DESIGN_RULES.md

@@ -105,9 +105,10 @@ Use `Tabs` with actual `TabsContent` panels. For URL view switches, use a labell
 `TabsNav` with links and `aria-current="page"` on the active link. The optional
 Next adapter provides `TabsNavLink` with this behavior. `TabsNav` and `TabsList`
 scroll overflowing labels inside themselves (`overflow-x-auto overflow-y-hidden`,
-with padding for the active border and focus ring, and an edge fade like
-`Table`). Do not wrap them in another `overflow-x-auto` — that pairing forces
-`overflow-y: auto` and a stray vertical scrollbar.
+with padding for the active border and focus ring counted in the scroller
+height, and an edge fade like `Table`). Do not wrap them in another
+`overflow-x-auto` — that pairing forces `overflow-y: auto` and a stray
+vertical scrollbar.
 
 Use `FormTextField`, `FormSelectField`, `FormDatePickerField`,
 `FormDateTimePickerField`, `FormMarkdownField`, and `FormFeedbackField` for

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

package/dist/internal/tabs-styles.d.ts

@@ -1,5 +1,17 @@
 declare const tabsListVariants: (props?: ({
     variant?: "default" | "line" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Horizontal scroller around a tab row. `p-1` leaves room for the active
+ * border and focus ring; the height is the `h-11` list plus that padding
+ * (`h-13` = 44px + 8px) so the list fits the content box. Putting padding
+ * on an overflow box without this height makes `scrollHeight` 4px taller
+ * than `clientHeight` (48 vs 44) and a vertical scrollbar appears if
+ * `overflow-y` is not hidden. Line variant adds `pb-2` for the underline
+ * (`h-14` = 44px + 4px + 8px).
+ */
+declare const tabsScrollerVariants: (props?: ({
+    variant?: "default" | "line" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const tabsTriggerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export { tabsListVariants, tabsTriggerVariants };
+export { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants };

package/dist/internal/tabs-styles.js

@@ -11,6 +11,26 @@ const tabsListVariants = cva('group/tabs-list inline-flex w-max min-w-full items
         variant: "default",
     },
 });
+/**
+ * Horizontal scroller around a tab row. `p-1` leaves room for the active
+ * border and focus ring; the height is the `h-11` list plus that padding
+ * (`h-13` = 44px + 8px) so the list fits the content box. Putting padding
+ * on an overflow box without this height makes `scrollHeight` 4px taller
+ * than `clientHeight` (48 vs 44) and a vertical scrollbar appears if
+ * `overflow-y` is not hidden. Line variant adds `pb-2` for the underline
+ * (`h-14` = 44px + 4px + 8px).
+ */
+const tabsScrollerVariants = cva("relative box-border w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden overscroll-x-contain p-1 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", {
+    variants: {
+        variant: {
+            default: 'group-data-[orientation="horizontal"]/tabs:h-13',
+            line: 'group-data-[orientation="horizontal"]/tabs:h-14 pb-2',
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
 const tabsTriggerVariants = cva([
     focusRing,
     disabledState,
@@ -22,4 +42,4 @@ const tabsTriggerVariants = cva([
     selectedState.active,
     'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation="horizontal"]/tabs:after:inset-x-0 group-data-[orientation="horizontal"]/tabs:after:bottom-[-5px] group-data-[orientation="horizontal"]/tabs:after:h-0.5 group-data-[orientation="vertical"]/tabs:after:inset-y-0 group-data-[orientation="vertical"]/tabs:after:-right-1 group-data-[orientation="vertical"]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state="active"]:after:opacity-100',
 ]);
-export { tabsListVariants, tabsTriggerVariants };
+export { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants };

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/tabs.d.ts

@@ -15,8 +15,9 @@ declare function TabsContent({ className, ...props }: React.ComponentProps<typeo
  * `TabsNavLink` does this for you).
  *
  * Overflow is handled here: the row scrolls horizontally only, with padding
- * for active borders and focus rings, an edge fade while it overflows, and
- * the active link scrolled into view on mount. Do not wrap it in
+ * for active borders and focus rings counted in the scroller height (so the
+ * list cannot overflow on y), an edge fade while it overflows, and the
+ * active link scrolled into view on mount. Do not wrap it in
  * `overflow-x-auto`.
  */
 declare function TabsNav({ className, children, ...props }: React.ComponentProps<"nav"> & {

package/dist/tabs.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import {} from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { focusRing } from "./internal/styles.js";
-import { tabsListVariants, tabsTriggerVariants, } from "./internal/tabs-styles.js";
+import { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants, } from "./internal/tabs-styles.js";
 import { useHorizontalOverflow } from "./internal/use-horizontal-overflow.js";
 import { cn } from "./utils.js";
 function Tabs({ className, orientation = "horizontal", ...props }) {
@@ -13,9 +13,10 @@ function Tabs({ className, orientation = "horizontal", ...props }) {
 /**
  * Horizontal scroller around a tab row. `overflow-x: auto` alone would
  * compute `overflow-y` to `auto` as well (CSS overflow pairing), so the
- * active tab's border and focus ring grow a vertical scrollbar. Clip the
- * y axis, pad for those strokes, and fade the edges while the row
- * overflows — same cue as `Table`.
+ * active tab's border and focus ring grow a vertical scrollbar. Pad for
+ * those strokes *inside* the box (`h-13` = `h-11` list + `p-1`), clip the
+ * y axis as a backstop, and fade the edges while the row overflows —
+ * same cue as `Table`.
  */
 function TabsScroller({ variant = "default", children, }) {
     const ref = React.useRef(null);
@@ -31,7 +32,7 @@ function TabsScroller({ variant = "default", children, }) {
             behavior: "auto",
         });
     }, []);
-    return (_jsx("div", { ref: ref, "data-slot": "tabs-scroller", "data-variant": variant, tabIndex: overflowing ? 0 : undefined, className: cn(focusRing, "relative w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden overscroll-x-contain p-1 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", variant === "line" && "pb-2"), children: children }));
+    return (_jsx("div", { ref: ref, "data-slot": "tabs-scroller", "data-variant": variant, tabIndex: overflowing ? 0 : undefined, className: cn(focusRing, tabsScrollerVariants({ variant })), children: children }));
 }
 function TabsList({ className, variant = "default", ...props }) {
     return (_jsx(TabsScroller, { variant: variant ?? "default", children: _jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), 
@@ -53,8 +54,9 @@ function TabsContent({ className, ...props }) {
  * `TabsNavLink` does this for you).
  *
  * Overflow is handled here: the row scrolls horizontally only, with padding
- * for active borders and focus rings, an edge fade while it overflows, and
- * the active link scrolled into view on mount. Do not wrap it in
+ * for active borders and focus rings counted in the scroller height (so the
+ * list cannot overflow on y), an edge fade while it overflows, and the
+ * active link scrolled into view on mount. Do not wrap it in
  * `overflow-x-auto`.
  */
 function TabsNav({ className, children, ...props }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "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