@pixpilot/shadcn-ui 0.36.0 → 0.37.0

package/dist/IconToggle.cjs

@@ -0,0 +1,82 @@
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_svg = require('./utils/svg.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+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/IconToggle.tsx
+/**
+* IconToggle - A toggle button component with customizable icons for checked/unchecked states.
+* Perfect for visibility toggles, theme switches, or any boolean state with visual feedback.
+* Icons can be React components (like lucide-react icons) or SVG markup strings.
+*/
+const IconToggle = react.default.forwardRef(({ checked: controlledChecked, defaultChecked = false, onCheckedChange, onChange, checkedIcon, uncheckedIcon, size = "default", variant = "default", className, disabled,...props }, ref) => {
+	const [uncontrolledChecked, setUncontrolledChecked] = react.default.useState(defaultChecked);
+	const isControlled = controlledChecked !== void 0;
+	const checked = isControlled ? controlledChecked : uncontrolledChecked;
+	const handleClick = (0, react.useCallback)((e) => {
+		if (disabled) return;
+		const newChecked = !checked;
+		if (!isControlled) setUncontrolledChecked(newChecked);
+		onCheckedChange?.(newChecked);
+		onChange?.(newChecked);
+		props.onClick?.(e);
+	}, [
+		checked,
+		disabled,
+		isControlled,
+		onChange,
+		onCheckedChange,
+		props
+	]);
+	const renderIcon = (icon) => {
+		if (icon === void 0 || icon === null) return null;
+		if (require_svg.isSvgMarkupString(icon)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"data-slot": "svg-mask",
+			"aria-hidden": "true",
+			className: "inline-block h-4 w-4",
+			style: {
+				backgroundColor: "currentColor",
+				WebkitMaskImage: require_svg.svgMarkupToMaskUrl(icon),
+				maskImage: require_svg.svgMarkupToMaskUrl(icon),
+				WebkitMaskRepeat: "no-repeat",
+				maskRepeat: "no-repeat",
+				WebkitMaskPosition: "center",
+				maskPosition: "center",
+				WebkitMaskSize: "contain",
+				maskSize: "contain"
+			}
+		});
+		return icon;
+	};
+	const sizeClasses = {
+		sm: "size-7",
+		default: "size-9",
+		lg: "size-11"
+	};
+	const variantClasses = {
+		default: "bg-background border border-input hover:bg-accent hover:text-accent-foreground data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:hover:bg-primary/90",
+		outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground data-[state=checked]:border-primary data-[state=checked]:text-primary",
+		ghost: "hover:bg-accent hover:text-accent-foreground data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary"
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref,
+		type: "button",
+		role: "switch",
+		"aria-checked": checked,
+		"data-state": checked ? "checked" : "unchecked",
+		"data-slot": "icon-toggle",
+		disabled,
+		className: (0, __pixpilot_shadcn.cn)("inline-flex items-center justify-center rounded-md text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg:not([class*=\"size-\"])]:size-4 [&_svg]:shrink-0", sizeClasses[size], variantClasses[variant], className),
+		onClick: handleClick,
+		...props,
+		children: checked ? renderIcon(checkedIcon) : renderIcon(uncheckedIcon)
+	});
+});
+IconToggle.displayName = "IconToggle";
+
+//#endregion
+exports.IconToggle = IconToggle;

package/dist/IconToggle.d.cts

