@godxjp/ui 5.0.2 → 6.0.1

package/dist/theme/example.service.css

@@ -0,0 +1,37 @@
+/* Service theme — the ONLY file apps may use to customize design tokens.
+ * Copy to: apps/<your-app>/src/theme.css
+ * Import this file once in main.tsx (instead of @godxjp/ui/styles directly). */
+
+@import "@godxjp/ui/styles";
+
+/* Override tokens below. Do NOT add component styles or Tailwind utilities here. */
+:root {
+  /* Brand — pair primary with a focus ring and tinted accent: */
+  /* --primary: 211 73% 15%; */
+  /* --primary-foreground: 0 0% 100%; */
+  /* --ring: 24 99% 46%; */
+  /* --accent: 24 99% 95%; */
+  /* --accent-foreground: 24 99% 28%; */
+
+  /* Semantic status (optional — defaults in base.css): */
+  /* --success: 146 40% 58%; */
+  /* --warning: 44 100% 49%; */
+  /* --info: 223 42% 50%; */
+  /* --attention: 24 99% 46%; */
+
+  /* Tracking-code identity (optional — do not reuse for status): */
+  /* --tracking-internal: 211 73% 15%; */
+  /* --tracking-seller: 44 5% 42%; */
+  /* --tracking-yamato: 24 99% 46%; */
+
+  /* Layout density (optional): */
+  /* --space-page-x: var(--space-8); */
+
+  /* Primitive component tokens — override tokens only, no selector CSS: */
+  /* --card-space-inset: var(--space-section-active); */
+  /* --card-space-header-y: var(--space-stack-sm); */
+  /* --card-space-body-y: var(--space-section-active); */
+  /* --card-space-footer-y: var(--space-stack-sm); */
+  /* --card-title-font-size: var(--font-size-base); */
+  /* --card-header-background-alpha: 0.55; */
+}

package/dist/tokens/base.css

@@ -0,0 +1,13 @@
+/* @godxjp/ui — token manifest.
+ * Services MUST NOT edit package token files directly.
+ * App-specific overrides live in app theme.css after importing @godxjp/ui/styles.
+ */
+
+@import "./foundation.css";
+@import "./primitives/layout.css";
+@import "./primitives/control.css";
+@import "./primitives/card.css";
+@import "./primitives/table.css";
+@import "./primitives/feedback.css";
+@import "./primitives/badge.css";
+@import "./primitives/navigation.css";

package/dist/tokens/foundation.css

