@pixpilot/shadcn-ui 0.26.0 → 0.27.0

package/dist/ColorSelect.d.ts

@@ -1,6 +1,6 @@
 import { Select, SelectContent } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/ColorSelect.d.ts
 interface ColorSelectOption {
@@ -15,6 +15,6 @@ type BaseColorSelectProps = {
   placeholder?: string;
   keyboardMode?: 'cycle' | 'dropdown';
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
-declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime1.JSX.Element;
+declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 export { BaseColorSelectProps, ColorSelect, ColorSelectOption };

package/dist/ContentCard.d.ts

@@ -1,6 +1,6 @@
 import { Card } from "@pixpilot/shadcn";
 import React, { ReactNode } from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/ContentCard.d.ts
 interface SectionCardProps extends React.ComponentProps<typeof Card> {
@@ -8,7 +8,7 @@ interface SectionCardProps extends React.ComponentProps<typeof Card> {
   children: ReactNode;
   marginBottom?: boolean;
 }
-declare function ContentCard(props: SectionCardProps): react_jsx_runtime2.JSX.Element;
+declare function ContentCard(props: SectionCardProps): react_jsx_runtime3.JSX.Element;
 declare namespace ContentCard {
   var displayName: string;
 }

package/dist/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import { Calendar } from "@pixpilot/shadcn";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/DatePicker.d.ts
 type DatePickerProps = {
@@ -8,7 +8,7 @@ type DatePickerProps = {
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
-declare function DatePicker(props: DatePickerProps): react_jsx_runtime3.JSX.Element;
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime1.JSX.Element;
 declare namespace DatePicker {
   var displayName: string;
 }

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,12 @@ 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');
+const require_ThemeToggle = require('./theme-toggle/ThemeToggle.cjs');
+require('./theme-toggle/index.cjs');
 const require_toast = require('./toast/toast.cjs');
 require('./toast/index.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
@@ -98,6 +103,10 @@ 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;

package/dist/index.d.cts

@@ -58,8 +58,13 @@ 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 { ThemeToggle, ThemeToggleProps } from "./theme-toggle/ThemeToggle.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, ThemeToggle, ThemeToggleProps, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.d.ts

@@ -60,8 +60,13 @@ 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 { ThemeToggle, ThemeToggleProps } from "./theme-toggle/ThemeToggle.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, ThemeToggle, ThemeToggleProps, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.js

@@ -54,9 +54,14 @@ 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 { ThemeToggle } from "./theme-toggle/ThemeToggle.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, ThemeToggle, 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_runtime9 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_runtime9.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_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 };

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.26.0",
+  "version": "0.27.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.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 };