@godxjp/ui 13.17.3 → 14.0.0

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 export declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -26,38 +26,38 @@ export declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pic
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

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

@@ -68,7 +68,7 @@ function TransferPanel({
         className: disabled ? "pointer-events-none opacity-50" : void 0
       }
     ) }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("ul", { className: "p-1", role: "group", "aria-labelledby": titleId, children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "text-muted-foreground py-8 text-center text-sm", children: emptyText }) : filtered.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("ul", { className: "p-1", "aria-labelledby": titleId, children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "text-muted-foreground py-8 text-center text-sm", children: emptyText }) : filtered.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
       "label",
       {
         className: cn(

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

@@ -9,6 +9,7 @@ export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAtt
     variant?: import("../../props").ButtonVariantProp;
     size?: import("../../props").ButtonSizeProp;
     shape?: import("../../props").ShapeProp;
+    fullWidth?: boolean;
     asChild?: import("../../props").AsChildProp;
     onClick?: import("../../props").OnClickProp;
     disabled?: import("../../props").DisabledProp;

package/dist/components/general/button.js

@@ -52,6 +52,7 @@ const Button = React.forwardRef(
     variant,
     size,
     shape,
+    fullWidth = false,
     asChild = false,
     loading = false,
     loadingText,
@@ -89,11 +90,13 @@ const Button = React.forwardRef(
         "data-variant": variant ?? "default",
         "data-size": size ?? "default",
         "data-shape": shape ?? "default",
+        "data-full-width": fullWidth ? "" : void 0,
         "data-loading": isLoading ? "" : void 0,
         "aria-busy": isLoading || void 0,
         disabled: isLoading || disabled,
         className: cn(
           "inline-flex shrink-0 items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-all outline-none",
+          fullWidth && "w-full",
           "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
           "disabled:pointer-events-none disabled:opacity-50",
           "data-[loading]:pointer-events-none",

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

@@ -2,3 +2,5 @@ export { Button, buttonVariants } from "./button";
 export type { ButtonProps } from "./button";
 export { Text, Heading } from "./typography";
 export type { TextProps, HeadingProps, TextProp, HeadingProp } from "./typography";
+export { Logo, logoVariants } from "./logo";
+export type { LogoProps } from "./logo";

package/dist/components/general/index.js

@@ -1,8 +1,11 @@
 import { Button, buttonVariants } from "./button";
 import { Text, Heading } from "./typography";
+import { Logo, logoVariants } from "./logo";
 export {
   Button,
   Heading,
+  Logo,
   Text,
-  buttonVariants
+  buttonVariants,
+  logoVariants
 };

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import type { ShapeProp } from "../../props/vocabulary";
+declare const logoVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    shape?: "default" | "pill" | "sharp" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /**
+     * Accessible product name. When set, the mark exposes `role="img"` + `aria-label` (use this when
+     * the Logo IS the accessible name — e.g. a home link). When omitted the mark is `aria-hidden`
+     * (decorative — assume an adjacent wordmark provides the name).
+     */
+    label?: string;
+    /** Box size — maps to the square size scale. Default `md`. */
+    size?: "xs" | "sm" | "md" | "lg";
+    /** Corner shape — `default` (--logo-radius) · `pill` (fully rounded) · `sharp` (square). */
+    shape?: ShapeProp;
+    /** The mark — a short lettermark string (default `"G"`) or a custom SVG/image node. */
+    glyph?: React.ReactNode;
+}
+/**
+ * Logo — the product brand-mark primitive. Use it INSTEAD of a hand-rolled
+ * `<span className="flex size-[2rem] rounded-md bg-primary font-bold …">g</span>` (typography-on-span,
+ * literal size/radius — cardinal rules #42/#46). Renders the lettermark (or a custom SVG) in a
+ * tokenized box that a service rethemes via `--primary` (fill) and `--logo-radius` (corner).
+ */
+export declare const Logo: React.ForwardRefExoticComponent<LogoProps & React.RefAttributes<HTMLSpanElement>>;
+export { logoVariants };

package/dist/components/general/logo.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const logoVariants = cva(
+  "inline-flex shrink-0 select-none items-center justify-center bg-primary font-bold leading-none text-primary-foreground [&_svg]:size-[60%]",
+  {
+    variants: {
+      size: {
+        xs: "size-[var(--logo-size-xs)] text-xs",
+        sm: "size-[var(--logo-size-sm)] text-sm",
+        md: "size-[var(--logo-size)] text-base",
+        lg: "size-[var(--logo-size-lg)] text-lg"
+      },
+      shape: {
+        default: "rounded-[var(--logo-radius)]",
+        pill: "rounded-[var(--radius-pill)]",
+        sharp: "rounded-[var(--radius-sharp)]"
+      }
+    },
+    defaultVariants: { size: "md", shape: "default" }
+  }
+);
+const Logo = React.forwardRef(
+  ({ glyph = "G", label, size, shape, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "data-slot": "logo",
+      "data-size": size ?? "md",
+      "data-shape": shape ?? "default",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: cn(logoVariants({ size, shape }), className),
+      ...props,
+      children: glyph
+    }
+  )
+);
+Logo.displayName = "Logo";
+export {
+  Logo,
+  logoVariants
+};

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

@@ -10,7 +10,7 @@ export type { BreadcrumbProps } from "./breadcrumb";
 export { Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar";
 export type { SidebarItemData, SidebarProductProp as SidebarProduct, SidebarProp, SidebarProp as SidebarProps, SidebarSectionProp, } from "../../props/components/layout.prop";
 export { Topbar } from "./topbar";
-export type { TopbarProduct, TopbarProject, TopbarProps } from "./topbar";
+export type { TopbarProp, TopbarProps } from "./topbar";
 export { ResponsiveGrid } from "./responsive-grid";
 export type { ResponsiveGridProps } from "./responsive-grid";
 export { SplitPane } from "./split-pane";

package/dist/components/layout/sidebar.js

@@ -190,30 +190,38 @@ function Sidebar({
   const { t } = useTranslation();
   const resolvedSections = sections ?? [];
   return /* @__PURE__ */ jsxs("div", { className: "sb-root", "data-collapsed": collapsed ? "true" : void 0, children: [
-    brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brand }) : product ? /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "sb-product",
-        onClick: onProductClick,
-        "aria-label": product.name,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "sb-logo-mark",
-              style: { background: product.color ?? "hsl(var(--attention))" },
-              children: product.name[0]?.toUpperCase() ?? "?"
-            }
-          ),
-          !collapsed ? /* @__PURE__ */ jsxs("span", { className: "sb-product-meta", children: [
-            /* @__PURE__ */ jsx("span", { className: "sb-product-name", children: product.name }),
-            product.role ? /* @__PURE__ */ jsx("span", { className: "sb-product-tenant", children: product.role }) : null
-          ] }) : null,
-          !collapsed ? /* @__PURE__ */ jsx("span", { className: "sb-product-caret", children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) }) : null
-        ]
-      }
-    ) : null,
+    brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brand }) : product ? (() => {
+      const interactive = onProductClick != null;
+      const mark = /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "sb-logo-mark",
+          style: { background: product.color ?? "hsl(var(--attention))" },
+          children: product.name[0]?.toUpperCase() ?? "?"
+        }
+      );
+      const meta = !collapsed ? /* @__PURE__ */ jsxs("span", { className: "sb-product-meta", children: [
+        /* @__PURE__ */ jsx("span", { className: "sb-product-name", children: product.name }),
+        product.role ? /* @__PURE__ */ jsx("span", { className: "sb-product-tenant", children: product.role }) : null
+      ] }) : null;
+      return interactive ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "sb-product",
+          onClick: onProductClick,
+          "aria-label": product.name,
+          children: [
+            mark,
+            meta,
+            !collapsed ? /* @__PURE__ */ jsx("span", { className: "sb-product-caret", children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) }) : null
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs("div", { className: "sb-product sb-product-static", children: [
+        mark,
+        meta
+      ] });
+    })() : null,
     /* @__PURE__ */ jsx("nav", { className: "sb-nav-scroll", "aria-label": t("layout.sidebar.ariaLabel"), children: children ?? resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsx(
       SidebarSection,
       {

package/dist/components/layout/topbar.d.ts

@@ -1,3 +1,20 @@
 import type { TopbarProp } from "../../props/components/layout.prop";
-export type { TopbarProductProp as TopbarProduct, TopbarProjectProp as TopbarProject, TopbarProp, TopbarProp as TopbarProps, } from "../../props/components/layout.prop";
-export declare function Topbar({ product, project, productMenu, projectMenu, projectPlaceholder, onProductOpen, onProjectOpen, onSearchOpen, onTweaksOpen, collapsed, onToggleCollapsed, rightSlot, unread, searchPlaceholder, onNotificationsOpen, user, }: TopbarProp): import("react/jsx-runtime").JSX.Element;
+export type { TopbarProp, TopbarProp as TopbarProps } from "../../props/components/layout.prop";
+/**
+ * Topbar — a PURE SLOT bar. It positions three clusters (`start` / `center` / `end`) and owns the
+ * bar's flex layout; it does NOT bake any chrome. There is no built-in product switcher, search
+ * box, notification bell, or language picker — the CONSUMER composes those from real primitives
+ * (brand `Logo`, a `Button` search trigger, `AppSettingPicker` for locale/theme, a `DropdownMenu`
+ * user menu) and drops them into a slot. Whether a control is icon-only, labelled, bordered, etc.
+ * is that control's OWN configuration — never the shell's to dictate.
+ *
+ *   <Topbar
+ *     start={<><SidebarToggle /><Logo label="…" /></>}
+ *     center={<Button variant="outline" onClick={openSearch}><Search />検索</Button>}
+ *     end={<><AppSettingPicker kind="locale" /><UserMenu /></>}
+ *   />
+ *
+ * Use it as `AppShell`'s `topbar` slot, or place it directly. For full custom content, pass
+ * `children` instead of the three slots.
+ */
+export declare function Topbar({ start, center, end, className, children, ...props }: TopbarProp): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topbar.js

@@ -1,132 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  Bell,
-  ChevronDown,
-  PanelLeftClose,
-  PanelLeftOpen,
-  Search,
-  SlidersHorizontal
-} from "lucide-react";
-import { DropdownMenu, DropdownMenuTrigger } from "../navigation/dropdown-menu";
-import { useTranslation } from "../../i18n/use-translation";
-function Topbar({
-  product,
-  project,
-  productMenu,
-  projectMenu,
-  projectPlaceholder,
-  onProductOpen,
-  onProjectOpen,
-  onSearchOpen,
-  onTweaksOpen,
-  collapsed = false,
-  onToggleCollapsed,
-  rightSlot,
-  unread = false,
-  searchPlaceholder,
-  onNotificationsOpen,
-  user
-}) {
-  const { t } = useTranslation();
-  const productChip = /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      className: "tb-chip",
-      "aria-label": product.name,
-      onClick: productMenu ? void 0 : onProductOpen,
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "tb-chip-icon",
-            style: { background: product.color ?? "hsl(var(--attention))" },
-            children: product.name[0]?.toUpperCase() ?? "?"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "tb-chip-label", children: product.name }),
-        /* @__PURE__ */ jsx("span", { className: "tb-chip-caret", children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) })
-      ]
-    }
-  );
-  const showProject = project != null || projectMenu != null;
-  const projectChip = /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      className: `tb-chip ${project ? "" : "tb-chip-empty"}`,
-      "aria-label": project ? project.name : projectPlaceholder ?? "",
-      onClick: projectMenu ? void 0 : onProjectOpen,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "tb-chip-label", children: project ? project.name : projectPlaceholder ?? "\u2014" }),
-        /* @__PURE__ */ jsx("span", { className: "tb-chip-caret", children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) })
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    onToggleCollapsed ? /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "tb-icon-btn",
-        "aria-label": t("layout.topbar.toggleSidebar"),
-        "aria-pressed": collapsed,
-        onClick: onToggleCollapsed,
-        children: collapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PanelLeftClose, { "aria-hidden": "true" })
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs("div", { className: "tb-switcher", children: [
-      productMenu ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: productChip }),
-        productMenu
-      ] }) : productChip,
-      showProject ? /* @__PURE__ */ jsx("span", { className: "tb-chip-sep", children: "/" }) : null,
-      showProject ? projectMenu ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: projectChip }),
-        projectMenu
-      ] }) : projectChip : null
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "tb-search",
-        "aria-label": t("layout.topbar.search"),
-        "aria-keyshortcuts": "Meta+K",
-        onClick: onSearchOpen,
-        children: [
-          /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { children: searchPlaceholder ?? t("layout.topbar.searchPlaceholder") }),
-          /* @__PURE__ */ jsx("kbd", { className: "kbd", children: "\u2318K" })
-        ]
-      }
-    ),
-    rightSlot,
-    onNotificationsOpen ? /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "tb-icon-btn tb-bell",
-        "aria-label": t("layout.topbar.notifications"),
-        onClick: onNotificationsOpen,
-        children: [
-          /* @__PURE__ */ jsx(Bell, { "aria-hidden": "true" }),
-          unread ? /* @__PURE__ */ jsx("span", { className: "tb-bell-dot", "aria-hidden": "true" }) : null
-        ]
-      }
-    ) : null,
-    user,
-    onTweaksOpen ? /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "tb-icon-btn",
-        "aria-label": t("layout.topbar.tweaks"),
-        onClick: onTweaksOpen,
-        children: /* @__PURE__ */ jsx(SlidersHorizontal, { "aria-hidden": "true" })
-      }
-    ) : null
-  ] });
+import { cn } from "../../lib/utils";
+function Topbar({ start, center, end, className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "topbar", className: cn("ui-topbar", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    start != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-start", className: "ui-topbar-start", children: start }) : null,
+    center != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-center", className: "ui-topbar-center", children: center }) : null,
+    end != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-end", className: "ui-topbar-end", children: end }) : null
+  ] }) });
 }
 export {
   Topbar

package/dist/i18n/messages/en.json

@@ -301,5 +301,10 @@
   },
   "query": {
     "loadMore": "Load more"
+  },
+  "chart": {
+    "empty": "No data to display",
+    "summaryCartesian": "Chart with {series} series across {points} data points",
+    "summaryPie": "Pie chart with {slices} slices"
   }
 }