@@ -0,0 +1,49 @@
+import React from "react";
+
+//#region src/IconToggle.d.ts
+interface IconToggleProps extends Omit<React.ComponentProps<'button'>, 'onChange'> {
+  /**
+   * The checked/toggled state
+   */
+  checked?: boolean;
+  /**
+   * Default checked state for uncontrolled usage
+   */
+  defaultChecked?: boolean;
+  /**
+   * Called when the toggle state changes (controlled)
+   */
+  onCheckedChange?: (checked: boolean) => void;
+  /**
+   * Called when the toggle state changes (alternative handler)
+   */
+  onChange?: (checked: boolean) => void;
+  /**
+   * Icon to show when checked (true state)
+   * Can be a React component (like lucide-react icons) or SVG markup string
+   */
+  checkedIcon?: React.ReactNode | string;
+  /**
+   * Icon to show when unchecked (false state)
+   * Can be a React component (like lucide-react icons) or SVG markup string
+   */
+  uncheckedIcon?: React.ReactNode | string;
+  /**
+   * Size variant of the toggle button
+   * @default 'default'
+   */
+  size?: 'sm' | 'default' | 'lg';
+  /**
+   * Visual variant of the toggle button
+   * @default 'default'
+   */
+  variant?: 'default' | 'outline' | 'ghost';
+}
+/**
+ * IconToggle - A toggle button component with customizable icons for checked/unchecked states.
+ * Perfect for visibility toggles, theme switches, or any boolean state with visual feedback.
+ * Icons can be React components (like lucide-react icons) or SVG markup strings.
+ */
+declare const IconToggle: React.ForwardRefExoticComponent<Omit<IconToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { IconToggle, IconToggleProps };

package/dist/IconToggle.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+
+//#region src/IconToggle.d.ts
+interface IconToggleProps extends Omit<React.ComponentProps<'button'>, 'onChange'> {
+  /**
+   * The checked/toggled state
+   */
+  checked?: boolean;
+  /**
+   * Default checked state for uncontrolled usage
+   */
+  defaultChecked?: boolean;
+  /**
+   * Called when the toggle state changes (controlled)
+   */
+  onCheckedChange?: (checked: boolean) => void;
+  /**
+   * Called when the toggle state changes (alternative handler)
+   */
+  onChange?: (checked: boolean) => void;
+  /**
+   * Icon to show when checked (true state)
+   * Can be a React component (like lucide-react icons) or SVG markup string
+   */
+  checkedIcon?: React.ReactNode | string;
+  /**
+   * Icon to show when unchecked (false state)
+   * Can be a React component (like lucide-react icons) or SVG markup string
+   */
+  uncheckedIcon?: React.ReactNode | string;
+  /**
+   * Size variant of the toggle button
+   * @default 'default'
+   */
+  size?: 'sm' | 'default' | 'lg';
+  /**
+   * Visual variant of the toggle button
+   * @default 'default'
+   */
+  variant?: 'default' | 'outline' | 'ghost';
+}
+/**
+ * IconToggle - A toggle button component with customizable icons for checked/unchecked states.
+ * Perfect for visibility toggles, theme switches, or any boolean state with visual feedback.
+ * Icons can be React components (like lucide-react icons) or SVG markup strings.
+ */
+declare const IconToggle: React.ForwardRefExoticComponent<Omit<IconToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { IconToggle, IconToggleProps };

package/dist/IconToggle.js

@@ -0,0 +1,78 @@
+import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.js";
+import { cn } from "@pixpilot/shadcn";
+import React, { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/IconToggle.tsx
+/**
+* IconToggle - A toggle button component with customizable icons for checked/unchecked states.
+* Perfect for visibility toggles, theme switches, or any boolean state with visual feedback.
+* Icons can be React components (like lucide-react icons) or SVG markup strings.
+*/
+const IconToggle = React.forwardRef(({ checked: controlledChecked, defaultChecked = false, onCheckedChange, onChange, checkedIcon, uncheckedIcon, size = "default", variant = "default", className, disabled,...props }, ref) => {
+	const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
+	const isControlled = controlledChecked !== void 0;
+	const checked = isControlled ? controlledChecked : uncontrolledChecked;
+	const handleClick = useCallback((e) => {
+		if (disabled) return;
+		const newChecked = !checked;
+		if (!isControlled) setUncontrolledChecked(newChecked);
+		onCheckedChange?.(newChecked);
+		onChange?.(newChecked);
+		props.onClick?.(e);
+	}, [
+		checked,
+		disabled,
+		isControlled,
+		onChange,
+		onCheckedChange,
+		props
+	]);
+	const renderIcon = (icon) => {
+		if (icon === void 0 || icon === null) return null;
+		if (isSvgMarkupString(icon)) return /* @__PURE__ */ jsx("span", {
+			"data-slot": "svg-mask",
+			"aria-hidden": "true",
+			className: "inline-block h-4 w-4",
+			style: {
+				backgroundColor: "currentColor",
+				WebkitMaskImage: svgMarkupToMaskUrl(icon),
+				maskImage: svgMarkupToMaskUrl(icon),
+				WebkitMaskRepeat: "no-repeat",
+				maskRepeat: "no-repeat",
+				WebkitMaskPosition: "center",
+				maskPosition: "center",
+				WebkitMaskSize: "contain",
+				maskSize: "contain"
+			}
+		});
+		return icon;
+	};
+	const sizeClasses = {
+		sm: "size-7",
+		default: "size-9",
+		lg: "size-11"
+	};
+	const variantClasses = {
+		default: "bg-background border border-input hover:bg-accent hover:text-accent-foreground data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:hover:bg-primary/90",
+		outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground data-[state=checked]:border-primary data-[state=checked]:text-primary",
+		ghost: "hover:bg-accent hover:text-accent-foreground data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary"
+	};
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		role: "switch",
+		"aria-checked": checked,
+		"data-state": checked ? "checked" : "unchecked",
+		"data-slot": "icon-toggle",
+		disabled,
+		className: cn("inline-flex items-center justify-center rounded-md text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg:not([class*=\"size-\"])]:size-4 [&_svg]:shrink-0", sizeClasses[size], variantClasses[variant], className),
+		onClick: handleClick,
+		...props,
+		children: checked ? renderIcon(checkedIcon) : renderIcon(uncheckedIcon)
+	});
+});
+IconToggle.displayName = "IconToggle";
+
+//#endregion
+export { IconToggle };

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

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.cjs";
-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/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

