@godxjp/ui 5.0.2 → 6.0.0

package/src/lib/control-styles.ts

@@ -0,0 +1,33 @@
+/** Shared control sizing — reads `--control-height`, `--font-size-*` from density / theme. */
+export const controlFieldClass =
+  "ui-control w-full rounded-lg border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
+
+export const controlMultilineClass =
+  "ui-control-multiline w-full rounded-lg border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
+
+export const controlTriggerClass =
+  "ui-control flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-input bg-background shadow-sm focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1";
+
+export const controlIconClass = "size-[length:var(--control-height)] shrink-0";
+
+export const controlIconSmClass = "size-[calc(var(--control-height)-0.5rem)] shrink-0";
+
+/** Leading/affix icon inside an input row (search, command) — sized to `--control-icon-size`. */
+export const controlIconLeadingClass = "size-[length:var(--control-icon-size)] shrink-0";
+
+export const tableRowHeightClass = "h-[length:var(--table-row-height)]";
+
+export const tableHeadHeightClass = "h-[length:var(--table-row-height)]";
+
+export const tableCellPaddingClass = "py-[length:var(--table-cell-padding-y)]";
+
+/** Semantic status / badge tones — always use tokens, never raw Tailwind palette. */
+export const toneSuccessClass = "border-success/30 bg-success/10 text-success";
+
+export const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-foreground";
+
+export const toneInfoClass = "border-info/30 bg-info/10 text-info";
+
+export const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-destructive";
+
+export const toneNeutralClass = "border-border bg-muted text-muted-foreground";

package/src/lib/datetime/detect.ts

@@ -0,0 +1,25 @@
+import { isValidHhmm } from "./parse";
+
+export type FormatDateKind =
+  | "auto"
+  | "date"
+  | "datetime"
+  | "time"
+  | "long"
+  | "relative"
+  | "calendar";
+
+const DATE_ONLY_RE = /^\d{4}-\d{2}-\d{2}$/;
+
+/** Infer display kind from raw value — ISO date, HH:mm, or instant. */
+export function detectFormatDateKind(value: string | Date): Exclude<FormatDateKind, "auto"> {
+  if (value instanceof Date) return "datetime";
+  const trimmed = value.trim();
+  if (isValidHhmm(trimmed)) return "time";
+  if (DATE_ONLY_RE.test(trimmed)) return "date";
+  return "datetime";
+}
+
+export function isDateOnlyString(value: string): boolean {
+  return DATE_ONLY_RE.test(value.trim());
+}

package/src/lib/datetime/format-date.ts

