@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.
@@ -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?: "success" | "warning" | "danger" | "info" | "default" | null | undefined;
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?: "primary" | "danger" | "secondary" | "ghost" | "outline" | null | undefined;
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?: "primary" | "danger" | "secondary" | "ghost" | "outline" | null | undefined;
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?: "default" | "error" | null | undefined;
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;
@@ -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;
@@ -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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@camstack/ui-library",
3
- "version": "1.2.49",
3
+ "version": "1.2.51",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",