@pixpilot/shadcn-ui 1.39.0 → 2.0.1

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_runtime14 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_runtime14.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_runtime14.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_runtime16 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_runtime16.JSX.Element;
 //#endregion
 export { BaseSelectProps, Select$1 as Select, SelectContentProps, SelectOption };

package/dist/select/Select.d.ts

@@ -1,4 +1,4 @@
-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";
 
@@ -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'>;
+} & 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.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,

package/dist/select/mcp.js

@@ -0,0 +1,70 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/select/mcp.ts
+const meta = {
+	name: "Select",
+	category: "Forms",
+	htmlElement: "button",
+	description: "A single-select dropdown driven by an options array, with configurable keyboard navigation, dropdown positioning, and an optional clear button.",
+	props: defineProps({
+		options: "Selectable options as `{ label, value }[]` where value is a string or number.",
+		value: "Controlled selected value (compared as a string).",
+		onChange: "Called with the selected value when it changes; called with \"\" when cleared.",
+		placeholder: "Placeholder text shown before a value is selected.",
+		contentProps: "Props forwarded to the underlying select content popover.",
+		keyboardMode: {
+			description: "How arrow keys behave: \"dropdown\" opens the menu, \"cycle\" steps through options in place.",
+			type: "\"cycle\" | \"dropdown\"",
+			defaultValue: "\"dropdown\""
+		},
+		position: {
+			description: "Dropdown positioning strategy.",
+			type: "\"item-aligned\" | \"popper\""
+		},
+		clearable: {
+			description: "Shows a clear button when a value is selected.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		disabled: "Disables the select trigger.",
+		name: "Name used when the select participates in native form submission.",
+		required: "Marks the select as required.",
+		id: "Optional id attribute applied to the select trigger.",
+		className: "Additional CSS class applied to the select trigger.",
+		open: {
+			description: "Controlled open state of the dropdown.",
+			type: "boolean"
+		},
+		onOpenChange: {
+			description: "Called when the dropdown opens or closes.",
+			type: "(open: boolean) => void"
+		},
+		size: {
+			description: "Controls the trigger height.",
+			type: "\"sm\" | \"default\"",
+			defaultValue: "\"default\""
+		},
+		asChild: {
+			description: "Render the trigger behavior and styles through the child element instead of a native button.",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	examples: [{
+		title: "Basic select",
+		code: "<Select value={value} onChange={setValue} options={[{ label: \"One\", value: \"1\" }, { label: \"Two\", value: \"2\" }]} placeholder=\"Choose…\" />"
+	}, {
+		title: "Clearable select",
+		code: "<Select value={value} onChange={setValue} options={options} clearable />"
+	}],
+	related: ["Combobox", "ColorSelect"],
+	keywords: [
+		"select",
+		"dropdown",
+		"options",
+		"form"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/slider/mcp.js

@@ -0,0 +1,80 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/slider/mcp.ts
+const meta = {
+	name: "Slider",
+	category: "Forms",
+	description: "A range slider wrapping the shadcn slider with extra vertical padding. Supports single-thumb and multi-thumb (range) values.",
+	props: defineProps({
+		value: {
+			description: "Controlled value(s). Provide multiple numbers for a range slider.",
+			type: "number[]"
+		},
+		defaultValue: {
+			description: "Initial value(s) when uncontrolled.",
+			type: "number[]"
+		},
+		onValueChange: {
+			description: "Called with the new value array as the thumb(s) move.",
+			type: "(value: number[]) => void"
+		},
+		min: {
+			description: "Minimum value.",
+			type: "number",
+			defaultValue: "0"
+		},
+		max: {
+			description: "Maximum value.",
+			type: "number",
+			defaultValue: "100"
+		},
+		step: {
+			description: "Step increment between values.",
+			type: "number",
+			defaultValue: "1"
+		},
+		disabled: "Disables slider interaction.",
+		orientation: {
+			description: "Slider orientation.",
+			type: "\"horizontal\" | \"vertical\"",
+			defaultValue: "\"horizontal\""
+		},
+		onValueCommit: {
+			description: "Called with the final value array when the user stops dragging.",
+			type: "(value: number[]) => void"
+		},
+		minStepsBetweenThumbs: {
+			description: "Minimum number of steps to keep between thumbs in a range slider.",
+			type: "number",
+			defaultValue: "0"
+		},
+		inverted: {
+			description: "Visually and functionally inverts the slider direction.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		name: "Form field name submitted with the slider value for native form integration.",
+		form: "Associates the slider with a form by id when rendered outside of it.",
+		asChild: {
+			description: "Merge behavior and styles onto the child element instead of the default wrapper.",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	examples: [{
+		title: "Single value",
+		code: "<Slider value={[volume]} onValueChange={([v]) => setVolume(v)} max={100} />"
+	}, {
+		title: "Range",
+		code: "<Slider value={range} onValueChange={setRange} min={0} max={1000} step={10} />"
+	}],
+	keywords: [
+		"slider",
+		"range",
+		"input",
+		"form"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/tabs/mcp.js

@@ -0,0 +1,51 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/tabs/mcp.ts
+const meta = {
+	name: "Tabs",
+	category: "Navigation",
+	description: "A tabbed navigation container composed with TabsList, TabsTrigger, and TabsContent. TabsList adds an \"underline\" variant on top of the shadcn variants.",
+	props: defineProps({
+		value: {
+			description: "Controlled active tab value.",
+			type: "string"
+		},
+		defaultValue: {
+			description: "Initial active tab value when uncontrolled.",
+			type: "string"
+		},
+		onValueChange: {
+			description: "Called with the newly selected tab value.",
+			type: "(value: string) => void"
+		},
+		orientation: {
+			description: "Tab orientation.",
+			type: "\"horizontal\" | \"vertical\"",
+			defaultValue: "\"horizontal\""
+		},
+		activationMode: {
+			description: "Whether a tab activates automatically on focus or manually on click/Enter.",
+			type: "\"automatic\" | \"manual\"",
+			defaultValue: "\"automatic\""
+		},
+		asChild: {
+			description: "Merge behavior and styles onto the child element instead of the default wrapper.",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	notes: ["TabsList accepts a `variant` of \"default\" | \"underline\" | \"outline\" | \"ghost\" | \"pill\"."],
+	examples: [{
+		title: "Underline tabs",
+		code: "<Tabs defaultValue=\"a\">\n  <TabsList variant=\"underline\">\n    <TabsTrigger value=\"a\">A</TabsTrigger>\n    <TabsTrigger value=\"b\">B</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"a\">First</TabsContent>\n  <TabsContent value=\"b\">Second</TabsContent>\n</Tabs>"
+	}],
+	keywords: [
+		"tabs",
+		"navigation",
+		"panels",
+		"segmented"
+	]
+};
+
+//#endregion
+export { meta };