@suphark/ui 0.1.0

package/src/index.ts

@@ -0,0 +1,156 @@
+/**
+ * @suphark/ui — design system กลางของ Suphark apps
+ *
+ * - `components/ui/*`     shadcn/ui (base-nova / Base UI) ต้นฉบับ — สร้าง/อัปเดตด้วย `pnpm dlx shadcn@latest add` เท่านั้น ห้ามแก้มือ
+ * - `components/shared/*` component ที่เราประกอบเอง (ปุ่มมาตรฐาน, form-field บน react-hook-form, layout, theme, …)
+ * - `lib/*`, `hooks/*`    utility ที่ component ข้างบนใช้ร่วมกัน
+ *
+ * barrel นี้ **ไม่พึ่ง next** — component ที่ใช้ next/navigation หรือ next/link อยู่ที่ `@suphark/ui/next`
+ * `chart` (recharts) ไม่อยู่ใน barrel: import ตรง `@suphark/ui/components/ui/chart` เมื่อแอปติดตั้ง recharts เอง
+ */
+
+export * from "./components/shared/button";
+export { ClientRedirect } from "./components/shared/client-redirect";
+export { Combobox } from "./components/shared/combobox";
+export { DataList, DataRow } from "./components/shared/data-list";
+export { DateRangePicker } from "./components/shared/date/date-range-picker";
+export { DescriptionList } from "./components/shared/description-list";
+export { EmptyRow } from "./components/shared/empty-row";
+export { EmptyState } from "./components/shared/empty-state";
+export { EnvSnippet, randomSecret } from "./components/shared/env-snippet";
+export { FormFieldBoolean } from "./components/shared/form/form-field-boolean";
+export { FormFieldColorSelect } from "./components/shared/form/form-field-color-select";
+export { FormFieldCombobox } from "./components/shared/form/form-field-combobox";
+export { FormFieldDate } from "./components/shared/form/form-field-date";
+export { FormFieldFormattedNumber } from "./components/shared/form/form-field-formatted-number";
+export {
+  type AutocompleteOption,
+  FormFieldInput,
+  type FormFieldInputProps,
+} from "./components/shared/form/form-field-input";
+export { FormFieldRadioCards } from "./components/shared/form/form-field-radio-cards";
+export { FormFieldRadioGroup } from "./components/shared/form/form-field-radio-group";
+export { FormFieldSelect, type SelectOption } from "./components/shared/form/form-field-select";
+export {
+  SimpleSelect,
+  type SimpleSelectGroup,
+  type SimpleSelectOption,
+  type SimpleSelectOptions,
+  type SimpleSelectProps,
+} from "./components/shared/form/simple-select";
+export { FormMessage, type FormState } from "./components/shared/form-message";
+export { Initials, initialsOf } from "./components/shared/initials";
+export { ErrorState, type RouteError } from "./components/shared/layout/error-state";
+export {
+  MultiSelectCombobox,
+  type MultiSelectComboboxProps,
+  type MultiSelectOption,
+} from "./components/shared/multi-select-combobox";
+export {
+  type IdentifierStyle,
+  NameIdFields,
+  toIdentifier,
+} from "./components/shared/name-id-fields";
+export { Notice, type NoticeTone } from "./components/shared/notice";
+export { type DecimalLike, FormattedNumber } from "./components/shared/number/formatted-number";
+export { PageHeader } from "./components/shared/page-header";
+export { PageSkeleton } from "./components/shared/page-skeleton";
+export { SecretReveal } from "./components/shared/secret-reveal";
+export { SectionCard } from "./components/shared/section-card";
+export { Stat } from "./components/shared/stat";
+export { StatusBadge, statusTone, type Tone } from "./components/shared/status-badge";
+export {
+  PrimarySecondaryText,
+  type PrimarySecondaryTextProps,
+} from "./components/shared/text/primary-secondary-text";
+export * from "./components/shared/theme";
+export { ClientDateFormatter } from "./components/shared/time/client-date-formatter";
+export {
+  UI_TEXT_EN,
+  UI_TEXT_TH,
+  type UiText,
+  UiTextProvider,
+  useUiText,
+} from "./components/shared/ui-text";
+// ---------- shadcn/ui primitives ----------
+export * from "./components/ui/accordion";
+export * from "./components/ui/alert";
+export * from "./components/ui/alert-dialog";
+export * from "./components/ui/aspect-ratio";
+export * from "./components/ui/attachment";
+export * from "./components/ui/avatar";
+export * from "./components/ui/badge";
+export * from "./components/ui/breadcrumb";
+export * from "./components/ui/button";
+export * from "./components/ui/button-group";
+export * from "./components/ui/calendar";
+export * from "./components/ui/card";
+export * from "./components/ui/carousel";
+export * from "./components/ui/checkbox";
+export * from "./components/ui/collapsible";
+export * from "./components/ui/combobox";
+export * from "./components/ui/command";
+export * from "./components/ui/context-menu";
+export * from "./components/ui/date-picker";
+export * from "./components/ui/dialog";
+export * from "./components/ui/drawer";
+export * from "./components/ui/dropdown-menu";
+export * from "./components/ui/empty";
+export * from "./components/ui/field";
+export * from "./components/ui/form";
+export * from "./components/ui/hover-card";
+export * from "./components/ui/input";
+export * from "./components/ui/input-group";
+export * from "./components/ui/input-otp";
+export * from "./components/ui/item";
+export * from "./components/ui/kbd";
+export * from "./components/ui/label";
+export * from "./components/ui/menubar";
+export * from "./components/ui/navigation-menu";
+export * from "./components/ui/pagination";
+export * from "./components/ui/popover";
+export * from "./components/ui/progress";
+export * from "./components/ui/radio-group";
+export * from "./components/ui/relative-date";
+export * from "./components/ui/resizable";
+export * from "./components/ui/scroll-area";
+export * from "./components/ui/searchable-select";
+export * from "./components/ui/select";
+export * from "./components/ui/separator";
+export * from "./components/ui/sheet";
+export * from "./components/ui/sidebar";
+export * from "./components/ui/skeleton";
+export * from "./components/ui/slider";
+export * from "./components/ui/sonner";
+export * from "./components/ui/spinner";
+export * from "./components/ui/switch";
+export * from "./components/ui/table";
+export * from "./components/ui/tabs";
+export * from "./components/ui/textarea";
+export * from "./components/ui/toggle";
+export * from "./components/ui/toggle-group";
+export * from "./components/ui/tooltip";
+
+// ---------- lib / hooks ----------
+export { useCopyToClipboard } from "./hooks/use-copy-to-clipboard";
+export { useIsMobile } from "./hooks/use-mobile";
+export { formatRelativeThaiDate, formatThaiFullDate } from "./lib/formatters";
+export {
+  type AtomicPermissionRequirement,
+  type CheckPermissionOptions,
+  type CheckPermissionRequirement,
+  type PermissionChecker,
+  type PermissionRequirementObject,
+  UiPermissionProvider,
+  usePermission,
+  usePermissionChecker,
+} from "./lib/permission";
+export {
+  type ColorName,
+  type ColorTheme,
+  getStatusColorClass,
+  getStatusColorTheme,
+  statusColorThemes,
+  TAILWIND_COLORS,
+} from "./lib/status-colors";
+export { cn } from "./lib/utils";