@@ -0,0 +1,100 @@
+import {
+  formatAppDate,
+  formatAppDateLong,
+  formatAppDateTime,
+  formatAppRelative,
+  formatAppTime,
+  formatCalendarDate,
+  formatTimeOfDay,
+  type FormatDatetimeOptions,
+} from "./format";
+import { detectFormatDateKind, type FormatDateKind } from "./detect";
+import { isValidHhmm, parseDateInput } from "./parse";
+
+const EMPTY = "—";
+
+export type FormatDateOptions = FormatDatetimeOptions & {
+  /**
+   * Output preset. Default `auto` detects ISO date / HH:mm / instant.
+   * Locale, timezone, and 12h|24h fall back to AppProvider when omitted.
+   */
+  kind?: FormatDateKind;
+  /** Treat `Date` as calendar pick (react-day-picker) — not an instant. */
+  calendar?: boolean;
+};
+
+function resolveKind(
+  value: string | Date,
+  options?: FormatDateOptions,
+): Exclude<FormatDateKind, "auto"> {
+  if (options?.kind && options.kind !== "auto") return options.kind;
+  if (options?.calendar && value instanceof Date) return "calendar";
+  return detectFormatDateKind(value);
+}
+
+/**
+ * **Single entry point** for all date/time display in GX apps.
+ *
+ * - Defaults: locale, timezone, timeFormat from AppProvider (`syncDatetimeContext`)
+ * - Optional overrides: `{ timezone: "Asia/Tokyo" }` per call
+ * - Auto-detect: `"2026-05-01"` → date, `"14:30"` → time, ISO instant → datetime
+ * - International patterns: ISO 8601 date (`yyyy-MM-dd`) + ISO datetime (`yyyy-MM-dd HH:mm`)
+ */
+export function formatDate(
+  value: string | Date | null | undefined,
+  options?: FormatDateOptions,
+): string {
+  if (value == null || value === "") return EMPTY;
+
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return EMPTY;
+
+    const kind = resolveKind(trimmed, options);
+    switch (kind) {
+      case "time":
+        return isValidHhmm(trimmed)
+          ? formatTimeOfDay(trimmed, options)
+          : formatAppTime(trimmed, options);
+      case "date":
+        return formatAppDate(trimmed, options);
+      case "long":
+        return formatAppDateLong(trimmed, options);
+      case "relative":
+        return formatAppRelative(trimmed, options);
+      case "calendar":
+      case "datetime":
+      default:
+        return formatAppDateTime(trimmed, options);
+    }
+  }
+
+  if (!(value instanceof Date) || Number.isNaN(value.getTime())) return EMPTY;
+
+  const kind = resolveKind(value, options);
+  switch (kind) {
+    case "calendar":
+      return formatCalendarDate(value, options);
+    case "date":
+      return formatCalendarDate(value, options);
+    case "time":
+      return formatAppTime(value, options);
+    case "long":
+      return formatAppDateLong(value, options);
+    case "relative":
+      return formatAppRelative(value, options);
+    case "datetime":
+    default:
+      return formatAppDateTime(value, options);
+  }
+}
+
+/** True when value looks like a displayable date/time (string or valid Date). */
+export function isFormatDateValue(value: unknown): value is string | Date {
+  if (value instanceof Date) return !Number.isNaN(value.getTime());
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  if (!trimmed) return false;
+  if (isValidHhmm(trimmed)) return true;
+  return parseDateInput(trimmed) != null;
+}

package/src/lib/datetime/format.ts