@@ -31,6 +31,8 @@ require('./input/index.cjs');
 const require_LoadingOverlay = require('./LoadingOverlay.cjs');
 const require_IconPicker = require('./icon-selector/IconPicker.cjs');
 require('./icon-selector/index.cjs');
+const require_svg = require('./utils/svg.cjs');
+const require_IconToggle = require('./IconToggle.cjs');
 const require_Layout = require('./layout/Layout.cjs');
 const require_LayoutFooter = require('./layout/LayoutFooter.cjs');
 const require_LayoutHeader = require('./layout/LayoutHeader.cjs');
@@ -84,6 +86,7 @@ exports.DialogProvider = require_DialogProvider.DialogProvider;
 exports.FileUpload = require_FileUpload.FileUpload;
 exports.FileUploadInline = require_FileUploadInline.FileUploadInline;
 exports.IconPicker = require_IconPicker.IconPicker;
+exports.IconToggle = require_IconToggle.IconToggle;
 exports.Input = require_Input.Input;
 exports.Layout = require_Layout.Layout;
 exports.LayoutFooter = require_LayoutFooter.LayoutFooter;
@@ -110,7 +113,9 @@ exports.ThemeModeToggleButton = require_ThemeModeToggleButton.ThemeModeToggleBut
 exports.ThemeProvider = require_ThemeProvider.ThemeProvider;
 exports.Toaster = require_ToastProvider.Toaster;
 exports.cn = __pixpilot_shadcn.cn;
+exports.isSvgMarkupString = require_svg.isSvgMarkupString;
 exports.showConfirmDialog = require_confirmation_dialogs.showConfirmDialog;
+exports.svgMarkupToMaskUrl = require_svg.svgMarkupToMaskUrl;
 exports.toast = require_toast.toast;
 exports.toastError = require_toast.toastError;
 exports.toastInfo = require_toast.toastInfo;

package/dist/index.d.cts

@@ -30,6 +30,7 @@ import "./hooks/index.cjs";
 import { IconProvider, IconProviderLoader, IconProviderProps } from "./icon-selector/types.cjs";
 import { IconPicker, IconPickerProps, IconPickerVariant } from "./icon-selector/IconPicker.cjs";
 import "./icon-selector/index.cjs";
+import { IconToggle, IconToggleProps } from "./IconToggle.cjs";
 import { Input, InputProps } from "./input/Input.cjs";
 import "./input/index.cjs";
 import { Layout, LayoutProps } from "./layout/Layout.cjs";
@@ -66,5 +67,6 @@ import "./theme-toggle/index.cjs";
 import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.cjs";
 import { Toaster } from "./toast/ToastProvider.cjs";
 import "./toast/index.cjs";