package/src/lib/formatters.ts

@@ -0,0 +1,44 @@
+import { differenceInDays, formatDistanceToNow } from "date-fns";
+import { th } from "date-fns/locale";
+
+/**
+ * ฟอร์แมตวันที่แบบไทยที่ primitives ใช้ร่วมกัน (DatePicker, RelativeDate)
+ * ยกมาจาก supplychain `lib/utils/formatters.ts` เฉพาะส่วนที่ไม่ผูก domain
+ */
+
+/** วันที่แบบสัมพัทธ์ภาษาไทย เช่น "วันนี้", "เมื่อวาน", "3 วันที่แล้ว", "2 เดือนที่แล้ว" */
+export function formatRelativeThaiDate(date: Date | string | number | null | undefined): string {
+  if (!date) return "ไม่ได้ระบุ";
+  const d = new Date(date);
+  if (Number.isNaN(d.getTime())) return "ไม่ได้ระบุ";
+
+  const diffDays = Math.abs(differenceInDays(new Date(), d));
+  if (diffDays === 0) return "วันนี้";
+  if (diffDays === 1) return "เมื่อวาน";
+
+  return formatDistanceToNow(d, { addSuffix: true, locale: th });
+}
+
+const THAI_MONTH_SHORT = [
+  "ม.ค.",
+  "ก.พ.",
+  "มี.ค.",
+  "เม.ย.",
+  "พ.ค.",
+  "มิ.ย.",
+  "ก.ค.",
+  "ส.ค.",
+  "ก.ย.",
+  "ต.ค.",
+  "พ.ย.",
+  "ธ.ค.",
+];
+
+/** วันที่เต็มแบบไทย ปี พ.ศ. เช่น "23 ก.ค. 2569" */
+export function formatThaiFullDate(date: Date | string | number | null | undefined): string {
+  if (!date) return "ไม่ได้ระบุ";
+  const d = new Date(date);
+  if (Number.isNaN(d.getTime())) return "ไม่ได้ระบุ";
+
+  return `${d.getDate()} ${THAI_MONTH_SHORT[d.getMonth()]} ${d.getFullYear() + 543}`;
+}

