@pixpilot/shadcn-ui 0.25.1 → 0.27.0

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

@@ -1,11 +1,10 @@
 'use client';
 
 
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useTheme } from "next-themes";
 
-//#region src/ThemeToggle.tsx
+//#region src/theme-toggle/ThemeToggle.tsx
 function SunIcon() {
 	return /* @__PURE__ */ jsx("svg", {
 		className: "h-5 w-5",
@@ -51,25 +50,16 @@ function SystemIcon() {
 		})
 	});
 }
-function ThemeToggle() {
-	const [mounted, setMounted] = useState(false);
-	const { theme, setTheme } = useTheme();
-	useEffect(() => {
-		const timer = setTimeout(() => {
-			setMounted(true);
-		}, 0);
-		return () => {
-			clearTimeout(timer);
-		};
-	}, []);
-	if (!mounted) return /* @__PURE__ */ jsx("div", {
-		className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-200 dark:border-gray-700",
-		children: /* @__PURE__ */ 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__ */ jsx(MoonIcon, {});
@@ -83,9 +73,10 @@ function ThemeToggle() {
 	};
 	return /* @__PURE__ */ 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/index.cjs

@@ -0,0 +1,5 @@
+const require_ThemeModeDropdown = require('./ThemeModeDropdown.cjs');
+const require_ThemeModeSwitchInside = require('./ThemeModeSwitchInside.cjs');
+const require_ThemeModeSwitchOutside = require('./ThemeModeSwitchOutside.cjs');
+const require_ThemeModeToggleButton = require('./ThemeModeToggleButton.cjs');
+const require_ThemeToggle = require('./ThemeToggle.cjs');

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

@@ -0,0 +1,5 @@
+import { ThemeModeDropdown, ThemeModeDropdownProps } from "./ThemeModeDropdown.cjs";
+import { ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize } from "./ThemeModeSwitchInside.cjs";
+import { ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps } from "./ThemeModeSwitchOutside.cjs";
+import { ThemeModeToggleButton, ThemeModeToggleButtonProps } from "./ThemeModeToggleButton.cjs";
+import { ThemeToggle, ThemeToggleProps } from "./ThemeToggle.cjs";

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

@@ -0,0 +1,5 @@
+import { ThemeModeDropdown, ThemeModeDropdownProps } from "./ThemeModeDropdown.js";
+import { ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize } from "./ThemeModeSwitchInside.js";
+import { ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps } from "./ThemeModeSwitchOutside.js";
+import { ThemeModeToggleButton, ThemeModeToggleButtonProps } from "./ThemeModeToggleButton.js";
+import { ThemeToggle, ThemeToggleProps } from "./ThemeToggle.js";

package/dist/theme-toggle/index.js

@@ -0,0 +1,5 @@
+import { ThemeModeDropdown } from "./ThemeModeDropdown.js";
+import { ThemeModeSwitchInside } from "./ThemeModeSwitchInside.js";
+import { ThemeModeSwitchOutside } from "./ThemeModeSwitchOutside.js";
+import { ThemeModeToggleButton } from "./ThemeModeToggleButton.js";
+import { ThemeToggle } from "./ThemeToggle.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.25.1",
+  "version": "0.27.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",

package/dist/ThemeToggle.d.cts

@@ -1,6 +0,0 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
-
-//#region src/ThemeToggle.d.ts
-declare function ThemeToggle(): react_jsx_runtime6.JSX.Element;
-//#endregion
-export { ThemeToggle };

package/dist/ThemeToggle.d.ts

@@ -1,6 +0,0 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
-
-//#region src/ThemeToggle.d.ts
-declare function ThemeToggle(): react_jsx_runtime6.JSX.Element;
-//#endregion
-export { ThemeToggle };