@godxjp/ui 23.1.0 → 23.2.0

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/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";
     /**

package/dist/components/navigation/tabs.js

@@ -17,10 +17,22 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from "./dropdown-menu.js";
-import { useKeepActiveTabVisible, useTabsOverflowValues } from "./tabs-scroll.js";
+import {
+  useKeepActiveTabVisible,
+  useTabsOverflowValues,
+  useTabsScrollReporter
+} from "./tabs-scroll.js";
+function triggerSizeClassName(size) {
+  return cn(
+    size === "sm" && "min-h-[var(--tabs-trigger-height-sm)] px-[var(--tabs-trigger-padding-x-sm)] text-[length:var(--tabs-trigger-font-size-sm)]",
+    size === "md" && "min-h-[var(--tabs-trigger-height-md)] px-[var(--tabs-trigger-padding-x-md)] text-[length:var(--tabs-trigger-font-size-md)]",
+    size === "lg" && "min-h-[var(--tabs-trigger-height-lg)] px-[var(--tabs-trigger-padding-x-lg)] text-[length:var(--tabs-trigger-font-size-lg)]"
+  );
+}
 const TabsFrameContext = React.createContext({
   orientation: "horizontal",
-  selectionSuppressed: false
+  selectionSuppressed: false,
+  size: "md"
 });
 function resolveFallbackTabValue(items, requested) {
   if (!items || items.length === 0) return requested;
@@ -46,6 +58,12 @@ function resolveTabsExtra(extra) {
   if (isSlotMap) return extra;
   return { end: extra };
 }
+function resolveTabsAnimated(animated) {
+  if (animated === false) return { inkBar: false, tabPane: false };
+  if (animated === true) return { inkBar: true, tabPane: true };
+  if (animated === void 0) return { inkBar: true, tabPane: false };
+  return { inkBar: animated.inkBar ?? true, tabPane: animated.tabPane ?? false };
+}
 function resolveTabsAxis(tabPlacement, orientation) {
   if (tabPlacement) {
     return {
@@ -86,12 +104,19 @@ function Tabs({
   closeIcon,
   onTabClick,
   overflow = "scroll",
+  animated,
+  indicator,
+  moreIcon,
+  onTabScroll,
   listClassName,
   contentClassName,
   children,
   ...props
 }) {
   const { t } = useTranslation();
+  const motion = resolveTabsAnimated(animated);
+  const indicatorSize = indicator?.size ?? "full";
+  const indicatorAlign = indicator?.align ?? "center";
   const resolvedDefault = resolveFallbackTabValue(items, defaultValue);
   const narrow = useMaxWidthBreakpoint(
     TABS_PLACEMENT_BREAKPOINT_TOKEN,
@@ -103,8 +128,8 @@ function Tabs({
   );
   const selectionSuppressed = value === void 0 && items != null && items.length > 0 && resolvedDefault === void 0;
   const frame = React.useMemo(
-    () => ({ orientation: resolvedOrientation, selectionSuppressed }),
-    [resolvedOrientation, selectionSuppressed]
+    () => ({ orientation: resolvedOrientation, selectionSuppressed, size }),
+    [resolvedOrientation, selectionSuppressed, size]
   );
   const editable = variant === "editable-card";
   const collapsible = items != null && overflow === "menu";
@@ -120,6 +145,7 @@ function Tabs({
     );
   }, []);
   useTabsOverflowValues(listRef, itemValues, handleHiddenChange);
+  useTabsScrollReporter(listRef, resolvedOrientation === "vertical", onTabScroll);
   const [mirroredValue, setMirroredValue] = React.useState(
     value ?? resolvedDefault
   );
@@ -139,11 +165,7 @@ function Tabs({
   const showAdd = editable && !hideAdd && Boolean(onEdit);
   const needsBar = Boolean(extraStart || extraEnd || showAdd || collapsible);
   const card = variant === "card" || variant === "editable-card";
-  const sizeTriggerClassName = cn(
-    size === "sm" && "min-h-[var(--tabs-trigger-height-sm)] px-[var(--tabs-trigger-padding-x-sm)] text-[length:var(--tabs-trigger-font-size-sm)]",
-    size === "md" && "min-h-[var(--tabs-trigger-height-md)] px-[var(--tabs-trigger-padding-x-md)] text-[length:var(--tabs-trigger-font-size-md)]",
-    size === "lg" && "min-h-[var(--tabs-trigger-height-lg)] px-[var(--tabs-trigger-padding-x-lg)] text-[length:var(--tabs-trigger-font-size-lg)]"
-  );
+  const sizeTriggerClassName = triggerSizeClassName(size);
   const list = items ? /* @__PURE__ */ jsx(
     TabsList,
     {
@@ -283,6 +305,10 @@ function Tabs({
       "data-placement": placement,
       "data-size": size,
       "data-centered": centered ? "true" : void 0,
+      "data-animated-ink-bar": motion.inkBar ? "true" : "false",
+      "data-animated-tab-pane": motion.tabPane ? "true" : "false",
+      "data-indicator-size": indicatorSize,
+      "data-indicator-align": indicatorAlign,
       orientation: resolvedOrientation,
       keyboardActivation: activationMode,
       selectedKey: value ?? (collapsible ? mirroredValue : void 0),
@@ -307,7 +333,11 @@ function Tabs({
         "data-variant": variant,
         "data-placement": placement,
         "data-size": size,
-        "data-centered": centered ? "true" : void 0
+        "data-centered": centered ? "true" : void 0,
+        "data-animated-ink-bar": motion.inkBar ? "true" : "false",
+        "data-animated-tab-pane": motion.tabPane ? "true" : "false",
+        "data-indicator-size": indicatorSize,
+        "data-indicator-align": indicatorAlign
       }),
       children: items ? /* @__PURE__ */ jsxs(Fragment, { children: [
         needsBar ? /* @__PURE__ */ jsxs("div", { "data-slot": "tabs-bar", className: "ui-tabs-bar", children: [
@@ -330,7 +360,7 @@ function Tabs({
               {
                 className: "ui-tabs-overflow",
                 "aria-label": t("navigation.tabs.moreTabs"),
-                children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "ui-tabs-overflow-icon", "aria-hidden": "true" })
+                children: moreIcon ?? /* @__PURE__ */ jsx(MoreHorizontal, { className: "ui-tabs-overflow-icon", "aria-hidden": "true" })
               }
             ),
             /* @__PURE__ */ jsx(DropdownMenuContent, { placement: "bottomEnd", children: overflowItems.map((item) => /* @__PURE__ */ jsx(
@@ -407,7 +437,7 @@ const TabsList = React.forwardRef(
 TabsList.displayName = "TabsList";
 const TabsTrigger = React.forwardRef(
   ({ className, value, disabled, children, onKeyDown, onClick, ...props }, ref) => {
-    const { orientation, selectionSuppressed } = React.useContext(TabsFrameContext);
+    const { orientation, selectionSuppressed, size } = React.useContext(TabsFrameContext);
     return /* @__PURE__ */ jsx(
       AriaTab,
       {
@@ -434,6 +464,8 @@ const TabsTrigger = React.forwardRef(
           // Selected and focused stay visually distinct (WCAG 2.4.7): selected is a 1px hairline in the
           // border, focused is the 2px ring plus its halo outside it.
           "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+          // The tier the root was given. Without this the compound form ignored `size` outright.
+          triggerSizeClassName(size),
           className
         ),
         render: (domProps, renderProps) => withDomProps("button", "tabs-trigger", { type: "button", ...props }, domProps, {

package/dist/i18n/messages/en.json

@@ -283,6 +283,11 @@
       "dotsLabel": "Choose slide",
       "goToSlide": "Go to slide {index}"
     },
+    "featureList": {
+      "included": "Included",
+      "excluded": "Not included",
+      "limited": "Limited"
+    },
     "listRow": {
       "unread": "Unread",
       "read": "Read"

package/dist/i18n/messages/ja.json

@@ -276,6 +276,11 @@
       "dotsLabel": "スライドを選択",
       "goToSlide": "{index} 番目のスライドへ"
     },
+    "featureList": {
+      "included": "含む",
+      "excluded": "含まない",
+      "limited": "制限あり"
+    },
     "listRow": {
       "unread": "未読",
       "read": "既読"

package/dist/i18n/messages/vi.json

@@ -277,6 +277,11 @@
       "dotsLabel": "Chọn slide",
       "goToSlide": "Đến slide {index}"
     },
+    "featureList": {
+      "included": "Có",
+      "excluded": "Không có",
+      "limited": "Giới hạn"
+    },
     "listRow": {
       "unread": "Chưa đọc",
       "read": "Đã đọc"

package/dist/props/components/data-display.prop.d.ts

@@ -47,6 +47,99 @@ export type LegendProp = Omit<React.HTMLAttributes<HTMLUListElement>, "children"
     items: LegendItemProp[];
     className?: ClassNameProp;
 };
+/**
+ * @see Swatch — a READ-ONLY sample of ONE colour a person chose.
+ *
+ * ## Why it is not a Legend, a ColorPicker or a Badge
+ *
+ * `Legend` is a KEY: a closed set of semantic TONES, each with required words beside it, because
+ * there the colour stands FOR something. Here the colour IS the content — a brand's
+ * `primary_color`, a calendar category, a label a user tinted — so there is no tone it maps to and
+ * no second thing for a word to name. `ColorPicker` is the INPUT for the same value, and rendering
+ * a disabled input to display one reads as a control that broke. `Badge` is a chip: tinted fill,
+ * border, clickable affordance — not a sample of the exact colour.
+ *
+ * Its mark is the same square Legend draws, one type step larger, because it stands beside a name
+ * rather than inside an 11px key.
+ */
+export type SwatchProp = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "color"> & {
+    /**
+     * The colour to show, as a CSS colour VALUE — `#7C3AED`, `rgb(…)`, `oklch(…)`. It is DATA the
+     * same way `Badge`'s `color` is: a value a person picked in a settings screen, so it arrives as
+     * a prop and is never written into a stylesheet. Passing a semantic token's own colour here is
+     * the one thing to avoid — a tone that MEANS something belongs on a component that names the
+     * meaning (`Badge tone`, `Legend`), not on a sample.
+     */
+    color: string;
+    /**
+     * The accessible NAME of the sample, and the reason this component can exist without a visible
+     * label. Say what the colour is FOR and what it is: `aria-label={`${t.primaryColor}: ${hex}`}`.
+     *
+     * With it, the swatch is a `role="img"` that announces that sentence. Without it the swatch is
+     * `aria-hidden` — correct, and the only correct option, when a visible line beside it already
+     * states the colour. Either way colour is never the sole carrier of the meaning (WCAG 1.4.1);
+     * what is NOT offered is a third path where it is.
+     */
+    "aria-label"?: string;
+};
+/**
+ * Whether a `FeatureList` line is in, out, or in with a limit.
+ *
+ * Three members and no fourth: the axis is INCLUSION, and a list that also carried "coming soon",
+ * "beta" or "deprecated" would be encoding a roadmap on the same glyph column as a fact about
+ * today. Those are a `Badge` beside the label, which is content the screen already owns.
+ */
+export type FeatureStateProp = "included" | "excluded" | "limited";
+/**
+ * One line of a `FeatureList`: what state it is in, what it is called, and — optionally — a
+ * sentence about it that WRAPS.
+ *
+ * There is deliberately no field for a quantity ("10,000 req/mo"). Composing it into `label` as
+ * `<>API calls <Text tone="muted" tabular>10,000 req/mo</Text></>` is already legal and already
+ * audit-clean, so a prop for it would fail question 1 of docs/WHAT-BELONGS-HERE.md — the consumer
+ * has a move. What the consumer did NOT have a move for is the glyph column and its alignment,
+ * which is what this component owns.
+ */
+export type FeatureItemProp = {
+    /** In, out, or in with a limit. Drives the glyph, its mark colour and the `sr-only` prefix. */
+    state: FeatureStateProp;
+    /** What the line is about. Wraps. */
+    label: LabelProp;
+    /** An optional muted sentence under the label. Wraps; long unbroken tokens break. */
+    description?: DescriptionProp;
+};
+/**
+ * @see FeatureList — a list of statements, each with a leading state glyph: what a plan includes,
+ * what a tier supports, which requirements a submission met.
+ */
+export type FeatureListProp = Omit<React.HTMLAttributes<HTMLUListElement>, "children"> & {
+    items: FeatureItemProp[];
+    className?: ClassNameProp;
+};
+/**
+ * Fixed BLOCK size of a `Thumbnail`; the inline size stays intrinsic.
+ *
+ * A subset of the shared `SizeProp` ladder — `xs` is off the bottom because a 48px frame with a
+ * 1px hairline is a favicon, not a thumbnail, and nothing in the reported cases wanted one.
+ */
+export type ThumbnailSizeProp = Extract<SizeProp, "sm" | "md" | "lg">;
+/**
+ * @see Thumbnail — a framed image at a FIXED HEIGHT and its own intrinsic width, for a wrapping
+ * row of pictures whose aspect ratios differ.
+ */
+export type ThumbnailProp = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt"> & {
+    /** Image URL. */
+    src: string;
+    /**
+     * Required, with no way to omit it. Pass `""` for a picture that carries no information the
+     * page does not already say — the empty string is a DECISION the author has to make, where a
+     * missing attribute is an omission nobody notices (WCAG 1.1.1).
+     */
+    alt: string;
+    /** Frame height. Default `md`. The width follows the picture's own ratio. */
+    size?: ThumbnailSizeProp;
+    className?: ClassNameProp;
+};
 /** @see EmptyState */
 /**
  * Semantic intent of the EmptyState icon medallion — a subset of the shared `ToneProp` vocabulary

package/dist/props/components/feedback.prop.d.ts

@@ -1,7 +1,7 @@
 /** Feedback component prop types — @see docs/COMPONENTS.md#feedback */
 import type * as React from "react";
 import type { QueryErrorCategory } from "../../lib/query-error.js";
-import type { AlertVariantProp, CancelLabelProp, ChildrenProp, ClassNameProp, ConfirmLabelProp, ConfirmVariantProp, DescriptionProp, HandlerProp, IconProp, OpenProp, OnOpenChangeProp, PendingProp, ToneProp, TitleProp } from "../vocabulary/index.js";
+import type { AlertVariantProp, AvatarShapeProp, CancelLabelProp, ChildrenProp, ClassNameProp, ConfirmLabelProp, ConfirmVariantProp, DescriptionProp, HandlerProp, IconProp, OpenProp, OnOpenChangeProp, PendingProp, ShapeProp, SizeProp, ToneProp, TitleProp } from "../vocabulary/index.js";
 /** @see AlertDialog */
 export type AlertDialogProp = {
     open: OpenProp;
@@ -83,3 +83,87 @@ export type SkeletonRowsProp = {
     rows?: number;
     columns?: number;
 };
+/**
+ * A skeleton line's MEASURE. `number` is read as pixels, matching antd's
+ * `SkeletonParagraphProps["width"]` (components/skeleton/Paragraph.tsx); a string is any CSS length
+ * or percentage. It reaches the DOM as the `--skeleton-line-width` custom property rather than a
+ * raw `width`, so the line still resolves its own block size and radius from the token tier.
+ */
+export type SkeletonWidth = number | string;
+/**
+ * @see Skeleton — the placeholder BLOCK. Both fields are antd's, ported onto the block this
+ * library already shipped rather than onto a second component beside it.
+ */
+export type SkeletonProp = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Swap the resting pulse for the travelling SHEEN (antd's `active`). antd's non-active skeleton
+     * is fully static; this library's block has always pulsed, so the default is left alone and
+     * `active` selects the louder of the two motions instead of turning motion on.
+     */
+    active?: boolean;
+    /**
+     * `false` renders `children` in place of the placeholder. An OMITTED `loading` still renders the
+     * placeholder — antd's `loading || !("loading" in props)`.
+     */
+    loading?: boolean;
+};
+/** @see SkeletonAvatar */
+export type SkeletonAvatarProp = {
+    /** Box, from the `--control-height` tier — the same tier the real `Avatar` sizes from. */
+    size?: SizeProp;
+    shape?: AvatarShapeProp;
+    active?: boolean;
+    className?: ClassNameProp;
+};
+/** @see SkeletonButton */
+export type SkeletonButtonProp = {
+    size?: SizeProp;
+    /** Corner, in `Button`'s own vocabulary: `pill` is antd's `shape="round"`. */
+    shape?: ShapeProp;
+    /** Fill the inline axis, for a button that spans its column (antd's `block`). */
+    block?: boolean;
+    active?: boolean;
+    className?: ClassNameProp;
+};
+/** @see SkeletonInput */
+export type SkeletonInputProp = {
+    size?: SizeProp;
+    block?: boolean;
+    active?: boolean;
+    className?: ClassNameProp;
+};
+/** @see SkeletonNode — a square standing in for a media/custom slot; `children` centres in it. */
+export type SkeletonNodeProp = {
+    active?: boolean;
+    children?: ChildrenProp;
+    className?: ClassNameProp;
+};
+/** @see SkeletonImage */
+export type SkeletonImageProp = {
+    active?: boolean;
+    className?: ClassNameProp;
+};
+/**
+ * @see SkeletonArticle — antd's own `<Skeleton>` shape (avatar + title + paragraph). It is a
+ * SIBLING of `Skeleton`, not a replacement: `Skeleton` here is the block antd spells
+ * `Skeleton.Node`, and re-pointing it at the article would change what every existing call site
+ * renders.
+ */
+export type SkeletonArticleProp = {
+    avatar?: boolean | Pick<SkeletonAvatarProp, "size" | "shape">;
+    /** The heading line. NOT a string title — `false` drops the line, `{ width }` re-measures it. */
+    title?: boolean | {
+        width?: SkeletonWidth;
+    };
+    /** `width` as an array measures each row; as a single value it measures the LAST row. */
+    paragraph?: boolean | {
+        rows?: number;
+        width?: SkeletonWidth | SkeletonWidth[];
+    };
+    /** Pill corners on every line (antd's `round`, whose capsule radius is `--radius-pill` here). */
+    round?: boolean;
+    active?: boolean;
+    loading?: boolean;
+    children?: ChildrenProp;
+    className?: ClassNameProp;
+};