@godxjp/ui 18.3.0 → 18.5.0

package/dist/i18n/messages/ja.json

@@ -145,6 +145,11 @@
       "mainLabel": "メインコンテンツ",
       "footerLabel": "フッター"
     },
+    "legalDocumentShell": {
+      "contents": "目次",
+      "version": "バージョン {version}",
+      "effectiveDate": "施行日 {date}"
+    },
     "topbar": {
       "toggleSidebar": "サイドバーの切り替え",
       "search": "検索",
@@ -162,6 +167,10 @@
       "next": "次へ",
       "dotsLabel": "スライドを選択",
       "goToSlide": "{index} 番目のスライドへ"
+    },
+    "listRow": {
+      "unread": "未読",
+      "read": "既読"
     }
   },
   "ui": {
@@ -289,7 +298,11 @@
     "densitySwitch": "{density} 表示に切り替え",
     "rowActions": "行の操作",
     "empty": "データがありません",
-    "loading": "読み込み中…"
+    "loading": "読み込み中…",
+    "error": "一覧を取得できませんでした",
+    "errorDescription": "データを取得できませんでした。時間をおいて再試行してください。",
+    "denied": "この一覧を表示する権限がありません",
+    "deniedDescription": "閲覧するには管理者に権限の付与を依頼してください。"
   },
   "dataGrid": {
     "search": "検索",
@@ -301,6 +314,10 @@
   },
   "status": {
     "active": "有効",
+    "trialing": "試用中",
+    "past_due": "支払期限超過",
+    "incomplete": "未完了",
+    "canceled": "解約済み",
     "completed": "完了",
     "delivered": "配達済み",
     "done": "完了",
@@ -350,6 +367,8 @@
   "chart": {
     "empty": "データがありません",
     "summaryCartesian": "{series}系列・{points}データ点のグラフ",
-    "summaryPie": "{slices}区分の円グラフ"
+    "summaryPie": "{slices}区分の円グラフ",
+    "summaryTrend": "{points}データ点の推移棒グラフ",
+    "trendCurrent": "現在"
   }
 }

package/dist/i18n/messages/vi.json

@@ -145,6 +145,11 @@
       "mainLabel": "Nội dung chính",
       "footerLabel": "Chân trang"
     },
+    "legalDocumentShell": {
+      "contents": "Mục lục",
+      "version": "Phiên bản {version}",
+      "effectiveDate": "Hiệu lực từ {date}"
+    },
     "topbar": {
       "toggleSidebar": "Bật/tắt thanh bên",
       "search": "Tìm kiếm",
@@ -162,6 +167,10 @@
       "next": "Sau",
       "dotsLabel": "Chọn slide",
       "goToSlide": "Đến slide {index}"
+    },
+    "listRow": {
+      "unread": "Chưa đọc",
+      "read": "Đã đọc"
     }
   },
   "ui": {
@@ -289,7 +298,11 @@
     "densitySwitch": "Chuyển sang mật độ {density}",
     "rowActions": "Thao tác dòng",
     "empty": "Chưa có dữ liệu",
-    "loading": "Đang tải…"
+    "loading": "Đang tải…",
+    "error": "Không tải được danh sách này",
+    "errorDescription": "Không lấy được dữ liệu. Vui lòng thử lại sau giây lát.",
+    "denied": "Bạn không có quyền xem danh sách này",
+    "deniedDescription": "Hãy đề nghị quản trị viên cấp quyền xem các bản ghi này."
   },
   "dataGrid": {
     "search": "Tìm kiếm",
@@ -301,6 +314,10 @@
   },
   "status": {
     "active": "Đang hoạt động",
+    "trialing": "Đang dùng thử",
+    "past_due": "Quá hạn thanh toán",
+    "incomplete": "Chưa hoàn tất",
+    "canceled": "Đã huỷ",
     "completed": "Hoàn thành",
     "delivered": "Đã giao",
     "done": "Xong",
@@ -350,6 +367,8 @@
   "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"
+    "summaryPie": "Biểu đồ tròn gồm {slices} phần",
+    "summaryTrend": "Biểu đồ cột xu hướng gồm {points} điểm dữ liệu",
+    "trendCurrent": "hiện tại"
   }
 }

package/dist/inertia/index.d.ts

@@ -1,4 +1,6 @@
+import type { ComponentType, ReactNode } from "react";
 import type { FormStateAdapter } from "../props/components/form.prop.js";
