@camstack/ui-library 1.2.50 → 1.2.52

package/dist/primitives/badge.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
-    variant?: "success" | "warning" | "danger" | "info" | "default" | null | undefined;
+    variant?: "info" | "success" | "default" | "danger" | "warning" | null | undefined;
     styleVariant?: "outline" | "solid" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'>, VariantProps<typeof badgeVariants> {

package/dist/primitives/button.d.ts

@@ -1,7 +1,7 @@
 import { ButtonHTMLAttributes } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "danger" | "secondary" | "ghost" | "outline" | null | undefined;
+    variant?: "danger" | "primary" | "secondary" | "ghost" | "outline" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/primitives/icon-button.d.ts

@@ -2,7 +2,7 @@ import { ButtonHTMLAttributes } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { LucideIcon } from 'lucide-react';
 declare const iconButtonVariants: (props?: ({
-    variant?: "primary" | "danger" | "secondary" | "ghost" | "outline" | null | undefined;
+    variant?: "danger" | "primary" | "secondary" | "ghost" | "outline" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof iconButtonVariants> {

package/dist/primitives/input.d.ts

@@ -1,7 +1,13 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
+/**
+ * `disabled:opacity-50 disabled:cursor-not-allowed` for the same reason as
+ * `Select` — an explicit `bg-surface` / `text-foreground` overrides the greying
+ * a browser would otherwise apply, leaving an inert field indistinguishable
+ * from a live one. See `disabled-affordance.test.tsx`.
+ */
 declare const inputVariants: (props?: ({
-    state?: "default" | "error" | null | undefined;
+    state?: "error" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
     leftSlot?: ReactNode;

package/dist/primitives/select.d.ts

@@ -6,4 +6,20 @@ export interface SelectOption {
 export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
     options: SelectOption[];
 }
+/**
+ * A native `<select>` styled to match the rest of the field set.
+ *
+ * `appearance-none` plus an explicit `bg-surface` / `text-foreground` is what
+ * makes it match — and it is also what USED to make a disabled one a lie. A
+ * browser greys a disabled control by rendering its own background and text
+ * colour; all three of those are overridden here, so a `disabled` dropdown
+ * looked exactly like a live one and simply ignored the click. That is the
+ * whole of the "the language selector does not open" report of 2026-08-15:
+ * the AI section's switch was off, every control under it was correctly inert,
+ * and nothing on screen said so.
+ *
+ * `disabled:` classes belong HERE and not on each call site: there are dozens
+ * of `<Select disabled>` in this app and the one that gets forgotten is the one
+ * that generates the ticket. Guarded by `disabled-affordance.test.tsx`.
+ */
 export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLSelectElement>>;

package/dist/theme/index.cjs

@@ -1,6 +1,77 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/theme/theme-provider.tsx
+var ThemeContext = (0, react.createContext)(null);
+var TOGGLE_ORDER = [
+	"dark",
+	"light",
+	"system"
+];
+function getSystemPreference() {
+	if (typeof window === "undefined") return "dark";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getInitialMode(storageKey, defaultMode) {
+	if (typeof window === "undefined") return defaultMode;
+	const stored = localStorage.getItem(storageKey);
+	if (stored === "dark" || stored === "light" || stored === "system") return stored;
+	return defaultMode;
+}
+function resolveMode(mode) {
+	if (mode === "system") return getSystemPreference();
+	return mode;
+}
+function ThemeProvider({ children, defaultMode = "system", storageKey = "camstack-theme-mode" }) {
+	const [mode, setModeState] = (0, react.useState)(() => getInitialMode(storageKey, defaultMode));
+	const [resolvedMode, setResolvedMode] = (0, react.useState)(() => resolveMode(mode));
+	const setMode = (0, react.useCallback)((newMode) => {
+		setModeState(newMode);
+		setResolvedMode(resolveMode(newMode));
+		if (typeof window !== "undefined") localStorage.setItem(storageKey, newMode);
+	}, [storageKey]);
+	const toggleMode = (0, react.useCallback)(() => {
+		setMode(TOGGLE_ORDER[(TOGGLE_ORDER.indexOf(mode) + 1) % TOGGLE_ORDER.length] ?? "dark");
+	}, [mode, setMode]);
+	(0, react.useEffect)(() => {
+		if (typeof document === "undefined") return;
+		const root = document.documentElement;
+		root.classList.remove("dark", "light");
+		root.classList.add(resolvedMode);
+	}, [mode, resolvedMode]);
+	(0, react.useEffect)(() => {
+		if (typeof window === "undefined" || mode !== "system") return;
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const handleChange = () => {
+			setResolvedMode(getSystemPreference());
+		};
+		mediaQuery.addEventListener("change", handleChange);
+		return () => mediaQuery.removeEventListener("change", handleChange);
+	}, [mode]);
+	const value = (0, react.useMemo)(() => ({
+		mode,
+		resolvedMode,
+		setMode,
+		toggleMode
+	}), [
+		mode,
+		resolvedMode,
+		setMode,
+		toggleMode
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
+		value,
+		children
+	});
+}
+//#endregion
+//#region src/theme/use-theme-mode.ts
+function useThemeMode() {
+	const context = (0, react.useContext)(ThemeContext);
+	if (!context) throw new Error("useThemeMode must be used within a ThemeProvider");
+	return context;
+}
+//#endregion
 //#region src/theme/defaults.ts
 var providerColors = {
 	frigate: "#3b82f6",
@@ -196,77 +267,6 @@ ${lightColorBlock.replace(/^ {2}/gm, "    ")}
 `;
 }
 //#endregion
-//#region src/theme/theme-provider.tsx
-var ThemeContext = (0, react.createContext)(null);
-var TOGGLE_ORDER = [
-	"dark",
-	"light",
-	"system"
-];
-function getSystemPreference() {
-	if (typeof window === "undefined") return "dark";
-	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function getInitialMode(storageKey, defaultMode) {
-	if (typeof window === "undefined") return defaultMode;
-	const stored = localStorage.getItem(storageKey);
-	if (stored === "dark" || stored === "light" || stored === "system") return stored;
-	return defaultMode;
-}
-function resolveMode(mode) {
-	if (mode === "system") return getSystemPreference();
-	return mode;
-}
-function ThemeProvider({ children, defaultMode = "system", storageKey = "camstack-theme-mode" }) {
-	const [mode, setModeState] = (0, react.useState)(() => getInitialMode(storageKey, defaultMode));
-	const [resolvedMode, setResolvedMode] = (0, react.useState)(() => resolveMode(mode));
-	const setMode = (0, react.useCallback)((newMode) => {
-		setModeState(newMode);
-		setResolvedMode(resolveMode(newMode));
-		if (typeof window !== "undefined") localStorage.setItem(storageKey, newMode);
-	}, [storageKey]);
-	const toggleMode = (0, react.useCallback)(() => {
-		setMode(TOGGLE_ORDER[(TOGGLE_ORDER.indexOf(mode) + 1) % TOGGLE_ORDER.length] ?? "dark");
-	}, [mode, setMode]);
-	(0, react.useEffect)(() => {
-		if (typeof document === "undefined") return;
-		const root = document.documentElement;
-		root.classList.remove("dark", "light");
-		root.classList.add(resolvedMode);
-	}, [mode, resolvedMode]);
-	(0, react.useEffect)(() => {
-		if (typeof window === "undefined" || mode !== "system") return;
-		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-		const handleChange = () => {
-			setResolvedMode(getSystemPreference());
-		};
-		mediaQuery.addEventListener("change", handleChange);
-		return () => mediaQuery.removeEventListener("change", handleChange);
-	}, [mode]);
-	const value = (0, react.useMemo)(() => ({
-		mode,
-		resolvedMode,
-		setMode,
-		toggleMode
-	}), [
-		mode,
-		resolvedMode,
-		setMode,
-		toggleMode
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
-		value,
-		children
-	});
-}
-//#endregion
-//#region src/theme/use-theme-mode.ts
-function useThemeMode() {
-	const context = (0, react.useContext)(ThemeContext);
-	if (!context) throw new Error("useThemeMode must be used within a ThemeProvider");
-	return context;
-}
-//#endregion
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeProvider$1 = ThemeProvider;
 exports.createTheme = createTheme;

package/dist/theme/index.js

@@ -1,5 +1,76 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+//#region src/theme/theme-provider.tsx
+var ThemeContext = createContext(null);
+var TOGGLE_ORDER = [
+	"dark",
+	"light",
+	"system"
+];
+function getSystemPreference() {
+	if (typeof window === "undefined") return "dark";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getInitialMode(storageKey, defaultMode) {
+	if (typeof window === "undefined") return defaultMode;
+	const stored = localStorage.getItem(storageKey);
+	if (stored === "dark" || stored === "light" || stored === "system") return stored;
+	return defaultMode;
+}
+function resolveMode(mode) {
+	if (mode === "system") return getSystemPreference();
+	return mode;
+}
+function ThemeProvider({ children, defaultMode = "system", storageKey = "camstack-theme-mode" }) {
+	const [mode, setModeState] = useState(() => getInitialMode(storageKey, defaultMode));
+	const [resolvedMode, setResolvedMode] = useState(() => resolveMode(mode));
+	const setMode = useCallback((newMode) => {
+		setModeState(newMode);
+		setResolvedMode(resolveMode(newMode));
+		if (typeof window !== "undefined") localStorage.setItem(storageKey, newMode);
+	}, [storageKey]);
+	const toggleMode = useCallback(() => {
+		setMode(TOGGLE_ORDER[(TOGGLE_ORDER.indexOf(mode) + 1) % TOGGLE_ORDER.length] ?? "dark");
+	}, [mode, setMode]);
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		const root = document.documentElement;
+		root.classList.remove("dark", "light");
+		root.classList.add(resolvedMode);
+	}, [mode, resolvedMode]);
+	useEffect(() => {
+		if (typeof window === "undefined" || mode !== "system") return;
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const handleChange = () => {
+			setResolvedMode(getSystemPreference());
+		};
+		mediaQuery.addEventListener("change", handleChange);
+		return () => mediaQuery.removeEventListener("change", handleChange);
+	}, [mode]);
+	const value = useMemo(() => ({
+		mode,
+		resolvedMode,
+		setMode,
+		toggleMode
+	}), [
+		mode,
+		resolvedMode,
+		setMode,
+		toggleMode
+	]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children
+	});
+}
+//#endregion
+//#region src/theme/use-theme-mode.ts
+function useThemeMode() {
+	const context = useContext(ThemeContext);
+	if (!context) throw new Error("useThemeMode must be used within a ThemeProvider");
+	return context;
+}
+//#endregion
 //#region src/theme/defaults.ts
 var providerColors = {
 	frigate: "#3b82f6",
@@ -195,75 +266,4 @@ ${lightColorBlock.replace(/^ {2}/gm, "    ")}
 `;
 }
 //#endregion
-//#region src/theme/theme-provider.tsx
-var ThemeContext = createContext(null);
-var TOGGLE_ORDER = [
-	"dark",
-	"light",
-	"system"
-];
-function getSystemPreference() {
-	if (typeof window === "undefined") return "dark";
-	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function getInitialMode(storageKey, defaultMode) {
-	if (typeof window === "undefined") return defaultMode;
-	const stored = localStorage.getItem(storageKey);
-	if (stored === "dark" || stored === "light" || stored === "system") return stored;
-	return defaultMode;
-}
-function resolveMode(mode) {
-	if (mode === "system") return getSystemPreference();
-	return mode;
-}
-function ThemeProvider({ children, defaultMode = "system", storageKey = "camstack-theme-mode" }) {
-	const [mode, setModeState] = useState(() => getInitialMode(storageKey, defaultMode));
-	const [resolvedMode, setResolvedMode] = useState(() => resolveMode(mode));
-	const setMode = useCallback((newMode) => {
-		setModeState(newMode);
-		setResolvedMode(resolveMode(newMode));
-		if (typeof window !== "undefined") localStorage.setItem(storageKey, newMode);
-	}, [storageKey]);
-	const toggleMode = useCallback(() => {
-		setMode(TOGGLE_ORDER[(TOGGLE_ORDER.indexOf(mode) + 1) % TOGGLE_ORDER.length] ?? "dark");
-	}, [mode, setMode]);
-	useEffect(() => {
-		if (typeof document === "undefined") return;
-		const root = document.documentElement;
-		root.classList.remove("dark", "light");
-		root.classList.add(resolvedMode);
-	}, [mode, resolvedMode]);
-	useEffect(() => {
-		if (typeof window === "undefined" || mode !== "system") return;
-		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-		const handleChange = () => {
-			setResolvedMode(getSystemPreference());
-		};
-		mediaQuery.addEventListener("change", handleChange);
-		return () => mediaQuery.removeEventListener("change", handleChange);
-	}, [mode]);
-	const value = useMemo(() => ({
-		mode,
-		resolvedMode,
-		setMode,
-		toggleMode
-	}), [
-		mode,
-		resolvedMode,
-		setMode,
-		toggleMode
-	]);
-	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-		value,
-		children
-	});
-}
-//#endregion
-//#region src/theme/use-theme-mode.ts
-function useThemeMode() {
-	const context = useContext(ThemeContext);
-	if (!context) throw new Error("useThemeMode must be used within a ThemeProvider");
-	return context;
-}
-//#endregion
 export { ThemeProvider, createTheme, darkColors, defaultTheme, lightColors, themeToCss, useThemeMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.50",
+  "version": "1.2.52",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",