@godxjp/ui 18.4.0 → 18.6.0

package/dist/email/tokens.generated.js

@@ -0,0 +1,162 @@
+const EMAIL_COLOR_SOURCE = {
+  "background": {
+    "cssVar": "--background",
+    "hsl": "60 33% 99%"
+  },
+  "foreground": {
+    "cssVar": "--foreground",
+    "hsl": "48 8% 13%"
+  },
+  "surface": {
+    "cssVar": "--card",
+    "hsl": "60 33% 99%"
+  },
+  "surfaceForeground": {
+    "cssVar": "--card-foreground",
+    "hsl": "48 8% 13%"
+  },
+  "muted": {
+    "cssVar": "--muted",
+    "hsl": "45 15% 95%"
+  },
+  "mutedForeground": {
+    "cssVar": "--muted-foreground",
+    "hsl": "44 5% 42%"
+  },
+  "border": {
+    "cssVar": "--border",
+    "hsl": "30 7% 83%"
+  },
+  "primary": {
+    "cssVar": "--primary",
+    "hsl": "204 100% 39%"
+  },
+  "primaryForeground": {
+    "cssVar": "--primary-foreground",
+    "hsl": "60 33% 99%"
+  },
+  "focus": {
+    "cssVar": "--ring",
+    "hsl": "204 100% 39%"
+  },
+  "brand": {
+    "cssVar": "--brand",
+    "hsl": "160.5 100% 29.6%"
+  },
+  "brandForeground": {
+    "cssVar": "--brand-foreground",
+    "hsl": "60 33% 99%"
+  },
+  "urgency": {
+    "cssVar": "--attention",
+    "hsl": "25 99% 46%"
+  },
+  "urgencyForeground": {
+    "cssVar": "--attention-foreground",
+    "hsl": "60 33% 99%"
+  }
+};
+const EMAIL_COLOR_SOURCE_DARK = {
+  "background": {
+    "cssVar": "--background",
+    "hsl": "48 9% 9%"
+  },
+  "foreground": {
+    "cssVar": "--foreground",
+    "hsl": "60 20% 96%"
+  },
+  "surface": {
+    "cssVar": "--card",
+    "hsl": "48 8% 12%"
+  },
+  "surfaceForeground": {
+    "cssVar": "--card-foreground",
+    "hsl": "60 20% 96%"
+  },
+  "muted": {
+    "cssVar": "--muted",
+    "hsl": "45 6% 18%"
+  },
+  "mutedForeground": {
+    "cssVar": "--muted-foreground",
+    "hsl": "44 6% 64%"
+  },
+  "border": {
+    "cssVar": "--border",
+    "hsl": "45 6% 22%"
+  },
+  "primary": {
+    "cssVar": "--primary",
+    "hsl": "204 90% 60%"
+  },
+  "primaryForeground": {
+    "cssVar": "--primary-foreground",
+    "hsl": "48 9% 9%"
+  },
+  "focus": {
+    "cssVar": "--ring",
+    "hsl": "204 90% 60%"
+  },
+  "brand": {
+    "cssVar": "--brand",
+    "hsl": "160.5 100% 36%"
+  },
+  "brandForeground": {
+    "cssVar": "--brand-foreground",
+    "hsl": "48 9% 9%"
+  },
+  "urgency": {
+    "cssVar": "--attention",
+    "hsl": "25 95% 56%"
+  },
+  "urgencyForeground": {
+    "cssVar": "--attention-foreground",
+    "hsl": "48 9% 9%"
+  }
+};
+const EMAIL_GEOMETRY_SOURCE = {
+  "--email-shell-width": "480px",
+  "--email-shell-padding": "32px",
+  "--email-shell-page-padding": "24px",
+  "--email-shell-border-width": "1px",
+  "--email-card-radius": "10px",
+  "--email-card-reference-height": "407px",
+  "--email-stack-gap": "24px",
+  "--email-stack-gap-sm": "12px",
+  "--email-mark-width": "22px",
+  "--email-mark-height": "22px",
+  "--email-mark-gap": "8px",
+  "--email-wordmark-font-size": "13px",
+  "--email-wordmark-font-weight": "700",
+  "--email-font-family-sans": "'M PLUS 2', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'Noto Sans JP', Meiryo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, Arial, sans-serif",
+  "--email-font-family-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  "--email-body-font-size": "14px",
+  "--email-body-line-height": "1.9",
+  "--email-body-font-weight": "400",
+  "--email-heading-font-size": "17px",
+  "--email-heading-line-height": "1.7",
+  "--email-heading-font-weight": "500",
+  "--email-cta-height": "36px",
+  "--email-cta-line-height": "36px",
+  "--email-cta-padding-x": "16px",
+  "--email-cta-radius": "6px",
+  "--email-cta-font-size": "14px",
+  "--email-cta-font-weight": "500",
+  "--email-footer-font-size": "11px",
+  "--email-footer-line-height": "1.8",
+  "--email-footer-link-gap": "12px",
+  "--email-footer-padding-top": "20px",
+  "--email-footer-border-width": "1px",
+  "--email-focus-border-width": "2px",
+  "--email-mobile-max-width": "520px",
+  "--email-mobile-width": "100%",
+  "--email-mobile-padding": "20px",
+  "--email-mobile-page-padding": "12px",
+  "--email-mobile-heading-font-size": "16px",
+  "--email-mobile-cta-width": "100%"
+};
+export {
+  EMAIL_COLOR_SOURCE,
+  EMAIL_COLOR_SOURCE_DARK,
+  EMAIL_GEOMETRY_SOURCE
+};

