@godxjp/ui 19.6.0 → 20.1.0

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

@@ -1,8 +1,14 @@
 import * as React from "react";
 import type { DescriptionsLayoutProp } from "../../props/vocabulary/interaction.prop.js";
+import type { DescriptionsColumnProp, DescriptionsItemsProp, DescriptionsSpanProp } from "../../props/vocabulary/data.prop.js";
 export type { DescriptionsLayoutProp };
 export interface DescriptionsProps {
-    columns?: 1 | 2 | 3;
+    /**
+     * Column count. A plain `1 | 2 | 3` keeps this library's own responsive ladder exactly as it
+     * was; any other number, or antd's `{ sm, md, lg, xl }` responsive object, drives the
+     * token-published grid instead (antd `column`).
+     */
+    columns?: DescriptionsColumnProp;
     /** Label placement within each item. Default `vertical` (label over value). */
     layout?: DescriptionsLayoutProp;
     /**
@@ -10,19 +16,34 @@ export interface DescriptionsProps {
      * it there would read as a mistake, exactly like `Form`'s own contract.
      */
     labelAlign?: "start" | "end";
+    /**
+     * Draw the grid as a bordered table (antd `bordered`): an outer frame, a rule between every
+     * cell, and a shaded label cell. Colour and rhythm come from the `--descriptions-*` tokens.
+     */
+    bordered?: boolean;
+    /**
+     * Declarative items (antd `items`) — an alternative to composing `Descriptions.Item` children.
+     * Both work; `items` renders first, then any children after it.
+     */
+    items?: DescriptionsItemsProp;
     className?: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
-export declare function Descriptions({ columns, layout, labelAlign, className, children, }: DescriptionsProps): React.JSX.Element;
+export declare function Descriptions({ columns, layout, labelAlign, bordered, items, className, children, }: DescriptionsProps): React.JSX.Element;
 export declare namespace Descriptions {
-    var Item: ({ label, mono, span, className, children, }: DescriptionsItemProps) => React.JSX.Element;
+    export { DescriptionsItem as Item };
 }
 export interface DescriptionsItemProps {
     label: React.ReactNode;
     /** Use mono spacing for IDs, paths, JSON. */
     mono?: boolean;
-    /** Span full row(s) when value is long. */
-    span?: 2 | 3;
+    /**
+     * Span full row(s) when the value is long. `2` / `3` keep the ladder they have always painted;
+     * `"filled"` takes the whole remaining row (antd), and a responsive `{ sm, md, lg, xl }` object
+     * spans a different number of columns per step.
+     */
+    span?: DescriptionsSpanProp;
     className?: string;
     children: React.ReactNode;
 }
+declare function DescriptionsItem({ label, mono, span, className, children }: DescriptionsItemProps): React.JSX.Element;

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

@@ -4,45 +4,85 @@ import * as React from "react";
 import { cn } from "../../lib/utils.js";
 const DescriptionsLayoutContext = React.createContext({
   layout: "vertical",
-  labelAlign: "start"
+  labelAlign: "start",
+  bordered: false
 });
+const BREAKPOINT_LADDER = ["sm", "md", "lg", "xl"];
+function responsiveVars(name, base, steps) {
+  const vars = { [`${name}-base`]: base };
+  for (const step of BREAKPOINT_LADDER) {
+    const value = steps[step];
+    if (value !== void 0) vars[`${name}-${step}`] = value;
+  }
+  return vars;
+}
+const LEGACY_COLUMN_CLASS = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+};
 function Descriptions({
   columns = 2,
   layout = "vertical",
   labelAlign = "start",
+  bordered = false,
+  items,
   className,
   children
 }) {
-  const colsClass = columns === 1 ? "grid-cols-1" : columns === 3 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-1 sm:grid-cols-2";
-  const context = React.useMemo(() => ({ layout, labelAlign }), [layout, labelAlign]);
-  return /* @__PURE__ */ jsx(DescriptionsLayoutContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+  const legacyColumns = typeof columns === "number" ? LEGACY_COLUMN_CLASS[columns] : void 0;
+  const responsiveColumns = legacyColumns === void 0 ? typeof columns === "number" ? { sm: Math.min(columns, 2), lg: columns } : columns : void 0;
+  const context = React.useMemo(
+    () => ({ layout, labelAlign, bordered }),
+    [layout, labelAlign, bordered]
+  );
+  return /* @__PURE__ */ jsx(DescriptionsLayoutContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
     "dl",
     {
       "data-slot": "descriptions",
-      "data-columns": columns,
+      "data-columns": typeof columns === "number" ? columns : void 0,
+      "data-columns-responsive": responsiveColumns ? "" : void 0,
+      "data-bordered": bordered ? "" : void 0,
+      style: responsiveColumns ? responsiveVars("--descriptions-column-count", 1, responsiveColumns) : void 0,
       className: cn(
         "grid gap-x-[var(--descriptions-column-gap)] gap-y-[var(--descriptions-row-gap)]",
-        colsClass,
+        legacyColumns,
         className
       ),
-      children
+      children: [
+        items?.map((item, index) => /* @__PURE__ */ jsx(
+          DescriptionsItem,
+          {
+            label: item.label,
+            mono: item.mono,
+            span: item.span,
+            className: item.className,
+            children: item.children ?? item.value
+          },
+          item.key ?? index
+        )),
+        children
+      ]
     }
   ) });
 }
