@pixpilot/shadcn-ui 1.39.0 → 2.0.1

package/dist/file-upload-inline/mcp.js

@@ -0,0 +1,89 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/file-upload-inline/mcp.ts
+const meta = {
+	name: "FileUploadInline",
+	category: "Forms",
+	description: "A compact inline file upload rendered as a button with an optional icon and selected-file list, built on FileUploadRoot.",
+	props: defineProps({
+		buttonText: {
+			description: "Label shown on the upload button when no file is selected.",
+			type: "string"
+		},
+		showIcon: {
+			description: "Shows a file icon on the upload button.",
+			type: "boolean"
+		},
+		children: "Optional custom trigger content rendered inside the upload root.",
+		slots: "Props for the internal parts: `trigger` (button), `dropzone` (div), and `fileItem`.",
+		value: "Controlled file metadata value (array in multiple mode, single item/null otherwise).",
+		onChange: "Called with the new file metadata when the selection changes.",
+		multiple: {
+			description: "Whether multiple files can be selected.",
+			type: "boolean"
+		},
+		accept: {
+			description: "Accepted file types as a native input `accept` string, e.g. \"image/*\".",
+			type: "string"
+		},
+		maxFiles: {
+			description: "Maximum number of files allowed.",
+			type: "number"
+		},
+		maxSize: {
+			description: "Maximum size per file, in bytes.",
+			type: "number"
+		},
+		disabled: {
+			description: "Disables the uploader and its dropzone interactions.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		onValueChange: "Low-level callback fired with the raw `File[]` whenever the underlying upload value changes.",
+		onAccept: "Called with the accepted File(s) when files are selected.",
+		onFileAccept: "Called for each individual file that passes validation and is accepted.",
+		onFileReject: "Called when a single file is rejected, with the file and a reason message.",
+		onFilesReject: "Called when multiple files are rejected at once, with each file and its reason.",
+		onFileValidate: "Custom per-file validator; return an error message string to reject the file, or null/undefined to accept it.",
+		transformFile: "Optional async transform applied to each accepted file before it enters the store; return the same file or a replacement File.",
+		onUpload: "Async upload handler invoked with the accepted files and progress/success/error callbacks.",
+		name: "Form field name submitted with native form integration.",
+		label: "Accessible label for the upload control.",
+		asChild: {
+			description: "Merge behavior and props onto the child element instead of rendering the default wrapper.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		invalid: {
+			description: "Marks the control as invalid for styling and accessibility.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		required: {
+			description: "Marks the field as required for form submission.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		preventDuplicates: {
+			description: "Skips files that duplicate ones already present in the list.",
+			type: "boolean"
+		},
+		onFileSuccess: "Called with the file metadata after a file is successfully processed or uploaded.",
+		onFileError: "Called with the file and an error message when processing or upload fails."
+	}),
+	examples: [{
+		title: "Inline upload",
+		code: "<FileUploadInline buttonText=\"Attach file\" value={files} onChange={setFiles} />"
+	}],
+	related: ["FileUpload", "FileUploadRoot"],
+	keywords: [
+		"file",
+		"upload",
+		"inline",
+		"button",
+		"form"
+	]
+};
+
+//#endregion
+export { meta };

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

@@ -1,11 +1,11 @@
 import { FileUploadRootProps } from "./types.cjs";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime13 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_runtime11.JSX.Element;
+declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime13.JSX.Element;
 declare namespace FileUploadRoot {
   var displayName: string;
 }

package/dist/file-upload-root/mcp.js

@@ -0,0 +1,84 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/file-upload-root/mcp.ts
+const meta = {
+	name: "FileUploadRoot",
+	category: "Forms",
+	description: "A composable file upload root that provides a trigger and dropzone via slots and a custom children trigger, on top of the managed FileUpload store.",
+	props: defineProps({
+		children: "Optional custom trigger content rendered inside the upload root.",
+		slots: "Props for the internal parts: `trigger` (button), `dropzone` (div), and `fileItem`.",
+		value: "Controlled file metadata value (array in multiple mode, single item/null otherwise).",
+		onChange: "Called with the new file metadata when the selection changes.",
+		multiple: {
+			description: "Whether multiple files can be selected.",
+			type: "boolean"
+		},
+		accept: {
+			description: "Accepted file types as a native input `accept` string, e.g. \"image/*\".",
+			type: "string"
+		},
+		maxFiles: {
+			description: "Maximum number of files allowed.",
+			type: "number"
+		},
+		maxSize: {
+			description: "Maximum size per file, in bytes.",
+			type: "number"
+		},
+		disabled: {
+			description: "Disables the uploader and its dropzone interactions.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		onValueChange: "Low-level callback fired with the raw `File[]` whenever the underlying upload value changes.",
+		onAccept: "Called with the accepted File(s) when files are selected.",
+		onFileAccept: "Called for each individual file that passes validation and is accepted.",
+		onFileReject: "Called when a single file is rejected, with the file and a reason message.",
+		onFilesReject: "Called when multiple files are rejected at once, with each file and its reason.",
+		onFileValidate: "Custom per-file validator; return an error message string to reject the file, or null/undefined to accept it.",
+		transformFile: "Optional async transform applied to each accepted file before it enters the store; return the same file or a replacement File.",
+		onUpload: "Async upload handler invoked with the accepted files and progress/success/error callbacks.",
+		name: "Form field name submitted with native form integration.",
+		label: "Accessible label for the upload control.",
+		asChild: {
+			description: "Merge behavior and props onto the child element instead of rendering the default wrapper.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		invalid: {
+			description: "Marks the control as invalid for styling and accessibility.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		required: {
+			description: "Marks the field as required for form submission.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		preventDuplicates: {
+			description: "Skips files that duplicate ones already present in the list.",
+			type: "boolean"
+		},
+		onFileSuccess: "Called with the file metadata after a file is successfully processed or uploaded.",
+		onFileError: "Called with the file and an error message when processing or upload fails."
+	}),
+	examples: [{
+		title: "Custom trigger",
+		code: "<FileUploadRoot value={files} onChange={setFiles} slots={{ trigger: { className: \"w-full\" } }}>\n  <Button>Upload files</Button>\n</FileUploadRoot>"
+	}],
+	related: [
+		"FileUpload",
+		"FileUploadInline",
+		"AvatarUpload"
+	],
+	keywords: [
+		"file",
+		"upload",
+		"dropzone",
+		"form"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/generated/mcp-registry.js

@@ -1,6 +1,45 @@
-import { meta } from "../button/mcp.js";
-import { meta as meta$1 } from "../card/mcp.js";
-import { meta as meta$2 } from "../file-upload/mcp.js";
+import { meta } from "../absolute-fill/mcp.js";
+import { meta as meta$1 } from "../alert/mcp.js";
+import { meta as meta$2 } from "../avatar-upload/mcp.js";
+import { meta as meta$3 } from "../button/mcp.js";
+import { meta as meta$4 } from "../button-extended/mcp.js";
+import { meta as meta$5 } from "../button-group/mcp.js";
+import { meta as meta$6 } from "../card/mcp.js";
+import { meta as meta$7 } from "../circle-loader/mcp.js";
+import { meta as meta$8 } from "../close-button-absolute/mcp.js";
+import { meta as meta$9 } from "../close-button-rounded/mcp.js";
+import { meta as meta$10 } from "../ColorPicker/mcp.js";
+import { meta as meta$11 } from "../ColorPickerBase/mcp.js";
+import { meta as meta$12 } from "../color-select/mcp.js";
+import { meta as meta$13 } from "../combobox/mcp.js";
+import { meta as meta$14 } from "../confirmation-dialog/mcp.js";
+import { meta as meta$15 } from "../content-card/mcp.js";
+import { meta as meta$16 } from "../date-picker/mcp.js";
+import { meta as meta$17 } from "../dialog/mcp.js";
+import { meta as meta$18 } from "../dialog-provider/mcp.js";
+import { meta as meta$19 } from "../file-upload/mcp.js";
+import { meta as meta$20 } from "../file-upload-inline/mcp.js";
+import { meta as meta$21 } from "../file-upload-root/mcp.js";
+import { meta as meta$22 } from "../icon-selector/mcp.js";
+import { meta as meta$23 } from "../icon-toggle/mcp.js";
+import { meta as meta$24 } from "../input/mcp.js";
+import { meta as meta$25 } from "../layout/mcp.js";
+import { meta as meta$26 } from "../loading-overlay/mcp.js";
+import { meta as meta$27 } from "../pagination/mcp.js";
+import { meta as meta$28 } from "../popover/mcp.js";
+import { meta as meta$29 } from "../rating/mcp.js";
+import { meta as meta$30 } from "../rich-text-editor/mcp.js";
+import { meta as meta$31 } from "../scaled-preview/mcp.js";
+import { meta as meta$32 } from "../select/mcp.js";
+import { meta as meta$33 } from "../slider/mcp.js";
+import { meta as meta$34 } from "../tabs/mcp.js";
+import { meta as meta$35 } from "../tags-input/mcp.js";
+import { meta as meta$36 } from "../theme-toggle/mcp.js";
+import { meta as meta$37 } from "../theme-provider/mcp.js";
+import { meta as meta$38 } from "../toast/mcp.js";
+import { meta as meta$39 } from "../toggle-button/mcp.js";
+import { meta as meta$40 } from "../toggle-group/mcp.js";
+import { meta as meta$41 } from "../tooltip/mcp.js";
 
 //#region src/generated/mcp-registry.ts
 function withHtmlElementNote(comp) {
@@ -12,9 +51,48 @@ function withHtmlElementNote(comp) {
 }
 /** Generated component metadata map keyed by public component name. */
 const mcpRegistry = {
-	"Button": withHtmlElementNote(meta),
-	"Card": withHtmlElementNote(meta$1),
-	"FileUpload": withHtmlElementNote(meta$2)
+	"AbsoluteFill": withHtmlElementNote(meta),
+	"Alert": withHtmlElementNote(meta$1),
+	"AvatarUpload": withHtmlElementNote(meta$2),
+	"Button": withHtmlElementNote(meta$3),
+	"ButtonExtended": withHtmlElementNote(meta$4),
+	"ButtonGroup": withHtmlElementNote(meta$5),
+	"Card": withHtmlElementNote(meta$6),
+	"CircleLoader": withHtmlElementNote(meta$7),
+	"CloseButtonAbsolute": withHtmlElementNote(meta$8),
+	"CloseButtonRounded": withHtmlElementNote(meta$9),
+	"ColorPicker": withHtmlElementNote(meta$10),
+	"ColorPickerBase": withHtmlElementNote(meta$11),
+	"ColorSelect": withHtmlElementNote(meta$12),
+	"Combobox": withHtmlElementNote(meta$13),
+	"ConfirmationDialog": withHtmlElementNote(meta$14),
+	"ContentCard": withHtmlElementNote(meta$15),
+	"DatePicker": withHtmlElementNote(meta$16),
+	"Dialog": withHtmlElementNote(meta$17),
+	"DialogProvider": withHtmlElementNote(meta$18),
+	"FileUpload": withHtmlElementNote(meta$19),
+	"FileUploadInline": withHtmlElementNote(meta$20),
+	"FileUploadRoot": withHtmlElementNote(meta$21),
+	"IconPicker": withHtmlElementNote(meta$22),
+	"IconToggle": withHtmlElementNote(meta$23),
+	"Input": withHtmlElementNote(meta$24),
+	"Layout": withHtmlElementNote(meta$25),
+	"LoadingOverlay": withHtmlElementNote(meta$26),
+	"Pagination": withHtmlElementNote(meta$27),
+	"Popover": withHtmlElementNote(meta$28),
+	"Rating": withHtmlElementNote(meta$29),
+	"RichTextEditor": withHtmlElementNote(meta$30),
+	"ScaledPreview": withHtmlElementNote(meta$31),
+	"Select": withHtmlElementNote(meta$32),
+	"Slider": withHtmlElementNote(meta$33),
+	"Tabs": withHtmlElementNote(meta$34),
+	"TagsInput": withHtmlElementNote(meta$35),
+	"ThemeModeToggleButton": withHtmlElementNote(meta$36),
+	"ThemeProvider": withHtmlElementNote(meta$37),
+	"Toast": withHtmlElementNote(meta$38),
+	"ToggleButton": withHtmlElementNote(meta$39),
+	"ToggleGroup": withHtmlElementNote(meta$40),
+	"Tooltip": withHtmlElementNote(meta$41)
 };
 
 //#endregion

package/dist/icon-selector/IconPicker.cjs

@@ -20,7 +20,7 @@ __iconify_react = require_rolldown_runtime.__toESM(__iconify_react);
 
 //#region src/icon-selector/IconPicker.tsx
 const ICON_SIZE = "!h-4 !w-4";
-const IconPicker = ({ id, value, onChange, onOpenChange, pickerMode = "dialog", popoverProps, variant = "default", providers: providersProp, showValueText = true, emptyText = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: ICON_SIZE }), showClearButton = true, slots }) => {
+const IconPicker = ({ id, value, onChange, onOpenChange, pickerMode = "dialog", popoverProps, variant = "default", providers: providersProp, showValueText = true, emptyText = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: ICON_SIZE }), showClearButton = true, slots, className }) => {
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const isMobile = require_use_media_query.useMediaQuery({ maxWidth: 768 });
 	const handleSelectIcon = (0, react.useCallback)((iconName) => {
@@ -73,7 +73,7 @@ const IconPicker = ({ id, value, onChange, onOpenChange, pickerMode = "dialog",
 			type: "button",
 			variant: "outline",
 			"aria-label": iconButtonLabel,
-			className: (0, __pixpilot_shadcn.cn)("p-2 min-w-10", slots?.preview?.className),
+			className: (0, __pixpilot_shadcn.cn)("p-2 min-w-10", slots?.preview?.className, className),
 			children: [iconButtonContent, shouldShowClearButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
 				id: require_get_id.getId(id, "clear-button"),
 				type: "button",

package/dist/icon-selector/IconPicker.d.cts

@@ -51,6 +51,7 @@ interface IconPickerProps {
       className?: string;
     };
   };
+  className?: string;
 }
 declare const IconPicker: FC<IconPickerProps>;
 //#endregion

package/dist/icon-selector/IconPicker.d.ts

@@ -51,6 +51,7 @@ interface IconPickerProps {
       className?: string;
     };
   };
+  className?: string;
 }
 declare const IconPicker: FC<IconPickerProps>;
 //#endregion

package/dist/icon-selector/IconPicker.js

@@ -14,7 +14,7 @@ import { Icon } from "@iconify/react";
 
 //#region src/icon-selector/IconPicker.tsx
 const ICON_SIZE = "!h-4 !w-4";
-const IconPicker = ({ id, value, onChange, onOpenChange, pickerMode = "dialog", popoverProps, variant = "default", providers: providersProp, showValueText = true, emptyText = /* @__PURE__ */ jsx(Plus, { className: ICON_SIZE }), showClearButton = true, slots }) => {
+const IconPicker = ({ id, value, onChange, onOpenChange, pickerMode = "dialog", popoverProps, variant = "default", providers: providersProp, showValueText = true, emptyText = /* @__PURE__ */ jsx(Plus, { className: ICON_SIZE }), showClearButton = true, slots, className }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const isMobile = useMediaQuery({ maxWidth: 768 });
 	const handleSelectIcon = useCallback((iconName) => {
@@ -66,7 +66,7 @@ const IconPicker = ({ id, value, onChange, onOpenChange, pickerMode = "dialog",
 			type: "button",
 			variant: "outline",
 			"aria-label": iconButtonLabel,
-			className: cn("p-2 min-w-10", slots?.preview?.className),
+			className: cn("p-2 min-w-10", slots?.preview?.className, className),
 			children: [iconButtonContent, shouldShowClearButton && /* @__PURE__ */ jsx(Button$1, {
 				id: getId(id, "clear-button"),
 				type: "button",

package/dist/icon-selector/mcp.js

@@ -0,0 +1,60 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/icon-selector/mcp.ts
+const meta = {
+	name: "IconPicker",
+	category: "Forms",
+	description: "An icon selector that lets users browse and pick icons from one or more Iconify providers, shown in a dialog or popover with search and a virtualized grid.",
+	props: defineProps({
+		id: "Optional id attribute applied to the picker trigger element.",
+		value: "Controlled selected icon name (e.g. \"mdi:home\").",
+		onChange: "Called with the selected icon name, or \"\" when cleared.",
+		providers: "Icon providers to browse. Each is an IconProviderProps object or an async loader.",
+		pickerMode: {
+			description: "How the picker is shown (popover falls back to dialog on mobile).",
+			type: "\"dialog\" | \"popover\"",
+			defaultValue: "\"dialog\""
+		},
+		variant: {
+			description: "Trigger presentation.",
+			type: "\"default\" | \"icon-button\"",
+			defaultValue: "\"default\""
+		},
+		onOpenChange: "Called when the picker opens or closes.",
+		popoverProps: "Props forwarded to the popover content when in popover mode.",
+		isLoading: "Marks the providers as still loading.",
+		onProvidersLoaded: "Called with `{ prefix, name }[]` once async providers resolve.",
+		showValueText: {
+			description: "Shows the selected icon name next to the preview.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		emptyText: "Content shown in the preview when no icon is selected.",
+		showClearButton: {
+			description: "Shows a clear button when an icon is selected.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		slots: "Class overrides for the root, preview, trigger, clear button, and value text.",
+		className: "Class overrides for the root element."
+	}),
+	dependencies: [{
+		name: "@iconify/react",
+		type: "peer",
+		notes: "Renders the icons."
+	}],
+	examples: [{
+		title: "Icon picker",
+		code: "<IconPicker value={icon} onChange={setIcon} providers={[mdiProvider]} />"
+	}],
+	keywords: [
+		"icon",
+		"picker",
+		"selector",
+		"iconify",
+		"form"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/icon-toggle/mcp.js

@@ -0,0 +1,62 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/icon-toggle/mcp.ts
+const meta = {
+	name: "IconToggle",
+	category: "Actions",
+	description: "A square toggle button that swaps between two icons for its checked and unchecked states. Icons may be React nodes or raw SVG markup strings.",
+	htmlElement: "button",
+	props: defineProps({
+		checkedIcon: {
+			description: "Icon shown when checked. Accepts a React node or an SVG markup string.",
+			type: "React.ReactNode | string"
+		},
+		uncheckedIcon: {
+			description: "Icon shown when unchecked. Accepts a React node or an SVG markup string.",
+			type: "React.ReactNode | string"
+		},
+		size: {
+			description: "Controls the button and icon dimensions.",
+			type: "\"sm\" | \"default\" | \"lg\"",
+			defaultValue: "\"default\""
+		},
+		checked: {
+			description: "Controlled checked state.",
+			type: "boolean"
+		},
+		defaultChecked: {
+			description: "Initial checked state when uncontrolled.",
+			type: "boolean"
+		},
+		onChange: {
+			description: "Called with the next checked state when toggled.",
+			type: "(checked: boolean) => void"
+		},
+		variant: {
+			description: "Visual button treatment inherited from the base button.",
+			type: "\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"",
+			defaultValue: "\"outline\""
+		},
+		asChild: {
+			description: "Render behavior and styles through the child element instead of a native button.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		checkedProps: "Extra props merged onto the button while it is in the checked state.",
+		uncheckedProps: "Extra props merged onto the button while it is in the unchecked state."
+	}),
+	examples: [{
+		title: "Favorite toggle",
+		code: "<IconToggle checked={fav} onChange={setFav} checkedIcon={<HeartFilled />} uncheckedIcon={<Heart />} />"
+	}],
+	related: ["ToggleButton"],
+	keywords: [
+		"toggle",
+		"icon",
+		"button",
+		"switch"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/index.d.cts

@@ -108,8 +108,8 @@ import { TabsContext, TabsContextValue, useTabsContext } from "./tabs/TabsContex
 import { TabsList, TabsListProps } from "./tabs/TabsList.cjs";
 import { TabsTrigger, TabsTriggerProps } from "./tabs/TabsTrigger.cjs";
 import "./tabs/index.cjs";
-import { TagsInput, TagsInputProps } from "./tags-input/TagsInput.cjs";
 import { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps } from "./tags-input/TagsInputInline.cjs";
+import { TagsInput, TagsInputProps } from "./tags-input/TagsInput.cjs";
 import "./tags-input/index.cjs";
 import { ThemeProvider, ThemeProviderProps } from "./theme-provider/ThemeProvider.cjs";
 import { useTheme } from "./theme-provider/index.cjs";

package/dist/index.d.ts

@@ -108,8 +108,8 @@ import { TabsContext, TabsContextValue, useTabsContext } from "./tabs/TabsContex
 import { TabsList, TabsListProps } from "./tabs/TabsList.js";
 import { TabsTrigger, TabsTriggerProps } from "./tabs/TabsTrigger.js";
 import "./tabs/index.js";
-import { TagsInput, TagsInputProps } from "./tags-input/TagsInput.js";
 import { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps } from "./tags-input/TagsInputInline.js";
+import { TagsInput, TagsInputProps } from "./tags-input/TagsInput.js";
 import "./tags-input/index.js";
 import { ThemeProvider, ThemeProviderProps } from "./theme-provider/ThemeProvider.js";
 import { useTheme } from "./theme-provider/index.js";

package/dist/input/Input.d.cts

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