@pixpilot/shadcn-ui 0.25.1 → 0.27.0

package/dist/theme-toggle/ThemeModeSwitchInside.cjs

@@ -0,0 +1,86 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/theme-toggle/ThemeModeSwitchInside.tsx
+const DEFAULT_ICON_SIZE = 16;
+const TOGGLE_WRAPPER_CLASS_NAME = (0, __pixpilot_shadcn.cn)("relative inline-flex items-center gap-1 rounded-full border border-border p-1 bg-transparent");
+const ICON_CLASS_NAME = (0, __pixpilot_shadcn.cn)("pointer-events-none rounded-full transition-colors");
+const SWITCH_OVERLAY_CLASS_NAME = (0, __pixpilot_shadcn.cn)("absolute inset-0 h-full w-full opacity-0 cursor-pointer rounded-full", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "ring-offset-background disabled:cursor-not-allowed");
+const SIZE_STYLES = {
+	sm: {
+		wrapper: "h-8",
+		iconPadding: "p-1",
+		defaultIconSize: 22
+	},
+	md: {
+		wrapper: "h-8/5",
+		iconPadding: "p-1",
+		defaultIconSize: 24
+	},
+	lg: {
+		wrapper: "h-10 p-1.5 gap-1.5",
+		iconPadding: "p-1.5",
+		defaultIconSize: 30
+	}
+};
+/**
+* Light/Dark theme switch with icons inside the switch.
+* Icons are embedded within the switch control.
+* Pure component - requires resolvedTheme and setTheme props.
+*/
+function ThemeModeSwitchInside(props) {
+	const { showIcons = true, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", resolvedTheme, setTheme } = props;
+	const sizeStyles = SIZE_STYLES[size];
+	const iconSize = iconSizeProp ?? sizeStyles.defaultIconSize ?? DEFAULT_ICON_SIZE;
+	const isDark = resolvedTheme === "dark";
+	const onCheckedChange = (checked) => {
+		setTheme?.(checked ? "dark" : "light");
+	};
+	if (!showIcons) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
+		checked: isDark,
+		onCheckedChange,
+		disabled,
+		className: (0, __pixpilot_shadcn.cn)(switchClassName),
+		"aria-label": ariaLabel
+	});
+	const sunClassName = (0, __pixpilot_shadcn.cn)(ICON_CLASS_NAME, sizeStyles.iconPadding, isDark ? "text-muted-foreground" : "bg-primary/10 text-accent-foreground");
+	const moonClassName = (0, __pixpilot_shadcn.cn)(ICON_CLASS_NAME, sizeStyles.iconPadding, isDark ? "bg-accent text-accent-foreground" : "text-muted-foreground");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __pixpilot_shadcn.cn)(TOGGLE_WRAPPER_CLASS_NAME, sizeStyles.wrapper, disabled && "opacity-50", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
+				checked: isDark,
+				onCheckedChange,
+				disabled,
+				className: (0, __pixpilot_shadcn.cn)(SWITCH_OVERLAY_CLASS_NAME, switchClassName),
+				"aria-label": ariaLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SunIcon, {
+				className: sunClassName,
+				style: {
+					width: iconSize,
+					height: iconSize
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoonIcon, {
+				className: moonClassName,
+				style: {
+					width: iconSize,
+					height: iconSize
+				}
+			})
+		]
+	});
+}
+ThemeModeSwitchInside.displayName = "ThemeModeSwitchInside";
+
+//#endregion
+exports.ThemeModeSwitchInside = ThemeModeSwitchInside;

package/dist/theme-toggle/ThemeModeSwitchInside.d.cts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeModeSwitchInside.d.ts
+type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
+interface ThemeModeSwitchInsideProps {
+  /** Whether to render the sun/moon icons at all. */
+  showIcons?: boolean;
+  /** Visual size of the toggle pill. */
+  size?: ThemeModeSwitchInsideSize;
+  /** Icon size in pixels. */
+  iconSize?: number;
+  /** Wrapper class name. */
+  className?: string;
+  /** Class name applied to the underlying Switch. */
+  switchClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  /** The resolved theme ("light" | "dark") */
+  resolvedTheme?: string;
+  /** Function to change the theme */
+  setTheme?: (theme: string) => void;
+}
+/**
+ * Light/Dark theme switch with icons inside the switch.
+ * Icons are embedded within the switch control.
+ * Pure component - requires resolvedTheme and setTheme props.
+ */
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime11.JSX.Element;
+declare namespace ThemeModeSwitchInside {
+  var displayName: string;
+}
+//#endregion
+export { ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize };

