aplance-ui 1.3.0 → 1.5.0

package/registry/components/ui/input-fields/media-input/media-input.tsx

@@ -111,7 +111,9 @@ export const MediaInput = (props: MediaInputProps) => {
     (multiple ? "Drop files here or browse" : "Drop a file here or browse");
   const hintParts = [
     accept ? `Accepts ${accept}` : null,
-    maxSize ? `Up to ${formatBytes(maxSize)} per file` : null,
+    typeof maxSize === "number" && maxSize > 0
+      ? `Up to ${formatBytes(maxSize)} per file`
+      : null,
     multiple && maxFiles ? `Max ${maxFiles} files` : null,
   ].filter(Boolean);
   const resolvedHint = dropzoneHint ?? hintParts.join(" - ");

package/registry/components/ui/input-fields/media-input/types.ts

@@ -58,6 +58,9 @@ export type MediaPreviewLayout = (typeof mediaPreviewLayouts)[number];
 export const mediaPreviewSizes = ["sm", "md", "lg"] as const;
 export type MediaPreviewSize = (typeof mediaPreviewSizes)[number];
 
+/** A size cap for every file, or each file's own; undefined takes any size. */
+export type MaxSize = number | ((file: File) => number | undefined);
+
 export type MediaInputProps = Omit<
   BaseInputFieldProps,
   "iconStart" | "iconEnd"
@@ -68,8 +71,11 @@ export type MediaInputProps = Omit<
   multiple?: boolean;
   /** Hard cap on accepted files (only enforced when `multiple`). */
   maxFiles?: number;
-  /** Per-file size cap in bytes. */
-  maxSize?: number;
+  /**
+   * Per-file size cap in bytes, or a function giving a file's own cap, for a
+   * field that takes kinds of file with caps of their own.
+   */
+  maxSize?: MaxSize;
 
   /**
    * Variant for the inner Browse button. Independent from `buttonStyle`

package/registry/components/ui/input-fields/media-input/useMediaUpload.tsx

@@ -10,7 +10,7 @@ import {
   useRef,
   useState,
 } from "react";
-import type { MediaFile, MediaRejection } from "./types";
+import type { MaxSize, MediaFile, MediaRejection } from "./types";
 import {
   revokePreviewUrl,
   validateIncomingFiles,
@@ -30,7 +30,7 @@ export type UseMediaUploadOptions = {
   accept?: string;
   multiple?: boolean;
   maxFiles?: number;
-  maxSize?: number;
+  maxSize?: MaxSize;
 
   disabled?: boolean;
   readOnly?: boolean;
@@ -96,10 +96,10 @@ export function useMediaUpload({
     filesRef.current = isControlled ? value! : internal;
   }, [isControlled, value, internal]);
 
+  // Disabled or read-only ends a drag in progress, in the render that sees it.
+  if ((disabled || readOnly) && isDragging) setIsDragging(false);
   useEffect(() => {
-    if (!disabled && !readOnly) return;
-    dragCounter.current = 0;
-    setIsDragging(false);
+    if (disabled || readOnly) dragCounter.current = 0;
   }, [disabled, readOnly]);
 
   // Revoke any preview URLs the hook created on unmount so blob memory is

package/registry/components/ui/input-fields/media-input/utils.ts

@@ -1,4 +1,10 @@
-import type { MediaFile, MediaKind, MediaRejection, MediaRejectionCode } from "./types";
+import type {
+  MaxSize,
+  MediaFile,
+  MediaKind,
+  MediaRejection,
+  MediaRejectionCode,
+} from "./types";
 
 const SIZE_UNITS = ["B", "KB", "MB", "GB", "TB"] as const;
 
@@ -114,7 +120,7 @@ export const rejectionMessage = (
 
 export type ValidateOptions = {
   accept?: string;
-  maxSize?: number;
+  maxSize?: MaxSize;
   maxFiles?: number;
   multiple: boolean;
   existing: MediaFile[];
@@ -142,10 +148,16 @@ export const validateIncomingFiles = (
     typeof options.maxFiles === "number" && Number.isFinite(options.maxFiles)
       ? Math.max(0, Math.floor(options.maxFiles))
       : undefined;
-  const maxSize =
-    typeof options.maxSize === "number" && Number.isFinite(options.maxSize)
-      ? Math.max(0, options.maxSize)
+  // A file's own cap: the one for every file, or the one the function gives it.
+  const capOf = (file: File) => {
+    const cap =
+      typeof options.maxSize === "function"
+        ? options.maxSize(file)
+        : options.maxSize;
+    return typeof cap === "number" && Number.isFinite(cap)
+      ? Math.max(0, cap)
       : undefined;
+  };
   const remainingCapacity = options.multiple
     ? maxFiles !== undefined
       ? Math.max(0, maxFiles - options.existing.length)
@@ -161,6 +173,7 @@ export const validateIncomingFiles = (
       });
       continue;
     }
+    const maxSize = capOf(file);
     if (maxSize !== undefined && file.size > maxSize) {
       rejected.push({
         file,

package/registry/components/ui/scroll-rail/scroll-rail.module.css

@@ -0,0 +1,104 @@
+/* ------------------------------------------------------------
+   Scroll rail: a row that scrolls sideways
+   Each end fades only while there is more past it, and a chevron sits in
+   that end. The fades are a mask, as InfiniteScroll's are, so the row
+   dissolves into whatever is behind it. Their widths are registered
+   properties, so an end eases in and out instead of snapping.
+------------------------------------------------------------ */
+
+@property --scroll-rail-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-rail-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+.rail {
+  /* How wide each end's fade is, beyond the room its chevron takes: a little
+     over a control's corner, so a control passes under the edge rather than
+     being cut at it, and narrow enough that a short rail still shows its row. */
+  --scroll-rail-fade: var(--spacing-8);
+  --scroll-rail-control: calc(var(--spacing-10) + var(--spacing-2));
+
+  position: relative;
+  display: flex;
+  min-width: 0;
+}
+
+/* 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. */
+.track {
+  --scroll-rail-start: 0px;
+  --scroll-rail-end: 0px;
+
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+  padding-block: var(--spacing-1);
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent calc(var(--scroll-rail-start) - var(--scroll-rail-fade)),
+    #000 var(--scroll-rail-start),
+    #000 calc(100% - var(--scroll-rail-end)),
+    transparent calc(100% - var(--scroll-rail-end) + var(--scroll-rail-fade))
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent calc(var(--scroll-rail-start) - var(--scroll-rail-fade)),
+    #000 var(--scroll-rail-start),
+    #000 calc(100% - var(--scroll-rail-end)),
+    transparent calc(100% - var(--scroll-rail-end) + var(--scroll-rail-fade))
+  );
+  transition:
+    --scroll-rail-start var(--transition-fast),
+    --scroll-rail-end var(--transition-fast);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* An end with more past it: clear under its chevron, then the fade. */
+.rail_start .track {
+  --scroll-rail-start: calc(
+    var(--scroll-rail-control) + var(--scroll-rail-fade)
+  );
+}
+
+.rail_end .track {
+  --scroll-rail-end: calc(var(--scroll-rail-control) + var(--scroll-rail-fade));
+}
+
+/* The items, at their own widths: the row scrolls rather than squeezing them. */
+.content {
+  display: flex;
+  align-items: center;
+  width: max-content;
+
+  > * {
+    flex-shrink: 0;
+  }
+}
+
+/* A chevron, over the clear edge of its fade, on the row's middle. */
+.more {
+  position: absolute;
+  top: 50%;
+  translate: 0 -50%;
+}
+
+.more_start {
+  left: 0;
+}
+
+.more_end {
+  right: 0;
+}

package/registry/components/ui/scroll-rail/scroll-rail.tsx

@@ -0,0 +1,159 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  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:
+//
+// - It shows no scrollbar, as a tab list shows none, so it never changes the
+//   height of what holds it.
+// - Each end fades only while there is more past it: a fade at an end the row
+//   has reached would claim content that is not there.
+// - A chevron sits in each faded end and scrolls the row on by most of its
+//   width, so the item that was at the edge stays in view as an anchor. It is
+//   mounted only while there is more that way: a button left over the last
+//   item would take its clicks. Keyboard focus also scrolls a control into
+//   view, while the labelled chevrons offer an explicit alternative.
+// - A mouse wheel turned over it moves it across, while it has further to go
+//   that way; past its ends the page scrolls as usual. A swipe moves it as
+//   any scroller.
+
+/** How far a chevron scrolls, in widths of the row. */
+const PAGE = 0.8;
+
+export type ScrollRailProps = {
+  children: ReactNode;
+  /** The rail's own box, as a flex item where it sits. */
+  className?: string;
+  /** The row's layout around its items, such as their gap. */
+  contentClassName?: string;
+  /** The scroller, for a caller that scrolls it itself, as Tabs keeps its
+   *  active tab in view. */
+  ref?: Ref<HTMLDivElement>;
+};
+
+type Ends = { start: boolean; end: boolean };
+
+// A wheel's step in pixels, by the unit it reports.
+const wheelUnit = (event: WheelEvent, track: HTMLElement) =>
+  event.deltaMode === WheelEvent.DOM_DELTA_LINE
+    ? 16
+    : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
+      ? track.clientWidth
+      : 1;
+
+export const ScrollRail = ({
+  children,
+  className,
+  contentClassName,
+  ref,
+}: ScrollRailProps) => {
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const setTrack = useCallback(
+    (node: HTMLDivElement | null) => {
+      trackRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref],
+  );
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [ends, setEnds] = useState<Ends>({ start: false, end: false });
+
+  // Whether there is more past each end; a scroll renders only when one flips.
+  const measure = useCallback(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    const left = track.scrollWidth - track.clientWidth - track.scrollLeft;
+    const start = track.scrollLeft > 1;
+    const end = left > 1;
+    setEnds((was) =>
+      was.start === start && was.end === end ? was : { start, end },
+    );
+  }, []);
+
+  // The row's width and its items' change apart: a resize of either.
+  useResizeObserver(trackRef, measure);
+  useResizeObserver(contentRef, measure);
+
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    const onWheel = (event: WheelEvent) => {
+      // A sideways swipe moves it natively.
+      if (Math.abs(event.deltaX) >= Math.abs(event.deltaY)) return;
+      const max = track.scrollWidth - track.clientWidth;
+      const left = Math.min(
+        max,
+        Math.max(0, track.scrollLeft + event.deltaY * wheelUnit(event, track)),
+      );
+      if (left === track.scrollLeft) return;
+      event.preventDefault();
+      track.scrollLeft = left;
+    };
+    track.addEventListener("wheel", onWheel, { passive: false });
+    return () => track.removeEventListener("wheel", onWheel);
+  }, []);
+
+  const page = (direction: -1 | 1) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    track.scrollBy({
+      left: direction * track.clientWidth * PAGE,
+      behavior: still ? "auto" : "smooth",
+    });
+  };
+
+  return (
+    <div
+      className={clsx(
+        s.rail,
+        ends.start && s.rail_start,
+        ends.end && s.rail_end,
+        className,
+      )}
+    >
+      <div ref={setTrack} className={s.track} 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}
+    </div>
+  );
+};

