@pixpilot/shadcn-ui 3.6.1 → 3.8.0

package/dist/absolute-fill/AbsoluteFill.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/absolute-fill/AbsoluteFill.d.ts
 
@@ -10,7 +10,7 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  */
 declare function AbsoluteFill(props: React.HTMLAttributes<HTMLDivElement> & {
   ref?: React.Ref<HTMLDivElement>;
-}): react_jsx_runtime0.JSX.Element;
+}): react_jsx_runtime1.JSX.Element;
 declare namespace AbsoluteFill {
   var displayName: string;
 }

package/dist/button/Button.d.ts

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

package/dist/button-extended/ButtonExtended.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 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";
@@ -50,7 +50,7 @@ interface ButtonExtendedProps extends React.ComponentProps<typeof Button>, Varia
 }
 declare function ButtonExtended(props: ButtonExtendedProps & {
   ref?: React.Ref<HTMLButtonElement>;
-}): react_jsx_runtime9.JSX.Element;
+}): react_jsx_runtime1.JSX.Element;
 declare namespace ButtonExtended {
   var displayName: string;
 }

package/dist/button-extended/ButtonExtended.d.ts

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

package/dist/card/Card.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@pixpilot/shadcn";
 import React from "react";
 
@@ -6,10 +6,10 @@ import React from "react";
 declare function CardTitle$1({
   className,
   ...props
-}: React.ComponentProps<typeof CardTitle>): react_jsx_runtime10.JSX.Element;
+}: React.ComponentProps<typeof CardTitle>): react_jsx_runtime3.JSX.Element;
 declare function CardHeader$1({
   className,
   ...props
-}: React.ComponentProps<typeof CardHeader>): react_jsx_runtime10.JSX.Element;
+}: React.ComponentProps<typeof CardHeader>): react_jsx_runtime3.JSX.Element;
 //#endregion
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader$1 as CardHeader, CardTitle$1 as CardTitle };

package/dist/card/Card.d.ts

@@ -1,15 +1,15 @@
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@pixpilot/shadcn";
 import React from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/card/Card.d.ts
 declare function CardTitle$1({
   className,
   ...props
-}: React.ComponentProps<typeof CardTitle>): react_jsx_runtime3.JSX.Element;
+}: React.ComponentProps<typeof CardTitle>): react_jsx_runtime4.JSX.Element;
 declare function CardHeader$1({
   className,
   ...props
-}: React.ComponentProps<typeof CardHeader>): react_jsx_runtime3.JSX.Element;
+}: React.ComponentProps<typeof CardHeader>): react_jsx_runtime4.JSX.Element;
 //#endregion
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader$1 as CardHeader, CardTitle$1 as CardTitle };

package/dist/color-select/ColorSelect.d.cts

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

package/dist/color-select/ColorSelect.d.ts

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

package/dist/content-card/ContentCard.d.cts

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

package/dist/content-card/ContentCard.d.ts

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

package/dist/date-picker/DatePicker.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 import { Calendar } from "@pixpilot/shadcn";
 import { ComponentProps } from "react";
 