package/dist/theme-toggle/ThemeModeSwitchInside.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime10 from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeModeSwitchInside.d.ts
+type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
+interface ThemeModeSwitchInsideProps {
+  /** Whether to render the sun/moon icons at all. */
+  showIcons?: boolean;
+  /** Visual size of the toggle pill. */
+  size?: ThemeModeSwitchInsideSize;
+  /** Icon size in pixels. */
+  iconSize?: number;
+  /** Wrapper class name. */
+  className?: string;
+  /** Class name applied to the underlying Switch. */
+  switchClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  /** The resolved theme ("light" | "dark") */
+  resolvedTheme?: string;
+  /** Function to change the theme */
+  setTheme?: (theme: string) => void;
+}
+/**
+ * Light/Dark theme switch with icons inside the switch.
+ * Icons are embedded within the switch control.
+ * Pure component - requires resolvedTheme and setTheme props.
+ */
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime10.JSX.Element;
+declare namespace ThemeModeSwitchInside {
+  var displayName: string;
+}
+//#endregion
+export { ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize };

package/dist/theme-toggle/ThemeModeSwitchInside.js

@@ -0,0 +1,82 @@
+'use client';
+
+
+import { Switch, cn } from "@pixpilot/shadcn";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeModeSwitchInside.tsx
+const DEFAULT_ICON_SIZE = 16;
+const TOGGLE_WRAPPER_CLASS_NAME = cn("relative inline-flex items-center gap-1 rounded-full border border-border p-1 bg-transparent");
+const ICON_CLASS_NAME = cn("pointer-events-none rounded-full transition-colors");
+const SWITCH_OVERLAY_CLASS_NAME = cn("absolute inset-0 h-full w-full opacity-0 cursor-pointer rounded-full", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "ring-offset-background disabled:cursor-not-allowed");
+const SIZE_STYLES = {
+	sm: {
+		wrapper: "h-8",
+		iconPadding: "p-1",
+		defaultIconSize: 22
+	},
+	md: {
+		wrapper: "h-8/5",
+		iconPadding: "p-1",
+		defaultIconSize: 24
+	},
+	lg: {
+		wrapper: "h-10 p-1.5 gap-1.5",
+		iconPadding: "p-1.5",
+		defaultIconSize: 30
+	}
+};
+/**
+* Light/Dark theme switch with icons inside the switch.
+* Icons are embedded within the switch control.
+* Pure component - requires resolvedTheme and setTheme props.
+*/
+function ThemeModeSwitchInside(props) {
+	const { showIcons = true, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", resolvedTheme, setTheme } = props;
+	const sizeStyles = SIZE_STYLES[size];
+	const iconSize = iconSizeProp ?? sizeStyles.defaultIconSize ?? DEFAULT_ICON_SIZE;
+	const isDark = resolvedTheme === "dark";
+	const onCheckedChange = (checked) => {
+		setTheme?.(checked ? "dark" : "light");
+	};
+	if (!showIcons) return /* @__PURE__ */ jsx(Switch, {
+		checked: isDark,
+		onCheckedChange,
+		disabled,
+		className: cn(switchClassName),
+		"aria-label": ariaLabel
+	});
+	const sunClassName = cn(ICON_CLASS_NAME, sizeStyles.iconPadding, isDark ? "text-muted-foreground" : "bg-primary/10 text-accent-foreground");
+	const moonClassName = cn(ICON_CLASS_NAME, sizeStyles.iconPadding, isDark ? "bg-accent text-accent-foreground" : "text-muted-foreground");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(TOGGLE_WRAPPER_CLASS_NAME, sizeStyles.wrapper, disabled && "opacity-50", className),
+		children: [
+			/* @__PURE__ */ jsx(Switch, {
+				checked: isDark,
+				onCheckedChange,
+				disabled,
+				className: cn(SWITCH_OVERLAY_CLASS_NAME, switchClassName),
+				"aria-label": ariaLabel
+			}),
+			/* @__PURE__ */ jsx(SunIcon, {
+				className: sunClassName,
+				style: {
+					width: iconSize,
+					height: iconSize
+				}
+			}),
+			/* @__PURE__ */ jsx(MoonIcon, {
+				className: moonClassName,
+				style: {
+					width: iconSize,
+					height: iconSize
+				}
+			})
+		]
+	});
+}
+ThemeModeSwitchInside.displayName = "ThemeModeSwitchInside";
+
+//#endregion
+export { ThemeModeSwitchInside };

