@godxjp/ui 23.2.1 → 23.4.0

package/dist/components/data-entry/attachments.js

@@ -0,0 +1,322 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { FileIcon, ImagePlus, Plus, X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { formatBytes } from "../../lib/format.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { Progress } from "../data-display/progress.js";
+import { createUploadItem } from "./upload-types.js";
+import { readDroppedFiles } from "./upload-files.js";
+const AttachmentContext = React.createContext({ disabled: false });
+function toAttachmentItem(item) {
+  const status = item.status === "uploading" ? "uploading" : item.status === "done" ? "done" : item.status === "error" ? "error" : item.status === "removed" ? "removed" : void 0;
+  return {
+    uid: item.uid,
+    name: item.name,
+    size: item.size,
+    status,
+    percent: item.percent,
+    url: item.url,
+    thumbUrl: item.previewUrl,
+    originFileObj: item.file,
+    response: item.response,
+    error: item.error
+  };
+}
+function resolvePlaceholder(placeholder, type) {
+  if (!placeholder) return {};
+  return typeof placeholder === "function" ? placeholder(type) : placeholder;
+}
+function fileMatchesAccept(file, accept) {
+  if (!accept) return true;
+  return accept.split(",").some((rule) => {
+    const trimmed = rule.trim().toLowerCase();
+    if (trimmed.endsWith("/*")) return file.type.toLowerCase().startsWith(trimmed.slice(0, -1));
+    return file.type.toLowerCase() === trimmed || trimmed.startsWith(".") && file.name.toLowerCase().endsWith(trimmed);
+  });
+}
+function PlaceholderUploader({
+  type,
+  placeholder,
+  onOpen,
+  onFiles,
+  className,
+  style,
+  hidden
+}) {
+  const { t } = useTranslation();
+  const { disabled } = React.useContext(AttachmentContext);
+  const [dragActive, setDragActive] = React.useState(false);
+  if (hidden) return null;
+  const title = placeholder.title ?? t("dataEntry.attachments.placeholderTitle");
+  const description = placeholder.description ?? t("dataEntry.attachments.placeholderDescription");
+  const icon = placeholder.icon ?? /* @__PURE__ */ jsx(ImagePlus, { "aria-hidden": "true" });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("ui-attachments-placeholder", className),
+      style,
+      "data-drag-active": dragActive ? "true" : void 0,
+      "aria-hidden": disabled ? true : void 0,
+      onDragEnter: (event) => {
+        event.preventDefault();
+        if (!disabled) setDragActive(true);
+      },
+      onDragOver: (event) => event.preventDefault(),
+      onDragLeave: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setDragActive(false);
+      },
+      onDrop: async (event) => {
+        event.preventDefault();
+        setDragActive(false);
+        if (disabled) return;
+        const files = await readDroppedFiles(event.dataTransfer, false);
+        if (files.length) onFiles(files);
+      },
+      onClick: () => {
+        if (!disabled) onOpen();
+      },
+      onKeyDown: (event) => {
+        if (disabled) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onOpen();
+        }
+      },
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": String(title),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ui-attachments-placeholder-icon", children: icon }),
+        title ? /* @__PURE__ */ jsx("span", { className: "ui-attachments-placeholder-title", children: title }) : null,
+        description ? /* @__PURE__ */ jsx("span", { className: "ui-attachments-placeholder-description", children: description }) : null,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataEntry.attachments.dropLabel", { type }) })
+      ]
+    }
+  );
+}
+function AttachmentCard({
+  item,
+  description,
+  onRemove,
+  classNames
+}) {
+  const { t } = useTranslation();
+  const { disabled } = React.useContext(AttachmentContext);
+  const preview = item.thumbUrl ?? item.url;
+  const desc = description ?? item.description ?? (item.status === "uploading" ? `${item.percent ?? 0}%` : item.status === "error" ? typeof item.response === "string" ? item.response : t("dataEntry.attachments.error") : item.size ? formatBytes(item.size) : "");
+  return /* @__PURE__ */ jsxs("li", { className: cn("ui-attachments-card", classNames?.card, classNames?.file), children: [
+    preview ? /* @__PURE__ */ jsx("img", { src: preview, alt: "", className: "ui-attachments-card-preview", "aria-hidden": "true" }) : /* @__PURE__ */ jsx("span", { className: "ui-attachments-card-placeholder", "aria-hidden": "true", children: /* @__PURE__ */ jsx(FileIcon, {}) }),
+    (item.status === "uploading" || item.status === "error") && /* @__PURE__ */ jsx("div", { className: "ui-attachments-card-overlay", children: item.status === "uploading" && item.percent != null ? /* @__PURE__ */ jsx(Progress, { value: item.percent, "aria-label": t("dataEntry.attachments.uploading") }) : /* @__PURE__ */ jsx(Text, { size: "xs", children: String(desc) }) }),
+    desc && item.status !== "uploading" && item.status !== "error" ? /* @__PURE__ */ jsx("div", { className: "ui-attachments-card-meta", children: desc }) : null,
+    !disabled && onRemove ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-xs",
+        className: "ui-attachments-card-remove",
+        "aria-label": t("dataEntry.attachments.remove", { name: item.name }),
+        onClick: (event) => {
+          event.stopPropagation();
+          onRemove();
+        },
+        children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+      }
+    ) : null
+  ] });
+}
+const Attachments = React.forwardRef(
+  ({
+    className,
+    rootClassName,
+    classNames = {},
+    styles = {},
+    items: controlledItems,
+    onChange,
+    onRemove,
+    overflow,
+    placeholder,
+    getDropContainer,
+    disabled = false,
+    maxCount,
+    accept,
+    multiple,
+    children
+  }, ref) => {
+    const { t } = useTranslation();
+    const containerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const [internalItems, setInternalItems] = React.useState([]);
+    const items = controlledItems ?? internalItems;
+    const setItems = React.useCallback(
+      (next, file) => {
+        if (controlledItems === void 0) setInternalItems(next);
+        onChange?.({ file, fileList: next });
+      },
+      [controlledItems, onChange]
+    );
+    const openPicker = React.useCallback(() => {
+      inputRef.current?.click();
+    }, []);
+    const dispatchFiles = React.useCallback(
+      (files) => {
+        const accepted = files.filter((file) => fileMatchesAccept(file, accept));
+        if (!accepted.length) return;
+        const room = maxCount == null ? accepted.length : Math.max(0, maxCount - items.length);
+        const picked = accepted.slice(0, room);
+        const next = [
+          ...items,
+          ...picked.map((file) => {
+            const uploadItem = createUploadItem(file);
+            return toAttachmentItem(uploadItem);
+          })
+        ];
+        const last = next[next.length - 1];
+        if (last) setItems(next, last);
+      },
+      [accept, items, maxCount, setItems]
+    );
+    React.useImperativeHandle(ref, () => ({
+      nativeElement: containerRef.current,
+      fileNativeElement: inputRef.current,
+      upload: (file) => dispatchFiles([file]),
+      select: (options) => {
+        const input = inputRef.current;
+        if (!input) return;
+        input.multiple = options?.multiple ?? false;
+        input.accept = options?.accept ?? accept ?? "";
+        input.click();
+      }
+    }));
+    const handleRemove = async (item) => {
+      const ret = await Promise.resolve(typeof onRemove === "function" ? onRemove(item) : onRemove);
+      if (ret === false) return;
+      const next = items.filter((entry) => entry.uid !== item.uid);
+      setItems(next, { ...item, status: "removed" });
+    };
+    const showExtension = !disabled && (maxCount == null || maxCount > items.length) && items.length > 0;
+    const inlinePlaceholder = resolvePlaceholder(placeholder, "inline");
+    const dropPlaceholder = resolvePlaceholder(placeholder, "drop");
+    const hasFiles = items.length > 0;
+    const fileInput = /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        className: "ui-attachments-input",
+        accept,
+        multiple: multiple ?? (maxCount == null || maxCount > 1),
+        disabled,
+        "aria-label": t("dataEntry.attachments.inputLabel"),
+        onChange: (event) => {
+          const files = event.target.files ? Array.from(event.target.files) : [];
+          event.target.value = "";
+          dispatchFiles(files);
+        }
+      }
+    );
+    if (children) {
+      return /* @__PURE__ */ jsxs(AttachmentContext.Provider, { value: { disabled }, children: [
+        fileInput,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            className: cn("ui-attachments", rootClassName, classNames.root),
+            style: styles.root,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PlaceholderUploader,
+          {
+            type: "drop",
+            placeholder: dropPlaceholder,
+            onOpen: openPicker,
+            onFiles: dispatchFiles,
+            className: classNames.placeholder,
+            style: styles.placeholder
+          }
+        )
+      ] });
+    }
+    const dropHost = getDropContainer?.() ?? containerRef.current;
+    return /* @__PURE__ */ jsx(AttachmentContext.Provider, { value: { disabled }, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: cn("ui-attachments", className, rootClassName, classNames.root),
+        style: styles.root,
+        dir: "auto",
+        children: [
+          fileInput,
+          hasFiles ? /* @__PURE__ */ jsxs(
+            "ul",
+            {
+              className: cn("ui-attachments-list", classNames.list),
+              style: styles.list,
+              "data-overflow": overflow ?? "wrap",
+              children: [
+                items.map((item) => /* @__PURE__ */ jsx(
+                  AttachmentCard,
+                  {
+                    item,
+                    onRemove: () => handleRemove(item),
+                    classNames
+                  },
+                  item.uid
+                )),
+                showExtension ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn("ui-attachments-upload-btn", classNames.upload),
+                    style: styles.upload,
+                    disabled,
+                    "aria-label": t("dataEntry.attachments.add"),
+                    onClick: openPicker,
+                    children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" })
+                  }
+                ) }) : null
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            PlaceholderUploader,
+            {
+              type: "inline",
+              placeholder: inlinePlaceholder,
+              onOpen: openPicker,
+              onFiles: dispatchFiles,
+              className: classNames.placeholder,
+              style: hasFiles ? { display: "none" } : styles.placeholder,
+              hidden: hasFiles
+            }
+          ),
+          dropHost ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ui-attachments-drop-layer",
+              "data-active": void 0,
+              "aria-hidden": "true",
+              onDragOver: (event) => event.preventDefault(),
+              onDrop: async (event) => {
+                event.preventDefault();
+                const files = await readDroppedFiles(event.dataTransfer, false);
+                dispatchFiles(files);
+              }
+            }
+          ) : null
+        ]
+      }
+    ) });
+  }
+);
+Attachments.displayName = "Attachments";
+export {
+  Attachments
+};

