@pixpilot/shadcn-ui 1.39.0 → 2.0.0

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

package/dist/input/mcp.js

@@ -0,0 +1,33 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/input/mcp.ts
+const meta = {
+	name: "Input",
+	category: "Forms",
+	description: "A text input that renders as a plain shadcn input, or as an input group with prefix/suffix addons when either is provided.",
+	htmlElement: "input",
+	props: defineProps({
+		prefix: "Content rendered as an addon before the input (e.g. an icon or \"$\").",
+		suffix: "Content rendered as an addon after the input (e.g. a unit or button).",
+		groupClassName: "Class applied to the input group wrapper when prefix/suffix is used.",
+		prefixClassName: "Class applied to the prefix addon element.",
+		suffixClassName: "Class applied to the suffix addon element."
+	}),
+	examples: [{
+		title: "Plain input",
+		code: "<Input placeholder=\"Email\" value={email} onChange={(e) => setEmail(e.target.value)} />"
+	}, {
+		title: "Input with addons",
+		code: "<Input prefix=\"$\" suffix=\"USD\" placeholder=\"0.00\" />"
+	}],
+	keywords: [
+		"input",
+		"text",
+		"field",
+		"form",
+		"addon"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/layout/mcp.js

@@ -0,0 +1,29 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/layout/mcp.ts
+const meta = {
+	name: "Layout",
+	category: "Layout",
+	description: "A full-height flex column page shell that handles mobile browser chrome, composed with LayoutHeader, LayoutMain, and LayoutFooter.",
+	htmlElement: "div",
+	props: defineProps({ as: {
+		description: "Element or component type to render as the layout container.",
+		type: "React.ElementType",
+		defaultValue: "\"div\""
+	} }),
+	notes: ["Compose with LayoutHeader, LayoutMain, and LayoutFooter for the standard app shell."],
+	examples: [{
+		title: "App shell",
+		code: "<Layout>\n  <LayoutHeader>{nav}</LayoutHeader>\n  <LayoutMain>{content}</LayoutMain>\n  <LayoutFooter>{footer}</LayoutFooter>\n</Layout>"
+	}],
+	keywords: [
+		"layout",
+		"shell",
+		"page",
+		"flex",
+		"container"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/loading-overlay/mcp.js

@@ -0,0 +1,64 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/loading-overlay/mcp.ts
+const meta = {
+	name: "LoadingOverlay",
+	category: "Feedback",
+	description: "A spinner overlay that fades in over its container or the full viewport while a task is loading, with optional message and show/hide delays.",
+	props: defineProps({
+		show: {
+			description: "Whether the overlay is visible.",
+			type: "boolean"
+		},
+		backdrop: {
+			description: "Shows a semi-transparent backdrop behind the spinner.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		placement: {
+			description: "Vertical alignment of the loader within the overlay.",
+			type: "\"top\" | \"bottom\" | \"center\"",
+			defaultValue: "\"center\""
+		},
+		message: "Optional message rendered below the spinner.",
+		inDelay: {
+			description: "Delay in milliseconds before showing the loader.",
+			type: "number",
+			defaultValue: "0"
+		},
+		outDelay: {
+			description: "Delay in milliseconds before hiding the loader after `show` becomes false.",
+			type: "number",
+			defaultValue: "0"
+		},
+		scope: {
+			description: "Whether the overlay fills its relative parent (\"container\") or the viewport (\"fullscreen\").",
+			type: "\"container\" | \"fullscreen\"",
+			defaultValue: "\"container\""
+		},
+		size: {
+			description: "Spinner size.",
+			type: "\"sm\" | \"default\" | \"lg\"",
+			defaultValue: "\"default\""
+		},
+		slots: "Props forwarded to the inner spinner, message, and content elements.",
+		className: "Additional CSS class applied to the overlay wrapper."
+	}),
+	examples: [{
+		title: "Container overlay",
+		code: "<div className=\"relative\">{content}<LoadingOverlay show={isLoading} message=\"Loading…\" /></div>"
+	}, {
+		title: "Fullscreen overlay",
+		code: "<LoadingOverlay show={isLoading} scope=\"fullscreen\" />"
+	}],
+	keywords: [
+		"loading",
+		"overlay",
+		"spinner",
+		"busy",
+		"feedback"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/pagination/mcp.js

@@ -0,0 +1,65 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/pagination/mcp.ts
+const meta = {
+	name: "Pagination",
+	category: "Navigation",
+	description: "A page navigation control with full, simple, and compact variants, ellipsis handling, and optional page-info text.",
+	props: defineProps({
+		id: "Optional id attribute applied to the pagination navigation element.",
+		className: "Additional CSS class applied to the pagination navigation element.",
+		page: {
+			description: "Current page number (1-indexed).",
+			type: "number"
+		},
+		totalPages: {
+			description: "Total number of pages. The component renders nothing when this is <= 1.",
+			type: "number"
+		},
+		onPageChange: {
+			description: "Called with the event and the next page number when a page is selected.",
+			type: "(event: React.ChangeEvent<unknown>, page: number) => void"
+		},
+		maxVisiblePages: {
+			description: "Maximum page numbers to display before using ellipsis. Set to 0 to show only prev/next.",
+			type: "number",
+			defaultValue: "4"
+		},
+		variant: {
+			description: "Layout style: \"full\" (numbers), \"simple\" (prev/next only), or \"compact\" (page indicator with all nav buttons).",
+			type: "\"full\" | \"simple\" | \"compact\"",
+			defaultValue: "\"full\""
+		},
+		size: {
+			description: "Size of the pagination control.",
+			type: "\"small\" | \"medium\" | \"large\"",
+			defaultValue: "\"medium\""
+		},
+		showFirstLastButtons: {
+			description: "Whether to show first/last page buttons.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		showPageInfo: {
+			description: "Whether to show \"Page X of Y\" text (used with the \"simple\" variant).",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	examples: [{
+		title: "Full pagination",
+		code: "<Pagination page={page} totalPages={10} onPageChange={(_, next) => setPage(next)} />"
+	}, {
+		title: "Compact pagination",
+		code: "<Pagination page={page} totalPages={10} onPageChange={(_, next) => setPage(next)} variant=\"compact\" />"
+	}],
+	keywords: [
+		"pagination",
+		"pager",
+		"pages",
+		"navigation"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/popover/mcp.js

@@ -0,0 +1,27 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/popover/mcp.ts
+const meta = {
+	name: "Popover",
+	category: "Overlays",
+	description: "A floating popover built on Radix, composed of Popover, PopoverTrigger, and PopoverContent, with content pre-sized to the available viewport space and a styleless PopoverContentUnstyled variant.",
+	props: defineProps({}),
+	examples: [{
+		title: "Basic popover",
+		code: "<Popover>\n  <PopoverTrigger asChild><Button variant=\"outline\">Open</Button></PopoverTrigger>\n  <PopoverContent>Popover body</PopoverContent>\n</Popover>"
+	}, {
+		title: "Unstyled content",
+		code: "<Popover>\n  <PopoverTrigger>Open</PopoverTrigger>\n  <PopoverContentUnstyled>{custom}</PopoverContentUnstyled>\n</Popover>"
+	}],
+	notes: ["PopoverContent forwards all Radix PopoverContent props (align, side, sideOffset, etc.)."],
+	related: ["Combobox", "Tooltip"],
+	keywords: [
+		"popover",
+		"overlay",
+		"floating",
+		"dropdown"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/rating/Rating.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime15 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";
@@ -35,7 +35,7 @@ declare function RatingButton({
   index,
   className,
   ...props
-}: RatingButtonProps): react_jsx_runtime13.JSX.Element;
+}: RatingButtonProps): react_jsx_runtime15.JSX.Element;
 declare function Rating({
   value: valueProp,
   defaultValue,
@@ -53,6 +53,6 @@ declare function Rating({
   children,
   id,
   ...props
-}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime13.JSX.Element;
+}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime15.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_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
 
@@ -35,7 +35,7 @@ declare function RatingButton({
   index,
   className,
   ...props
-}: RatingButtonProps): react_jsx_runtime15.JSX.Element;
+}: RatingButtonProps): react_jsx_runtime20.JSX.Element;
 declare function Rating({
   value: valueProp,
   defaultValue,
@@ -53,6 +53,6 @@ declare function Rating({
   children,
   id,
   ...props
-}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime15.JSX.Element;
+}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime20.JSX.Element;
 //#endregion
 export { Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps };

package/dist/rating/mcp.js

@@ -0,0 +1,73 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/rating/mcp.ts
+const meta = {
+	name: "Rating",
+	category: "Forms",
+	description: "An accessible star/circle rating input supporting controlled or uncontrolled value, hover preview, keyboard navigation, and a hidden form field.",
+	htmlElement: "div",
+	props: defineProps({
+		value: {
+			description: "Controlled rating value.",
+			type: "number"
+		},
+		defaultValue: {
+			description: "Initial value when uncontrolled.",
+			type: "number"
+		},
+		onValueChange: {
+			description: "Called with the new rating value when the selection changes.",
+			type: "(value: number) => void"
+		},
+		max: {
+			description: "Number of rating items when `options` is not provided.",
+			type: "number",
+			defaultValue: "5"
+		},
+		options: "Explicit rating items as `{ label, value }[]`; overrides `max` and provides accessible labels.",
+		iconType: {
+			description: "Glyph used for each rating item.",
+			type: "\"star\" | \"circle\"",
+			defaultValue: "\"star\""
+		},
+		size: {
+			description: "Icon size.",
+			type: "\"sm\" | \"default\" | \"lg\" | \"xl\"",
+			defaultValue: "\"default\""
+		},
+		readOnly: {
+			description: "Renders the rating as non-interactive display only.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		disabled: {
+			description: "Disables interaction and dims the control.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		name: "Name for the hidden input, so the value participates in native form submission.",
+		required: "Marks the hidden form input as required.",
+		color: {
+			description: "Color theme applied to the filled icons.",
+			type: "\"default\" | \"primary\" | \"secondary\" | \"destructive\" | \"foreground\" | \"accent\" | \"muted\" | \"ring\"",
+			defaultValue: "\"default\""
+		}
+	}),
+	examples: [{
+		title: "Controlled rating",
+		code: "<Rating value={rating} onValueChange={setRating} max={5} />"
+	}, {
+		title: "Read-only circles",
+		code: "<Rating value={4} readOnly iconType=\"circle\" color=\"primary\" />"
+	}],
+	keywords: [
+		"rating",
+		"stars",
+		"review",
+		"score",
+		"form"
+	]
+};
+
+//#endregion
+export { meta };

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

@@ -0,0 +1,78 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/rich-text-editor/mcp.ts
+const meta = {
+	name: "RichTextEditor",
+	category: "Forms",
+	description: "A TipTap-based WYSIWYG editor with a configurable toolbar (bold, italic, headings, lists, links, alignment, code) that reads and writes HTML.",
+	props: defineProps({
+		value: {
+			description: "HTML content of the editor (React-style value, mapped to TipTap content).",
+			type: "string"
+		},
+		onChange: {
+			description: "Called with the editor HTML whenever the content changes.",
+			type: "(content: string) => void"
+		},
+		editable: {
+			description: "Whether the editor accepts input.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		showToolbar: {
+			description: "Whether the formatting toolbar is shown.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		toolbarItems: "Explicit toolbar items: predefined command strings, \"|\" separators, or custom button objects.",
+		extensions: "Additional TipTap extensions to add to the editor.",
+		editorProps: "Custom TipTap editorProps merged into the defaults.",
+		slots: "Class overrides for the root, toolbar (and its buttons/separators), and content area.",
+		placeholder: "Placeholder text shown when the editor is empty.",
+		tooltipMode: {
+			description: "How toolbar button tooltips are rendered.",
+			type: "ToolbarButtonTooltipMode",
+			defaultValue: "\"native\""
+		},
+		immediatelyRender: {
+			description: "Render the editor immediately on mount (helps with SSR/hydration).",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		allowLinkTarget: {
+			description: "Whether the link popover exposes target controls.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		openOnClick: {
+			description: "Whether clicking a link opens it inside the editor.",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	dependencies: [{
+		name: "@tiptap/react",
+		type: "peer"
+	}, {
+		name: "@tiptap/starter-kit",
+		type: "peer"
+	}],
+	examples: [{
+		title: "Basic editor",
+		code: "<RichTextEditor value={html} onChange={setHtml} placeholder=\"Write something…\" />"
+	}, {
+		title: "Custom toolbar",
+		code: "<RichTextEditor value={html} onChange={setHtml} toolbarItems={[\"bold\", \"italic\", \"|\", \"bulletList\"]} />"
+	}],
+	keywords: [
+		"rich text",
+		"editor",
+		"wysiwyg",
+		"tiptap",
+		"html",
+		"form"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/scaled-preview/mcp.js

@@ -0,0 +1,47 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/scaled-preview/mcp.ts
+const meta = {
+	name: "ScaledPreview",
+	category: "Layout",
+	description: "Renders fixed-size content scaled to fit a smaller preview box, keeping the content centered — useful for thumbnails and design previews.",
+	htmlElement: "div",
+	props: defineProps({
+		scaleFactor: {
+			description: "Scale factor for the preview box relative to baseSize (e.g. 0.5 = 50%). Ignored when previewBoxSize is set.",
+			type: "number"
+		},
+		baseSize: {
+			description: "Intrinsic content dimensions being scaled.",
+			type: "{ width: number; height: number }",
+			defaultValue: "{ width: 1000, height: 1000 }"
+		},
+		previewBoxSize: {
+			description: "Explicit preview box size. When provided, overrides scaleFactor.",
+			type: "{ width: number; height: number }"
+		},
+		padding: {
+			description: "Padding in pixels that reduces the space available for the scaled content.",
+			type: "number",
+			defaultValue: "0"
+		},
+		forceScale: {
+			description: "Manual content scale override that bypasses the automatic fit calculation.",
+			type: "number"
+		}
+	}),
+	examples: [{
+		title: "Half-scale preview",
+		code: "<ScaledPreview scaleFactor={0.25} baseSize={{ width: 1080, height: 1080 }}>\n  {content}\n</ScaledPreview>"
+	}],
+	keywords: [
+		"preview",
+		"scale",
+		"thumbnail",
+		"zoom",
+		"layout"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/select/Select.cjs

@@ -12,7 +12,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/select/Select.tsx
 function Select(props) {
-	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, position, clearable = false, disabled, className, id,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, position, clearable = false, disabled, name, required, className, id,...triggerProps } = props;
 	const [uncontrolledOpen, setUncontrolledOpen] = react.default.useState(false);
 	const open = openProp ?? uncontrolledOpen;
 	const handleOpenChange = (nextOpen) => {
@@ -28,14 +28,16 @@ function Select(props) {
 		getValue: (option) => String(option.value)
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Select, {
-		...restProps,
 		value,
 		open,
 		onValueChange: onChange,
 		onOpenChange: handleOpenChange,
+		name,
+		required,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative w-full",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectTrigger, {
+				...triggerProps,
 				id,
 				className: (0, __pixpilot_shadcn.cn)("w-full", className),
 				onKeyDown: handleTriggerKeyDown,

package/dist/select/Select.d.cts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime15 from "react/jsx-runtime";
-import { Select, SelectContent } from "@pixpilot/shadcn";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
+import { Select, SelectContent, SelectTrigger } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
 
 //#region src/select/Select.d.ts
@@ -45,12 +45,21 @@ type BaseSelectProps = {
    * Whether to show a clear button when a value is selected
    */
   clearable?: boolean;
+  /**
+   * Controlled open state of the dropdown
+   */
+  open?: ComponentProps<typeof Select>['open'];
+  /**
+   * Callback function called when the open state changes
+   */
+  onOpenChange?: ComponentProps<typeof Select>['onOpenChange'];
   id?: string;
   disabled?: boolean;
   name?: string;
   required?: boolean;
+  /** Styles the visible trigger. */
   className?: string;
-} & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children' | 'disabled' | 'name' | 'required'>;
-declare function Select$1(props: BaseSelectProps): react_jsx_runtime15.JSX.Element;
+} & Omit<ComponentProps<typeof SelectTrigger>, 'onChange' | 'value'>;
+declare function Select$1(props: BaseSelectProps): react_jsx_runtime17.JSX.Element;
 //#endregion
 export { BaseSelectProps, Select$1 as Select, SelectContentProps, SelectOption };

package/dist/select/Select.d.ts

@@ -1,6 +1,6 @@
-import { Select, SelectContent } from "@pixpilot/shadcn";
+import { Select, SelectContent, SelectTrigger } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/select/Select.d.ts
 interface SelectOption {
@@ -45,12 +45,21 @@ type BaseSelectProps = {
    * Whether to show a clear button when a value is selected
    */
   clearable?: boolean;
+  /**
+   * Controlled open state of the dropdown
+   */
+  open?: ComponentProps<typeof Select>['open'];
+  /**
+   * Callback function called when the open state changes
+   */
+  onOpenChange?: ComponentProps<typeof Select>['onOpenChange'];
   id?: string;
   disabled?: boolean;
   name?: string;
   required?: boolean;
+  /** Styles the visible trigger. */
   className?: string;
-} & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children' | 'disabled' | 'name' | 'required'>;
-declare function Select$1(props: BaseSelectProps): react_jsx_runtime17.JSX.Element;
+} & Omit<ComponentProps<typeof SelectTrigger>, 'onChange' | 'value'>;
+declare function Select$1(props: BaseSelectProps): react_jsx_runtime22.JSX.Element;
 //#endregion
 export { BaseSelectProps, Select$1 as Select, SelectContentProps, SelectOption };

package/dist/select/Select.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/select/Select.tsx
 function Select$1(props) {
-	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, position, clearable = false, disabled, className, id,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, position, clearable = false, disabled, name, required, className, id,...triggerProps } = props;
 	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
 	const open = openProp ?? uncontrolledOpen;
 	const handleOpenChange = (nextOpen) => {
@@ -23,14 +23,16 @@ function Select$1(props) {
 		getValue: (option) => String(option.value)
 	});
 	return /* @__PURE__ */ jsxs(Select, {
-		...restProps,
 		value,
 		open,
 		onValueChange: onChange,
 		onOpenChange: handleOpenChange,
+		name,
+		required,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "relative w-full",
 			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				...triggerProps,
 				id,
 				className: cn("w-full", className),
 				onKeyDown: handleTriggerKeyDown,