package/dist/email/urgency.d.ts

@@ -0,0 +1,22 @@
+import { type EmailHex } from "./color.js";
+/**
+ * Semantic action-required styling for transactional email.
+ *
+ * `accent` is the non-text rail/border color painted on the normal email surface. The solid pair
+ * is safe for icons and large or bold labels that satisfy the 3:1 contrast floor; it is not a
+ * replacement for normal body copy, which remains `EMAIL_COLORS.foreground` on
+ * `EMAIL_COLORS.surface`. This deliberately narrow contract prevents urgency from becoming an
+ * undocumented second CTA or a component-local palette.
+ */
+export interface EmailUrgencyTokens {
+    /** Non-text action-required rail or border on the standard email surface. */
+    readonly accent: EmailHex;
+    /** Solid action-required fill for an icon or large/bold label. */
+    readonly solidBackground: EmailHex;
+    /** Foreground paired only with `solidBackground` under the usage restriction above. */
+    readonly solidForeground: EmailHex;
+}
+/** Light-scheme action-required email contract. */
+export declare const EMAIL_URGENCY: Readonly<EmailUrgencyTokens>;
+/** Dark-scheme action-required email contract for clients that honor dark-mode overrides. */
+export declare const EMAIL_URGENCY_DARK: Readonly<EmailUrgencyTokens>;

package/dist/email/urgency.js

@@ -0,0 +1,14 @@
+import { EMAIL_COLORS, EMAIL_COLORS_DARK } from "./color.js";
+function resolveUrgency(colors) {
+  return Object.freeze({
+    accent: colors.urgency,
+    solidBackground: colors.urgency,
+    solidForeground: colors.urgencyForeground
+  });
+}
+const EMAIL_URGENCY = resolveUrgency(EMAIL_COLORS);
+const EMAIL_URGENCY_DARK = resolveUrgency(EMAIL_COLORS_DARK);
+export {
+  EMAIL_URGENCY,
+  EMAIL_URGENCY_DARK
+};

package/dist/i18n/messages/en.json

@@ -145,6 +145,19 @@
       "mainLabel": "Main content",
       "footerLabel": "Footer"
     },
+    "legalDocumentShell": {
+      "contents": "Contents",
+      "version": "Version {version}",
+      "effectiveDate": "Effective {date}"
+    },
+    "errorSurface": {
+      "statusLabel": "HTTP status {status}",
+      "requestId": "Request ID",
+      "permission": "Required permission",
+      "organization": "Organization",
+      "maintenanceWindow": "Scheduled maintenance",
+      "maintenanceProgress": "Maintenance progress {percent}"
+    },
     "topbar": {
       "toggleSidebar": "Toggle sidebar",
       "search": "Search",
@@ -162,6 +175,10 @@
       "next": "Next",
       "dotsLabel": "Choose slide",
       "goToSlide": "Go to slide {index}"
+    },
+    "listRow": {
+      "unread": "Unread",
+      "read": "Read"
     }
   },
   "ui": {
@@ -196,7 +213,13 @@
   },
   "navigation": {
     "steps": {
-      "ariaLabel": "Progress"
+      "ariaLabel": "Progress",
+      "status": {
+        "wait": "Waiting",
+        "process": "Current step",
+        "finish": "Completed",
+        "error": "Error"
+      }
     },
     "breadcrumb": {
       "ariaLabel": "Breadcrumb"
@@ -292,7 +315,11 @@
     "densitySwitch": "Switch to {density} density",
     "rowActions": "Row actions",
     "empty": "No data",
-    "loading": "Loading…"
+    "loading": "Loading…",
+    "error": "Couldn't load this list",
+    "errorDescription": "The data could not be retrieved. Try again in a moment.",
+    "denied": "You don't have access to this list",
+    "deniedDescription": "Ask an administrator to grant you permission to view these records."
   },
   "dataGrid": {
     "search": "Search",
@@ -304,6 +331,10 @@
   },
   "status": {
     "active": "Active",
+    "trialing": "Trialing",
+    "past_due": "Past due",
+    "incomplete": "Incomplete",
+    "canceled": "Canceled",
     "completed": "Completed",
     "delivered": "Delivered",
     "done": "Done",
@@ -353,6 +384,8 @@
   "chart": {
     "empty": "No data to display",
     "summaryCartesian": "Chart with {series} series across {points} data points",
-    "summaryPie": "Pie chart with {slices} slices"
+    "summaryPie": "Pie chart with {slices} slices",
+    "summaryTrend": "Bar trend with {points} data points",
+    "trendCurrent": "current"
   }
 }

package/dist/i18n/messages/ja.json

@@ -145,6 +145,19 @@
       "mainLabel": "メインコンテンツ",
       "footerLabel": "フッター"
     },