@@ -0,0 +1,140 @@
+import { TZDate } from "@date-fns/tz";
+import { format, formatDistanceToNow, type Locale } from "date-fns";
+import { getDateFnsLocale } from "../../app/locales";
+import { getDatePattern, getDateTimePattern } from "../../app/date-formats";
+import { getTimePattern, type AppTimeFormat } from "../../app/time-formats";
+import type { AppLocale, AppDateFormat } from "../../app/types";
+import { calendarDateToTZDate, hhmmToTZDate, parseDateInput } from "./parse";
+import { isDateOnlyString } from "./detect";
+import { getDatetimeContext } from "./sync";
+
+export type FormatDatetimeOptions = {
+  locale?: Locale | AppLocale;
+  timezone?: string;
+  timeFormat?: AppTimeFormat;
+  dateFormat?: AppDateFormat;
+};
+
+type ResolvedFormatOptions = {
+  locale: Locale;
+  timezone: string;
+  timeFormat: AppTimeFormat;
+  dateFormat: AppDateFormat;
+};
+
+function resolveLocale(locale?: Locale | AppLocale): Locale {
+  if (!locale) return getDatetimeContext().dateFnsLocale;
+  if (typeof locale === "string") return getDateFnsLocale(locale);
+  return locale;
+}
+
+function resolveOptions(options?: FormatDatetimeOptions): ResolvedFormatOptions {
+  const ctx = getDatetimeContext();
+  return {
+    locale: resolveLocale(options?.locale),
+    timezone: options?.timezone ?? ctx.timezone,
+    timeFormat: options?.timeFormat ?? ctx.timeFormat,
+    dateFormat: options?.dateFormat ?? ctx.dateFormat,
+  };
+}
+
+function formatTZDate(zoned: TZDate, pattern: string, options: ResolvedFormatOptions): string {
+  return format(zoned, pattern, { locale: options.locale });
+}
+
+function instantToTZDate(value: Date, timezone: string): TZDate {
+  return new TZDate(value, timezone);
+}
+
+const EMPTY = "—";
+
+/** Date-only from calendar picker — uses Y/M/D in app timezone. */
+export function formatCalendarDate(
+  value: Date | null | undefined,
+  options?: FormatDatetimeOptions,
+): string {
+  if (!value) return EMPTY;
+  const resolved = resolveOptions(options);
+  const zoned = calendarDateToTZDate(value, resolved.timezone);
+  return formatTZDate(zoned, getDatePattern(resolved.dateFormat), resolved);
+}
+
+/** Date-only from ISO instant or `yyyy-MM-dd` string — date part in app timezone. */
+export function formatAppDate(
+  value: string | Date | null | undefined,
+  options?: FormatDatetimeOptions,
+): string {
+  const resolved = resolveOptions(options);
+  if (typeof value === "string" && isDateOnlyString(value)) {
+    const [year, month, day] = value.split("-").map(Number);
+    const zoned = new TZDate(year, month - 1, day, resolved.timezone);
+    return formatTZDate(zoned, getDatePattern(resolved.dateFormat), resolved);
+  }
+  const parsed = parseDateInput(value);
+  if (!parsed) return EMPTY;
+  const zoned = instantToTZDate(parsed, resolved.timezone);
+  return formatTZDate(zoned, getDatePattern(resolved.dateFormat), resolved);
+}
+
+/** Date + time in app timezone. */
+export function formatAppDateTime(
+  value: string | Date | null | undefined,
+  options?: FormatDatetimeOptions,
+): string {
+  const parsed = parseDateInput(value);
+  if (!parsed) return EMPTY;
+  const resolved = resolveOptions(options);
+  const zoned = instantToTZDate(parsed, resolved.timezone);
+  return formatTZDate(
+    zoned,
+    getDateTimePattern(resolved.timeFormat, resolved.dateFormat),
+    resolved,
+  );
+}
+
+/** Time from ISO instant in app timezone. */
+export function formatAppTime(
+  value: string | Date | null | undefined,
+  options?: FormatDatetimeOptions,
+): string {
+  const parsed = parseDateInput(value);
+  if (!parsed) return EMPTY;
+  const resolved = resolveOptions(options);
+  const zoned = instantToTZDate(parsed, resolved.timezone);
+  return formatTZDate(zoned, getTimePattern(resolved.timeFormat), resolved);
+}
+
+/** Long date (PPP) in app timezone. */
+export function formatAppDateLong(
+  value: string | Date | null | undefined,
+  options?: FormatDatetimeOptions,
+): string {
+  const parsed = parseDateInput(value);
+  if (!parsed) return EMPTY;
+  const resolved = resolveOptions(options);
+  const zoned = instantToTZDate(parsed, resolved.timezone);
+  return formatTZDate(zoned, "PPP", resolved);
+}
+
+/** Relative time — instant-based; locale from context. */
+export function formatAppRelative(
+  value: string | Date | null | undefined,
+  options?: Pick<FormatDatetimeOptions, "locale">,
+): string {
+  const parsed = parseDateInput(value);
+  if (!parsed) return EMPTY;
+  const locale = resolveLocale(options?.locale);
+  return formatDistanceToNow(parsed, { addSuffix: true, locale });
+}
+
+/** Format canonical HH:mm (24h storage) for display per timeFormat + locale. */
+export function formatTimeOfDay(
+  hhmm: string | null | undefined,
+  options?: FormatDatetimeOptions,
+): string {
+  if (!hhmm) return EMPTY;
+  const resolved = resolveOptions(options);
+  const zoned = hhmmToTZDate(hhmm, resolved.timezone);
+  if (!zoned) return hhmm;
+  return formatTZDate(zoned, getTimePattern(resolved.timeFormat), resolved);
+}

package/src/lib/datetime/index.ts

