@godxjp/ui 23.1.0 → 23.2.1

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

@@ -13,8 +13,13 @@ type CardAccent = "primary" | "success" | "warning" | "info" | "attention" | "de
  * borrowing the brand colour.
  */
 type CardAccentPlacement = "edge" | "perimeter";
-/** Surface fill — plain card, muted band, borderless outline, or emphasized featured ring. */
-type CardVariant = "default" | "muted" | "outline" | "featured";
+/**
+ * Surface fill and edge. `outline` is antd's `outlined` — it drops the FILL and keeps the
+ * hairline; `borderless` is antd's `variant="borderless"` (its deprecated `bordered={false}`) —
+ * it drops the HAIRLINE and keeps the fill. They are two different cards, which is why both
+ * values exist: neither one substitutes for the other.
+ */
+type CardVariant = "default" | "muted" | "outline" | "borderless" | "featured";
 /** Padding density — base 16px · tight 12px · cozy 20px. */
 type CardDensity = "tight" | "cozy";
 export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -26,6 +31,16 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     accentPlacement?: CardAccentPlacement;
     variant?: CardVariant;
     density?: CardDensity;
+    /**
+     * Lift the card on hover (antd `hoverable`) — the resting elevation steps up to
+     * `--card-hover-shadow` and the pointer becomes a `pointer`.
+     *
+     * This is a PRESENTATION flag, not an interaction: it announces nothing and binds no handler.
+     * A card that looks clickable has to BE clickable for everyone, so pair it with a real control
+     * — a `Link`/`Button` in the header or footer, or the whole card rendered as one — never with a
+     * bare `onClick` on this div, which a keyboard or screen-reader user cannot reach.
+     */
+    hoverable?: boolean;
 };
 export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     accent?: CardAccent;
@@ -36,6 +51,16 @@ export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<
     accentPlacement?: CardAccentPlacement;
     variant?: CardVariant;
     density?: CardDensity;
+    /**
+     * Lift the card on hover (antd `hoverable`) — the resting elevation steps up to
+     * `--card-hover-shadow` and the pointer becomes a `pointer`.
+     *
+     * This is a PRESENTATION flag, not an interaction: it announces nothing and binds no handler.
+     * A card that looks clickable has to BE clickable for everyone, so pair it with a real control
+     * — a `Link`/`Button` in the header or footer, or the whole card rendered as one — never with a
+     * bare `onClick` on this div, which a keyboard or screen-reader user cannot reach.
+     */
+    hoverable?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 /** Full-bleed cover media — first child; header below uses section top (φ⁰), not shell. */
 export type CardCoverProps = React.HTMLAttributes<HTMLDivElement>;
@@ -90,12 +115,30 @@ export type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
     separated?: boolean;
     /** Full-bleed footer (the conventional `actions` bar). */
     flush?: boolean;
+    /**
+     * Split the footer into EQUAL-WIDTH cells divided by vertical rules — antd's `actions` row.
+     *
+     * A different band from `separated`, which packs its children at the inline end at their
+     * natural widths: that is the right shape for a Save/Cancel pair and the wrong one for antd's
+     * divided strip. Self-sufficient — it draws its own top rule and full-bleed edges, because
+     * upstream's actions row is never anything else.
+     */
+    actions?: boolean;
 };
 export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /** Top border + symmetric action band — form Save/Cancel, table summary. */
     separated?: boolean;
     /** Full-bleed footer (the conventional `actions` bar). */
     flush?: boolean;