package/dist/theme-toggle/ThemeModeSwitchOutside.cjs

@@ -0,0 +1,68 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/theme-toggle/ThemeModeSwitchOutside.tsx
+const DEFAULT_ICON_SIZE = 16;
+/**
+* Light/Dark theme switch with icons outside the switch.
+* Icons flank the switch control on either side.
+* Pure component - requires resolvedTheme and setTheme props.
+*/
+function ThemeModeSwitchOutside(props) {
+	const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", resolvedTheme, setTheme } = props;
+	const isDark = resolvedTheme === "dark";
+	const onCheckedChange = (checked) => {
+		setTheme?.(checked ? "dark" : "light");
+	};
+	if (!showIcons) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
+		checked: isDark,
+		onCheckedChange,
+		disabled,
+		className: (0, __pixpilot_shadcn.cn)(switchClassName),
+		"aria-label": ariaLabel
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __pixpilot_shadcn.cn)("inline-flex items-center gap-2 px-2", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SunIcon, {
+				className: (0, __pixpilot_shadcn.cn)("transition-opacity ", isDark ? "opacity-50  " : "opacity-100"),
+				style: {
+					width: iconSize,
+					height: iconSize
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
+				checked: isDark,
+				onCheckedChange,
+				disabled,
+				className: (0, __pixpilot_shadcn.cn)(switchClassName),
+				"aria-label": ariaLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoonIcon, {
+				className: (0, __pixpilot_shadcn.cn)("transition-opacity", isDark ? "opacity-100" : "opacity-50"),
+				style: {
+					width: iconSize,
+					height: iconSize
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "sr-only",
+				children: ariaLabel
+			})
+		]
+	});
+}
+ThemeModeSwitchOutside.displayName = "ThemeModeSwitchOutside";
+
+//#endregion
+exports.ThemeModeSwitchOutside = ThemeModeSwitchOutside;

package/dist/theme-toggle/ThemeModeSwitchOutside.d.cts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime12 from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
+interface ThemeModeSwitchOutsideProps {
+  /** Whether to render the sun/moon icons at all. */
+  showIcons?: boolean;
+  /** Icon size in pixels. */
+  iconSize?: number;
+  /** Wrapper class name. */
+  className?: string;
+  /** Class name applied to the underlying Switch. */
+  switchClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  /** The resolved theme ("light" | "dark") */
+  resolvedTheme?: string;
+  /** Function to change the theme */
+  setTheme?: (theme: string) => void;
+}
+/**
+ * Light/Dark theme switch with icons outside the switch.
+ * Icons flank the switch control on either side.
+ * Pure component - requires resolvedTheme and setTheme props.
+ */
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime12.JSX.Element;
+declare namespace ThemeModeSwitchOutside {
+  var displayName: string;
+}
+//#endregion
+export { ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps };

package/dist/theme-toggle/ThemeModeSwitchOutside.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
+interface ThemeModeSwitchOutsideProps {
+  /** Whether to render the sun/moon icons at all. */
+  showIcons?: boolean;
+  /** Icon size in pixels. */
+  iconSize?: number;
+  /** Wrapper class name. */
+  className?: string;
+  /** Class name applied to the underlying Switch. */
+  switchClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  /** The resolved theme ("light" | "dark") */
+  resolvedTheme?: string;
+  /** Function to change the theme */
+  setTheme?: (theme: string) => void;
+}
+/**
+ * Light/Dark theme switch with icons outside the switch.
+ * Icons flank the switch control on either side.
+ * Pure component - requires resolvedTheme and setTheme props.
+ */
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime11.JSX.Element;
+declare namespace ThemeModeSwitchOutside {
+  var displayName: string;
+}
+//#endregion
+export { ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps };

package/dist/theme-toggle/ThemeModeSwitchOutside.js