@@ -0,0 +1,25 @@
+export {
+  syncDatetimeContext,
+  getDatetimeContext,
+  resetDatetimeContextForTests,
+  type DatetimeContext,
+} from "./sync";
+export {
+  parseDateInput,
+  calendarDateToTZDate,
+  isValidHhmm,
+  normalizeHhmm,
+  hhmmToTZDate,
+} from "./parse";
+export {
+  formatCalendarDate,
+  formatAppDate,
+  formatAppDateTime,
+  formatAppTime,
+  formatAppDateLong,
+  formatAppRelative,
+  formatTimeOfDay,
+  type FormatDatetimeOptions,
+} from "./format";
+export { formatDate, isFormatDateValue, type FormatDateOptions } from "./format-date";
+export { detectFormatDateKind, isDateOnlyString, type FormatDateKind } from "./detect";

package/src/lib/datetime/parse.ts

@@ -0,0 +1,51 @@
+import { TZDate } from "@date-fns/tz";
+import { parseISO } from "date-fns";
+import { isDateOnlyString } from "./detect";
+
+/** Parse ISO string or Date — returns null for invalid values. */
+export function parseDateInput(value: string | Date | null | undefined): Date | null {
+  if (value == null) return null;
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  const trimmed = value.trim();
+  if (isDateOnlyString(trimmed)) {
+    const [year, month, day] = trimmed.split("-").map(Number);
+    return new Date(year, month - 1, day);
+  }
+  const parsed = parseISO(trimmed);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+
+/** Calendar date from react-day-picker — interpret Y/M/D in app timezone, not browser local. */
+export function calendarDateToTZDate(date: Date, timezone: string): TZDate {
+  return new TZDate(date.getFullYear(), date.getMonth(), date.getDate(), timezone);
+}
+
+const HHMM_RE = /^([01]?\d|2[0-3]):([0-5]\d)$/;
+
+export function isValidHhmm(value: string): boolean {
+  return HHMM_RE.test(value.trim());
+}
+
+/** Normalize loose input ("9:30") to canonical 24h "09:30". */
+export function normalizeHhmm(value: string): string | null {
+  const trimmed = value.trim();
+  if (isValidHhmm(trimmed)) {
+    const [h, m] = trimmed.split(":");
+    return `${h.padStart(2, "0")}:${m}`;
+  }
+  const loose = /^(\d{1,2}):(\d{2})$/.exec(trimmed);
+  if (!loose) return null;
+  const hours = Number(loose[1]);
+  const minutes = Number(loose[2]);
+  if (hours > 23 || minutes > 59) return null;
+  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+
+/** Map canonical HH:mm to a TZDate on today's calendar date in the given timezone. */
+export function hhmmToTZDate(hhmm: string, timezone: string): TZDate | null {
+  const normalized = normalizeHhmm(hhmm);
+  if (!normalized) return null;
+  const [h, m] = normalized.split(":").map(Number);
+  const today = TZDate.tz(timezone);
+  return new TZDate(today.getFullYear(), today.getMonth(), today.getDate(), h, m, 0, 0, timezone);
+}

package/src/lib/datetime/sync.ts

@@ -0,0 +1,48 @@
+import type { Locale } from "date-fns";
+import { getDateFnsLocale } from "../../app/locales";
+import { resolveDefaultDateFormat } from "../../app/date-format-labels";
+import type { AppLocale, AppTimeFormat, AppDateFormat } from "../../app/types";
+
+export type DatetimeContext = {
+  locale: AppLocale;
+  dateFnsLocale: Locale;
+  timezone: string;
+  timeFormat: AppTimeFormat;
+  dateFormat: AppDateFormat;
+};
+
+const DEFAULT_LOCALE: AppLocale = "vi";
+
+const defaultContext = (): DatetimeContext => ({
+  locale: DEFAULT_LOCALE,
+  dateFnsLocale: getDateFnsLocale(DEFAULT_LOCALE),
+  timezone: "Asia/Ho_Chi_Minh",
+  timeFormat: "24h",
+  dateFormat: resolveDefaultDateFormat(DEFAULT_LOCALE),
+});
+
+let syncedContext: DatetimeContext = defaultContext();
+
+/** Sync module-level datetime prefs from AppProvider (mirrors syncI18nLocale). */
+export function syncDatetimeContext(
+  partial: Pick<DatetimeContext, "locale" | "timezone" | "timeFormat" | "dateFormat"> & {
+    dateFnsLocale?: Locale;
+  },
+): void {
+  syncedContext = {
+    locale: partial.locale,
+    timezone: partial.timezone,
+    timeFormat: partial.timeFormat,
+    dateFormat: partial.dateFormat,
+    dateFnsLocale: partial.dateFnsLocale ?? getDateFnsLocale(partial.locale),
+  };
+}
+
+export function getDatetimeContext(): Readonly<DatetimeContext> {
+  return syncedContext;
+}
+
+/** Vitest only — reset to defaults between cases. */
+export function resetDatetimeContextForTests(): void {
+  syncedContext = defaultContext();
+}

package/src/lib/format.ts

@@ -0,0 +1,114 @@
+// Shared formatting helpers — every admin component uses these instead of
+// inline string templates so the platform speaks one language for dates,
+// sizes, money, IDs.
+import { formatDate, type FormatDateOptions, type FormatDatetimeOptions } from "./datetime";
+import { translateCurrent } from "../i18n/translate";
+
+export type FormatOptions = FormatDatetimeOptions & FormatDateOptions;
+
+/** @deprecated Prefer `formatDate(value, { kind: "datetime" })` — delegates to unified formatter. */
+export function formatTime(
+  value: string | Date | null | undefined,
+  options?: FormatOptions,
+): string {
+  return formatDate(value, { ...options, kind: "time" });
+}
+
+/** @deprecated Prefer `formatDate(value, { kind: "datetime" })`. */
+export function formatDateTime(
+  value: string | Date | null | undefined,
+  options?: FormatOptions,
+): string {
+  return formatDate(value, { ...options, kind: "datetime" });
+}
+
+/** @deprecated Prefer `formatDate(value, { kind: "long" })`. */
+export function formatDateLong(
+  value: string | Date | null | undefined,
+  options?: FormatOptions,
+): string {
+  return formatDate(value, { ...options, kind: "long" });
+}
+
+/** @deprecated Prefer `formatDate(value, { kind: "relative" })`. */
+export function formatRelative(
+  value: string | Date | null | undefined,
+  options?: Pick<FormatOptions, "locale">,
+): string {
+  return formatDate(value, { ...options, kind: "relative" });
+}
+
+/** Bytes → "1.2 MB". */
+export function formatBytes(n: number | null | undefined): string {
+  if (n == null) return "—";
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  if (n < 1024 * 1024 * 1024) return `${(n / 1024 / 1024).toFixed(1)} MB`;
+  return `${(n / 1024 / 1024 / 1024).toFixed(2)} GB`;
+}
+
+/** ISO 4217 minor units → display string. e.g. (1995, "USD") → "$19.95". */
+export function formatCurrency(amountMinor: number | null | undefined, currency: string): string {
+  if (amountMinor == null || !currency) return "—";
+  // Most ISO 4217 currencies use 2 decimal places; JPY/VND/KRW use 0.
+  const zeroDecimal = [
+    "JPY",
+    "VND",
+    "KRW",
+    "CLP",
+    "ISK",
+    "BIF",
+    "DJF",
+    "GNF",
+    "KMF",
+    "RWF",
+    "XAF",
+    "XOF",
+    "XPF",
+  ];
+  const minorUnitDigits = zeroDecimal.includes(currency.toUpperCase()) ? 0 : 2;
+  const major = amountMinor / Math.pow(10, minorUnitDigits);
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: minorUnitDigits,
+    maximumFractionDigits: minorUnitDigits,
+  }).format(major);
+}
+
+/** UUIDv7 / UUIDv4 → first 8 chars + ellipsis. Pair with a Tooltip showing full. */
+export function shortId(id: string | null | undefined): string {
+  if (!id) return "—";
+  if (id.length <= 12) return id;
+  return id.slice(0, 8) + "…";
+}
+
+/** Translate any backend error into something a user can act on. Falls back
+ * to a generic message for non-Error objects (avoids dumping stack traces). */
+export function humanError(err: unknown): string {
+  if (err instanceof Error) {
+    const msg = err.message;
+    const cleaned = msg.replace(/^\d{3}[^:]*:\s*/, "");
+    if (cleaned && cleaned !== "(empty)") return cleaned;
+    return translateCurrent("feedback.genericError");
+  }
+  return translateCurrent("feedback.genericError");
+}
+
+// Re-export datetime utilities for apps that import from lib/format.
+export {
+  formatDate,
+  isFormatDateValue,
+  formatCalendarDate,
+  formatAppDate,
+  formatAppDateTime,
+  formatAppTime,
+  formatAppDateLong,
+  formatAppRelative,
+  formatTimeOfDay,
+  parseDateInput,
+  normalizeHhmm,
+  isValidHhmm,
+  detectFormatDateKind,
+} from "./datetime";
+export type { FormatDateOptions, FormatDatetimeOptions, FormatDateKind } from "./datetime";

