gov-layout 1.1.4 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +44 -1
- package/dist/index.d.ts +44 -1
- package/dist/index.js +377 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +373 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React$1 from 'react';
|
|
2
3
|
|
|
3
4
|
interface User {
|
|
4
5
|
id?: string | number;
|
|
@@ -110,4 +111,46 @@ interface UserSidebarProps {
|
|
|
110
111
|
}
|
|
111
112
|
declare function UserSidebar({ user, roleLabel, menuItems, onNavigate, onLogout, isOpen, onClose, roleColor, }: UserSidebarProps): react_jsx_runtime.JSX.Element;
|
|
112
113
|
|
|
113
|
-
|
|
114
|
+
type Theme = 'light' | 'dark';
|
|
115
|
+
type FontSizeKey = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
116
|
+
interface FontSizeOption {
|
|
117
|
+
key: FontSizeKey;
|
|
118
|
+
label: string;
|
|
119
|
+
scale: number;
|
|
120
|
+
}
|
|
121
|
+
declare const FONT_SIZE_OPTIONS: FontSizeOption[];
|
|
122
|
+
interface SettingsContextType {
|
|
123
|
+
theme: Theme;
|
|
124
|
+
setTheme: (theme: Theme) => void;
|
|
125
|
+
toggleTheme: () => void;
|
|
126
|
+
fontSize: FontSizeKey;
|
|
127
|
+
setFontSize: (size: FontSizeKey) => void;
|
|
128
|
+
fontSizeOption: FontSizeOption;
|
|
129
|
+
}
|
|
130
|
+
declare function SettingsProvider({ children, defaultTheme, defaultFontSize, themeStorageKey, fontSizeStorageKey, }: {
|
|
131
|
+
children: React$1.ReactNode;
|
|
132
|
+
defaultTheme?: Theme;
|
|
133
|
+
defaultFontSize?: FontSizeKey;
|
|
134
|
+
themeStorageKey?: string;
|
|
135
|
+
fontSizeStorageKey?: string;
|
|
136
|
+
}): react_jsx_runtime.JSX.Element;
|
|
137
|
+
declare function useSettings(): SettingsContextType;
|
|
138
|
+
|
|
139
|
+
interface SettingsPanelProps {
|
|
140
|
+
className?: string;
|
|
141
|
+
/** แสดงตัวเลือกโหมดสว่าง/มืด (default: true) — ซ่อนสำหรับเจ้าหน้าที่ */
|
|
142
|
+
showTheme?: boolean;
|
|
143
|
+
}
|
|
144
|
+
declare function SettingsPanel({ className, showTheme }: SettingsPanelProps): react_jsx_runtime.JSX.Element;
|
|
145
|
+
|
|
146
|
+
interface ThemeSettingsProps {
|
|
147
|
+
onBack?: () => void;
|
|
148
|
+
}
|
|
149
|
+
declare function ThemeSettings({ onBack }: ThemeSettingsProps): react_jsx_runtime.JSX.Element;
|
|
150
|
+
|
|
151
|
+
interface FontSizeSettingsProps {
|
|
152
|
+
onBack?: () => void;
|
|
153
|
+
}
|
|
154
|
+
declare function FontSizeSettings({ onBack }: FontSizeSettingsProps): react_jsx_runtime.JSX.Element;
|
|
155
|
+
|
|
156
|
+
export { FONT_SIZE_OPTIONS, type FontSizeKey, type FontSizeOption, FontSizeSettings, type MenuItem, type NotificationItem, SettingsPanel, SettingsProvider, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, type Theme, ThemeSettings, type User, UserHeader, UserSidebar, useSettings };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React$1 from 'react';
|
|
2
3
|
|
|
3
4
|
interface User {
|
|
4
5
|
id?: string | number;
|
|
@@ -110,4 +111,46 @@ interface UserSidebarProps {
|
|
|
110
111
|
}
|
|
111
112
|
declare function UserSidebar({ user, roleLabel, menuItems, onNavigate, onLogout, isOpen, onClose, roleColor, }: UserSidebarProps): react_jsx_runtime.JSX.Element;
|
|
112
113
|
|
|
113
|
-
|
|
114
|
+
type Theme = 'light' | 'dark';
|
|
115
|
+
type FontSizeKey = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
116
|
+
interface FontSizeOption {
|
|
117
|
+
key: FontSizeKey;
|
|
118
|
+
label: string;
|
|
119
|
+
scale: number;
|
|
120
|
+
}
|
|
121
|
+
declare const FONT_SIZE_OPTIONS: FontSizeOption[];
|
|
122
|
+
interface SettingsContextType {
|
|
123
|
+
theme: Theme;
|
|
124
|
+
setTheme: (theme: Theme) => void;
|
|
125
|
+
toggleTheme: () => void;
|
|
126
|
+
fontSize: FontSizeKey;
|
|
127
|
+
setFontSize: (size: FontSizeKey) => void;
|
|
128
|
+
fontSizeOption: FontSizeOption;
|
|
129
|
+
}
|
|
130
|
+
declare function SettingsProvider({ children, defaultTheme, defaultFontSize, themeStorageKey, fontSizeStorageKey, }: {
|
|
131
|
+
children: React$1.ReactNode;
|
|
132
|
+
defaultTheme?: Theme;
|
|
133
|
+
defaultFontSize?: FontSizeKey;
|
|
134
|
+
themeStorageKey?: string;
|
|
135
|
+
fontSizeStorageKey?: string;
|
|
136
|
+
}): react_jsx_runtime.JSX.Element;
|
|
137
|
+
declare function useSettings(): SettingsContextType;
|
|
138
|
+
|
|
139
|
+
interface SettingsPanelProps {
|
|
140
|
+
className?: string;
|
|
141
|
+
/** แสดงตัวเลือกโหมดสว่าง/มืด (default: true) — ซ่อนสำหรับเจ้าหน้าที่ */
|
|
142
|
+
showTheme?: boolean;
|
|
143
|
+
}
|
|
144
|
+
declare function SettingsPanel({ className, showTheme }: SettingsPanelProps): react_jsx_runtime.JSX.Element;
|
|
145
|
+
|
|
146
|
+
interface ThemeSettingsProps {
|
|
147
|
+
onBack?: () => void;
|
|
148
|
+
}
|
|
149
|
+
declare function ThemeSettings({ onBack }: ThemeSettingsProps): react_jsx_runtime.JSX.Element;
|
|
150
|
+
|
|
151
|
+
interface FontSizeSettingsProps {
|
|
152
|
+
onBack?: () => void;
|
|
153
|
+
}
|
|
154
|
+
declare function FontSizeSettings({ onBack }: FontSizeSettingsProps): react_jsx_runtime.JSX.Element;
|
|
155
|
+
|
|
156
|
+
export { FONT_SIZE_OPTIONS, type FontSizeKey, type FontSizeOption, FontSizeSettings, type MenuItem, type NotificationItem, SettingsPanel, SettingsProvider, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, type Theme, ThemeSettings, type User, UserHeader, UserSidebar, useSettings };
|
package/dist/index.js
CHANGED
|
@@ -1211,12 +1211,389 @@ function UserSidebar({
|
|
|
1211
1211
|
)
|
|
1212
1212
|
] });
|
|
1213
1213
|
}
|
|
1214
|
+
var FONT_SIZE_OPTIONS = [
|
|
1215
|
+
{ key: "xsmall", label: "\u0E40\u0E25\u0E47\u0E01\u0E21\u0E32\u0E01", scale: 0.8 },
|
|
1216
|
+
{ key: "small", label: "\u0E40\u0E25\u0E47\u0E01", scale: 0.9 },
|
|
1217
|
+
{ key: "medium", label: "\u0E01\u0E25\u0E32\u0E07", scale: 1 },
|
|
1218
|
+
{ key: "large", label: "\u0E43\u0E2B\u0E0D\u0E48", scale: 1.2 },
|
|
1219
|
+
{ key: "xlarge", label: "\u0E43\u0E2B\u0E0D\u0E48\u0E21\u0E32\u0E01", scale: 1.4 }
|
|
1220
|
+
];
|
|
1221
|
+
var BASE_FONT_SIZES = {
|
|
1222
|
+
"--font-alias-mobile-body-fontsize": 16,
|
|
1223
|
+
"--font-alias-mobile-h1-fontsize": 28,
|
|
1224
|
+
"--font-alias-mobile-h2-fontsize": 24,
|
|
1225
|
+
"--font-alias-mobile-h3-fontsize": 20,
|
|
1226
|
+
"--font-alias-mobile-sub-fontsize": 14,
|
|
1227
|
+
"--font-alias-mobile-button-fontsize": 16
|
|
1228
|
+
};
|
|
1229
|
+
var SettingsContext = react.createContext(void 0);
|
|
1230
|
+
function SettingsProvider({
|
|
1231
|
+
children,
|
|
1232
|
+
defaultTheme = "light",
|
|
1233
|
+
defaultFontSize = "medium",
|
|
1234
|
+
themeStorageKey = "app-theme",
|
|
1235
|
+
fontSizeStorageKey = "app-font-size"
|
|
1236
|
+
}) {
|
|
1237
|
+
const [theme, setThemeState] = react.useState(defaultTheme);
|
|
1238
|
+
const [fontSize, setFontSizeState] = react.useState(defaultFontSize);
|
|
1239
|
+
react.useEffect(() => {
|
|
1240
|
+
try {
|
|
1241
|
+
const savedTheme = localStorage.getItem(themeStorageKey);
|
|
1242
|
+
if (savedTheme === "light" || savedTheme === "dark") {
|
|
1243
|
+
setThemeState(savedTheme);
|
|
1244
|
+
}
|
|
1245
|
+
const savedFontSize = localStorage.getItem(fontSizeStorageKey);
|
|
1246
|
+
if (savedFontSize && FONT_SIZE_OPTIONS.some((o) => o.key === savedFontSize)) {
|
|
1247
|
+
setFontSizeState(savedFontSize);
|
|
1248
|
+
}
|
|
1249
|
+
} catch {
|
|
1250
|
+
}
|
|
1251
|
+
}, [themeStorageKey, fontSizeStorageKey]);
|
|
1252
|
+
react.useEffect(() => {
|
|
1253
|
+
const root = document.documentElement;
|
|
1254
|
+
if (theme === "dark") {
|
|
1255
|
+
root.classList.add("dark");
|
|
1256
|
+
} else {
|
|
1257
|
+
root.classList.remove("dark");
|
|
1258
|
+
}
|
|
1259
|
+
try {
|
|
1260
|
+
localStorage.setItem(themeStorageKey, theme);
|
|
1261
|
+
} catch {
|
|
1262
|
+
}
|
|
1263
|
+
}, [theme, themeStorageKey]);
|
|
1264
|
+
react.useEffect(() => {
|
|
1265
|
+
const option = FONT_SIZE_OPTIONS.find((o) => o.key === fontSize) || FONT_SIZE_OPTIONS[2];
|
|
1266
|
+
const root = document.documentElement;
|
|
1267
|
+
Object.entries(BASE_FONT_SIZES).forEach(([varName, baseValue]) => {
|
|
1268
|
+
root.style.setProperty(varName, `${baseValue * option.scale}px`);
|
|
1269
|
+
});
|
|
1270
|
+
root.style.fontSize = `${16 * option.scale}px`;
|
|
1271
|
+
root.style.setProperty("--global-font-scale", option.scale.toString());
|
|
1272
|
+
try {
|
|
1273
|
+
localStorage.setItem(fontSizeStorageKey, fontSize);
|
|
1274
|
+
} catch {
|
|
1275
|
+
}
|
|
1276
|
+
}, [fontSize, fontSizeStorageKey]);
|
|
1277
|
+
const setTheme = react.useCallback((t) => {
|
|
1278
|
+
setThemeState(t);
|
|
1279
|
+
}, []);
|
|
1280
|
+
const toggleTheme = react.useCallback(() => {
|
|
1281
|
+
setThemeState((prev) => prev === "light" ? "dark" : "light");
|
|
1282
|
+
}, []);
|
|
1283
|
+
const setFontSize = react.useCallback((s) => {
|
|
1284
|
+
setFontSizeState(s);
|
|
1285
|
+
}, []);
|
|
1286
|
+
const fontSizeOption = FONT_SIZE_OPTIONS.find((o) => o.key === fontSize) || FONT_SIZE_OPTIONS[2];
|
|
1287
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1288
|
+
SettingsContext.Provider,
|
|
1289
|
+
{
|
|
1290
|
+
value: { theme, setTheme, toggleTheme, fontSize, setFontSize, fontSizeOption },
|
|
1291
|
+
children
|
|
1292
|
+
}
|
|
1293
|
+
);
|
|
1294
|
+
}
|
|
1295
|
+
function useSettings() {
|
|
1296
|
+
const context = react.useContext(SettingsContext);
|
|
1297
|
+
if (!context) {
|
|
1298
|
+
throw new Error("useSettings must be used within <SettingsProvider>");
|
|
1299
|
+
}
|
|
1300
|
+
return context;
|
|
1301
|
+
}
|
|
1302
|
+
function SunIcon() {
|
|
1303
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1304
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5" }),
|
|
1305
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
|
|
1306
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
|
|
1307
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
|
|
1308
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
|
|
1309
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
|
|
1310
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
|
|
1311
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
|
|
1312
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
|
|
1313
|
+
] });
|
|
1314
|
+
}
|
|
1315
|
+
function MoonIcon() {
|
|
1316
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) });
|
|
1317
|
+
}
|
|
1318
|
+
function ThemeSettings({ onBack }) {
|
|
1319
|
+
const { theme, setTheme } = useSettings();
|
|
1320
|
+
const options = [
|
|
1321
|
+
{ key: "light", label: "\u0E2A\u0E27\u0E48\u0E32\u0E07", icon: /* @__PURE__ */ jsxRuntime.jsx(SunIcon, {}), bg: "#fff", text: "#111" },
|
|
1322
|
+
{ key: "dark", label: "\u0E21\u0E37\u0E14", icon: /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, {}), bg: "#1f2937", text: "#f9fafb" }
|
|
1323
|
+
];
|
|
1324
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
1325
|
+
onBack && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1326
|
+
"button",
|
|
1327
|
+
{
|
|
1328
|
+
onClick: onBack,
|
|
1329
|
+
style: {
|
|
1330
|
+
display: "flex",
|
|
1331
|
+
alignItems: "center",
|
|
1332
|
+
gap: 8,
|
|
1333
|
+
padding: "12px 16px",
|
|
1334
|
+
width: "100%",
|
|
1335
|
+
border: "none",
|
|
1336
|
+
background: "transparent",
|
|
1337
|
+
cursor: "pointer",
|
|
1338
|
+
fontSize: 15,
|
|
1339
|
+
fontWeight: 600,
|
|
1340
|
+
color: "var(--color-alias-text-colors-primary, #060d26)"
|
|
1341
|
+
},
|
|
1342
|
+
children: [
|
|
1343
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) }),
|
|
1344
|
+
"\u0E42\u0E2B\u0E21\u0E14\u0E2A\u0E27\u0E48\u0E32\u0E07/\u0E21\u0E37\u0E14"
|
|
1345
|
+
]
|
|
1346
|
+
}
|
|
1347
|
+
),
|
|
1348
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px 16px", display: "flex", gap: 12 }, children: options.map((opt) => {
|
|
1349
|
+
const isSelected = theme === opt.key;
|
|
1350
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1351
|
+
"button",
|
|
1352
|
+
{
|
|
1353
|
+
onClick: () => setTheme(opt.key),
|
|
1354
|
+
style: {
|
|
1355
|
+
flex: 1,
|
|
1356
|
+
padding: "20px 12px",
|
|
1357
|
+
borderRadius: 12,
|
|
1358
|
+
border: isSelected ? "2px solid var(--color-alias-color-brand-primary, #1e7d55)" : "2px solid var(--color-border-colors-neutral, #c8cedd)",
|
|
1359
|
+
background: opt.bg,
|
|
1360
|
+
cursor: "pointer",
|
|
1361
|
+
display: "flex",
|
|
1362
|
+
flexDirection: "column",
|
|
1363
|
+
alignItems: "center",
|
|
1364
|
+
gap: 8,
|
|
1365
|
+
transition: "all 0.2s ease"
|
|
1366
|
+
},
|
|
1367
|
+
children: [
|
|
1368
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: opt.text }, children: opt.icon }),
|
|
1369
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: {
|
|
1370
|
+
fontSize: 13,
|
|
1371
|
+
fontWeight: isSelected ? 700 : 500,
|
|
1372
|
+
color: opt.text
|
|
1373
|
+
}, children: opt.label }),
|
|
1374
|
+
isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
|
|
1375
|
+
width: 20,
|
|
1376
|
+
height: 20,
|
|
1377
|
+
borderRadius: "50%",
|
|
1378
|
+
background: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
1379
|
+
display: "flex",
|
|
1380
|
+
alignItems: "center",
|
|
1381
|
+
justifyContent: "center"
|
|
1382
|
+
}, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "3", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) })
|
|
1383
|
+
]
|
|
1384
|
+
},
|
|
1385
|
+
opt.key
|
|
1386
|
+
);
|
|
1387
|
+
}) })
|
|
1388
|
+
] });
|
|
1389
|
+
}
|
|
1390
|
+
function FontSizeSettings({ onBack }) {
|
|
1391
|
+
const { fontSize, setFontSize, fontSizeOption } = useSettings();
|
|
1392
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
1393
|
+
onBack && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1394
|
+
"button",
|
|
1395
|
+
{
|
|
1396
|
+
onClick: onBack,
|
|
1397
|
+
style: {
|
|
1398
|
+
display: "flex",
|
|
1399
|
+
alignItems: "center",
|
|
1400
|
+
gap: 8,
|
|
1401
|
+
padding: "12px 16px",
|
|
1402
|
+
width: "100%",
|
|
1403
|
+
border: "none",
|
|
1404
|
+
background: "transparent",
|
|
1405
|
+
cursor: "pointer",
|
|
1406
|
+
fontSize: 15,
|
|
1407
|
+
fontWeight: 600,
|
|
1408
|
+
color: "var(--color-alias-text-colors-primary, #060d26)"
|
|
1409
|
+
},
|
|
1410
|
+
children: [
|
|
1411
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) }),
|
|
1412
|
+
"\u0E02\u0E19\u0E32\u0E14\u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23"
|
|
1413
|
+
]
|
|
1414
|
+
}
|
|
1415
|
+
),
|
|
1416
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
|
|
1417
|
+
margin: "8px 16px",
|
|
1418
|
+
padding: "16px",
|
|
1419
|
+
borderRadius: 10,
|
|
1420
|
+
background: "var(--color-foundations-fuji-pallet-light, #f5f6fa)",
|
|
1421
|
+
textAlign: "center"
|
|
1422
|
+
}, children: [
|
|
1423
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: {
|
|
1424
|
+
fontSize: `${16 * fontSizeOption.scale}px`,
|
|
1425
|
+
fontWeight: 500,
|
|
1426
|
+
color: "var(--color-alias-text-colors-primary, #060d26)",
|
|
1427
|
+
margin: 0
|
|
1428
|
+
}, children: "\u0E15\u0E31\u0E27\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" }),
|
|
1429
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
|
|
1430
|
+
fontSize: `${12 * fontSizeOption.scale}px`,
|
|
1431
|
+
color: "var(--color-alias-text-colors-tertiary, #475272)",
|
|
1432
|
+
margin: "4px 0 0"
|
|
1433
|
+
}, children: [
|
|
1434
|
+
"\xD7",
|
|
1435
|
+
fontSizeOption.scale
|
|
1436
|
+
] })
|
|
1437
|
+
] }),
|
|
1438
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 16px", display: "flex", flexDirection: "column", gap: 4 }, children: FONT_SIZE_OPTIONS.map((opt) => {
|
|
1439
|
+
const isSelected = fontSize === opt.key;
|
|
1440
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1441
|
+
"button",
|
|
1442
|
+
{
|
|
1443
|
+
onClick: () => setFontSize(opt.key),
|
|
1444
|
+
onMouseEnter: (e) => {
|
|
1445
|
+
if (!isSelected) e.currentTarget.style.backgroundColor = "#f9fafb";
|
|
1446
|
+
},
|
|
1447
|
+
onMouseLeave: (e) => {
|
|
1448
|
+
if (!isSelected) e.currentTarget.style.backgroundColor = "transparent";
|
|
1449
|
+
},
|
|
1450
|
+
style: {
|
|
1451
|
+
display: "flex",
|
|
1452
|
+
alignItems: "center",
|
|
1453
|
+
justifyContent: "space-between",
|
|
1454
|
+
padding: "12px 14px",
|
|
1455
|
+
borderRadius: 8,
|
|
1456
|
+
border: isSelected ? "2px solid var(--color-alias-color-brand-primary, #1e7d55)" : "1px solid transparent",
|
|
1457
|
+
background: isSelected ? "color-mix(in srgb, var(--color-alias-color-brand-primary, #1e7d55) 8%, transparent)" : "transparent",
|
|
1458
|
+
cursor: "pointer",
|
|
1459
|
+
transition: "all 0.15s ease"
|
|
1460
|
+
},
|
|
1461
|
+
children: [
|
|
1462
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: {
|
|
1463
|
+
fontSize: `${14 * opt.scale}px`,
|
|
1464
|
+
fontWeight: isSelected ? 600 : 400,
|
|
1465
|
+
color: isSelected ? "var(--color-alias-color-brand-primary, #1e7d55)" : "var(--color-alias-text-colors-primary, #060d26)"
|
|
1466
|
+
}, children: opt.label }),
|
|
1467
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { style: {
|
|
1468
|
+
fontSize: 12,
|
|
1469
|
+
color: "var(--color-alias-text-colors-tertiary, #475272)"
|
|
1470
|
+
}, children: [
|
|
1471
|
+
"\xD7",
|
|
1472
|
+
opt.scale
|
|
1473
|
+
] })
|
|
1474
|
+
]
|
|
1475
|
+
},
|
|
1476
|
+
opt.key
|
|
1477
|
+
);
|
|
1478
|
+
}) })
|
|
1479
|
+
] });
|
|
1480
|
+
}
|
|
1481
|
+
function FontSizeIcon() {
|
|
1482
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1483
|
+
/* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "4 7 4 4 20 4 20 7" }),
|
|
1484
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "20", x2: "15", y2: "20" }),
|
|
1485
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "4", x2: "12", y2: "20" })
|
|
1486
|
+
] });
|
|
1487
|
+
}
|
|
1488
|
+
function PaletteIcon() {
|
|
1489
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1490
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
1491
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "8", r: "1.5", fill: "currentColor" }),
|
|
1492
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "14", r: "1.5", fill: "currentColor" }),
|
|
1493
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "14", r: "1.5", fill: "currentColor" })
|
|
1494
|
+
] });
|
|
1495
|
+
}
|
|
1496
|
+
function SettingsPanel({ className, showTheme = true }) {
|
|
1497
|
+
const [view, setView] = react.useState("menu");
|
|
1498
|
+
if (view === "theme" && showTheme) {
|
|
1499
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ThemeSettings, { onBack: () => setView("menu") });
|
|
1500
|
+
}
|
|
1501
|
+
if (view === "fontSize") {
|
|
1502
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FontSizeSettings, { onBack: () => setView("menu") });
|
|
1503
|
+
}
|
|
1504
|
+
const allMenuItems = [
|
|
1505
|
+
{
|
|
1506
|
+
id: "fontSize",
|
|
1507
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(FontSizeIcon, {}),
|
|
1508
|
+
label: "\u0E02\u0E19\u0E32\u0E14\u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23",
|
|
1509
|
+
description: "\u0E40\u0E25\u0E47\u0E01\u0E21\u0E32\u0E01 / \u0E40\u0E25\u0E47\u0E01 / \u0E01\u0E25\u0E32\u0E07 / \u0E43\u0E2B\u0E0D\u0E48 / \u0E43\u0E2B\u0E0D\u0E48\u0E21\u0E32\u0E01",
|
|
1510
|
+
onClick: () => setView("fontSize")
|
|
1511
|
+
},
|
|
1512
|
+
...showTheme ? [{
|
|
1513
|
+
id: "theme",
|
|
1514
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(PaletteIcon, {}),
|
|
1515
|
+
label: "\u0E42\u0E2B\u0E21\u0E14\u0E2A\u0E27\u0E48\u0E32\u0E07/\u0E21\u0E37\u0E14",
|
|
1516
|
+
description: "\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E18\u0E35\u0E21\u0E41\u0E2D\u0E1B\u0E1E\u0E25\u0E34\u0E40\u0E04\u0E0A\u0E31\u0E19",
|
|
1517
|
+
onClick: () => setView("theme")
|
|
1518
|
+
}] : []
|
|
1519
|
+
];
|
|
1520
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
|
|
1521
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: {
|
|
1522
|
+
padding: "16px",
|
|
1523
|
+
borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
|
|
1524
|
+
}, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { style: {
|
|
1525
|
+
fontSize: 16,
|
|
1526
|
+
fontWeight: 700,
|
|
1527
|
+
margin: 0,
|
|
1528
|
+
color: "var(--color-alias-text-colors-primary, #060d26)"
|
|
1529
|
+
}, children: "\u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32\u0E23\u0E30\u0E1A\u0E1A" }) }),
|
|
1530
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px", display: "flex", flexDirection: "column", gap: 2 }, children: allMenuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1531
|
+
"button",
|
|
1532
|
+
{
|
|
1533
|
+
onClick: item.onClick,
|
|
1534
|
+
onMouseEnter: (e) => {
|
|
1535
|
+
e.currentTarget.style.backgroundColor = "#f9fafb";
|
|
1536
|
+
},
|
|
1537
|
+
onMouseLeave: (e) => {
|
|
1538
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
1539
|
+
},
|
|
1540
|
+
style: {
|
|
1541
|
+
display: "flex",
|
|
1542
|
+
alignItems: "center",
|
|
1543
|
+
gap: 14,
|
|
1544
|
+
padding: "14px 12px",
|
|
1545
|
+
borderRadius: 10,
|
|
1546
|
+
border: "none",
|
|
1547
|
+
background: "transparent",
|
|
1548
|
+
cursor: "pointer",
|
|
1549
|
+
width: "100%",
|
|
1550
|
+
textAlign: "left",
|
|
1551
|
+
transition: "background-color 0.15s ease"
|
|
1552
|
+
},
|
|
1553
|
+
children: [
|
|
1554
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: {
|
|
1555
|
+
width: 40,
|
|
1556
|
+
height: 40,
|
|
1557
|
+
borderRadius: 10,
|
|
1558
|
+
background: "var(--color-foundations-fuji-pallet-light, #ebedf5)",
|
|
1559
|
+
display: "flex",
|
|
1560
|
+
alignItems: "center",
|
|
1561
|
+
justifyContent: "center",
|
|
1562
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
1563
|
+
flexShrink: 0
|
|
1564
|
+
}, children: item.icon }),
|
|
1565
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1566
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: {
|
|
1567
|
+
fontSize: 15,
|
|
1568
|
+
fontWeight: 600,
|
|
1569
|
+
margin: 0,
|
|
1570
|
+
color: "var(--color-alias-text-colors-primary, #060d26)"
|
|
1571
|
+
}, children: item.label }),
|
|
1572
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: {
|
|
1573
|
+
fontSize: 12,
|
|
1574
|
+
margin: "2px 0 0",
|
|
1575
|
+
color: "var(--color-alias-text-colors-tertiary, #475272)"
|
|
1576
|
+
}, children: item.description })
|
|
1577
|
+
] }),
|
|
1578
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" }) })
|
|
1579
|
+
]
|
|
1580
|
+
},
|
|
1581
|
+
item.id
|
|
1582
|
+
)) })
|
|
1583
|
+
] });
|
|
1584
|
+
}
|
|
1214
1585
|
|
|
1586
|
+
exports.FONT_SIZE_OPTIONS = FONT_SIZE_OPTIONS;
|
|
1587
|
+
exports.FontSizeSettings = FontSizeSettings;
|
|
1588
|
+
exports.SettingsPanel = SettingsPanel;
|
|
1589
|
+
exports.SettingsProvider = SettingsProvider;
|
|
1215
1590
|
exports.SidebarHeader = SidebarHeader;
|
|
1216
1591
|
exports.SidebarMenu = SidebarMenu;
|
|
1217
1592
|
exports.SidebarUserProfile = SidebarUserProfile;
|
|
1218
1593
|
exports.StaffSidebar = StaffSidebar;
|
|
1594
|
+
exports.ThemeSettings = ThemeSettings;
|
|
1219
1595
|
exports.UserHeader = UserHeader;
|
|
1220
1596
|
exports.UserSidebar = UserSidebar;
|
|
1597
|
+
exports.useSettings = useSettings;
|
|
1221
1598
|
//# sourceMappingURL=index.js.map
|
|
1222
1599
|
//# sourceMappingURL=index.js.map
|