@@ -10,7 +10,7 @@ type DatePickerProps = {
   placeholder?: string;
   showClearButton?: boolean;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
-declare function DatePicker(props: DatePickerProps): react_jsx_runtime21.JSX.Element;
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime12.JSX.Element;
 declare namespace DatePicker {
   var displayName: string;
 }

package/dist/date-picker/DatePicker.d.ts

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

package/dist/dialog/Dialog.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_OverlayPanel = require('../overlay-panel/OverlayPanel.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let react = require("react");
@@ -13,24 +14,21 @@ const DialogContent = react.forwardRef(({ className, fullscreen = false,...props
 	...props
 }));
 DialogContent.displayName = "DialogContent";
-function DialogHeader({ className,...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "header",
-		className: (0, __pixpilot_shadcn.cn)("flex shrink-0 flex-col gap-2.5", className),
+function DialogHeader(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OverlayPanel.OverlayPanelHeader, {
+		"data-slot": "dialog-header",
 		...props
 	});
 }
-function DialogBody({ className,...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "body",
-		className: (0, __pixpilot_shadcn.cn)("min-h-0 flex-1 overflow-auto -mx-6 px-6", className),
+function DialogBody(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OverlayPanel.OverlayPanelBody, {
+		"data-slot": "dialog-body",
 		...props
 	});
 }
-function DialogFooter({ className,...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "footer",
-		className: (0, __pixpilot_shadcn.cn)("flex shrink-0 justify-end space-x-2", className),
+function DialogFooter(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OverlayPanel.OverlayPanelFooter, {
+		"data-slot": "dialog-footer",
 		...props
 	});
 }

package/dist/dialog/Dialog.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { DialogClose, DialogContent } from "@pixpilot/shadcn";
 import * as React$1 from "react";
 
@@ -7,21 +7,12 @@ interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof Dia
   fullscreen?: boolean;
 }
 declare const DialogContent$1: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
-declare function DialogHeader({
-  className,
-  ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime17.JSX.Element;
-declare function DialogBody({
-  className,
-  ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime17.JSX.Element;
-declare function DialogFooter({
-  className,
-  ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime17.JSX.Element;
+declare function DialogHeader(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
+declare function DialogBody(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
+declare function DialogFooter(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
 declare function DialogClose$1({
   className,
   ...props
-}: React$1.ComponentPropsWithoutRef<typeof DialogClose>): react_jsx_runtime17.JSX.Element;
+}: React$1.ComponentPropsWithoutRef<typeof DialogClose>): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { DialogBody, DialogClose$1 as DialogClose, DialogContent$1 as DialogContent, DialogContentProps, DialogFooter, DialogHeader };

package/dist/dialog/Dialog.d.ts

@@ -1,27 +1,18 @@
 import { DialogClose, DialogContent } from "@pixpilot/shadcn";
 import * as React$1 from "react";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/dialog/Dialog.d.ts
 interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogContent> {
   fullscreen?: boolean;
 }
 declare const DialogContent$1: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
-declare function DialogHeader$1({
-  className,
-  ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
-declare function DialogBody({
-  className,
-  ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
-declare function DialogFooter$1({
-  className,
-  ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
+declare function DialogHeader$1(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
+declare function DialogBody(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
+declare function DialogFooter$1(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
 declare function DialogClose$1({
   className,
   ...props
-}: React$1.ComponentPropsWithoutRef<typeof DialogClose>): react_jsx_runtime7.JSX.Element;
+}: React$1.ComponentPropsWithoutRef<typeof DialogClose>): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { DialogBody, DialogClose$1 as DialogClose, DialogContent$1 as DialogContent, DialogContentProps, DialogFooter$1 as DialogFooter, DialogHeader$1 as DialogHeader };

package/dist/dialog/Dialog.js

@@ -1,3 +1,4 @@
+import { OverlayPanelBody, OverlayPanelFooter, OverlayPanelHeader } from "../overlay-panel/OverlayPanel.js";
 import { DialogClose, DialogContent, cn } from "@pixpilot/shadcn";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
@@ -9,24 +10,21 @@ const DialogContent$1 = React$1.forwardRef(({ className, fullscreen = false,...p
 	...props
 }));
 DialogContent$1.displayName = "DialogContent";
-function DialogHeader$1({ className,...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "header",
-		className: cn("flex shrink-0 flex-col gap-2.5", className),
+function DialogHeader$1(props) {
+	return /* @__PURE__ */ jsx(OverlayPanelHeader, {
+		"data-slot": "dialog-header",
 		...props
 	});
 }
-function DialogBody({ className,...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "body",
-		className: cn("min-h-0 flex-1 overflow-auto -mx-6 px-6", className),
+function DialogBody(props) {
+	return /* @__PURE__ */ jsx(OverlayPanelBody, {
+		"data-slot": "dialog-body",
 		...props
 	});
 }
-function DialogFooter$1({ className,...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "footer",
-		className: cn("flex shrink-0 justify-end space-x-2", className),
+function DialogFooter$1(props) {
+	return /* @__PURE__ */ jsx(OverlayPanelFooter, {
+		"data-slot": "dialog-footer",
 		...props
 	});
 }

package/dist/drawer/Drawer.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_OverlayPanel = require('../overlay-panel/OverlayPanel.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let lucide_react = require("lucide-react");
@@ -60,26 +61,23 @@ const DrawerContent = react.forwardRef(({ className, floating = true, showCloseB
 	})]
 }));
 DrawerContent.displayName = "DrawerContent";
-function DrawerHeader({ className, noDrag,...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+function DrawerHeader({ noDrag,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OverlayPanel.OverlayPanelHeader, {
 		"data-slot": "drawer-header",
-		className: (0, __pixpilot_shadcn.cn)("flex shrink-0 flex-col gap-2.5", className),
 		...useNoDragProps(noDrag),
 		...props
 	});
 }
-function DrawerBody({ className, noDrag,...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+function DrawerBody({ noDrag,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OverlayPanel.OverlayPanelBody, {
 		"data-slot": "drawer-body",
-		className: (0, __pixpilot_shadcn.cn)("min-h-0 flex-1 overflow-auto -mx-6 px-6", className),
 		...useNoDragProps(noDrag),
 		...props
 	});
 }
-function DrawerFooter({ className, noDrag,...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+function DrawerFooter({ noDrag,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OverlayPanel.OverlayPanelFooter, {
 		"data-slot": "drawer-footer",
-		className: (0, __pixpilot_shadcn.cn)("flex shrink-0 justify-end space-x-2", className),
 		...useNoDragProps(noDrag),
 		...props
 	});

package/dist/drawer/Drawer.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 import { Drawer, DrawerClose, DrawerContent } from "@pixpilot/shadcn";
 import * as React$1 from "react";
 import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
@@ -22,7 +22,7 @@ type DrawerProps = React$1.ComponentProps<typeof Drawer> & NoDragProps;
 declare function Drawer$1({
   noDrag,
   ...props
-}: DrawerProps): react_jsx_runtime2.JSX.Element;
+}: DrawerProps): react_jsx_runtime13.JSX.Element;
 type DrawerContentProps = React$1.ComponentPropsWithoutRef<typeof DrawerContent> & NoDragProps & {
   /**
    * Detach the drawer from the viewport edges: adds a gap on every side and
@@ -42,24 +42,21 @@ declare const DrawerContent$1: React$1.ForwardRefExoticComponent<Omit<Omit<_radi
   showCloseButton?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare function DrawerHeader({
-  className,
   noDrag,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime2.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime13.JSX.Element;
 declare function DrawerBody({
-  className,
   noDrag,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime2.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime13.JSX.Element;
 declare function DrawerFooter({
-  className,
   noDrag,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime2.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime13.JSX.Element;
 declare function DrawerClose$1({
   className,
   noDrag,
   ...props
-}: React$1.ComponentPropsWithoutRef<typeof DrawerClose> & NoDragProps): react_jsx_runtime2.JSX.Element;
+}: React$1.ComponentPropsWithoutRef<typeof DrawerClose> & NoDragProps): react_jsx_runtime13.JSX.Element;
 //#endregion
 export { Drawer$1 as Drawer, DrawerBody, DrawerClose$1 as DrawerClose, DrawerContent$1 as DrawerContent, DrawerContentProps, DrawerFooter, DrawerHeader, DrawerProps };

package/dist/drawer/Drawer.d.ts

@@ -42,17 +42,14 @@ declare const DrawerContent$1: React$1.ForwardRefExoticComponent<Omit<Omit<_radi
   showCloseButton?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare function DrawerHeader({
-  className,
   noDrag,
   ...props
 }: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime12.JSX.Element;
 declare function DrawerBody({
-  className,
   noDrag,
   ...props
 }: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime12.JSX.Element;
 declare function DrawerFooter({
-  className,
   noDrag,
   ...props
 }: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime12.JSX.Element;

package/dist/drawer/Drawer.js

@@ -1,3 +1,4 @@
+import { OverlayPanelBody, OverlayPanelFooter, OverlayPanelHeader } from "../overlay-panel/OverlayPanel.js";
 import { Drawer, DrawerClose, DrawerContent, cn } from "@pixpilot/shadcn";
 import { XIcon } from "lucide-react";
 import * as React$1 from "react";
@@ -55,26 +56,23 @@ const DrawerContent$1 = React$1.forwardRef(({ className, floating = true, showCl
 	})]
 }));
 DrawerContent$1.displayName = "DrawerContent";
-function DrawerHeader({ className, noDrag,...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function DrawerHeader({ noDrag,...props }) {
+	return /* @__PURE__ */ jsx(OverlayPanelHeader, {
 		"data-slot": "drawer-header",
-		className: cn("flex shrink-0 flex-col gap-2.5", className),
 		...useNoDragProps(noDrag),
 		...props
 	});
 }
-function DrawerBody({ className, noDrag,...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function DrawerBody({ noDrag,...props }) {
+	return /* @__PURE__ */ jsx(OverlayPanelBody, {
 		"data-slot": "drawer-body",
-		className: cn("min-h-0 flex-1 overflow-auto -mx-6 px-6", className),
 		...useNoDragProps(noDrag),
 		...props
 	});
 }
-function DrawerFooter({ className, noDrag,...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function DrawerFooter({ noDrag,...props }) {
+	return /* @__PURE__ */ jsx(OverlayPanelFooter, {
 		"data-slot": "drawer-footer",
-		className: cn("flex shrink-0 justify-end space-x-2", className),
 		...useNoDragProps(noDrag),
 		...props
 	});

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

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.cjs";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.d.ts
-declare function FileUpload(props: FileUploadProps): react_jsx_runtime13.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime2.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_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime18 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_runtime7.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime18.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_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime19 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_runtime8.JSX.Element;
+declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime19.JSX.Element;
 declare namespace FileUploadRoot {
   var displayName: string;
 }

package/dist/input/Input.d.cts

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

package/dist/overlay-panel/OverlayPanel.cjs

@@ -0,0 +1,31 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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/overlay-panel/OverlayPanel.tsx
+/**
+* Shared layout building blocks for panel-style overlays (Dialog, Drawer).
+* Centralizes the header/body/footer styling so both stay visually
+* consistent; each overlay wraps these with its own `data-slot` value and
+* any overlay-specific behavior (e.g. Drawer's drag-to-dismiss opt-out).
+*/
+function createOverlayPanelPart(baseClassName) {
+	return function OverlayPanelPart({ className,...props }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __pixpilot_shadcn.cn)(baseClassName, className),
+			...props
+		});
+	};
+}
+const OverlayPanelHeader = createOverlayPanelPart("flex shrink-0 flex-col gap-2.5");
+const OverlayPanelBody = createOverlayPanelPart("min-h-0 flex-1 overflow-auto -mx-6 px-6 py-1.5 -my-1.5");
+const OverlayPanelFooter = createOverlayPanelPart("flex shrink-0 justify-end space-x-2");
+
+//#endregion
+exports.OverlayPanelBody = OverlayPanelBody;
+exports.OverlayPanelFooter = OverlayPanelFooter;
+exports.OverlayPanelHeader = OverlayPanelHeader;

package/dist/overlay-panel/OverlayPanel.js

@@ -0,0 +1,25 @@
+import { cn } from "@pixpilot/shadcn";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/overlay-panel/OverlayPanel.tsx
+/**
+* Shared layout building blocks for panel-style overlays (Dialog, Drawer).
+* Centralizes the header/body/footer styling so both stay visually
+* consistent; each overlay wraps these with its own `data-slot` value and
+* any overlay-specific behavior (e.g. Drawer's drag-to-dismiss opt-out).
+*/
+function createOverlayPanelPart(baseClassName) {
+	return function OverlayPanelPart({ className,...props }) {
+		return /* @__PURE__ */ jsx("div", {
+			className: cn(baseClassName, className),
+			...props
+		});
+	};
+}
+const OverlayPanelHeader = createOverlayPanelPart("flex shrink-0 flex-col gap-2.5");
+const OverlayPanelBody = createOverlayPanelPart("min-h-0 flex-1 overflow-auto -mx-6 px-6 py-1.5 -my-1.5");
+const OverlayPanelFooter = createOverlayPanelPart("flex shrink-0 justify-end space-x-2");
+
+//#endregion
+export { OverlayPanelBody, OverlayPanelFooter, OverlayPanelHeader };

package/dist/rating/Rating.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime21 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?: "default" | "sm" | "lg" | "xl" | null | undefined;
+  size?: "sm" | "default" | "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_runtime14.JSX.Element;
+}: RatingButtonProps): react_jsx_runtime21.JSX.Element;
 declare function Rating({
   value: valueProp,
   defaultValue,
@@ -53,6 +53,6 @@ declare function Rating({
   children,
   id,
   ...props
-}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime14.JSX.Element;
+}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime21.JSX.Element;
 //#endregion
 export { Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps };

package/dist/rating/Rating.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime19 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?: "default" | "sm" | "lg" | "xl" | null | undefined;
+  size?: "sm" | "default" | "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_runtime21.JSX.Element;
+}: RatingButtonProps): react_jsx_runtime19.JSX.Element;
 declare function Rating({
   value: valueProp,
   defaultValue,
@@ -53,6 +53,6 @@ declare function Rating({
   children,
   id,
   ...props
-}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime21.JSX.Element;
+}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime19.JSX.Element;
 //#endregion
 export { Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps };

package/dist/rich-text-editor/RichTextEditor.cjs

@@ -12,6 +12,8 @@ let __tiptap_extension_placeholder = require("@tiptap/extension-placeholder");
 __tiptap_extension_placeholder = require_rolldown_runtime.__toESM(__tiptap_extension_placeholder);
 let __tiptap_extension_text_align = require("@tiptap/extension-text-align");
 __tiptap_extension_text_align = require_rolldown_runtime.__toESM(__tiptap_extension_text_align);
+let __tiptap_extensions_character_count = require("@tiptap/extensions/character-count");
+__tiptap_extensions_character_count = require_rolldown_runtime.__toESM(__tiptap_extensions_character_count);
 let __tiptap_react = require("@tiptap/react");
 __tiptap_react = require_rolldown_runtime.__toESM(__tiptap_react);
 let __tiptap_starter_kit = require("@tiptap/starter-kit");
@@ -66,7 +68,7 @@ function useEditorProps(slots, customEditorProps, openOnClick = false) {
 		openOnClick
 	]);
 }
-const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native", placeholder, allowLinkTarget = false, openOnClick = false, className }) => {
+const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native", placeholder, maxLength, allowLinkTarget = false, openOnClick = false, className }) => {
 	const [renderTick, forceRender] = react.default.useReducer((x) => x + 1, 0);
 	const mergedEditorProps = useEditorProps(slots, customEditorProps, openOnClick);
 	const onChangeRef = react.default.useRef(onChange);
@@ -88,10 +90,12 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 				__tiptap_extension_text_align.default.configure({ types: ["heading", "paragraph"] })
 			];
 			if (placeholder != null) baseExtensions.push(__tiptap_extension_placeholder.default.configure({ placeholder }));
+			if (maxLength != null) baseExtensions.push(__tiptap_extensions_character_count.CharacterCount.configure({ limit: maxLength }));
 			return baseExtensions.concat(extensions);
 		}, [
 			extensions,
 			placeholder,
+			maxLength,
 			openOnClick
 		]),
 		content: value,
@@ -117,29 +121,44 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 		};
 	}, [editorInstance]);
 	if (editorInstance == null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "rich-text-editor",
 		className: (0, __pixpilot_shadcn.cn)("flex flex-col overflow-hidden border rounded-md bg-background", slots?.root?.className),
 		children: [showToolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, __pixpilot_shadcn.cn)("flex flex-wrap items-center gap-1 border-b p-2 h-10 shrink-0", slots?.toolbar?.className) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: (0, __pixpilot_shadcn.cn)("flex-1 overflow-y-auto min-h-[200px] p-4 text-sm leading-relaxed", slots?.content?.className),
 			children: "Loading editor..."
 		})]
 	});
+	const characterCount = maxLength == null ? 0 : editorInstance.storage.characterCount.characters();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "rich-text-editor",
 		className: (0, __pixpilot_shadcn.cn)("flex flex-col overflow-hidden border rounded-md bg-background", slots?.root?.className, className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RichTextEditorToolbar.RichTextEditorToolbar, {
-			editor: editorInstance,
-			toolbarItems,
-			slots,
-			showToolbar,
-			renderTick,
-			tooltipMode,
-			allowLinkTarget
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex-1 min-h-0 overflow-y-auto",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react.EditorContent, {
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RichTextEditorToolbar.RichTextEditorToolbar, {
 				editor: editorInstance,
-				"data-slot": "editor-content"
+				toolbarItems,
+				slots,
+				showToolbar,
+				renderTick,
+				tooltipMode,
+				allowLinkTarget
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex-1 min-h-0 overflow-y-auto",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react.EditorContent, {
+					editor: editorInstance,
+					"data-slot": "editor-content"
+				})
+			}),
+			maxLength != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-slot": "character-count",
+				className: (0, __pixpilot_shadcn.cn)("shrink-0 border-t px-3 py-1.5 text-xs tabular-nums text-muted-foreground text-right", characterCount >= maxLength && "text-destructive", slots?.characterCount?.className),
+				children: [
+					characterCount,
+					" / ",
+					maxLength
+				]
 			})
-		})]
+		]
 	});
 };
 RichTextEditor.displayName = "RichTextEditor";

package/dist/rich-text-editor/RichTextEditor.d.cts

@@ -27,6 +27,9 @@ interface RichTextEditorSlots {
   content?: {
     className?: string;
   };
+  characterCount?: {
+    className?: string;
+  };
 }
 interface RichTextEditorProps {
   /**
@@ -58,6 +61,7 @@ interface RichTextEditorProps {
    * - `slots.toolbar.button.className`: each toolbar button
    * - `slots.toolbar.separator.className`: separators (`|`)
    * - `slots.content.className`: editor content area (merged into TipTap `editorProps.attributes.class`)
+   * - `slots.characterCount.className`: character counter shown when `maxLength` is set
    */
   slots?: RichTextEditorSlots;
   /**
@@ -89,6 +93,14 @@ interface RichTextEditorProps {
    * Placeholder text to show when the editor is empty
    */
   placeholder?: string;
+  /**
+   * Maximum number of characters allowed in the editor. When set, input beyond
+   * the limit is rejected and a `current / max` counter is rendered below the
+   * content area.
+   *
+   * The count is based on the plain text content, not the HTML markup.
+   */
+  maxLength?: number;
   /**
    * Whether the link popover should expose target controls.
    * When false, links are always written without `target` and `rel`.

package/dist/rich-text-editor/RichTextEditor.d.ts

@@ -27,6 +27,9 @@ interface RichTextEditorSlots {
   content?: {
     className?: string;
   };
+  characterCount?: {
+    className?: string;
+  };
 }
 interface RichTextEditorProps {
   /**
@@ -58,6 +61,7 @@ interface RichTextEditorProps {
    * - `slots.toolbar.button.className`: each toolbar button
    * - `slots.toolbar.separator.className`: separators (`|`)
    * - `slots.content.className`: editor content area (merged into TipTap `editorProps.attributes.class`)
+   * - `slots.characterCount.className`: character counter shown when `maxLength` is set
    */
   slots?: RichTextEditorSlots;
   /**
@@ -89,6 +93,14 @@ interface RichTextEditorProps {
    * Placeholder text to show when the editor is empty
    */
   placeholder?: string;
+  /**
+   * Maximum number of characters allowed in the editor. When set, input beyond
+   * the limit is rejected and a `current / max` counter is rendered below the
+   * content area.
+   *
+   * The count is based on the plain text content, not the HTML markup.
+   */
+  maxLength?: number;
   /**
    * Whether the link popover should expose target controls.
    * When false, links are always written without `target` and `rel`.

package/dist/rich-text-editor/RichTextEditor.js

@@ -5,6 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
 import TextAlign from "@tiptap/extension-text-align";
+import { CharacterCount } from "@tiptap/extensions/character-count";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 
@@ -57,7 +58,7 @@ function useEditorProps(slots, customEditorProps, openOnClick = false) {
 		openOnClick
 	]);
 }
-const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native", placeholder, allowLinkTarget = false, openOnClick = false, className }) => {
+const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native", placeholder, maxLength, allowLinkTarget = false, openOnClick = false, className }) => {
 	const [renderTick, forceRender] = React.useReducer((x) => x + 1, 0);
 	const mergedEditorProps = useEditorProps(slots, customEditorProps, openOnClick);
 	const onChangeRef = React.useRef(onChange);
@@ -79,10 +80,12 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 				TextAlign.configure({ types: ["heading", "paragraph"] })
 			];
 			if (placeholder != null) baseExtensions.push(Placeholder.configure({ placeholder }));
+			if (maxLength != null) baseExtensions.push(CharacterCount.configure({ limit: maxLength }));
 			return baseExtensions.concat(extensions);
 		}, [
 			extensions,
 			placeholder,
+			maxLength,
 			openOnClick
 		]),
 		content: value,
@@ -108,29 +111,44 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 		};
 	}, [editorInstance]);
 	if (editorInstance == null) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "rich-text-editor",
 		className: cn("flex flex-col overflow-hidden border rounded-md bg-background", slots?.root?.className),
 		children: [showToolbar && /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-1 border-b p-2 h-10 shrink-0", slots?.toolbar?.className) }), /* @__PURE__ */ jsx("div", {
 			className: cn("flex-1 overflow-y-auto min-h-[200px] p-4 text-sm leading-relaxed", slots?.content?.className),
 			children: "Loading editor..."
 		})]
 	});
+	const characterCount = maxLength == null ? 0 : editorInstance.storage.characterCount.characters();
 	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "rich-text-editor",
 		className: cn("flex flex-col overflow-hidden border rounded-md bg-background", slots?.root?.className, className),
-		children: [/* @__PURE__ */ jsx(RichTextEditorToolbar, {
-			editor: editorInstance,
-			toolbarItems,
-			slots,
-			showToolbar,
-			renderTick,
-			tooltipMode,
-			allowLinkTarget
-		}), /* @__PURE__ */ jsx("div", {
-			className: "flex-1 min-h-0 overflow-y-auto",
-			children: /* @__PURE__ */ jsx(EditorContent, {
+		children: [
+			/* @__PURE__ */ jsx(RichTextEditorToolbar, {
 				editor: editorInstance,
-				"data-slot": "editor-content"
+				toolbarItems,
+				slots,
+				showToolbar,
+				renderTick,
+				tooltipMode,
+				allowLinkTarget
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 min-h-0 overflow-y-auto",
+				children: /* @__PURE__ */ jsx(EditorContent, {
+					editor: editorInstance,
+					"data-slot": "editor-content"
+				})
+			}),
+			maxLength != null && /* @__PURE__ */ jsxs("div", {
+				"data-slot": "character-count",
+				className: cn("shrink-0 border-t px-3 py-1.5 text-xs tabular-nums text-muted-foreground text-right", characterCount >= maxLength && "text-destructive", slots?.characterCount?.className),
+				children: [
+					characterCount,
+					" / ",
+					maxLength
+				]
 			})
-		})]
+		]
 	});
 };
 RichTextEditor.displayName = "RichTextEditor";

package/dist/rich-text-editor/mcp.js

@@ -27,8 +27,12 @@ const meta = {
 		toolbarItems: "Explicit toolbar items: predefined command strings, \"|\" separators, or custom button objects.",
 		extensions: "Additional TipTap extensions appended to the built-in ones (StarterKit, Link, TextAlign, Placeholder). Accepts any TipTap Extension, Node, or Mark — official packages or your own custom ones. See the \"Add a custom extension\" example.",
 		editorProps: "Custom TipTap editorProps merged into the defaults.",
-		slots: "Class overrides for the root, toolbar (and its buttons/separators), and content area.",
+		slots: "Class overrides for the root, toolbar (and its buttons/separators), content area, and character counter.",
 		placeholder: "Placeholder text shown when the editor is empty.",
+		maxLength: {
+			description: "Maximum number of characters allowed. Input beyond the limit is rejected and a \"current / max\" counter is rendered below the content area. Counts plain text, not HTML markup.",
+			type: "number"
+		},
 		tooltipMode: {
 			description: "How toolbar button tooltips are rendered.",
 			type: "ToolbarButtonTooltipMode",
@@ -67,6 +71,10 @@ const meta = {
 			title: "Custom toolbar",
 			code: "<RichTextEditor value={html} onChange={setHtml} toolbarItems={[\"bold\", \"italic\", \"|\", \"bulletList\"]} />"
 		},
+		{
+			title: "Limit the content length",
+			code: "<RichTextEditor value={html} onChange={setHtml} maxLength={280} />"
+		},
 		{
 			title: "Add an official extension",
 			code: `// npm i @tiptap/extension-highlight

package/dist/select/Select.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { Select, SelectContent, SelectTrigger } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
 
@@ -60,6 +60,6 @@ type BaseSelectProps = {
   /** Styles the visible trigger. */
   className?: string;
 } & Omit<ComponentProps<typeof SelectTrigger>, 'onChange' | 'value'>;
-declare function Select$1(props: BaseSelectProps): react_jsx_runtime22.JSX.Element;
+declare function Select$1(props: BaseSelectProps): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { BaseSelectProps, Select$1 as Select, SelectContentProps, SelectOption };

package/dist/select/Select.d.ts

@@ -1,6 +1,6 @@
 import { Select, SelectContent, SelectTrigger } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/select/Select.d.ts
 interface SelectOption {
@@ -60,6 +60,6 @@ type BaseSelectProps = {
   /** Styles the visible trigger. */
   className?: string;
 } & Omit<ComponentProps<typeof SelectTrigger>, 'onChange' | 'value'>;
-declare function Select$1(props: BaseSelectProps): react_jsx_runtime20.JSX.Element;
+declare function Select$1(props: BaseSelectProps): react_jsx_runtime21.JSX.Element;
 //#endregion
 export { BaseSelectProps, Select$1 as Select, SelectContentProps, SelectOption };

package/dist/tags-input/TagsInputInline.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInputInline.d.ts
 interface TagsInputInlineItem {
@@ -77,6 +77,6 @@ declare function TagsInputInline({
   canAddCurrentValue,
   onAddCurrentInput,
   showClear
-}: TagsInputInlineProps): react_jsx_runtime23.JSX.Element;
+}: TagsInputInlineProps): react_jsx_runtime22.JSX.Element;
 //#endregion
 export { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps };

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime25 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeDropdown.d.ts
 interface ThemeModeDropdownProps {
@@ -18,7 +18,7 @@ interface ThemeModeDropdownProps {
  * Provides Light / Dark / System options.
  * Pure component - requires themeValue and onChange props.
  */
-declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime25.JSX.Element;
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime26.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

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

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

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "3.6.1",
+  "version": "3.8.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -46,10 +46,11 @@
     "@tiptap/extension-link": "^3.22.3",
     "@tiptap/extension-placeholder": "^3.22.3",
     "@tiptap/extension-text-align": "^3.22.3",
+    "@tiptap/extensions": "^3.22.3",
     "@tiptap/react": "^3.22.3",
     "@tiptap/starter-kit": "^3.22.3",
     "class-variance-authority": "^0.7.1",
-    "lucide-react": "1.25.0",
+    "lucide-react": "1.26.0",
     "next-themes": "0.4.6",
     "pretty-bytes": "^7.1.0",
     "react-responsive": "^10.0.1",
@@ -74,8 +75,8 @@
     "@internal/eslint-config": "0.3.0",
     "@internal/mcp": "0.0.0",
     "@internal/prettier-config": "0.0.1",
-    "@internal/tsconfig": "0.1.0",
     "@internal/hooks": "0.0.0",
+    "@internal/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"
   },