@@ -0,0 +1,151 @@
+/* Foundation tokens: color, typography, raw spacing, ratio, radius, shadow. */
+
+:root {
+  /* Color system (HSL components) — dxs-kintai: warm hue-60 neutral spine,
+   * SmartHR blue primary, 和色/wa-iro semantics. */
+  --background: 60 33% 99%; /* #fdfdfb warm off-white */
+  --foreground: 48 8% 13%; /* #23221e SmartHR TEXT_BLACK */
+  --card: 60 33% 99%;
+  --card-foreground: 48 8% 13%;
+  --popover: 60 33% 99%;
+  --popover-foreground: 48 8% 13%;
+  --primary: 204 100% 39%; /* SmartHR MAIN #0077c7 */
+  --primary-foreground: 60 33% 99%;
+  --secondary: 45 15% 95%; /* #f4f3f0 */
+  --secondary-foreground: 48 8% 13%;
+  --muted: 45 15% 95%;
+  --muted-foreground: 44 5% 42%; /* #706d65 SmartHR TEXT_GREY */
+  --accent: 40 13% 91%; /* #ebe9e5 */
+  --accent-foreground: 48 8% 13%;
+  --destructive: 357 64% 44%; /* 茜 #b7282e */
+  --destructive-foreground: 60 33% 99%;
+  --border: 30 7% 83%; /* #d6d3d0 SmartHR BORDER */
+  --input: 30 7% 83%;
+  --ring: 204 100% 39%;
+  --success: 146 40% 58%; /* 若竹 #68be8d */
+  --success-foreground: 60 33% 99%;
+  --warning: 44 100% 49%; /* 山吹 #f8b500 */
+  --warning-foreground: 48 8% 13%;
+  --info: 221 40% 50%; /* 群青 #4c6cb3 */
+  --info-foreground: 60 33% 99%;
+  --attention: 25 99% 46%; /* 朱 #eb6101 */
+  --attention-foreground: 60 33% 99%;
+  --tracking-internal: 204 100% 39%;
+  --tracking-seller: 44 5% 42%;
+  --tracking-yamato: 25 99% 46%;
+
+  /* 和色 (wa-iro) — traditional Japanese accent palette for charts, tags,
+   * decoration. Decorative hex (NOT semantic): never remap a wa-iro to a
+   * semantic role beyond the five canonical mappings used above. */
+  --wa-ai: #165e83; /* 藍   indigo */
+  --wa-gunjo: #4c6cb3; /* 群青 ultramarine */
+  --wa-ruri: #1e50a2; /* 瑠璃 lapis */
+  --wa-kon: #223a70; /* 紺   navy */
+  --wa-wakatake: #68be8d; /* 若竹 young bamboo */
+  --wa-moegi: #006e54; /* 萌葱 spring green */
+  --wa-yamabuki: #f8b500; /* 山吹 mountain yellow */
+  --wa-shu: #eb6101; /* 朱   vermilion */
+  --wa-akane: #b7282e; /* 茜   madder */
+  --wa-enji: #b94047; /* 臙脂 cochineal */
+  --wa-sakura: #fef4f4; /* 桜   cherry (soft bg) */
+  --wa-sumi: #595857; /* 墨   warm ink */
+  --wa-nezu: #949495; /* 鼠   mouse-grey */
+
+  /* Neutral + blue ramps (data viz, fine UI shading). */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --blue-50: #eff6ff;
+  --blue-100: #dbeafe;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --blue-700: #1d4ed8;
+
+  /* Shape and elevation */
+  --radius: 0.375rem;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+
+  /* Typography scale — M PLUS 2 (JIS L1+L2 kanji, Vietnamese subset), one notch
+   * larger than the JP-dense base for comfortable reading (body 14px). */
+  --font-family-sans:
+    "M PLUS 2", "Be Vietnam Pro", "Hiragino Sans", "Noto Sans JP", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-size-xs: 0.8125rem; /* 13px */
+  --font-size-sm: 0.875rem; /* 14px — body */
+  --font-size-base: 0.9375rem; /* 15px */
+  --font-size-lg: 1.1875rem; /* 19px */
+  --font-size-xl: 1.375rem; /* 22px */
+  --font-size-2xl: 1.625rem; /* 26px */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-body: 1.7;
+  --letter-spacing-tight: 0;
+
+  /* Raw spacing scale */
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  /* Golden ratio scale */
+  --ratio-phi: 1.6180339887;
+  --phi-unit: var(--space-4);
+  --phi-n2: calc(var(--phi-unit) / var(--ratio-phi) / var(--ratio-phi));
+  --phi-n1: calc(var(--phi-unit) / var(--ratio-phi));
+  --phi-0: var(--phi-unit);
+  --phi-p1: calc(var(--phi-unit) * var(--ratio-phi));
+  --phi-p2: calc(var(--phi-p1) * var(--ratio-phi));
+}
+
+.dark {
+  /* Warm-tinted dark spine — keeps the hue-60 character at low lightness. */
+  --background: 48 9% 9%;
+  --foreground: 60 20% 96%;
+  --card: 48 8% 12%;
+  --card-foreground: 60 20% 96%;
+  --popover: 48 8% 12%;
+  --popover-foreground: 60 20% 96%;
+  --primary: 204 90% 60%; /* SmartHR blue lifted for dark contrast */
+  --primary-foreground: 48 9% 9%;
+  --secondary: 45 6% 18%;
+  --secondary-foreground: 60 20% 96%;
+  --muted: 45 6% 18%;
+  --muted-foreground: 44 6% 64%;
+  --accent: 45 7% 22%;
+  --accent-foreground: 60 20% 96%;
+  --destructive: 357 55% 52%;
+  --destructive-foreground: 60 20% 96%;
+  --border: 45 6% 22%;
+  --input: 45 6% 22%;
+  --ring: 204 90% 60%;
+  --success: 146 45% 55%;
+  --success-foreground: 48 9% 9%;
+  --warning: 44 95% 55%;
+  --warning-foreground: 48 9% 9%;
+  --info: 221 55% 62%;
+  --info-foreground: 48 9% 9%;
+  --attention: 25 95% 56%;
+  --attention-foreground: 48 9% 9%;
+  --tracking-internal: 204 90% 60%;
+  --tracking-seller: 44 6% 64%;
+  --tracking-yamato: 25 95% 56%;
+}

