@pixpilot/shadcn-ui 0.35.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/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/rich-text-editor/RichTextEditor.cjs

@@ -6,6 +6,10 @@ 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 __tiptap_extension_link = require("@tiptap/extension-link");
+__tiptap_extension_link = require_rolldown_runtime.__toESM(__tiptap_extension_link);
+let __tiptap_extension_text_align = require("@tiptap/extension-text-align");
+__tiptap_extension_text_align = require_rolldown_runtime.__toESM(__tiptap_extension_text_align);
 let __tiptap_react = require("@tiptap/react");
 __tiptap_react = require_rolldown_runtime.__toESM(__tiptap_react);
 let __tiptap_starter_kit = require("@tiptap/starter-kit");
@@ -17,9 +21,14 @@ const defaultToolbarItems = [
 	"bold",
 	"italic",
 	"underline",
+	"link",
 	"strike",
 	"code",
 	"|",
+	"alignLeft",
+	"alignCenter",
+	"alignRight",
+	"|",
 	"heading1",
 	"heading2",
 	"heading3",
@@ -31,7 +40,7 @@ const defaultToolbarItems = [
 	"codeBlock"
 ];
 function useEditorProps(slots, customEditorProps) {
-	const defaultEditorProps = react.default.useMemo(() => ({ attributes: { class: (0, __pixpilot_shadcn.cn)("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:mt-8 [&_h1]:mb-4 [&_h1:first-child]:mt-0", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:mt-6 [&_h2]:mb-3 [&_h2:first-child]:mt-0", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:mt-4 [&_h3]:mb-2 [&_h3:first-child]:mt-0", "[&_p]:mb-3", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-3", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-3", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote:first-child]:mt-0", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono [&_pre]:mb-4", "[&_*:last-child]:mb-0", slots?.content?.className) } }), [slots]);
+	const defaultEditorProps = react.default.useMemo(() => ({ attributes: { class: (0, __pixpilot_shadcn.cn)("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:mt-8 [&_h1]:mb-4 [&_h1:first-child]:mt-0", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:mt-6 [&_h2]:mb-3 [&_h2:first-child]:mt-0", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:mt-4 [&_h3]:mb-2 [&_h3:first-child]:mt-0", "[&_p]:mb-3", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-3", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-3", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote:first-child]:mt-0", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono [&_pre]:mb-4", "[&_a]:text-blue-500 [&_a]:hover:text-blue-600 [&_a]:cursor-pointer [&_a]:underline [&_a]:underline-offset-2 ", "[&_*:last-child]:mb-0", slots?.content?.className) } }), [slots]);
 	return react.default.useMemo(() => ({
 		...defaultEditorProps,
 		...customEditorProps,
@@ -51,7 +60,11 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 		onChangeRef.current?.(props.editor.getHTML());
 	}, []);
 	const editorInstance = (0, __tiptap_react.useEditor)({
-		extensions: [__tiptap_starter_kit.default].concat(extensions),
+		extensions: react.default.useMemo(() => [
+			__tiptap_starter_kit.default,
+			__tiptap_extension_link.default,
+			__tiptap_extension_text_align.default.configure({ types: ["heading", "paragraph"] })
+		].concat(extensions), [extensions]),
 		content: value,
 		editable,
 		onUpdate: handleChange,

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

@@ -2,6 +2,8 @@ import { RichTextEditorToolbar } from "./RichTextEditorToolbar.js";
 import { cn } from "@pixpilot/shadcn";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "@tiptap/extension-link";
+import TextAlign from "@tiptap/extension-text-align";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 
@@ -11,9 +13,14 @@ const defaultToolbarItems = [
 	"bold",
 	"italic",
 	"underline",
+	"link",
 	"strike",
 	"code",
 	"|",
+	"alignLeft",
+	"alignCenter",
+	"alignRight",
+	"|",
 	"heading1",
 	"heading2",
 	"heading3",
@@ -25,7 +32,7 @@ const defaultToolbarItems = [
 	"codeBlock"
 ];
 function useEditorProps(slots, customEditorProps) {
-	const defaultEditorProps = React.useMemo(() => ({ attributes: { class: cn("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:mt-8 [&_h1]:mb-4 [&_h1:first-child]:mt-0", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:mt-6 [&_h2]:mb-3 [&_h2:first-child]:mt-0", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:mt-4 [&_h3]:mb-2 [&_h3:first-child]:mt-0", "[&_p]:mb-3", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-3", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-3", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote:first-child]:mt-0", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono [&_pre]:mb-4", "[&_*:last-child]:mb-0", slots?.content?.className) } }), [slots]);
+	const defaultEditorProps = React.useMemo(() => ({ attributes: { class: cn("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:mt-8 [&_h1]:mb-4 [&_h1:first-child]:mt-0", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:mt-6 [&_h2]:mb-3 [&_h2:first-child]:mt-0", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:mt-4 [&_h3]:mb-2 [&_h3:first-child]:mt-0", "[&_p]:mb-3", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-3", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-3", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote:first-child]:mt-0", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono [&_pre]:mb-4", "[&_a]:text-blue-500 [&_a]:hover:text-blue-600 [&_a]:cursor-pointer [&_a]:underline [&_a]:underline-offset-2 ", "[&_*:last-child]:mb-0", slots?.content?.className) } }), [slots]);
 	return React.useMemo(() => ({
 		...defaultEditorProps,
 		...customEditorProps,
@@ -45,7 +52,11 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 		onChangeRef.current?.(props.editor.getHTML());
 	}, []);
 	const editorInstance = useEditor({
-		extensions: [StarterKit].concat(extensions),
+		extensions: React.useMemo(() => [
+			StarterKit,
+			Link,
+			TextAlign.configure({ types: ["heading", "paragraph"] })
+		].concat(extensions), [extensions]),
 		content: value,
 		editable,
 		onUpdate: handleChange,

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/rich-text-editor/predefined-toolbar-items.cjs

@@ -24,6 +24,12 @@ const predefinedToolbarItems = {
 		onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
 		isActive: (editor) => editor.isActive("underline")
 	},
+	link: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Link, { className: "h-4 w-4" }),
+		tooltip: "Link",
+		onClick: (editor) => editor.chain().focus().toggleLink().run(),
+		isActive: (editor) => editor.isActive("link")
+	},
 	strike: {
 		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Strikethrough, { className: "h-4 w-4" }),
 		tooltip: "Strikethrough",
@@ -77,6 +83,24 @@ const predefinedToolbarItems = {
 		tooltip: "Code Block",
 		onClick: (editor) => editor.chain().focus().toggleCodeBlock().run(),
 		isActive: (editor) => editor.isActive("codeBlock")
+	},
+	alignLeft: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlignLeft, { className: "h-4 w-4" }),
+		tooltip: "Align Left",
+		onClick: (editor) => editor.chain().focus().setTextAlign("left").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "left" })
+	},
+	alignCenter: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlignCenter, { className: "h-4 w-4" }),
+		tooltip: "Align Center",
+		onClick: (editor) => editor.chain().focus().setTextAlign("center").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "center" })
+	},
+	alignRight: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlignRight, { className: "h-4 w-4" }),
+		tooltip: "Align Right",
+		onClick: (editor) => editor.chain().focus().setTextAlign("right").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "right" })
 	}
 };
 

