aplance-ui 1.5.0 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aplance-ui",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "The aplance-ui CLI - scaffold the design system and copy components into your project as source.",
   "keywords": [
     "react",

package/registry/components/{ui → primitives}/scroll-rail/scroll-rail.module.css

@@ -30,6 +30,10 @@
   min-width: 0;
 }
 
+.rail_without_controls {
+  --scroll-rail-control: 0px;
+}
+
 /* The scroller. It shows no scrollbar, so the row never changes height, and
    pads like a toolbar so its controls' focus rings show, since a scroller
    clips both axes. */
@@ -88,17 +92,57 @@
   }
 }
 
-/* A chevron, over the clear edge of its fade, on the row's middle. */
-.more {
+/* A chevron, over the clear edge of its fade, on the row's middle. The
+   primitive owns only neutral button chrome; native props let a caller replace
+   the icon, label, classes, and inline styles without depending on Button. */
+.control {
   position: absolute;
   top: 50%;
   translate: 0 -50%;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-10);
+  height: var(--spacing-10);
+  padding: 0;
+  appearance: none;
+  font: inherit;
+  color: var(--color-foreground);
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  transition:
+    color var(--transition-base),
+    background-color var(--transition-base),
+    border-color var(--transition-base),
+    opacity var(--transition-base);
+
+  &:hover:not(:disabled) {
+    background-color: var(--color-muted);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  > svg {
+    pointer-events: none;
+  }
 }
 
-.more_start {
+.control_start {
   left: 0;
 }
 
-.more_end {
+.control_end {
   right: 0;
 }

package/registry/components/{ui → primitives}/scroll-rail/scroll-rail.tsx

@@ -3,13 +3,13 @@ import {
   useEffect,
   useRef,
   useState,
+  type ComponentPropsWithoutRef,
   type ReactNode,
   type Ref,
 } from "react";
 import clsx from "clsx";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { useResizeObserver } from "../../../hooks/useResizeObserver";
-import { Button } from "../button/button";
 import s from "./scroll-rail.module.css";
 
 // A row that scrolls sideways, as a row of chips or tabs does on a phone:
@@ -30,12 +30,36 @@ import s from "./scroll-rail.module.css";
 /** How far a chevron scrolls, in widths of the row. */
 const PAGE = 0.8;
 
-export type ScrollRailProps = {
+export type ScrollRailControlProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  "type"
+>;
+
+export type ScrollRailControls = {
+  /** Class shared by both arrow buttons. */
+  className?: string;
+  /** Native button props for the previous arrow. `children` replaces its icon. */
+  previous?: ScrollRailControlProps;
+  /** Native button props for the next arrow. `children` replaces its icon. */
+  next?: ScrollRailControlProps;
+};
+
+export type ScrollRailProps = Omit<
+  ComponentPropsWithoutRef<"div">,
+  "children"
+> & {
   children: ReactNode;
   /** The rail's own box, as a flex item where it sits. */
   className?: string;
+  /** Class merged onto the horizontal scroller. */
+  trackClassName?: string;
   /** The row's layout around its items, such as their gap. */
   contentClassName?: string;
+  /**
+   * Customize the overflow arrows with native button props, or hide them with
+   * `false`. A custom onClick runs first and can prevent the built-in scroll.
+   */
+  controls?: false | ScrollRailControls;
   /** The scroller, for a caller that scrolls it itself, as Tabs keeps its
    *  active tab in view. */
   ref?: Ref<HTMLDivElement>;
@@ -54,8 +78,11 @@ const wheelUnit = (event: WheelEvent, track: HTMLElement) =>
 export const ScrollRail = ({
   children,
   className,
+  trackClassName,
   contentClassName,
+  controls,
   ref,
+  ...rootProps
 }: ScrollRailProps) => {
   const trackRef = useRef<HTMLDivElement | null>(null);
   const setTrack = useCallback(
@@ -85,6 +112,12 @@ export const ScrollRail = ({
   useResizeObserver(trackRef, measure);
   useResizeObserver(contentRef, measure);
 
+  // Measure once after mount as well. ResizeObserver reports later size
+  // changes, but its initial notification is not synchronous in every host.
+  useEffect(() => {
+    measure();
+  }, [measure]);
+
   useEffect(() => {
     const track = trackRef.current;
     if (!track) return;
@@ -114,46 +147,68 @@ export const ScrollRail = ({
     });
   };
 
+  const renderControl = (direction: -1 | 1) => {
+    const visible = direction === -1 ? ends.start : ends.end;
+    if (!visible || controls === false) return null;
+
+    const control = direction === -1 ? controls?.previous : controls?.next;
+    const {
+      children: controlIcon,
+      className: controlClassName,
+      onClick,
+      "aria-label": ariaLabel,
+      ...controlProps
+    } = control ?? {};
+    const label = direction === -1 ? "Scroll left" : "Scroll right";
+
+    return (
+      <button
+        {...controlProps}
+        type="button"
+        className={clsx(
+          s.control,
+          direction === -1 ? s.control_start : s.control_end,
+          controls?.className,
+          controlClassName,
+        )}
+        aria-label={ariaLabel ?? label}
+        onClick={(event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) page(direction);
+        }}
+      >
+        {controlIcon ??
+          (direction === -1 ? (
+            <IconChevronLeft size={14} stroke={2} />
+          ) : (
+            <IconChevronRight size={14} stroke={2} />
+          ))}
+      </button>
+    );
+  };
+
   return (
     <div
+      {...rootProps}
       className={clsx(
         s.rail,
         ends.start && s.rail_start,
         ends.end && s.rail_end,
+        controls === false && s.rail_without_controls,
         className,
       )}
     >
-      <div ref={setTrack} className={s.track} onScroll={measure}>
+      <div
+        ref={setTrack}
+        className={clsx(s.track, trackClassName)}
+        onScroll={measure}
+      >
         <div ref={contentRef} className={clsx(s.content, contentClassName)}>
           {children}
         </div>
       </div>
-      {ends.start ? (
-        <Button
-          type="button"
-          variant="bordered"
-          size="sm"
-          layout="box"
-          className={clsx(s.more, s.more_start)}
-          aria-label="Scroll left"
-          onClick={() => page(-1)}
-        >
-          <IconChevronLeft size={14} stroke={2} />
-        </Button>
-      ) : null}
-      {ends.end ? (
-        <Button
-          type="button"
-          variant="bordered"
-          size="sm"
-          layout="box"
-          className={clsx(s.more, s.more_end)}
-          aria-label="Scroll right"
-          onClick={() => page(1)}
-        >
-          <IconChevronRight size={14} stroke={2} />
-        </Button>
-      ) : null}
+      {renderControl(-1)}
+      {renderControl(1)}
     </div>
   );
 };

package/registry/components/ui/data-table/pagination-bar.tsx

@@ -8,7 +8,7 @@ import clsx from "clsx";
 import { Button } from "../button/button";
 import { CustomSelect } from "../input-fields/custom-select/custom-select";
 import { Loader } from "../loader/loader";
-import { ScrollRail } from "../scroll-rail/scroll-rail";
+import { ScrollRail } from "../../primitives/scroll-rail/scroll-rail";
 import type { PaginationBarProps } from "./types";
 import s from "./data-table.module.css";
 

package/registry/components/ui/tabs/tabs.tsx

@@ -10,7 +10,7 @@ import {
 } from "react";
 import clsx from "clsx";
 import { useResizeObserver } from "../../../hooks/useResizeObserver";
-import { ScrollRail } from "../scroll-rail/scroll-rail";
+import { ScrollRail } from "../../primitives/scroll-rail/scroll-rail";
 import s from "./tabs.module.css";
 
 // Variants & Types

package/registry/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.aplance.com/registry.schema.json",
   "version": 4,
-  "generated": "2026-11-11T06:11:34.254Z",
+  "generated": "2026-11-11T12:39:14.314Z",
   "units": [
     {
       "name": "accordion",
@@ -573,16 +573,15 @@
     {
       "name": "scroll-rail",
       "kind": "component",
-      "group": "ui",
+      "group": "primitives",
       "files": [
-        "components/ui/scroll-rail/scroll-rail.module.css",
-        "components/ui/scroll-rail/scroll-rail.tsx"
+        "components/primitives/scroll-rail/scroll-rail.module.css",
+        "components/primitives/scroll-rail/scroll-rail.tsx"
       ],
       "clientFiles": [
-        "components/ui/scroll-rail/scroll-rail.tsx"
+        "components/primitives/scroll-rail/scroll-rail.tsx"
       ],
       "deps": [
-        "button",
         "useResizeObserver"
       ],
       "externalDeps": [