@pixpilot/shadcn-ui 1.34.0 → 1.36.0

package/dist/Button.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 import { Button, Tooltip, TooltipContent, TooltipTrigger, buttonVariants } from "@pixpilot/shadcn";
 import React from "react";
 import { VariantProps } from "class-variance-authority";
@@ -27,7 +27,7 @@ interface ButtonProps extends React.ComponentProps<typeof Button>, VariantProps<
 }
 declare function Button$1(props: ButtonProps & {
   ref?: React.Ref<HTMLButtonElement>;
-}): react_jsx_runtime0.JSX.Element;
+}): react_jsx_runtime1.JSX.Element;
 declare namespace Button$1 {
   var displayName: string;
 }

package/dist/ButtonExtended.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Button, Tooltip, TooltipContent, TooltipTrigger, buttonVariants } from "@pixpilot/shadcn";
 import React from "react";
 import { VariantProps } from "class-variance-authority";
@@ -50,7 +50,7 @@ interface ButtonExtendedProps extends React.ComponentProps<typeof Button>, Varia
 }
 declare function ButtonExtended(props: ButtonExtendedProps & {
   ref?: React.Ref<HTMLButtonElement>;
-}): react_jsx_runtime1.JSX.Element;
+}): react_jsx_runtime0.JSX.Element;
 declare namespace ButtonExtended {
   var displayName: string;
 }

package/dist/DatePicker.cjs

@@ -13,25 +13,43 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/DatePicker.tsx
 function DatePicker(props) {
-	const { id, value, onChange, placeholder = "Pick a date",...calendarProps } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
-		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
-			id,
-			variant: "outline",
-			className: (0, __pixpilot_shadcn.cn)("w-full justify-start text-left font-normal", !value && "text-muted-foreground"),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarIcon, { className: "mr-2 h-4 w-4" }), value ? value.toLocaleDateString() : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: placeholder })]
-		})
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
-		className: "w-auto p-0",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Calendar, {
-			mode: "single",
-			selected: value,
-			onSelect: onChange,
-			initialFocus: true,
-			...calendarProps
-		})
-	})] });
+	const { id, value, onChange, placeholder = "Pick a date", showClearButton = true,...calendarProps } = props;
+	const [open, setOpen] = react.default.useState(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative flex items-center",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+					id,
+					variant: "outline",
+					className: (0, __pixpilot_shadcn.cn)("w-full justify-start text-left font-normal", !value && "text-muted-foreground", showClearButton && value && "pr-8"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarIcon, { className: "mr-2 h-4 w-4" }), value ? value.toLocaleDateString() : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: placeholder })]
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
+				className: "w-auto p-0",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Calendar, {
+					mode: "single",
+					selected: value,
+					onSelect: (date) => {
+						onChange?.(date);
+						setOpen(false);
+					},
+					initialFocus: true,
+					...calendarProps
+				})
+			})]
+		}), showClearButton && value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"data-slot": "clear-button",
+			onClick: () => onChange?.(void 0),
+			className: "absolute right-2 text-muted-foreground hover:text-foreground",
+			"aria-label": "Clear date",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, { className: "h-4 w-4" })
+		})]
+	});
 }
 DatePicker.displayName = "DatePicker";
 

package/dist/DatePicker.d.cts

@@ -8,6 +8,7 @@ type DatePickerProps = {
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
+  showClearButton?: boolean;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
 declare function DatePicker(props: DatePickerProps): react_jsx_runtime6.JSX.Element;
 declare namespace DatePicker {

package/dist/DatePicker.d.ts

@@ -8,6 +8,7 @@ type DatePickerProps = {
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
+  showClearButton?: boolean;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
 declare function DatePicker(props: DatePickerProps): react_jsx_runtime6.JSX.Element;
 declare namespace DatePicker {

package/dist/DatePicker.js

@@ -2,31 +2,49 @@
 
 
 import { Button, Calendar, Popover, PopoverContent, PopoverTrigger, cn } from "@pixpilot/shadcn";
-import { CalendarIcon } from "lucide-react";
+import { CalendarIcon, XIcon } from "lucide-react";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/DatePicker.tsx
 function DatePicker(props) {
-	const { id, value, onChange, placeholder = "Pick a date",...calendarProps } = props;
-	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-		asChild: true,
-		children: /* @__PURE__ */ jsxs(Button, {
-			id,
-			variant: "outline",
-			className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground"),
-			children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), value ? value.toLocaleDateString() : /* @__PURE__ */ jsx("span", { children: placeholder })]
-		})
-	}), /* @__PURE__ */ jsx(PopoverContent, {
-		className: "w-auto p-0",
-		children: /* @__PURE__ */ jsx(Calendar, {
-			mode: "single",
-			selected: value,
-			onSelect: onChange,
-			initialFocus: true,
-			...calendarProps
-		})
-	})] });
+	const { id, value, onChange, placeholder = "Pick a date", showClearButton = true,...calendarProps } = props;
+	const [open, setOpen] = React.useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex items-center",
+		children: [/* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(Button, {
+					id,
+					variant: "outline",
+					className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground", showClearButton && value && "pr-8"),
+					children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), value ? value.toLocaleDateString() : /* @__PURE__ */ jsx("span", { children: placeholder })]
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-auto p-0",
+				children: /* @__PURE__ */ jsx(Calendar, {
+					mode: "single",
+					selected: value,
+					onSelect: (date) => {
+						onChange?.(date);
+						setOpen(false);
+					},
+					initialFocus: true,
+					...calendarProps
+				})
+			})]
+		}), showClearButton && value && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "clear-button",
+			onClick: () => onChange?.(void 0),
+			className: "absolute right-2 text-muted-foreground hover:text-foreground",
+			"aria-label": "Clear date",
+			children: /* @__PURE__ */ jsx(XIcon, { className: "h-4 w-4" })
+		})]
+	});
 }
 DatePicker.displayName = "DatePicker";
 