@@ -0,0 +1,63 @@
+'use client';
+
+
+import { Switch, cn } from "@pixpilot/shadcn";
+import { MoonIcon, SunIcon } from "lucide-react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeModeSwitchOutside.tsx
+const DEFAULT_ICON_SIZE = 16;
+/**
+* Light/Dark theme switch with icons outside the switch.
+* Icons flank the switch control on either side.
+* Pure component - requires resolvedTheme and setTheme props.
+*/
+function ThemeModeSwitchOutside(props) {
+	const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", resolvedTheme, setTheme } = props;
+	const isDark = resolvedTheme === "dark";
+	const onCheckedChange = (checked) => {
+		setTheme?.(checked ? "dark" : "light");
+	};
+	if (!showIcons) return /* @__PURE__ */ jsx(Switch, {
+		checked: isDark,
+		onCheckedChange,
+		disabled,
+		className: cn(switchClassName),
+		"aria-label": ariaLabel
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("inline-flex items-center gap-2 px-2", className),
+		children: [
+			/* @__PURE__ */ jsx(SunIcon, {
+				className: cn("transition-opacity ", isDark ? "opacity-50  " : "opacity-100"),
+				style: {
+					width: iconSize,
+					height: iconSize
+				}
+			}),
+			/* @__PURE__ */ jsx(Switch, {
+				checked: isDark,
+				onCheckedChange,
+				disabled,
+				className: cn(switchClassName),
+				"aria-label": ariaLabel
+			}),
+			/* @__PURE__ */ jsx(MoonIcon, {
+				className: cn("transition-opacity", isDark ? "opacity-100" : "opacity-50"),
+				style: {
+					width: iconSize,
+					height: iconSize
+				}
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: ariaLabel
+			})
+		]
+	});
+}
+ThemeModeSwitchOutside.displayName = "ThemeModeSwitchOutside";
+
+//#endregion
+export { ThemeModeSwitchOutside };

package/dist/theme-toggle/ThemeModeToggleButton.cjs

@@ -0,0 +1,48 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/theme-toggle/ThemeModeToggleButton.tsx
+/**
+* Light/Dark toggle button.
+* Pure component - toggles between light and dark.
+*/
+function ThemeModeToggleButton(props) {
+	const { className, resolvedTheme, setTheme, disabled } = props;
+	const toggleTheme = react.default.useCallback(() => {
+		if (resolvedTheme === "dark") {
+			setTheme?.("light");
+			return;
+		}
+		setTheme?.("dark");
+	}, [resolvedTheme, setTheme]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+		variant: "secondary",
+		size: "icon",
+		className: (0, __pixpilot_shadcn.cn)("group/toggle size-8", className),
+		onClick: toggleTheme,
+		type: "button",
+		disabled,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SunIcon, { className: "hidden [html.dark_&]:block" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoonIcon, { className: "hidden [html.light_&]:block" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "sr-only",
+				children: "Toggle theme"
+			})
+		]
+	});
+}
+ThemeModeToggleButton.displayName = "ThemeModeToggleButton";
+
+//#endregion
+exports.ThemeModeToggleButton = ThemeModeToggleButton;

package/dist/theme-toggle/ThemeModeToggleButton.d.cts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime13 from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeModeToggleButton.d.ts
+interface ThemeModeToggleButtonProps {
+  className?: string;
+  /** The resolved theme ("light" | "dark") */
+  resolvedTheme?: string;
+  /** Function to change the theme */
+  setTheme?: (theme: string) => void;
+  disabled?: boolean;
+}
+/**
+ * Light/Dark toggle button.
+ * Pure component - toggles between light and dark.
+ */
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime13.JSX.Element;
+declare namespace ThemeModeToggleButton {
+  var displayName: string;
+}
+//#endregion
+export { ThemeModeToggleButton, ThemeModeToggleButtonProps };

package/dist/theme-toggle/ThemeModeToggleButton.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime12 from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeModeToggleButton.d.ts
+interface ThemeModeToggleButtonProps {
+  className?: string;
+  /** The resolved theme ("light" | "dark") */
+  resolvedTheme?: string;
+  /** Function to change the theme */
+  setTheme?: (theme: string) => void;
+  disabled?: boolean;
+}
+/**
+ * Light/Dark toggle button.
+ * Pure component - toggles between light and dark.
+ */
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime12.JSX.Element;
+declare namespace ThemeModeToggleButton {
+  var displayName: string;
+}
+//#endregion
+export { ThemeModeToggleButton, ThemeModeToggleButtonProps };

package/dist/theme-toggle/ThemeModeToggleButton.js

