@godxjp/ui 23.3.0 → 23.4.1

package/dist/components/data-display/card.d.ts

@@ -2,6 +2,9 @@ import type { GapProp, PadProp, PadRawProp } from "../../props/vocabulary/index.
 import * as React from "react";
 import type { LucideIcon } from "lucide-react";
 import type { HeadingLevelProp } from "../../props/vocabulary/index.js";
+import type { CardTabItemProp } from "../../props/components/data-display.prop.js";
+import { type TabsExtraProp, type TabsProps } from "../navigation/tabs.js";
+export type { CardTabItemProp, CardTabItemProp as CardTabItemProps, } from "../../props/components/data-display.prop.js";
 /** Semantic accent tone. `accentPlacement` decides WHERE it is drawn — a leading-edge
  *  stripe (default) or the full perimeter. */
 type CardAccent = "primary" | "success" | "warning" | "info" | "attention" | "destructive";
@@ -41,6 +44,48 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
      * bare `onClick` on this div, which a keyboard or screen-reader user cannot reach.
      */
     hoverable?: boolean;
+    /**
+     * Ant Design `tabList` — the tab strip that lives IN THE CARD'S HEAD, under the title, inside
+     * the same border and on the same surface, so the card and its tabs read as one object. The
+     * card's remaining children become the selected tab's body.
+     *
+     * Ported name for name and semantic for semantic (docs/DESIGN-AUTHORITY.md): the entry is
+     * antd's `{ key, tab, disabled }`, not the `Tabs` component's `{ value, label, content }`.
+     * @see CardTabItemProp for why the two item shapes stay apart.
+     */
+    tabList?: CardTabItemProp[];
+    /** Ant Design `activeTabKey` — the controlled selection. Pair it with `onTabChange`. */
+    activeTabKey?: string;
+    /**
+     * Ant Design `defaultActiveTabKey` — the uncontrolled initial selection. Without it the first
+     * entry of `tabList` opens, which is antd's own fallback.
+     */
+    defaultActiveTabKey?: string;
+    /** Ant Design `onTabChange` — fires with the newly selected `key`, however the selection moved. */
+    onTabChange?: (key: string) => void;
+    /**
+     * Ant Design `tabBarExtraContent`, RENAMED to `extra` and made logical — the one deviation from
+     * antd's spelling here, and it follows the precedent this package already set on
+     * `TabsProp.extra` ("Ant Design `tabBarExtraContent`, renamed and made logical"). A second
+     * spelling of a slot the package has already named once is exactly what
+     * `check:prop-vocabulary` exists to prevent, and antd's `{ left, right }` keys cannot mirror
+     * for an RTL locale where `{ start, end }` can.
+     *
+     * Inert without `tabList`: antd draws this content in the tab bar, and with no tab bar there is
+     * nowhere for it to go. A header-level action is `<CardAction>` inside `<CardHeader>`.
+     */
+    extra?: TabsExtraProp;
+    /**
+     * Ant Design `tabProps` — passed straight down to the `Tabs` that draws the strip, so
+     * `variant`, `size`, `centered`, `overflow`, `indicator` and the rest are reachable.
+     *
+     * The four fields the CARD owns are omitted rather than passed through: `items` is built from
+     * `tabList`, and `value` / `defaultValue` / `onValueChange` are what `activeTabKey` /
+     * `defaultActiveTabKey` / `onTabChange` already say. antd drops the same fields — it spreads
+     * `tabProps` first and then writes its own `items`/`activeKey`/`onChange` over them — so this
+     * is that behaviour made visible in the type instead of silent at runtime.
+     */
+    tabProps?: Omit<TabsProps, "items" | "value" | "defaultValue" | "onValueChange" | "extra" | "children">;
 };
 export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     accent?: CardAccent;
@@ -61,6 +106,48 @@ export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<
      * bare `onClick` on this div, which a keyboard or screen-reader user cannot reach.
      */
     hoverable?: boolean;