package/dist/i18n/messages/ja.json

@@ -298,5 +298,10 @@
   },
   "query": {
     "loadMore": "さらに読み込む"
+  },
+  "chart": {
+    "empty": "データがありません",
+    "summaryCartesian": "{series}系列・{points}データ点のグラフ",
+    "summaryPie": "{slices}区分の円グラフ"
   }
 }

package/dist/i18n/messages/vi.json

@@ -298,5 +298,10 @@
   },
   "query": {
     "loadMore": "Tải thêm"
+  },
+  "chart": {
+    "empty": "Không có dữ liệu",
+    "summaryCartesian": "Biểu đồ gồm {series} chuỗi trên {points} điểm dữ liệu",
+    "summaryPie": "Biểu đồ tròn gồm {slices} phần"
   }
 }

package/dist/props/components/charts.prop.d.ts

@@ -0,0 +1,89 @@
+/** Charts component prop types — @see docs/COMPONENTS.md#charts (tree-shaken `@godxjp/ui/charts`). */
+import type { ClassNameProp, DescriptionProp, EmptyMessageProp, IdProp, LabelProp, SizeProp } from "../vocabulary";
+/** A single row of chart data — category accessor + one numeric value per series. */
+export type ChartDatum = Record<string, string | number | null | undefined>;
+/** One plotted series — `dataKey` accesses the value, `label` is the already-translated legend text. */
+export type ChartSeriesProp = {
+    /** Key into each datum holding this series' numeric value. */
+    dataKey: string;
+    /** Already-translated display label (legend + tooltip). Defaults to `dataKey`. */
+    label?: string;
+    /** CSS colour or token var. Defaults to the `--chart-1..6` palette by index. */
+    color?: string;
+};
+/** Shared base for the cartesian charts (Line / Bar / Area). */
+type ChartCartesianBase = {
+    /** Row data. Each row is one category with a value per series. */
+    data: ChartDatum[];
+    /** One or more plotted series. */
+    series: ChartSeriesProp[];
+    /** Key into each datum holding the x-axis category label. */
+    categoryKey: string;
+    /** Accessible name + visible caption for the chart. REQUIRED (role="img" needs a name). */
+    label: LabelProp;
+    /** Extra context appended to the screen-reader description. */
+    description?: DescriptionProp;
+    /** Canvas height preset — `xs|sm|md|lg`. Ignored when `height` is set. */
+    size?: SizeProp;
+    /** Explicit canvas height in px (overrides `size`). */
+    height?: number;
+    /** Show the series legend. */
+    showLegend?: boolean;
+    /** Show the cartesian background grid. */
+    showGrid?: boolean;
+    /** `Intl.NumberFormat` options for axis ticks + tooltip values (locale is automatic). */
+    numberFormat?: Intl.NumberFormatOptions;
+    /** Message shown when `data` is empty. Defaults to a localized "no data". */
+    emptyMessage?: EmptyMessageProp;
+    className?: ClassNameProp;
+    id?: IdProp;
+};
+/** @see LineChart */
+export type LineChartProp = ChartCartesianBase & {
+    /** Render smooth (monotone) lines instead of straight segments. */
+    curved?: boolean;
+};
+/** @see BarChart */
+export type BarChartProp = ChartCartesianBase & {
+    /** Stack series into one bar instead of grouping side by side. */
+    stacked?: boolean;
+    /** Lay bars out horizontally (category on the y-axis). */
+    horizontal?: boolean;
+};
+/** @see AreaChart */
+export type AreaChartProp = ChartCartesianBase & {
+    /** Stack series areas instead of overlaying them. */
+    stacked?: boolean;
+    /** Render smooth (monotone) areas instead of straight segments. */
+    curved?: boolean;
+};
+/** @see PieChart */
+export type PieChartProp = {
+    /** Row data — one slice per row. */
+    data: ChartDatum[];
+    /** Key into each datum holding the slice's numeric value. */
+    dataKey: string;
+    /** Key into each datum holding the slice's category label. */
+    nameKey: string;
+    /** Per-slice colours, applied by index. Defaults to the `--chart-1..6` palette. */
+    colors?: string[];
+    /** Accessible name + visible caption for the chart. REQUIRED. */
+    label: LabelProp;
+    /** Extra context appended to the screen-reader description. */
+    description?: DescriptionProp;
+    /** Canvas height preset — `xs|sm|md|lg`. Ignored when `height` is set. */
+    size?: SizeProp;
+    /** Explicit canvas height in px (overrides `size`). */
+    height?: number;
+    /** Show the slice legend. */
+    showLegend?: boolean;
+    /** `Intl.NumberFormat` options for tooltip values (locale is automatic). */
+    numberFormat?: Intl.NumberFormatOptions;
+    /** Render a donut (hollow centre) instead of a full pie. */
+    donut?: boolean;
+    /** Message shown when `data` is empty. Defaults to a localized "no data". */
+    emptyMessage?: EmptyMessageProp;
+    className?: ClassNameProp;
+    id?: IdProp;
+};
+export {};

