@godxjp/ui 23.0.0 → 23.2.0

package/dist/components/feedback/index.d.ts

@@ -6,8 +6,8 @@ export { TwoFactorSetup } from "./two-factor-setup.js";
 export type { TwoFactorSetupLabels, TwoFactorSetupProps } from "./two-factor-setup.js";
 export { Toaster } from "./sonner.js";
 export { toast } from "./use-toast.js";
-export { Skeleton, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat } from "./skeleton.js";
-export type { SkeletonProps } from "./skeleton.js";
+export { Skeleton, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat, SkeletonArticle, SkeletonAvatar, SkeletonButton, SkeletonInput, SkeletonNode, SkeletonImage, } from "./skeleton.js";
+export type { SkeletonProp, SkeletonProps, SkeletonWidth, SkeletonArticleProp, SkeletonArticleProps, SkeletonAvatarProp, SkeletonAvatarProps, SkeletonButtonProp, SkeletonButtonProps, SkeletonInputProp, SkeletonInputProps, SkeletonNodeProp, SkeletonNodeProps, SkeletonImageProp, SkeletonImageProps, } from "./skeleton.js";
 export { Banner } from "./banner.js";
 export type { BannerProp, BannerProps } from "./banner.js";
 export { Alert, AlertTitle, AlertContent, AlertDescription, AlertActions, AlertQueryError, } from "./alert.js";

package/dist/components/feedback/index.js

