@godxjp/ui 23.2.1 → 23.4.0

package/dist/components/feedback/skeleton.js

@@ -1,5 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ImageIcon } from "lucide-react";
+import { ResponsiveGrid } from "../layout/responsive-grid.js";
 import { cn } from "../../lib/utils.js";
 import { tableCellPaddingClass, tableRowHeightClass } from "../../lib/control-styles.js";
 function measureStyle(width) {
@@ -169,6 +170,12 @@ function SkeletonRows({ rows = 6, columns = 4, className }) {
     j
   )) }, i)) });
 }
+function SkeletonForm({ columns = 1, fields = 6, active, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-form", className), "aria-busy": "true", children: /* @__PURE__ */ jsx(ResponsiveGrid, { columns, children: Array.from({ length: fields }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-form-field", children: [
+    /* @__PURE__ */ jsx(Skeleton, { active, className: "ui-skeleton-form-label" }),
+    /* @__PURE__ */ jsx(Skeleton, { active, className: "ui-skeleton-form-control" })
+  ] }, i)) }) });
+}
 function SkeletonTable({ rows = 8, columns = 5 }) {
   return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-table", "aria-busy": "true", children: [
     /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-table-head", tableCellPaddingClass, tableRowHeightClass), children: Array.from({ length: columns }).map((_, j) => /* @__PURE__ */ jsx(Skeleton, { className: cn("ui-skeleton-caption", j === 0 ? "w-1/5" : "flex-1") }, j)) }),
@@ -205,6 +212,7 @@ export {
   SkeletonAvatar,
   SkeletonButton,
   SkeletonDetail,
+  SkeletonForm,
   SkeletonImage,
   SkeletonInput,
   SkeletonNode,

package/dist/components/general/actions.d.ts

@@ -0,0 +1,59 @@
+import * as React from "react";
+import type { ActionsCopyProp, ActionsFeedbackProp, ActionsItemProp, ActionsProp } from "../../props/components/general.prop.js";
+export type { ActionsProp, ActionsProp as ActionsProps, ActionsItemsProp, ActionsItemProp, ActionsItemProp as ActionsItemProps, ActionsCopyProp, ActionsCopyProp as ActionsCopyProps, ActionsFeedbackProp, ActionsFeedbackProp as ActionsFeedbackProps, ActionsVariantProp, ActionsStatusProp, ActionsFeedbackValueProp, } from "../../props/components/general.prop.js";
+/**
+ * Actions — the strip of actions under an assistant message (Ant Design X `Actions`).
+ *
+ * ## What Ant X ships, measured
+ *
+ * `@ant-design/x@2.9.0`, `es/actions/Item.js`: each action is
+ * `<div className="…-item" onClick>` wrapping `<div className="…-icon">{item.icon}</div>`, with
+ * the label supplied only as a `Tooltip` title. Three consequences, all of them defects rather
+ * than choices: the strip cannot be reached by keyboard at all, the actions have no accessible
+ * name, and on a touch device — where `useMobile()` drops the Tooltip entirely — they have no
+ * visible name either.
+ *
+ * ## What this port does about it, while keeping the API
+ *
+ * `items`, `onClick({ item, key, keyPath, domEvent })`, `onItemClick` winning over `onClick`,
+ * `danger`, `subItems`, `actionRender`, `variant`, `fadeIn` / `fadeInLeft` — all Ant's, with Ant's
+ * semantics. What changes is what they render onto: a real `Button` per action carrying `label` as
+ * its accessible name AND its tooltip, inside a WAI-ARIA APG **Toolbar** — one tab stop for the
+ * whole strip, the logical arrows moving between the actions, `Home` / `End` at its ends. That is
+ * the same trade `Conversations` makes and for the same reason: a strip of eight actions under
+ * every message would otherwise be eight tab stops between the reader and the next message.
+ */
+export declare const Actions: React.ForwardRefExoticComponent<ActionsProp & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ActionsItem — one status-aware action (Ant Design X `Actions.Item`).
+ *
+ * It is a NAMED export rather than `Actions.Item`, because this library has no compound-static
+ * convention: `CardHeader`, `TabsList` and `DropdownMenuItem` are all separate exports, and one
+ * component attaching statics would be the only one of its kind.
+ *
+ * The status table is Ant's, from `es/actions/ActionsItem.js`: `loading` and `error` bring their
+ * own glyph, `running` takes `runningIcon`, anything else takes `defaultIcon`. What is added is
+ * that the status is ANNOUNCED — `aria-busy` while loading, and the state in the accessible name —
+ * because a glyph swap is a colour-and-shape-only signal (WCAG 1.4.1).
+ */
+export declare const ActionsItem: React.ForwardRefExoticComponent<ActionsItemProp & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * ActionsCopy — copy the message to the clipboard (Ant Design X `Actions.Copy`).
+ *
+ * Ant X hands this to antd's `Typography copyable`, which swaps the glyph to a tick for 3s. The
+ * tick is reproduced at the same 3s, and the change is also SPOKEN through a polite status region:
+ * a glyph that only changes shape tells a screen-reader user nothing about whether the copy
+ * worked, which is the one thing this control exists to report.
+ */
+export declare const ActionsCopy: React.ForwardRefExoticComponent<ActionsCopyProp & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * ActionsFeedback — the like / dislike pair (Ant Design X `Actions.Feedback`).
+ *
+ * `value` / `onChange` and the clear-on-second-click behaviour are Ant's, byte for byte. ONE
+ * rendering difference, and it is deliberate: Ant hides the opposite button once an opinion is
+ * recorded (`[default, like].includes(value) && likeNode`), so a reader who mis-clicked "dislike"
+ * finds no "like" button on the screen at all and has to guess that clicking dislike again brings
+ * it back. Both buttons stay here, and the recorded opinion is carried by `aria-pressed` — the APG
+ * toggle-button pattern, which states the value instead of removing its alternative.
+ */
+export declare const ActionsFeedback: React.ForwardRefExoticComponent<ActionsFeedbackProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/general/actions.js

@@ -0,0 +1,253 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Copy, MoreHorizontal, ThumbsDown, ThumbsUp, TriangleAlert } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../navigation/dropdown-menu.js";
+import { Button } from "./button.js";
+import { VisuallyHidden } from "./visually-hidden.js";
+function isRtl(element) {
+  return element?.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+}
+function LabelledIconButton({
+  label,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", size: "icon-sm", variant: "ghost", "aria-label": label, ...props, children }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: label })
+  ] });
+}
+const Actions = React.forwardRef(
+  ({ items, onClick, variant = "borderless", fadeIn, fadeInLeft, label, id, className, ...rest }, ref) => {
+    const { t } = useTranslation();
+    const nodes = React.useRef(/* @__PURE__ */ new Map());
+    const [focusKey, setFocusKey] = React.useState(null);
+    const navKeys = items.filter((item) => !item.actionRender).map((item) => item.key);
+    const tabStop = focusKey && navKeys.includes(focusKey) ? focusKey : navKeys[0];
+    const moveTo = (key) => {
+      if (!key) return;
+      setFocusKey(key);
+      nodes.current.get(key)?.focus();
+    };
+    const handleKeyDown = (key) => (event) => {
+      const rtl = isRtl(event.currentTarget);
+      const forward = rtl ? "ArrowLeft" : "ArrowRight";
+      const backward = rtl ? "ArrowRight" : "ArrowLeft";
+      const index = navKeys.indexOf(key);
+      if (event.key === forward) {
+        event.preventDefault();
+        moveTo(navKeys[(index + 1) % navKeys.length]);
+      } else if (event.key === backward) {
+        event.preventDefault();
+        moveTo(navKeys[(index - 1 + navKeys.length) % navKeys.length]);
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        moveTo(navKeys[0]);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        moveTo(navKeys[navKeys.length - 1]);
+      }
+    };
+    const dispatch = (item, keyPath, domEvent) => {
+      if (item.onItemClick) {
+        item.onItemClick(item);
+        return;
+      }
+      onClick?.({ item, key: keyPath[0], keyPath, domEvent });
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id,
+        role: "toolbar",
+        "aria-label": label ?? t("general.actions.label"),
+        "aria-orientation": "horizontal",
+        "data-slot": "actions",
+        "data-variant": variant,
+        "data-fade-in": fadeIn || fadeInLeft ? "" : void 0,
+        "data-fade-in-inline": fadeInLeft ? "" : void 0,
+        className: cn("ui-actions", className),
+        ...rest,
+        children: items.map((item) => {
+          if (item.actionRender) {
+            return /* @__PURE__ */ jsx(React.Fragment, { children: typeof item.actionRender === "function" ? item.actionRender(item) : item.actionRender }, item.key);
+          }
+          const name = item.label ?? item.key;
+          const shared = {
+            ref: (node) => {
+              if (node) nodes.current.set(item.key, node);
+              else nodes.current.delete(item.key);
+            },
+            tabIndex: tabStop === item.key ? 0 : -1,
+            onFocus: () => setFocusKey(item.key),
+            onKeyDown: handleKeyDown(item.key),
+            variant: item.danger ? "destructive" : "ghost"
+          };
+          if (item.subItems && item.subItems.length > 0) {
+            return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", size: "icon-sm", "aria-label": name, ...shared, children: item.icon ?? /* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": "true" }) }) }),
+              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: item.subItems.map((sub) => /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  variant: sub.danger ? "destructive" : void 0,
+                  onSelect: (event) => dispatch(
+                    sub,
+                    [sub.key, item.key],
+                    event
+                  ),
+                  children: [
+                    sub.icon,
+                    sub.label ?? sub.key
+                  ]
+                },
+                sub.key
+              )) })
+            ] }, item.key);
+          }
+          return /* @__PURE__ */ jsx(
+            LabelledIconButton,
+            {
+              label: name,
+              onClick: (event) => dispatch(item, [item.key], event),
+              ...shared,
+              children: item.icon
+            },
+            item.key
+          );
+        })
+      }
+    );
+  }
+);
+Actions.displayName = "Actions";
+const ActionsItem = React.forwardRef(
+  ({ status = "default", defaultIcon, runningIcon, label, id, className, ...rest }, ref) => {
+    const { t } = useTranslation();
+    const base = label ?? t("general.actions.label");
+    const name = status === "default" ? base : `${base} \xB7 ${t(`general.actions.status.${status}`)}`;
+    const glyph = status === "loading" ? null : status === "error" ? /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": "true" }) : status === "running" ? runningIcon ?? defaultIcon : defaultIcon;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          id,
+          type: "button",
+          size: "icon-sm",
+          variant: "ghost",
+          "data-slot": "actions-item",
+          "data-status": status,
+          "aria-label": name,
+          "aria-busy": status === "loading" || void 0,
+          loading: status === "loading",
+          className: cn("ui-actions-item", className),
+          ...rest,
+          children: glyph
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: name })
+    ] });
+  }
+);
+ActionsItem.displayName = "ActionsItem";
+const ActionsCopy = React.forwardRef(
+  ({ text = "", icon, label, onCopy, id, className, ...rest }, ref) => {
+    const { t } = useTranslation();
+    const [copied, setCopied] = React.useState(false);
+    const timer = React.useRef(void 0);
+    React.useEffect(() => () => clearTimeout(timer.current), []);
+    const name = label ?? t("general.actions.copy");
+    const run = async () => {
+      try {
+        await navigator.clipboard?.writeText(text);
+      } catch {
+        return;
+      }
+      onCopy?.(text);
+      setCopied(true);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 3e3);
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref,
+            id,
+            type: "button",
+            size: "icon-sm",
+            variant: "ghost",
+            "data-slot": "actions-copy",
+            "data-copied": copied ? "" : void 0,
+            "aria-label": name,
+            className: cn("ui-actions-copy", className),
+            onClick: run,
+            ...rest,
+            children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : icon ?? /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: name })
+      ] }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { role: "status", "aria-live": "polite", children: copied ? t("general.actions.copied") : "" })
+    ] });
+  }
+);
+ActionsCopy.displayName = "ActionsCopy";
+const ActionsFeedback = React.forwardRef(
+  ({ value = "default", onChange, label, likeLabel, dislikeLabel, id, className, ...rest }, ref) => {
+    const { t } = useTranslation();
+    const toggle = (next) => onChange?.(value === next ? "default" : next);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id,
+        role: "group",
+        "aria-label": label ?? t("general.actions.feedback"),
+        "data-slot": "actions-feedback",
+        className: cn("ui-actions-feedback", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            LabelledIconButton,
+            {
+              label: likeLabel ?? t("general.actions.like"),
+              "aria-pressed": value === "like",
+              "data-pressed": value === "like" ? "" : void 0,
+              onClick: () => toggle("like"),
+              children: /* @__PURE__ */ jsx(ThumbsUp, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            LabelledIconButton,
+            {
+              label: dislikeLabel ?? t("general.actions.dislike"),
+              "aria-pressed": value === "dislike",
+              "data-pressed": value === "dislike" ? "" : void 0,
+              onClick: () => toggle("dislike"),
+              children: /* @__PURE__ */ jsx(ThumbsDown, { "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ActionsFeedback.displayName = "ActionsFeedback";
+export {
+  Actions,
+  ActionsCopy,
+  ActionsFeedback,
+  ActionsItem
+};

package/dist/components/general/activity.js

@@ -1,3 +1,4 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";

package/dist/components/general/button.js

@@ -6,6 +6,7 @@ import { cva } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { numberFormat } from "../../lib/intl-cache.js";
 const buttonVariants = cva("ui-button", {
   variants: {
     variant: {
@@ -78,7 +79,7 @@ const Button = React.forwardRef(
       loadingText ?? children
     ] }) : children;
     const showCount = !asChild && count != null && (count !== 0 || showZero);
-    const countLabel = showCount && count != null && count > overflowCount ? `${new Intl.NumberFormat(locale).format(overflowCount)}+` : count != null ? new Intl.NumberFormat(locale).format(count) : "";
+    const countLabel = showCount && count != null && count > overflowCount ? `${numberFormat(locale).format(overflowCount)}+` : count != null ? numberFormat(locale).format(count) : "";
     const countNode = showCount ? /* @__PURE__ */ jsx("span", { "data-slot": "button-count", className: "ui-button-count", children: countLabel }) : null;
     return /* @__PURE__ */ jsx(
       Comp,

package/dist/components/general/float-button.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { FloatButtonBackTopProp, FloatButtonGroupProp, FloatButtonShapeProp, FloatButtonTooltipProp, FloatButtonTypeProp } from "../../props/components/general.prop.js";
+export type { FloatButtonBackTopProp, FloatButtonBackTopProp as FloatButtonBackTopProps, FloatButtonBadgeProp, FloatButtonGroupProp, FloatButtonGroupProp as FloatButtonGroupProps, FloatButtonPlacementProp, FloatButtonProp, FloatButtonProp as FloatButtonProps, FloatButtonShapeProp, FloatButtonTooltipProp, FloatButtonTriggerProp, FloatButtonTypeProp, } from "../../props/components/general.prop.js";
+/**
+ * FloatButton.Group — a stack of corner actions, optionally behind one trigger.
+ *
+ * Two modes, and `trigger` is the switch, exactly as in antd: WITHOUT it every child is visible and
+ * no trigger is drawn; WITH it the children collapse behind a trigger that opens them on click or
+ * on hover.
+ */
+declare function FloatButtonGroup({ children, trigger, open, onOpenChange, closeIcon, placement, shape, type, icon, disabled, className, onClick, ...rest }: FloatButtonGroupProp): React.JSX.Element;
+/**
+ * FloatButton.BackTop — the corner action that returns a scroll container to the top.
+ *
+ * `target` is antd's, and it is the answer to the objection that a document-bound BackTop competes
+ * with a shell that owns its own scroll: pass `() => element` and this watches that element, not
+ * the document. Under `prefers-reduced-motion` the scroll is instant rather than tweened
+ * (WCAG 2.3.3), which is antd's behaviour too.
+ */
+declare function FloatButtonBackTop({ visibilityHeight, target, duration, showProgress, onClick, icon, tooltip, className, ...rest }: FloatButtonBackTopProp): React.JSX.Element | null;
+/**
+ * The compound, exactly as antd exports it: one name, two sub-parts on it. A consumer porting a
+ * screen writes `<FloatButton.Group>` / `<FloatButton.BackTop>` unchanged.
+ */
+export declare const FloatButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "content" | "type"> & {
+    icon?: import("../../props/index.js").ChildrenProp;
+    description?: import("../../props/index.js").DescriptionProp;
+    content?: import("../../props/index.js").ChildrenProp;
+    type?: FloatButtonTypeProp;
+    shape?: FloatButtonShapeProp;
+    tooltip?: import("../../props/index.js").ChildrenProp | FloatButtonTooltipProp;
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    badge?: import("./float-button.js").FloatButtonBadgeProp;
+    disabled?: import("../../props/index.js").DisabledProp;
+    htmlType?: "button" | "submit" | "reset";
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLElement>> & {
+    Group: typeof FloatButtonGroup;
+    BackTop: typeof FloatButtonBackTop;
+};