package/dist/props/components/general.prop.d.ts

@@ -35,6 +35,11 @@ export type ButtonProp = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: ButtonSizeProp;
     /** Corner shape — `default` (control radius) · `pill` (fully rounded) · `sharp` (square). */
     shape?: ShapeProp;
+    /**
+     * Span the full width of the container (`width:100%`) instead of sizing to content —
+     * the prop form of `className="w-full"` for stacked/auth/dialog-footer actions (rule #42).
+     */
+    fullWidth?: boolean;
     asChild?: AsChildProp;
     onClick?: OnClickProp;
     disabled?: DisabledProp;

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

@@ -1,7 +1,8 @@
-export type { AppShellProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProductProp, TopbarProjectProp, TopbarProp, } from "./layout.prop";
+export type { AppShellProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop";
 export type { ButtonProp } from "./general.prop";
 export type { InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, DateRangePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop";
 export type { EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, } from "./data-display.prop";
+export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop";
 export type { AlertQueryErrorProp, AlertProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SkeletonRowsProp, } from "./feedback.prop";
 export type { DataStateProp, InfiniteQueryStateProp, InfiniteQueryHelpers, PrefetchLinkProp, } from "./query.prop";
 export type { PaginationProp, StepsProp, StepItemProp, StepStatusProp, TabsProp, TabItemProp, } from "./navigation.prop";