@@ -0,0 +1,43 @@
+'use client';
+
+
+import { Button, cn } from "@pixpilot/shadcn";
+import { MoonIcon, SunIcon } from "lucide-react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeModeToggleButton.tsx
+/**
+* Light/Dark toggle button.
+* Pure component - toggles between light and dark.
+*/
+function ThemeModeToggleButton(props) {
+	const { className, resolvedTheme, setTheme, disabled } = props;
+	const toggleTheme = React.useCallback(() => {
+		if (resolvedTheme === "dark") {
+			setTheme?.("light");
+			return;
+		}
+		setTheme?.("dark");
+	}, [resolvedTheme, setTheme]);
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "secondary",
+		size: "icon",
+		className: cn("group/toggle size-8", className),
+		onClick: toggleTheme,
+		type: "button",
+		disabled,
+		children: [
+			/* @__PURE__ */ jsx(SunIcon, { className: "hidden [html.dark_&]:block" }),
+			/* @__PURE__ */ jsx(MoonIcon, { className: "hidden [html.light_&]:block" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Toggle theme"
+			})
+		]
+	});
+}
+ThemeModeToggleButton.displayName = "ThemeModeToggleButton";
+
+//#endregion
+export { ThemeModeToggleButton };

package/dist/{ThemeToggle.cjs → theme-toggle/ThemeToggle.cjs}

@@ -1,15 +1,13 @@
 'use client';
 
 
-const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
-let next_themes = require("next-themes");
-next_themes = require_rolldown_runtime.__toESM(next_themes);
 
-//#region src/ThemeToggle.tsx
+//#region src/theme-toggle/ThemeToggle.tsx
 function SunIcon() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		className: "h-5 w-5",
@@ -55,25 +53,16 @@ function SystemIcon() {
 		})
 	});
 }
-function ThemeToggle() {
-	const [mounted, setMounted] = (0, react.useState)(false);
-	const { theme, setTheme } = (0, next_themes.useTheme)();
-	(0, react.useEffect)(() => {
-		const timer = setTimeout(() => {
-			setMounted(true);
-		}, 0);
-		return () => {
-			clearTimeout(timer);
-		};
-	}, []);
-	if (!mounted) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-200 dark:border-gray-700",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-5 w-5 animate-pulse rounded bg-gray-300 dark:bg-gray-600" })
-	});
+/**
+* Theme toggle button that cycles through light -> dark -> system.
+* Pure component - requires theme and setTheme props.
+*/
+function ThemeToggle(props) {
+	const { theme, setTheme, disabled } = props;
 	const toggleTheme = () => {
-		if (theme === "light") setTheme("dark");
-		else if (theme === "dark") setTheme("system");
-		else setTheme("light");
+		if (theme === "light") setTheme?.("dark");
+		else if (theme === "dark") setTheme?.("system");
+		else setTheme?.("light");
 	};
 	const getIcon = () => {
 		if (theme === "light") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoonIcon, {});
@@ -87,9 +76,10 @@ function ThemeToggle() {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		onClick: toggleTheme,
-		className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-900 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800",
+		className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-900 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50",
 		title: getTitle(),
 		type: "button",
+		disabled,
 		children: getIcon()
 	});
 }

package/dist/theme-toggle/ThemeToggle.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime9 from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeToggle.d.ts
+interface ThemeToggleProps {
+  /** Current theme value ("light" | "dark" | "system") */
+  theme?: string;
+  /** Function to change the theme */
+  setTheme?: (theme: string) => void;
+  disabled?: boolean;
+}
+/**
+ * Theme toggle button that cycles through light -> dark -> system.
+ * Pure component - requires theme and setTheme props.
+ */
+declare function ThemeToggle(props: ThemeToggleProps): react_jsx_runtime9.JSX.Element;
+//#endregion
+export { ThemeToggle, ThemeToggleProps };

package/dist/theme-toggle/ThemeToggle.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime13 from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeToggle.d.ts
+interface ThemeToggleProps {
+  /** Current theme value ("light" | "dark" | "system") */
+  theme?: string;
+  /** Function to change the theme */
+  setTheme?: (theme: string) => void;
+  disabled?: boolean;
+}
+/**
+ * Theme toggle button that cycles through light -> dark -> system.
+ * Pure component - requires theme and setTheme props.
+ */
+declare function ThemeToggle(props: ThemeToggleProps): react_jsx_runtime13.JSX.Element;
+//#endregion
+export { ThemeToggle, ThemeToggleProps };