+import type { SidebarLinkComponentProp } from "../props/components/layout.prop.js";
 /**
  * Structural shape of Inertia's `useForm` return that the adapter needs. Duck-typed on purpose —
  * `@godxjp/ui` keeps ZERO dependency on `@inertiajs/react`; the real `useForm()` object satisfies
@@ -63,3 +65,51 @@ export declare function useInertiaField<TData extends Record<string, unknown>>(f
         };
     }) => void;
 };
+/**
+ * Structural shape of Inertia's `<Link>` that the Sidebar adapter needs. Duck-typed on purpose —
+ * `@godxjp/ui` keeps ZERO dependency on `@inertiajs/react`; the real `Link` satisfies this shape,
+ * so a consumer passes it directly with no import from this package.
+ */
+export interface InertiaLinkLike {
+    href: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * Bind Inertia's `<Link>` as the Sidebar's row element (gh#213).
+ *
+ * The LIBRARY still composes every row — the 16px icon slot, the label, the badge, `data-active` /
+ * `aria-current`, the icon-only collapsed rail and its tooltip name — and hands it to the link as
+ * `children`. The consumer supplies ONLY the element, so the class of production regression where a
+ * consumer `renderItem` returned `<Link>{item.label}</Link>` and silently dropped every sidebar icon
+ * is no longer expressible.
+ *
+ * A disabled row has no destination; Inertia's `Link` requires a string `href` and would visit `""`,
+ * so the adapter renders an inert `<a>` for that case while keeping the canonical row class and
+ * `aria-disabled`.
+ *
+ * React Router / TanStack Router use `to` instead of `href` — use
+ * `createSidebarLink(Link, "to")` from `@godxjp/ui/layout` for those.
+ *
+ * @example
+ * ```tsx
+ * import { Link } from "@inertiajs/react";
+ * import { Sidebar } from "@godxjp/ui/layout";
+ * import { inertiaSidebarLink } from "@godxjp/ui/inertia";
+ *
+ * const NavLink = inertiaSidebarLink(Link);
+ *
+ * <Sidebar
+ *   activeId={page.component}
+ *   linkComponent={NavLink}
+ *   sections={[
+ *     { label: "Operations", items: [
+ *       { id: "dashboard", label: t("nav.dashboard"), icon: LayoutDashboard, href: "/dashboard" },
+ *       { id: "invoices", label: t("nav.invoices"), icon: Receipt, href: "/invoices",
+ *         badge: <Badge tone="info">{unread}</Badge> },
+ *     ] },
+ *   ]}
+ * />;
+ * ```
+ */
+export declare function inertiaSidebarLink<P extends InertiaLinkLike>(Link: ComponentType<P>): SidebarLinkComponentProp;

package/dist/inertia/index.js

@@ -1,4 +1,5 @@
 "use client";
+import { createSidebarLink } from "../components/layout/sidebar-link.js";
 function inertiaAdapter(form) {
   return {
     getValue: (name) => form.data[name],
@@ -16,7 +17,11 @@ function useInertiaField(form, name) {
     onChange: (event) => form.setData(name, event?.target?.value)
   };
 }
+function inertiaSidebarLink(Link) {
+  return createSidebarLink(Link, "href");
+}
 export {
   inertiaAdapter,
+  inertiaSidebarLink,
   useInertiaField
 };

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

@@ -73,13 +73,23 @@ export type AppSettingPickerProp = {
      * sized to the setting. `"icon"` renders a supported square, icon-only topbar trigger (e.g. a
      * globe language switcher): it structurally drops the value text and the picker's owned width —
      * no descendant-selector CSS overrides needed — while always keeping the localized `aria-label`,
-     * so an icon-only trigger can never ship without an accessible name.
+     * so an icon-only trigger can never ship without an accessible name. `"inline"` renders the
+     * selected value as a compact text trigger for legal/auth footers without a field-like box.
      *
      * Default is kind-dependent: `kind="locale"` defaults to `"icon"` (its product contract is the
      * compact language switcher); every other kind defaults to `"labeled"`. Override explicitly for
      * e.g. a labeled locale row inside a settings form (`appearance="labeled"`).
      */
     appearance?: AppSettingPickerAppearanceProp;
+    /**
+     * Compact presentation (gh#217) — re-tiers the trigger box to `--control-height-sm` and drops the
+     * picker's owned per-kind width so a LABELLED trigger hugs its value. Use it for an auth/legal
+     * footer locale switch (`kind="locale" appearance="labeled" compact`), where the square icon-only
+     * default reads as a stray button and the full labelled trigger is too tall. All geometry is
+     * tokenized (`--app-setting-picker-compact-*`). No effect on `appearance="inline"`, which is
+     * already chrome-less. Default `false`.
+     */
+    compact?: boolean;
     className?: ClassNameProp;
     disabled?: DisabledProp;
     id?: IdProp;

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

@@ -1,5 +1,6 @@
 /** Charts component prop types — @see docs/COMPONENTS.md#charts (tree-shaken `@godxjp/ui/charts`). */
-import type { ClassNameProp, DescriptionProp, EmptyMessageProp, IdProp, LabelProp, SizeProp } from "../vocabulary/index.js";
+import type * as React from "react";
+import type { ClassNameProp, DescriptionProp, EmptyMessageProp, FooterProp, IdProp, LabelProp, SizeProp } from "../vocabulary/index.js";
 /** 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. */
@@ -50,6 +51,44 @@ export type BarChartProp = ChartCartesianBase & {
     /** Lay bars out horizontally (category on the y-axis). */
     horizontal?: boolean;
 };
+/**
+ * @see CompactBarTrend
+ *
+ * Dependency-free (no `recharts`) compact vertical bar trend: N category/value
+ * pairs, muted marks plus ONE emphasized "current" mark. Every dimension resolves
+ * from `--chart-trend-*` tokens, so a screen never writes CSS or an inline height.
+ */
+export type CompactBarTrendProp = {
+    /** Row data — one bar per row. Not limited to seven points. */
+    data: ChartDatum[];
+    /** Key into each datum holding the category (tick) label. */
+    categoryKey: string;
+    /** Key into each datum holding the plotted numeric value. */
+    valueKey: 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;
+    /** Plot-height tier — `xs|sm|md|lg`. Defaults to `xs` (dashboard summary-card density). */
+    size?: SizeProp;
+    /**
+     * Index of the emphasized ("current") bar. Negative counts from the end
+     * (`-1` = the latest datum); out of range = no emphasis. Never colour-only —
+     * the emphasized row is annotated in the screen-reader text alternative.
+     */
+    emphasizedIndex?: number;
+    /** Render the category tick labels under the plot. */
+    showCategoryLabels?: boolean;
+    /** `Intl.NumberFormat` options for the values in the text alternative (locale is automatic). */
+    numberFormat?: Intl.NumberFormatOptions;
+    /** Activity footer slot rendered below the plot, outside the `role="img"` graphic. */
+    footer?: FooterProp;
+    /** Message shown when `data` is empty. Defaults to a localized "no data". */
+    emptyMessage?: EmptyMessageProp;
+    className?: ClassNameProp;
+    id?: IdProp;
+    ref?: React.Ref<HTMLElement>;
+};
 /** @see AreaChart */
 export type AreaChartProp = ChartCartesianBase & {
     /** Stack series areas instead of overlaying them. */

package/dist/props/components/data-display.prop.d.ts

@@ -1,6 +1,6 @@
 /** Data Display component prop types — @see docs/COMPONENTS.md#data-display */
 import type * as React from "react";
-import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, ChildrenProp, ToneProp, HeadingLevelProp, SizeProp, LabelProp, IdProp } from "../vocabulary/index.js";
+import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, ChildrenProp, ToneProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp } from "../vocabulary/index.js";
 /** @see EmptyState */
 /**
  * Semantic intent of the EmptyState icon medallion — a subset of the shared `ToneProp` vocabulary
@@ -136,6 +136,18 @@ export type DataTableProp<T> = {
     onSortChange?: OnSortChangeProp;
     loading?: boolean;
     empty?: React.ReactNode;
+    /**
+     * Failure state (#216). `true` = built-in localized message (with a retry when `onRetry` is
+     * given); any other node replaces it. `false`/`undefined` = the read succeeded.
+     */
+    error?: React.ReactNode;
+    /**
+     * Permission-denied state (#216) — refused, not failed. `true` = built-in localized message
+     * with NO retry. Takes precedence over `error`.
+     */
+    denied?: React.ReactNode;
+    /** Retry handler surfaced by the built-in `error` state. */
+    onRetry?: HandlerProp;
     className?: ClassNameProp;
     children?: ChildrenProp;
 };

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

@@ -62,6 +62,16 @@ export type AlertActionsProp = React.HTMLAttributes<HTMLDivElement> & {
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
+/**
+ * @see SheetContent — responsive drawer / detail-panel presentation contract.
+ *
+ * - `"side"` (default) — always the physical `side` panel the consumer named. Today's behaviour.
+ * - `"auto"` — desktop side panel above `--sheet-responsive-breakpoint-width`, mobile bottom sheet
+ *   at and below it. The breakpoint is a token, so a service moves the line once for every overlay.
+ * - `"bottom"` — always the mobile bottom-sheet presentation (deterministic embedded surfaces,
+ *   component tests, and composites that already decided they are on a compact viewport).
+ */
+export type SheetResponsiveProp = "auto" | "side" | "bottom";
 /** @see SkeletonRows */
 export type SkeletonRowsProp = {
     rows?: number;

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

@@ -1,9 +1,9 @@
-export type { AppShellProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
+export type { AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
 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.js";
 export type { EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
 export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
-export type { AlertQueryErrorProp, AlertProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SkeletonRowsProp, } from "./feedback.prop.js";
+export type { AlertQueryErrorProp, AlertProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";
 export type { DataStateProp, InfiniteQueryStateProp, InfiniteQueryHelpers, PrefetchLinkProp, } from "./query.prop.js";
 export type { PaginationProp, StepsProp, StepItemProp, StepStatusProp, TabsProp, TabItemProp, } from "./navigation.prop.js";
 export type { AppProviderProp, AppContextValue, AppSettingKind, AppSettingPickerProp, } from "./app.prop.js";