package/dist/components/data-entry/date-picker.js

@@ -22,6 +22,7 @@ import { CONTROL_STATUS_CHROME_CLASS, CONTROL_VARIANT_CHROME_CLASS } from "./con
 import { Input } from "./input.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Calendar } from "./calendar.js";
+import { dateTimeFormat, numberFormat } from "../../lib/intl-cache.js";
 const ISO_HINT = "yyyy-mm-dd";
 const PERIOD_PICKERS = /* @__PURE__ */ new Set(["month", "quarter", "year"]);
 const PERIOD_COLUMNS = 3;
@@ -49,6 +50,7 @@ function DatePicker(props) {
     disabledDate,
     cellRender,
     allowClear,
+    triggerLabel,
     format: formatProp,
     parseFormat,
     minDate,
@@ -296,13 +298,9 @@ function DatePicker(props) {
     (index) => index < periodCells
   );
   const pageStep = picker === "year" ? periodCells : 1;
-  const prevDisabled = !pickerDateAllowed(
-    periodPage(viewYear - pageStep)[periodCells - 1],
-    minimum,
-    void 0
-  );
-  const nextDisabled = !pickerDateAllowed(periodPage(viewYear + pageStep)[0], void 0, maximum);
-  const periodLabel = (date, index) => picker === "year" ? new Intl.DateTimeFormat(locale, { year: "numeric" }).format(date) : picker === "quarter" ? t("dataEntry.datePicker.quarter", { quarter: index + 1 }) ?? `Q${index + 1}` : new Intl.DateTimeFormat(locale, { month: "short" }).format(date);
+  const prevDisabled = () => !pickerDateAllowed(periodPage(viewYear - pageStep)[periodCells - 1], minimum, void 0);
+  const nextDisabled = () => !pickerDateAllowed(periodPage(viewYear + pageStep)[0], void 0, maximum);
+  const periodLabel = (date, index) => picker === "year" ? dateTimeFormat(locale, { year: "numeric" }).format(date) : picker === "quarter" ? t("dataEntry.datePicker.quarter", { quarter: index + 1 }) ?? `Q${index + 1}` : dateTimeFormat(locale, { month: "short" }).format(date);
   const periodPick = (date) => {
     if (!range) {
       choose(date);
@@ -318,7 +316,7 @@ function DatePicker(props) {
     choose({ from: pendingFrom, to: date });
     if (!needConfirm) setOpen(false);
   };
-  const periodPanel = /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-panel", children: [
+  const renderPeriodPanel = () => /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-panel", children: [
     /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-nav", children: [
       /* @__PURE__ */ jsx(
         Button,
@@ -326,21 +324,21 @@ function DatePicker(props) {
           type: "button",
           variant: "outline",
           size: "icon-sm",
-          disabled: prevDisabled,
+          disabled: prevDisabled(),
           "aria-label": t("dataEntry.monthPicker.previousYear") ?? "Previous year",
           className: "ui-month-picker-nav-button",
           onClick: () => setViewYear(viewYear - pageStep),
           children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ui-month-picker-icon", "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: "ui-month-picker-nav-label", "aria-live": "polite", children: new Intl.NumberFormat(locale, { useGrouping: false }).format(viewYear) }),
+      /* @__PURE__ */ jsx("span", { className: "ui-month-picker-nav-label", "aria-live": "polite", children: numberFormat(locale, { useGrouping: false }).format(viewYear) }),
       /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
           variant: "outline",
           size: "icon-sm",
-          disabled: nextDisabled,
+          disabled: nextDisabled(),
           "aria-label": t("dataEntry.monthPicker.nextYear") ?? "Next year",
           className: "ui-month-picker-nav-button",
           onClick: () => setViewYear(viewYear + pageStep),
@@ -390,7 +388,7 @@ function DatePicker(props) {
     showClose,
     onClose: () => setOpen(false)
   };
-  const dayPanel = range ? /* @__PURE__ */ jsx(
+  const renderDayPanel = () => range ? /* @__PURE__ */ jsx(
     Calendar,
     {
       mode: "range",
@@ -458,7 +456,7 @@ function DatePicker(props) {
       type: "button",
       disabled: allDisabled,
       tabIndex: -1,
-      "aria-label": (isPeriod ? t("dataEntry.monthPicker.openGrid") : range ? t("dataEntry.dateRangePicker.openCalendar") : t("dataEntry.datePicker.openCalendar")) ?? "Open calendar",
+      "aria-label": triggerLabel ?? (isPeriod ? t("dataEntry.monthPicker.openGrid") : range ? t("dataEntry.dateRangePicker.openCalendar") : t("dataEntry.datePicker.openCalendar")) ?? "Open calendar",
       className: range ? "text-muted-foreground hover:text-foreground shrink-0" : "ui-control-inline-affix-action",
       children: /* @__PURE__ */ jsx(
         CalendarIcon,
@@ -502,7 +500,7 @@ function DatePicker(props) {
           },
           index
         )) }) : null,
-        isPeriod ? periodPanel : dayPanel,
+        isPeriod ? renderPeriodPanel() : renderDayPanel(),
         showTime ? /* @__PURE__ */ jsx(Flex, { pad: "sm", children: /* @__PURE__ */ jsx(
           TimePicker,
           {

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

@@ -69,3 +69,5 @@ export { TimeRangePicker } from "./time-range-picker.js";
 export type { TimeRangePickerProps } from "./time-range-picker.js";
 export type { UploadRequestContext, UploadResult, UploadRejection } from "./upload-types.js";
 export type { UploadItemActions } from "./upload-types.js";
+export { Attachments } from "./attachments.js";
+export type { AttachmentsProp, AttachmentsProps, AttachmentsItemProp, AttachmentsPlaceholderProp, AttachmentsOverflowProp, AttachmentsRefProp, } from "./attachments.js";

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

@@ -59,7 +59,9 @@ import { TagInput } from "./tag-input.js";
 import { Segmented } from "./segmented.js";
 import { BranchScopePicker } from "./branch-scope-picker.js";
 import { TimeRangePicker } from "./time-range-picker.js";
+import { Attachments } from "./attachments.js";
 export {
+  Attachments,
   BranchScopePicker,
   Calendar,
   Cascader,

package/dist/components/data-entry/number-input.js

@@ -7,6 +7,7 @@ import { cn } from "../../lib/utils.js";
 import { pickFieldA11y } from "../../lib/field-a11y.js";
 import { Button } from "../general/button.js";
 import { Input } from "./input.js";
+import { numberFormat } from "../../lib/intl-cache.js";
 function decimalsOf(n) {
   if (!Number.isFinite(n)) return 0;
   const s = String(n);
@@ -77,7 +78,7 @@ const NumberInput = React.forwardRef(
     const numericValue = isControlled ? controlledValue ?? null : internal;
     const effectivePrecision = precision ?? decimalsOf(step);
     const intlFormatter = React.useMemo(
-      () => new Intl.NumberFormat(locale, {
+      () => numberFormat(locale, {
         minimumFractionDigits: 0,
         maximumFractionDigits: Math.max(effectivePrecision, 0),
         useGrouping: false

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { ToneProp } from "../../props/vocabulary/index.js";
-import type { AlertDialogProp } from "../../props/components/feedback.prop.js";
-export type { AlertDialogProp, AlertDialogProp as AlertDialogProps, } from "../../props/components/feedback.prop.js";
+import type { AlertDialogProp, DialogContentProp, DialogProp } from "../../props/components/feedback.prop.js";
+export type { AlertDialogProp, AlertDialogProp as AlertDialogProps, DialogProp, DialogProp as DialogProps, DialogContentProp, DialogContentProp as DialogContentProps, } from "../../props/components/feedback.prop.js";
 interface OverlayOpenProps {
     /** Trạng thái mở, có kiểm soát. */
     open?: boolean;
@@ -10,7 +10,7 @@ interface OverlayOpenProps {
     /** Gọi khi trạng thái mở đổi. */
     onOpenChange?: (open: boolean) => void;
 }
-interface DialogRootProps extends OverlayOpenProps {
+interface DialogRootProps extends OverlayOpenProps, Pick<DialogProp, "variant"> {
     /**
      * Giữ tên prop của Radix. RAC không có kiểu overlay không-modal: `Modal` LUÔN khoá cuộn và ẩn
      * nền khỏi trình đọc màn hình, nên `modal={false}` không còn tắt được điều đó.
@@ -19,7 +19,7 @@ interface DialogRootProps extends OverlayOpenProps {
     children?: React.ReactNode;
 }
 /** `data-slot="dialog"` cũ nằm trên Root của Radix, thứ không dựng thẻ nào — nó chưa từng ra DOM. */
-declare function DialogRoot({ children, modal: _modal, ...openProps }: DialogRootProps): React.JSX.Element;
+declare function DialogRoot({ children, modal: _modal, variant, ...openProps }: DialogRootProps): React.JSX.Element;
 interface DialogTriggerProps extends React.ComponentPropsWithRef<"button"> {
     /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
     asChild?: boolean;
@@ -48,7 +48,7 @@ declare function DialogOverlay(_props: DialogOverlayProps): null;
 declare namespace DialogOverlay {
     var displayName: string;
 }
-interface DialogContentProps extends Omit<React.ComponentPropsWithRef<"section">, "role"> {
+interface DialogContentProps extends Omit<React.ComponentPropsWithRef<"section">, "role">, Pick<DialogContentProp, "variant"> {
     showClose?: boolean;
     showCloseButton?: boolean;
     overlayClassName?: string;
@@ -57,7 +57,7 @@ interface DialogContentProps extends Omit<React.ComponentPropsWithRef<"section">
     /** Giữ tên prop của Radix — xem `useCloseAutoFocus`. */
     onCloseAutoFocus?: (event: Event) => void;
 }
-declare function DialogContent({ className, children, showClose, showCloseButton: showCloseButtonProp, overlayClassName, forceMount: _forceMount, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogContent({ className, children, showClose, showCloseButton: showCloseButtonProp, overlayClassName, variant: variantProp, forceMount: _forceMount, ...props }: DialogContentProps): React.JSX.Element;
 declare namespace DialogContent {
     var displayName: string;
 }
@@ -125,7 +125,10 @@ interface DialogActionProps extends React.ComponentPropsWithRef<"button"> {
     /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
     asChild?: boolean;
 }
-/** Confirm mode — primary action (maps to Radix AlertDialogAction). */
+/**
+ * Confirm mode — primary action (maps to Radix AlertDialogAction). Nhấn mạnh đọc từ `variant` của
+ * hộp thoại: đây là phần thứ ba của một-prop-ba-việc ở đầu tệp, và là chỗ antd đặt `okType`.
+ */
 declare function DialogAction({ asChild, className, onClick, ...props }: DialogActionProps): React.JSX.Element;
 declare namespace DialogAction {
     var displayName: string;

package/dist/components/feedback/dialog.js

@@ -40,6 +40,7 @@ function useDialogOpenState(component) {
   return state;
 }
 const DialogLabelContext = React.createContext(null);
+const DialogVariantContext = React.createContext("default");
 const OVERLAY_CLASS = "ui-dialog-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0";
 const CONTENT_CLASS = "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none";
 function DialogShell({
@@ -89,9 +90,14 @@ function DialogShell({
     }
   );
 }
-function DialogRoot({ children, modal: _modal, ...openProps }) {
+function DialogRoot({
+  children,
+  modal: _modal,
+  variant = "default",
+  ...openProps
+}) {
   const state = useOverlayOpenState(openProps);
-  return /* @__PURE__ */ jsx(DialogOpenContext.Provider, { value: state, children });
+  return /* @__PURE__ */ jsx(DialogOpenContext.Provider, { value: state, children: /* @__PURE__ */ jsx(DialogVariantContext.Provider, { value: variant, children }) });
 }
 function DialogTrigger({ asChild, onClick, ...props }) {
   const state = useDialogOpenState("DialogTrigger");
@@ -139,24 +145,39 @@ function DialogContent({
   showClose,
   showCloseButton: showCloseButtonProp,
   overlayClassName,
+  variant: variantProp,
   forceMount: _forceMount,
   ...props
 }) {
   const { t } = useTranslation();
-  const showCloseButton = showCloseButtonProp ?? showClose ?? true;
-  return /* @__PURE__ */ jsxs(DialogShell, { isDismissable: true, className, overlayClassName, ...props, children: [
-    children,
-    showCloseButton ? /* @__PURE__ */ jsxs(
-      DialogClose,
-      {
-        className: "ui-focus-ring transition-opacity disabled:pointer-events-none",
-        children: [
-          /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
-        ]
-      }
-    ) : null
-  ] });
+  const inheritedVariant = React.useContext(DialogVariantContext);
+  const variant = variantProp ?? inheritedVariant;
+  const isDestructive = variant === "destructive";
+  const showCloseButton = showCloseButtonProp ?? showClose ?? !isDestructive;
+  return /* @__PURE__ */ jsx(DialogVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxs(
+    DialogShell,
+    {
+      role: isDestructive ? "alertdialog" : "dialog",
+      isDismissable: !isDestructive,
+      "data-variant": variant,
+      className,
+      overlayClassName,
+      ...props,
+      children: [
+        children,
+        showCloseButton ? /* @__PURE__ */ jsxs(
+          DialogClose,
+          {
+            className: "ui-focus-ring transition-opacity disabled:pointer-events-none",
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
+            ]
+          }
+        ) : null
+      ]
+    }
+  ) });
 }
 DialogContent.displayName = "DialogContent";
 const DialogHeader = ({
@@ -312,12 +333,14 @@ const AlertDialogTitle = DialogTitle;
 const AlertDialogDescription = DialogDescription;
 function DialogAction({ asChild, className, onClick, ...props }) {
   const state = useDialogOpenState("DialogAction");
+  const variant = React.useContext(DialogVariantContext);
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(
     Comp,
     {
       type: "button",
-      className: cn(buttonVariants(), className),
+      "data-variant": asChild ? void 0 : variant,
+      className: cn(buttonVariants({ variant }), className),
       ...props,
       onClick: chain(onClick, () => {
         state.setOpen(false);

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

@@ -1,13 +1,13 @@
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogBody, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogAction, DialogCancel, AlertDialogRoot, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialog, } from "./dialog.js";
-export type { AlertDialogProp, AlertDialogProps } from "./dialog.js";
+export type { AlertDialogProp, AlertDialogProps, DialogProp, DialogProps, DialogContentProp, DialogContentProps, } from "./dialog.js";
 export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, useSheetResponsiveMode, } from "./sheet.js";
 export type { SheetContentProps, SheetPresentation, SheetResponsiveProp } from "./sheet.js";
 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, 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 { Skeleton, SkeletonForm, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat, SkeletonArticle, SkeletonAvatar, SkeletonButton, SkeletonInput, SkeletonNode, SkeletonImage, } from "./skeleton.js";
+export type { SkeletonProp, SkeletonProps, SkeletonWidth, SkeletonArticleProp, SkeletonArticleProps, SkeletonAvatarProp, SkeletonAvatarProps, SkeletonButtonProp, SkeletonButtonProps, SkeletonFormProp, SkeletonFormProps, 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

@@ -44,6 +44,7 @@ import { Toaster } from "./sonner.js";
 import { toast } from "./use-toast.js";
 import {
   Skeleton,
+  SkeletonForm,
   SkeletonRows,
   SkeletonTable,
   SkeletonDetail,
@@ -114,6 +115,7 @@ export {
   SkeletonAvatar,
   SkeletonButton,
   SkeletonDetail,
+  SkeletonForm,
   SkeletonImage,
   SkeletonInput,
   SkeletonNode,

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

@@ -1,6 +1,6 @@
 import * as React from "react";
-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";
+import type { SkeletonArticleProp, SkeletonAvatarProp, SkeletonButtonProp, SkeletonFormProp, SkeletonImageProp, SkeletonInputProp, SkeletonNodeProp, SkeletonProp } from "../../props/components/feedback.prop.js";
+export type { SkeletonProp, SkeletonProp as SkeletonProps, SkeletonFormProp, SkeletonFormProp as SkeletonFormProps, 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;
@@ -39,6 +39,15 @@ interface SkeletonRowsProps {
 }
 /** Skeleton for a flat list of rows (use inside a Card or section). */
 export declare function SkeletonRows({ rows, columns, className }: SkeletonRowsProps): React.JSX.Element;
+/**
+ * Skeleton of a `Form columns={N}` — label + control PAIRS on the form's own grid (gh#552).
+ *
+ * It renders through `ResponsiveGrid` with the SAME `columns` value the form takes, so the two
+ * share one breakpoint ladder rather than two that agree today. `SkeletonRows` could get the column
+ * count right and never the inside of a cell: a form field is a short label stacked on a full-width
+ * control, and a flat line list is neither.
+ */
+export declare function SkeletonForm({ columns, fields, active, className }: SkeletonFormProp): React.JSX.Element;
 /** Skeleton matching the DataTable layout — header row + N body rows. */
 export declare function SkeletonTable({ rows, columns }: SkeletonRowsProps): React.JSX.Element;
 /** Skeleton matching a Card detail layout — title + 6 metadata rows. */