+import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.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, RichTextEditorSlots, 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, Toaster, ToolbarItems, 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, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, 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, Toaster, ToolbarItems, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.d.ts

@@ -32,6 +32,7 @@ import "./hooks/index.js";
 import { IconProvider, IconProviderLoader, IconProviderProps } from "./icon-selector/types.js";
 import { IconPicker, IconPickerProps, IconPickerVariant } from "./icon-selector/IconPicker.js";
 import "./icon-selector/index.js";
+import { IconToggle, IconToggleProps } from "./IconToggle.js";
 import { Input, InputProps } from "./input/Input.js";
 import "./input/index.js";
 import { Layout, LayoutProps } from "./layout/Layout.js";
@@ -68,5 +69,6 @@ import "./theme-toggle/index.js";
 import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.js";
 import { Toaster } from "./toast/ToastProvider.js";
 import "./toast/index.js";
+import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.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, RichTextEditorSlots, 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, Toaster, ToolbarItems, 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, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, 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, Toaster, ToolbarItems, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.js

@@ -30,6 +30,8 @@ import "./input/index.js";
 import { LoadingOverlay } from "./LoadingOverlay.js";
 import { IconPicker } from "./icon-selector/IconPicker.js";
 import "./icon-selector/index.js";
+import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.js";
+import { IconToggle } from "./IconToggle.js";
 import { Layout } from "./layout/Layout.js";
 import { LayoutFooter } from "./layout/LayoutFooter.js";
 import { LayoutHeader } from "./layout/LayoutHeader.js";