package/src/lib/hooks.ts

@@ -0,0 +1,54 @@
+// Shared hooks for admin components.
+import { useEffect, useState } from "react";
+
+/**
+ * Returns a debounced view of `value`, updated only after `delay` ms of no
+ * change. Use for search inputs to avoid querying on every keystroke.
+ *
+ * setState runs only inside setTimeout (async) — compliant with
+ * react-hooks/set-state-in-effect.
+ */
+export function useDebouncedValue<T>(value: T, delay = 250): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setDebounced(value);
+    }, delay);
+    return () => {
+      clearTimeout(t);
+    };
+  }, [value, delay]);
+  return debounced;
+}
+
+/**
+ * Returns true while `ms` haven't elapsed since `signal` last flipped truthy.
+ * setState is scheduled asynchronously (setTimeout 0 / ms) — Rules of React safe.
+ */
+export function useTimeoutFlag(signal: unknown, ms = 2_000): boolean {
+  const [active, setActive] = useState(false);
+
+  useEffect(() => {
+    if (!signal) {
+      const id = window.setTimeout(() => {
+        setActive(false);
+      }, 0);
+      return () => {
+        clearTimeout(id);
+      };
+    }
+
+    const showId = window.setTimeout(() => {
+      setActive(true);
+    }, 0);
+    const hideId = window.setTimeout(() => {
+      setActive(false);
+    }, ms);
+    return () => {
+      clearTimeout(showId);
+      clearTimeout(hideId);
+    };
+  }, [signal, ms]);
+
+  return Boolean(signal) && active;
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/variants.ts

@@ -0,0 +1,40 @@
+/** Prop → internal class maps. Apps use component props, never these classes directly. */
+import type {
+  InlineGapProp,
+  PageContainerVariantProp,
+  PageDensityProp,
+  StackGapProp,
+} from "../props/vocabulary";
+
+export type Density = PageDensityProp;
+export type StackGap = StackGapProp;
+export type InlineGap = InlineGapProp;
+export type PageContainerVariant = PageContainerVariantProp;
+
+export const densityClass: Record<PageDensityProp, string> = {
+  compact: "ui-density-compact",
+  default: "ui-density-default",
+  comfortable: "ui-density-comfortable",
+};
+
+export const pageContainerVariantClass: Record<PageContainerVariantProp, string | undefined> = {
+  default: undefined,
+  narrow: "ui-page-container--narrow",
+  flush: "ui-page-container--flush",
+  ghost: "ui-page-container--ghost",
+};
+
+export const stackGapClass: Record<StackGapProp, string> = {
+  xs: "ui-stack-xs",
+  sm: "ui-stack-sm",
+  md: "ui-stack-md",
+  lg: "ui-stack-lg",
+  xl: "ui-stack-xl",
+};
+
+export const inlineGapClass: Record<InlineGapProp, string> = {
+  xs: "ui-inline-xs",
+  sm: "ui-inline-sm",
+  md: "ui-inline-md",
+  lg: "ui-inline-lg",
+};