@pixpilot/shadcn-ui 0.65.0 → 0.67.1

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_runtime3 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_runtime3.JSX.Element;
 declare namespace ContentCard {
   var displayName: string;
 }

package/dist/DatePicker.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { Calendar } from "@pixpilot/shadcn";
 import { ComponentProps } from "react";
 
@@ -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_runtime4.JSX.Element;
 declare namespace DatePicker {
   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_runtime4 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_runtime4.JSX.Element;
 declare namespace DatePicker {
   var displayName: string;
 }

package/dist/IconToggle.cjs

@@ -1,86 +1,64 @@
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_ToggleButton = require('./ToggleButton.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", 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) => {
-		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",
-			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),
-				WebkitMaskRepeat: "no-repeat",
-				maskRepeat: "no-repeat",
-				WebkitMaskPosition: "center",
-				maskPosition: "center",
-				WebkitMaskSize: "contain",
-				maskSize: "contain"
-			}
-		});
-		return icon;
-	};
+const IconToggle = react.default.forwardRef(({ checkedIcon, uncheckedIcon, size = "default", variant = "outline", iconSize, style, className,...props }, ref) => {
 	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"
+	const resolvedIconSize = iconSize ?? {
+		sm: "14px",
+		default: "16px",
+		lg: "20px"
+	}[size];
+	const renderIcon = (icon) => {
+		if (icon == null) return null;
+		if (typeof icon === "string" && require_svg.isSvgMarkupString(icon)) {
+			const mask = require_svg.svgMarkupToMaskUrl(icon);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": "true",
+				className: "inline-block",
+				style: {
+					width: "var(--icon-size)",
+					height: "var(--icon-size)",
+					flexShrink: 0,
+					backgroundColor: "currentColor",
+					WebkitMaskImage: mask,
+					maskImage: mask,
+					WebkitMaskRepeat: "no-repeat",
+					maskRepeat: "no-repeat",
+					WebkitMaskPosition: "center",
+					maskPosition: "center",
+					WebkitMaskSize: "contain",
+					maskSize: "contain"
+				}
+			});
+		}
+		return icon;
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
-		role: "switch",
-		"data-slot": "icon-toggle",
-		...props,
-		disabled,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleButton.ToggleButton, {
 		ref,
-		"aria-checked": checked,
-		onClick: handleClick,
-		"data-state": checked ? "checked" : "unchecked",
-		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),
+		...props,
+		checkedContent: renderIcon(checkedIcon),
+		uncheckedContent: renderIcon(uncheckedIcon),
+		variant,
 		style: {
-			...styleProp ?? {},
-			["--icon-toggle-icon-size"]: resolvedIconSize
+			...style ?? {},
+			["--icon-size"]: resolvedIconSize
 		},
-		children: checked ? renderIcon(checkedIcon) : renderIcon(uncheckedIcon)
+		className: [
+			"inline-flex items-center justify-center rounded-md text-sm font-medium transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
+			"[&_svg]:pointer-events-none [&_svg:not([class*=\"size-\"])]:size-[var(--icon-size)] [&_svg]:shrink-0",
+			sizeClasses[size],
+			className
+		].filter(Boolean).join(" ")
 	});
 });
 IconToggle.displayName = "IconToggle";

package/dist/IconToggle.d.cts

@@ -1,57 +1,13 @@
+import { ToggleButtonProps } from "./ToggleButton.cjs";
 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