+    /**
+     * Ant Design `tabList` — the tab strip that lives IN THE CARD'S HEAD, under the title, inside
+     * the same border and on the same surface, so the card and its tabs read as one object. The
+     * card's remaining children become the selected tab's body.
+     *
+     * Ported name for name and semantic for semantic (docs/DESIGN-AUTHORITY.md): the entry is
+     * antd's `{ key, tab, disabled }`, not the `Tabs` component's `{ value, label, content }`.
+     * @see CardTabItemProp for why the two item shapes stay apart.
+     */
+    tabList?: CardTabItemProp[];
+    /** Ant Design `activeTabKey` — the controlled selection. Pair it with `onTabChange`. */
+    activeTabKey?: string;
+    /**
+     * Ant Design `defaultActiveTabKey` — the uncontrolled initial selection. Without it the first
+     * entry of `tabList` opens, which is antd's own fallback.
+     */
+    defaultActiveTabKey?: string;
+    /** Ant Design `onTabChange` — fires with the newly selected `key`, however the selection moved. */
+    onTabChange?: (key: string) => void;
+    /**
+     * Ant Design `tabBarExtraContent`, RENAMED to `extra` and made logical — the one deviation from
+     * antd's spelling here, and it follows the precedent this package already set on
+     * `TabsProp.extra` ("Ant Design `tabBarExtraContent`, renamed and made logical"). A second
+     * spelling of a slot the package has already named once is exactly what
+     * `check:prop-vocabulary` exists to prevent, and antd's `{ left, right }` keys cannot mirror
+     * for an RTL locale where `{ start, end }` can.
+     *
+     * Inert without `tabList`: antd draws this content in the tab bar, and with no tab bar there is
+     * nowhere for it to go. A header-level action is `<CardAction>` inside `<CardHeader>`.
+     */
+    extra?: TabsExtraProp;
+    /**
+     * Ant Design `tabProps` — passed straight down to the `Tabs` that draws the strip, so
+     * `variant`, `size`, `centered`, `overflow`, `indicator` and the rest are reachable.
+     *
+     * The four fields the CARD owns are omitted rather than passed through: `items` is built from
+     * `tabList`, and `value` / `defaultValue` / `onValueChange` are what `activeTabKey` /
+     * `defaultActiveTabKey` / `onTabChange` already say. antd drops the same fields — it spreads
+     * `tabProps` first and then writes its own `items`/`activeKey`/`onChange` over them — so this
+     * is that behaviour made visible in the type instead of silent at runtime.
+     */
+    tabProps?: Omit<TabsProps, "items" | "value" | "defaultValue" | "onValueChange" | "extra" | "children">;
 } & React.RefAttributes<HTMLDivElement>>;
 /** Full-bleed cover media — first child; header below uses section top (φ⁰), not shell. */
 export type CardCoverProps = React.HTMLAttributes<HTMLDivElement>;
