najm-kit 2.6.3 → 2.6.4
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/NajmUIProvider-x4chK0io.d.ts +425 -0
- package/dist/adapters/next.d.ts +32 -1
- package/dist/adapters/next.mjs +51 -2
- package/dist/chunk-4DLRXB2W.mjs +832 -0
- package/dist/chunk-JZJCQBOH.mjs +173 -0
- package/dist/chunk-YBM5CTE6.mjs +366 -0
- package/dist/index.d.ts +3 -298
- package/dist/index.mjs +152 -1348
- package/dist/json.mjs +7 -462
- package/package.json +5 -1
package/dist/index.mjs
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
import {
|
|
6
|
-
|
|
1
|
+
import { useResolvedPaginationLabels } from './chunk-JZJCQBOH.mjs';
|
|
2
|
+
export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, NTableDefaultsProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, useNTableDefaults, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone } from './chunk-JZJCQBOH.mjs';
|
|
3
|
+
import { resolveRadiusValue, inputBorderClasses, cn, Button, NIcon, NajmScroll, surfaceBorderClasses, useNajmScrollViewport, resolveVariantAlias, buttonVariants, NButton, parseNajmDesignConfig, useTableStore, TableStoreContext, sidebarBorderClasses, NTableJson } from './chunk-4DLRXB2W.mjs';
|
|
4
|
+
export { Button, NAJM_COMPONENT_NAMES, NButton, NIcon, NTableJson, NajmScroll, RADIUS_VALUE_MAP, TableStoreContext, buttonVariants, cn, defineNajmDesignConfig, defineNajmThemeConfig, inputBorderClasses, parseNajmDesignConfig, parseNajmThemeConfig, resolveRadiusValue, resolveVariantAlias, sidebarBorderClasses, stringifyNajmDesignConfig, stringifyNajmThemeConfig, surfaceBorderClasses, useTableStore } from './chunk-4DLRXB2W.mjs';
|
|
5
|
+
import { useNajmComponentStyle, NajmThemeContainerCtx, useNajmThemeMode, useNajmDesign, composePreset } from './chunk-YBM5CTE6.mjs';
|
|
6
|
+
export { NajmDesignProvider, NajmThemeProvider, composePreset, resolvePreset, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode } from './chunk-YBM5CTE6.mjs';
|
|
7
|
+
import * as React60 from 'react';
|
|
8
|
+
import React60__default, { createContext, useRef, useMemo, useState, useEffect, useContext, useCallback, useLayoutEffect, isValidElement } from 'react';
|
|
7
9
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
8
|
-
import
|
|
9
|
-
import { ChevronDown, AlertTriangle, RefreshCw,
|
|
10
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
11
|
+
import { ChevronDown, AlertTriangle, RefreshCw, X, XIcon, Menu, Search, SearchIcon, CheckIcon, ChevronUp, ChevronDownIcon, ChevronUpIcon, Eye, EyeOff, ChevronsUpDown, Check, CircleIcon, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, FileUp, Folder, UploadCloud, CheckCircle2, AlertCircle, Camera, Star, Globe, Clock, Trash2, Plus, Upload, Download, RotateCcw, Table as Table$1, FileJson, ChevronRight, ArrowUpDown, Loader2, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Pencil, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, CheckSquare, FilePlus, FolderPlus, Share2, Move, ClipboardPaste, Copy, Scissors, LoaderCircleIcon, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
|
|
10
12
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
11
13
|
import { cva } from 'class-variance-authority';
|
|
12
14
|
import { HexColorPicker } from 'react-colorful';
|
|
@@ -15,10 +17,9 @@ import { converter, parse, formatHsl, formatRgb, formatHex } from 'culori';
|
|
|
15
17
|
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
16
18
|
import { Command as Command$1 } from 'cmdk';
|
|
17
19
|
import * as SheetPrimitive from '@radix-ui/react-dialog';
|
|
18
|
-
import { OverlayScrollbars } from 'overlayscrollbars';
|
|
19
|
-
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
|
|
20
20
|
import { create } from 'zustand';
|
|
21
21
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
22
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
22
23
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
23
24
|
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
24
25
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
@@ -39,310 +40,6 @@ import { FormProvider, Controller, useFormContext, useForm, useFieldArray } from
|
|
|
39
40
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
40
41
|
import { getExpandedRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel, useReactTable, flexRender } from '@tanstack/react-table';
|
|
41
42
|
|
|
42
|
-
// src/theme/provider.tsx
|
|
43
|
-
|
|
44
|
-
// src/theme/presets/modes.ts
|
|
45
|
-
var lightMode = {
|
|
46
|
-
background: "oklch(1 0 0)",
|
|
47
|
-
foreground: "oklch(0.1445 0 0)",
|
|
48
|
-
card: "oklch(1 0 0)",
|
|
49
|
-
"card-foreground": "oklch(0.1445 0 0)",
|
|
50
|
-
popover: "oklch(1 0 0)",
|
|
51
|
-
"popover-foreground": "oklch(0.1445 0 0)",
|
|
52
|
-
secondary: "oklch(0.9703 0 0)",
|
|
53
|
-
"secondary-foreground": "oklch(0.2044 0 0)",
|
|
54
|
-
tertiary: "oklch(0.9676 0.007 247.897)",
|
|
55
|
-
"tertiary-foreground": "oklch(0.3138 0.0453 249.447)",
|
|
56
|
-
muted: "oklch(0.9703 0 0)",
|
|
57
|
-
"muted-foreground": "oklch(0.5555 0 0)",
|
|
58
|
-
accent: "oklch(0.9703 0 0)",
|
|
59
|
-
"accent-foreground": "oklch(0.2044 0 0)",
|
|
60
|
-
destructive: "oklch(0.6368 0.2078 25.326)",
|
|
61
|
-
"destructive-foreground": "oklch(0.9848 0 0)",
|
|
62
|
-
border: "oklch(0.9219 0 0)",
|
|
63
|
-
input: "oklch(0.9219 0 0)",
|
|
64
|
-
radius: "0.5rem",
|
|
65
|
-
sidebar: "oklch(0.985 0 0)",
|
|
66
|
-
"sidebar-foreground": "oklch(0.1445 0 0)",
|
|
67
|
-
"sidebar-primary": "oklch(0.2228 0.0043 286.044)",
|
|
68
|
-
"sidebar-primary-foreground": "oklch(0.9848 0 0)",
|
|
69
|
-
"sidebar-accent": "oklch(0.9703 0 0)",
|
|
70
|
-
"sidebar-accent-foreground": "oklch(0.2044 0 0)",
|
|
71
|
-
"sidebar-border": "oklch(0.9219 0 0)",
|
|
72
|
-
"sidebar-ring": "oklch(0.2228 0.0043 286.044)"
|
|
73
|
-
};
|
|
74
|
-
var darkMode = {
|
|
75
|
-
background: "oklch(0.1417 0.0044 285.819)",
|
|
76
|
-
foreground: "oklch(0.9683 0.0014 286.375)",
|
|
77
|
-
card: "oklch(0.1872 0.0066 285.748)",
|
|
78
|
-
"card-foreground": "oklch(0.9683 0.0014 286.375)",
|
|
79
|
-
popover: "oklch(0.1872 0.0066 285.748)",
|
|
80
|
-
"popover-foreground": "oklch(0.9683 0.0014 286.375)",
|
|
81
|
-
secondary: "oklch(0.2313 0.007 285.839)",
|
|
82
|
-
"secondary-foreground": "oklch(0.9203 0.0034 286.332)",
|
|
83
|
-
tertiary: "oklch(0.3138 0.0453 249.447)",
|
|
84
|
-
"tertiary-foreground": "oklch(0.8529 0.0324 248.208)",
|
|
85
|
-
muted: "oklch(0.2313 0.007 285.839)",
|
|
86
|
-
"muted-foreground": "oklch(0.6255 0.0171 285.896)",
|
|
87
|
-
accent: "oklch(0.2313 0.007 285.839)",
|
|
88
|
-
"accent-foreground": "oklch(0.9683 0.0014 286.375)",
|
|
89
|
-
destructive: "oklch(0.6356 0.2082 25.378)",
|
|
90
|
-
"destructive-foreground": "oklch(1 0 0)",
|
|
91
|
-
border: "oklch(0.262 0.0085 285.799)",
|
|
92
|
-
input: "oklch(0.262 0.0085 285.799)",
|
|
93
|
-
radius: "0.5rem",
|
|
94
|
-
sidebar: "oklch(0.205 0 0)",
|
|
95
|
-
"sidebar-foreground": "oklch(0.9683 0.0014 286.375)",
|
|
96
|
-
"sidebar-primary": "oklch(0.4865 0.2423 291.866)",
|
|
97
|
-
"sidebar-primary-foreground": "oklch(0.9848 0 0)",
|
|
98
|
-
"sidebar-accent": "oklch(0.2313 0.007 285.839)",
|
|
99
|
-
"sidebar-accent-foreground": "oklch(0.9683 0.0014 286.375)",
|
|
100
|
-
"sidebar-border": "oklch(0.262 0.0085 285.799)",
|
|
101
|
-
"sidebar-ring": "oklch(0.4865 0.2423 291.866)"
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
// src/theme/presets/accents.ts
|
|
105
|
-
var accents = {
|
|
106
|
-
neutral: {
|
|
107
|
-
primary: "oklch(0.2228 0.0043 286.044)",
|
|
108
|
-
"primary-foreground": "oklch(0.9848 0 0)",
|
|
109
|
-
ring: "oklch(0.2228 0.0043 286.044)",
|
|
110
|
-
accent: "oklch(0.2747 0.006 286.001)",
|
|
111
|
-
"accent-foreground": "oklch(0.9848 0 0)",
|
|
112
|
-
"sidebar-primary": "oklch(0.2228 0.0043 286.044)",
|
|
113
|
-
"sidebar-ring": "oklch(0.2228 0.0043 286.044)"
|
|
114
|
-
},
|
|
115
|
-
emerald: {
|
|
116
|
-
primary: "oklch(0.6902 0.1481 162.368)",
|
|
117
|
-
"primary-foreground": "oklch(1 0 0)",
|
|
118
|
-
ring: "oklch(0.6902 0.1481 162.368)",
|
|
119
|
-
accent: "oklch(0.3519 0.0714 164.26)",
|
|
120
|
-
"accent-foreground": "oklch(0.9131 0.0924 171.145)",
|
|
121
|
-
"sidebar-primary": "oklch(0.6902 0.1481 162.368)",
|
|
122
|
-
"sidebar-ring": "oklch(0.6902 0.1481 162.368)"
|
|
123
|
-
},
|
|
124
|
-
green: {
|
|
125
|
-
primary: "oklch(0.7205 0.192 149.493)",
|
|
126
|
-
"primary-foreground": "oklch(1 0 0)",
|
|
127
|
-
ring: "oklch(0.7205 0.192 149.493)",
|
|
128
|
-
accent: "oklch(0.333 0.0811 150.922)",
|
|
129
|
-
"accent-foreground": "oklch(0.8958 0.096 156.121)",
|
|
130
|
-
"sidebar-primary": "oklch(0.7205 0.192 149.493)",
|
|
131
|
-
"sidebar-ring": "oklch(0.7205 0.192 149.493)"
|
|
132
|
-
},
|
|
133
|
-
slate: {
|
|
134
|
-
primary: "oklch(0.6227 0.0463 256.82)",
|
|
135
|
-
"primary-foreground": "oklch(1 0 0)",
|
|
136
|
-
ring: "oklch(0.6227 0.0463 256.82)",
|
|
137
|
-
accent: "oklch(0.3115 0.0245 256.824)",
|
|
138
|
-
"accent-foreground": "oklch(0.8784 0.0141 256.711)",
|
|
139
|
-
"sidebar-primary": "oklch(0.6227 0.0463 256.82)",
|
|
140
|
-
"sidebar-ring": "oklch(0.6227 0.0463 256.82)"
|
|
141
|
-
},
|
|
142
|
-
blue: {
|
|
143
|
-
primary: "oklch(0.6261 0.1859 259.596)",
|
|
144
|
-
"primary-foreground": "oklch(1 0 0)",
|
|
145
|
-
ring: "oklch(0.6261 0.1859 259.596)",
|
|
146
|
-
accent: "oklch(0.2941 0.1092 259.917)",
|
|
147
|
-
"accent-foreground": "oklch(0.8064 0.0902 259.76)",
|
|
148
|
-
"sidebar-primary": "oklch(0.6261 0.1859 259.596)",
|
|
149
|
-
"sidebar-ring": "oklch(0.6261 0.1859 259.596)"
|
|
150
|
-
},
|
|
151
|
-
violet: {
|
|
152
|
-
primary: "oklch(0.4865 0.2423 291.866)",
|
|
153
|
-
"primary-foreground": "oklch(1 0 0)",
|
|
154
|
-
ring: "oklch(0.6016 0.2214 292.234)",
|
|
155
|
-
accent: "oklch(0.2467 0.109 294.41)",
|
|
156
|
-
"accent-foreground": "oklch(0.7817 0.1036 301.636)",
|
|
157
|
-
"sidebar-primary": "oklch(0.4865 0.2423 291.866)",
|
|
158
|
-
"sidebar-ring": "oklch(0.6016 0.2214 292.234)"
|
|
159
|
-
}
|
|
160
|
-
};
|
|
161
|
-
|
|
162
|
-
// src/theme/presets/compose.ts
|
|
163
|
-
function lightAccentFromPrimary(primary = "") {
|
|
164
|
-
const m = primary.trim().match(/^oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)$/i);
|
|
165
|
-
if (!m) return { accent: "oklch(0.95 0 0)", "accent-foreground": "oklch(0.42 0 0)" };
|
|
166
|
-
const c = Number(m[2]);
|
|
167
|
-
const h = Number(m[3]);
|
|
168
|
-
const tint = Math.min(c, 0.05);
|
|
169
|
-
const fg = Math.min(c, 0.12);
|
|
170
|
-
return {
|
|
171
|
-
accent: `oklch(0.95 ${tint} ${h})`,
|
|
172
|
-
"accent-foreground": `oklch(0.42 ${fg} ${h})`
|
|
173
|
-
};
|
|
174
|
-
}
|
|
175
|
-
function composePreset(mode, accent) {
|
|
176
|
-
const base = mode === "dark" ? darkMode : lightMode;
|
|
177
|
-
const accentTokens = accents[accent];
|
|
178
|
-
if (mode === "light") {
|
|
179
|
-
const { accent: _a, "accent-foreground": _af, ...brandTokens } = accentTokens;
|
|
180
|
-
return { ...base, ...brandTokens, ...lightAccentFromPrimary(brandTokens.primary) };
|
|
181
|
-
}
|
|
182
|
-
return { ...base, ...accentTokens };
|
|
183
|
-
}
|
|
184
|
-
var PRESET_MAP = {
|
|
185
|
-
light: { mode: "light", accent: "neutral" },
|
|
186
|
-
dark: { mode: "dark", accent: "neutral" },
|
|
187
|
-
"dark-emerald": { mode: "dark", accent: "emerald" },
|
|
188
|
-
"dark-green": { mode: "dark", accent: "green" },
|
|
189
|
-
"dark-slate": { mode: "dark", accent: "slate" },
|
|
190
|
-
"dark-blue": { mode: "dark", accent: "blue" },
|
|
191
|
-
"dark-violet": { mode: "dark", accent: "violet" }
|
|
192
|
-
};
|
|
193
|
-
function resolvePreset(preset) {
|
|
194
|
-
const { mode, accent } = PRESET_MAP[preset];
|
|
195
|
-
return composePreset(mode, accent);
|
|
196
|
-
}
|
|
197
|
-
var ACCENT_KEYS = /* @__PURE__ */ new Set([
|
|
198
|
-
"primary",
|
|
199
|
-
"primary-foreground",
|
|
200
|
-
"ring",
|
|
201
|
-
"accent",
|
|
202
|
-
"accent-foreground",
|
|
203
|
-
"sidebar-primary",
|
|
204
|
-
"sidebar-ring"
|
|
205
|
-
]);
|
|
206
|
-
function tokensToStyle(tokens, accentOnly) {
|
|
207
|
-
const style = {};
|
|
208
|
-
for (const [key, value] of Object.entries(tokens)) {
|
|
209
|
-
if (value && (!accentOnly || ACCENT_KEYS.has(key))) {
|
|
210
|
-
style[`--${key}`] = value;
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
return style;
|
|
214
|
-
}
|
|
215
|
-
var RADIUS_TOKENS = [
|
|
216
|
-
"--radius-xs",
|
|
217
|
-
"--radius-sm",
|
|
218
|
-
"--radius-md",
|
|
219
|
-
"--radius-lg",
|
|
220
|
-
"--radius-xl",
|
|
221
|
-
"--radius-2xl",
|
|
222
|
-
"--radius-3xl",
|
|
223
|
-
"--radius-4xl"
|
|
224
|
-
];
|
|
225
|
-
function radiusToStyle(radius) {
|
|
226
|
-
const style = { "--radius": radius };
|
|
227
|
-
for (const key of RADIUS_TOKENS) style[key] = "var(--radius)";
|
|
228
|
-
return style;
|
|
229
|
-
}
|
|
230
|
-
function resolveThemeTokens({
|
|
231
|
-
preset,
|
|
232
|
-
mode,
|
|
233
|
-
accent,
|
|
234
|
-
explicitTokens,
|
|
235
|
-
configTokens,
|
|
236
|
-
configMode,
|
|
237
|
-
overrides
|
|
238
|
-
}) {
|
|
239
|
-
if (explicitTokens) return explicitTokens;
|
|
240
|
-
const tokenMode = mode ?? configMode;
|
|
241
|
-
const modeOverrides = tokenMode ? overrides?.[tokenMode] : void 0;
|
|
242
|
-
const tokensMatchMode2 = !configMode || !tokenMode || configMode === tokenMode;
|
|
243
|
-
const scopedTokens = tokensMatchMode2 ? configTokens : void 0;
|
|
244
|
-
if (preset) {
|
|
245
|
-
return { ...resolvePreset(preset), ...scopedTokens ?? {}, ...modeOverrides ?? {} };
|
|
246
|
-
}
|
|
247
|
-
if (tokenMode) {
|
|
248
|
-
return {
|
|
249
|
-
...composePreset(tokenMode, accent ?? "neutral"),
|
|
250
|
-
...scopedTokens ?? {},
|
|
251
|
-
...modeOverrides ?? {}
|
|
252
|
-
};
|
|
253
|
-
}
|
|
254
|
-
if (scopedTokens || modeOverrides) return { ...scopedTokens ?? {}, ...modeOverrides ?? {} };
|
|
255
|
-
return null;
|
|
256
|
-
}
|
|
257
|
-
var NajmThemeDepthContext = React.createContext(0);
|
|
258
|
-
var NajmThemeModeContext = React.createContext(void 0);
|
|
259
|
-
function useNajmThemeMode() {
|
|
260
|
-
return React.useContext(NajmThemeModeContext);
|
|
261
|
-
}
|
|
262
|
-
var NajmThemeContainerCtx = React.createContext(null);
|
|
263
|
-
var DEFAULT_APPEARANCE = {};
|
|
264
|
-
var NajmAppearanceContext = React.createContext(DEFAULT_APPEARANCE);
|
|
265
|
-
function useNajmAppearance() {
|
|
266
|
-
return React.useContext(NajmAppearanceContext);
|
|
267
|
-
}
|
|
268
|
-
function NajmThemeProvider({
|
|
269
|
-
config,
|
|
270
|
-
preset,
|
|
271
|
-
mode,
|
|
272
|
-
accent,
|
|
273
|
-
tokens,
|
|
274
|
-
accentOnly,
|
|
275
|
-
appearance,
|
|
276
|
-
radius,
|
|
277
|
-
className,
|
|
278
|
-
asChild,
|
|
279
|
-
children
|
|
280
|
-
}) {
|
|
281
|
-
const depth = React.useContext(NajmThemeDepthContext);
|
|
282
|
-
const parentMode = React.useContext(NajmThemeModeContext);
|
|
283
|
-
const parentAppearance = React.useContext(NajmAppearanceContext);
|
|
284
|
-
const effectivePreset = preset ?? config?.preset;
|
|
285
|
-
const effectiveMode = mode ?? config?.mode;
|
|
286
|
-
const effectiveAccent = accent ?? config?.accent;
|
|
287
|
-
const effectiveAccentOnly = accentOnly ?? config?.accentOnly;
|
|
288
|
-
const effectiveRadius = radius ?? config?.radius;
|
|
289
|
-
const effectiveBorderWidth = appearance?.borderWidth ?? config?.appearance?.borderWidth;
|
|
290
|
-
const resolved = React.useMemo(() => {
|
|
291
|
-
return resolveThemeTokens({
|
|
292
|
-
preset: effectivePreset,
|
|
293
|
-
mode: effectiveMode,
|
|
294
|
-
accent: effectiveAccent,
|
|
295
|
-
explicitTokens: tokens,
|
|
296
|
-
configTokens: config?.tokens,
|
|
297
|
-
configMode: config?.mode,
|
|
298
|
-
overrides: config?.overrides
|
|
299
|
-
});
|
|
300
|
-
}, [
|
|
301
|
-
effectivePreset,
|
|
302
|
-
effectiveMode,
|
|
303
|
-
effectiveAccent,
|
|
304
|
-
tokens,
|
|
305
|
-
config?.tokens,
|
|
306
|
-
config?.mode,
|
|
307
|
-
config?.overrides
|
|
308
|
-
]);
|
|
309
|
-
const style = React.useMemo(
|
|
310
|
-
() => {
|
|
311
|
-
const tokenStyle = resolved ? tokensToStyle(resolved, effectiveAccentOnly) : void 0;
|
|
312
|
-
const radiusStyle = effectiveRadius !== void 0 ? radiusToStyle(effectiveRadius) : void 0;
|
|
313
|
-
const borderWidthStyle = effectiveBorderWidth !== void 0 ? { "--border-width": effectiveBorderWidth } : void 0;
|
|
314
|
-
if (!tokenStyle && !radiusStyle && !borderWidthStyle) return void 0;
|
|
315
|
-
return { ...tokenStyle, ...radiusStyle, ...borderWidthStyle };
|
|
316
|
-
},
|
|
317
|
-
[resolved, effectiveAccentOnly, effectiveRadius, effectiveBorderWidth]
|
|
318
|
-
);
|
|
319
|
-
const Comp = asChild ? Slot : "div";
|
|
320
|
-
const [container, setContainer] = React.useState(null);
|
|
321
|
-
const containerRef = React.useRef(null);
|
|
322
|
-
const handleContainerRef = React.useCallback((node) => {
|
|
323
|
-
if (containerRef.current === node) return;
|
|
324
|
-
containerRef.current = node;
|
|
325
|
-
setContainer(node);
|
|
326
|
-
}, []);
|
|
327
|
-
const resolvedAppearance = React.useMemo(
|
|
328
|
-
() => ({ ...parentAppearance, ...config?.appearance ?? {}, ...appearance ?? {} }),
|
|
329
|
-
[parentAppearance, config?.appearance, appearance]
|
|
330
|
-
);
|
|
331
|
-
return /* @__PURE__ */ jsx(NajmThemeDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(NajmThemeModeContext.Provider, { value: effectiveMode ?? parentMode, children: /* @__PURE__ */ jsx(NajmAppearanceContext.Provider, { value: resolvedAppearance, children: /* @__PURE__ */ jsx(NajmThemeContainerCtx.Provider, { value: container, children: /* @__PURE__ */ jsx(
|
|
332
|
-
Comp,
|
|
333
|
-
{
|
|
334
|
-
ref: handleContainerRef,
|
|
335
|
-
suppressHydrationWarning: true,
|
|
336
|
-
"data-najm-theme": effectivePreset ?? `${effectiveMode ?? "light"}-${effectiveAccent ?? "neutral"}`,
|
|
337
|
-
className,
|
|
338
|
-
style,
|
|
339
|
-
children
|
|
340
|
-
}
|
|
341
|
-
) }) }) }) });
|
|
342
|
-
}
|
|
343
|
-
function cn(...inputs) {
|
|
344
|
-
return twMerge(clsx(inputs));
|
|
345
|
-
}
|
|
346
43
|
function Tabs({
|
|
347
44
|
className,
|
|
348
45
|
variant = "pills",
|
|
@@ -445,77 +142,6 @@ var TAB_COLORS = {
|
|
|
445
142
|
card: { list: "bg-card", active: "bg-muted" },
|
|
446
143
|
ghost: { list: "bg-transparent", active: "bg-accent" }
|
|
447
144
|
};
|
|
448
|
-
function toPascalCase(value) {
|
|
449
|
-
return value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[\s_-]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
|
|
450
|
-
}
|
|
451
|
-
function isImageSource(value) {
|
|
452
|
-
return value.startsWith("/") || value.startsWith("./") || value.startsWith("../") || value.startsWith("http://") || value.startsWith("https://") || value.startsWith("data:image/") || /\.(avif|gif|jpe?g|png|svg|webp)(\?.*)?$/i.test(value);
|
|
453
|
-
}
|
|
454
|
-
function isComponentSource(value) {
|
|
455
|
-
return typeof value === "function" || Boolean(value && typeof value === "object" && "$$typeof" in value);
|
|
456
|
-
}
|
|
457
|
-
var NIcon = ({
|
|
458
|
-
icon = "circle",
|
|
459
|
-
size = 24,
|
|
460
|
-
alt = "",
|
|
461
|
-
className,
|
|
462
|
-
style,
|
|
463
|
-
onClick,
|
|
464
|
-
...rest
|
|
465
|
-
}) => {
|
|
466
|
-
const dimensionStyle = {
|
|
467
|
-
width: size,
|
|
468
|
-
height: size,
|
|
469
|
-
...style
|
|
470
|
-
};
|
|
471
|
-
if (React__default.isValidElement(icon)) {
|
|
472
|
-
return React__default.cloneElement(icon, {
|
|
473
|
-
className: cn(className, icon.props.className),
|
|
474
|
-
onClick,
|
|
475
|
-
...rest
|
|
476
|
-
});
|
|
477
|
-
}
|
|
478
|
-
if (icon && typeof icon === "object" && "src" in icon) {
|
|
479
|
-
return /* @__PURE__ */ jsx(
|
|
480
|
-
"img",
|
|
481
|
-
{
|
|
482
|
-
alt: icon.alt ?? alt,
|
|
483
|
-
className: cn("inline-block shrink-0 object-contain", className),
|
|
484
|
-
src: icon.src,
|
|
485
|
-
style: dimensionStyle,
|
|
486
|
-
onClick,
|
|
487
|
-
...rest
|
|
488
|
-
}
|
|
489
|
-
);
|
|
490
|
-
}
|
|
491
|
-
if (isComponentSource(icon)) {
|
|
492
|
-
const IconComponent = icon;
|
|
493
|
-
return /* @__PURE__ */ jsx(IconComponent, { size, className, onClick, style, ...rest });
|
|
494
|
-
}
|
|
495
|
-
if (typeof icon === "string") {
|
|
496
|
-
if (isImageSource(icon)) {
|
|
497
|
-
return /* @__PURE__ */ jsx(
|
|
498
|
-
"img",
|
|
499
|
-
{
|
|
500
|
-
alt,
|
|
501
|
-
className: cn("inline-block shrink-0 object-contain", className),
|
|
502
|
-
src: icon,
|
|
503
|
-
style: dimensionStyle,
|
|
504
|
-
onClick,
|
|
505
|
-
...rest
|
|
506
|
-
}
|
|
507
|
-
);
|
|
508
|
-
}
|
|
509
|
-
const pascalCaseIcon = toPascalCase(icon);
|
|
510
|
-
if (LucideIcons[pascalCaseIcon]) {
|
|
511
|
-
const LucideIcon = LucideIcons[pascalCaseIcon];
|
|
512
|
-
return /* @__PURE__ */ jsx(LucideIcon, { size, className, onClick, style, ...rest });
|
|
513
|
-
}
|
|
514
|
-
return null;
|
|
515
|
-
}
|
|
516
|
-
return null;
|
|
517
|
-
};
|
|
518
|
-
NIcon.displayName = "NIcon";
|
|
519
145
|
function hexToRgb(hex) {
|
|
520
146
|
const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
521
147
|
return m ? { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) } : { r: 0, g: 0, b: 0 };
|
|
@@ -625,7 +251,7 @@ function NTabs({
|
|
|
625
251
|
}
|
|
626
252
|
var PORTAL_LAYER_STYLE_ID = "najm-kit-portal-layer-styles";
|
|
627
253
|
function useNajmPortalLayerStyles() {
|
|
628
|
-
|
|
254
|
+
React60.useInsertionEffect(() => {
|
|
629
255
|
if (typeof document === "undefined") return;
|
|
630
256
|
if (document.getElementById(PORTAL_LAYER_STYLE_ID)) return;
|
|
631
257
|
const style = document.createElement("style");
|
|
@@ -656,7 +282,7 @@ var tooltipContentVariants = cva(
|
|
|
656
282
|
}
|
|
657
283
|
);
|
|
658
284
|
function TooltipContent({ className, sideOffset = 4, variant, children, ...props }) {
|
|
659
|
-
const container =
|
|
285
|
+
const container = React60.useContext(NajmThemeContainerCtx);
|
|
660
286
|
useNajmPortalLayerStyles();
|
|
661
287
|
return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
|
|
662
288
|
TooltipPrimitive.Content,
|
|
@@ -774,704 +400,8 @@ function NEditorTabs({
|
|
|
774
400
|
}
|
|
775
401
|
);
|
|
776
402
|
}
|
|
777
|
-
|
|
778
|
-
// src/theme/borders.ts
|
|
779
|
-
var SURFACE_BORDER_CLASSES = {
|
|
780
|
-
all: "najm-border border-border",
|
|
781
|
-
top: "najm-border-t border-border",
|
|
782
|
-
right: "najm-border-r border-border",
|
|
783
|
-
bottom: "najm-border-b border-border",
|
|
784
|
-
left: "najm-border-l border-border"
|
|
785
|
-
};
|
|
786
|
-
var SIDEBAR_BORDER_CLASSES = {
|
|
787
|
-
all: "najm-border border-sidebar-border",
|
|
788
|
-
top: "najm-border-t border-sidebar-border",
|
|
789
|
-
right: "najm-border-r border-sidebar-border",
|
|
790
|
-
bottom: "najm-border-b border-sidebar-border",
|
|
791
|
-
left: "najm-border-l border-sidebar-border"
|
|
792
|
-
};
|
|
793
|
-
var BORDER_RESET_CLASSES = {
|
|
794
|
-
all: "border-0",
|
|
795
|
-
top: "border-t-0",
|
|
796
|
-
right: "border-r-0",
|
|
797
|
-
bottom: "border-b-0",
|
|
798
|
-
left: "border-l-0"
|
|
799
|
-
};
|
|
800
|
-
function surfaceBorderClasses(bordered = true, side = "all") {
|
|
801
|
-
return bordered === false ? BORDER_RESET_CLASSES[side] : SURFACE_BORDER_CLASSES[side];
|
|
802
|
-
}
|
|
803
|
-
function sidebarBorderClasses(bordered = true, side = "all") {
|
|
804
|
-
return bordered === false ? BORDER_RESET_CLASSES[side] : SIDEBAR_BORDER_CLASSES[side];
|
|
805
|
-
}
|
|
806
|
-
function inputBorderClasses(bordered = true) {
|
|
807
|
-
return bordered === false ? "border-0" : "najm-border border-input";
|
|
808
|
-
}
|
|
809
|
-
var NajmDesignContext = React.createContext({
|
|
810
|
-
components: {}
|
|
811
|
-
});
|
|
812
|
-
function useNajmDesign() {
|
|
813
|
-
return React.useContext(NajmDesignContext);
|
|
814
|
-
}
|
|
815
|
-
function useNajmComponentStyle(name) {
|
|
816
|
-
const { components } = useNajmDesign();
|
|
817
|
-
return components[name];
|
|
818
|
-
}
|
|
819
|
-
var SCALE_FACTOR = {
|
|
820
|
-
compact: "0.95",
|
|
821
|
-
default: "1",
|
|
822
|
-
comfortable: "1.05"
|
|
823
|
-
};
|
|
824
|
-
function typographyToStyle(t) {
|
|
825
|
-
const style = {};
|
|
826
|
-
if (t.fontSans) style["--font-sans"] = t.fontSans;
|
|
827
|
-
if (t.fontHeading) style["--font-heading"] = t.fontHeading;
|
|
828
|
-
if (t.fontMono) style["--font-mono"] = t.fontMono;
|
|
829
|
-
if (t.baseSize) style["--font-size-base"] = t.baseSize;
|
|
830
|
-
if (t.lineHeight) style["--line-height-base"] = t.lineHeight;
|
|
831
|
-
if (t.letterSpacing) style["--letter-spacing-base"] = t.letterSpacing;
|
|
832
|
-
if (t.scale) style["--font-scale"] = SCALE_FACTOR[t.scale];
|
|
833
|
-
return style;
|
|
834
|
-
}
|
|
835
|
-
function layoutToStyle(layout) {
|
|
836
|
-
const style = {};
|
|
837
|
-
if (layout.pageGutter) style["--page-gutter"] = layout.pageGutter;
|
|
838
|
-
if (layout.sectionGap) style["--section-gap"] = layout.sectionGap;
|
|
839
|
-
return style;
|
|
840
|
-
}
|
|
841
|
-
function NajmDesignProvider({
|
|
842
|
-
config,
|
|
843
|
-
mode,
|
|
844
|
-
className,
|
|
845
|
-
children
|
|
846
|
-
}) {
|
|
847
|
-
const contextValue = React.useMemo(
|
|
848
|
-
() => ({ components: config.components ?? {}, typography: config.typography, layout: config.layout }),
|
|
849
|
-
[config.components, config.typography, config.layout]
|
|
850
|
-
);
|
|
851
|
-
const typographyStyle = React.useMemo(
|
|
852
|
-
() => config.typography ? typographyToStyle(config.typography) : void 0,
|
|
853
|
-
[config.typography]
|
|
854
|
-
);
|
|
855
|
-
const layoutStyle = React.useMemo(
|
|
856
|
-
() => config.layout ? layoutToStyle(config.layout) : void 0,
|
|
857
|
-
[config.layout]
|
|
858
|
-
);
|
|
859
|
-
const providerStyle = React.useMemo(
|
|
860
|
-
() => ({ ...layoutStyle ?? {}, ...typographyStyle ?? {} }),
|
|
861
|
-
[layoutStyle, typographyStyle]
|
|
862
|
-
);
|
|
863
|
-
return /* @__PURE__ */ jsx(NajmDesignContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(NajmThemeProvider, { config: config.theme, mode, className, children: layoutStyle || typographyStyle ? (
|
|
864
|
-
// `display: contents` lets design CSS variables cascade to
|
|
865
|
-
// children without introducing a layout box that would break height
|
|
866
|
-
// chains (e.g. h-full) in the consuming app.
|
|
867
|
-
/* @__PURE__ */ jsx("div", { style: { display: "contents", ...providerStyle }, "data-najm-design-vars": "", children })
|
|
868
|
-
) : children }) });
|
|
869
|
-
}
|
|
870
|
-
|
|
871
|
-
// src/theme/design-types.ts
|
|
872
|
-
var NAJM_COMPONENT_NAMES = [
|
|
873
|
-
"button",
|
|
874
|
-
"badge",
|
|
875
|
-
"card",
|
|
876
|
-
"table",
|
|
877
|
-
"tabs",
|
|
878
|
-
"dialog",
|
|
879
|
-
"alert",
|
|
880
|
-
"sidebar",
|
|
881
|
-
"pageHeader",
|
|
882
|
-
"input",
|
|
883
|
-
"select",
|
|
884
|
-
"dropdown",
|
|
885
|
-
"sheet",
|
|
886
|
-
"popover",
|
|
887
|
-
"tooltip",
|
|
888
|
-
"progress",
|
|
889
|
-
"avatar"
|
|
890
|
-
];
|
|
891
|
-
var RADIUS_VALUE_MAP = {
|
|
892
|
-
none: "0",
|
|
893
|
-
xs: "var(--radius-xs)",
|
|
894
|
-
sm: "var(--radius-sm)",
|
|
895
|
-
md: "var(--radius-md)",
|
|
896
|
-
lg: "var(--radius-lg)",
|
|
897
|
-
xl: "var(--radius-xl)",
|
|
898
|
-
full: "9999px"
|
|
899
|
-
};
|
|
900
|
-
function resolveRadiusValue(radius) {
|
|
901
|
-
if (!radius || radius === "inherit") return void 0;
|
|
902
|
-
return RADIUS_VALUE_MAP[radius] ?? radius;
|
|
903
|
-
}
|
|
904
|
-
|
|
905
|
-
// src/theme/config.ts
|
|
906
|
-
var MODES = ["light", "dark"];
|
|
907
|
-
var ACCENTS = ["neutral", "emerald", "green", "slate", "blue", "violet"];
|
|
908
|
-
var PRESETS = ["light", "dark", "dark-emerald", "dark-green", "dark-slate", "dark-blue", "dark-violet"];
|
|
909
|
-
var TOKEN_KEYS = [
|
|
910
|
-
"background",
|
|
911
|
-
"foreground",
|
|
912
|
-
"card",
|
|
913
|
-
"card-foreground",
|
|
914
|
-
"popover",
|
|
915
|
-
"popover-foreground",
|
|
916
|
-
"primary",
|
|
917
|
-
"primary-foreground",
|
|
918
|
-
"secondary",
|
|
919
|
-
"secondary-foreground",
|
|
920
|
-
"tertiary",
|
|
921
|
-
"tertiary-foreground",
|
|
922
|
-
"muted",
|
|
923
|
-
"muted-foreground",
|
|
924
|
-
"accent",
|
|
925
|
-
"accent-foreground",
|
|
926
|
-
"destructive",
|
|
927
|
-
"destructive-foreground",
|
|
928
|
-
"border",
|
|
929
|
-
"input",
|
|
930
|
-
"ring",
|
|
931
|
-
"sidebar",
|
|
932
|
-
"sidebar-foreground",
|
|
933
|
-
"sidebar-primary",
|
|
934
|
-
"sidebar-primary-foreground",
|
|
935
|
-
"sidebar-accent",
|
|
936
|
-
"sidebar-accent-foreground",
|
|
937
|
-
"sidebar-border",
|
|
938
|
-
"sidebar-ring",
|
|
939
|
-
"chart-1",
|
|
940
|
-
"chart-2",
|
|
941
|
-
"chart-3",
|
|
942
|
-
"chart-4",
|
|
943
|
-
"chart-5",
|
|
944
|
-
"radius"
|
|
945
|
-
];
|
|
946
|
-
var ROOT_KEYS = /* @__PURE__ */ new Set([
|
|
947
|
-
"preset",
|
|
948
|
-
"mode",
|
|
949
|
-
"accent",
|
|
950
|
-
"tokens",
|
|
951
|
-
"overrides",
|
|
952
|
-
"accentOnly",
|
|
953
|
-
"appearance",
|
|
954
|
-
"radius"
|
|
955
|
-
]);
|
|
956
|
-
var TOKEN_KEY_SET = new Set(TOKEN_KEYS);
|
|
957
|
-
var MODE_KEY_SET = new Set(MODES);
|
|
958
|
-
function isRecord(value) {
|
|
959
|
-
return typeof value === "object" && value !== null && !Array.isArray(value);
|
|
960
|
-
}
|
|
961
|
-
function assertKnownKeys(value, keys, path) {
|
|
962
|
-
const unknown = Object.keys(value).find((key) => !keys.has(key));
|
|
963
|
-
if (unknown) throw new TypeError(`Unknown ${path} property: ${unknown}`);
|
|
964
|
-
}
|
|
965
|
-
function optionalEnum(value, values, path) {
|
|
966
|
-
if (value === void 0) return void 0;
|
|
967
|
-
if (typeof value !== "string" || !values.includes(value)) {
|
|
968
|
-
throw new TypeError(`${path} must be one of: ${values.join(", ")}`);
|
|
969
|
-
}
|
|
970
|
-
return value;
|
|
971
|
-
}
|
|
972
|
-
function optionalString(value, path) {
|
|
973
|
-
if (value === void 0) return void 0;
|
|
974
|
-
if (typeof value !== "string" || value.trim() === "") {
|
|
975
|
-
throw new TypeError(`${path} must be a non-empty string`);
|
|
976
|
-
}
|
|
977
|
-
return value;
|
|
978
|
-
}
|
|
979
|
-
function parseTokens(value) {
|
|
980
|
-
if (value === void 0) return void 0;
|
|
981
|
-
if (!isRecord(value)) throw new TypeError("theme.tokens must be an object");
|
|
982
|
-
assertKnownKeys(value, TOKEN_KEY_SET, "theme.tokens");
|
|
983
|
-
const tokens = {};
|
|
984
|
-
for (const key of TOKEN_KEYS) {
|
|
985
|
-
const token = optionalString(value[key], `theme.tokens.${key}`);
|
|
986
|
-
if (token !== void 0) tokens[key] = token;
|
|
987
|
-
}
|
|
988
|
-
return tokens;
|
|
989
|
-
}
|
|
990
|
-
function parseOverrides(value) {
|
|
991
|
-
if (value === void 0) return void 0;
|
|
992
|
-
if (!isRecord(value)) throw new TypeError("theme.overrides must be an object");
|
|
993
|
-
assertKnownKeys(value, MODE_KEY_SET, "theme.overrides");
|
|
994
|
-
const overrides = {};
|
|
995
|
-
for (const mode of MODES) {
|
|
996
|
-
const entry = value[mode];
|
|
997
|
-
if (entry === void 0) continue;
|
|
998
|
-
overrides[mode] = parseTokens(entry) ?? {};
|
|
999
|
-
}
|
|
1000
|
-
return overrides;
|
|
1001
|
-
}
|
|
1002
|
-
function defineNajmThemeConfig(config) {
|
|
1003
|
-
return config;
|
|
1004
|
-
}
|
|
1005
|
-
function parseNajmThemeConfig(input) {
|
|
1006
|
-
let value = input;
|
|
1007
|
-
if (typeof input === "string") {
|
|
1008
|
-
try {
|
|
1009
|
-
value = JSON.parse(input);
|
|
1010
|
-
} catch (error) {
|
|
1011
|
-
throw new TypeError(`Invalid theme JSON: ${error.message}`);
|
|
1012
|
-
}
|
|
1013
|
-
}
|
|
1014
|
-
if (!isRecord(value)) throw new TypeError("Theme config must be an object");
|
|
1015
|
-
assertKnownKeys(value, ROOT_KEYS, "theme");
|
|
1016
|
-
let appearance;
|
|
1017
|
-
if (value.appearance !== void 0) {
|
|
1018
|
-
if (!isRecord(value.appearance)) throw new TypeError("theme.appearance must be an object");
|
|
1019
|
-
assertKnownKeys(value.appearance, /* @__PURE__ */ new Set(["borderWidth"]), "theme.appearance");
|
|
1020
|
-
appearance = {
|
|
1021
|
-
borderWidth: optionalString(
|
|
1022
|
-
value.appearance.borderWidth,
|
|
1023
|
-
"theme.appearance.borderWidth"
|
|
1024
|
-
)
|
|
1025
|
-
};
|
|
1026
|
-
}
|
|
1027
|
-
const accentOnly = value.accentOnly;
|
|
1028
|
-
if (accentOnly !== void 0 && typeof accentOnly !== "boolean") {
|
|
1029
|
-
throw new TypeError("theme.accentOnly must be a boolean");
|
|
1030
|
-
}
|
|
1031
|
-
const parsedAccentOnly = typeof accentOnly === "boolean" ? accentOnly : void 0;
|
|
1032
|
-
const config = {};
|
|
1033
|
-
const preset = optionalEnum(value.preset, PRESETS, "theme.preset");
|
|
1034
|
-
const mode = optionalEnum(value.mode, MODES, "theme.mode");
|
|
1035
|
-
const accent = optionalEnum(value.accent, ACCENTS, "theme.accent");
|
|
1036
|
-
const tokens = parseTokens(value.tokens);
|
|
1037
|
-
const overrides = parseOverrides(value.overrides);
|
|
1038
|
-
const radius = optionalString(value.radius, "theme.radius");
|
|
1039
|
-
if (preset !== void 0) config.preset = preset;
|
|
1040
|
-
if (mode !== void 0) config.mode = mode;
|
|
1041
|
-
if (accent !== void 0) config.accent = accent;
|
|
1042
|
-
if (tokens !== void 0) config.tokens = tokens;
|
|
1043
|
-
if (overrides !== void 0) config.overrides = overrides;
|
|
1044
|
-
if (parsedAccentOnly !== void 0) config.accentOnly = parsedAccentOnly;
|
|
1045
|
-
if (appearance !== void 0) config.appearance = appearance;
|
|
1046
|
-
if (radius !== void 0) config.radius = radius;
|
|
1047
|
-
return config;
|
|
1048
|
-
}
|
|
1049
|
-
function stringifyNajmThemeConfig(config, space = 2) {
|
|
1050
|
-
return JSON.stringify(config, null, space);
|
|
1051
|
-
}
|
|
1052
|
-
|
|
1053
|
-
// src/theme/design-config.ts
|
|
1054
|
-
var ROOT_KEYS2 = /* @__PURE__ */ new Set(["version", "theme", "typography", "components", "layout"]);
|
|
1055
|
-
var TYPOGRAPHY_KEYS = /* @__PURE__ */ new Set([
|
|
1056
|
-
"fontSans",
|
|
1057
|
-
"fontHeading",
|
|
1058
|
-
"fontMono",
|
|
1059
|
-
"baseSize",
|
|
1060
|
-
"scale",
|
|
1061
|
-
"lineHeight",
|
|
1062
|
-
"letterSpacing"
|
|
1063
|
-
]);
|
|
1064
|
-
var LAYOUT_KEYS = /* @__PURE__ */ new Set(["pageGutter", "sectionGap"]);
|
|
1065
|
-
var COMPONENT_KEYS = /* @__PURE__ */ new Set([
|
|
1066
|
-
"card",
|
|
1067
|
-
"showSectionLabels",
|
|
1068
|
-
"showSectionSeparators",
|
|
1069
|
-
"expandedWidth",
|
|
1070
|
-
"collapsedWidth",
|
|
1071
|
-
"mobileWidth",
|
|
1072
|
-
"defaultVariant",
|
|
1073
|
-
"defaultSize",
|
|
1074
|
-
"density",
|
|
1075
|
-
"headerColor",
|
|
1076
|
-
"headerTextColor",
|
|
1077
|
-
"borderColor",
|
|
1078
|
-
"radius",
|
|
1079
|
-
"borderWidth",
|
|
1080
|
-
"slots",
|
|
1081
|
-
"variants"
|
|
1082
|
-
]);
|
|
1083
|
-
var SLOT_KEYS = /* @__PURE__ */ new Set(["className", "radius", "borderWidth", "padding", "paddingTop"]);
|
|
1084
|
-
var VARIANT_KEYS = /* @__PURE__ */ new Set(["use", "className", "tokens"]);
|
|
1085
|
-
var COMPONENT_NAME_SET = new Set(NAJM_COMPONENT_NAMES);
|
|
1086
|
-
var DENSITIES = /* @__PURE__ */ new Set(["compact", "default", "comfortable"]);
|
|
1087
|
-
var SCALES = /* @__PURE__ */ new Set(["compact", "default", "comfortable"]);
|
|
1088
|
-
var RESPONSIVE_BREAKPOINTS = /* @__PURE__ */ new Set(["base", "sm", "md", "lg", "xl", "2xl"]);
|
|
1089
|
-
function isRecord2(value) {
|
|
1090
|
-
return typeof value === "object" && value !== null && !Array.isArray(value);
|
|
1091
|
-
}
|
|
1092
|
-
function assertKnownKeys2(value, keys, path) {
|
|
1093
|
-
const unknown = Object.keys(value).find((key) => !keys.has(key));
|
|
1094
|
-
if (unknown) throw new TypeError(`Unknown ${path} property: ${unknown}`);
|
|
1095
|
-
}
|
|
1096
|
-
function optionalString2(value, path) {
|
|
1097
|
-
if (value === void 0) return void 0;
|
|
1098
|
-
if (typeof value !== "string") {
|
|
1099
|
-
throw new TypeError(`${path} must be a string`);
|
|
1100
|
-
}
|
|
1101
|
-
return value;
|
|
1102
|
-
}
|
|
1103
|
-
function optionalBoolean(value, path) {
|
|
1104
|
-
if (value === void 0) return void 0;
|
|
1105
|
-
if (typeof value !== "boolean") {
|
|
1106
|
-
throw new TypeError(`${path} must be a boolean`);
|
|
1107
|
-
}
|
|
1108
|
-
return value;
|
|
1109
|
-
}
|
|
1110
|
-
function optionalResponsiveNumber(value, path) {
|
|
1111
|
-
if (value === void 0) return void 0;
|
|
1112
|
-
if (typeof value === "number") return value;
|
|
1113
|
-
if (!isRecord2(value)) throw new TypeError(`${path} must be a number or breakpoint object`);
|
|
1114
|
-
const unknown = Object.keys(value).find((key) => !RESPONSIVE_BREAKPOINTS.has(key));
|
|
1115
|
-
if (unknown) throw new TypeError(`Unknown ${path} breakpoint: ${unknown}`);
|
|
1116
|
-
const parsed = {};
|
|
1117
|
-
for (const [breakpoint, width] of Object.entries(value)) {
|
|
1118
|
-
if (typeof width !== "number") {
|
|
1119
|
-
throw new TypeError(`${path}.${breakpoint} must be a number`);
|
|
1120
|
-
}
|
|
1121
|
-
parsed[breakpoint] = width;
|
|
1122
|
-
}
|
|
1123
|
-
return parsed;
|
|
1124
|
-
}
|
|
1125
|
-
function optionalEnum2(value, values, path) {
|
|
1126
|
-
if (value === void 0) return void 0;
|
|
1127
|
-
if (typeof value !== "string" || !values.has(value)) {
|
|
1128
|
-
throw new TypeError(`${path} must be one of: ${[...values].join(", ")}`);
|
|
1129
|
-
}
|
|
1130
|
-
return value;
|
|
1131
|
-
}
|
|
1132
|
-
function parseTypography(value) {
|
|
1133
|
-
if (value === void 0) return void 0;
|
|
1134
|
-
if (!isRecord2(value)) throw new TypeError("typography must be an object");
|
|
1135
|
-
assertKnownKeys2(value, TYPOGRAPHY_KEYS, "typography");
|
|
1136
|
-
const cfg = {};
|
|
1137
|
-
const fontSans = optionalString2(value.fontSans, "typography.fontSans");
|
|
1138
|
-
const fontHeading = optionalString2(value.fontHeading, "typography.fontHeading");
|
|
1139
|
-
const fontMono = optionalString2(value.fontMono, "typography.fontMono");
|
|
1140
|
-
const baseSize = optionalString2(value.baseSize, "typography.baseSize");
|
|
1141
|
-
const scale = optionalEnum2(value.scale, SCALES, "typography.scale");
|
|
1142
|
-
const lineHeight = optionalString2(value.lineHeight, "typography.lineHeight");
|
|
1143
|
-
const letterSpacing = optionalString2(value.letterSpacing, "typography.letterSpacing");
|
|
1144
|
-
if (fontSans !== void 0) cfg.fontSans = fontSans;
|
|
1145
|
-
if (fontHeading !== void 0) cfg.fontHeading = fontHeading;
|
|
1146
|
-
if (fontMono !== void 0) cfg.fontMono = fontMono;
|
|
1147
|
-
if (baseSize !== void 0) cfg.baseSize = baseSize;
|
|
1148
|
-
if (scale !== void 0) cfg.scale = scale;
|
|
1149
|
-
if (lineHeight !== void 0) cfg.lineHeight = lineHeight;
|
|
1150
|
-
if (letterSpacing !== void 0) cfg.letterSpacing = letterSpacing;
|
|
1151
|
-
return cfg;
|
|
1152
|
-
}
|
|
1153
|
-
function parseLayout(value) {
|
|
1154
|
-
if (value === void 0) return void 0;
|
|
1155
|
-
if (!isRecord2(value)) throw new TypeError("layout must be an object");
|
|
1156
|
-
assertKnownKeys2(value, LAYOUT_KEYS, "layout");
|
|
1157
|
-
const cfg = {};
|
|
1158
|
-
const pageGutter = optionalString2(value.pageGutter, "layout.pageGutter");
|
|
1159
|
-
const sectionGap = optionalString2(value.sectionGap, "layout.sectionGap");
|
|
1160
|
-
if (pageGutter !== void 0) cfg.pageGutter = pageGutter;
|
|
1161
|
-
if (sectionGap !== void 0) cfg.sectionGap = sectionGap;
|
|
1162
|
-
return cfg;
|
|
1163
|
-
}
|
|
1164
|
-
function parseVariant(value, path) {
|
|
1165
|
-
if (!isRecord2(value)) throw new TypeError(`${path} must be an object`);
|
|
1166
|
-
assertKnownKeys2(value, VARIANT_KEYS, path);
|
|
1167
|
-
const variant = {};
|
|
1168
|
-
const use = optionalString2(value.use, `${path}.use`);
|
|
1169
|
-
const className = optionalString2(value.className, `${path}.className`);
|
|
1170
|
-
if (use !== void 0) variant.use = use;
|
|
1171
|
-
if (className !== void 0) variant.className = className;
|
|
1172
|
-
if (value.tokens !== void 0) {
|
|
1173
|
-
if (!isRecord2(value.tokens)) throw new TypeError(`${path}.tokens must be an object`);
|
|
1174
|
-
variant.tokens = value.tokens;
|
|
1175
|
-
}
|
|
1176
|
-
return variant;
|
|
1177
|
-
}
|
|
1178
|
-
function parseComponentStyle(value, path) {
|
|
1179
|
-
if (!isRecord2(value)) throw new TypeError(`${path} must be an object`);
|
|
1180
|
-
assertKnownKeys2(value, COMPONENT_KEYS, path);
|
|
1181
|
-
const cfg = {};
|
|
1182
|
-
const card = optionalBoolean(value.card, `${path}.card`);
|
|
1183
|
-
const showSectionLabels = optionalBoolean(value.showSectionLabels, `${path}.showSectionLabels`);
|
|
1184
|
-
const showSectionSeparators = optionalBoolean(value.showSectionSeparators, `${path}.showSectionSeparators`);
|
|
1185
|
-
const expandedWidth = optionalResponsiveNumber(value.expandedWidth, `${path}.expandedWidth`);
|
|
1186
|
-
const collapsedWidth = optionalResponsiveNumber(value.collapsedWidth, `${path}.collapsedWidth`);
|
|
1187
|
-
const mobileWidth = optionalResponsiveNumber(value.mobileWidth, `${path}.mobileWidth`);
|
|
1188
|
-
const defaultVariant = optionalString2(value.defaultVariant, `${path}.defaultVariant`);
|
|
1189
|
-
const defaultSize = optionalString2(value.defaultSize, `${path}.defaultSize`);
|
|
1190
|
-
const density = optionalEnum2(value.density, DENSITIES, `${path}.density`);
|
|
1191
|
-
const headerColor = optionalString2(value.headerColor, `${path}.headerColor`);
|
|
1192
|
-
const headerTextColor = optionalString2(value.headerTextColor, `${path}.headerTextColor`);
|
|
1193
|
-
const borderColor = optionalString2(value.borderColor, `${path}.borderColor`);
|
|
1194
|
-
const radius = optionalString2(value.radius, `${path}.radius`);
|
|
1195
|
-
const borderWidth = optionalString2(value.borderWidth, `${path}.borderWidth`);
|
|
1196
|
-
if (card !== void 0) cfg.card = card;
|
|
1197
|
-
if (showSectionLabels !== void 0) cfg.showSectionLabels = showSectionLabels;
|
|
1198
|
-
if (showSectionSeparators !== void 0) cfg.showSectionSeparators = showSectionSeparators;
|
|
1199
|
-
if (expandedWidth !== void 0) cfg.expandedWidth = expandedWidth;
|
|
1200
|
-
if (collapsedWidth !== void 0) cfg.collapsedWidth = collapsedWidth;
|
|
1201
|
-
if (mobileWidth !== void 0) cfg.mobileWidth = mobileWidth;
|
|
1202
|
-
if (defaultVariant !== void 0) cfg.defaultVariant = defaultVariant;
|
|
1203
|
-
if (defaultSize !== void 0) cfg.defaultSize = defaultSize;
|
|
1204
|
-
if (density !== void 0) cfg.density = density;
|
|
1205
|
-
if (headerColor !== void 0) cfg.headerColor = headerColor;
|
|
1206
|
-
if (headerTextColor !== void 0) cfg.headerTextColor = headerTextColor;
|
|
1207
|
-
if (borderColor !== void 0) cfg.borderColor = borderColor;
|
|
1208
|
-
if (radius !== void 0) cfg.radius = radius;
|
|
1209
|
-
if (borderWidth !== void 0) cfg.borderWidth = borderWidth;
|
|
1210
|
-
if (value.slots !== void 0) {
|
|
1211
|
-
if (!isRecord2(value.slots)) throw new TypeError(`${path}.slots must be an object`);
|
|
1212
|
-
const slots = {};
|
|
1213
|
-
for (const [slotName, slotValue] of Object.entries(value.slots)) {
|
|
1214
|
-
if (!isRecord2(slotValue)) throw new TypeError(`${path}.slots.${slotName} must be an object`);
|
|
1215
|
-
assertKnownKeys2(slotValue, SLOT_KEYS, `${path}.slots.${slotName}`);
|
|
1216
|
-
slots[slotName] = slotValue;
|
|
1217
|
-
}
|
|
1218
|
-
cfg.slots = slots;
|
|
1219
|
-
}
|
|
1220
|
-
if (value.variants !== void 0) {
|
|
1221
|
-
if (!isRecord2(value.variants)) throw new TypeError(`${path}.variants must be an object`);
|
|
1222
|
-
const variants = {};
|
|
1223
|
-
for (const [variantName, variantValue] of Object.entries(value.variants)) {
|
|
1224
|
-
variants[variantName] = parseVariant(variantValue, `${path}.variants.${variantName}`);
|
|
1225
|
-
}
|
|
1226
|
-
cfg.variants = variants;
|
|
1227
|
-
}
|
|
1228
|
-
return cfg;
|
|
1229
|
-
}
|
|
1230
|
-
function parseComponents(value) {
|
|
1231
|
-
if (value === void 0) return void 0;
|
|
1232
|
-
if (!isRecord2(value)) throw new TypeError("components must be an object");
|
|
1233
|
-
const unknown = Object.keys(value).find((key) => !COMPONENT_NAME_SET.has(key));
|
|
1234
|
-
if (unknown) throw new TypeError(`Unknown component name: ${unknown}`);
|
|
1235
|
-
const components = {};
|
|
1236
|
-
for (const [name, cfg] of Object.entries(value)) {
|
|
1237
|
-
components[name] = parseComponentStyle(cfg, `components.${name}`);
|
|
1238
|
-
}
|
|
1239
|
-
return components;
|
|
1240
|
-
}
|
|
1241
|
-
function defineNajmDesignConfig(config) {
|
|
1242
|
-
return config;
|
|
1243
|
-
}
|
|
1244
|
-
function parseNajmDesignConfig(input) {
|
|
1245
|
-
let value = input;
|
|
1246
|
-
if (typeof input === "string") {
|
|
1247
|
-
try {
|
|
1248
|
-
value = JSON.parse(input);
|
|
1249
|
-
} catch (error) {
|
|
1250
|
-
throw new TypeError(`Invalid design JSON: ${error.message}`);
|
|
1251
|
-
}
|
|
1252
|
-
}
|
|
1253
|
-
if (!isRecord2(value)) throw new TypeError("Design config must be an object");
|
|
1254
|
-
if (!("version" in value) && !("theme" in value)) {
|
|
1255
|
-
return {
|
|
1256
|
-
version: 1,
|
|
1257
|
-
theme: parseNajmThemeConfig(value)
|
|
1258
|
-
};
|
|
1259
|
-
}
|
|
1260
|
-
assertKnownKeys2(value, ROOT_KEYS2, "design");
|
|
1261
|
-
if (value.version !== void 0 && value.version !== 1) {
|
|
1262
|
-
throw new TypeError("design.version must be 1");
|
|
1263
|
-
}
|
|
1264
|
-
if (value.theme === void 0) throw new TypeError("design.theme is required");
|
|
1265
|
-
const config = {
|
|
1266
|
-
version: 1,
|
|
1267
|
-
theme: parseNajmThemeConfig(value.theme)
|
|
1268
|
-
};
|
|
1269
|
-
const typography = parseTypography(value.typography);
|
|
1270
|
-
if (typography !== void 0) config.typography = typography;
|
|
1271
|
-
const components = parseComponents(value.components);
|
|
1272
|
-
if (components !== void 0) config.components = components;
|
|
1273
|
-
const layout = parseLayout(value.layout);
|
|
1274
|
-
if (layout !== void 0) config.layout = layout;
|
|
1275
|
-
return config;
|
|
1276
|
-
}
|
|
1277
|
-
function stringifyNajmDesignConfig(config, space = 2) {
|
|
1278
|
-
return JSON.stringify(config, null, space);
|
|
1279
|
-
}
|
|
1280
|
-
function resolveVariantAlias(variants, variant) {
|
|
1281
|
-
if (!variants) return { variant };
|
|
1282
|
-
const seen = /* @__PURE__ */ new Set();
|
|
1283
|
-
let current = variant;
|
|
1284
|
-
let style = variants[current];
|
|
1285
|
-
while (style?.use && !seen.has(current)) {
|
|
1286
|
-
seen.add(current);
|
|
1287
|
-
const next = style.use;
|
|
1288
|
-
if (seen.has(next)) break;
|
|
1289
|
-
current = next;
|
|
1290
|
-
style = variants[current];
|
|
1291
|
-
}
|
|
1292
|
-
return { variant: current, style };
|
|
1293
|
-
}
|
|
1294
|
-
var buttonVariants = cva(
|
|
1295
|
-
[
|
|
1296
|
-
"relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium outline-none transition-all",
|
|
1297
|
-
"disabled:pointer-events-none disabled:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
|
|
1298
|
-
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
1299
|
-
"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
|
|
1300
|
-
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
|
1301
|
-
].join(" "),
|
|
1302
|
-
{
|
|
1303
|
-
variants: {
|
|
1304
|
-
variant: {
|
|
1305
|
-
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
|
1306
|
-
destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
|
|
1307
|
-
outline: "border border-input bg-transparent text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground",
|
|
1308
|
-
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
|
1309
|
-
tertiary: "bg-tertiary text-tertiary-foreground shadow-xs hover:bg-tertiary/80",
|
|
1310
|
-
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
1311
|
-
link: "h-auto p-0 text-primary underline-offset-4 hover:underline",
|
|
1312
|
-
success: "bg-emerald-600 text-white shadow-xs hover:bg-emerald-700",
|
|
1313
|
-
warning: "bg-amber-400 text-slate-950 shadow-xs hover:bg-amber-500",
|
|
1314
|
-
info: "bg-sky-600 text-white shadow-xs hover:bg-sky-700",
|
|
1315
|
-
soft: "bg-primary/10 text-primary shadow-none hover:bg-primary/15",
|
|
1316
|
-
subtle: "bg-muted text-foreground shadow-none hover:bg-muted/80",
|
|
1317
|
-
plain: "bg-transparent shadow-none hover:bg-transparent"
|
|
1318
|
-
},
|
|
1319
|
-
size: {
|
|
1320
|
-
"2xs": "h-5 gap-1 px-1.5 text-[11px] [&_svg:not([class*='size-'])]:size-3",
|
|
1321
|
-
xs: "h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
|
|
1322
|
-
sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
1323
|
-
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
1324
|
-
md: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
1325
|
-
lg: "h-10 px-6 has-[>svg]:px-4",
|
|
1326
|
-
xl: "h-12 px-8 text-base [&_svg:not([class*='size-'])]:size-5",
|
|
1327
|
-
"2xl": "h-14 px-10 text-base [&_svg:not([class*='size-'])]:size-5",
|
|
1328
|
-
icon: "size-9",
|
|
1329
|
-
"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
|
|
1330
|
-
"icon-sm": "size-8",
|
|
1331
|
-
"icon-lg": "size-10 [&_svg:not([class*='size-'])]:size-5",
|
|
1332
|
-
"icon-xl": "size-12 [&_svg:not([class*='size-'])]:size-5"
|
|
1333
|
-
},
|
|
1334
|
-
rounded: {
|
|
1335
|
-
none: "rounded-none",
|
|
1336
|
-
sm: "rounded-sm",
|
|
1337
|
-
default: "rounded-md",
|
|
1338
|
-
md: "rounded-md",
|
|
1339
|
-
lg: "rounded-lg",
|
|
1340
|
-
xl: "rounded-xl",
|
|
1341
|
-
"2xl": "rounded-2xl",
|
|
1342
|
-
full: "rounded-full"
|
|
1343
|
-
},
|
|
1344
|
-
fullWidth: {
|
|
1345
|
-
true: "w-full",
|
|
1346
|
-
false: ""
|
|
1347
|
-
}
|
|
1348
|
-
},
|
|
1349
|
-
defaultVariants: {
|
|
1350
|
-
variant: "default",
|
|
1351
|
-
size: "default",
|
|
1352
|
-
rounded: "default",
|
|
1353
|
-
fullWidth: false
|
|
1354
|
-
}
|
|
1355
|
-
}
|
|
1356
|
-
);
|
|
1357
|
-
function isPromiseLike(value) {
|
|
1358
|
-
return Boolean(value && typeof value.then === "function");
|
|
1359
|
-
}
|
|
1360
|
-
var defaultLoader = /* @__PURE__ */ jsx(LoaderCircleIcon, { "aria-hidden": "true", className: "animate-spin" });
|
|
1361
|
-
function renderIcon(icon) {
|
|
1362
|
-
if (!icon) return null;
|
|
1363
|
-
return /* @__PURE__ */ jsx(NIcon, { "aria-hidden": "true", icon, className: "shrink-0" });
|
|
1364
|
-
}
|
|
1365
|
-
var Button = React.forwardRef(
|
|
1366
|
-
({
|
|
1367
|
-
className,
|
|
1368
|
-
variant,
|
|
1369
|
-
size,
|
|
1370
|
-
rounded,
|
|
1371
|
-
fullWidth,
|
|
1372
|
-
asChild = false,
|
|
1373
|
-
loading = false,
|
|
1374
|
-
autoLoading = true,
|
|
1375
|
-
disabledWhileLoading = true,
|
|
1376
|
-
loadingText,
|
|
1377
|
-
loader = defaultLoader,
|
|
1378
|
-
loaderPosition = "left",
|
|
1379
|
-
leftIcon,
|
|
1380
|
-
rightIcon,
|
|
1381
|
-
bordered,
|
|
1382
|
-
disabled,
|
|
1383
|
-
children,
|
|
1384
|
-
onClick,
|
|
1385
|
-
style,
|
|
1386
|
-
...props
|
|
1387
|
-
}, ref) => {
|
|
1388
|
-
const recipe = useNajmComponentStyle("button");
|
|
1389
|
-
const aliased = resolveVariantAlias(
|
|
1390
|
-
recipe?.variants,
|
|
1391
|
-
variant ?? recipe?.defaultVariant ?? "default"
|
|
1392
|
-
);
|
|
1393
|
-
const effVariant = variant ?? aliased.variant ?? recipe?.defaultVariant;
|
|
1394
|
-
const effSize = size ?? recipe?.defaultSize;
|
|
1395
|
-
const recipeRadius = rounded === void 0 ? resolveRadiusValue(recipe?.radius) : void 0;
|
|
1396
|
-
const recipeStyle = recipeRadius ? { borderRadius: recipeRadius } : void 0;
|
|
1397
|
-
const [pending, setPending] = React.useState(false);
|
|
1398
|
-
const isLoading = loading || pending;
|
|
1399
|
-
const isDisabled = disabled || disabledWhileLoading && isLoading;
|
|
1400
|
-
const Comp = asChild ? Slot : "button";
|
|
1401
|
-
const handleClick = React.useCallback(
|
|
1402
|
-
(event) => {
|
|
1403
|
-
if (isDisabled) {
|
|
1404
|
-
event.preventDefault();
|
|
1405
|
-
return;
|
|
1406
|
-
}
|
|
1407
|
-
const result = onClick?.(event);
|
|
1408
|
-
if (autoLoading && isPromiseLike(result)) {
|
|
1409
|
-
setPending(true);
|
|
1410
|
-
void result.then(
|
|
1411
|
-
() => setPending(false),
|
|
1412
|
-
() => setPending(false)
|
|
1413
|
-
);
|
|
1414
|
-
}
|
|
1415
|
-
},
|
|
1416
|
-
[autoLoading, isDisabled, onClick]
|
|
1417
|
-
);
|
|
1418
|
-
const child = asChild ? React.Children.only(children) : null;
|
|
1419
|
-
const childContent = asChild && React.isValidElement(child) ? child.props.children : children;
|
|
1420
|
-
const content = loadingText && isLoading ? loadingText : childContent;
|
|
1421
|
-
const loaderNode = isLoading ? loader : null;
|
|
1422
|
-
const leftIconNode = renderIcon(leftIcon);
|
|
1423
|
-
const rightIconNode = renderIcon(rightIcon);
|
|
1424
|
-
const showCenteredLoader = Boolean(loaderNode && loaderPosition === "center");
|
|
1425
|
-
const renderedContent = showCenteredLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1426
|
-
/* @__PURE__ */ jsxs("span", { className: "invisible inline-flex items-center gap-2", children: [
|
|
1427
|
-
leftIconNode,
|
|
1428
|
-
content,
|
|
1429
|
-
rightIconNode
|
|
1430
|
-
] }),
|
|
1431
|
-
/* @__PURE__ */ jsx("span", { className: "absolute inset-0 inline-flex items-center justify-center", children: loaderNode })
|
|
1432
|
-
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1433
|
-
loaderNode && loaderPosition === "left" ? loaderNode : leftIconNode,
|
|
1434
|
-
content,
|
|
1435
|
-
loaderNode && loaderPosition === "right" ? loaderNode : rightIconNode
|
|
1436
|
-
] });
|
|
1437
|
-
const renderedChild = asChild && React.isValidElement(child) ? React.cloneElement(child, void 0, renderedContent) : renderedContent;
|
|
1438
|
-
return /* @__PURE__ */ jsx(
|
|
1439
|
-
Comp,
|
|
1440
|
-
{
|
|
1441
|
-
ref,
|
|
1442
|
-
"data-slot": "button",
|
|
1443
|
-
"data-loading": isLoading || void 0,
|
|
1444
|
-
"data-disabled": isDisabled || void 0,
|
|
1445
|
-
"data-bordered": effVariant === "outline" ? "true" : bordered === false ? "false" : bordered ? "true" : void 0,
|
|
1446
|
-
"aria-busy": isLoading || void 0,
|
|
1447
|
-
"aria-disabled": asChild && isDisabled ? true : void 0,
|
|
1448
|
-
disabled: !asChild ? isDisabled : void 0,
|
|
1449
|
-
style: recipeStyle ? { ...recipeStyle, ...style } : style,
|
|
1450
|
-
className: cn(
|
|
1451
|
-
buttonVariants({ variant: effVariant, size: effSize, rounded, fullWidth }),
|
|
1452
|
-
aliased.style?.className,
|
|
1453
|
-
// Outline buttons always carry an input-style border.
|
|
1454
|
-
effVariant === "outline" && inputBorderClasses(true),
|
|
1455
|
-
// Filled/ghost/plain/link/success/warning/info/soft/subtle buttons only get a
|
|
1456
|
-
// border when the consumer explicitly opts in via `bordered`. Global theming
|
|
1457
|
-
// should not outline every filled button.
|
|
1458
|
-
effVariant !== "outline" && bordered === true && cn(
|
|
1459
|
-
"border",
|
|
1460
|
-
"border-muted-foreground"
|
|
1461
|
-
),
|
|
1462
|
-
className
|
|
1463
|
-
),
|
|
1464
|
-
onClick: handleClick,
|
|
1465
|
-
...props,
|
|
1466
|
-
children: renderedChild
|
|
1467
|
-
}
|
|
1468
|
-
);
|
|
1469
|
-
}
|
|
1470
|
-
);
|
|
1471
|
-
Button.displayName = "Button";
|
|
1472
|
-
var NButton = Button;
|
|
1473
403
|
var NO_SHADE = /* @__PURE__ */ new Set(["black", "white"]);
|
|
1474
|
-
var
|
|
404
|
+
var PRESETS = {
|
|
1475
405
|
muted: "border-muted-foreground",
|
|
1476
406
|
primary: "border-primary",
|
|
1477
407
|
accent: "border-accent",
|
|
@@ -1502,7 +432,7 @@ var ERROR_BORDER = "border !border-red-600";
|
|
|
1502
432
|
var FOCUS_INTERACTIVE_BASE = "border focus-within:border-primary";
|
|
1503
433
|
var HOVER_INTERACTIVE_BASE = "hover:border-primary";
|
|
1504
434
|
var STATIC_BASE = "border";
|
|
1505
|
-
var BaseInput =
|
|
435
|
+
var BaseInput = React60__default.forwardRef(
|
|
1506
436
|
({ children, variant = "default", status = "default", bordered, borderColor, className, style, disabled = false, onHover, onClick, hasIcon, ...rest }, ref) => {
|
|
1507
437
|
const recipe = useNajmComponentStyle("input");
|
|
1508
438
|
const isGhost = variant === "ghost";
|
|
@@ -1517,7 +447,7 @@ var BaseInput = React__default.forwardRef(
|
|
|
1517
447
|
borderClass = ERROR_BORDER;
|
|
1518
448
|
} else if (hasExplicitColor) {
|
|
1519
449
|
borderClass = `${STATIC_BASE} ${FOCUS_INTERACTIVE_BASE} ${HOVER_INTERACTIVE_BASE}`;
|
|
1520
|
-
colorClass =
|
|
450
|
+
colorClass = PRESETS[borderColor] ?? (NO_SHADE.has(borderColor) ? `border-${borderColor}` : `border-${borderColor}-600`);
|
|
1521
451
|
} else {
|
|
1522
452
|
const restingBorderClass = inputBorderClasses(isBordered);
|
|
1523
453
|
borderClass = isBordered ? `${STATIC_BASE} ${restingBorderClass} [&:not(:focus-within):not([data-state=open]):hover]:border-input focus-within:border-ring data-[state=open]:border-ring` : restingBorderClass;
|
|
@@ -1554,7 +484,7 @@ function PopoverAnchor({ ...props }) {
|
|
|
1554
484
|
return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
|
|
1555
485
|
}
|
|
1556
486
|
function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
|
|
1557
|
-
const container =
|
|
487
|
+
const container = React60.useContext(NajmThemeContainerCtx);
|
|
1558
488
|
useNajmPortalLayerStyles();
|
|
1559
489
|
return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
|
|
1560
490
|
PopoverPrimitive.Content,
|
|
@@ -1663,7 +593,7 @@ function SwatchesColorPicker({
|
|
|
1663
593
|
hideSwatches = false
|
|
1664
594
|
}) {
|
|
1665
595
|
const inputRef = useRef(null);
|
|
1666
|
-
const themeContainer =
|
|
596
|
+
const themeContainer = React60__default.useContext(NajmThemeContainerCtx);
|
|
1667
597
|
const resolvedValue = resolvePickerColor(value, themeContainer);
|
|
1668
598
|
return /* @__PURE__ */ jsxs(
|
|
1669
599
|
BaseInput,
|
|
@@ -1733,7 +663,7 @@ function PopoverColorPicker({
|
|
|
1733
663
|
formats = DEFAULT_FORMATS,
|
|
1734
664
|
output = "preserve"
|
|
1735
665
|
}) {
|
|
1736
|
-
const themeContainer =
|
|
666
|
+
const themeContainer = React60__default.useContext(NajmThemeContainerCtx);
|
|
1737
667
|
const resolvedValue = resolvePickerColor(value, themeContainer);
|
|
1738
668
|
const initialFormat = formats.includes(detectFormat(resolvedValue)) ? detectFormat(resolvedValue) : formats[0] ?? "hex";
|
|
1739
669
|
const [activeFormat, setActiveFormat] = useState(initialFormat);
|
|
@@ -1990,7 +920,7 @@ function SheetClose({ ...props }) {
|
|
|
1990
920
|
return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
|
|
1991
921
|
}
|
|
1992
922
|
function SheetPortal({ ...props }) {
|
|
1993
|
-
const container =
|
|
923
|
+
const container = React60.useContext(NajmThemeContainerCtx);
|
|
1994
924
|
return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", container: container ?? void 0, ...props });
|
|
1995
925
|
}
|
|
1996
926
|
function SheetOverlay({ className, ...props }) {
|
|
@@ -2052,89 +982,6 @@ function SheetTitle({ className, ...props }) {
|
|
|
2052
982
|
function SheetDescription({ className, ...props }) {
|
|
2053
983
|
return /* @__PURE__ */ jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn("text-muted-foreground text-sm", className), ...props });
|
|
2054
984
|
}
|
|
2055
|
-
function assignRef(ref, node) {
|
|
2056
|
-
if (!ref) return;
|
|
2057
|
-
if (typeof ref === "function") ref(node);
|
|
2058
|
-
else ref.current = node;
|
|
2059
|
-
}
|
|
2060
|
-
function applyViewportLayout(node, axis) {
|
|
2061
|
-
node.style.width = "100%";
|
|
2062
|
-
node.style.height = "100%";
|
|
2063
|
-
node.style.minWidth = "0";
|
|
2064
|
-
node.style.minHeight = "0";
|
|
2065
|
-
node.style.overflowX = axis === "x" || axis === "both" ? "auto" : "hidden";
|
|
2066
|
-
node.style.overflowY = axis === "y" || axis === "both" ? "auto" : "hidden";
|
|
2067
|
-
}
|
|
2068
|
-
function najmScrollOptions(axis, autoHide, options) {
|
|
2069
|
-
return {
|
|
2070
|
-
scrollbars: { theme: "os-theme-najm", autoHide, autoHideDelay: 500, clickScroll: true },
|
|
2071
|
-
overflow: {
|
|
2072
|
-
x: axis === "x" || axis === "both" ? "scroll" : "hidden",
|
|
2073
|
-
y: axis === "y" || axis === "both" ? "scroll" : "hidden"
|
|
2074
|
-
},
|
|
2075
|
-
...options
|
|
2076
|
-
};
|
|
2077
|
-
}
|
|
2078
|
-
function useNajmScrollViewport({
|
|
2079
|
-
axis = "y",
|
|
2080
|
-
autoHide = "never",
|
|
2081
|
-
options
|
|
2082
|
-
} = {}) {
|
|
2083
|
-
const hostRef = React.useRef(null);
|
|
2084
|
-
const viewportRef = React.useRef(null);
|
|
2085
|
-
React.useEffect(() => {
|
|
2086
|
-
const target = hostRef.current;
|
|
2087
|
-
const viewport = viewportRef.current;
|
|
2088
|
-
if (!target || !viewport) return;
|
|
2089
|
-
const instance = OverlayScrollbars(
|
|
2090
|
-
{ target, elements: { viewport } },
|
|
2091
|
-
najmScrollOptions(axis, autoHide, options)
|
|
2092
|
-
);
|
|
2093
|
-
const containWheel = (event) => event.stopPropagation();
|
|
2094
|
-
viewport.addEventListener("wheel", containWheel, { passive: true });
|
|
2095
|
-
return () => {
|
|
2096
|
-
viewport.removeEventListener("wheel", containWheel);
|
|
2097
|
-
instance.destroy();
|
|
2098
|
-
};
|
|
2099
|
-
}, [axis, autoHide, options]);
|
|
2100
|
-
return { hostRef, viewportRef };
|
|
2101
|
-
}
|
|
2102
|
-
function NajmScroll({ className, axis = "y", autoHide = "never", viewportRef, events, options, element, children, style, ...props }) {
|
|
2103
|
-
return /* @__PURE__ */ jsx(
|
|
2104
|
-
OverlayScrollbarsComponent,
|
|
2105
|
-
{
|
|
2106
|
-
className: cn(className),
|
|
2107
|
-
style: {
|
|
2108
|
-
...style,
|
|
2109
|
-
overflow: "hidden",
|
|
2110
|
-
minHeight: 0,
|
|
2111
|
-
minWidth: 0
|
|
2112
|
-
},
|
|
2113
|
-
element,
|
|
2114
|
-
defer: true,
|
|
2115
|
-
options: najmScrollOptions(axis, autoHide, options || void 0),
|
|
2116
|
-
events: {
|
|
2117
|
-
...events,
|
|
2118
|
-
initialized: (instance, ...rest) => {
|
|
2119
|
-
const viewport = instance.elements().viewport;
|
|
2120
|
-
applyViewportLayout(viewport, axis);
|
|
2121
|
-
assignRef(viewportRef, viewport);
|
|
2122
|
-
events?.initialized?.(instance, ...rest);
|
|
2123
|
-
},
|
|
2124
|
-
updated: (instance, ...rest) => {
|
|
2125
|
-
applyViewportLayout(instance.elements().viewport, axis);
|
|
2126
|
-
events?.updated?.(instance, ...rest);
|
|
2127
|
-
},
|
|
2128
|
-
destroyed: (instance, ...rest) => {
|
|
2129
|
-
assignRef(viewportRef, null);
|
|
2130
|
-
events?.destroyed?.(instance, ...rest);
|
|
2131
|
-
}
|
|
2132
|
-
},
|
|
2133
|
-
...props,
|
|
2134
|
-
children
|
|
2135
|
-
}
|
|
2136
|
-
);
|
|
2137
|
-
}
|
|
2138
985
|
var PortalScopeContext = createContext(void 0);
|
|
2139
986
|
function NPortalScopeProvider({ className, children }) {
|
|
2140
987
|
return /* @__PURE__ */ jsx(PortalScopeContext.Provider, { value: className, children });
|
|
@@ -2222,7 +1069,7 @@ function DialogTrigger({ ...props }) {
|
|
|
2222
1069
|
return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
|
|
2223
1070
|
}
|
|
2224
1071
|
function DialogPortal({ ...props }) {
|
|
2225
|
-
const container =
|
|
1072
|
+
const container = React60.useContext(NajmThemeContainerCtx);
|
|
2226
1073
|
return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", container: container ?? void 0, ...props });
|
|
2227
1074
|
}
|
|
2228
1075
|
function DialogClose({ ...props }) {
|
|
@@ -2253,8 +1100,8 @@ function getDefaultPadding() {
|
|
|
2253
1100
|
return window.matchMedia(MOBILE_PADDING_QUERY).matches ? "sm" : "md";
|
|
2254
1101
|
}
|
|
2255
1102
|
function useResponsivePadding(value) {
|
|
2256
|
-
const [resolved, setResolved] =
|
|
2257
|
-
|
|
1103
|
+
const [resolved, setResolved] = React60.useState(() => value ?? getDefaultPadding());
|
|
1104
|
+
React60.useEffect(() => {
|
|
2258
1105
|
if (value) {
|
|
2259
1106
|
setResolved(value);
|
|
2260
1107
|
return;
|
|
@@ -2318,7 +1165,7 @@ var sizeClasses2 = {
|
|
|
2318
1165
|
md: "h-8 w-8",
|
|
2319
1166
|
lg: "h-10 w-10"
|
|
2320
1167
|
};
|
|
2321
|
-
var IconButton =
|
|
1168
|
+
var IconButton = React60.forwardRef(
|
|
2322
1169
|
({
|
|
2323
1170
|
className,
|
|
2324
1171
|
variant = "ghost",
|
|
@@ -2400,10 +1247,10 @@ function NPageHeaderTop({ children, className }) {
|
|
|
2400
1247
|
}
|
|
2401
1248
|
NPageHeaderTop.displayName = "NPageHeaderTop";
|
|
2402
1249
|
function isPageHeaderSlot(child, slot) {
|
|
2403
|
-
return
|
|
1250
|
+
return React60__default.isValidElement(child) && child.type === slot;
|
|
2404
1251
|
}
|
|
2405
1252
|
function getSlotElements(children, slot) {
|
|
2406
|
-
const matches =
|
|
1253
|
+
const matches = React60__default.Children.toArray(children).filter((child) => isPageHeaderSlot(child, slot));
|
|
2407
1254
|
return matches.length > 0 ? matches : void 0;
|
|
2408
1255
|
}
|
|
2409
1256
|
var responsiveClasses = {
|
|
@@ -2666,11 +1513,11 @@ function createDialogStore() {
|
|
|
2666
1513
|
dialog.resolve?.(result);
|
|
2667
1514
|
set((state) => ({ dialogs: state.dialogs.slice(0, -1) }));
|
|
2668
1515
|
};
|
|
2669
|
-
const
|
|
2670
|
-
if (
|
|
1516
|
+
const handler = dialog.primaryButton?.onClick ?? dialog.primaryButton?.onConfirm;
|
|
1517
|
+
if (handler && result != null) {
|
|
2671
1518
|
get().setPrimaryLoading(true);
|
|
2672
1519
|
try {
|
|
2673
|
-
await
|
|
1520
|
+
await handler(result);
|
|
2674
1521
|
closeCurrentDialog();
|
|
2675
1522
|
} finally {
|
|
2676
1523
|
get().setPrimaryLoading(false);
|
|
@@ -2757,11 +1604,11 @@ function createDialogStore() {
|
|
|
2757
1604
|
const { dialogs, setPrimaryLoading, closeDialog } = get();
|
|
2758
1605
|
const dialog = dialogs.find((d) => d.id === dialogId);
|
|
2759
1606
|
if (!dialog?.primaryButton) return;
|
|
2760
|
-
const
|
|
2761
|
-
if (
|
|
1607
|
+
const handler = dialog.primaryButton.onClick ?? dialog.primaryButton.onConfirm;
|
|
1608
|
+
if (handler) {
|
|
2762
1609
|
setPrimaryLoading(true);
|
|
2763
1610
|
try {
|
|
2764
|
-
await
|
|
1611
|
+
await handler(data);
|
|
2765
1612
|
closeDialog(dialogId, data);
|
|
2766
1613
|
} finally {
|
|
2767
1614
|
setPrimaryLoading(false);
|
|
@@ -2777,9 +1624,9 @@ function createDialogStore() {
|
|
|
2777
1624
|
closeDialog(dialogId, null);
|
|
2778
1625
|
return;
|
|
2779
1626
|
}
|
|
2780
|
-
const
|
|
2781
|
-
if (
|
|
2782
|
-
await
|
|
1627
|
+
const handler = dialog.secondaryButton.onClick ?? dialog.secondaryButton.onConfirm;
|
|
1628
|
+
if (handler) {
|
|
1629
|
+
await handler(data);
|
|
2783
1630
|
}
|
|
2784
1631
|
closeDialog(dialogId, null);
|
|
2785
1632
|
},
|
|
@@ -2816,8 +1663,8 @@ function NDialogSecondaryButton(_props) {
|
|
|
2816
1663
|
function parseDirectDialogSlots(children) {
|
|
2817
1664
|
const body = [];
|
|
2818
1665
|
const parsed = {};
|
|
2819
|
-
|
|
2820
|
-
if (!
|
|
1666
|
+
React60__default.Children.forEach(children, (child) => {
|
|
1667
|
+
if (!React60__default.isValidElement(child)) {
|
|
2821
1668
|
body.push(child);
|
|
2822
1669
|
return;
|
|
2823
1670
|
}
|
|
@@ -2890,15 +1737,15 @@ var dialogVariants = cva(
|
|
|
2890
1737
|
);
|
|
2891
1738
|
var CONTENT_ACTIONS_SELECTOR = '[data-najm-dialog-actions="content"], [data-najm-wizard-form="true"]';
|
|
2892
1739
|
function useContentOwnsActions() {
|
|
2893
|
-
const [contentElement, setContentElement] =
|
|
2894
|
-
const [contentOwnsActions, setContentOwnsActions] =
|
|
2895
|
-
const contentElementRef =
|
|
2896
|
-
const handleContentElementRef =
|
|
1740
|
+
const [contentElement, setContentElement] = React60__default.useState(null);
|
|
1741
|
+
const [contentOwnsActions, setContentOwnsActions] = React60__default.useState(false);
|
|
1742
|
+
const contentElementRef = React60__default.useRef(null);
|
|
1743
|
+
const handleContentElementRef = React60__default.useCallback((node) => {
|
|
2897
1744
|
if (contentElementRef.current === node) return;
|
|
2898
1745
|
contentElementRef.current = node;
|
|
2899
1746
|
setContentElement(node);
|
|
2900
1747
|
}, []);
|
|
2901
|
-
|
|
1748
|
+
React60__default.useLayoutEffect(() => {
|
|
2902
1749
|
if (!contentElement) {
|
|
2903
1750
|
setContentOwnsActions((current) => current ? false : current);
|
|
2904
1751
|
return;
|
|
@@ -3151,8 +1998,8 @@ function NDirectDialog({
|
|
|
3151
1998
|
const resolvedHeaderClassName = cn(slots.header?.className, headerClassName);
|
|
3152
1999
|
const resolvedTitleClassName = cn(slots.header?.titleClassName, titleClassName);
|
|
3153
2000
|
const resolvedDescriptionClassName = cn(slots.description?.className, descriptionClassName);
|
|
3154
|
-
const [internalOpen, setInternalOpen] =
|
|
3155
|
-
const [primaryLoading, setPrimaryLoading] =
|
|
2001
|
+
const [internalOpen, setInternalOpen] = React60__default.useState(defaultOpen);
|
|
2002
|
+
const [primaryLoading, setPrimaryLoading] = React60__default.useState(false);
|
|
3156
2003
|
const isControlled = open !== void 0;
|
|
3157
2004
|
const currentOpen = isControlled ? open : internalOpen;
|
|
3158
2005
|
const setOpen = (nextOpen) => {
|
|
@@ -3434,7 +2281,7 @@ function useDialog(store) {
|
|
|
3434
2281
|
description: options.description,
|
|
3435
2282
|
size: options.size || "sm",
|
|
3436
2283
|
className: options.className,
|
|
3437
|
-
render: ({ dialog, zIndex, confirm, cancel, onOpenChange }) =>
|
|
2284
|
+
render: ({ dialog, zIndex, confirm, cancel, onOpenChange }) => React60__default.createElement(NDeleteDialog, {
|
|
3438
2285
|
itemName: options.itemName,
|
|
3439
2286
|
itemType: options.itemType,
|
|
3440
2287
|
icon: options.icon,
|
|
@@ -3639,7 +2486,7 @@ var SIZE_TEXT_MAP = {
|
|
|
3639
2486
|
md: "text-sm",
|
|
3640
2487
|
lg: "text-base"
|
|
3641
2488
|
};
|
|
3642
|
-
function
|
|
2489
|
+
function renderIcon(icon) {
|
|
3643
2490
|
if (!icon) return null;
|
|
3644
2491
|
return /* @__PURE__ */ jsx(NIcon, { "aria-hidden": "true", icon, className: "shrink-0" });
|
|
3645
2492
|
}
|
|
@@ -3675,7 +2522,7 @@ function Badge({
|
|
|
3675
2522
|
const resolvedLabel = label ?? (typeof children === "string" ? children : void 0) ?? status;
|
|
3676
2523
|
const content = typeof children !== "string" && children ? children : resolvedLabel ?? children;
|
|
3677
2524
|
const resolvedIcon = icon ?? (resolvedColor ? iconMap?.[resolvedColor] : void 0);
|
|
3678
|
-
const iconNode =
|
|
2525
|
+
const iconNode = renderIcon(showIcon ? resolvedIcon : icon);
|
|
3679
2526
|
const isMinimal = look === "minimal" || look === "text";
|
|
3680
2527
|
if (isMinimal) {
|
|
3681
2528
|
const textColor = COLOR_TEXT_MAP[resolvedColor ?? ""] ?? "text-foreground";
|
|
@@ -3720,8 +2567,8 @@ function resolveIcon(icon) {
|
|
|
3720
2567
|
}
|
|
3721
2568
|
var MultiSelectInput = ({ ariaLabel, placeholder = "Select items...", value = [], onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, searchPlaceholder = "Search...", emptyMessage = "No items found.", maxDisplay = 3, showSearch = true }) => {
|
|
3722
2569
|
const [open, setOpen] = useState(false);
|
|
3723
|
-
const triggerRef =
|
|
3724
|
-
const pointerDismissedRef =
|
|
2570
|
+
const triggerRef = React60__default.useRef(null);
|
|
2571
|
+
const pointerDismissedRef = React60__default.useRef(false);
|
|
3725
2572
|
const shouldDisplayIcon = Boolean(icon) && showIcon && value.length === 0;
|
|
3726
2573
|
const iconProps = getIconColorProps(iconColor, "h-4 w-4");
|
|
3727
2574
|
const handleSelect = (itemValue) => {
|
|
@@ -3837,7 +2684,7 @@ function SelectScrollDownButton({ className, ...props }) {
|
|
|
3837
2684
|
return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" }) });
|
|
3838
2685
|
}
|
|
3839
2686
|
function SelectContent({ className, children, position = "popper", style, ...props }) {
|
|
3840
|
-
const container =
|
|
2687
|
+
const container = React60.useContext(NajmThemeContainerCtx);
|
|
3841
2688
|
const recipe = useNajmComponentStyle("select");
|
|
3842
2689
|
const contentSlot = recipe?.slots?.content;
|
|
3843
2690
|
const borderWidth = contentSlot?.borderWidth ?? recipe?.borderWidth;
|
|
@@ -3920,9 +2767,9 @@ var SelectInput = ({ placeholder = "", ariaLabel, value, onChange, icon, showIco
|
|
|
3920
2767
|
(item) => typeof item === "string" ? item === value : item.value === value
|
|
3921
2768
|
);
|
|
3922
2769
|
const displayLabel = typeof found === "string" ? found : found?.label ?? value;
|
|
3923
|
-
const [open, setOpen] =
|
|
3924
|
-
const triggerRef =
|
|
3925
|
-
const pointerDismissedRef =
|
|
2770
|
+
const [open, setOpen] = React60__default.useState(false);
|
|
2771
|
+
const triggerRef = React60__default.useRef(null);
|
|
2772
|
+
const pointerDismissedRef = React60__default.useRef(false);
|
|
3926
2773
|
return /* @__PURE__ */ jsxs("div", { className: cn("group relative", className), children: [
|
|
3927
2774
|
/* @__PURE__ */ jsxs(
|
|
3928
2775
|
BaseInput,
|
|
@@ -4790,7 +3637,7 @@ function CollapsibleSection({
|
|
|
4790
3637
|
children,
|
|
4791
3638
|
disabled
|
|
4792
3639
|
}) {
|
|
4793
|
-
const [open, setOpen] =
|
|
3640
|
+
const [open, setOpen] = React60.useState(true);
|
|
4794
3641
|
const titleText = typeof title === "string" || typeof title === "number" ? String(title) : "Section";
|
|
4795
3642
|
return /* @__PURE__ */ jsxs(
|
|
4796
3643
|
Collapsible,
|
|
@@ -5108,7 +3955,7 @@ function TokenGroupSection({
|
|
|
5108
3955
|
disabled,
|
|
5109
3956
|
labels
|
|
5110
3957
|
}) {
|
|
5111
|
-
const [open, setOpen] =
|
|
3958
|
+
const [open, setOpen] = React60.useState(groupId === "surface" || groupId === "brand");
|
|
5112
3959
|
const labelText = typeof label === "string" || typeof label === "number" ? String(label) : "Group";
|
|
5113
3960
|
return /* @__PURE__ */ jsxs(
|
|
5114
3961
|
Collapsible,
|
|
@@ -5440,7 +4287,7 @@ function normalizeCode(value, numeric, length) {
|
|
|
5440
4287
|
const normalized = numeric ? value.replace(/\D/g, "") : value.replace(/\s/g, "");
|
|
5441
4288
|
return normalized.slice(0, length);
|
|
5442
4289
|
}
|
|
5443
|
-
var OtpInput =
|
|
4290
|
+
var OtpInput = React60__default.forwardRef(
|
|
5444
4291
|
({
|
|
5445
4292
|
value,
|
|
5446
4293
|
onChange,
|
|
@@ -5622,8 +4469,8 @@ var TextAreaInput = ({ value, onChange, placeholder = "", className = "", varian
|
|
|
5622
4469
|
};
|
|
5623
4470
|
var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", loading = false, loadingMessage = "Loading...", onSearchChange, shouldFilter = true, value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, allowFreeText = false }) => {
|
|
5624
4471
|
const [open, setOpen] = useState(false);
|
|
5625
|
-
const triggerRef =
|
|
5626
|
-
const pointerDismissedRef =
|
|
4472
|
+
const triggerRef = React60__default.useRef(null);
|
|
4473
|
+
const pointerDismissedRef = React60__default.useRef(false);
|
|
5627
4474
|
const [query, setQuery] = useState("");
|
|
5628
4475
|
const normalizedItems = items.map((item) => typeof item === "string" ? { value: item, label: item } : item);
|
|
5629
4476
|
const selectedItem = normalizedItems.find((item) => item.value === value);
|
|
@@ -7010,7 +5857,7 @@ function DropdownMenuSubContent({ className, children, style, ...props }) {
|
|
|
7010
5857
|
);
|
|
7011
5858
|
}
|
|
7012
5859
|
function DropdownMenuContent({ className, children, sideOffset = 4, style, ...props }) {
|
|
7013
|
-
const container =
|
|
5860
|
+
const container = React60.useContext(NajmThemeContainerCtx);
|
|
7014
5861
|
const surface = useDropdownSurfaceRecipe("content");
|
|
7015
5862
|
const { hostRef, viewportRef } = useNajmScrollViewport();
|
|
7016
5863
|
useNajmPortalLayerStyles();
|
|
@@ -7414,8 +6261,8 @@ function NSlider({
|
|
|
7414
6261
|
return Array.isArray(v) ? [...v] : [v];
|
|
7415
6262
|
};
|
|
7416
6263
|
const initialRadix = toRadix(controlledValue ?? defaultValue);
|
|
7417
|
-
const [internalValues, setInternalValues] =
|
|
7418
|
-
const [active, setActive] =
|
|
6264
|
+
const [internalValues, setInternalValues] = React60.useState(initialRadix);
|
|
6265
|
+
const [active, setActive] = React60.useState(null);
|
|
7419
6266
|
const currentValues = controlledValue !== void 0 ? toRadix(controlledValue) : internalValues;
|
|
7420
6267
|
const handleRadix = (arr) => {
|
|
7421
6268
|
setInternalValues(arr);
|
|
@@ -7572,13 +6419,13 @@ function NThemePresets({
|
|
|
7572
6419
|
disabled = false,
|
|
7573
6420
|
className
|
|
7574
6421
|
}) {
|
|
7575
|
-
const [saveOpen, setSaveOpen] =
|
|
7576
|
-
const [name, setName] =
|
|
7577
|
-
const [pendingDelete, setPendingDelete] =
|
|
6422
|
+
const [saveOpen, setSaveOpen] = React60.useState(false);
|
|
6423
|
+
const [name, setName] = React60.useState("");
|
|
6424
|
+
const [pendingDelete, setPendingDelete] = React60.useState(
|
|
7578
6425
|
null
|
|
7579
6426
|
);
|
|
7580
|
-
const [busy, setBusy] =
|
|
7581
|
-
const rows =
|
|
6427
|
+
const [busy, setBusy] = React60.useState(false);
|
|
6428
|
+
const rows = React60.useMemo(
|
|
7582
6429
|
() => [
|
|
7583
6430
|
...savedDesign ? [
|
|
7584
6431
|
{
|
|
@@ -7830,12 +6677,12 @@ function NThemeCustomizer({
|
|
|
7830
6677
|
}) {
|
|
7831
6678
|
const inheritedMode = useNajmThemeMode();
|
|
7832
6679
|
const resolvedPreviewMode = previewMode ?? inheritedMode ?? value.theme.mode ?? "light";
|
|
7833
|
-
const visibleTabs =
|
|
6680
|
+
const visibleTabs = React60.useMemo(() => buildTabs(tabs), [tabs]);
|
|
7834
6681
|
const firstTab = visibleTabs[0] ?? "theme";
|
|
7835
|
-
const [activeTab, setActiveTab] =
|
|
7836
|
-
const [fileError, setFileError] =
|
|
7837
|
-
const fileInputRef =
|
|
7838
|
-
|
|
6682
|
+
const [activeTab, setActiveTab] = React60.useState(TAB_VALUE[firstTab]);
|
|
6683
|
+
const [fileError, setFileError] = React60.useState(false);
|
|
6684
|
+
const fileInputRef = React60.useRef(null);
|
|
6685
|
+
React60.useEffect(() => {
|
|
7839
6686
|
setActiveTab(TAB_VALUE[firstTab]);
|
|
7840
6687
|
}, [firstTab]);
|
|
7841
6688
|
const themeLabel = resolveLabel("themeTab", labels);
|
|
@@ -7847,7 +6694,7 @@ function NThemeCustomizer({
|
|
|
7847
6694
|
const invalidThemeFileLabel = resolveLabel("invalidThemeFile", labels);
|
|
7848
6695
|
const defaultOptionLabel = resolveLabel("defaultOption", labels);
|
|
7849
6696
|
const colorSwatchFallbackLabel = resolveLabel("colorSwatchFallback", labels);
|
|
7850
|
-
const tokenLabels =
|
|
6697
|
+
const tokenLabels = React60.useMemo(() => {
|
|
7851
6698
|
const out = {};
|
|
7852
6699
|
const knownTokens = [
|
|
7853
6700
|
"background",
|
|
@@ -8178,7 +7025,7 @@ function parseShortcut(shortcut) {
|
|
|
8178
7025
|
key: parts.find((p) => !["ctrl", "shift", "alt", "cmd", "meta"].includes(p)) || ""
|
|
8179
7026
|
};
|
|
8180
7027
|
}
|
|
8181
|
-
function useKeyboard(shortcut,
|
|
7028
|
+
function useKeyboard(shortcut, handler, options = {}) {
|
|
8182
7029
|
const { enabled = true, preventDefault = false, ignoreInputs = true, scopeRef } = options;
|
|
8183
7030
|
const callback = useCallback(
|
|
8184
7031
|
(e) => {
|
|
@@ -8195,10 +7042,10 @@ function useKeyboard(shortcut, handler2, options = {}) {
|
|
|
8195
7042
|
const keyMatch = parsed.key ? e.key.toLowerCase() === parsed.key : true;
|
|
8196
7043
|
if (ctrlMatch && shiftMatch && altMatch && metaMatch && keyMatch) {
|
|
8197
7044
|
if (preventDefault) e.preventDefault();
|
|
8198
|
-
|
|
7045
|
+
handler(e);
|
|
8199
7046
|
}
|
|
8200
7047
|
},
|
|
8201
|
-
[shortcut,
|
|
7048
|
+
[shortcut, handler, enabled, preventDefault, ignoreInputs, scopeRef]
|
|
8202
7049
|
);
|
|
8203
7050
|
useEffect(() => {
|
|
8204
7051
|
document.addEventListener("keydown", callback);
|
|
@@ -8217,13 +7064,13 @@ function useClickOutside(ref, options) {
|
|
|
8217
7064
|
const { enabled = true, onClickOutside } = options;
|
|
8218
7065
|
useEffect(() => {
|
|
8219
7066
|
if (!enabled) return;
|
|
8220
|
-
const
|
|
7067
|
+
const handler = (e) => {
|
|
8221
7068
|
if (ref.current && !ref.current.contains(e.target)) {
|
|
8222
7069
|
onClickOutside();
|
|
8223
7070
|
}
|
|
8224
7071
|
};
|
|
8225
|
-
document.addEventListener("mousedown",
|
|
8226
|
-
return () => document.removeEventListener("mousedown",
|
|
7072
|
+
document.addEventListener("mousedown", handler);
|
|
7073
|
+
return () => document.removeEventListener("mousedown", handler);
|
|
8227
7074
|
}, [enabled, ref, onClickOutside]);
|
|
8228
7075
|
}
|
|
8229
7076
|
function useDebouncedValue(value, delay) {
|
|
@@ -8651,7 +7498,7 @@ function Alert({
|
|
|
8651
7498
|
);
|
|
8652
7499
|
}
|
|
8653
7500
|
var NAlert = Alert;
|
|
8654
|
-
var NativeSelect =
|
|
7501
|
+
var NativeSelect = React60.forwardRef(
|
|
8655
7502
|
({ className, options, placeholder, value, ...props }, ref) => {
|
|
8656
7503
|
const hasValue = value !== void 0 && value !== "";
|
|
8657
7504
|
return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
@@ -8817,7 +7664,7 @@ function Avatar({
|
|
|
8817
7664
|
...props
|
|
8818
7665
|
}) {
|
|
8819
7666
|
const hasShortcut = src !== void 0 || fallback !== void 0;
|
|
8820
|
-
const hasChildren =
|
|
7667
|
+
const hasChildren = React60.Children.count(children) > 0;
|
|
8821
7668
|
return /* @__PURE__ */ jsxs(
|
|
8822
7669
|
AvatarPrimitive.Root,
|
|
8823
7670
|
{
|
|
@@ -8911,9 +7758,9 @@ function AvatarGroup({ ring = true, className, children, ...props }) {
|
|
|
8911
7758
|
"data-slot": "avatar-group",
|
|
8912
7759
|
className: cn("flex -space-x-2", className),
|
|
8913
7760
|
...props,
|
|
8914
|
-
children: ring ?
|
|
8915
|
-
if (
|
|
8916
|
-
return
|
|
7761
|
+
children: ring ? React60.Children.map(children, (child) => {
|
|
7762
|
+
if (React60.isValidElement(child) && child.type === Avatar) {
|
|
7763
|
+
return React60.cloneElement(child, { ring: true, ...child.props });
|
|
8917
7764
|
}
|
|
8918
7765
|
return child;
|
|
8919
7766
|
}) : children
|
|
@@ -8980,7 +7827,7 @@ function Swap({
|
|
|
8980
7827
|
className,
|
|
8981
7828
|
...props
|
|
8982
7829
|
}) {
|
|
8983
|
-
const [internalChecked, setInternalChecked] =
|
|
7830
|
+
const [internalChecked, setInternalChecked] = React60.useState(defaultChecked);
|
|
8984
7831
|
const isControlled = controlledChecked !== void 0 || controlledState !== void 0;
|
|
8985
7832
|
const currentState = getDerivedState(
|
|
8986
7833
|
isControlled ? controlledChecked ?? false : internalChecked,
|
|
@@ -8988,7 +7835,7 @@ function Swap({
|
|
|
8988
7835
|
);
|
|
8989
7836
|
const dataState = currentState === "indeterminate" ? "indeterminate" : currentState ? "on" : "off";
|
|
8990
7837
|
const ariaPressed = currentState === "indeterminate" ? "mixed" : currentState;
|
|
8991
|
-
const handleClick =
|
|
7838
|
+
const handleClick = React60.useCallback((event) => {
|
|
8992
7839
|
onClick?.(event);
|
|
8993
7840
|
if (event.defaultPrevented) return;
|
|
8994
7841
|
if (disabled) return;
|
|
@@ -9113,7 +7960,7 @@ var toneClasses = {
|
|
|
9113
7960
|
ring: "border-primary/30"
|
|
9114
7961
|
}
|
|
9115
7962
|
};
|
|
9116
|
-
var StatusPill =
|
|
7963
|
+
var StatusPill = React60.forwardRef(
|
|
9117
7964
|
({ className, tone = "neutral", pulse = false, label, ...props }, ref) => {
|
|
9118
7965
|
const c = toneClasses[tone];
|
|
9119
7966
|
return /* @__PURE__ */ jsxs(
|
|
@@ -9172,20 +8019,20 @@ function Toaster({ toastOptions, ...props }) {
|
|
|
9172
8019
|
);
|
|
9173
8020
|
}
|
|
9174
8021
|
var Form = FormProvider;
|
|
9175
|
-
var FormFieldContext =
|
|
8022
|
+
var FormFieldContext = React60.createContext({});
|
|
9176
8023
|
var FormField = ({ ...props }) => /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
|
|
9177
8024
|
var useFormField = () => {
|
|
9178
|
-
const fieldContext =
|
|
9179
|
-
const itemContext =
|
|
8025
|
+
const fieldContext = React60.useContext(FormFieldContext);
|
|
8026
|
+
const itemContext = React60.useContext(FormItemContext);
|
|
9180
8027
|
const { getFieldState, formState } = useFormContext();
|
|
9181
8028
|
const fieldState = getFieldState(fieldContext.name, formState);
|
|
9182
8029
|
if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
|
|
9183
8030
|
const { id } = itemContext;
|
|
9184
8031
|
return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState };
|
|
9185
8032
|
};
|
|
9186
|
-
var FormItemContext =
|
|
8033
|
+
var FormItemContext = React60.createContext({});
|
|
9187
8034
|
function FormItem({ className, ...props }) {
|
|
9188
|
-
const id =
|
|
8035
|
+
const id = React60.useId();
|
|
9189
8036
|
return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
|
|
9190
8037
|
}
|
|
9191
8038
|
function FormLabel({ className, ...props }) {
|
|
@@ -9329,7 +8176,7 @@ function NErrorState({ title = "Something went wrong", message, onRetry, retryLa
|
|
|
9329
8176
|
] });
|
|
9330
8177
|
}
|
|
9331
8178
|
function NEmptyState({ title = "No data", description, icon, action, className }) {
|
|
9332
|
-
const iconContent = icon ?
|
|
8179
|
+
const iconContent = icon ? React60__default.isValidElement(icon) ? icon : React60__default.createElement(icon, { className: "h-8 w-8" }) : null;
|
|
9333
8180
|
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-3 py-12", className), children: [
|
|
9334
8181
|
iconContent && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/50", children: iconContent }),
|
|
9335
8182
|
/* @__PURE__ */ jsxs("div", { className: "text-center", children: [
|
|
@@ -9339,7 +8186,7 @@ function NEmptyState({ title = "No data", description, icon, action, className }
|
|
|
9339
8186
|
action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
|
|
9340
8187
|
] });
|
|
9341
8188
|
}
|
|
9342
|
-
var NErrorBoundary = class extends
|
|
8189
|
+
var NErrorBoundary = class extends React60__default.Component {
|
|
9343
8190
|
constructor(props) {
|
|
9344
8191
|
super(props);
|
|
9345
8192
|
this.state = { hasError: false, error: null };
|
|
@@ -9651,8 +8498,8 @@ function NCard({
|
|
|
9651
8498
|
let footerClassName;
|
|
9652
8499
|
let mediaSlot = null;
|
|
9653
8500
|
const mainChildren = [];
|
|
9654
|
-
|
|
9655
|
-
if (!
|
|
8501
|
+
React60__default.Children.forEach(children, (child) => {
|
|
8502
|
+
if (!React60__default.isValidElement(child)) {
|
|
9656
8503
|
mainChildren.push(child);
|
|
9657
8504
|
return;
|
|
9658
8505
|
}
|
|
@@ -9828,7 +8675,7 @@ function truncateByCharacters(text, maxCharacters, suffix = "...") {
|
|
|
9828
8675
|
const str = String(text);
|
|
9829
8676
|
return str.length <= maxCharacters ? str : str.slice(0, maxCharacters) + suffix;
|
|
9830
8677
|
}
|
|
9831
|
-
var CardDensityContext =
|
|
8678
|
+
var CardDensityContext = React60__default.createContext("default");
|
|
9832
8679
|
function NCardInfo({
|
|
9833
8680
|
icon: Icon2,
|
|
9834
8681
|
label,
|
|
@@ -9841,7 +8688,7 @@ function NCardInfo({
|
|
|
9841
8688
|
className,
|
|
9842
8689
|
...props
|
|
9843
8690
|
}) {
|
|
9844
|
-
const inheritedDensity =
|
|
8691
|
+
const inheritedDensity = React60__default.useContext(CardDensityContext);
|
|
9845
8692
|
const resolvedDensity = density ?? inheritedDensity;
|
|
9846
8693
|
const isTruncated = typeof value === "string" && value.length > maxChars;
|
|
9847
8694
|
const displayValue = isTruncated ? truncateByCharacters(value, maxChars) : value;
|
|
@@ -11090,7 +9937,7 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
|
|
|
11090
9937
|
children: items.map((item) => {
|
|
11091
9938
|
const Icon2 = item.icon;
|
|
11092
9939
|
const hasSub = !!item.submenu?.length;
|
|
11093
|
-
return /* @__PURE__ */ jsxs(
|
|
9940
|
+
return /* @__PURE__ */ jsxs(React60__default.Fragment, { children: [
|
|
11094
9941
|
item.separatorBefore && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border/60" }),
|
|
11095
9942
|
/* @__PURE__ */ jsxs(
|
|
11096
9943
|
"div",
|
|
@@ -11562,19 +10409,19 @@ function Combobox({
|
|
|
11562
10409
|
allowFreeText = false,
|
|
11563
10410
|
disabled = false
|
|
11564
10411
|
}) {
|
|
11565
|
-
const [open, setOpen] =
|
|
11566
|
-
const [query, setQuery] =
|
|
11567
|
-
const [highlight, setHighlight] =
|
|
11568
|
-
const wrapperRef =
|
|
11569
|
-
const inputRef =
|
|
11570
|
-
const filtered =
|
|
10412
|
+
const [open, setOpen] = React60.useState(false);
|
|
10413
|
+
const [query, setQuery] = React60.useState("");
|
|
10414
|
+
const [highlight, setHighlight] = React60.useState(0);
|
|
10415
|
+
const wrapperRef = React60.useRef(null);
|
|
10416
|
+
const inputRef = React60.useRef(null);
|
|
10417
|
+
const filtered = React60.useMemo(() => {
|
|
11571
10418
|
const q = query.trim().toLowerCase();
|
|
11572
10419
|
if (!q) return options;
|
|
11573
10420
|
return options.filter(
|
|
11574
10421
|
(opt) => opt.label.toLowerCase().includes(q) || opt.value.toLowerCase().includes(q)
|
|
11575
10422
|
);
|
|
11576
10423
|
}, [options, query]);
|
|
11577
|
-
|
|
10424
|
+
React60.useEffect(() => {
|
|
11578
10425
|
if (!open) return;
|
|
11579
10426
|
const onClick = (e) => {
|
|
11580
10427
|
if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
|
|
@@ -11585,7 +10432,7 @@ function Combobox({
|
|
|
11585
10432
|
document.addEventListener("mousedown", onClick);
|
|
11586
10433
|
return () => document.removeEventListener("mousedown", onClick);
|
|
11587
10434
|
}, [open]);
|
|
11588
|
-
|
|
10435
|
+
React60.useEffect(() => {
|
|
11589
10436
|
if (open) {
|
|
11590
10437
|
setHighlight(0);
|
|
11591
10438
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
@@ -11593,7 +10440,7 @@ function Combobox({
|
|
|
11593
10440
|
setQuery("");
|
|
11594
10441
|
}
|
|
11595
10442
|
}, [open]);
|
|
11596
|
-
const selectedLabel =
|
|
10443
|
+
const selectedLabel = React60.useMemo(() => {
|
|
11597
10444
|
const match = options.find((o) => o.value === value);
|
|
11598
10445
|
return match?.label ?? value;
|
|
11599
10446
|
}, [options, value]);
|
|
@@ -11733,14 +10580,14 @@ function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, varia
|
|
|
11733
10580
|
}, [devTools, form]);
|
|
11734
10581
|
useEffect(() => {
|
|
11735
10582
|
if (!devTools?.enabled) return;
|
|
11736
|
-
const
|
|
10583
|
+
const handler = (e) => {
|
|
11737
10584
|
if (e.key === "F8") {
|
|
11738
10585
|
e.preventDefault();
|
|
11739
10586
|
handleFill();
|
|
11740
10587
|
}
|
|
11741
10588
|
};
|
|
11742
|
-
document.addEventListener("keydown",
|
|
11743
|
-
return () => document.removeEventListener("keydown",
|
|
10589
|
+
document.addEventListener("keydown", handler);
|
|
10590
|
+
return () => document.removeEventListener("keydown", handler);
|
|
11744
10591
|
}, [devTools?.enabled, handleFill]);
|
|
11745
10592
|
useEffect(() => {
|
|
11746
10593
|
const proc = globalThis.process;
|
|
@@ -12357,16 +11204,6 @@ function WizardForm({
|
|
|
12357
11204
|
}
|
|
12358
11205
|
);
|
|
12359
11206
|
}
|
|
12360
|
-
var TableStoreContext = createContext(null);
|
|
12361
|
-
var useTableStore = { use: {} };
|
|
12362
|
-
var handler = {
|
|
12363
|
-
get: (_, prop) => () => {
|
|
12364
|
-
const store = useContext(TableStoreContext);
|
|
12365
|
-
if (!store) throw new Error("useTableStore must be used within NTable");
|
|
12366
|
-
return store.use[prop]();
|
|
12367
|
-
}
|
|
12368
|
-
};
|
|
12369
|
-
useTableStore.use = new Proxy({}, handler);
|
|
12370
11207
|
var actionButtonClass = (bordered, danger) => cn(
|
|
12371
11208
|
"flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border border-transparent text-muted-foreground transition-colors",
|
|
12372
11209
|
danger ? "hover:border-red-200 hover:bg-red-50 hover:text-red-500" : "hover:border-border hover:bg-muted hover:text-foreground",
|
|
@@ -12944,8 +11781,8 @@ function useTable(effectiveViewModeOverride) {
|
|
|
12944
11781
|
...effectiveColumns,
|
|
12945
11782
|
{
|
|
12946
11783
|
id: "actions",
|
|
12947
|
-
header: () => isMenuActions ? null :
|
|
12948
|
-
cell: ({ row }) =>
|
|
11784
|
+
header: () => isMenuActions ? null : React60__default.createElement("div", { className: "flex w-full justify-start text-left" }, "Actions"),
|
|
11785
|
+
cell: ({ row }) => React60__default.createElement(TableActionCell, { row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }),
|
|
12949
11786
|
enableSorting: false,
|
|
12950
11787
|
enableHiding: false
|
|
12951
11788
|
}
|
|
@@ -13209,10 +12046,10 @@ function EditableCell({ cell, onCellEdit }) {
|
|
|
13209
12046
|
const columnId = cell.column.id;
|
|
13210
12047
|
const editor = meta.editor || "text";
|
|
13211
12048
|
const initial = cell.getValue();
|
|
13212
|
-
const [editing, setEditing] =
|
|
13213
|
-
const [value, setValue] =
|
|
13214
|
-
const [saving, setSaving] =
|
|
13215
|
-
|
|
12049
|
+
const [editing, setEditing] = React60__default.useState(false);
|
|
12050
|
+
const [value, setValue] = React60__default.useState(initial);
|
|
12051
|
+
const [saving, setSaving] = React60__default.useState(false);
|
|
12052
|
+
React60__default.useEffect(() => {
|
|
13216
12053
|
if (!editing) setValue(initial);
|
|
13217
12054
|
}, [initial, editing]);
|
|
13218
12055
|
const commit = async (next) => {
|
|
@@ -13383,7 +12220,7 @@ function NTableContent({ effectiveMode }) {
|
|
|
13383
12220
|
const isExpanded = canExpand && row.getIsExpanded();
|
|
13384
12221
|
const totalCols = row.getVisibleCells().length + (showCheckbox ? 1 : 0) + (hasExpansion ? 1 : 0);
|
|
13385
12222
|
const rowClassName = getRowClassName?.(row.original);
|
|
13386
|
-
return /* @__PURE__ */ jsxs(
|
|
12223
|
+
return /* @__PURE__ */ jsxs(React60__default.Fragment, { children: [
|
|
13387
12224
|
/* @__PURE__ */ jsxs(
|
|
13388
12225
|
TableRow,
|
|
13389
12226
|
{
|
|
@@ -13642,7 +12479,7 @@ function NTableCardSkeleton({ surface }) {
|
|
|
13642
12479
|
}
|
|
13643
12480
|
function NTableLoadingSkeleton({ rows }) {
|
|
13644
12481
|
const rawColumns = useTableStore.use.columns();
|
|
13645
|
-
const responsiveColumns =
|
|
12482
|
+
const responsiveColumns = React60__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
|
|
13646
12483
|
const columns = responsiveColumns;
|
|
13647
12484
|
const showCheckbox = useTableStore.use.showCheckbox();
|
|
13648
12485
|
const headerClassName = useTableStore.use.headerClassName();
|
|
@@ -13765,19 +12602,19 @@ function useCardContinuation({
|
|
|
13765
12602
|
rowCount,
|
|
13766
12603
|
viewportRef
|
|
13767
12604
|
}) {
|
|
13768
|
-
const [internalPending, setInternalPending] =
|
|
13769
|
-
const [internalError, setInternalError] =
|
|
13770
|
-
const [announcement, setAnnouncement] =
|
|
13771
|
-
const [viewportReady, setViewportReady] =
|
|
13772
|
-
const pendingRef =
|
|
13773
|
-
const previousRowCountRef =
|
|
13774
|
-
const configRef =
|
|
12605
|
+
const [internalPending, setInternalPending] = React60__default.useState(false);
|
|
12606
|
+
const [internalError, setInternalError] = React60__default.useState(null);
|
|
12607
|
+
const [announcement, setAnnouncement] = React60__default.useState("");
|
|
12608
|
+
const [viewportReady, setViewportReady] = React60__default.useState(false);
|
|
12609
|
+
const pendingRef = React60__default.useRef(false);
|
|
12610
|
+
const previousRowCountRef = React60__default.useRef(rowCount);
|
|
12611
|
+
const configRef = React60__default.useRef(config);
|
|
13775
12612
|
configRef.current = config;
|
|
13776
12613
|
const enabled = Boolean(config);
|
|
13777
12614
|
const pending = Boolean(config?.loadingMore || internalPending);
|
|
13778
12615
|
const error = config?.loadMoreError ?? internalError;
|
|
13779
12616
|
const hasNextPage = Boolean(config?.hasNextPage);
|
|
13780
|
-
const load =
|
|
12617
|
+
const load = React60__default.useCallback(async () => {
|
|
13781
12618
|
const current = configRef.current;
|
|
13782
12619
|
if (!current) return;
|
|
13783
12620
|
if (pendingRef.current || current.loadingMore || !current.hasNextPage) return;
|
|
@@ -13802,13 +12639,13 @@ function useCardContinuation({
|
|
|
13802
12639
|
load,
|
|
13803
12640
|
{ rootMargin: config?.rootMargin ?? DEFAULT_ROOT_MARGIN }
|
|
13804
12641
|
);
|
|
13805
|
-
|
|
12642
|
+
React60__default.useLayoutEffect(() => {
|
|
13806
12643
|
const node = viewportRef.current ?? null;
|
|
13807
12644
|
scrollContainerRef.current = node;
|
|
13808
12645
|
const ready = Boolean(node);
|
|
13809
12646
|
setViewportReady((value) => value === ready ? value : ready);
|
|
13810
12647
|
});
|
|
13811
|
-
|
|
12648
|
+
React60__default.useEffect(() => {
|
|
13812
12649
|
const previous = previousRowCountRef.current;
|
|
13813
12650
|
previousRowCountRef.current = rowCount;
|
|
13814
12651
|
if (!configRef.current) return;
|
|
@@ -13818,10 +12655,10 @@ function useCardContinuation({
|
|
|
13818
12655
|
configRef.current.itemsLoadedLabel?.(appended) ?? `${appended} more ${appended === 1 ? "item" : "items"} loaded.`
|
|
13819
12656
|
);
|
|
13820
12657
|
}, [rowCount]);
|
|
13821
|
-
|
|
12658
|
+
React60__default.useEffect(() => {
|
|
13822
12659
|
if (!pending) doneLoading();
|
|
13823
12660
|
}, [pending, doneLoading]);
|
|
13824
|
-
|
|
12661
|
+
React60__default.useEffect(() => {
|
|
13825
12662
|
if (!enabled || !hasNextPage || error) return;
|
|
13826
12663
|
return observe();
|
|
13827
12664
|
}, [enabled, hasNextPage, error, observe, viewportReady, rowCount]);
|
|
@@ -13875,7 +12712,7 @@ function NTableCards({ effectiveMode }) {
|
|
|
13875
12712
|
const cardPagination = useTableStore.use.cardPagination();
|
|
13876
12713
|
const cardColumnCount = useTableStore.use.cardColumnCount();
|
|
13877
12714
|
const surface = useTableSurfaceAppearance(bordered, borderColor);
|
|
13878
|
-
const viewportRef =
|
|
12715
|
+
const viewportRef = React60__default.useRef(null);
|
|
13879
12716
|
const continuationConfig = cardPagination.mode === "infinite" ? cardPagination : null;
|
|
13880
12717
|
const continuation = useCardContinuation({
|
|
13881
12718
|
config: continuationConfig,
|
|
@@ -14090,41 +12927,23 @@ function page(pageIndex) {
|
|
|
14090
12927
|
function range(from, to) {
|
|
14091
12928
|
return Array.from({ length: to - from + 1 }, (_, index) => page(from + index));
|
|
14092
12929
|
}
|
|
14093
|
-
var NTableDefaultsContext = React__default.createContext({});
|
|
14094
|
-
function NTableDefaultsProvider({
|
|
14095
|
-
children,
|
|
14096
|
-
value
|
|
14097
|
-
}) {
|
|
14098
|
-
return /* @__PURE__ */ jsx(NTableDefaultsContext.Provider, { value, children });
|
|
14099
|
-
}
|
|
14100
|
-
function useNTableDefaults() {
|
|
14101
|
-
return React__default.useContext(NTableDefaultsContext);
|
|
14102
|
-
}
|
|
14103
|
-
function useResolvedPaginationLabels(own) {
|
|
14104
|
-
const defaults = useNTableDefaults();
|
|
14105
|
-
const inherited = defaults.paginationLabels;
|
|
14106
|
-
return React__default.useMemo(
|
|
14107
|
-
() => ({ ...inherited, ...own }),
|
|
14108
|
-
[inherited, own]
|
|
14109
|
-
);
|
|
14110
|
-
}
|
|
14111
12930
|
function CardLoadMorePagination({
|
|
14112
12931
|
config,
|
|
14113
12932
|
rowCount,
|
|
14114
12933
|
bordered,
|
|
14115
12934
|
className
|
|
14116
12935
|
}) {
|
|
14117
|
-
const [internalPending, setInternalPending] =
|
|
14118
|
-
const [internalError, setInternalError] =
|
|
14119
|
-
const [announcement, setAnnouncement] =
|
|
14120
|
-
const buttonRef =
|
|
14121
|
-
const pendingRef =
|
|
14122
|
-
const restoreFocusRef =
|
|
14123
|
-
const previousRowCountRef =
|
|
14124
|
-
const errorId =
|
|
12936
|
+
const [internalPending, setInternalPending] = React60__default.useState(false);
|
|
12937
|
+
const [internalError, setInternalError] = React60__default.useState(null);
|
|
12938
|
+
const [announcement, setAnnouncement] = React60__default.useState("");
|
|
12939
|
+
const buttonRef = React60__default.useRef(null);
|
|
12940
|
+
const pendingRef = React60__default.useRef(false);
|
|
12941
|
+
const restoreFocusRef = React60__default.useRef(false);
|
|
12942
|
+
const previousRowCountRef = React60__default.useRef(rowCount);
|
|
12943
|
+
const errorId = React60__default.useId();
|
|
14125
12944
|
const pending = Boolean(config.loadingMore || internalPending);
|
|
14126
12945
|
const error = config.loadMoreError ?? internalError;
|
|
14127
|
-
|
|
12946
|
+
React60__default.useEffect(() => {
|
|
14128
12947
|
const previous = previousRowCountRef.current;
|
|
14129
12948
|
if (rowCount > previous) {
|
|
14130
12949
|
const appended = rowCount - previous;
|
|
@@ -14134,7 +12953,7 @@ function CardLoadMorePagination({
|
|
|
14134
12953
|
}
|
|
14135
12954
|
previousRowCountRef.current = rowCount;
|
|
14136
12955
|
}, [config.itemsLoadedLabel, rowCount]);
|
|
14137
|
-
|
|
12956
|
+
React60__default.useEffect(() => {
|
|
14138
12957
|
if (pending || !restoreFocusRef.current) return;
|
|
14139
12958
|
restoreFocusRef.current = false;
|
|
14140
12959
|
const frame = requestAnimationFrame(() => buttonRef.current?.focus());
|
|
@@ -14204,9 +13023,9 @@ function CardLoadMorePagination({
|
|
|
14204
13023
|
var navButtonClass = "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70";
|
|
14205
13024
|
var chevronClass = "h-4 w-4 rtl:-scale-x-100";
|
|
14206
13025
|
function useLowerBoundPageCountWarning(manualPagination, pageCount, pagination) {
|
|
14207
|
-
const previous =
|
|
14208
|
-
const warned =
|
|
14209
|
-
|
|
13026
|
+
const previous = React60__default.useRef(null);
|
|
13027
|
+
const warned = React60__default.useRef(false);
|
|
13028
|
+
React60__default.useEffect(() => {
|
|
14210
13029
|
if (typeof console === "undefined") return;
|
|
14211
13030
|
if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
|
|
14212
13031
|
if (!manualPagination || pageCount === void 0 || !pagination) {
|
|
@@ -14675,21 +13494,6 @@ function NTableHeader() {
|
|
|
14675
13494
|
] })
|
|
14676
13495
|
] });
|
|
14677
13496
|
}
|
|
14678
|
-
function formatJsonValue(value) {
|
|
14679
|
-
if (typeof value === "string") return value;
|
|
14680
|
-
try {
|
|
14681
|
-
return JSON.stringify(value ?? null, null, 2) ?? String(value);
|
|
14682
|
-
} catch {
|
|
14683
|
-
return String(value);
|
|
14684
|
-
}
|
|
14685
|
-
}
|
|
14686
|
-
function NTableJson() {
|
|
14687
|
-
const viewMode = useTableStore.use.viewMode();
|
|
14688
|
-
const renderJson = useTableStore.use.renderJson();
|
|
14689
|
-
const jsonValue = useTableStore.use.jsonValue();
|
|
14690
|
-
if (viewMode !== "json") return null;
|
|
14691
|
-
return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: renderJson?.() ?? /* @__PURE__ */ jsx(NajmScroll, { axis: "both", className: "h-full min-h-0 rounded-md border border-border bg-muted/40", children: /* @__PURE__ */ jsx("pre", { className: "p-4 font-mono text-xs leading-relaxed text-foreground", children: formatJsonValue(jsonValue) }) }) });
|
|
14692
|
-
}
|
|
14693
13497
|
function TableStateSlot({ children }) {
|
|
14694
13498
|
return /* @__PURE__ */ jsx("div", { className: "flex min-h-64 flex-1 items-center justify-center", children });
|
|
14695
13499
|
}
|
|
@@ -14744,9 +13548,9 @@ function TableLayout(props) {
|
|
|
14744
13548
|
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
|
|
14745
13549
|
const mql = window.matchMedia("(max-width: 639px)");
|
|
14746
13550
|
setIsMobile(mql.matches);
|
|
14747
|
-
const
|
|
14748
|
-
mql.addEventListener("change",
|
|
14749
|
-
return () => mql.removeEventListener("change",
|
|
13551
|
+
const handler = (e) => setIsMobile(e.matches);
|
|
13552
|
+
mql.addEventListener("change", handler);
|
|
13553
|
+
return () => mql.removeEventListener("change", handler);
|
|
14750
13554
|
}, []);
|
|
14751
13555
|
const effectiveMode = (() => {
|
|
14752
13556
|
if (viewMode === "json") return "json";
|
|
@@ -16111,7 +14915,7 @@ function NNavbar({
|
|
|
16111
14915
|
(userMenuActions.length > 0 || onLogout) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
16112
14916
|
userMenuActions.map((action) => {
|
|
16113
14917
|
const ActionIcon = action.icon;
|
|
16114
|
-
return /* @__PURE__ */ jsxs(
|
|
14918
|
+
return /* @__PURE__ */ jsxs(React60__default.Fragment, { children: [
|
|
16115
14919
|
action.separator && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
16116
14920
|
/* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: action.onClick, className: "cursor-pointer", children: [
|
|
16117
14921
|
ActionIcon && /* @__PURE__ */ jsx(ActionIcon, { className: "h-4 w-4 mr-2" }),
|
|
@@ -16178,11 +14982,11 @@ function NAppShell({
|
|
|
16178
14982
|
[onNavigate]
|
|
16179
14983
|
);
|
|
16180
14984
|
useEffect(() => {
|
|
16181
|
-
const
|
|
14985
|
+
const handler = (e) => {
|
|
16182
14986
|
if (e.key === "Escape") setMobileOpen(false);
|
|
16183
14987
|
};
|
|
16184
|
-
document.addEventListener("keydown",
|
|
16185
|
-
return () => document.removeEventListener("keydown",
|
|
14988
|
+
document.addEventListener("keydown", handler);
|
|
14989
|
+
return () => document.removeEventListener("keydown", handler);
|
|
16186
14990
|
}, []);
|
|
16187
14991
|
return /* @__PURE__ */ jsxs("div", { className: cn("flex h-screen overflow-hidden", classNames?.root), children: [
|
|
16188
14992
|
/* @__PURE__ */ jsx(
|
|
@@ -16381,4 +15185,4 @@ function NGridItem({
|
|
|
16381
15185
|
return /* @__PURE__ */ jsx("div", { className: itemClassName, ...props, children });
|
|
16382
15186
|
}
|
|
16383
15187
|
|
|
16384
|
-
export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarFormInput, AvatarGroup, AvatarImage, AvatarInput, AvatarStatus, Badge, BaseInput,
|
|
15188
|
+
export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarFormInput, AvatarGroup, AvatarImage, AvatarInput, AvatarStatus, Badge, BaseInput, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, CheckboxInput, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorArrayInput, ColorPickerInput, Combobox, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DEFAULT_THEME_FILE_NAME, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray_default as DynamicArray, EmojiInput, FileImportButton, FileInput, Form, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, IconButton, ImageInput, Indicator4 as Indicator, Input, Label2 as Label, LangInput, MultiSelectInput, NAJM_SAVED_THEME_VALUE, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBarChart, NBrandingProvider, NBulkActionsBar, NCard, NCardAction, NCardFooter, NCardInfo, NCardMedia, NCardSection, NChartSkeleton, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NDialogDescription, NDialogHeader, NDialogPrimaryButton, NDialogSecondaryButton, NDonutCard, NEditorTabs, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NGrid, NGridItem, NImage, NIndicator, NInspectorSheet, NLineChart, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderCompactActions, NPageHeaderFilters, NPageHeaderTop, NPageLayout, NPieChart, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarBrand, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarMobile, NSidebarProvider, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NSpinner, NStatCard, NStatCardSkeleton, NStatusBreakdown, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NThemeCustomizer, NThemePresets, NUploader, NViewBody, NViewToggle, NativeSelect, NumberInput, OtpInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, RadioGroup, RadioGroupInput, RadioGroupItem, RepeatingFields, ScrollArea, SearchField, SearchField as SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTooltip, NSkeleton as Skeleton, Slider, SliderInput, StarRatingInput, StatusPill, StepIndicator, StepsHeader, StepsProgress, Swap, SwapIndeterminate, SwapOff, SwapOn, Switch, SwitchInput, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, TimeZoneInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buildPageItems, createDialogStore, createTableStore, detectFormat, dialogVariants, filterResponsiveColumns, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNChartColor, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, normalizeThemeFileName, parseColor, parseThemeFile, resolveHiddenBelowClass, resolveSlot, sliderVariants, stringifyThemeFile, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNBranding, useNForm, useNPortalScope, useNSidebar, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useVariant, useVariantPreset };
|