@@ -42,7 +42,19 @@ import {
 import { TwoFactorSetup } from "./two-factor-setup.js";
 import { Toaster } from "./sonner.js";
 import { toast } from "./use-toast.js";
-import { Skeleton, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat } from "./skeleton.js";
+import {
+  Skeleton,
+  SkeletonRows,
+  SkeletonTable,
+  SkeletonDetail,
+  SkeletonStat,
+  SkeletonArticle,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonInput,
+  SkeletonNode,
+  SkeletonImage
+} from "./skeleton.js";
 import { Banner } from "./banner.js";
 import {
   Alert,
@@ -98,7 +110,13 @@ export {
   SheetTitle,
   SheetTrigger,
   Skeleton,
+  SkeletonArticle,
+  SkeletonAvatar,
+  SkeletonButton,
   SkeletonDetail,
+  SkeletonImage,
+  SkeletonInput,
+  SkeletonNode,
   SkeletonRows,
   SkeletonStat,
   SkeletonTable,

package/dist/components/feedback/sheet.js

@@ -6,7 +6,7 @@ import { chain, mergeRefs } from "@react-aria/utils";
 import { Dialog as RacDialog, Modal, ModalOverlay } from "react-aria-components";
 import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
-import { useMediaQuery } from "../../lib/hooks.js";
+import { useMaxWidthBreakpoint } from "../../lib/breakpoint-token.js";
 import { cn } from "../../lib/utils.js";
 import { Slot } from "../../lib/slot.js";
 import { overlayHeaderToneClass } from "./overlay-header-tone.js";
@@ -15,28 +15,8 @@ import { useTranslation } from "../../i18n/use-translation.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
 const SHEET_BREAKPOINT_TOKEN = "--sheet-responsive-breakpoint-width";
 const SHEET_BREAKPOINT_FALLBACK_QUERY = "(max-width: 768px)";
-function cssLengthToPx(value, rootFontSize) {
-  const match = /^(-?\d*\.?\d+)(px|rem|em)?$/.exec(value.trim());
-  if (match == null) return void 0;
-  const amount = Number(match[1]);
-  if (!Number.isFinite(amount)) return void 0;
-  return match[2] === "rem" || match[2] === "em" ? amount * rootFontSize : amount;
-}
-function readSheetBreakpointQuery() {
-  if (typeof document === "undefined" || typeof window.getComputedStyle !== "function") {
-    return SHEET_BREAKPOINT_FALLBACK_QUERY;
-  }
-  const rootStyle = window.getComputedStyle(document.documentElement);
-  const rootFontSize = cssLengthToPx(rootStyle.fontSize || "16px", 16) ?? 16;
-  const px = cssLengthToPx(rootStyle.getPropertyValue(SHEET_BREAKPOINT_TOKEN), rootFontSize);
-  return px == null ? SHEET_BREAKPOINT_FALLBACK_QUERY : `(max-width: ${String(px)}px)`;
-}
 function useSheetResponsiveMode(responsive = "side") {
-  const [query, setQuery] = React.useState(SHEET_BREAKPOINT_FALLBACK_QUERY);
-  React.useEffect(() => {
-    setQuery(readSheetBreakpointQuery());
-  }, []);
-  const compact = useMediaQuery(query);
+  const compact = useMaxWidthBreakpoint(SHEET_BREAKPOINT_TOKEN, SHEET_BREAKPOINT_FALLBACK_QUERY);
   if (responsive === "side" || responsive === "bottom") return responsive;
   return compact ? "bottom" : "side";
 }

package/dist/components/feedback/skeleton.d.ts

@@ -1,6 +1,37 @@
 import * as React from "react";
-export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
-export declare function Skeleton({ className, ...props }: SkeletonProps): React.JSX.Element;
+import type { SkeletonArticleProp, SkeletonAvatarProp, SkeletonButtonProp, SkeletonImageProp, SkeletonInputProp, SkeletonNodeProp, SkeletonProp } from "../../props/components/feedback.prop.js";
+export type { SkeletonProp, SkeletonProp as SkeletonProps, SkeletonWidth, SkeletonArticleProp, SkeletonArticleProp as SkeletonArticleProps, SkeletonAvatarProp, SkeletonAvatarProp as SkeletonAvatarProps, SkeletonButtonProp, SkeletonButtonProp as SkeletonButtonProps, SkeletonInputProp, SkeletonInputProp as SkeletonInputProps, SkeletonNodeProp, SkeletonNodeProp as SkeletonNodeProps, SkeletonImageProp, SkeletonImageProp as SkeletonImageProps, } from "../../props/components/feedback.prop.js";
+declare function SkeletonBlock({ active, loading, className, children, ...props }: SkeletonProp): React.JSX.Element;
+/** Stands in for an `Avatar` — circle for a person, square for an entity mark. */
+export declare function SkeletonAvatar({ size, shape, active, className }: SkeletonAvatarProp): React.JSX.Element;
+/** Stands in for a `Button` — two control-heights wide, like antd's `controlHeight * 2`. */
+export declare function SkeletonButton({ size, shape, block, active, className }: SkeletonButtonProp): React.JSX.Element;
+/** Stands in for an `Input` — five control-heights wide, like antd's `controlHeight * 5`. */
+export declare function SkeletonInput({ size, block, active, className }: SkeletonInputProp): React.JSX.Element;
+/** A square placeholder for a media or custom slot; `children` centre inside it. */
+export declare function SkeletonNode({ active, children, className }: SkeletonNodeProp): React.JSX.Element;
+/** `SkeletonNode` carrying the image glyph — antd ships its own path; here it is the DS icon. */
+export declare function SkeletonImage({ active, className }: SkeletonImageProp): React.JSX.Element;
+/**
+ * SkeletonArticle — antd's own `<Skeleton>` shape: an optional avatar beside a heading line and a
+ * paragraph. Reach for it for a comment, a profile card or a feed item; `Skeleton` stays the bare
+ * block, and `SkeletonRows` / `SkeletonTable` / `SkeletonDetail` / `SkeletonStat` stay the house
+ * shapes for a list, a table, a record and a KPI tile.
+ */
+export declare function SkeletonArticle({ avatar, title, paragraph, round, active, loading, children, className, }: SkeletonArticleProp): React.JSX.Element;
+/**
+ * Skeleton — the placeholder BLOCK, and the namespace antd hangs its element presets on. The
+ * statics are the antd spelling (`Skeleton.Button`); the same components are also named exports, so
+ * a consumer importing `SkeletonButton` finds it in the catalog.
+ */
+export declare const Skeleton: typeof SkeletonBlock & {
+    Avatar: typeof SkeletonAvatar;
+    Button: typeof SkeletonButton;
+    Input: typeof SkeletonInput;
+    Node: typeof SkeletonNode;
+    Image: typeof SkeletonImage;
+    Article: typeof SkeletonArticle;
+};
 interface SkeletonRowsProps {
     rows?: number;
     columns?: number;
@@ -14,4 +45,3 @@ export declare function SkeletonTable({ rows, columns }: SkeletonRowsProps): Rea
 export declare function SkeletonDetail(): React.JSX.Element;
 /** Skeleton matching a stat card / dashboard tile. */
 export declare function SkeletonStat(): React.JSX.Element;
-export {};

package/dist/components/feedback/skeleton.js

@@ -1,17 +1,162 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ImageIcon } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { tableCellPaddingClass, tableRowHeightClass } from "../../lib/control-styles.js";
-function Skeleton({ className, ...props }) {
+function measureStyle(width) {
+  if (width === void 0) return void 0;
+  const value = typeof width === "number" ? `${width}px` : width;
+  return { "--skeleton-line-width": value };
+}
+function SkeletonBlock({ active, loading, className, children, ...props }) {
+  if (loading === false) return /* @__PURE__ */ jsx(Fragment, { children });
   return /* @__PURE__ */ jsx(
     "div",
     {
       "aria-busy": "true",
       "aria-live": "polite",
+      "data-active": active ? "" : void 0,
       className: cn("ui-skeleton-block", className),
-      ...props
+      ...props,
+      children
+    }
+  );
+}
+function SkeletonElement({
+  kind,
+  size,
+  shape,
+  block,
+  active,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    SkeletonBlock,
+    {
+      active,
+      "data-skeleton-element": kind,
+      "data-size": size,
+      "data-shape": shape,
+      "data-block": block ? "" : void 0,
+      className,
+      children
+    }
+  );
+}
+function SkeletonAvatar({ size, shape = "circle", active, className }) {
+  return /* @__PURE__ */ jsx(
+    SkeletonElement,
+    {
+      kind: "avatar",
+      size,
+      shape,
+      active,
+      className
+    }
+  );
+}
+function SkeletonButton({ size, shape, block, active, className }) {
+  return /* @__PURE__ */ jsx(
+    SkeletonElement,
+    {
+      kind: "button",
+      size,
+      shape,
+      block,
+      active,
+      className
+    }
+  );
+}
+function SkeletonInput({ size, block, active, className }) {
+  return /* @__PURE__ */ jsx(SkeletonElement, { kind: "input", size, block, active, className });
+}
+function SkeletonNode({ active, children, className }) {
+  return /* @__PURE__ */ jsx(SkeletonElement, { kind: "node", active, className, children });
+}
+function SkeletonImage({ active, className }) {
+  return /* @__PURE__ */ jsx(SkeletonElement, { kind: "image", active, className, children: /* @__PURE__ */ jsx(ImageIcon, { "aria-hidden": "true", focusable: "false", className: "ui-skeleton-image-glyph" }) });
+}
+function avatarDefaults(hasTitle, hasParagraph) {
+  if (hasTitle && !hasParagraph) return { size: "lg", shape: "square" };
+  return { size: "lg", shape: "circle" };
+}
+function titleDefaultWidth(hasAvatar, hasParagraph) {
+  if (!hasAvatar && hasParagraph) return "38%";
+  if (hasAvatar && hasParagraph) return "50%";
+  return void 0;
+}
+function paragraphDefaults(hasAvatar, hasTitle) {
+  return {
+    rows: !hasAvatar && hasTitle ? 3 : 2,
+    width: !hasAvatar || !hasTitle ? "61%" : void 0
+  };
+}
+function rowWidth(index, rows, width) {
+  if (Array.isArray(width)) return width[index];
+  return rows - 1 === index ? width : void 0;
+}
+function SkeletonArticle({
+  avatar = false,
+  title = true,
+  paragraph = true,
+  round,
+  active,
+  loading,
+  children,
+  className
+}) {
+  if (loading === false) return /* @__PURE__ */ jsx(Fragment, { children });
+  const hasAvatar = Boolean(avatar);
+  const hasTitle = Boolean(title);
+  const hasParagraph = Boolean(paragraph);
+  const avatarProps = {
+    ...avatarDefaults(hasTitle, hasParagraph),
+    ...typeof avatar === "object" ? avatar : {}
+  };
+  const titleWidth = (typeof title === "object" ? title.width : void 0) ?? titleDefaultWidth(hasAvatar, hasParagraph);
+  const paragraphBase = paragraphDefaults(hasAvatar, hasTitle);
+  const paragraphProps = typeof paragraph === "object" ? paragraph : {};
+  const rows = paragraphProps.rows ?? paragraphBase.rows;
+  const paragraphWidth = paragraphProps.width ?? paragraphBase.width;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-busy": "true",
+      "data-slot": "skeleton-article",
+      "data-avatar": hasAvatar ? "" : void 0,
+      "data-active": active ? "" : void 0,
+      "data-round": round ? "" : void 0,
+      className: cn("ui-skeleton-article", className),
+      children: [
+        hasAvatar ? /* @__PURE__ */ jsx("div", { className: "ui-skeleton-article-header", children: /* @__PURE__ */ jsx(SkeletonAvatar, { ...avatarProps }) }) : null,
+        hasTitle || hasParagraph ? /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-article-section", children: [
+          hasTitle ? /* @__PURE__ */ jsx(SkeletonBlock, { className: "ui-skeleton-article-title", style: measureStyle(titleWidth) }) : null,
+          hasParagraph ? (
+            // Deliberately divs, not antd's <ul><li>: its rows carry no text, so a real list would
+            // announce "list, 3 items" out of an already `aria-busy` region.
+            /* @__PURE__ */ jsx("div", { className: "ui-skeleton-article-paragraph", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx(
+              SkeletonBlock,
+              {
+                className: "ui-skeleton-article-line",
+                style: measureStyle(rowWidth(index, rows, paragraphWidth))
+              },
+              index
+            )) })
+          ) : null
+        ] }) : null
+      ]
     }
   );
 }