-   */
+interface IconToggleProps extends Omit<ToggleButtonProps, 'checkedContent' | 'uncheckedContent'> {
   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';
-  /**
-   * 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.
- * 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

@@ -1,57 +1,13 @@
+import { ToggleButtonProps } from "./ToggleButton.js";
 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
-   */
+interface IconToggleProps extends Omit<ToggleButtonProps, 'checkedContent' | 'uncheckedContent'> {
   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';
-  /**
-   * 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.
- * 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

@@ -1,82 +1,61 @@
+import { ToggleButton } from "./ToggleButton.js";
 import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.js";
-import { cn } from "@pixpilot/shadcn";
-import React, { useCallback } from "react";
+import React 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", 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) => {
-		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",
-			style: {
-				width: "var(--icon-toggle-icon-size)",
-				height: "var(--icon-toggle-icon-size)",
-				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 IconToggle = React.forwardRef(({ checkedIcon, uncheckedIcon, size = "default", variant = "outline", iconSize, style, className,...props }, ref) => {
 	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"
+	const resolvedIconSize = iconSize ?? {
+		sm: "14px",
+		default: "16px",
+		lg: "20px"
+	}[size];
+	const renderIcon = (icon) => {
+		if (icon == null) return null;
+		if (typeof icon === "string" && isSvgMarkupString(icon)) {
+			const mask = svgMarkupToMaskUrl(icon);
+			return /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "inline-block",
+				style: {
+					width: "var(--icon-size)",
+					height: "var(--icon-size)",
+					flexShrink: 0,
+					backgroundColor: "currentColor",
+					WebkitMaskImage: mask,
+					maskImage: mask,
+					WebkitMaskRepeat: "no-repeat",
+					maskRepeat: "no-repeat",
+					WebkitMaskPosition: "center",
+					maskPosition: "center",
+					WebkitMaskSize: "contain",
+					maskSize: "contain"
+				}
+			});
+		}
+		return icon;
 	};
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		role: "switch",
-		"data-slot": "icon-toggle",
-		...props,
-		disabled,
+	return /* @__PURE__ */ jsx(ToggleButton, {
 		ref,
-		"aria-checked": checked,
-		onClick: handleClick,
-		"data-state": checked ? "checked" : "unchecked",
-		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),
+		...props,
+		checkedContent: renderIcon(checkedIcon),
+		uncheckedContent: renderIcon(uncheckedIcon),
+		variant,
 		style: {
-			...styleProp ?? {},
-			["--icon-toggle-icon-size"]: resolvedIconSize
+			...style ?? {},
+			["--icon-size"]: resolvedIconSize
 		},
-		children: checked ? renderIcon(checkedIcon) : renderIcon(uncheckedIcon)
+		className: [
+			"inline-flex items-center justify-center rounded-md text-sm font-medium transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
+			"[&_svg]:pointer-events-none [&_svg:not([class*=\"size-\"])]:size-[var(--icon-size)] [&_svg]:shrink-0",
+			sizeClasses[size],
+			className
+		].filter(Boolean).join(" ")
 	});
 });
 IconToggle.displayName = "IconToggle";

