aplance-ui 1.4.0 → 1.5.1

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/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

@@ -10,6 +10,7 @@ import {
 } from "react";
 import clsx from "clsx";
 import { useResizeObserver } from "../../../hooks/useResizeObserver";
+import { ScrollRail } from "../../primitives/scroll-rail/scroll-rail";
 import s from "./tabs.module.css";
 
 // Variants & Types
@@ -57,6 +58,8 @@ export const Tabs = ({
 
   // `animate` separates deliberate tab switches from layout-driven re-fits.
   const listRef = useRef<HTMLDivElement>(null);
+  // 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, animate: boolean) => {
@@ -66,21 +69,46 @@ export const Tabs = ({
     if (!btn) return;
     const listRect = list.getBoundingClientRect();
     const btnRect = btn.getBoundingClientRect();
-    // Measure in the scrollable list's content coordinates so the indicator
-    // stays aligned when the tab strip is horizontally scrolled.
-    const left = btnRect.left - listRect.left + list.scrollLeft;
+    // 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",
+    });
+  }, []);
+
   const prevActiveRef = useRef<string | null>(null);
   useIsomorphicLayoutEffect(() => {
     const isSwitch = prevActiveRef.current !== activeId;
+    const isFirst = prevActiveRef.current === null;
     prevActiveRef.current = activeId;
     updateIndicator(activeId, isSwitch);
-  }, [tabs, activeId, updateIndicator]);
+    revealActive(activeId, !isFirst);
+  }, [tabs, activeId, updateIndicator, revealActive]);
 
   // Container and font reflows re-fit the indicator without animating.
   useResizeObserver(listRef, () => updateIndicator(activeId, false));
@@ -92,47 +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,
-            transition: indicator.animate ? undefined : "none",
-          }}
-          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

package/registry/lib/string.ts

@@ -17,7 +17,7 @@ export function hashName(name: string): number {
  * Extract 1-2 letter initials from a name (e.g. "John Doe" -> "JD")
  */
 export function getInitials(name: string): string {
-  const parts = name.trim().split(/\s+/);
-  if (parts.length >= 2) return parts[0][0] + parts[1][0];
-  return parts[0]?.substring(0, 2) || "?";
+  const [first = "", second = ""] = name.trim().split(/\s+/);
+  if (second) return first.charAt(0) + second.charAt(0);
+  return first.substring(0, 2) || "?";
 }

package/registry/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.aplance.com/registry.schema.json",
   "version": 4,
-  "generated": "2026-09-11T04:18:36.662Z",
+  "generated": "2026-11-11T12:39:14.314Z",
   "units": [
     {
       "name": "accordion",
@@ -15,6 +15,7 @@
         "components/ui/accordion/accordion.tsx"
       ],
       "deps": [
+        "button",
         "useResizeObserver"
       ],
       "externalDeps": [
@@ -214,6 +215,7 @@
         "components/ui/data-table/data-table.tsx",
         "components/ui/data-table/filter-bar.tsx",
         "components/ui/data-table/filter-modal.tsx",
+        "components/ui/data-table/filters.tsx",
         "components/ui/data-table/pagination-bar.tsx",
         "components/ui/data-table/types.ts",
         "components/ui/data-table/useDataTable.tsx",
@@ -223,6 +225,7 @@
         "components/ui/data-table/checkbox-column.tsx",
         "components/ui/data-table/data-table.tsx",
         "components/ui/data-table/filter-modal.tsx",
+        "components/ui/data-table/filters.tsx",
         "components/ui/data-table/pagination-bar.tsx",
         "components/ui/data-table/types.ts",
         "components/ui/data-table/useDataTable.tsx",
@@ -236,6 +239,7 @@
         "lib-dom",
         "loader",
         "modal",
+        "scroll-rail",
         "tooltip",
         "useMediaQuery"
       ],
@@ -566,6 +570,26 @@
         "react-dom"
       ]
     },
+    {
+      "name": "scroll-rail",
+      "kind": "component",
+      "group": "primitives",
+      "files": [
+        "components/primitives/scroll-rail/scroll-rail.module.css",
+        "components/primitives/scroll-rail/scroll-rail.tsx"
+      ],
+      "clientFiles": [
+        "components/primitives/scroll-rail/scroll-rail.tsx"
+      ],
+      "deps": [
+        "useResizeObserver"
+      ],
+      "externalDeps": [
+        "@tabler/icons-react",
+        "clsx",
+        "react"
+      ]
+    },
     {
       "name": "select",
       "kind": "component",
@@ -576,7 +600,9 @@
         "components/ui/input-fields/common/types.ts",
         "components/ui/input-fields/select/select.tsx"
       ],
-      "clientFiles": [],
+      "clientFiles": [
+        "components/ui/input-fields/select/select.tsx"
+      ],
       "deps": [
         "button",
         "field-message",
@@ -664,7 +690,9 @@
         "components/ui/input-fields/switch/switch.module.css",
         "components/ui/input-fields/switch/switch.tsx"
       ],
-      "clientFiles": [],
+      "clientFiles": [
+        "components/ui/input-fields/switch/switch.tsx"
+      ],
       "deps": [
         "button",
         "field-message"
@@ -686,6 +714,7 @@
         "components/ui/tabs/tabs.tsx"
       ],
       "deps": [
+        "scroll-rail",
         "useResizeObserver"
       ],
       "externalDeps": [