+const Skeleton = Object.assign(SkeletonBlock, {
+  Avatar: SkeletonAvatar,
+  Button: SkeletonButton,
+  Input: SkeletonInput,
+  Node: SkeletonNode,
+  Image: SkeletonImage,
+  Article: SkeletonArticle
+});
 function SkeletonRows({ rows = 6, columns = 4, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-rows", className), "aria-busy": "true", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "ui-skeleton-row", children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ jsx(
     Skeleton,
@@ -56,7 +201,13 @@ function SkeletonStat() {
 }
 export {
   Skeleton,
+  SkeletonArticle,
+  SkeletonAvatar,
+  SkeletonButton,
   SkeletonDetail,
+  SkeletonImage,
+  SkeletonInput,
+  SkeletonNode,
   SkeletonRows,
   SkeletonStat,
   SkeletonTable

package/dist/components/layout/flex.d.ts

@@ -1,3 +1,3 @@
 import type { FlexProp } from "../../props/components/layout.prop.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
-export declare function Flex({ as: Element, direction, grow, shrink, surface, bleed, reveal, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, fill, width, className, style, children, ...props }: FlexProp): import("react").JSX.Element;
+export declare function Flex({ as: Element, direction, grow, shrink, surface, bleed, reveal, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, hideBelowRaw, hideFromRaw, fill, width, className, style, children, ...props }: FlexProp): import("react").JSX.Element;

package/dist/components/layout/flex.js

@@ -1,9 +1,11 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeAriaIds } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { flexGapClass, padStyle, padStepToken } from "../../lib/variants.js";
 const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
+const rawBreakpoint = (value) => typeof value === "number" && Number.isFinite(value) ? value : void 0;
+const rawBreakpointRule = (axis, px) => `@media (width ${axis === "below" ? "<" : ">="} ${px}px){.ui-flex[data-hide-${axis}-raw="${px}"]{display:none}}`;
 function Flex({
   as: Element = "div",
   direction = "row",
@@ -21,6 +23,8 @@ function Flex({
   wrap = false,
   hideBelow,
   hideFrom,
+  hideBelowRaw,
+  hideFromRaw,
   fill = false,
   width,
   className,
@@ -42,6 +46,8 @@ function Flex({
       "aria-describedby": mergeAriaIds(props["aria-describedby"], ariaErrorMessage)
     };
   }
+  const belowRaw = rawBreakpoint(hideBelowRaw);
+  const fromRaw = rawBreakpoint(hideFromRaw);
   const responsive = typeof direction === "object";
   const axes = responsive ? direction : { base: direction };
   const cssDirection = (axis) => axis === "col" ? "column" : axis;
@@ -51,7 +57,7 @@ function Flex({
       cssDirection(axis)
     ])
   ) : {};
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Element,
     {
       "data-direction": responsive ? "responsive" : direction,
@@ -63,8 +69,10 @@ function Flex({
       "data-align": align,
       "data-justify": justify,
       "data-wrap": wrap ? "true" : void 0,
-      "data-hide-below": hideBelow,
-      "data-hide-from": hideFrom,
+      "data-hide-below": belowRaw === void 0 ? hideBelow : void 0,
+      "data-hide-from": fromRaw === void 0 ? hideFrom : void 0,
+      "data-hide-below-raw": belowRaw,
+      "data-hide-from-raw": fromRaw,
       "data-fill": fill ? "" : void 0,
       "data-width-raw": width === void 0 ? void 0 : "",
       "data-gap-raw": gapRaw,
@@ -79,7 +87,11 @@ function Flex({
         ...padStyle(pad, padRaw)
       },
       ...domProps,
-      children
+      children: [
+        belowRaw === void 0 ? null : /* @__PURE__ */ jsx("style", { href: `ui-flex-hide-below-raw-${belowRaw}`, precedence: "ui-flex-raw-breakpoint", children: rawBreakpointRule("below", belowRaw) }),
+        fromRaw === void 0 ? null : /* @__PURE__ */ jsx("style", { href: `ui-flex-hide-from-raw-${fromRaw}`, precedence: "ui-flex-raw-breakpoint", children: rawBreakpointRule("from", fromRaw) }),
+        children
+      ]
     }
   );
 }

package/dist/components/layout/sidebar.js

@@ -27,6 +27,11 @@ function SidebarSection({
 function SidebarIcon({ icon: Icon }) {
   return /* @__PURE__ */ jsx("span", { className: "sb-icon", children: Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) : null });
 }
+function SidebarTrailingIcon({
+  icon: Icon
+}) {
+  return /* @__PURE__ */ jsx("span", { className: "sb-trailing-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) });
+}
 function SidebarRowContent({
   item,
   sub = false,
@@ -48,7 +53,8 @@ function SidebarRowContent({
           children: item.badge
         }
       )
-    ) : null
+    ) : null,
+    item.trailingIcon ? /* @__PURE__ */ jsx(SidebarTrailingIcon, { icon: item.trailingIcon }) : null
   ] });
 }
 function SidebarItem({
@@ -305,6 +311,7 @@ function Sidebar({
   const surface = useNavSurface();
   collapsed = surface === "drawer" ? false : collapsed;
   const brandNode = typeof brand === "function" ? brand(collapsed) : brand;
+  const footerNode = typeof footer === "function" ? footer(collapsed) : footer;
   return /* @__PURE__ */ jsxs("div", { className: "sb-root", "data-collapsed": collapsed ? "true" : void 0, children: [
     brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brandNode }) : product ? (() => {
       const interactive = onProductClick != null;
@@ -385,7 +392,7 @@ function Sidebar({
         ))
       }
     ),
-    footer ? /* @__PURE__ */ jsx("div", { className: "sb-footer", children: footer }) : null
+    footerNode ? /* @__PURE__ */ jsx("div", { className: "sb-footer", children: footerNode }) : null
   ] });
 }
 export {

package/dist/components/navigation/filter-bar.js

@@ -96,7 +96,8 @@ function Toolbar({
                         defaultValue: filter.defaultSelected,
                         onValueChange: (selected) => filter.onSelectedChange?.(selected),
                         placeholder: filter.placeholder,
-                        disabled: disabled || filter.disabled
+                        disabled: disabled || filter.disabled,
+                        clearLabel: typeof filter.label === "string" ? t("navigation.filterBar.clearFilter", { label: filter.label }) : void 0
                       }
                     )
                   },

package/dist/components/navigation/tabs-scroll.d.ts

@@ -47,6 +47,33 @@ export declare function useKeepActiveTabVisible(listRef: React.RefObject<HTMLEle
  * it are the ones that hand it real geometry.
  */
 export declare function resolveHiddenTabValues(list: HTMLElement, values: readonly string[]): string[];
+/**
+ * The LOGICAL scroll offset of a strip: how far it has moved from its own start edge, growing
+ * towards `end` on whichever axis the strip is on and in whichever direction it is written.
+ *
+ * `scrollLeft` cannot be read raw. Per CSSOM-View an RTL scroller reports `0` at its START edge
+ * (the right one) and goes NEGATIVE towards the end, so "scrollLeft went up" means opposite things
+ * in the two directions — exactly the bug `start`/`end` exist to prevent, and it would have been
+ * invisible in an LTR test suite.
+ */
+export declare function readTabsScrollOffset(list: HTMLElement, vertical: boolean): number;
+/**
+ * Ant Design `onTabScroll`'s one piece of logic: which edge a movement of the scroll offset went
+ * towards. `null` when the offset did not move, so a scroll event that reports the same position
+ * (momentum settling, a programmatic re-pin that was already in place) reports nothing.
+ */
+export declare function resolveTabsScrollDirection(previous: number, next: number): "start" | "end" | null;
+/**
+ * Reports every real movement of the strip's own scrollport to `onScroll` — Ant Design
+ * `onTabScroll`. The handler is held in a ref so a consumer's inline arrow function does not
+ * re-arm the listener on every render (same contract as `useTabsOverflowValues` above).
+ *
+ * It reports a `scrollIntoView` re-pin too, and deliberately: antd's does the same, and "the strip
+ * moved" is the fact a consumer is subscribing to — not "the user moved it".
+ */
+export declare function useTabsScrollReporter(listRef: React.RefObject<HTMLElement | null>, vertical: boolean, onScroll: ((info: {
+    direction: "start" | "end";
+}) => void) | undefined): void;
 /**
  * Keeps `onChange` fed with the values currently out of the scrollport, recomputing on the two
  * things that can move them: the strip resizing (a viewport change, a font swap, a tab added or

package/dist/components/navigation/tabs-scroll.js

@@ -78,6 +78,38 @@ function resolveHiddenTabValues(list, values) {
   });
   return hidden;
 }
+function readTabsScrollOffset(list, vertical) {
+  if (vertical) return list.scrollTop;
+  const rtl = list.ownerDocument?.defaultView?.getComputedStyle(list).direction === "rtl" || list.closest("[dir]")?.getAttribute("dir") === "rtl";
+  return rtl ? -list.scrollLeft : list.scrollLeft;
+}
+function resolveTabsScrollDirection(previous, next) {
+  if (next === previous) return null;
+  return next > previous ? "end" : "start";
+}
+function useTabsScrollReporter(listRef, vertical, onScroll) {
+  const onScrollRef = React.useRef(onScroll);
+  React.useEffect(() => {
+    onScrollRef.current = onScroll;
+  });
+  const armed = onScroll !== void 0;
+  React.useEffect(() => {
+    if (!armed) return void 0;
+    const list = listRef.current;
+    if (!list) return void 0;
+    let last = readTabsScrollOffset(list, vertical);
+    const report = () => {
+      const next = readTabsScrollOffset(list, vertical);
+      const direction = resolveTabsScrollDirection(last, next);
+      last = next;
+      if (direction) onScrollRef.current?.({ direction });
+    };
+    list.addEventListener("scroll", report, { passive: true });
+    return () => {
+      list.removeEventListener("scroll", report);
+    };
+  }, [armed, listRef, vertical]);
+}
 function useTabsOverflowValues(listRef, values, onChange) {
   const onChangeRef = React.useRef(onChange);
   React.useEffect(() => {
@@ -119,9 +151,12 @@ function useTabsOverflowValues(listRef, values, onChange) {
 export {
   isTabFullyVisible,
   prefersReducedMotion,
+  readTabsScrollOffset,
   resolveHiddenTabValues,
   resolveTabScrollTarget,
+  resolveTabsScrollDirection,
   syncActiveTabIntoView,
   useKeepActiveTabVisible,
-  useTabsOverflowValues
+  useTabsOverflowValues,
+  useTabsScrollReporter
 };

package/dist/components/navigation/tabs.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { TabItemProp, TabsProp } from "../../props/components/navigation.prop.js";
-export type { TabItemProp, TabsProp, TabsVariantProp, TabsPlacementProp, TabsExtraProp, TabsOverflowProp, } from "../../props/components/navigation.prop.js";
+export type { TabItemProp, TabsProp, TabsVariantProp, TabsPlacementProp, TabsExtraProp, TabsOverflowProp, TabsAnimatedProp, TabsIndicatorProp, TabsIndicatorSizeProp, TabsScrollDirectionProp, TabsOnScrollProp, } from "../../props/components/navigation.prop.js";
 export type TabsOrientation = "vertical" | "horizontal";
 export type TabsItem = TabItemProp;
 export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValue" | "dir"> & TabsProp & {
@@ -8,7 +8,7 @@ export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValu
     dir?: "ltr" | "rtl";
     activationMode?: "manual" | "automatic";
 };
-export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, tabPlacement, size, centered, extra, destroyOnHidden, onEdit, addIcon, hideAdd, closeIcon, onTabClick, overflow, listClassName, contentClassName, children, ...props }: TabsProps): React.JSX.Element;
+export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, tabPlacement, size, centered, extra, destroyOnHidden, onEdit, addIcon, hideAdd, closeIcon, onTabClick, overflow, animated, indicator, moreIcon, onTabScroll, listClassName, contentClassName, children, ...props }: TabsProps): React.JSX.Element;
 export declare const TabsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     variant?: "default" | "line";
     /**