@camstack/ui-library 1.2.49 → 1.2.51
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/{MotionZonesSettings-Bvavn6s9.js → MotionZonesSettings-DRrdkR4U.js} +1 -1
- package/dist/{PrivacyMaskSettings-CSxDpLOw.js → PrivacyMaskSettings-DsyAfD21.js} +1 -1
- package/dist/SceneMonitorEditor-CfSrNccC.cjs +281 -0
- package/dist/SceneMonitorEditor-D5BNWAM_.js +281 -0
- package/dist/composites/cap-settings/SceneMonitorEditor.d.ts +43 -0
- package/dist/composites/cap-settings/index.d.ts +6 -5
- package/dist/composites/cap-settings/scene-monitor-copy.d.ts +37 -0
- package/dist/composites/index.d.ts +135 -133
- package/dist/generated/system-hooks.d.ts +10 -0
- package/dist/index.cjs +43652 -43523
- package/dist/index.d.ts +14 -10
- package/dist/index.js +43621 -43516
- package/dist/primitives/badge.d.ts +1 -1
- package/dist/primitives/button.d.ts +1 -1
- package/dist/primitives/icon-button.d.ts +1 -1
- package/dist/primitives/input.d.ts +1 -1
- package/dist/theme/index.cjs +71 -71
- package/dist/theme/index.js +71 -71
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { HTMLAttributes } from 'react';
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const badgeVariants: (props?: ({
|
|
4
|
-
variant?: "
|
|
4
|
+
variant?: "info" | "success" | "default" | "danger" | "warning" | null | undefined;
|
|
5
5
|
styleVariant?: "outline" | "solid" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'>, VariantProps<typeof badgeVariants> {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes } from 'react';
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "
|
|
4
|
+
variant?: "danger" | "primary" | "secondary" | "ghost" | "outline" | null | undefined;
|
|
5
5
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
@@ -2,7 +2,7 @@ import { ButtonHTMLAttributes } from 'react';
|
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
import { LucideIcon } from 'lucide-react';
|
|
4
4
|
declare const iconButtonVariants: (props?: ({
|
|
5
|
-
variant?: "
|
|
5
|
+
variant?: "danger" | "primary" | "secondary" | "ghost" | "outline" | null | undefined;
|
|
6
6
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
7
7
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
8
8
|
export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof iconButtonVariants> {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const inputVariants: (props?: ({
|
|
4
|
-
state?: "
|
|
4
|
+
state?: "error" | "default" | null | undefined;
|
|
5
5
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
6
6
|
export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
|
|
7
7
|
leftSlot?: ReactNode;
|
package/dist/theme/index.cjs
CHANGED
|
@@ -1,6 +1,77 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
2
|
let react = require("react");
|
|
3
3
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
4
|
+
//#region src/theme/theme-provider.tsx
|
|
5
|
+
var ThemeContext = (0, react.createContext)(null);
|
|
6
|
+
var TOGGLE_ORDER = [
|
|
7
|
+
"dark",
|
|
8
|
+
"light",
|
|
9
|
+
"system"
|
|
10
|
+
];
|
|
11
|
+
function getSystemPreference() {
|
|
12
|
+
if (typeof window === "undefined") return "dark";
|
|
13
|
+
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
14
|
+
}
|
|
15
|
+
function getInitialMode(storageKey, defaultMode) {
|
|
16
|
+
if (typeof window === "undefined") return defaultMode;
|
|
17
|
+
const stored = localStorage.getItem(storageKey);
|
|
18
|
+
if (stored === "dark" || stored === "light" || stored === "system") return stored;
|
|
19
|
+
return defaultMode;
|
|
20
|
+
}
|
|
21
|
+
function resolveMode(mode) {
|
|
22
|
+
if (mode === "system") return getSystemPreference();
|
|
23
|
+
return mode;
|
|
24
|
+
}
|
|
25
|
+
function ThemeProvider({ children, defaultMode = "system", storageKey = "camstack-theme-mode" }) {
|
|
26
|
+
const [mode, setModeState] = (0, react.useState)(() => getInitialMode(storageKey, defaultMode));
|
|
27
|
+
const [resolvedMode, setResolvedMode] = (0, react.useState)(() => resolveMode(mode));
|
|
28
|
+
const setMode = (0, react.useCallback)((newMode) => {
|
|
29
|
+
setModeState(newMode);
|
|
30
|
+
setResolvedMode(resolveMode(newMode));
|
|
31
|
+
if (typeof window !== "undefined") localStorage.setItem(storageKey, newMode);
|
|
32
|
+
}, [storageKey]);
|
|
33
|
+
const toggleMode = (0, react.useCallback)(() => {
|
|
34
|
+
setMode(TOGGLE_ORDER[(TOGGLE_ORDER.indexOf(mode) + 1) % TOGGLE_ORDER.length] ?? "dark");
|
|
35
|
+
}, [mode, setMode]);
|
|
36
|
+
(0, react.useEffect)(() => {
|
|
37
|
+
if (typeof document === "undefined") return;
|
|
38
|
+
const root = document.documentElement;
|
|
39
|
+
root.classList.remove("dark", "light");
|
|
40
|
+
root.classList.add(resolvedMode);
|
|
41
|
+
}, [mode, resolvedMode]);
|
|
42
|
+
(0, react.useEffect)(() => {
|
|
43
|
+
if (typeof window === "undefined" || mode !== "system") return;
|
|
44
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
45
|
+
const handleChange = () => {
|
|
46
|
+
setResolvedMode(getSystemPreference());
|
|
47
|
+
};
|
|
48
|
+
mediaQuery.addEventListener("change", handleChange);
|
|
49
|
+
return () => mediaQuery.removeEventListener("change", handleChange);
|
|
50
|
+
}, [mode]);
|
|
51
|
+
const value = (0, react.useMemo)(() => ({
|
|
52
|
+
mode,
|
|
53
|
+
resolvedMode,
|
|
54
|
+
setMode,
|
|
55
|
+
toggleMode
|
|
56
|
+
}), [
|
|
57
|
+
mode,
|
|
58
|
+
resolvedMode,
|
|
59
|
+
setMode,
|
|
60
|
+
toggleMode
|
|
61
|
+
]);
|
|
62
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
|
|
63
|
+
value,
|
|
64
|
+
children
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
//#endregion
|
|
68
|
+
//#region src/theme/use-theme-mode.ts
|
|
69
|
+
function useThemeMode() {
|
|
70
|
+
const context = (0, react.useContext)(ThemeContext);
|
|
71
|
+
if (!context) throw new Error("useThemeMode must be used within a ThemeProvider");
|
|
72
|
+
return context;
|
|
73
|
+
}
|
|
74
|
+
//#endregion
|
|
4
75
|
//#region src/theme/defaults.ts
|
|
5
76
|
var providerColors = {
|
|
6
77
|
frigate: "#3b82f6",
|
|
@@ -196,77 +267,6 @@ ${lightColorBlock.replace(/^ {2}/gm, " ")}
|
|
|
196
267
|
`;
|
|
197
268
|
}
|
|
198
269
|
//#endregion
|
|
199
|
-
//#region src/theme/theme-provider.tsx
|
|
200
|
-
var ThemeContext = (0, react.createContext)(null);
|
|
201
|
-
var TOGGLE_ORDER = [
|
|
202
|
-
"dark",
|
|
203
|
-
"light",
|
|
204
|
-
"system"
|
|
205
|
-
];
|
|
206
|
-
function getSystemPreference() {
|
|
207
|
-
if (typeof window === "undefined") return "dark";
|
|
208
|
-
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
209
|
-
}
|
|
210
|
-
function getInitialMode(storageKey, defaultMode) {
|
|
211
|
-
if (typeof window === "undefined") return defaultMode;
|
|
212
|
-
const stored = localStorage.getItem(storageKey);
|
|
213
|
-
if (stored === "dark" || stored === "light" || stored === "system") return stored;
|
|
214
|
-
return defaultMode;
|
|
215
|
-
}
|
|
216
|
-
function resolveMode(mode) {
|
|
217
|
-
if (mode === "system") return getSystemPreference();
|
|
218
|
-
return mode;
|
|
219
|
-
}
|
|
220
|
-
function ThemeProvider({ children, defaultMode = "system", storageKey = "camstack-theme-mode" }) {
|
|
221
|
-
const [mode, setModeState] = (0, react.useState)(() => getInitialMode(storageKey, defaultMode));
|
|
222
|
-
const [resolvedMode, setResolvedMode] = (0, react.useState)(() => resolveMode(mode));
|
|
223
|
-
const setMode = (0, react.useCallback)((newMode) => {
|
|
224
|
-
setModeState(newMode);
|
|
225
|
-
setResolvedMode(resolveMode(newMode));
|
|
226
|
-
if (typeof window !== "undefined") localStorage.setItem(storageKey, newMode);
|
|
227
|
-
}, [storageKey]);
|
|
228
|
-
const toggleMode = (0, react.useCallback)(() => {
|
|
229
|
-
setMode(TOGGLE_ORDER[(TOGGLE_ORDER.indexOf(mode) + 1) % TOGGLE_ORDER.length] ?? "dark");
|
|
230
|
-
}, [mode, setMode]);
|
|
231
|
-
(0, react.useEffect)(() => {
|
|
232
|
-
if (typeof document === "undefined") return;
|
|
233
|
-
const root = document.documentElement;
|
|
234
|
-
root.classList.remove("dark", "light");
|
|
235
|
-
root.classList.add(resolvedMode);
|
|
236
|
-
}, [mode, resolvedMode]);
|
|
237
|
-
(0, react.useEffect)(() => {
|
|
238
|
-
if (typeof window === "undefined" || mode !== "system") return;
|
|
239
|
-
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
240
|
-
const handleChange = () => {
|
|
241
|
-
setResolvedMode(getSystemPreference());
|
|
242
|
-
};
|
|
243
|
-
mediaQuery.addEventListener("change", handleChange);
|
|
244
|
-
return () => mediaQuery.removeEventListener("change", handleChange);
|
|
245
|
-
}, [mode]);
|
|
246
|
-
const value = (0, react.useMemo)(() => ({
|
|
247
|
-
mode,
|
|
248
|
-
resolvedMode,
|
|
249
|
-
setMode,
|
|
250
|
-
toggleMode
|
|
251
|
-
}), [
|
|
252
|
-
mode,
|
|
253
|
-
resolvedMode,
|
|
254
|
-
setMode,
|
|
255
|
-
toggleMode
|
|
256
|
-
]);
|
|
257
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
|
|
258
|
-
value,
|
|
259
|
-
children
|
|
260
|
-
});
|
|
261
|
-
}
|
|
262
|
-
//#endregion
|
|
263
|
-
//#region src/theme/use-theme-mode.ts
|
|
264
|
-
function useThemeMode() {
|
|
265
|
-
const context = (0, react.useContext)(ThemeContext);
|
|
266
|
-
if (!context) throw new Error("useThemeMode must be used within a ThemeProvider");
|
|
267
|
-
return context;
|
|
268
|
-
}
|
|
269
|
-
//#endregion
|
|
270
270
|
exports.ThemeProvider = ThemeProvider;
|
|
271
271
|
exports.ThemeProvider$1 = ThemeProvider;
|
|
272
272
|
exports.createTheme = createTheme;
|
package/dist/theme/index.js
CHANGED
|
@@ -1,5 +1,76 @@
|
|
|
1
1
|
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
//#region src/theme/theme-provider.tsx
|
|
4
|
+
var ThemeContext = createContext(null);
|
|
5
|
+
var TOGGLE_ORDER = [
|
|
6
|
+
"dark",
|
|
7
|
+
"light",
|
|
8
|
+
"system"
|
|
9
|
+
];
|
|
10
|
+
function getSystemPreference() {
|
|
11
|
+
if (typeof window === "undefined") return "dark";
|
|
12
|
+
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
13
|
+
}
|
|
14
|
+
function getInitialMode(storageKey, defaultMode) {
|
|
15
|
+
if (typeof window === "undefined") return defaultMode;
|
|
16
|
+
const stored = localStorage.getItem(storageKey);
|
|
17
|
+
if (stored === "dark" || stored === "light" || stored === "system") return stored;
|
|
18
|
+
return defaultMode;
|
|
19
|
+
}
|
|
20
|
+
function resolveMode(mode) {
|
|
21
|
+
if (mode === "system") return getSystemPreference();
|
|
22
|
+
return mode;
|
|
23
|
+
}
|
|
24
|
+
function ThemeProvider({ children, defaultMode = "system", storageKey = "camstack-theme-mode" }) {
|
|
25
|
+
const [mode, setModeState] = useState(() => getInitialMode(storageKey, defaultMode));
|
|
26
|
+
const [resolvedMode, setResolvedMode] = useState(() => resolveMode(mode));
|
|
27
|
+
const setMode = useCallback((newMode) => {
|
|
28
|
+
setModeState(newMode);
|
|
29
|
+
setResolvedMode(resolveMode(newMode));
|
|
30
|
+
if (typeof window !== "undefined") localStorage.setItem(storageKey, newMode);
|
|
31
|
+
}, [storageKey]);
|
|
32
|
+
const toggleMode = useCallback(() => {
|
|
33
|
+
setMode(TOGGLE_ORDER[(TOGGLE_ORDER.indexOf(mode) + 1) % TOGGLE_ORDER.length] ?? "dark");
|
|
34
|
+
}, [mode, setMode]);
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
if (typeof document === "undefined") return;
|
|
37
|
+
const root = document.documentElement;
|
|
38
|
+
root.classList.remove("dark", "light");
|
|
39
|
+
root.classList.add(resolvedMode);
|
|
40
|
+
}, [mode, resolvedMode]);
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
if (typeof window === "undefined" || mode !== "system") return;
|
|
43
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
44
|
+
const handleChange = () => {
|
|
45
|
+
setResolvedMode(getSystemPreference());
|
|
46
|
+
};
|
|
47
|
+
mediaQuery.addEventListener("change", handleChange);
|
|
48
|
+
return () => mediaQuery.removeEventListener("change", handleChange);
|
|
49
|
+
}, [mode]);
|
|
50
|
+
const value = useMemo(() => ({
|
|
51
|
+
mode,
|
|
52
|
+
resolvedMode,
|
|
53
|
+
setMode,
|
|
54
|
+
toggleMode
|
|
55
|
+
}), [
|
|
56
|
+
mode,
|
|
57
|
+
resolvedMode,
|
|
58
|
+
setMode,
|
|
59
|
+
toggleMode
|
|
60
|
+
]);
|
|
61
|
+
return /* @__PURE__ */ jsx(ThemeContext.Provider, {
|
|
62
|
+
value,
|
|
63
|
+
children
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
//#endregion
|
|
67
|
+
//#region src/theme/use-theme-mode.ts
|
|
68
|
+
function useThemeMode() {
|
|
69
|
+
const context = useContext(ThemeContext);
|
|
70
|
+
if (!context) throw new Error("useThemeMode must be used within a ThemeProvider");
|
|
71
|
+
return context;
|
|
72
|
+
}
|
|
73
|
+
//#endregion
|
|
3
74
|
//#region src/theme/defaults.ts
|
|
4
75
|
var providerColors = {
|
|
5
76
|
frigate: "#3b82f6",
|
|
@@ -195,75 +266,4 @@ ${lightColorBlock.replace(/^ {2}/gm, " ")}
|
|
|
195
266
|
`;
|
|
196
267
|
}
|
|
197
268
|
//#endregion
|
|
198
|
-
//#region src/theme/theme-provider.tsx
|
|
199
|
-
var ThemeContext = createContext(null);
|
|
200
|
-
var TOGGLE_ORDER = [
|
|
201
|
-
"dark",
|
|
202
|
-
"light",
|
|
203
|
-
"system"
|
|
204
|
-
];
|
|
205
|
-
function getSystemPreference() {
|
|
206
|
-
if (typeof window === "undefined") return "dark";
|
|
207
|
-
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
208
|
-
}
|
|
209
|
-
function getInitialMode(storageKey, defaultMode) {
|
|
210
|
-
if (typeof window === "undefined") return defaultMode;
|
|
211
|
-
const stored = localStorage.getItem(storageKey);
|
|
212
|
-
if (stored === "dark" || stored === "light" || stored === "system") return stored;
|
|
213
|
-
return defaultMode;
|
|
214
|
-
}
|
|
215
|
-
function resolveMode(mode) {
|
|
216
|
-
if (mode === "system") return getSystemPreference();
|
|
217
|
-
return mode;
|
|
218
|
-
}
|
|
219
|
-
function ThemeProvider({ children, defaultMode = "system", storageKey = "camstack-theme-mode" }) {
|
|
220
|
-
const [mode, setModeState] = useState(() => getInitialMode(storageKey, defaultMode));
|
|
221
|
-
const [resolvedMode, setResolvedMode] = useState(() => resolveMode(mode));
|
|
222
|
-
const setMode = useCallback((newMode) => {
|
|
223
|
-
setModeState(newMode);
|
|
224
|
-
setResolvedMode(resolveMode(newMode));
|
|
225
|
-
if (typeof window !== "undefined") localStorage.setItem(storageKey, newMode);
|
|
226
|
-
}, [storageKey]);
|
|
227
|
-
const toggleMode = useCallback(() => {
|
|
228
|
-
setMode(TOGGLE_ORDER[(TOGGLE_ORDER.indexOf(mode) + 1) % TOGGLE_ORDER.length] ?? "dark");
|
|
229
|
-
}, [mode, setMode]);
|
|
230
|
-
useEffect(() => {
|
|
231
|
-
if (typeof document === "undefined") return;
|
|
232
|
-
const root = document.documentElement;
|
|
233
|
-
root.classList.remove("dark", "light");
|
|
234
|
-
root.classList.add(resolvedMode);
|
|
235
|
-
}, [mode, resolvedMode]);
|
|
236
|
-
useEffect(() => {
|
|
237
|
-
if (typeof window === "undefined" || mode !== "system") return;
|
|
238
|
-
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
239
|
-
const handleChange = () => {
|
|
240
|
-
setResolvedMode(getSystemPreference());
|
|
241
|
-
};
|
|
242
|
-
mediaQuery.addEventListener("change", handleChange);
|
|
243
|
-
return () => mediaQuery.removeEventListener("change", handleChange);
|
|
244
|
-
}, [mode]);
|
|
245
|
-
const value = useMemo(() => ({
|
|
246
|
-
mode,
|
|
247
|
-
resolvedMode,
|
|
248
|
-
setMode,
|
|
249
|
-
toggleMode
|
|
250
|
-
}), [
|
|
251
|
-
mode,
|
|
252
|
-
resolvedMode,
|
|
253
|
-
setMode,
|
|
254
|
-
toggleMode
|
|
255
|
-
]);
|
|
256
|
-
return /* @__PURE__ */ jsx(ThemeContext.Provider, {
|
|
257
|
-
value,
|
|
258
|
-
children
|
|
259
|
-
});
|
|
260
|
-
}
|
|
261
|
-
//#endregion
|
|
262
|
-
//#region src/theme/use-theme-mode.ts
|
|
263
|
-
function useThemeMode() {
|
|
264
|
-
const context = useContext(ThemeContext);
|
|
265
|
-
if (!context) throw new Error("useThemeMode must be used within a ThemeProvider");
|
|
266
|
-
return context;
|
|
267
|
-
}
|
|
268
|
-
//#endregion
|
|
269
269
|
export { ThemeProvider, createTheme, darkColors, defaultTheme, lightColors, themeToCss, useThemeMode };
|