package/dist/Rating.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
@@ -10,7 +10,7 @@ interface RatingOption {
   value: number;
 }
 declare const ratingVariants: (props?: ({
-  size?: "sm" | "default" | "lg" | "xl" | null | undefined;
+  size?: "default" | "sm" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type RatingSize = VariantProps<typeof ratingVariants>['size'];
 type IconType = 'star' | 'circle';
@@ -35,7 +35,7 @@ declare function RatingButton({
   index,
   className,
   ...props
-}: RatingButtonProps): react_jsx_runtime4.JSX.Element;
+}: RatingButtonProps): react_jsx_runtime5.JSX.Element;
 declare function Rating({
   value: valueProp,
   defaultValue,
@@ -52,6 +52,6 @@ declare function Rating({
   className,
   children,
   ...props
-}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime4.JSX.Element;
+}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps };

package/dist/Rating.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
 
@@ -10,7 +10,7 @@ interface RatingOption {
   value: number;
 }
 declare const ratingVariants: (props?: ({
-  size?: "sm" | "default" | "lg" | "xl" | null | undefined;
+  size?: "default" | "sm" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type RatingSize = VariantProps<typeof ratingVariants>['size'];
 type IconType = 'star' | 'circle';
@@ -35,7 +35,7 @@ declare function RatingButton({
   index,
   className,
   ...props
-}: RatingButtonProps): react_jsx_runtime4.JSX.Element;
+}: RatingButtonProps): react_jsx_runtime5.JSX.Element;
 declare function Rating({
   value: valueProp,
   defaultValue,
@@ -52,6 +52,6 @@ declare function Rating({
   className,
   children,
   ...props
-}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime4.JSX.Element;
+}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps };

package/dist/Select.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { Select, SelectContent } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
 
@@ -46,6 +46,6 @@ type BaseSelectProps = {
    */
   clearable?: boolean;
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
-declare function Select$1(props: BaseSelectProps): react_jsx_runtime6.JSX.Element;
+declare function Select$1(props: BaseSelectProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { Select$1 as Select, SelectContentProps, SelectOption };

package/dist/Select.d.ts

@@ -1,6 +1,6 @@
 import { Select, SelectContent } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/Select.d.ts
 interface SelectOption {
@@ -46,6 +46,6 @@ type BaseSelectProps = {
    */
   clearable?: boolean;
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
-declare function Select$1(props: BaseSelectProps): react_jsx_runtime6.JSX.Element;
+declare function Select$1(props: BaseSelectProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { Select$1 as Select, SelectContentProps, SelectOption };

package/dist/ToggleButton.cjs

@@ -0,0 +1,46 @@
+'use client';
+
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_Button = require('./Button.cjs');
+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/ToggleButton.tsx
+const ToggleButton = react.default.forwardRef(({ checked: controlledChecked, defaultChecked = false, onChange, checkedContent, uncheckedContent, checkedProps, uncheckedProps, 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 next = !checked;
+		if (!isControlled) setUncontrolledChecked(next);
+		onChange?.(next);
+		props.onClick?.(e);
+	}, [
+		checked,
+		disabled,
+		isControlled,
+		onChange,
+		props
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		variant: "outline",
+		type: "button",
+		"data-slot": "toggle-button",
+		...props,
+		...checked ? checkedProps : uncheckedProps,
+		"aria-pressed": checked,
+		"data-state": checked ? "checked" : "unchecked",
+		disabled,
+		ref,
+		onClick: handleClick,
+		children: checked ? checkedContent : uncheckedContent
+	});
+});
+ToggleButton.displayName = "ToggleButton";
+
+//#endregion
+exports.ToggleButton = ToggleButton;

package/dist/ToggleButton.d.cts

@@ -0,0 +1,41 @@
+import { buttonVariants } from "@pixpilot/shadcn";
+import React from "react";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/ToggleButton.d.ts
+type ButtonBaseProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+  asChild?: boolean;
+};
+interface ToggleButtonProps extends Omit<ButtonBaseProps, 'onChange'> {
+  /**
+   * Controlled checked state
+   */
+  checked?: boolean;
+  /**
+   * Default checked state (uncontrolled)
+   */
+  defaultChecked?: boolean;
+  /**
+   * Fired when state changes
+   */
+  onChange?: (checked: boolean) => void;
+  /**
+   * Content rendered when checked
+   */
+  checkedContent?: React.ReactNode;
+  /**
+   * Content rendered when unchecked
+   */
+  uncheckedContent?: React.ReactNode;
+  /**
+   * Props to apply when checked
+   */
+  checkedProps?: Partial<ButtonBaseProps>;
+  /**
+   * Props to apply when unchecked
+   */
+  uncheckedProps?: Partial<ButtonBaseProps>;
+}
+declare const ToggleButton: React.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { ToggleButton, ToggleButtonProps };

package/dist/ToggleButton.d.ts

@@ -0,0 +1,41 @@
+import { buttonVariants } from "@pixpilot/shadcn";
+import React from "react";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/ToggleButton.d.ts
+type ButtonBaseProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+  asChild?: boolean;
+};
+interface ToggleButtonProps extends Omit<ButtonBaseProps, 'onChange'> {
+  /**
+   * Controlled checked state
+   */
+  checked?: boolean;
+  /**
+   * Default checked state (uncontrolled)
+   */
+  defaultChecked?: boolean;
+  /**
+   * Fired when state changes
+   */
+  onChange?: (checked: boolean) => void;
+  /**
+   * Content rendered when checked
+   */
+  checkedContent?: React.ReactNode;
+  /**
+   * Content rendered when unchecked
+   */
+  uncheckedContent?: React.ReactNode;
+  /**
+   * Props to apply when checked
+   */
+  checkedProps?: Partial<ButtonBaseProps>;
+  /**
+   * Props to apply when unchecked
+   */
+  uncheckedProps?: Partial<ButtonBaseProps>;
+}
+declare const ToggleButton: React.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { ToggleButton, ToggleButtonProps };