@pixpilot/shadcn-ui 0.37.2 → 0.38.1

package/dist/ColorSelect.d.ts

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

package/dist/ContentCard.d.ts

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

package/dist/DatePicker.d.ts

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

package/dist/IconToggle.cjs

@@ -13,8 +13,9 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 * 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 IconToggle = react.default.forwardRef(({ checked: controlledChecked, defaultChecked = false, onCheckedChange, onChange, checkedIcon, uncheckedIcon, size = "default", variant = "default", iconSize = "1rem", className, disabled, style: styleProp,...props }, ref) => {
 	const [uncontrolledChecked, setUncontrolledChecked] = react.default.useState(defaultChecked);
+	const resolvedIconSize = typeof iconSize === "number" ? `${iconSize}px` : iconSize;
 	const isControlled = controlledChecked !== void 0;
 	const checked = isControlled ? controlledChecked : uncontrolledChecked;
 	const handleClick = (0, react.useCallback)((e) => {
@@ -37,8 +38,10 @@ const IconToggle = react.default.forwardRef(({ checked: controlledChecked, defau
 		if (require_svg.isSvgMarkupString(icon)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"data-slot": "svg-mask",
 			"aria-hidden": "true",
-			className: "inline-block size-[1.2em]",
+			className: "inline-block",
 			style: {
+				width: "var(--icon-toggle-icon-size)",
+				height: "var(--icon-toggle-icon-size)",
 				backgroundColor: "currentColor",
 				WebkitMaskImage: require_svg.svgMarkupToMaskUrl(icon),
 				maskImage: require_svg.svgMarkupToMaskUrl(icon),
@@ -70,7 +73,11 @@ const IconToggle = react.default.forwardRef(({ checked: controlledChecked, defau
 		"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-[1.2em] [&_svg]:shrink-0", sizeClasses[size], variantClasses[variant], className),
+		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-[var(--icon-toggle-icon-size)] [&_svg]:shrink-0", sizeClasses[size], variantClasses[variant], className),
+		style: {
+			...styleProp ?? {},
+			["--icon-toggle-icon-size"]: resolvedIconSize
+		},
 		onClick: handleClick,
 		...props,
 		children: checked ? renderIcon(checkedIcon) : renderIcon(uncheckedIcon)

package/dist/IconToggle.d.cts

@@ -38,6 +38,14 @@ interface IconToggleProps extends Omit<React.ComponentProps<'button'>, 'onChange
    * @default 'default'
    */
   variant?: 'default' | 'outline' | 'ghost';
+  /**
+   * Icon size for both React SVG icons (e.g. lucide-react) and SVG string masks.
+   * Provide any valid CSS length (e.g. `'16px'`, `'1.25rem'`) or a number (px).
+   *
+   * Note: This is independent of `font-size` (e.g. `text-lg`).
+   * @default '1rem'
+   */
+  iconSize?: string | number;
 }
 /**
  * IconToggle - A toggle button component with customizable icons for checked/unchecked states.

package/dist/IconToggle.d.ts

@@ -38,6 +38,14 @@ interface IconToggleProps extends Omit<React.ComponentProps<'button'>, 'onChange
    * @default 'default'
    */
   variant?: 'default' | 'outline' | 'ghost';
+  /**
+   * Icon size for both React SVG icons (e.g. lucide-react) and SVG string masks.
+   * Provide any valid CSS length (e.g. `'16px'`, `'1.25rem'`) or a number (px).
+   *
+   * Note: This is independent of `font-size` (e.g. `text-lg`).
+   * @default '1rem'
+   */
+  iconSize?: string | number;
 }
 /**
  * IconToggle - A toggle button component with customizable icons for checked/unchecked states.

package/dist/IconToggle.js

@@ -9,8 +9,9 @@ import { jsx } from "react/jsx-runtime";
 * 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 IconToggle = React.forwardRef(({ checked: controlledChecked, defaultChecked = false, onCheckedChange, onChange, checkedIcon, uncheckedIcon, size = "default", variant = "default", iconSize = "1rem", className, disabled, style: styleProp,...props }, ref) => {
 	const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
+	const resolvedIconSize = typeof iconSize === "number" ? `${iconSize}px` : iconSize;
 	const isControlled = controlledChecked !== void 0;
 	const checked = isControlled ? controlledChecked : uncontrolledChecked;
 	const handleClick = useCallback((e) => {
@@ -33,8 +34,10 @@ const IconToggle = React.forwardRef(({ checked: controlledChecked, defaultChecke
 		if (isSvgMarkupString(icon)) return /* @__PURE__ */ jsx("span", {
 			"data-slot": "svg-mask",
 			"aria-hidden": "true",
-			className: "inline-block size-[1.2em]",
+			className: "inline-block",
 			style: {
+				width: "var(--icon-toggle-icon-size)",
+				height: "var(--icon-toggle-icon-size)",
 				backgroundColor: "currentColor",
 				WebkitMaskImage: svgMarkupToMaskUrl(icon),
 				maskImage: svgMarkupToMaskUrl(icon),
@@ -66,7 +69,11 @@ const IconToggle = React.forwardRef(({ checked: controlledChecked, defaultChecke
 		"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-[1.2em] [&_svg]:shrink-0", sizeClasses[size], variantClasses[variant], className),
+		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-[var(--icon-toggle-icon-size)] [&_svg]:shrink-0", sizeClasses[size], variantClasses[variant], className),
+		style: {
+			...styleProp ?? {},
+			["--icon-toggle-icon-size"]: resolvedIconSize
+		},
 		onClick: handleClick,
 		...props,
 		children: checked ? renderIcon(checkedIcon) : renderIcon(uncheckedIcon)

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/input/Input.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 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_runtime9.JSX.Element;
+declare function Input(props: InputProps$1): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { Input, InputProps$1 as InputProps };

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 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_runtime7.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime9.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.37.2",
+  "version": "0.38.1",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -46,7 +46,7 @@
     "pretty-bytes": "^7.1.0",
     "react-responsive": "^10.0.1",
     "sonner": "2.0.7",
-    "@pixpilot/shadcn": "0.7.0"
+    "@pixpilot/shadcn": "0.7.1"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.14",