atlas-react-kit 0.8.1 → 0.8.2

package/COMPONENTS.md

@@ -43,7 +43,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.8.2
 ```
 
 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.8.1.tgz --access public
+npm publish ./release-artifacts/atlas-react-kit-0.8.2.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/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.8.2",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",