package/dist/tokens/primitives/badge.css

@@ -0,0 +1,13 @@
+/* Badge primitive tokens. */
+
+:root {
+  --space-badge-gap: var(--space-inline-xs);
+  --space-badge-x: var(--space-2);
+  --space-badge-y: var(--space-1);
+  --code-badge-height: 1.75rem;
+  --code-badge-gap: var(--space-inline-sm);
+  --code-badge-padding-x: var(--space-2);
+  --code-badge-bg-alpha: 0.055;
+  --code-badge-border-alpha: 0.28;
+  --code-badge-separator-alpha: 0.22;
+}

package/dist/tokens/primitives/card.css

@@ -0,0 +1,29 @@
+/* Card primitive tokens: card chrome derives from foundation + layout primitives. */
+
+:root {
+  --card-space-inset: var(--space-section-active);
+  --card-space-header-y: var(--space-stack-sm);
+  --card-space-body-y: var(--space-section-active);
+  --card-space-footer-y: var(--space-stack-sm);
+  --card-space-gap: var(--space-stack-xs);
+  --card-title-font-size: var(--font-size-base);
+  --card-title-line-height: var(--line-height-tight);
+  --card-title-font-weight: var(--font-weight-semibold);
+  --card-description-font-size: var(--font-size-sm);
+  --card-description-line-height: var(--line-height-normal);
+  --card-background: var(--card);
+  --card-foreground-token: var(--card-foreground);
+  --card-border-token: var(--border);
+  --card-header-background: var(--muted);
+  --card-header-background-alpha: 0.55;
+  --card-radius: var(--radius);
+  --card-stat-label-font-size: var(--font-size-xs);
+  --card-stat-label-font-weight: var(--font-weight-medium);
+  --card-stat-label-letter-spacing: 0.04em;
+  --card-stat-value-font-size: 1.625rem;
+  --card-stat-value-line-height: 1.1;
+  --card-stat-value-font-weight: var(--font-weight-semibold);
+  --card-stat-hint-font-size: var(--font-size-xs);
+  --card-stat-gap: var(--space-stack-xs);
+  --card-stat-icon-size: 2.25rem;
+}

package/dist/tokens/primitives/control.css

@@ -0,0 +1,55 @@
+/* Control primitive tokens: heights, horizontal padding, adjacent control sizes. */
+
+:root {
+  --control-height-compact: 1.75rem;
+  --control-height-default: 2rem;
+  --control-height-comfortable: 2.75rem;
+  --control-padding-x-compact: var(--space-2);
+  --control-padding-x-default: var(--space-3);
+  --control-padding-x-comfortable: var(--space-4);
+
+  --control-height: var(--control-height-default);
+  /* Adjacent control sizes, derived from the active --control-height.
+   * Default/compact use a 4px/8px step; density overrides comfortable
+   * (which steps 44→36→32 per the design's spacing-density spec). */
+  --control-height-sm: calc(var(--control-height) - 0.25rem);
+  --control-height-lg: calc(var(--control-height) + 0.25rem);
+  --control-height-xs: calc(var(--control-height) - 0.5rem);
+  --control-padding-x: var(--control-padding-x-default);
+  --control-gap: var(--space-inline-sm);
+  --control-gap-sm: var(--space-inline-xs);
+  --control-radius: var(--radius);
+  --control-icon-size: 1rem;
+  --control-icon-size-sm: 0.875rem;
+  --control-focus-ring-width: 2px;
+
+  --checkbox-size: 1rem;
+  --choice-gap: var(--space-inline-sm);
+  --choice-group-gap-x: var(--space-6);
+  --choice-group-gap-y: var(--space-3);
+  --choice-description-gap: 0.125rem;
+  --choice-control-offset: 0.125rem;
+
+  --switch-width: 2.25rem;
+  --switch-height: 1.25rem;
+  --switch-thumb-size: 1rem;
+  --switch-thumb-translate: 1rem;
+
+  --slider-track-height: 0.375rem;
+  --slider-thumb-size: 1rem;
+
+  --color-picker-input-width: 6.5rem;
+
+  --command-list-max-height: min(300px, 50vh);
+  --command-input-padding-x: var(--space-3);
+  --command-group-padding: var(--space-1);
+  --command-item-padding-y: var(--space-2);
+  --command-item-padding-x: var(--space-2);
+  --search-input-edge-inset: var(--space-3);
+  --search-input-start-padding: calc(
+    var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap)
+  );
+  --search-input-end-padding: calc(
+    var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap)
+  );
+}