@@ -190,4 +277,3 @@ export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & {
 export declare function StatCard({ label, value, hint, icon: Icon, delta, layout, align, inverse, accent, accentPlacement, className, ...props }: StatCardProps): React.JSX.Element;
 /** Header actions slot — compose beside CardTitle inside CardHeader; the header owns positioning. */
 export declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/components/data-display/card.js

@@ -1,22 +1,95 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { padStyle, padStepToken } from "../../lib/variants.js";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
+import { Tabs } from "../navigation/tabs.js";
+function resolveActiveCardTabKey(tabList, requested) {
+  if (requested !== void 0) {
+    const item = tabList.find((entry) => entry.key === requested);
+    if (item && !item.disabled) return requested;
+  }
+  return tabList.find((entry) => !entry.disabled)?.key;
+}
+function splitCardBands(children) {
+  const head = [];
+  const body = [];
+  const foot = [];
+  for (const child of React.Children.toArray(children)) {
+    const type = React.isValidElement(child) ? child.type : void 0;
+    if (type === CardCover || type === CardHeader) head.push(child);
+    else if (type === CardFooter) foot.push(child);
+    else body.push(child);
+  }
+  return { head, body, foot };
+}
 const Card = React.forwardRef(
-  ({ className, accent, accentPlacement, variant, density, hoverable, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("group/card", className),
-      "data-slot": "card",
-      "data-accent": accent,
-      "data-hoverable": hoverable ? "" : void 0,
-      "data-accent-placement": accentPlacement === "perimeter" ? "perimeter" : void 0,
-      "data-variant": variant && variant !== "default" ? variant : void 0,
-      "data-density": density,
-      ...props
-    }
-  )
+  ({
+    className,
+    accent,
+    accentPlacement,
+    variant,
+    density,
+    hoverable,
+    tabList,
+    activeTabKey,
+    defaultActiveTabKey,
+    onTabChange,
+    extra,
+    tabProps,
+    children,
+    ...props
+  }, ref) => {
+    const [mirroredKey, setMirroredKey] = React.useState(void 0);
+    const activeKey = tabList?.length ? resolveActiveCardTabKey(tabList, activeTabKey ?? mirroredKey ?? defaultActiveTabKey) : void 0;
+    const handleTabChange = React.useCallback(
+      (key) => {
+        setMirroredKey(key);
+        onTabChange?.(key);
+      },
+      [onTabChange]
+    );
+    const { head, body, foot } = tabList?.length ? splitCardBands(children) : { head: void 0, body: void 0, foot: void 0 };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("group/card", className),
+        "data-slot": "card",
+        "data-accent": accent,
+        "data-hoverable": hoverable ? "" : void 0,
+        "data-accent-placement": accentPlacement === "perimeter" ? "perimeter" : void 0,
+        "data-variant": variant && variant !== "default" ? variant : void 0,
+        "data-density": density,
+        "data-tab-list": tabList?.length ? "" : void 0,
+        ...props,
+        children: tabList?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          head,
+          /* @__PURE__ */ jsx(
+            Tabs,
+            {
+              variant: "line",
+              ...tabProps,
+              items: tabList.map((item) => ({
+                value: item.key,
+                label: item.tab,
+                disabled: item.disabled,
+                // The body belongs to the SELECTED tab and to no other: the card has exactly one
+                // set of children, so handing them to every panel would render them N times the
+                // moment `destroyOnHidden={false}` kept the hidden panels mounted.
+                content: item.key === activeKey ? body : null
+              })),
+              value: activeKey,
+              onValueChange: handleTabChange,
+              extra,
+              listClassName: cn("px-[var(--card-space-inset)]", tabProps?.listClassName)
+            }
+          ),
+          foot
+        ] }) : children
+      }
+    );
+  }
 );
 Card.displayName = "Card";
 const CardCover = React.forwardRef(

package/dist/components/data-display/index.d.ts

@@ -17,7 +17,7 @@ export type { QrCodeProps } from "./qr-code.js";
 export type { QrCodeProp } from "../../props/components/data-display.prop.js";
 export { Avatar, AvatarImage, AvatarFallback } from "./avatar.js";
 export { Card, CardBar, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, CardAction, StatCard, } from "./card.js";
-export type { StatCardProps, CardBarProps } from "./card.js";
+export type { StatCardProps, CardBarProps, CardTabItemProp, CardTabItemProps } from "./card.js";
 export { ServiceCatalogCta, ServiceLauncherCard, ServiceLauncherCardSkeleton, } from "./service-launcher-card.js";
 export type { ServiceCatalogCtaProps, ServiceLauncherCardProps, ServiceLauncherCardSkeletonProps, ServiceLauncherStatusTone, } from "./service-launcher-card.js";
 export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
@@ -51,3 +51,7 @@ export { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
 export type { ChatBubbleListProp, ChatBubbleListProps, ChatBubblePlacementProp, ChatBubbleProp, ChatBubbleProps, ChatBubbleToneProp, ChatBubbleTypingProp, ChatBubbleVariantProp, ChatMessageProp, } from "./chat-bubble.js";
 export { Tree } from "./tree.js";
 export type { TreeNodeProp, TreeProp, TreeProps } from "./tree.js";
+export { Welcome } from "./welcome.js";
+export type { WelcomeProp, WelcomeProps, WelcomeVariantProp } from "./welcome.js";
+export { ThoughtChain, ThoughtChainItem } from "./thought-chain.js";
+export type { ThoughtChainProp, ThoughtChainProps, ThoughtChainItemsProp, ThoughtChainItemProp, ThoughtChainItemProps, ThoughtChainStatusProp, ThoughtChainLineProp, ThoughtChainVariantProp, } from "./thought-chain.js";

package/dist/components/data-display/index.js

@@ -59,6 +59,8 @@ import { PermissionMatrix } from "./permission-matrix.js";
 import { RangeTimeline } from "./range-timeline.js";
 import { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
 import { Tree } from "./tree.js";
+import { Welcome } from "./welcome.js";
+import { ThoughtChain, ThoughtChainItem } from "./thought-chain.js";
 export {
   Accordion,
   AccordionContent,
@@ -125,10 +127,13 @@ export {
   TableHead,
   TableHeader,
   TableRow,
+  ThoughtChain,
+  ThoughtChainItem,
   Thumbnail,
   Timeline,
   TimelineGrid,
   Tree,
+  Welcome,
   flexRender,
   useCarousel
 };

package/dist/components/data-display/thought-chain.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { ThoughtChainItemProp, ThoughtChainProp } from "../../props/components/data-display.prop.js";
+export type { ThoughtChainProp, ThoughtChainProp as ThoughtChainProps, ThoughtChainItemsProp, ThoughtChainItemProp, ThoughtChainItemProp as ThoughtChainItemProps, ThoughtChainStatusProp, ThoughtChainLineProp, ThoughtChainVariantProp, } from "../../props/components/data-display.prop.js";
+/**
+ * ThoughtChain — the assistant's reasoning, step by step (Ant Design X `ThoughtChain`).
+ *
+ * ## The shape, and why it is an `<ol>`
+ *
+ * Ant renders the whole chain as nested `<div>`s and paints the step number itself
+ * (`index + 1` in `es/thought-chain/Node.js`). The order of the steps IS the content here — step 3
+ * only makes sense after step 2 — so the chain is an ordered list and a screen reader gets "list,
+ * 4 items" plus each step's position for free. The visible ordinal stays, because the same number
+ * has to be on screen for a sighted reader following a long chain.
+ *
+ * ## The disclosure is a real button
+ *
+ * A `collapsible` step's title in Ant is a `<div onClick>` with a rotating chevron — no role, no
+ * `tabIndex`, no `aria-expanded`. Here it is a `<button aria-expanded aria-controls>` over the
+ * body it opens: the WAI-ARIA APG Disclosure pattern, so the step can be opened from the keyboard
+ * and its state is announced rather than inferred from a rotation.
+ *
+ * Everything a caller passes keeps Ant's spelling: `items` (with `icon`, `title`, `description`,
+ * `content`, `footer`, `status`, `collapsible`, `blink`, `destroyOnHidden`), the
+ * `defaultExpandedKeys` / `expandedKeys` / `onExpand` triad, and `line`. `styles` / `classNames` /
+ * `prefixCls` / `rootClassName` are not ported — the standing style-hole decision
+ * (docs/WHAT-BELONGS-HERE.md, docs/DESIGN-AUTHORITY.md); the chain is retuned through
+ * `src/tokens/components/thought-chain.css`.
+ */
+export declare const ThoughtChain: React.ForwardRefExoticComponent<ThoughtChainProp & React.RefAttributes<HTMLOListElement>>;
+/**
+ * ThoughtChainItem — one step OUTSIDE a chain (Ant Design X `ThoughtChain.Item`).
+ *
+ * A named export rather than `ThoughtChain.Item`, for the same reason `ActionsItem` is: every
+ * compound in this library is separate named exports (`CardHeader`, `TabsList`), and attaching
+ * statics to one component would be the only instance of it here.
+ *
+ * ONE DEVIATION: Ant renders the chip as a `<div>` and hangs `onClick` on it, so a clickable step
+ * is invisible to the keyboard and to assistive technology. Here an item WITH `onClick` renders a
+ * real `<button>` and one without renders a plain `<div>` — the element follows whether the thing
+ * is actually a control.
+ */
+export declare const ThoughtChainItem: React.ForwardRefExoticComponent<ThoughtChainItemProp & React.RefAttributes<HTMLElement>>;

package/dist/components/data-display/thought-chain.js

@@ -0,0 +1,177 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronRight, CircleCheck, CircleMinus, CircleX, Loader2 } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { VisuallyHidden } from "../general/visually-hidden.js";
+import { Text } from "../general/typography.js";
+const STATUS_GLYPH = {
+  loading: /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "ui-thought-chain-spinner" }),
+  success: /* @__PURE__ */ jsx(CircleCheck, { "aria-hidden": "true" }),
+  error: /* @__PURE__ */ jsx(CircleX, { "aria-hidden": "true" }),
+  abort: /* @__PURE__ */ jsx(CircleMinus, { "aria-hidden": "true" })
+};
+function StatusMark({
+  status,
+  fallback
+}) {
+  const { t } = useTranslation();
+  if (!status) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    STATUS_GLYPH[status],
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: t(`dataDisplay.thoughtChain.status.${status}`) })
+  ] });
+}
+const ThoughtChain = React.forwardRef(
+  ({
+    items = [],
+    defaultExpandedKeys,
+    expandedKeys,
+    onExpand,
+    line = true,
+    label,
+    id,
+    className,
+    ...rest
+  }, ref) => {
+    const { t } = useTranslation();
+    const reactId = React.useId();
+    const [uncontrolled, setUncontrolled] = React.useState(() => [
+      ...defaultExpandedKeys ?? []
+    ]);
+    const open = expandedKeys ? [...expandedKeys] : uncontrolled;
+    const toggle = (key) => {
+      const next = open.includes(key) ? open.filter((k) => k !== key) : [...open, key];
+      if (!expandedKeys) setUncontrolled(next);
+      onExpand?.(next);
+    };
+    return /* @__PURE__ */ jsx(
+      "ol",
+      {
+        ref,
+        id,
+        "aria-label": label ?? t("dataDisplay.thoughtChain.label"),
+        "data-slot": "thought-chain",
+        "data-line": line === false ? "none" : line === true ? "solid" : line,
+        className: cn("ui-thought-chain", className),
+        ...rest,
+        children: items.map((item, index) => {
+          const key = item.key ?? `${reactId}-${index}`;
+          const bodyId = `${reactId}-body-${index}`;
+          const collapsible = Boolean(item.collapsible && item.content);
+          const expanded = collapsible ? open.includes(key) : true;
+          const glyph = item.icon === false ? null : item.icon ?? index + 1;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              "data-slot": "thought-chain-node",
+              "data-status": item.status,
+              className: "ui-thought-chain-node",
+              children: [
+                glyph === null ? null : /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "thought-chain-icon",
+                    "data-status": item.status,
+                    className: "ui-thought-chain-icon",
+                    children: /* @__PURE__ */ jsx(StatusMark, { status: item.status, fallback: glyph })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "ui-thought-chain-body", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "ui-thought-chain-header", children: [
+                    collapsible ? /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-expanded": expanded,
+                        "aria-controls": bodyId,
+                        "data-blink": item.blink ? "" : void 0,
+                        className: "ui-thought-chain-trigger",
+                        onClick: () => toggle(key),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            ChevronRight,
+                            {
+                              "aria-hidden": "true",
+                              "data-expanded": expanded ? "true" : void 0,
+                              className: "ui-thought-chain-chevron"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(Text, { weight: "medium", children: item.title })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsx(Text, { weight: "medium", "data-blink": item.blink ? "" : void 0, children: item.title }),
+                    item.description ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: item.description }) : null
+                  ] }),
+                  item.content && (expanded || item.destroyOnHidden === false) ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      id: bodyId,
+                      hidden: !expanded,
+                      "data-blink": item.blink ? "" : void 0,
+                      className: "ui-thought-chain-content",
+                      children: item.content
+                    }
+                  ) : null,
+                  item.footer ? /* @__PURE__ */ jsx("div", { className: "ui-thought-chain-footer", children: item.footer }) : null
+                ] })
+              ]
+            },
+            key
+          );
+        })
+      }
+    );
+  }
+);
+ThoughtChain.displayName = "ThoughtChain";
+const ThoughtChainItem = React.forwardRef(
+  ({
+    title,
+    description,
+    icon,
+    status,
+    variant = "solid",
+    blink,
+    disabled,
+    onClick,
+    id,
+    className
+  }, ref) => {
+    const shared = {
+      id,
+      "data-slot": "thought-chain-item",
+      "data-variant": variant,
+      "data-status": status,
+      "data-blink": blink ? "" : void 0,
+      className: cn("ui-thought-chain-item", className)
+    };
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      status || icon ? /* @__PURE__ */ jsx("span", { "data-status": status, className: "ui-thought-chain-icon", children: /* @__PURE__ */ jsx(StatusMark, { status, fallback: icon }) }) : null,
+      /* @__PURE__ */ jsxs("span", { className: "ui-thought-chain-item-text", children: [
+        title ? /* @__PURE__ */ jsx(Text, { weight: "medium", children: title }) : null,
+        description ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: description }) : null
+      ] })
+    ] });
+    if (!onClick) {
+      return /* @__PURE__ */ jsx("div", { ref, ...shared, children: inner });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled,
+        onClick,
+        ...shared,
+        children: inner
+      }
+    );
+  }
+);
+ThoughtChainItem.displayName = "ThoughtChainItem";
+export {
+  ThoughtChain,
+  ThoughtChainItem
+};