package/dist/dialog/Dialog.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 import { DialogClose, DialogContent } from "@pixpilot/shadcn";
 import * as React$1 from "react";
 
@@ -10,18 +10,18 @@ declare const DialogContent$1: React$1.ForwardRefExoticComponent<DialogContentPr
 declare function DialogHeader({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime11.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime14.JSX.Element;
 declare function DialogBody({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime11.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime14.JSX.Element;
 declare function DialogFooter({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime11.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime14.JSX.Element;
 declare function DialogClose$1({
   className,
   ...props
-}: React$1.ComponentPropsWithoutRef<typeof DialogClose>): react_jsx_runtime11.JSX.Element;
+}: React$1.ComponentPropsWithoutRef<typeof DialogClose>): react_jsx_runtime14.JSX.Element;
 //#endregion
 export { DialogBody, DialogClose$1 as DialogClose, DialogContent$1 as DialogContent, DialogContentProps, DialogFooter, DialogHeader };

package/dist/file-upload/FileUpload.d.cts

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.cjs";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.d.ts
-declare function FileUpload(props: FileUploadProps): react_jsx_runtime10.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime13.JSX.Element;
 //#endregion
 export { FileUpload };

package/dist/file-upload-inline/FileUploadInline.d.cts

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.cjs";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime10 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_runtime15.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime10.JSX.Element;
 //#endregion
 export { FileUploadInline };

package/dist/file-upload-root/FileUploadRoot.d.cts

@@ -1,11 +1,11 @@
 import { FileUploadRootProps } from "./types.cjs";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/file-upload-root/FileUploadRoot.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime17.JSX.Element;
+declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime12.JSX.Element;
 declare namespace FileUploadRoot {
   var displayName: string;
 }

package/dist/file-upload-root/FileUploadRoot.d.ts

@@ -1,11 +1,11 @@
 import { FileUploadRootProps } from "./types.js";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/file-upload-root/FileUploadRoot.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime16.JSX.Element;
+declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime17.JSX.Element;
 declare namespace FileUploadRoot {
   var displayName: string;
 }

package/dist/input/Input.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime11 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_runtime16.JSX.Element;
+declare function Input(props: InputProps$1): react_jsx_runtime11.JSX.Element;
 //#endregion
 export { Input, InputProps$1 as InputProps };

package/dist/input/Input.d.ts

@@ -1,6 +1,6 @@
 import { InputProps } from "@pixpilot/shadcn";
 import * as React$1 from "react";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/input/Input.d.ts
 type InputProps$1 = InputProps & {
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
   prefixClassName?: string;
   suffixClassName?: string;
 };
-declare function Input$1(props: InputProps$1): react_jsx_runtime17.JSX.Element;
+declare function Input$1(props: InputProps$1): react_jsx_runtime16.JSX.Element;
 //#endregion
 export { Input$1 as Input, InputProps$1 as InputProps };

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
@@ -26,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_runtime22.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime20.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
@@ -26,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_runtime22.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime20.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
 interface ThemeModeSwitchOutsideProps {
@@ -23,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_runtime23.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime22.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
@@ -14,7 +14,7 @@ interface ThemeModeToggleButtonProps {
  * Light/Dark toggle button.
  * Pure component - toggles between light and dark.
  */
-declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime20.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime22.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
@@ -14,7 +14,7 @@ interface ThemeModeToggleButtonProps {
  * Light/Dark toggle button.
  * Pure component - toggles between light and dark.
  */
-declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime20.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime23.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "1.34.0",
+  "version": "1.36.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -64,10 +64,10 @@
     "tailwindcss": "^4.2.2",
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
-    "@internal/eslint-config": "0.3.0",
     "@internal/hooks": "0.0.0",
     "@internal/prettier-config": "0.0.1",
     "@internal/tsconfig": "0.1.0",
+    "@internal/eslint-config": "0.3.0",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"
   },