@pixpilot/shadcn-ui 0.26.0 → 0.28.0

package/dist/file-upload/FileUpload.d.cts

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.cjs";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.d.ts
-declare function FileUpload(props: FileUploadProps): react_jsx_runtime9.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { FileUpload };

package/dist/file-upload/FileUpload.d.ts

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.js";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.d.ts
-declare function FileUpload(props: FileUploadProps): react_jsx_runtime9.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { FileUpload };

package/dist/file-upload-inline/FileUploadInline.d.ts

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.js";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/file-upload-inline/FileUploadInline.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime8.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { FileUploadInline };

package/dist/index.cjs

@@ -53,7 +53,11 @@ require('./tabs/index.cjs');
 const require_tags_input = require('./tags-input.cjs');
 const require_ThemeProvider = require('./theme-provider/ThemeProvider.cjs');
 require('./theme-provider/index.cjs');
-const require_ThemeToggle = require('./ThemeToggle.cjs');
+const require_ThemeModeDropdown = require('./theme-toggle/ThemeModeDropdown.cjs');
+const require_ThemeModeSwitchInside = require('./theme-toggle/ThemeModeSwitchInside.cjs');
+const require_ThemeModeSwitchOutside = require('./theme-toggle/ThemeModeSwitchOutside.cjs');
+const require_ThemeModeToggleButton = require('./theme-toggle/ThemeModeToggleButton.cjs');
+require('./theme-toggle/index.cjs');
 const require_toast = require('./toast/toast.cjs');
 require('./toast/index.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
@@ -98,8 +102,11 @@ exports.TabsContext = require_TabsContext.TabsContext;
 exports.TabsList = require_TabsList.TabsList;
 exports.TabsTrigger = require_TabsTrigger.TabsTrigger;
 exports.TagsInput = require_tags_input.TagsInput;
+exports.ThemeModeDropdown = require_ThemeModeDropdown.ThemeModeDropdown;
+exports.ThemeModeSwitchInside = require_ThemeModeSwitchInside.ThemeModeSwitchInside;
+exports.ThemeModeSwitchOutside = require_ThemeModeSwitchOutside.ThemeModeSwitchOutside;
+exports.ThemeModeToggleButton = require_ThemeModeToggleButton.ThemeModeToggleButton;
 exports.ThemeProvider = require_ThemeProvider.ThemeProvider;
-exports.ThemeToggle = require_ThemeToggle.ThemeToggle;
 exports.cn = __pixpilot_shadcn.cn;
 exports.showConfirmDialog = require_confirmation_dialogs.showConfirmDialog;
 exports.toast = require_toast.toast;

package/dist/index.d.cts

@@ -58,8 +58,12 @@ import "./tabs/index.cjs";
 import { TagsInput, TagsInputProps } from "./tags-input.cjs";
 import { ThemeProvider, ThemeProviderProps } from "./theme-provider/ThemeProvider.cjs";
 import { useTheme } from "./theme-provider/index.cjs";
-import { ThemeToggle } from "./ThemeToggle.cjs";
+import { ThemeModeDropdown, ThemeModeDropdownProps } from "./theme-toggle/ThemeModeDropdown.cjs";
+import { ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize } from "./theme-toggle/ThemeModeSwitchInside.cjs";
+import { ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps } from "./theme-toggle/ThemeModeSwitchOutside.cjs";
+import { ThemeModeToggleButton, ThemeModeToggleButtonProps } from "./theme-toggle/ThemeModeToggleButton.cjs";
+import "./theme-toggle/index.cjs";
 import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.cjs";
 import "./toast/index.cjs";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.d.ts

@@ -60,8 +60,12 @@ import "./tabs/index.js";
 import { TagsInput, TagsInputProps } from "./tags-input.js";
 import { ThemeProvider, ThemeProviderProps } from "./theme-provider/ThemeProvider.js";
 import { useTheme } from "./theme-provider/index.js";
-import { ThemeToggle } from "./ThemeToggle.js";
+import { ThemeModeDropdown, ThemeModeDropdownProps } from "./theme-toggle/ThemeModeDropdown.js";
+import { ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize } from "./theme-toggle/ThemeModeSwitchInside.js";
+import { ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps } from "./theme-toggle/ThemeModeSwitchOutside.js";
+import { ThemeModeToggleButton, ThemeModeToggleButtonProps } from "./theme-toggle/ThemeModeToggleButton.js";
+import "./theme-toggle/index.js";
 import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.js";
 import "./toast/index.js";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.js

@@ -54,9 +54,13 @@ import "./tabs/index.js";
 import { TagsInput } from "./tags-input.js";
 import { ThemeProvider } from "./theme-provider/ThemeProvider.js";
 import { useTheme } from "./theme-provider/index.js";
-import { ThemeToggle } from "./ThemeToggle.js";
+import { ThemeModeDropdown } from "./theme-toggle/ThemeModeDropdown.js";
+import { ThemeModeSwitchInside } from "./theme-toggle/ThemeModeSwitchInside.js";
+import { ThemeModeSwitchOutside } from "./theme-toggle/ThemeModeSwitchOutside.js";
+import { ThemeModeToggleButton } from "./theme-toggle/ThemeModeToggleButton.js";
+import "./theme-toggle/index.js";
 import { DEFAULT_ALERT_DURATION, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.js";
 import "./toast/index.js";
 import { cn } from "@pixpilot/shadcn";
 
-export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerBase, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerBase, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/input/Input.d.ts

@@ -1,6 +1,6 @@
 import { InputProps } from "@pixpilot/shadcn";
 import * as React$1 from "react";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/input/Input.d.ts
 type InputProps$1 = InputProps & {
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
   prefixClassName?: string;
   suffixClassName?: string;
 };
-declare function Input$1(props: InputProps$1): react_jsx_runtime7.JSX.Element;
+declare function Input$1(props: InputProps$1): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { Input$1 as Input, InputProps$1 as InputProps };

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

@@ -1,3 +1,3 @@
 import { ThemeProvider as ThemeProvider$1, ThemeProviderProps } from "./ThemeProvider.js";
-import { useTheme as useTheme$1 } from "next-themes";
-export { useTheme$1 as useTheme };
+import { useTheme } from "next-themes";
+export { useTheme };

package/dist/theme-provider/index.js

@@ -1,4 +1,4 @@
 import { ThemeProvider as ThemeProvider$1 } from "./ThemeProvider.js";
-import { useTheme as useTheme$1 } from "next-themes";
+import { useTheme } from "next-themes";
 
-export { useTheme$1 as useTheme };
+export { useTheme };

package/dist/theme-toggle/ThemeModeDropdown.cjs

@@ -0,0 +1,81 @@
+'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/ThemeModeDropdown.tsx
+/**
+* Theme mode selector dropdown.
+* Provides Light / Dark / System options.
+* Pure component - requires theme and setTheme props.
+*/
+function ThemeModeDropdown(props) {
+	const { align = "end", className, theme, setTheme, resolvedTheme, disabled } = props;
+	const isDark = resolvedTheme === "dark";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+			variant: "outline",
+			size: "icon",
+			className: (0, __pixpilot_shadcn.cn)(className),
+			disabled,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sun, { className: (0, __pixpilot_shadcn.cn)("h-[1.2rem] w-[1.2rem] transition-all", isDark ? "scale-0 -rotate-90" : "scale-100 rotate-0") }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Moon, { className: (0, __pixpilot_shadcn.cn)("absolute h-[1.2rem] w-[1.2rem] transition-all", isDark ? "scale-100 rotate-0" : "scale-0 rotate-90") }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "sr-only",
+					children: "Toggle theme"
+				})
+			]
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuContent, {
+		align,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
+				onClick: () => setTheme?.("light"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sun, { className: "h-4 w-4 mr-2" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "flex-1",
+						children: "Light"
+					}),
+					theme === "light" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 ml-2" })
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
+				onClick: () => setTheme?.("dark"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Moon, { className: "h-4 w-4 mr-2" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "flex-1",
+						children: "Dark"
+					}),
+					theme === "dark" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 ml-2" })
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
+				onClick: () => setTheme?.("system"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Monitor, { className: "h-4 w-4 mr-2" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "flex-1",
+						children: "System"
+					}),
+					theme === "system" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 ml-2" })
+				]
+			})
+		]
+	})] });
+}
+ThemeModeDropdown.displayName = "ThemeModeDropdown";
+
+//#endregion
+exports.ThemeModeDropdown = ThemeModeDropdown;

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

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime10 from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeModeDropdown.d.ts
+interface ThemeModeDropdownProps {
+  align?: 'start' | 'center' | 'end';
+  className?: string;
+  /** Current theme value ("light" | "dark" | "system") */
+  theme?: string;
+  /** Function to change the theme */
+  setTheme?: (theme: string) => void;
+  /** The resolved theme ("light" | "dark") */
+  resolvedTheme?: string;
+  disabled?: boolean;
+}
+/**
+ * Theme mode selector dropdown.
+ * Provides Light / Dark / System options.
+ * Pure component - requires theme and setTheme props.
+ */
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime10.JSX.Element;
+declare namespace ThemeModeDropdown {
+  var displayName: string;
+}
+//#endregion
+export { ThemeModeDropdown, ThemeModeDropdownProps };

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

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime10 from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeModeDropdown.d.ts
+interface ThemeModeDropdownProps {
+  align?: 'start' | 'center' | 'end';
+  className?: string;
+  /** Current theme value ("light" | "dark" | "system") */
+  theme?: string;
+  /** Function to change the theme */
+  setTheme?: (theme: string) => void;
+  /** The resolved theme ("light" | "dark") */
+  resolvedTheme?: string;
+  disabled?: boolean;
+}
+/**
+ * Theme mode selector dropdown.
+ * Provides Light / Dark / System options.
+ * Pure component - requires theme and setTheme props.
+ */
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime10.JSX.Element;
+declare namespace ThemeModeDropdown {
+  var displayName: string;
+}
+//#endregion
+export { ThemeModeDropdown, ThemeModeDropdownProps };