package/dist/tokens/primitives/feedback.css

@@ -0,0 +1,17 @@
+/* Feedback primitive tokens: dialog, alert, empty state. */
+
+:root {
+  --space-dialog-inset: var(--space-5);
+  --space-dialog-gap: var(--space-stack-md);
+  --space-dialog-close-offset: var(--space-4);
+  --space-alert-inset: var(--space-section-active);
+  --space-alert-gap: var(--space-inline-md);
+  --space-alert-inner-gap: var(--space-stack-sm);
+  --space-alert-dismiss-offset: var(--space-3);
+  --space-empty-state-y: var(--space-10);
+  --space-empty-state-x: var(--space-6);
+  --skeleton-row-gap: var(--space-stack-sm);
+  --skeleton-cell-gap: var(--space-inline-lg);
+  --skeleton-card-inset: var(--space-section-active);
+  --skeleton-radius: var(--radius);
+}

package/dist/tokens/primitives/layout.css

@@ -0,0 +1,20 @@
+/* Layout primitive tokens: page, section, stack, inline. */
+
+:root {
+  --space-page-x: var(--phi-0);
+  --space-page-y: var(--phi-0);
+  --space-section: var(--phi-0);
+  --space-stack-xs: var(--space-1);
+  --space-stack-sm: var(--space-2);
+  --space-stack-md: var(--phi-0);
+  --space-stack-lg: var(--phi-p1);
+  --space-stack-xl: var(--phi-p2);
+  --space-inline-xs: var(--space-1);
+  --space-inline-sm: var(--space-2);
+  --space-inline-md: var(--phi-n1);
+  --space-inline-lg: var(--phi-0);
+
+  --space-page-active-x: var(--space-page-x);
+  --space-page-active-y: var(--space-page-y);
+  --space-section-active: var(--space-section);
+}

package/dist/tokens/primitives/navigation.css

@@ -0,0 +1,13 @@
+/* Navigation primitive tokens: pagination, filters, compact pickers. */
+
+:root {
+  --pagination-gap: var(--space-inline-sm);
+  --pagination-item-gap: var(--space-inline-xs);
+  --pagination-size-width: 5.5rem;
+  --pagination-total-font-size: var(--font-size-sm);
+  --filter-bar-gap: var(--space-3);
+  --filter-bar-padding-y: var(--space-2);
+  --filter-label-font-size: var(--font-size-xs);
+  --filter-picker-width-sm: 11rem;
+  --filter-picker-width-md: 14rem;
+}

package/dist/tokens/primitives/table.css

@@ -0,0 +1,10 @@
+/* Table primitive tokens: row height, cell padding. */
+
+:root {
+  --table-row-height-compact: 1.75rem;
+  --table-row-height-default: 2rem;
+  --table-row-height-comfortable: 2.75rem;
+  --table-row-height: var(--table-row-height-default);
+  --table-cell-padding-y: var(--space-2);
+  --space-table-cell-x: var(--control-padding-x);
+}

package/dist/types-mvzYGrma.d.ts