package/dist/rich-text-editor/predefined-toolbar-items.js

@@ -1,4 +1,4 @@
-import { Bold, Code, Code2, Heading1, Heading2, Heading3, Italic, List, ListOrdered, Quote, Strikethrough, Underline } from "lucide-react";
+import { AlignCenter, AlignLeft, AlignRight, Bold, Code, Code2, Heading1, Heading2, Heading3, Italic, Link, List, ListOrdered, Quote, Strikethrough, Underline } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/rich-text-editor/predefined-toolbar-items.tsx
@@ -21,6 +21,12 @@ const predefinedToolbarItems = {
 		onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
 		isActive: (editor) => editor.isActive("underline")
 	},
+	link: {
+		icon: /* @__PURE__ */ jsx(Link, { className: "h-4 w-4" }),
+		tooltip: "Link",
+		onClick: (editor) => editor.chain().focus().toggleLink().run(),
+		isActive: (editor) => editor.isActive("link")
+	},
 	strike: {
 		icon: /* @__PURE__ */ jsx(Strikethrough, { className: "h-4 w-4" }),
 		tooltip: "Strikethrough",
@@ -74,6 +80,24 @@ const predefinedToolbarItems = {
 		tooltip: "Code Block",
 		onClick: (editor) => editor.chain().focus().toggleCodeBlock().run(),
 		isActive: (editor) => editor.isActive("codeBlock")
+	},
+	alignLeft: {
+		icon: /* @__PURE__ */ jsx(AlignLeft, { className: "h-4 w-4" }),
+		tooltip: "Align Left",
+		onClick: (editor) => editor.chain().focus().setTextAlign("left").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "left" })
+	},
+	alignCenter: {
+		icon: /* @__PURE__ */ jsx(AlignCenter, { className: "h-4 w-4" }),
+		tooltip: "Align Center",
+		onClick: (editor) => editor.chain().focus().setTextAlign("center").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "center" })
+	},
+	alignRight: {
+		icon: /* @__PURE__ */ jsx(AlignRight, { className: "h-4 w-4" }),
+		tooltip: "Align Right",
+		onClick: (editor) => editor.chain().focus().setTextAlign("right").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "right" })
 	}
 };
 

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeDropdown.d.ts
 interface ThemeModeDropdownProps {
@@ -17,7 +17,7 @@ interface ThemeModeDropdownProps {
  * Provides Light / Dark / System options.
  * Pure component - requires themeValue and onChange props.
  */
-declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime9.JSX.Element;
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime10.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
@@ -25,7 +25,7 @@ interface ThemeModeSwitchInsideProps {
  * Icons are embedded within the switch control.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime10.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime11.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
 interface ThemeModeSwitchOutsideProps {
@@ -22,7 +22,7 @@ interface ThemeModeSwitchOutsideProps {
  * Icons flank the switch control on either side.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime11.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime12.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
@@ -13,7 +13,7 @@ interface ThemeModeToggleButtonProps {
  * Light/Dark toggle button.
  * Pure component - toggles between light and dark.
  */
-declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime12.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime9.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

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.35.0",
+  "version": "0.37.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -34,10 +34,12 @@
     "@iconify/react": "^6.0.2",
     "@pixpilot/hash": "^0.0.0",
     "@tailwindcss/typography": "^0.5.19",
-    "@tanstack/react-virtual": "^3.13.13",
-    "@tiptap/core": "^3.13.0",
-    "@tiptap/react": "^3.13.0",
-    "@tiptap/starter-kit": "^3.13.0",
+    "@tanstack/react-virtual": "^3.13.18",
+    "@tiptap/core": "^3.16.0",
+    "@tiptap/extension-link": "^3.16.0",
+    "@tiptap/extension-text-align": "^3.16.0",
+    "@tiptap/react": "^3.16.0",
+    "@tiptap/starter-kit": "^3.16.0",
     "class-variance-authority": "^0.7.1",
     "lucide-react": "0.553.0",
     "next-themes": "0.4.6",
@@ -57,9 +59,9 @@
     "react-dom": "19.2.0",
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
+    "@internal/eslint-config": "0.3.0",
     "@internal/hooks": "0.0.0",
     "@internal/prettier-config": "0.0.1",
-    "@internal/eslint-config": "0.3.0",
     "@internal/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"