+    /**
+     * Split the footer into EQUAL-WIDTH cells divided by vertical rules — antd's `actions` row.
+     *
+     * A different band from `separated`, which packs its children at the inline end at their
+     * natural widths: that is the right shape for a Save/Cancel pair and the wrong one for antd's
+     * divided strip. Self-sufficient — it draws its own top rule and full-bleed edges, because
+     * upstream's actions row is never anything else.
+     */
+    actions?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export type CardBarProps = React.HTMLAttributes<HTMLDivElement> & {
     pad?: PadProp;

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

@@ -3,13 +3,14 @@ import { padStyle, padStepToken } from "../../lib/variants.js";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 const Card = React.forwardRef(
-  ({ className, accent, accentPlacement, variant, density, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ 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,
@@ -61,13 +62,14 @@ const CardContent = React.forwardRef(
 );
 CardContent.displayName = "CardContent";
 const CardFooter = React.forwardRef(
-  ({ className, separated, flush, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, separated, flush, actions, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       "data-slot": "card-footer",
       "data-separated": separated ? "" : void 0,
       "data-flush": flush ? "" : void 0,
+      "data-actions": actions ? "" : void 0,
       className,
       ...props
     }

package/dist/components/data-display/feature-list.d.ts

@@ -0,0 +1,26 @@
+export type { FeatureItemProp, FeatureListProp, FeatureListProp as FeatureListProps, FeatureStateProp, } from "../../props/components/data-display.prop.js";
+import type { FeatureListProp } from "../../props/components/data-display.prop.js";
+/**
+ * FeatureList — a list of STATEMENTS, each carrying a leading state glyph: what a plan includes,
+ * what a tier supports, which requirements a submission met.
+ *
+ * ## Why it is not one of the three components it looks like
+ *
+ * - **`ListRow`** is a single-line ENTITY row — a session, a token, a passkey — with entity
+ *   padding, a divider between every row and a trailing action slot. A feature line is none of
+ *   those: it has no action, it is not a thing you can open, and reading a plan's contents
+ *   through a stack of ruled rows makes six facts look like six records.
+ * - **`Timeline`** has the glyph rail, but it is an ORDERED event list: a connector line runs
+ *   dot-to-dot and the statuses are `done`/`current`/`pending`, which is time, not inclusion.
+ * - **`Descriptions`** is a term/value grid. A feature line has no value column — the state IS
+ *   the value, and it is drawn, not written.
+ *
+ * ## The alignment, which is the actual reason this exists
+ *
+ * The glyph column is one line box tall (`1lh`) and the glyph is centred in it, so it lands on
+ * the FIRST line of a label that wraps to three. That is why the component can be handed a
+ * one-word label and a paragraph and both come out aligned, at any font size and at any density,
+ * with no number in the call site. The shape it replaces reached for `mt-0.5` — 2px, below
+ * `--space-1`, off every scale, and wrong the moment the text beside it changes size.
+ */
+export declare function FeatureList({ items, className, ...props }: FeatureListProp): import("react").JSX.Element;

package/dist/components/data-display/feature-list.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Minus, X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+const STATE = {
+  included: { Icon: Check, key: "dataDisplay.featureList.included" },
+  excluded: { Icon: X, key: "dataDisplay.featureList.excluded" },
+  limited: { Icon: Minus, key: "dataDisplay.featureList.limited" }
+};
+function FeatureList({ items, className, ...props }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("ul", { className: cn("ui-feature-list", className), ...props, children: items.map((item, index) => {
+    const { Icon, key } = STATE[item.state];
+    return /* @__PURE__ */ jsxs("li", { className: "ui-feature-list-item", "data-state": item.state, children: [
+      /* @__PURE__ */ jsx("span", { className: "ui-feature-list-mark", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+      /* @__PURE__ */ jsxs("span", { className: "ui-feature-list-body", children: [
+        /* @__PURE__ */ jsxs("span", { className: "ui-feature-list-label", children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: t(key) }),
+          item.label
+        ] }),
+        item.description != null ? /* @__PURE__ */ jsx("span", { className: "ui-feature-list-description", children: item.description }) : null
+      ] })
+    ] }, index);
+  }) });
+}
+export {
+  FeatureList
+};

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

@@ -2,6 +2,12 @@ export { Badge, StatusBadge } from "./badge.js";
 export type { BadgeProps, BadgeTone } from "./badge.js";
 export { Legend } from "./legend.js";
 export type { LegendItemProp, LegendProp, LegendProps } from "./legend.js";
+export { Swatch } from "./swatch.js";
+export type { SwatchProp, SwatchProps } from "./swatch.js";
+export { FeatureList } from "./feature-list.js";
+export type { FeatureItemProp, FeatureListProp, FeatureListProps, FeatureStateProp, } from "./feature-list.js";
+export { Thumbnail } from "./thumbnail.js";
+export type { ThumbnailProp, ThumbnailProps, ThumbnailSizeProp } from "./thumbnail.js";
 export { ListRow } from "./list-row.js";
 export type { ListRowProps, ListRowDensity } from "./list-row.js";
 export { CredentialReveal } from "./credential-reveal.js";

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

@@ -1,5 +1,8 @@
 import { Badge, StatusBadge } from "./badge.js";
 import { Legend } from "./legend.js";
+import { Swatch } from "./swatch.js";
+import { FeatureList } from "./feature-list.js";
+import { Thumbnail } from "./thumbnail.js";
 import { ListRow } from "./list-row.js";
 import { CredentialReveal } from "./credential-reveal.js";
 import { QrCode } from "./qr-code.js";
@@ -90,6 +93,7 @@ export {
   DataTable,
   Descriptions,
   EmptyState,
+  FeatureList,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -114,12 +118,14 @@ export {
   ServiceLauncherCardSkeleton,
   StatCard,
   StatusBadge,
+  Swatch,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
+  Thumbnail,
   Timeline,
   TimelineGrid,
   Tree,

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

@@ -0,0 +1,24 @@
+import type { SwatchProp } from "../../props/components/data-display.prop.js";
+export type { SwatchProp, SwatchProp as SwatchProps, } from "../../props/components/data-display.prop.js";
+/**
+ * Swatch — a READ-ONLY sample of one colour a person chose (gh#527).
+ *
+ * The colour arrives as a VALUE, never as a token: it is a brand's `primary_color`, a calendar
+ * category, a tag a user tinted. That is the axis `Legend` cannot express — its `tone` is a closed
+ * set of semantic roles — and the reason there was no legal way to draw one: a hand-rolled
+ * `<span className="w-[10px] h-[10px] rounded-[2px] bg-[#c0392f]" />` is blocked by ui-audit three
+ * times over, so the only remaining move was a suppression comment.
+ *
+ * It is the same square mark `Legend` draws (a sample reads as a SAMPLE; a pill reads as a chip
+ * you could click), one step larger, because it stands beside a name rather than inside an 11px
+ * key. The hairline is not decoration: without it a white or near-white value is invisible on a
+ * white card, and the sample stops showing anything at all.
+ *
+ * ## The accessible name
+ *
+ * Given an `aria-label` the mark is a `role="img"` that announces it, which is what lets the
+ * colour be shown with no visible label beside it. Given none it is `aria-hidden` — the Legend
+ * rule, for the same reason: a swatch that repeats a label already on screen would announce the
+ * same thing twice. Colour is never the sole carrier either way.
+ */
+export declare function Swatch({ color, className, style, ...props }: SwatchProp): import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Swatch({ color, className, style, ...props }) {
+  const named = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "swatch",
+      className: cn("ui-swatch", className),
+      style: { ...style, ["--swatch-color"]: color },
+      role: named ? "img" : void 0,
+      "aria-hidden": named ? void 0 : true,
+      ...props
+    }
+  );
+}
+export {
+  Swatch
+};

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+export type { ThumbnailProp, ThumbnailProp as ThumbnailProps, ThumbnailSizeProp, } from "../../props/components/data-display.prop.js";
+/**
+ * Thumbnail — a framed picture at a FIXED HEIGHT and its OWN intrinsic width.
+ *
+ * That combination is the whole component. A wrapping row of screenshots holds portrait and
+ * landscape shots together; equal heights make the row read as one strip, and letting each
+ * width follow its own ratio is what keeps every shot uncropped.
+ *
+ * ## Why not the four components it is mistaken for
+ *
+ * - **`AspectRatio`** constrains a RATIO and spans `width: 100%`. Two different intrinsic ratios
+ *   in one row can only be forced into one number by letterboxing or cropping them, which is the
+ *   opposite of the requirement. It also draws no frame.
+ * - **`Avatar`** is an identity mark (with initials fallback), not a picture.
+ * - **`Card`** puts padding between its edge and the picture. The frame here is ON the image.
+ * - **`CardCover`** is the full-bleed media slot INSIDE a Card, not a standalone thumbnail.
+ *
+ * ## The frame is on the `<img>` itself
+ *
+ * No wrapper element. A wrapper would have to be told the image's width to hug it, which is
+ * exactly the number nobody has until the picture loads; a border on the replaced element is
+ * flush by construction at every ratio.
+ *
+ * ## Reserve the width before the picture arrives
+ *
+ * With an intrinsic width there is nothing to lay out until the bytes land, so a row of these
+ * reflows as they load. Pass the file's real pixel `width` and `height` attributes — the browser
+ * derives the ratio from them, and with the block size already fixed the frame takes its final
+ * width on the first paint (`<Thumbnail width={1280} height={800} … />`).
+ */
+export declare const Thumbnail: React.ForwardRefExoticComponent<Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt"> & {
+    src: string;
+    alt: string;
+    size?: import("./thumbnail.js").ThumbnailSizeProp;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLImageElement>>;

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

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const Thumbnail = React.forwardRef(
+  ({ size = "md", className, alt, ...props }, ref) => /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      "data-slot": "thumbnail",
+      "data-size": size,
+      alt,
+      className: cn("ui-thumbnail", className),
+      ...props
+    }
+  )
+);
+Thumbnail.displayName = "Thumbnail";
+export {
+  Thumbnail
+};

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