-Descriptions.Item = function DescriptionsItem({
-  label,
-  mono,
-  span,
-  className,
-  children
-}) {
+const LEGACY_SPAN_CLASS = {
+  2: "sm:col-span-2",
+  3: "sm:col-span-2 lg:col-span-3"
+};
+function DescriptionsItem({ label, mono, span, className, children }) {
   const { layout, labelAlign } = React.useContext(DescriptionsLayoutContext);
-  const spanClass = span === 2 ? "sm:col-span-2" : span === 3 ? "sm:col-span-2 lg:col-span-3" : "";
+  const legacySpan = typeof span === "number" ? LEGACY_SPAN_CLASS[span] : void 0;
+  const responsiveSpan = span !== void 0 && span !== "filled" && legacySpan === void 0 ? typeof span === "number" ? { sm: span } : span : void 0;
   const endAlignedLabel = layout === "horizontal" && labelAlign === "end";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "descriptions-item",
+      "data-layout": layout,
+      "data-span": span === "filled" ? "filled" : void 0,
+      "data-span-responsive": responsiveSpan ? "" : void 0,
+      style: responsiveSpan ? responsiveVars("--descriptions-item-span", 1, responsiveSpan) : void 0,
       className: cn(
         layout === "horizontal" ? (
           // Label beside value — a token-aligned label column so the values line up. The
@@ -54,7 +94,7 @@ Descriptions.Item = function DescriptionsItem({
           // FormField / Form so the label→value gap is consistent everywhere.
           "grid gap-[var(--field-label-gap)]"
         ),
-        spanClass,
+        legacySpan,
         className
       ),
       children: [
@@ -86,7 +126,8 @@ Descriptions.Item = function DescriptionsItem({
       ]
     }
   );
-};
+}
+Descriptions.Item = DescriptionsItem;
 export {
   Descriptions
 };

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

@@ -1,5 +1,7 @@
 export { Badge, StatusBadge } from "./badge.js";
 export type { BadgeProps } from "./badge.js";
+export { Legend } from "./legend.js";
+export type { LegendItemProp, LegendProp, LegendProps } from "./legend.js";
 export { ListRow } from "./list-row.js";
 export type { ListRowProps, ListRowDensity } from "./list-row.js";
 export { CredentialReveal } from "./credential-reveal.js";
@@ -23,7 +25,7 @@ export { CodeBlock } from "./code-block.js";
 export type { CodeBlockProp, CodeBlockProps } from "./code-block.js";
 export { Prose } from "./prose.js";
 export type { ProseProp, ProseProps } from "./prose.js";
-export type { ProgressProps, ProgressTone } from "./progress.js";
+export type { ProgressProps, ProgressSegment, ProgressTone } from "./progress.js";
 export { TreeList } from "./tree-list.js";
 export type { TreeListItem, TreeListProps } from "./tree-list.js";
 export { Timeline } from "./timeline.js";
@@ -39,3 +41,5 @@ export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious
 export type { CarouselApi } from "./carousel.js";
 export { PermissionMatrix } from "./permission-matrix.js";
 export type { PermissionMatrixGrantsProp, PermissionMatrixPermissionProp, PermissionMatrixProp, PermissionMatrixProps, PermissionMatrixRoleProp, } from "./permission-matrix.js";
+export { RangeTimeline } from "./range-timeline.js";
+export type { RangeTimelineProps, RangeTimelineRow } from "./range-timeline.js";

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

@@ -1,4 +1,5 @@
 import { Badge, StatusBadge } from "./badge.js";
+import { Legend } from "./legend.js";
 import { ListRow } from "./list-row.js";
 import { CredentialReveal } from "./credential-reveal.js";
 import { QrCode } from "./qr-code.js";
@@ -53,6 +54,7 @@ import {
   useCarousel
 } from "./carousel.js";
 import { PermissionMatrix } from "./permission-matrix.js";
+import { RangeTimeline } from "./range-timeline.js";
 export {
   Accordion,
   AccordionContent,
@@ -88,6 +90,7 @@ export {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
+  Legend,
   ListRow,
   PermissionMatrix,
   Popover,
@@ -100,6 +103,7 @@ export {
   Progress,
   Prose,
   QrCode,
+  RangeTimeline,
   ScrollArea,
   ScrollBar,
   ServiceCatalogCta,

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

@@ -0,0 +1,15 @@
+import type { LegendProp } from "../../props/components/data-display.prop.js";
+export type { LegendItemProp, LegendProp, LegendProp as LegendProps } from "../../props/components/data-display.prop.js";
+/**
+ * Legend — the KEY for a set of tones: which colour means what.
+ *
+ * Pair it with anything that encodes meaning as colour and cannot repeat the words on every mark:
+ * a `Progress` breakdown, a chart, a status column. It is the reason a colour-coded surface can
+ * satisfy WCAG 1.4.1 — the tone is never the only carrier of the meaning, because the key spells
+ * it out once in words.
+ *
+ * The swatch is `aria-hidden`: it is the same information as the label beside it, and a screen
+ * reader announcing "square, overdue" twice per key is noise. What reaches assistive tech is a
+ * plain list of the labels, which is exactly what the key says.
+ */
+export declare function Legend({ items, className, ...props }: LegendProp): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Legend({ items, className, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("ui-legend", className), ...props, children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "ui-legend-item", children: [
+    /* @__PURE__ */ jsx("span", { className: "ui-legend-swatch", "data-tone": item.tone, "aria-hidden": "true" }),
+    item.label
+  ] }, index)) });
+}
+export {
+  Legend
+};

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

@@ -13,7 +13,16 @@ export type ListRowDensity = ListRowDensityProp;
  * justify-between border-b …">`.
  */
 export interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** Render element — `div` (default) or `li` when the parent is a `<ul>`/`<ol>`. */
+    /**
+     * Render element — `div` (default) or `li` when the parent is a `<ul>`/`<ol>`.
+     *
+     * With `asChild`, the child owns the row element, so `as` steps out and becomes the
+     * LIST ITEM around it: `<li data-slot="list-row-item"><a data-slot="list-row">`. That is
+     * the only reading under which both props can hold at once, and it is the shape a list
+     * of links needs — the alternative, wrapping the row yourself, moves every row into a
+     * wrapper of its own and the row-to-row divider (keyed on `:not(:last-child)` among
+     * siblings) stops matching entirely.
+     */
     as?: "div" | "li";
     /** Use the supplied link as the entire row. Do not nest interactive trailing controls. */
     asChild?: boolean;

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

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "../../lib/slot.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { Text } from "../general/typography.js";
@@ -22,6 +22,7 @@ const ListRow = React.forwardRef(
     ...props
   }, ref) => {
     const { t } = useTranslation();
+    const item = asChild && as !== "div" ? as : null;
     const Comp = asChild ? Slot : as;
     const truncate = overflow !== "wrap";
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -33,7 +34,7 @@ const ListRow = React.forwardRef(
       ] }),
       trailing != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-trailing", children: trailing }) : null
     ] });