package/src/lib/permission.ts

@@ -0,0 +1,75 @@
+"use client";
+
+import { createContext, createElement, type ReactNode, useCallback, useContext } from "react";
+
+/**
+ * ชั้นบางสำหรับ "ซ่อนปุ่มตามสิทธิ์" ที่ ActionButton/LinkButton ใช้
+ *
+ * แพ็กเกจนี้ไม่รู้จักระบบสิทธิ์ของแอปไหน — แอปเป็นคนส่งฟังก์ชัน `check` เข้ามาทาง
+ * `UiPermissionProvider` (supplychain ส่ง checkPermission ของตัวเอง, Pi Auth ส่งจาก session)
+ * ถ้าไม่มี provider → อนุญาตทุกอย่าง (เหมาะกับแอปที่ไม่มีระบบสิทธิ์และ showcase)
+ *
+ * รูปแบบ requirement คงเดิมตาม supplychain: "resource:action", { resource, action }, หรือ OR-list
+ */
+export type PermissionRequirementObject = {
+  action: string;
+  resource: string;
+};
+
+export type AtomicPermissionRequirement = PermissionRequirementObject | string | null | undefined;
+
+/** requirement เดียว หรือ OR-list — ตรงตัวใดตัวหนึ่งก็ผ่าน */
+export type CheckPermissionRequirement =
+  | AtomicPermissionRequirement
+  | readonly AtomicPermissionRequirement[];
+
+export type CheckPermissionOptions = {
+  organizationId?: string;
+  orgTag?: string | string[];
+};
+
+export type PermissionChecker = (
+  requirement: CheckPermissionRequirement,
+  options?: CheckPermissionOptions,
+) => boolean;
+
+const UiPermissionContext = createContext<PermissionChecker | null>(null);
+
+export function UiPermissionProvider({
+  check,
+  children,
+}: {
+  check: PermissionChecker;
+  children: ReactNode;
+}) {
+  return createElement(UiPermissionContext.Provider, { value: check }, children);
+}
+
+/** requirement ที่ถือว่า "ไม่ต้องมีสิทธิ์" */
+function isPublic(requirement: CheckPermissionRequirement): boolean {
+  return !requirement || requirement === "public" || requirement === "any";
+}
+
+/** true เมื่อผู้ใช้ปัจจุบันผ่าน requirement (หรือไม่มี provider) */
+export function usePermission(
+  requirement: CheckPermissionRequirement,
+  options?: CheckPermissionOptions,
+): boolean {
+  const check = useContext(UiPermissionContext);
+  if (isPublic(requirement)) return true;
+  if (!check) return true;
+  return check(requirement, options);
+}
+
+/** ตัว check ดิบ สำหรับ component ที่ต้องตรวจหลาย requirement */
+export function usePermissionChecker(): PermissionChecker {
+  const check = useContext(UiPermissionContext);
+  return useCallback<PermissionChecker>(
+    (requirement, options) => {
+      if (isPublic(requirement)) return true;
+      if (!check) return true;
+      return check(requirement, options);
+    },
+    [check],
+  );
+}

