@godxjp/ui 19.6.0 → 20.1.0

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { padStyle, padStepToken } from "../../lib/variants.js";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 const Card = React.forwardRef(
@@ -74,10 +75,27 @@ const CardFooter = React.forwardRef(
 );
 CardFooter.displayName = "CardFooter";
 const CardBar = React.forwardRef(
-  ({ className, children, extra, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, "data-slot": "card-bar", className: cn("ui-card-bar", className), ...props, children: [
-    /* @__PURE__ */ jsx("div", { "data-slot": "card-bar-main", className: "ui-card-bar-main", children }),
-    extra != null ? /* @__PURE__ */ jsx("div", { "data-slot": "card-bar-extra", className: "ui-card-bar-extra", children: extra }) : null
-  ] })
+  ({ className, children, extra, pad, padRaw, gap, surface, border, style, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-surface": surface,
+      "data-border": border,
+      "data-pad-raw": padRaw === void 0 ? void 0 : "",
+      style: {
+        ...style,
+        ...padStyle(pad, padRaw),
+        ...gap === void 0 ? void 0 : { gap: padStepToken(gap) }
+      },
+      "data-slot": "card-bar",
+      className: cn("ui-card-bar", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-slot": "card-bar-main", className: "ui-card-bar-main", children }),
+        extra != null ? /* @__PURE__ */ jsx("div", { "data-slot": "card-bar-extra", className: "ui-card-bar-extra", children: extra }) : null
+      ]
+    }
+  )
 );
 CardBar.displayName = "CardBar";
 function getDeltaTone(delta, inverse) {

package/dist/components/data-display/code-block.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const CodeBlock = React.forwardRef(function CodeBlock2({ children, wrap = true, maxHeight = "none", size = "sm", language, className, ...rest }, ref) {
+const CodeBlock = React.forwardRef(function CodeBlock2({ children, wrap = true, maxHeight = "none", size = "sm", language, className, style, ...rest }, ref) {
   const scrolls = maxHeight !== "none" || !wrap;
   return /* @__PURE__ */ jsx(
     "pre",
@@ -9,7 +9,11 @@ const CodeBlock = React.forwardRef(function CodeBlock2({ children, wrap = true,
       ref,
       "data-slot": "code-block",
       "data-wrap": wrap ? void 0 : "false",
-      "data-max-height": maxHeight === "none" ? void 0 : maxHeight,
+      "data-max-height": typeof maxHeight === "string" && maxHeight !== "none" ? maxHeight : void 0,
+      style: {
+        ...style,
+        ...typeof maxHeight === "object" ? { maxBlockSize: maxHeight.value, overflow: "auto" } : void 0
+      },
       "data-size": size === "sm" ? void 0 : size,
       "data-language": language,
       tabIndex: scrolls ? 0 : void 0,

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

@@ -1,4 +1,23 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const CollapsibleContent: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
+import * as React from "react";
+interface CollapsibleProps extends React.ComponentPropsWithRef<"div"> {
+    /** 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á trigger; `data-disabled` được phát ra để CSS bám vào. */
+    disabled?: boolean;
+}
+export declare function Collapsible({ open, defaultOpen, onOpenChange, disabled, children, ref, ...props }: CollapsibleProps): React.JSX.Element;
+interface CollapsibleTriggerProps extends React.ComponentPropsWithRef<"button"> {
+    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
+    asChild?: boolean;
+}
+export declare function CollapsibleTrigger({ asChild, onClick, disabled, ...props }: CollapsibleTriggerProps): React.JSX.Element;
+interface CollapsibleContentProps extends React.ComponentPropsWithRef<"div"> {
+    /** Giữ nội dung trong DOM cả khi đóng. */
+    forceMount?: true;
+}
+export declare function CollapsibleContent({ forceMount, children, ref, ...props }: CollapsibleContentProps): React.JSX.Element;
+export {};

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

@@ -1,8 +1,123 @@
 "use client";
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-const Collapsible = CollapsiblePrimitive.Root;
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { chain, mergeRefs } from "@react-aria/utils";
+import {
+  ButtonContext,
+  Disclosure,
+  DisclosurePanel,
+  DisclosureStateContext,
+  useSlottedContext
+} from "react-aria-components";
+import { Slot } from "../../lib/slot.js";
+function Collapsible({
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      isExpanded: open,
+      defaultExpanded: defaultOpen,
+      onExpandedChange: onOpenChange,
+      isDisabled: disabled,
+      render: (racProps, { isExpanded }) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            "data-state": isExpanded ? "open" : "closed",
+            "data-disabled": disabled ? "" : void 0,
+            children
+          }
+        );
+      }
+    }
+  );
+}
+function CollapsibleTrigger({
+  asChild,
+  onClick,
+  disabled,
+  ...props
+}) {
+  const trigger = useSlottedContext(ButtonContext, "trigger");
+  const state = React.useContext(DisclosureStateContext);
+  if (!trigger || !state) {
+    throw new Error("`CollapsibleTrigger` ph\u1EA3i n\u1EB1m trong `Collapsible`.");
+  }
+  const isDisabled = disabled ?? trigger.isDisabled ?? false;
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: "button",
+      id: trigger.id,
+      "aria-controls": state.isExpanded ? trigger["aria-controls"] : void 0,
+      "aria-expanded": state.isExpanded,
+      "data-state": state.isExpanded ? "open" : "closed",
+      "data-disabled": isDisabled ? "" : void 0,
+      disabled: isDisabled,
+      ...props,
+      onClick: chain(onClick, () => {
+        if (!isDisabled) {
+          state.toggle();
+        }
+      })
+    }
+  );
+}
+function CollapsibleContent({
+  forceMount,
+  children,
+  ref,
+  ...props
+}) {
+  const trigger = useSlottedContext(ButtonContext, "trigger");
+  const state = React.useContext(DisclosureStateContext);
+  if (!state) {
+    throw new Error("`CollapsibleContent` ph\u1EA3i n\u1EB1m trong `Collapsible`.");
+  }
+  return /* @__PURE__ */ jsx(
+    DisclosurePanel,
+    {
+      render: (racProps) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          children: _racChildren,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            "data-state": state.isExpanded ? "open" : "closed",
+            "data-disabled": trigger?.isDisabled ? "" : void 0,
+            children: state.isExpanded || forceMount ? children : null
+          }
+        );
+      },
+      children: null
+    }
+  );
+}
 export {
   Collapsible,
   CollapsibleContent,

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { flexRender, type ColumnVisibilityState, type OnChangeFn, type PaginationState } from "@tanstack/react-table";
-import type { BreakpointProp, ColumnDefProp, DensityProp, SortStateProp, TablePresetProp } from "../../props/vocabulary/index.js";
+import type { BreakpointProp, ColumnDefProp, DensityProp, OnColumnFilterChangeProp, OnRowProp, SortDirectionProp, SortStateProp, TableExpandableProp, TablePaginationProp, TablePresetProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp } from "../../props/vocabulary/index.js";
 export type Density = DensityProp;
 /**
  * Lean column definition — the simple, common-case column API. `render` shapes a cell; `sortable`
@@ -25,8 +25,14 @@ interface DataTableProps<T> {
     /** Global search term, surfaced by DataTable.Search. */
     globalFilter?: string;
     onGlobalFilterChange?: (next: string) => void;
-    /** Numbered-pagination state, surfaced by DataTable.Pagination. */
-    pagination?: PaginationState;
+    /**
+     * Numbered-pagination state, surfaced by DataTable.Pagination. THREE shapes, all accepted:
+     * the TanStack `{ pageIndex, pageSize }` this prop has always taken; antd's
+     * `TablePaginationConfig` object (`{ current, pageSize, total, pageSizeOptions,
+     * showSizeChanger, onChange }`, 1-based like antd); and `false`, which hides the pager
+     * entirely (antd `pagination={false}`).
+     */
+    pagination?: PaginationState | TablePaginationProp | false;
     onPaginationChange?: OnChangeFn<PaginationState>;
     /** Total server row count (manual pagination) — drives the page count. */
     rowCount?: number;
@@ -76,10 +82,39 @@ interface DataTableProps<T> {
      * classes are appended last, so they win over the built-in hover/selected fills.
      */
     rowClassName?: (row: T) => string | undefined;
+    /**
+     * Full row-selection configuration (antd `rowSelection`). Supersedes — and can be mixed with —
+     * `selectable` / `selected` / `onSelectChange`, which drive the same state.
+     */
+    rowSelection?: TableRowSelectionProp<T>;
+    /** Expandable detail rows (antd `expandable`). */
+    expandable?: TableExpandableProp<T>;
+    /** Footer totals row (antd `summary`) — rendered in a real `<tfoot>` so it survives sorting. */
+    summary?: TableSummaryProp<T>;
+    /** Scroll envelope (antd `scroll`) — `x` a minimum inline size, `y` a maximum body block size. */
+    scroll?: TableScrollProp;
+    /**
+     * Sticky header (antd `sticky`). Supersedes `stickyHeader` when given; the object form carries
+     * the `offsetHeader` a page-level fixed topbar needs.
+     */
+    sticky?: TableStickyProp;
+    /** Per-row DOM props merged onto the `<tr>` (antd `onRow`). */
+    onRow?: OnRowProp<T>;
+    /** Draw the outer frame and the vertical rules between columns (antd `bordered`). */
+    bordered?: boolean;
+    /** Explain the next sort step in a tooltip on every sortable header (antd `showSorterTooltip`). */
+    showSorterTooltip?: boolean;
+    /** Table-wide sort cycle (antd `sortDirections`); a column's own value wins. */
+    sortDirections?: SortDirectionProp[];
+    /**
+     * Column filters changed (antd hands the same map to `onChange`). Pair it with a column's
+     * `filteredValue` to drive filtering from a server query.
+     */
+    onFilterChange?: OnColumnFilterChangeProp;
     className?: string;
     children?: React.ReactNode;
 }
-export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: controlledPagination, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, className, children, }: DataTableProps<T>): React.JSX.Element;
+export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: paginationProp, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, rowSelection, expandable, summary, scroll, sticky, onRow, bordered, showSorterTooltip, sortDirections, onFilterChange, className, children, }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var Toolbar: ({ children, className, }: {
         children?: React.ReactNode;