@pixpilot/shadcn-ui 1.23.0 → 1.25.0

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

@@ -1,7 +1,8 @@
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime19 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_runtime20.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime19.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

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

@@ -1,7 +1,8 @@
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime18 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_runtime17.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime18.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeToggleButton.js

@@ -12,7 +12,7 @@ import { jsx, jsxs } from "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.useCallback(() => {
 		if (value === "dark") {
 			onChange?.("light");
@@ -21,6 +21,7 @@ function ThemeModeToggleButton(props) {
 		onChange?.("dark");
 	}, [value, onChange]);
 	return /* @__PURE__ */ jsxs(Button, {
+		id,
 		variant: "secondary",
 		size: "icon",
 		className: cn("group/toggle size-8", className),

package/dist/toast/AlertToast.cjs

@@ -11,7 +11,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/toast/AlertToast.tsx
 const AlertToast = (props) => {
-	const { duration, onClose,...rest } = props;
+	const { duration, onClose, id,...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.Alert, {
 		icon: true,
 		...rest,
@@ -19,6 +19,7 @@ const AlertToast = (props) => {
 		children: onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex items-start pt-0.5 pl-1",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				id,
 				type: "button",
 				className: "cursor-pointer opacity-80 transition-opacity hover:opacity-100",
 				onClick: onClose,

package/dist/toast/AlertToast.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/toast/AlertToast.tsx
 const AlertToast = (props) => {
-	const { duration, onClose,...rest } = props;
+	const { duration, onClose, id,...rest } = props;
 	return /* @__PURE__ */ jsx(Alert$1, {
 		icon: true,
 		...rest,
@@ -14,6 +14,7 @@ const AlertToast = (props) => {
 		children: onClose && /* @__PURE__ */ jsx("div", {
 			className: "flex items-start pt-0.5 pl-1",
 			children: /* @__PURE__ */ jsxs("button", {
+				id,
 				type: "button",
 				className: "cursor-pointer opacity-80 transition-opacity hover:opacity-100",
 				onClick: onClose,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "1.23.0",
+  "version": "1.25.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -48,7 +48,7 @@
     "pretty-bytes": "^7.1.0",
     "react-responsive": "^10.0.1",
     "sonner": "2.0.7",
-    "@pixpilot/shadcn": "1.2.7"
+    "@pixpilot/shadcn": "1.3.0"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.18",
@@ -64,11 +64,11 @@
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
     "@internal/eslint-config": "0.3.0",
-    "@internal/prettier-config": "0.0.1",
     "@internal/hooks": "0.0.0",
+    "@internal/prettier-config": "0.0.1",
     "@internal/tsconfig": "0.1.0",
-    "@internal/tsdown-config": "0.1.0",
-    "@internal/vitest-config": "0.1.0"
+    "@internal/vitest-config": "0.1.0",
+    "@internal/tsdown-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",
   "scripts": {