@pixpilot/shadcn-ui 1.23.0 → 1.24.0

package/dist/slider/SliderInput.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../utils/get-id.cjs');
 const require_use_controlled = require('../hooks/src/use-controlled.cjs');
 require('../hooks/src/index.cjs');
 const require_Input = require('../input/Input.cjs');
-const require_get_id = require('../utils/get-id.cjs');
 const require_Slider = require('./Slider.cjs');
 require('../index.cjs');
 let react = require("react");

package/dist/slider/SliderInput.js

@@ -1,7 +1,7 @@
+import { getId } from "../utils/get-id.js";
 import useControlled from "../hooks/src/use-controlled.js";
 import "../hooks/src/index.js";
 import { Input } from "../input/Input.js";
-import { getId } from "../utils/get-id.js";
 import { Slider } from "./Slider.js";
 import { cn } from "../index.js";
 import React, { createElement } from "react";

package/dist/slider/SliderSelect.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../utils/get-id.cjs');
 const require_use_controlled = require('../hooks/src/use-controlled.cjs');
 require('../hooks/src/index.cjs');
-const require_get_id = require('../utils/get-id.cjs');
 const require_Select = require('../Select.cjs');
 const require_Slider = require('./Slider.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");

package/dist/slider/SliderSelect.js

@@ -1,6 +1,6 @@
+import { getId } from "../utils/get-id.js";
 import useControlled from "../hooks/src/use-controlled.js";
 import "../hooks/src/index.js";
-import { getId } from "../utils/get-id.js";
 import { Select as Select$1 } from "../Select.js";
 import { Slider as Slider$1 } from "./Slider.js";
 import { cn } from "@pixpilot/shadcn";

package/dist/tags-input/TagsInput.cjs

@@ -30,7 +30,7 @@ const EMPTY_OPTIONS = [];
 * - Options support with dropdown (like Select)
 * - freeSolo mode for custom tags (like MUI Autocomplete)
 */
-function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate, addButtonVisibility = "touch" }) {
+function TagsInput({ id, value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate, addButtonVisibility = "touch" }) {
 	const [open, setOpen] = (0, react.useState)(false);
 	const [searchValue, setSearchValue] = (0, react.useState)("");
 	const [freeInputValue, setFreeInputValue] = (0, react.useState)("");
@@ -134,6 +134,7 @@ function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, fre
 		value
 	]);
 	if (!hasOptions) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TagsInputInline.TagsInputInline, {
+		id,
 		label,
 		className,
 		disabled,
@@ -168,6 +169,7 @@ function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, fre
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "w-full",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TagsInputInline.TagsInputInline, {
+						id,
 						label,
 						showLabel: false,
 						disabled,
@@ -245,6 +247,7 @@ function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, fre
 					value: searchValue,
 					loop: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CommandOptionList.CommandOptionList, {
+						id,
 						options: filteredOptions,
 						value,
 						onChange: handleSelectOption,

package/dist/tags-input/TagsInput.d.cts

@@ -1,8 +1,9 @@
 import { CommandOptionListItem } from "../CommandOptionList.cjs";
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInput.d.ts
 interface TagsInputProps {
+  id?: string;
   value?: Array<string | number>;
   onChange?: (value: Array<string | number>) => void;
   options?: CommandOptionListItem[];
@@ -39,6 +40,7 @@ interface TagsInputProps {
  * - freeSolo mode for custom tags (like MUI Autocomplete)
  */
 declare function TagsInput({
+  id,
   value,
   onChange,
   options,
@@ -57,6 +59,6 @@ declare function TagsInput({
   addOnTab,
   onValidate,
   addButtonVisibility
-}: TagsInputProps): react_jsx_runtime18.JSX.Element;
+}: TagsInputProps): react_jsx_runtime15.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

package/dist/tags-input/TagsInput.d.ts

@@ -1,8 +1,9 @@
 import { CommandOptionListItem } from "../CommandOptionList.js";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInput.d.ts
 interface TagsInputProps {
+  id?: string;
   value?: Array<string | number>;
   onChange?: (value: Array<string | number>) => void;
   options?: CommandOptionListItem[];
@@ -39,6 +40,7 @@ interface TagsInputProps {
  * - freeSolo mode for custom tags (like MUI Autocomplete)
  */
 declare function TagsInput({
+  id,
   value,
   onChange,
   options,
@@ -57,6 +59,6 @@ declare function TagsInput({
   addOnTab,
   onValidate,
   addButtonVisibility
-}: TagsInputProps): react_jsx_runtime15.JSX.Element;
+}: TagsInputProps): react_jsx_runtime16.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

package/dist/tags-input/TagsInput.js

@@ -26,7 +26,7 @@ const EMPTY_OPTIONS = [];
 * - Options support with dropdown (like Select)
 * - freeSolo mode for custom tags (like MUI Autocomplete)
 */
-function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate, addButtonVisibility = "touch" }) {
+function TagsInput({ id, value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate, addButtonVisibility = "touch" }) {
 	const [open, setOpen] = useState(false);
 	const [searchValue, setSearchValue] = useState("");
 	const [freeInputValue, setFreeInputValue] = useState("");
@@ -130,6 +130,7 @@ function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, fre
 		value
 	]);
 	if (!hasOptions) return /* @__PURE__ */ jsx(TagsInputInline, {
+		id,
 		label,
 		className,
 		disabled,
@@ -164,6 +165,7 @@ function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, fre
 				children: /* @__PURE__ */ jsx("div", {
 					className: "w-full",
 					children: /* @__PURE__ */ jsx(TagsInputInline, {
+						id,
 						label,
 						showLabel: false,
 						disabled,
@@ -241,6 +243,7 @@ function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, fre
 					value: searchValue,
 					loop: true,
 					children: /* @__PURE__ */ jsx(CommandOptionList, {
+						id,
 						options: filteredOptions,
 						value,
 						onChange: handleSelectOption,

package/dist/tags-input/TagsInputInline.cjs

@@ -2,6 +2,7 @@
 
 
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../utils/get-id.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let lucide_react = require("lucide-react");
@@ -12,7 +13,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/tags-input/TagsInputInline.tsx
-function TagsInputInline({ label, showLabel = true, className, disabled = false, editable, max, onValueChange, onValidate, readOnly = false, value, delimiter, addOnPaste, addOnTab, items, onListClick, inputRef, inputPlaceholder, inputValue, onInputFocus, onInputChange, onInputKeyDown, onInputMouseDown, addButtonVisibility = "touch", slots, canAddCurrentValue = false, onAddCurrentInput, showClear = false }) {
+function TagsInputInline({ id, label, showLabel = true, className, disabled = false, editable, max, onValueChange, onValidate, readOnly = false, value, delimiter, addOnPaste, addOnTab, items, onListClick, inputRef, inputPlaceholder, inputValue, onInputFocus, onInputChange, onInputKeyDown, onInputMouseDown, addButtonVisibility = "touch", slots, canAddCurrentValue = false, onAddCurrentInput, showClear = false }) {
 	const addButtonVisibilityClassName = (0, react.useMemo)(() => {
 		if (addButtonVisibility === "always") return "inline-flex";
 		if (addButtonVisibility === "touch") return "hidden pointer-coarse:inline-flex";
@@ -45,10 +46,12 @@ function TagsInputInline({ label, showLabel = true, className, disabled = false,
 					items.map((item) => /* @__PURE__ */ (0, react.createElement)(__pixpilot_shadcn.TagsInputInLineItem, {
 						...slots?.item || {},
 						key: item.key,
+						id: require_get_id.getId(id, `item-${item.value}`),
 						value: item.value
 					}, item.label)),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineInput, {
 						...slots?.input || {},
+						id,
 						ref: inputRef,
 						placeholder: inputPlaceholder,
 						value: inputValue,
@@ -59,6 +62,7 @@ function TagsInputInline({ label, showLabel = true, className, disabled = false,
 					}),
 					addButtonVisibility !== "never" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
 						...slots?.addButton,
+						id: require_get_id.getId(id, "add-button"),
 						type: "button",
 						size: "icon",
 						variant: "ghost",
@@ -72,7 +76,10 @@ function TagsInputInline({ label, showLabel = true, className, disabled = false,
 					}) : null
 				]
 			}),
-			showClear ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineClear, { ...slots?.clear || {} }) : null
+			showClear ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineClear, {
+				id: require_get_id.getId(id, "clear-button"),
+				...slots?.clear || {}
+			}) : null
 		]
 	});
 }

package/dist/tags-input/TagsInputInline.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 import { ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
 
 //#region src/tags-input/TagsInputInline.d.ts
@@ -8,6 +8,7 @@ interface TagsInputInlineItem {
   label: string;
 }
 interface TagsInputInlineProps {
+  id?: string;
   label?: string;
   showLabel?: boolean;
   className?: string;
@@ -48,6 +49,7 @@ interface TagsInputInlineProps {
   showClear?: boolean;
 }
 declare function TagsInputInline({
+  id,
   label,
   showLabel,
   className,
@@ -75,6 +77,6 @@ declare function TagsInputInline({
   canAddCurrentValue,
   onAddCurrentInput,
   showClear
-}: TagsInputInlineProps): react_jsx_runtime19.JSX.Element;
+}: TagsInputInlineProps): react_jsx_runtime16.JSX.Element;
 //#endregion
 export { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps };

package/dist/tags-input/TagsInputInline.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInputInline.d.ts
 interface TagsInputInlineItem {
@@ -8,6 +8,7 @@ interface TagsInputInlineItem {
   label: string;
 }
 interface TagsInputInlineProps {
+  id?: string;
   label?: string;
   showLabel?: boolean;
   className?: string;
@@ -48,6 +49,7 @@ interface TagsInputInlineProps {
   showClear?: boolean;
 }
 declare function TagsInputInline({
+  id,
   label,
   showLabel,
   className,
@@ -75,6 +77,6 @@ declare function TagsInputInline({
   canAddCurrentValue,
   onAddCurrentInput,
   showClear
-}: TagsInputInlineProps): react_jsx_runtime14.JSX.Element;
+}: TagsInputInlineProps): react_jsx_runtime15.JSX.Element;
 //#endregion
 export { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps };

package/dist/tags-input/TagsInputInline.js

@@ -1,13 +1,14 @@
 'use client';
 
 
+import { getId } from "../utils/get-id.js";
 import { Button, TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot, cn } from "@pixpilot/shadcn";
 import { Plus } from "lucide-react";
 import { createElement, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInputInline.tsx
-function TagsInputInline({ label, showLabel = true, className, disabled = false, editable, max, onValueChange, onValidate, readOnly = false, value, delimiter, addOnPaste, addOnTab, items, onListClick, inputRef, inputPlaceholder, inputValue, onInputFocus, onInputChange, onInputKeyDown, onInputMouseDown, addButtonVisibility = "touch", slots, canAddCurrentValue = false, onAddCurrentInput, showClear = false }) {
+function TagsInputInline({ id, label, showLabel = true, className, disabled = false, editable, max, onValueChange, onValidate, readOnly = false, value, delimiter, addOnPaste, addOnTab, items, onListClick, inputRef, inputPlaceholder, inputValue, onInputFocus, onInputChange, onInputKeyDown, onInputMouseDown, addButtonVisibility = "touch", slots, canAddCurrentValue = false, onAddCurrentInput, showClear = false }) {
 	const addButtonVisibilityClassName = useMemo(() => {
 		if (addButtonVisibility === "always") return "inline-flex";
 		if (addButtonVisibility === "touch") return "hidden pointer-coarse:inline-flex";
@@ -40,10 +41,12 @@ function TagsInputInline({ label, showLabel = true, className, disabled = false,
 					items.map((item) => /* @__PURE__ */ createElement(TagsInputInLineItem, {
 						...slots?.item || {},
 						key: item.key,
+						id: getId(id, `item-${item.value}`),
 						value: item.value
 					}, item.label)),
 					/* @__PURE__ */ jsx(TagsInputInLineInput, {
 						...slots?.input || {},
+						id,
 						ref: inputRef,
 						placeholder: inputPlaceholder,
 						value: inputValue,
@@ -54,6 +57,7 @@ function TagsInputInline({ label, showLabel = true, className, disabled = false,
 					}),
 					addButtonVisibility !== "never" ? /* @__PURE__ */ jsxs(Button, {
 						...slots?.addButton,
+						id: getId(id, "add-button"),
 						type: "button",
 						size: "icon",
 						variant: "ghost",
@@ -67,7 +71,10 @@ function TagsInputInline({ label, showLabel = true, className, disabled = false,
 					}) : null
 				]
 			}),
-			showClear ? /* @__PURE__ */ jsx(TagsInputInLineClear, { ...slots?.clear || {} }) : null
+			showClear ? /* @__PURE__ */ jsx(TagsInputInLineClear, {
+				id: getId(id, "clear-button"),
+				...slots?.clear || {}
+			}) : null
 		]
 	});
 }

package/dist/theme-toggle/ThemeModeDropdown.cjs

@@ -2,6 +2,7 @@
 
 
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../utils/get-id.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let lucide_react = require("lucide-react");
@@ -18,11 +19,12 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 * Pure component - requires themeValue and onChange props.
 */
 function ThemeModeDropdown(props) {
-	const { align = "end", className, themeValue, onChange, value, disabled } = props;
+	const { id, align = "end", className, themeValue, onChange, value, disabled } = props;
 	const isDark = value === "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, {
+			id,
 			variant: "outline",
 			size: "icon",
 			className: (0, __pixpilot_shadcn.cn)(className),
@@ -40,6 +42,7 @@ function ThemeModeDropdown(props) {
 		align,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
+				id: require_get_id.getId(id, "option-light"),
 				onClick: () => onChange?.("light"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sun, { className: "h-4 w-4 mr-2" }),
@@ -51,6 +54,7 @@ function ThemeModeDropdown(props) {
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
+				id: require_get_id.getId(id, "option-dark"),
 				onClick: () => onChange?.("dark"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Moon, { className: "h-4 w-4 mr-2" }),
@@ -62,6 +66,7 @@ function ThemeModeDropdown(props) {
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
+				id: require_get_id.getId(id, "option-system"),
 				onClick: () => onChange?.("system"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Monitor, { className: "h-4 w-4 mr-2" }),

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

@@ -1,7 +1,8 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeDropdown.d.ts
 interface ThemeModeDropdownProps {
+  id?: string;
   align?: 'start' | 'center' | 'end';
   className?: string;
   /** Current theme selection ("light" | "dark" | "system") */
@@ -17,7 +18,7 @@ interface ThemeModeDropdownProps {
  * Provides Light / Dark / System options.
  * Pure component - requires themeValue and onChange props.
  */
-declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime12.JSX.Element;
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime18.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

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

@@ -2,6 +2,7 @@ import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeDropdown.d.ts
 interface ThemeModeDropdownProps {
+  id?: string;
   align?: 'start' | 'center' | 'end';
   className?: string;
   /** Current theme selection ("light" | "dark" | "system") */

package/dist/theme-toggle/ThemeModeDropdown.js

@@ -1,6 +1,7 @@
 'use client';
 
 
+import { getId } from "../utils/get-id.js";
 import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, cn } from "@pixpilot/shadcn";
 import { Check, Monitor, Moon, Sun } from "lucide-react";
 import React from "react";
@@ -13,11 +14,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Pure component - requires themeValue and onChange props.
 */
 function ThemeModeDropdown(props) {
-	const { align = "end", className, themeValue, onChange, value, disabled } = props;
+	const { id, align = "end", className, themeValue, onChange, value, disabled } = props;
 	const isDark = value === "dark";
 	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs(Button, {
+			id,
 			variant: "outline",
 			size: "icon",
 			className: cn(className),
@@ -35,6 +37,7 @@ function ThemeModeDropdown(props) {
 		align,
 		children: [
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				id: getId(id, "option-light"),
 				onClick: () => onChange?.("light"),
 				children: [
 					/* @__PURE__ */ jsx(Sun, { className: "h-4 w-4 mr-2" }),
@@ -46,6 +49,7 @@ function ThemeModeDropdown(props) {
 				]
 			}),
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				id: getId(id, "option-dark"),
 				onClick: () => onChange?.("dark"),
 				children: [
 					/* @__PURE__ */ jsx(Moon, { className: "h-4 w-4 mr-2" }),
@@ -57,6 +61,7 @@ function ThemeModeDropdown(props) {
 				]
 			}),
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				id: getId(id, "option-system"),
 				onClick: () => onChange?.("system"),
 				children: [
 					/* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4 mr-2" }),

package/dist/theme-toggle/ThemeModeSwitchInside.cjs

@@ -37,7 +37,7 @@ const SIZE_STYLES = {
 * Pure component - requires value and onChange props.
 */
 function ThemeModeSwitchInside(props) {
-	const { showIcons = true, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
+	const { showIcons = true, id, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
 	const sizeStyles = SIZE_STYLES[size];
 	const iconSize = iconSizeProp ?? sizeStyles.defaultIconSize ?? DEFAULT_ICON_SIZE;
 	const isDark = value === "dark";
@@ -45,6 +45,7 @@ function ThemeModeSwitchInside(props) {
 		onChange?.(checked ? "dark" : "light");
 	};
 	if (!showIcons) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
+		id,
 		checked: isDark,
 		onCheckedChange,
 		disabled,
@@ -57,6 +58,7 @@ function ThemeModeSwitchInside(props) {
 		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, {
+				id,
 				checked: isDark,
 				onCheckedChange,
 				disabled,

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

@@ -1,8 +1,9 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
 interface ThemeModeSwitchInsideProps {
+  id?: string;
   /** Whether to render the sun/moon icons at all. */
   showIcons?: boolean;
   /** Visual size of the toggle pill. */
@@ -25,7 +26,7 @@ interface ThemeModeSwitchInsideProps {
  * Icons are embedded within the switch control.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime11.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime19.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

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

@@ -3,6 +3,7 @@ import * as react_jsx_runtime19 from "react/jsx-runtime";
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
 interface ThemeModeSwitchInsideProps {
+  id?: string;
   /** Whether to render the sun/moon icons at all. */
   showIcons?: boolean;
   /** Visual size of the toggle pill. */

package/dist/theme-toggle/ThemeModeSwitchInside.js

@@ -33,7 +33,7 @@ const SIZE_STYLES = {
 * Pure component - requires value and onChange props.
 */
 function ThemeModeSwitchInside(props) {
-	const { showIcons = true, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
+	const { showIcons = true, id, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
 	const sizeStyles = SIZE_STYLES[size];
 	const iconSize = iconSizeProp ?? sizeStyles.defaultIconSize ?? DEFAULT_ICON_SIZE;
 	const isDark = value === "dark";
@@ -41,6 +41,7 @@ function ThemeModeSwitchInside(props) {
 		onChange?.(checked ? "dark" : "light");
 	};
 	if (!showIcons) return /* @__PURE__ */ jsx(Switch, {
+		id,
 		checked: isDark,
 		onCheckedChange,
 		disabled,
@@ -53,6 +54,7 @@ function ThemeModeSwitchInside(props) {
 		className: cn(TOGGLE_WRAPPER_CLASS_NAME, sizeStyles.wrapper, disabled && "opacity-50", className),
 		children: [
 			/* @__PURE__ */ jsx(Switch, {
+				id,
 				checked: isDark,
 				onCheckedChange,
 				disabled,

package/dist/theme-toggle/ThemeModeSwitchOutside.cjs

@@ -19,12 +19,13 @@ const DEFAULT_ICON_SIZE = 16;
 * Pure component - requires value and onChange props.
 */
 function ThemeModeSwitchOutside(props) {
-	const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
+	const { showIcons = true, id, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
 	const isDark = value === "dark";
 	const onCheckedChange = (checked) => {
 		onChange?.(checked ? "dark" : "light");
 	};
 	if (!showIcons) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
+		id,
 		checked: isDark,
 		onCheckedChange,
 		disabled,
@@ -42,6 +43,7 @@ function ThemeModeSwitchOutside(props) {
 				}
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
+				id,
 				checked: isDark,
 				onCheckedChange,
 				disabled,

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

@@ -1,7 +1,8 @@
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
 interface ThemeModeSwitchOutsideProps {
+  id?: string;
   /** Whether to render the sun/moon icons at all. */
   showIcons?: boolean;
   /** Icon size in pixels. */
@@ -22,7 +23,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_runtime13.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime20.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

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

@@ -2,6 +2,7 @@ import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
 interface ThemeModeSwitchOutsideProps {
+  id?: string;
   /** Whether to render the sun/moon icons at all. */
   showIcons?: boolean;
   /** Icon size in pixels. */

package/dist/theme-toggle/ThemeModeSwitchOutside.js

@@ -14,12 +14,13 @@ const DEFAULT_ICON_SIZE = 16;
 * Pure component - requires value and onChange props.
 */
 function ThemeModeSwitchOutside(props) {
-	const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
+	const { showIcons = true, id, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
 	const isDark = value === "dark";
 	const onCheckedChange = (checked) => {
 		onChange?.(checked ? "dark" : "light");
 	};
 	if (!showIcons) return /* @__PURE__ */ jsx(Switch, {
+		id,
 		checked: isDark,
 		onCheckedChange,
 		disabled,
@@ -37,6 +38,7 @@ function ThemeModeSwitchOutside(props) {
 				}
 			}),
 			/* @__PURE__ */ jsx(Switch, {
+				id,
 				checked: isDark,
 				onCheckedChange,
 				disabled,

package/dist/theme-toggle/ThemeModeToggleButton.cjs

@@ -17,7 +17,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 * Pure component - toggles between light and dark.
 */
 function ThemeModeToggleButton(props) {
-	const { className, value, onChange, disabled } = props;
+	const { id, className, value, onChange, disabled } = props;
 	const toggleTheme = react.default.useCallback(() => {
 		if (value === "dark") {
 			onChange?.("light");
@@ -26,6 +26,7 @@ function ThemeModeToggleButton(props) {
 		onChange?.("dark");
 	}, [value, onChange]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+		id,
 		variant: "secondary",
 		size: "icon",
 		className: (0, __pixpilot_shadcn.cn)("group/toggle size-8", className),

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

@@ -1,7 +1,8 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
+  id?: string;
   className?: string;
   /** The resolved theme value ("light" | "dark") */
   value?: string;
@@ -13,7 +14,7 @@ interface ThemeModeToggleButtonProps {
  * Light/Dark toggle button.
  * Pure component - toggles between light and dark.
  */
-declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime14.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime17.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

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

@@ -2,6 +2,7 @@ import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
+  id?: string;
   className?: string;
   /** The resolved theme value ("light" | "dark") */
   value?: string;