package/registry/components/ui/tabs/tabs.module.css

@@ -10,23 +10,19 @@
 
 /* ─────────────────────────────────────────────
    Tab list
+   It sits in a ScrollRail, which scrolls it when the tabs don't fit (many
+   status tabs on a phone) with fades and chevrons at the ends that have
+   more. The rail's row is at least its width, so the list still spans it.
 ───────────────────────────────────────────── */
+.rail_content {
+  min-width: 100%;
+}
+
 .list {
   position: relative;
   display: inline-flex;
+  flex: 1 0 auto;
   align-items: center;
-  /* Scroll horizontally when the tabs don't fit (e.g. many status tabs on a
-     phone) instead of clipping/overflowing the page. The active indicator is
-     absolutely positioned inside, so it scrolls with the tabs and stays aligned.
-     Scrollbar hidden for a clean strip - the partially-shown edge tab signals
-     scrollability. */
-  max-width: 100%;
-  overflow-x: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
 
   /* style1 - pill container */
   &.list_style1 {

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

@@ -4,19 +4,26 @@ import {
   useEffect,
   useId,
   useCallback,
+  useLayoutEffect,
   type ReactNode,
   type ComponentProps,
 } from "react";
 import clsx from "clsx";
 import { useResizeObserver } from "../../../hooks/useResizeObserver";
+import { ScrollRail } from "../scroll-rail/scroll-rail";
 import s from "./tabs.module.css";
 
 // Variants & Types
 export const variants = ["style1", "style2"] as const;
 export type Variant = (typeof variants)[number];
 
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
 export type TabItem = {
   id: string;
+  // Consumers can compose counts, badges, icons, etc. at the call site.
+  // Dynamic label changes re-measure the indicator without the slide animation.
   label: ReactNode;
   content?: ReactNode;
   disabled?: boolean;
@@ -49,32 +56,62 @@ export const Tabs = ({
 
   const activeId = isControlled ? controlledActive : internalActive;
 
-  // Sliding indicator state
+  // `animate` separates deliberate tab switches from layout-driven re-fits.
   const listRef = useRef<HTMLDivElement>(null);
-  const [indicator, setIndicator] = useState({ left: 0, width: 0 });
+  // The rail's scroller, when the tabs are wider than their row.
+  const railRef = useRef<HTMLDivElement>(null);
+  const [indicator, setIndicator] = useState({ left: 0, width: 0, animate: true });
 
-  const updateIndicator = useCallback((id: string) => {
+  const updateIndicator = useCallback((id: string, animate: boolean) => {
     const list = listRef.current;
     if (!list) return;
     const btn = list.querySelector<HTMLButtonElement>(`[data-tab-id="${id}"]`);
     if (!btn) return;
     const listRect = list.getBoundingClientRect();
     const btnRect = btn.getBoundingClientRect();
-    setIndicator({
-      // `list` is a horizontal scroller and the indicator is absolutely
-      // positioned inside it, so its `left` is measured in content coordinates.
-      // Add scrollLeft, otherwise the indicator drifts away from the active tab
-      // once the strip is scrolled.
-      left: btnRect.left - listRect.left + list.scrollLeft,
-      width: btnRect.width,
+    // Measured against the list, which scrolls with its tabs inside the rail,
+    // so the indicator stays on its tab wherever the strip is scrolled.
+    const left = btnRect.left - listRect.left;
+    const width = btnRect.width;
+    setIndicator((prev) =>
+      prev.left === left && prev.width === width ? prev : { left, width, animate },
+    );
+  }, []);
+
+  // The active tab in view: a strip wider than its row opens on its tab, and
+  // scrolls to each one chosen that sits past an edge. A tab already in view
+  // stays where it is.
+  const revealActive = useCallback((id: string, animate: boolean) => {
+    const rail = railRef.current;
+    const btn = listRef.current?.querySelector<HTMLButtonElement>(
+      `[data-tab-id="${id}"]`,
+    );
+    if (!rail || !btn) return;
+    const railRect = rail.getBoundingClientRect();
+    const btnRect = btn.getBoundingClientRect();
+    if (btnRect.left >= railRect.left && btnRect.right <= railRect.right) return;
+    const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    rail.scrollTo({
+      left:
+        rail.scrollLeft +
+        btnRect.left -
+        railRect.left -
+        (railRect.width - btnRect.width) / 2,
+      behavior: animate && !still ? "smooth" : "auto",
     });
   }, []);
 
-  useEffect(() => {
-    updateIndicator(activeId);
-  }, [activeId, updateIndicator]);
+  const prevActiveRef = useRef<string | null>(null);
+  useIsomorphicLayoutEffect(() => {
+    const isSwitch = prevActiveRef.current !== activeId;
+    const isFirst = prevActiveRef.current === null;
+    prevActiveRef.current = activeId;
+    updateIndicator(activeId, isSwitch);
+    revealActive(activeId, !isFirst);
+  }, [tabs, activeId, updateIndicator, revealActive]);
 
-  useResizeObserver(listRef, () => updateIndicator(activeId));
+  // Container and font reflows re-fit the indicator without animating.
+  useResizeObserver(listRef, () => updateIndicator(activeId, false));
   const handleSelect = (id: string) => {
     if (!isControlled) setInternalActive(id);
     onTabChange?.(id);
@@ -83,43 +120,50 @@ export const Tabs = ({
 
   return (
     <div className={clsx(s.root, className)} {...rest}>
-      {/* Tab List */}
-      <div
-        ref={listRef}
-        role="tablist"
-        className={clsx(s.list, s[`list_${variant}`])}
-        aria-orientation="horizontal"
-      >
-        {/* Animated indicator */}
-        <span
-          className={clsx(s.indicator, s[`indicator_${variant}`])}
-          style={{ left: indicator.left, width: indicator.width }}
-          aria-hidden="true"
-        />
+      {/* Tab List - in a rail that scrolls it, with fades and chevrons,
+          when the tabs are wider than their row */}
+      <ScrollRail ref={railRef} contentClassName={s.rail_content}>
+        <div
+          ref={listRef}
+          role="tablist"
+          className={clsx(s.list, s[`list_${variant}`])}
+          aria-orientation="horizontal"
+        >
+          {/* Animated indicator */}
+          <span
+            className={clsx(s.indicator, s[`indicator_${variant}`])}
+            style={{
+              left: indicator.left,
+              width: indicator.width,
+              transition: indicator.animate ? undefined : "none",
+            }}
+            aria-hidden="true"
+          />
 
-        {tabs.map((tab) => {
-          const isActive = tab.id === activeId;
-          return (
-            <button
-              key={tab.id}
-              role="tab"
-              id={`${uid}-tab-${tab.id}`}
-              aria-controls={`${uid}-panel-${tab.id}`}
-              aria-selected={isActive}
-              disabled={tab.disabled}
-              data-tab-id={tab.id}
-              className={clsx(
-                s.tab,
-                s[`tab_${variant}`],
-                isActive && s.tab_active,
-              )}
-              onClick={() => !tab.disabled && handleSelect(tab.id)}
-            >
-              {tab.label}
-            </button>
-          );
-        })}
-      </div>
+          {tabs.map((tab) => {
+            const isActive = tab.id === activeId;
+            return (
+              <button
+                key={tab.id}
+                role="tab"
+                id={`${uid}-tab-${tab.id}`}
+                aria-controls={`${uid}-panel-${tab.id}`}
+                aria-selected={isActive}
+                disabled={tab.disabled}
+                data-tab-id={tab.id}
+                className={clsx(
+                  s.tab,
+                  s[`tab_${variant}`],
+                  isActive && s.tab_active,
+                )}
+                onClick={() => !tab.disabled && handleSelect(tab.id)}
+              >
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+      </ScrollRail>
 
       {/* Tab Panel */}
       {activeContent !== undefined && (

package/registry/components/ui/tooltip/tooltip.module.css

@@ -2,10 +2,15 @@
 not including the popover selectors because it's not at all required
 */
 
+/* The cap, applied together with the space the popover found (tooltip.tsx).
+   Zero specificity, so a class passed through `popoverMenu.className` can set
+   its own. */
+:where(.container) {
+  --tooltip-max-width: 250px;
+}
+
 .container {
-  width: 100%;
-  min-width: fit-content;
-  max-width: 250px;
+  width: max-content;
   background-color: var(--color-secondary);
   color: var(--color-secondary-foreground);
   border-radius: var(--radius-sm);

package/registry/components/ui/tooltip/tooltip.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, type FC } from "react";
+import { type CSSProperties, type ReactNode, type FC } from "react";
 import {
   Popover,
   PopoverTrigger,
@@ -26,6 +26,16 @@ export type TooltipProps = {
   popoverMenu?: ComponentProps<typeof PopoverMenu>;
 };
 
+// The menu's auto positioning sizes it as a dropdown: `overflow: auto` (which
+// turns the arrow, outside the box, into a scrollbar) and a `max-width` of the
+// space it found (which would replace the tooltip's own cap). A tooltip never
+// scrolls and hugs its text up to the smaller of its cap and that space.
+const menuStyle: CSSProperties = {
+  overflow: "visible",
+  maxWidth:
+    "min(var(--tooltip-max-width), var(--popover-available-width, var(--tooltip-max-width)))",
+};
+
 export const Tooltip: FC<TooltipProps> = ({
   content,
   children,
@@ -53,10 +63,13 @@ export const Tooltip: FC<TooltipProps> = ({
       <PopoverTrigger asChild {...popoverTrigger}>
         {children}
       </PopoverTrigger>
-      {/* Using menu as a direct content wrapper */}
+      {/* Using menu as a direct content wrapper. Sized by its text, not by
+          what it points at. */}
       <PopoverMenu
-        className={clsx(s.container, popoverMenu?.className)}
+        matchTriggerWidth={false}
         {...popoverMenu}
+        className={clsx(s.container, popoverMenu?.className)}
+        style={{ ...menuStyle, ...popoverMenu?.style }}
       >
         {showArrow && (
           <div