+    "legalDocumentShell": {
+      "contents": "目次",
+      "version": "バージョン {version}",
+      "effectiveDate": "施行日 {date}"
+    },
+    "errorSurface": {
+      "statusLabel": "HTTP ステータス {status}",
+      "requestId": "リクエスト ID",
+      "permission": "必要な権限",
+      "organization": "組織",
+      "maintenanceWindow": "計画メンテナンス",
+      "maintenanceProgress": "メンテナンス進捗 {percent}"
+    },
     "topbar": {
       "toggleSidebar": "サイドバーの切り替え",
       "search": "検索",
@@ -162,6 +175,10 @@
       "next": "次へ",
       "dotsLabel": "スライドを選択",
       "goToSlide": "{index} 番目のスライドへ"
+    },
+    "listRow": {
+      "unread": "未読",
+      "read": "既読"
     }
   },
   "ui": {
@@ -196,7 +213,13 @@
   },
   "navigation": {
     "steps": {
-      "ariaLabel": "進行状況"
+      "ariaLabel": "進行状況",
+      "status": {
+        "wait": "未完了",
+        "process": "現在のステップ",
+        "finish": "完了",
+        "error": "エラー"
+      }
     },
     "breadcrumb": {
       "ariaLabel": "パンくずリスト"
@@ -289,7 +312,11 @@
     "densitySwitch": "{density} 表示に切り替え",
     "rowActions": "行の操作",
     "empty": "データがありません",
-    "loading": "読み込み中…"
+    "loading": "読み込み中…",
+    "error": "一覧を取得できませんでした",
+    "errorDescription": "データを取得できませんでした。時間をおいて再試行してください。",
+    "denied": "この一覧を表示する権限がありません",
+    "deniedDescription": "閲覧するには管理者に権限の付与を依頼してください。"
   },
   "dataGrid": {
     "search": "検索",
@@ -301,6 +328,10 @@
   },
   "status": {
     "active": "有効",
+    "trialing": "試用中",
+    "past_due": "支払期限超過",
+    "incomplete": "未完了",
+    "canceled": "解約済み",
     "completed": "完了",
     "delivered": "配達済み",
     "done": "完了",
@@ -350,6 +381,8 @@
   "chart": {
     "empty": "データがありません",
     "summaryCartesian": "{series}系列・{points}データ点のグラフ",
-    "summaryPie": "{slices}区分の円グラフ"
+    "summaryPie": "{slices}区分の円グラフ",
+    "summaryTrend": "{points}データ点の推移棒グラフ",
+    "trendCurrent": "現在"
   }
 }

package/dist/i18n/messages/vi.json

@@ -145,6 +145,19 @@
       "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}"
+    },
+    "errorSurface": {
+      "statusLabel": "Trạng thái HTTP {status}",
+      "requestId": "Mã yêu cầu",
+      "permission": "Quyền yêu cầu",
+      "organization": "Tổ chức",
+      "maintenanceWindow": "Bảo trì theo lịch",
+      "maintenanceProgress": "Tiến độ bảo trì {percent}"
+    },
     "topbar": {
       "toggleSidebar": "Bật/tắt thanh bên",
       "search": "Tìm kiếm",
@@ -162,6 +175,10 @@
       "next": "Sau",
       "dotsLabel": "Chọn slide",
       "goToSlide": "Đến slide {index}"
+    },
+    "listRow": {
+      "unread": "Chưa đọc",
+      "read": "Đã đọc"
     }
   },
   "ui": {
@@ -196,7 +213,13 @@
   },
   "navigation": {
     "steps": {
-      "ariaLabel": "Tiến trình"
+      "ariaLabel": "Tiến trình",
+      "status": {
+        "wait": "Đang chờ",
+        "process": "Bước hiện tại",
+        "finish": "Đã hoàn tất",
+        "error": "Lỗi"
+      }
     },
     "breadcrumb": {
       "ariaLabel": "Đường dẫn"
@@ -289,7 +312,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 +328,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 +381,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. */