@@ -0,0 +1,37 @@
+/** Clock display — sent as `x-time-format` to backend. */
+type AppTimeFormat = "24h" | "12h";
+declare const APP_TIME_FORMATS: readonly ["24h", "12h"];
+declare const APP_REQUEST_HEADER_TIME_FORMAT: "x-time-format";
+/** date-fns pattern for time-only display. */
+declare function getTimePattern(timeFormat: AppTimeFormat): string;
+declare function isAppTimeFormat(value: string | null | undefined): value is AppTimeFormat;
+
+/** Date-only display preset — sent as `x-date-format` to backend. */
+
+type AppDateFormat = "iso" | "dmy" | "mdy";
+declare const APP_DATE_FORMATS: readonly ["iso", "dmy", "mdy"];
+declare const APP_REQUEST_HEADER_DATE_FORMAT: "x-date-format";
+/** date-fns pattern for date-only display. */
+declare function getDatePattern(dateFormat: AppDateFormat): string;
+/** date-fns pattern for date + time (table cells). */
+declare function getDateTimePattern(timeFormat: AppTimeFormat, dateFormat: AppDateFormat): string;
+declare function isAppDateFormat(value: string | null | undefined): value is AppDateFormat;
+
+/** Supported UI locales — sent as `x-locale` to backend. */
+type AppLocale = "vi" | "en" | "ja";
+/** IANA timezone identifier — sent as `x-timezone` to backend. */
+type AppTimezone = string;
+/** How to resolve the initial timezone when nothing is stored. */
+type AppTimezoneDefault = "browser" | "system" | (AppTimezone & {});
+
+declare const APP_LOCALES: readonly ["vi", "en", "ja"];
+declare const APP_REQUEST_HEADER_LOCALE: "x-locale";
+declare const APP_REQUEST_HEADER_TIMEZONE: "x-timezone";
+type AppRequestHeaders = {
+    "x-locale": AppLocale;
+    "x-timezone": AppTimezone;
+    "x-time-format": AppTimeFormat;
+    "x-date-format": AppDateFormat;
+};
+
+export { APP_DATE_FORMATS as A, APP_LOCALES as a, APP_REQUEST_HEADER_DATE_FORMAT as b, APP_REQUEST_HEADER_LOCALE as c, APP_REQUEST_HEADER_TIMEZONE as d, APP_REQUEST_HEADER_TIME_FORMAT as e, APP_TIME_FORMATS as f, type AppDateFormat as g, type AppLocale as h, type AppRequestHeaders as i, type AppTimeFormat as j, type AppTimezone as k, type AppTimezoneDefault as l, getDatePattern as m, getDateTimePattern as n, getTimePattern as o, isAppDateFormat as p, isAppTimeFormat as q };

package/dist/use-toast-Dol5bdY3.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ExternalToast, toast as toast$1 } from 'sonner';
+
+interface SkeletonRowsProps {
+    rows?: number;
+    columns?: number;
+    className?: string;
+}
+/** Skeleton for a flat list of rows (use inside a Card or section). */
+declare function SkeletonRows({ rows, columns, className }: SkeletonRowsProps): react_jsx_runtime.JSX.Element;
+/** Skeleton matching the DataTable layout — header row + N body rows. */
+declare function SkeletonTable({ rows, columns }: SkeletonRowsProps): react_jsx_runtime.JSX.Element;
+/** Skeleton matching a Card detail layout — title + 6 metadata rows. */
+declare function SkeletonDetail(): react_jsx_runtime.JSX.Element;
+/** Skeleton matching a stat card / dashboard tile. */
+declare function SkeletonCard(): react_jsx_runtime.JSX.Element;
+
+type LegacyToastOptions = ExternalToast & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: "default" | "destructive" | "success";
+};
+type ToastFn = typeof toast$1 & ((options: LegacyToastOptions) => ReturnType<typeof toast$1>);
+/** Sonner toast + legacy `{ title, variant }` object form. */
+declare const toast: ToastFn;
+/** Legacy hook — prefer `toast` import directly; kept for existing admin pages. */
+declare function useToast(): {
+    toast: (options: LegacyToastOptions) => string | number;
+    dismiss: (id?: number | string) => string | number;
+    toasts: readonly [];
+};
+
+export { type LegacyToastOptions as L, SkeletonCard as S, SkeletonDetail as a, SkeletonRows as b, SkeletonTable as c, toast as t, useToast as u };