package/src/lib/status-colors.ts

@@ -0,0 +1,52 @@
+export type ColorName = "gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+
+export type ColorTheme = {
+  background: string;
+  text: string;
+};
+
+export const statusColorThemes: Record<ColorName, ColorTheme> = {
+  gray: { background: "bg-gray-200", text: "text-gray-800" },
+  red: { background: "bg-red-200", text: "text-red-800" },
+  yellow: { background: "bg-yellow-200", text: "text-yellow-800" },
+  green: { background: "bg-green-200", text: "text-green-800" },
+  blue: { background: "bg-blue-200", text: "text-blue-800" },
+  indigo: { background: "bg-indigo-200", text: "text-indigo-800" },
+  purple: { background: "bg-purple-200", text: "text-purple-800" },
+  pink: { background: "bg-pink-200", text: "text-pink-800" },
+};
+
+export const TAILWIND_COLORS: { name: ColorName; label: string }[] = [
+  { name: "gray", label: "Gray" },
+  { name: "red", label: "Red" },
+  { name: "yellow", label: "Yellow" },
+  { name: "green", label: "Green" },
+  { name: "blue", label: "Blue" },
+  { name: "indigo", label: "Indigo" },
+  { name: "purple", label: "Purple" },
+  { name: "pink", label: "Pink" },
+];
+
+// --- [ฟังก์ชันใหม่ที่แนะนำ] ---
+/**
+ * ดึง Object theme สีทั้งหมด (background และ text) จากชื่อสี
+ * @param color - ชื่อสีจาก ColorName
+ * @returns Object ColorTheme ที่ประกอบด้วย background และ text class
+ */
+export function getStatusColorTheme(color?: string | null): ColorTheme {
+  if (color && statusColorThemes[color as ColorName]) {
+    return statusColorThemes[color as ColorName];
+  }
+  return statusColorThemes.gray; // คืนค่า theme สีเทาเป็น default
+}
+
+// --- [ฟังก์ชันเดิมที่ปรับปรุงแล้ว] ---
+/**
+ * ดึง Tailwind classes ทั้ง background และ text มารวมกันเป็น string เดียว
+ * @param color - ชื่อสีจาก ColorName
+ * @returns String ของ Tailwind classes
+ */
+export function getStatusColorClass(color?: string | null): string {
+  const theme = getStatusColorTheme(color);
+  return `${theme.background} ${theme.text}`;
+}

package/src/lib/utils.ts

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

package/src/next.ts

@@ -0,0 +1,15 @@
+/**
+ * @suphark/ui/next — component ที่ต้องรันใน Next.js (ใช้ next/navigation หรือ next/link)
+ * แยกจาก barrel หลักเพื่อให้ `@suphark/ui` ใช้ได้ในสภาพแวดล้อมที่ไม่มี next (vitest, Vite, Storybook)
+ */
+export { LinkButton, type LinkButtonProps } from "./components/shared/button/base/link-button";
+export { RefreshButton } from "./components/shared/button/refresh-button";
+export { FormDialog } from "./components/shared/form-dialog";
+export { PageShell } from "./components/shared/layout/page-shell";
+export { TransitionLink } from "./components/shared/link/transition-link";
+export {
+  PageBreadcrumb,
+  type PageBreadcrumbItem,
+} from "./components/shared/navigation/page-breadcrumb";
+export { type RowAction, RowActions } from "./components/shared/row-actions";
+export { RowMenu, type RowMenuDialog, type RowMenuItem } from "./components/shared/row-menu";