package/dist/theme-toggle/ThemeModeDropdown.js

@@ -0,0 +1,76 @@
+'use client';
+
+
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, cn } from "@pixpilot/shadcn";
+import { Check, Monitor, Moon, Sun } from "lucide-react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/theme-toggle/ThemeModeDropdown.tsx
+/**
+* Theme mode selector dropdown.
+* Provides Light / Dark / System options.
+* Pure component - requires theme and setTheme props.
+*/
+function ThemeModeDropdown(props) {
+	const { align = "end", className, theme, setTheme, resolvedTheme, disabled } = props;
+	const isDark = resolvedTheme === "dark";
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "outline",
+			size: "icon",
+			className: cn(className),
+			disabled,
+			children: [
+				/* @__PURE__ */ jsx(Sun, { className: cn("h-[1.2rem] w-[1.2rem] transition-all", isDark ? "scale-0 -rotate-90" : "scale-100 rotate-0") }),
+				/* @__PURE__ */ jsx(Moon, { className: cn("absolute h-[1.2rem] w-[1.2rem] transition-all", isDark ? "scale-100 rotate-0" : "scale-0 rotate-90") }),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Toggle theme"
+				})
+			]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align,
+		children: [
+			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onClick: () => setTheme?.("light"),
+				children: [
+					/* @__PURE__ */ jsx(Sun, { className: "h-4 w-4 mr-2" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1",
+						children: "Light"
+					}),
+					theme === "light" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 ml-2" })
+				]
+			}),
+			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onClick: () => setTheme?.("dark"),
+				children: [
+					/* @__PURE__ */ jsx(Moon, { className: "h-4 w-4 mr-2" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1",
+						children: "Dark"
+					}),
+					theme === "dark" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 ml-2" })
+				]
+			}),
+			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onClick: () => setTheme?.("system"),
+				children: [
+					/* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4 mr-2" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1",
+						children: "System"
+					}),
+					theme === "system" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 ml-2" })
+				]
+			})
+		]
+	})] });
+}
+ThemeModeDropdown.displayName = "ThemeModeDropdown";
+
+//#endregion
+export { ThemeModeDropdown };

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_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.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_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.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_runtime9 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_runtime9.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_runtime9 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_runtime9.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/theme-toggle/index.cjs

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

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

@@ -0,0 +1,4 @@
+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";

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

@@ -0,0 +1,4 @@
+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";

package/dist/theme-toggle/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -60,8 +60,8 @@
     "@internal/eslint-config": "0.3.0",
     "@internal/hooks": "0.0.0",
     "@internal/prettier-config": "0.0.1",
-    "@internal/tsdown-config": "0.1.0",
     "@internal/tsconfig": "0.1.0",
+    "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",

package/dist/ThemeToggle.cjs

@@ -1,98 +0,0 @@
-'use client';
-
-
-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
-function SunIcon() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-		className: "h-5 w-5",
-		fill: "none",
-		stroke: "currentColor",
-		viewBox: "0 0 24 24",
-		xmlns: "http://www.w3.org/2000/svg",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: 2,
-			d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
-		})
-	});
-}
-function MoonIcon() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-		className: "h-5 w-5",
-		fill: "none",
-		stroke: "currentColor",
-		viewBox: "0 0 24 24",
-		xmlns: "http://www.w3.org/2000/svg",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: 2,
-			d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-		})
-	});
-}
-function SystemIcon() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-		className: "h-5 w-5",
-		fill: "none",
-		stroke: "currentColor",
-		viewBox: "0 0 24 24",
-		xmlns: "http://www.w3.org/2000/svg",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: 2,
-			d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-		})
-	});
-}
-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" })
-	});
-	const toggleTheme = () => {
-		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, {});
-		if (theme === "dark") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SystemIcon, {});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, {});
-	};
-	const getTitle = () => {
-		if (theme === "light") return "Switch to Dark mode";
-		if (theme === "dark") return "Switch to System mode";
-		return "Switch to Light mode";
-	};
-	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",
-		title: getTitle(),
-		type: "button",
-		children: getIcon()
-	});
-}
-
-//#endregion
-exports.ThemeToggle = ThemeToggle;

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 };

package/dist/ThemeToggle.js

@@ -1,94 +0,0 @@
-'use client';
-
-
-import React, { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-import { useTheme } from "next-themes";
-
-//#region src/ThemeToggle.tsx
-function SunIcon() {
-	return /* @__PURE__ */ jsx("svg", {
-		className: "h-5 w-5",
-		fill: "none",
-		stroke: "currentColor",
-		viewBox: "0 0 24 24",
-		xmlns: "http://www.w3.org/2000/svg",
-		children: /* @__PURE__ */ jsx("path", {
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: 2,
-			d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
-		})
-	});
-}
-function MoonIcon() {
-	return /* @__PURE__ */ jsx("svg", {
-		className: "h-5 w-5",
-		fill: "none",
-		stroke: "currentColor",
-		viewBox: "0 0 24 24",
-		xmlns: "http://www.w3.org/2000/svg",
-		children: /* @__PURE__ */ jsx("path", {
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: 2,
-			d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-		})
-	});
-}
-function SystemIcon() {
-	return /* @__PURE__ */ jsx("svg", {
-		className: "h-5 w-5",
-		fill: "none",
-		stroke: "currentColor",
-		viewBox: "0 0 24 24",
-		xmlns: "http://www.w3.org/2000/svg",
-		children: /* @__PURE__ */ jsx("path", {
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: 2,
-			d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-		})
-	});
-}
-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" })
-	});
-	const toggleTheme = () => {
-		if (theme === "light") setTheme("dark");
-		else if (theme === "dark") setTheme("system");
-		else setTheme("light");
-	};
-	const getIcon = () => {
-		if (theme === "light") return /* @__PURE__ */ jsx(MoonIcon, {});
-		if (theme === "dark") return /* @__PURE__ */ jsx(SystemIcon, {});
-		return /* @__PURE__ */ jsx(SunIcon, {});
-	};
-	const getTitle = () => {
-		if (theme === "light") return "Switch to Dark mode";
-		if (theme === "dark") return "Switch to System mode";
-		return "Switch to Light mode";
-	};
-	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",
-		title: getTitle(),
-		type: "button",
-		children: getIcon()
-	});
-}
-
-//#endregion
-export { ThemeToggle };