package/dist/components/data-display/welcome.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { WelcomeProp } from "../../props/components/data-display.prop.js";
+export type { WelcomeProp, WelcomeProp as WelcomeProps, WelcomeVariantProp, } from "../../props/components/data-display.prop.js";
+/**
+ * Welcome — the greeting block at the head of an empty conversation (Ant Design X `Welcome`).
+ *
+ * ## Why this is a component and not four lines of composition
+ *
+ * It is close to the line, and the honest answer is that the SHAPE is the value: an assistant's
+ * first screen is the same object in every product — glyph, greeting, one line under it, one
+ * trailing action — and Ant X named it, so every consumer that builds a chat now expects the name.
+ * What it owns beyond a `Flex` is the `extra` slot's placement (on the TITLE row, not below the
+ * description, which is where a hand-roll puts it) and the `icon`-as-URL rule below.
+ *
+ * ## Two deliberate differences from Ant X, both in the same direction
+ *
+ * - **The image icon is decorative.** Ant renders `alt="icon"` — a screen reader then reads the
+ *   word "icon" beside a title the glyph is only decorating. Here it is `alt=""`, which is what an
+ *   image that duplicates adjacent text is supposed to be.
+ * - **The heading level is Ant's.** Ant hardcodes `Typography.Title level={4}`, so this renders an
+ *   `<h4>`. Hardcoding a level is a document-structure decision a component should not normally
+ *   make, but the alternative — inventing a `level` prop Ant does not have — is a second spelling
+ *   of an axis the issue asked to port verbatim. Wrap it in your own heading hierarchy if the page
+ *   needs a different rung.
+ */
+export declare const Welcome: React.ForwardRefExoticComponent<WelcomeProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/welcome.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Heading, Text } from "../general/typography.js";
+function isImageUrl(icon) {
+  return typeof icon === "string" && icon.startsWith("http");
+}
+const Welcome = React.forwardRef(
+  ({ icon, title, description, extra, variant = "filled", id, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id,
+        "data-slot": "welcome",
+        "data-variant": variant,
+        className: cn("ui-welcome", className),
+        ...rest,
+        children: [
+          icon ? /* @__PURE__ */ jsx("div", { "data-slot": "welcome-icon", className: "ui-welcome-icon", "aria-hidden": "true", children: isImageUrl(icon) ? /* @__PURE__ */ jsx("img", { src: icon, alt: "" }) : icon }) : null,
+          /* @__PURE__ */ jsxs("div", { "data-slot": "welcome-content", className: "ui-welcome-content", children: [
+            title || extra ? /* @__PURE__ */ jsxs("div", { "data-slot": "welcome-title-row", className: "ui-welcome-title-row", children: [
+              title ? /* @__PURE__ */ jsx(Heading, { level: 4, className: "ui-welcome-title", children: title }) : null,
+              extra ? /* @__PURE__ */ jsx("div", { "data-slot": "welcome-extra", className: "ui-welcome-extra", children: extra }) : null
+            ] }) : null,
+            description ? /* @__PURE__ */ jsx(Text, { size: "sm", tone: "muted", className: "ui-welcome-description", children: description }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+Welcome.displayName = "Welcome";
+export {
+  Welcome
+};

package/dist/components/data-entry/attachments.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { AttachmentsItemProp, AttachmentsPlaceholderProp, AttachmentsRefProp } from "../../props/components/data-entry.prop.js";
+export type { AttachmentsProp, AttachmentsProp as AttachmentsProps, AttachmentsItemProp, AttachmentsPlaceholderProp, AttachmentsOverflowProp, AttachmentsRefProp, } from "../../props/components/data-entry.prop.js";
+export declare const Attachments: React.ForwardRefExoticComponent<Omit<import("./upload.js").UploadProp, "children" | "defaultValue" | "onRemove" | "onValueChange" | "showUploadList" | "value" | "variant"> & {
+    items?: readonly AttachmentsItemProp[];
+    onChange?: (info: {
+        file: AttachmentsItemProp;
+        fileList: AttachmentsItemProp[];
+    }) => void;
+    onRemove?: (item: AttachmentsItemProp) => boolean | void | Promise<boolean | void>;
+    overflow?: import("./attachments.js").AttachmentsOverflowProp;
+    placeholder?: AttachmentsPlaceholderProp | ((type: "inline" | "drop") => AttachmentsPlaceholderProp);
+    getDropContainer?: (() => HTMLElement | null | undefined) | null;
+    classNames?: Partial<Record<import("../../props/components/data-entry.prop.js").AttachmentsSemanticProp, string>>;
+    styles?: Partial<Record<import("../../props/components/data-entry.prop.js").AttachmentsSemanticProp, React.CSSProperties>>;
+    rootClassName?: import("../../props/index.js").ClassNameProp;
+    children?: React.ReactElement;
+    imageProps?: Record<string, unknown>;
+} & React.RefAttributes<AttachmentsRefProp>>;