@@ -64,4 +66,4 @@ import { Toaster } from "./toast/ToastProvider.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, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider, Toaster, 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, IconToggle, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider, Toaster, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/input/Input.d.cts

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

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/rich-text-editor/ToolbarButton.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_svg = require('../utils/svg.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let react = require("react");
@@ -7,14 +8,6 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/rich-text-editor/ToolbarButton.tsx
-function isSvgMarkupString(value) {
-	if (typeof value !== "string") return false;
-	const trimmed = value.trim();
-	return trimmed.startsWith("<svg") && trimmed.endsWith("</svg>");
-}
-function svgMarkupToMaskUrl(svgMarkup) {
-	return `url("data:image/svg+xml,${encodeURIComponent(svgMarkup).replace(/'/gu, "%27").replace(/"/gu, "%22")}")`;
-}
 const ToolbarButton = ({ onClick, isActive, disabled, className, children, tooltip }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
 	asChild: true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
@@ -27,14 +20,14 @@ const ToolbarButton = ({ onClick, isActive, disabled, className, children, toolt
 		onClick,
 		disabled,
 		className: (0, __pixpilot_shadcn.cn)("h-8 w-8 p-0", className),
-		children: isSvgMarkupString(children) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		children: require_svg.isSvgMarkupString(children) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"data-slot": "svg-mask",
 			"aria-hidden": "true",
 			className: "inline-block h-4 w-4",
 			style: {
 				backgroundColor: "currentColor",
-				WebkitMaskImage: svgMarkupToMaskUrl(children),
-				maskImage: svgMarkupToMaskUrl(children),
+				WebkitMaskImage: require_svg.svgMarkupToMaskUrl(children),
+				maskImage: require_svg.svgMarkupToMaskUrl(children),
 				WebkitMaskRepeat: "no-repeat",
 				maskRepeat: "no-repeat",
 				WebkitMaskPosition: "center",

package/dist/rich-text-editor/ToolbarButton.js

@@ -1,16 +1,9 @@
+import { isSvgMarkupString, svgMarkupToMaskUrl } from "../utils/svg.js";
 import { Button, Tooltip, TooltipContent, TooltipTrigger, cn } from "@pixpilot/shadcn";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/rich-text-editor/ToolbarButton.tsx
-function isSvgMarkupString(value) {
-	if (typeof value !== "string") return false;
-	const trimmed = value.trim();
-	return trimmed.startsWith("<svg") && trimmed.endsWith("</svg>");
-}
-function svgMarkupToMaskUrl(svgMarkup) {
-	return `url("data:image/svg+xml,${encodeURIComponent(svgMarkup).replace(/'/gu, "%27").replace(/"/gu, "%22")}")`;
-}
 const ToolbarButton = ({ onClick, isActive, disabled, className, children, tooltip }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 	asChild: true,
 	children: /* @__PURE__ */ jsx(Button, {

package/dist/utils/svg.cjs

@@ -0,0 +1,25 @@
+
+//#region src/utils/svg.ts
+/**
+* Checks if a value is an SVG markup string
+* @param value - The value to check
+* @returns True if the value is a string starting with '<svg' and ending with '</svg>'
+*/
+function isSvgMarkupString(value) {
+	if (typeof value !== "string") return false;
+	const trimmed = value.trim();
+	return trimmed.startsWith("<svg") && trimmed.endsWith("</svg>");
+}
+/**
+* Converts SVG markup string to a CSS mask-image data URL
+* Useful for rendering SVG strings as masked icons that inherit currentColor
+* @param svgMarkup - The SVG markup string
+* @returns A CSS url() value for use in mask-image properties
+*/
+function svgMarkupToMaskUrl(svgMarkup) {
+	return `url("data:image/svg+xml,${encodeURIComponent(svgMarkup).replace(/'/gu, "%27").replace(/"/gu, "%22")}")`;
+}
+
+//#endregion
+exports.isSvgMarkupString = isSvgMarkupString;
+exports.svgMarkupToMaskUrl = svgMarkupToMaskUrl;

package/dist/utils/svg.d.cts

@@ -0,0 +1,16 @@
+//#region src/utils/svg.d.ts
+/**
+ * Checks if a value is an SVG markup string
+ * @param value - The value to check
+ * @returns True if the value is a string starting with '<svg' and ending with '</svg>'
+ */
+declare function isSvgMarkupString(value: unknown): value is string;
+/**
+ * Converts SVG markup string to a CSS mask-image data URL
+ * Useful for rendering SVG strings as masked icons that inherit currentColor
+ * @param svgMarkup - The SVG markup string
+ * @returns A CSS url() value for use in mask-image properties
+ */
+declare function svgMarkupToMaskUrl(svgMarkup: string): string;
+//#endregion
+export { isSvgMarkupString, svgMarkupToMaskUrl };

package/dist/utils/svg.d.ts

@@ -0,0 +1,16 @@
+//#region src/utils/svg.d.ts
+/**
+ * Checks if a value is an SVG markup string
+ * @param value - The value to check
+ * @returns True if the value is a string starting with '<svg' and ending with '</svg>'
+ */
+declare function isSvgMarkupString(value: unknown): value is string;
+/**
+ * Converts SVG markup string to a CSS mask-image data URL
+ * Useful for rendering SVG strings as masked icons that inherit currentColor
+ * @param svgMarkup - The SVG markup string
+ * @returns A CSS url() value for use in mask-image properties
+ */
+declare function svgMarkupToMaskUrl(svgMarkup: string): string;
+//#endregion
+export { isSvgMarkupString, svgMarkupToMaskUrl };

package/dist/utils/svg.js

@@ -0,0 +1,23 @@
+//#region src/utils/svg.ts
+/**
+* Checks if a value is an SVG markup string
+* @param value - The value to check
+* @returns True if the value is a string starting with '<svg' and ending with '</svg>'
+*/
+function isSvgMarkupString(value) {
+	if (typeof value !== "string") return false;
+	const trimmed = value.trim();
+	return trimmed.startsWith("<svg") && trimmed.endsWith("</svg>");
+}
+/**
+* Converts SVG markup string to a CSS mask-image data URL
+* Useful for rendering SVG strings as masked icons that inherit currentColor
+* @param svgMarkup - The SVG markup string
+* @returns A CSS url() value for use in mask-image properties
+*/
+function svgMarkupToMaskUrl(svgMarkup) {
+	return `url("data:image/svg+xml,${encodeURIComponent(svgMarkup).replace(/'/gu, "%27").replace(/"/gu, "%22")}")`;
+}
+
+//#endregion
+export { isSvgMarkupString, svgMarkupToMaskUrl };

package/package.json

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