@pixpilot/shadcn-ui 0.37.2 → 0.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/IconToggle.cjs +10 -3
  2. package/dist/IconToggle.d.cts +8 -0
  3. package/dist/IconToggle.d.ts +8 -0
  4. package/dist/IconToggle.js +10 -3
  5. package/dist/file-upload-inline/FileUploadInline.d.cts +2 -2
  6. package/dist/input/Input.d.cts +2 -2
  7. package/dist/theme-toggle/ThemeModeToggleButton.d.cts +2 -2
  8. package/package.json +1 -1
package/dist/IconToggle.cjs CHANGED
@@ -13,8 +13,9 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
13
13
  * Perfect for visibility toggles, theme switches, or any boolean state with visual feedback.
14
14
  * Icons can be React components (like lucide-react icons) or SVG markup strings.
15
15
  */
16
- const IconToggle = react.default.forwardRef(({ checked: controlledChecked, defaultChecked = false, onCheckedChange, onChange, checkedIcon, uncheckedIcon, size = "default", variant = "default", className, disabled,...props }, ref) => {
16
+ 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) => {
17
17
  const [uncontrolledChecked, setUncontrolledChecked] = react.default.useState(defaultChecked);
18
+ const resolvedIconSize = typeof iconSize === "number" ? `${iconSize}px` : iconSize;
18
19
  const isControlled = controlledChecked !== void 0;
19
20
  const checked = isControlled ? controlledChecked : uncontrolledChecked;
20
21
  const handleClick = (0, react.useCallback)((e) => {
@@ -37,8 +38,10 @@ const IconToggle = react.default.forwardRef(({ checked: controlledChecked, defau
37
38
  if (require_svg.isSvgMarkupString(icon)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
38
39
  "data-slot": "svg-mask",
39
40
  "aria-hidden": "true",
40
- className: "inline-block size-[1.2em]",
41
+ className: "inline-block",
41
42
  style: {
43
+ width: "var(--icon-toggle-icon-size)",
44
+ height: "var(--icon-toggle-icon-size)",
42
45
  backgroundColor: "currentColor",
43
46
  WebkitMaskImage: require_svg.svgMarkupToMaskUrl(icon),
44
47
  maskImage: require_svg.svgMarkupToMaskUrl(icon),
@@ -70,7 +73,11 @@ const IconToggle = react.default.forwardRef(({ checked: controlledChecked, defau
70
73
  "data-state": checked ? "checked" : "unchecked",
71
74
  "data-slot": "icon-toggle",
72
75
  disabled,
73
- 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),
76
+ 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),
77
+ style: {
78
+ ...styleProp ?? {},
79
+ ["--icon-toggle-icon-size"]: resolvedIconSize
80
+ },
74
81
  onClick: handleClick,
75
82
  ...props,
76
83
  children: checked ? renderIcon(checkedIcon) : renderIcon(uncheckedIcon)
package/dist/IconToggle.d.cts CHANGED
@@ -38,6 +38,14 @@ interface IconToggleProps extends Omit<React.ComponentProps<'button'>, 'onChange
38
38
  * @default 'default'
39
39
  */
40
40
  variant?: 'default' | 'outline' | 'ghost';
41
+ /**
42
+ * Icon size for both React SVG icons (e.g. lucide-react) and SVG string masks.
43
+ * Provide any valid CSS length (e.g. `'16px'`, `'1.25rem'`) or a number (px).
44
+ *
45
+ * Note: This is independent of `font-size` (e.g. `text-lg`).
46
+ * @default '1rem'
47
+ */
48
+ iconSize?: string | number;
41
49
  }
42
50
  /**
43
51
  * IconToggle - A toggle button component with customizable icons for checked/unchecked states.
package/dist/IconToggle.d.ts CHANGED
@@ -38,6 +38,14 @@ interface IconToggleProps extends Omit<React.ComponentProps<'button'>, 'onChange
38
38
  * @default 'default'
39
39
  */
40
40
  variant?: 'default' | 'outline' | 'ghost';
41
+ /**
42
+ * Icon size for both React SVG icons (e.g. lucide-react) and SVG string masks.
43
+ * Provide any valid CSS length (e.g. `'16px'`, `'1.25rem'`) or a number (px).
44
+ *
45
+ * Note: This is independent of `font-size` (e.g. `text-lg`).
46
+ * @default '1rem'
47
+ */
48
+ iconSize?: string | number;
41
49
  }
42
50
  /**
43
51
  * IconToggle - A toggle button component with customizable icons for checked/unchecked states.
package/dist/IconToggle.js CHANGED
@@ -9,8 +9,9 @@ import { jsx } from "react/jsx-runtime";
9
9
  * Perfect for visibility toggles, theme switches, or any boolean state with visual feedback.
10
10
  * Icons can be React components (like lucide-react icons) or SVG markup strings.
11
11
  */
12
- const IconToggle = React.forwardRef(({ checked: controlledChecked, defaultChecked = false, onCheckedChange, onChange, checkedIcon, uncheckedIcon, size = "default", variant = "default", className, disabled,...props }, ref) => {
12
+ const IconToggle = React.forwardRef(({ checked: controlledChecked, defaultChecked = false, onCheckedChange, onChange, checkedIcon, uncheckedIcon, size = "default", variant = "default", iconSize = "1rem", className, disabled, style: styleProp,...props }, ref) => {
13
13
  const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
14
+ const resolvedIconSize = typeof iconSize === "number" ? `${iconSize}px` : iconSize;
14
15
  const isControlled = controlledChecked !== void 0;
15
16
  const checked = isControlled ? controlledChecked : uncontrolledChecked;
16
17
  const handleClick = useCallback((e) => {
@@ -33,8 +34,10 @@ const IconToggle = React.forwardRef(({ checked: controlledChecked, defaultChecke
33
34
  if (isSvgMarkupString(icon)) return /* @__PURE__ */ jsx("span", {
34
35
  "data-slot": "svg-mask",
35
36
  "aria-hidden": "true",
36
- className: "inline-block size-[1.2em]",
37
+ className: "inline-block",
37
38
  style: {
39
+ width: "var(--icon-toggle-icon-size)",
40
+ height: "var(--icon-toggle-icon-size)",
38
41
  backgroundColor: "currentColor",
39
42
  WebkitMaskImage: svgMarkupToMaskUrl(icon),
40
43
  maskImage: svgMarkupToMaskUrl(icon),
@@ -66,7 +69,11 @@ const IconToggle = React.forwardRef(({ checked: controlledChecked, defaultChecke
66
69
  "data-state": checked ? "checked" : "unchecked",
67
70
  "data-slot": "icon-toggle",
68
71
  disabled,
69
- 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),
72
+ 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),
73
+ style: {
74
+ ...styleProp ?? {},
75
+ ["--icon-toggle-icon-size"]: resolvedIconSize
76
+ },
70
77
  onClick: handleClick,
71
78
  ...props,
72
79
  children: checked ? renderIcon(checkedIcon) : renderIcon(uncheckedIcon)
package/dist/file-upload-inline/FileUploadInline.d.cts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { FileUploadInlineProps } from "./types.cjs";
2
- import * as react_jsx_runtime8 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime7 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/file-upload-inline/FileUploadInline.d.ts
5
5
  /**
6
6
  * FileUploadInline - An inline file upload component using FileUpload primitives
7
7
  */
8
- declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime8.JSX.Element;
8
+ declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime7.JSX.Element;
9
9
  //#endregion
10
10
  export { FileUploadInline };
package/dist/input/Input.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime9 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime8 from "react/jsx-runtime";
2
2
  import { InputProps } from "@pixpilot/shadcn";
3
3
  import * as React$1 from "react";
4
4
 
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
10
10
  prefixClassName?: string;
11
11
  suffixClassName?: string;
12
12
  };
13
- declare function Input(props: InputProps$1): react_jsx_runtime9.JSX.Element;
13
+ declare function Input(props: InputProps$1): react_jsx_runtime8.JSX.Element;
14
14
  //#endregion
15
15
  export { Input, InputProps$1 as InputProps };
package/dist/theme-toggle/ThemeModeToggleButton.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime7 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime9 from "react/jsx-runtime";
2
2
 
3
3
  //#region src/theme-toggle/ThemeModeToggleButton.d.ts
4
4
  interface ThemeModeToggleButtonProps {
@@ -13,7 +13,7 @@ interface ThemeModeToggleButtonProps {
13
13
  * Light/Dark toggle button.
14
14
  * Pure component - toggles between light and dark.
15
15
  */
16
- declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime7.JSX.Element;
16
+ declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime9.JSX.Element;
17
17
  declare namespace ThemeModeToggleButton {
18
18
  var displayName: string;
19
19
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pixpilot/shadcn-ui",
3
3
  "type": "module",
4
- "version": "0.37.2",
4
+ "version": "0.38.0",
5
5
  "description": "Custom UI components and utilities built with shadcn/ui.",
6
6
  "author": "m.doaie <m.doaie@hotmail.com>",
7
7
  "license": "MIT",