package/src/styles.css

@@ -0,0 +1,214 @@
+/*
+ * @suphark/ui/styles.css — token + ฟอนต์ + base ของ design system (Tailwind v4, shadcn base-nova, baseColor slate)
+ *
+ * แอปเป็นคน @import "tailwindcss" เอง แล้ว import ไฟล์นี้ต่อ พร้อม @source ให้ Tailwind สแกน class ในแพ็กเกจ:
+ *
+ *   @import "tailwindcss";
+ *   @import "@suphark/ui/styles.css";
+ *   @source "../../node_modules/@suphark/ui/src";
+ *
+ * ฟอนต์: Noto Sans Thai Looped (@fontsource) โหลดที่นี่ — แอปที่ต้องการฟอนต์อื่น override --font-sans ใน @theme ของตัวเอง
+ * ส่วน print/A4 และสไตล์เฉพาะ feature ของ supplychain ไม่ได้ยกมา (อยู่ที่แอปนั้น)
+ */
+@import "tw-animate-css";
+@import "@fontsource/noto-sans-thai-looped/400.css";
+@import "@fontsource/noto-sans-thai-looped/500.css";
+@import "@fontsource/noto-sans-thai-looped/700.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: "Noto Sans Thai Looped", Tahoma, sans-serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-muted-foreground: var(--warning-muted-foreground);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --success: oklch(0.527 0.154 150.069);
+  --success-foreground: oklch(0.985 0.002 247.839);
+  --warning: oklch(0.852 0.199 91.936);
+  --warning-foreground: oklch(0.286 0.066 53.813);
+  --warning-muted-foreground: oklch(0.421 0.095 57.708);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+  --scrollbar-thumb: rgba(0, 0, 0, 0.1);
+  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --success: oklch(0.627 0.194 149.214);
+  --success-foreground: oklch(0.145 0.028 147.727);
+  --warning: oklch(0.852 0.199 91.936);
+  --warning-foreground: oklch(0.286 0.066 53.813);
+  --warning-muted-foreground: oklch(0.905 0.182 98.111);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+  --scrollbar-thumb: rgba(255, 255, 255, 0.1);
+  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
+}
+
+/*
+ * สีแบรนด์ต่อ tenant/แอป (จาก Pi Auth) — ตั้ง --brand / --brand-foreground inline บน wrapper
+ * (<div style="--brand: oklch(...); --brand-foreground: ...">) แล้ว primary / ring / sidebar-primary ในนั้นตามไปด้วย
+ * ต้องเป็น rule บน wrapper ไม่ใช่ --primary: var(--brand) ที่ :root — เพราะ custom property ถูกคำนวณที่จุดประกาศ
+ * แล้วลูกสืบทอด "ค่าที่คำนวณแล้ว" การตั้ง --brand ใหม่ที่ลูกจึงไม่เปลี่ยน --primary (บั๊ก @pi/ui 4cd39d8)
+ * ค่าเริ่มต้นของแพ็กเกจไม่ตั้ง --brand → primary เป็น slate ตามต้นทาง supplychain
+ */
+[style*="--brand"],
+[data-brand] {
+  --primary: var(--brand);
+  --primary-foreground: var(--brand-foreground);
+  --ring: var(--brand);
+  --sidebar-primary: var(--brand);
+  --sidebar-primary-foreground: var(--brand-foreground);
+  --sidebar-ring: var(--brand);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background font-sans text-foreground;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* Safari and Chrome */
+  }
+}
+
+@utility scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) transparent;
+}
+
+/* Global scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: 9999px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover);
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) transparent;
+}
+
+html,
+body,
+.font-sans {
+  font-family: var(--font-sans);
+}