-    return /* @__PURE__ */ jsx(
+    const row = /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
@@ -47,6 +48,11 @@ const ListRow = React.forwardRef(
         children: asChild && React.isValidElement(children) ? React.cloneElement(children, void 0, content) : content
       }
     );
+    if (item === null) {
+      return row;
+    }
+    const Item = item;
+    return /* @__PURE__ */ jsx(Item, { "data-slot": "list-row-item", children: row });
   }
 );
 ListRow.displayName = "ListRow";

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

@@ -1,9 +1,28 @@
 import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import type { FlushProp } from "../../props/vocabulary/index.js";
-export declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
-export declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
-export declare function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
+interface PopoverProps {
+    /** Trạng thái mở, có kiểm soát. */
+    open?: boolean;
+    /** Trạng thái mở ban đầu khi không kiểm soát. */
+    defaultOpen?: boolean;
+    /** Gọi khi trạng thái mở/đóng đổi. */
+    onOpenChange?: (open: boolean) => void;
+    /** Khoá tương tác ngoài panel và giam tiêu điểm, đúng như `modal` của Radix. */
+    modal?: boolean;
+}
+export declare function Popover({ open, defaultOpen, onOpenChange, modal, children, }: React.PropsWithChildren<PopoverProps>): React.JSX.Element;
+interface PopoverTriggerProps extends React.ComponentPropsWithRef<"button"> {
+    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
+    asChild?: boolean;
+}
+export declare function PopoverTrigger({ asChild, onClick, ref, ...props }: PopoverTriggerProps): React.JSX.Element;
+interface PopoverAnchorProps extends React.ComponentPropsWithRef<"span"> {
+    /** Mượn thẻ của con thay vì dựng `<span>` riêng. */
+    asChild?: boolean;
+}
+export declare function PopoverAnchor({ asChild, ref, ...props }: PopoverAnchorProps): React.JSX.Element;
 /**
  * The panel's CONTENT owns its inset — a Command list, a menu or a table that must run edge to
  * edge and draw its own separators across the full width. The popover drops its own padding by
@@ -14,8 +33,42 @@ export declare function PopoverAnchor(props: React.ComponentProps<typeof Popover
 type PopoverContentFlush = {
     flush?: FlushProp;
 };
-export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & PopoverContentFlush & React.RefAttributes<HTMLDivElement>>;
+interface PopoverContentProps extends React.ComponentPropsWithRef<"div">, PopoverContentFlush {
+    /** Cạnh của trigger mà panel bám vào. */
+    side?: Side;
+    /** Canh panel theo cạnh của trigger. */
+    align?: Align;
+    /** Khoảng cách theo trục chính, tính bằng px. */
+    sideOffset?: number;
+    /** Khoảng cách theo trục phụ, tính bằng px. */
+    alignOffset?: number;
+    /** Lật panel sang cạnh đối diện khi hết chỗ. */
+    avoidCollisions?: boolean;
+    /** Khoảng chừa với mép khung nhìn. RAC chỉ nhận một số; object lấy cạnh lớn nhất. */
+    collisionPadding?: number | Partial<Record<Side, number>>;
+    /** Không còn tác dụng trên nền RAC — giữ trong kiểu vì là API công khai. */
+    sticky?: "partial" | "always";
+    /** Không còn tác dụng trên nền RAC — giữ trong kiểu vì là API công khai. */
+    hideWhenDetached?: boolean;
+    /** Không còn tác dụng trên nền RAC — giữ trong kiểu vì là API công khai. */
+    forceMount?: true;
+    /**
+     * Chặn việc panel tự lấy tiêu điểm khi mở, bằng `event.preventDefault()`.
+     *
+     * Năm picker trong kho dựa vào đúng điều này để giữ tiêu điểm ở ô nhập, nên hành vi được chép
+     * tay từ Radix chứ không bỏ.
+     */
+    onOpenAutoFocus?: (event: Event) => void;
+    /**
+     * Chặn việc trả tiêu điểm về nơi nó đứng trước khi panel mở, bằng `event.preventDefault()`.
+     *
+     * Phát ở MỌI đường đóng (chọn một mục, Escape, bấm ra ngoài, Tab ra ngoài), nên consumer đưa
+     * được tiêu điểm tới đúng chỗ người dùng cần gõ tiếp thay vì để nó quay về trigger.
+     */
+    onCloseAutoFocus?: (event: Event) => void;
+}
+export declare function PopoverContent({ className, style, children, ref, flush, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, onOpenAutoFocus, onCloseAutoFocus, ...props }: PopoverContentProps): React.JSX.Element;
 export declare const PopoverHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
-export declare const PopoverTitle: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
-export declare const PopoverDescription: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => React.JSX.Element;
+export declare const PopoverTitle: ({ className, id, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const PopoverDescription: ({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => React.JSX.Element;
 export {};