@pixpilot/shadcn-ui 1.38.0 → 2.0.0

package/README.md

@@ -29,6 +29,7 @@ start the server manually.
 The server exposes generated component metadata through:
 
 - `list_components`
+- `search_components`
 - `get_component_details`
 
 Component metadata is discovered from `src/**/mcp.ts` during the package build,

package/dist/ColorPicker/mcp.js

@@ -0,0 +1,105 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/ColorPicker/mcp.ts
+const meta = {
+	name: "ColorPicker",
+	category: "Forms",
+	description: "A color picker field rendered as either an input or a button trigger, with swatch, picker, format select, and reset support.",
+	htmlElement: "div",
+	props: defineProps({
+		variant: {
+			description: "Renders the trigger as a text input or a color swatch button.",
+			type: "\"button\" | \"input\"",
+			defaultValue: "\"input\""
+		},
+		placeholder: "Placeholder text shown before a color is selected.",
+		formatDisplayValue: "Formats the displayed value for the button variant, e.g. to show a color name instead of the raw hex.",
+		resetOptions: "Configures the reset/clear affordance (value, label, icon, tooltip, swatch color).",
+		value: "Controlled color value.",
+		onChange: "Called with the new color value when the selection changes.",
+		presetColors: "Preset color swatches shown in the picker as `{ label, value }[]`.",
+		layout: {
+			description: "Controls how much of the picker UI is shown.",
+			type: "\"full\" | \"compact\""
+		},
+		sections: "Which picker sections render: any of 'swatch', 'picker', 'format-select', 'input'.",
+		contentProps: "Props forwarded to the picker content popover wrapper.",
+		onValueChange: {
+			description: "Low-level Radix callback fired with the raw color value as it changes.",
+			type: "(value: string) => void"
+		},
+		format: {
+			description: "Controlled color format.",
+			type: "\"hex\" | \"rgb\" | \"hsl\" | \"hsb\""
+		},
+		defaultFormat: {
+			description: "Uncontrolled initial color format.",
+			type: "\"hex\" | \"rgb\" | \"hsl\" | \"hsb\""
+		},
+		onFormatChange: {
+			description: "Called when the selected color format changes.",
+			type: "(format: string) => void"
+		},
+		name: "Form field name submitted with the color value for native form integration.",
+		asChild: {
+			description: "Merge behavior and styles onto the child element instead of the default wrapper.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		disabled: {
+			description: "Disables the color picker.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		inline: {
+			description: "Renders the picker inline instead of inside a popover.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		readOnly: {
+			description: "Makes the color value read-only.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		required: {
+			description: "Marks the field as required for form submission.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		open: {
+			description: "Controlled open state of the picker popover.",
+			type: "boolean"
+		},
+		defaultOpen: {
+			description: "Uncontrolled initial open state of the picker popover.",
+			type: "boolean"
+		},
+		onOpenChange: {
+			description: "Called when the picker popover opens or closes.",
+			type: "(open: boolean) => void"
+		},
+		modal: {
+			description: "Whether the picker popover traps focus and blocks outside interaction.",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	examples: [{
+		title: "Input color picker",
+		code: "<ColorPicker value={color} onChange={setColor} />"
+	}, {
+		title: "Button variant with presets",
+		code: "<ColorPicker variant=\"button\" value={color} onChange={setColor} presetColors={[{ label: \"Red\", value: \"#ef4444\" }]} />"
+	}],
+	related: ["ColorPickerBase", "ColorSelect"],
+	keywords: [
+		"color",
+		"picker",
+		"swatch",
+		"form",
+		"input"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/ColorPickerBase/mcp.js

@@ -0,0 +1,97 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/ColorPickerBase/mcp.ts
+const meta = {
+	name: "ColorPickerBase",
+	category: "Forms",
+	description: "The headless color picker root that manages value and open state and exposes trigger/content composition through children (render-prop supported).",
+	htmlElement: "div",
+	props: defineProps({
+		value: "Controlled color value.",
+		onChange: "Called with the new color value when the selection changes.",
+		presetColors: "Preset color swatches shown in the picker as `{ label, value }[]`.",
+		layout: {
+			description: "Controls how much of the picker UI is shown.",
+			type: "\"full\" | \"compact\""
+		},
+		sections: "Which picker sections render: any of 'swatch', 'picker', 'format-select', 'input'.",
+		contentProps: "Props forwarded to the picker content wrapper (e.g. width).",
+		children: {
+			description: "Trigger/content composition. Accepts nodes or a render function receiving { value, onValueChange, isPickerOpen, id }.",
+			type: "React.ReactNode | ((props) => React.ReactNode)"
+		},
+		onValueChange: {
+			description: "Low-level Radix callback fired with the raw color value as it changes.",
+			type: "(value: string) => void"
+		},
+		format: {
+			description: "Controlled color format.",
+			type: "\"hex\" | \"rgb\" | \"hsl\" | \"hsb\""
+		},
+		defaultFormat: {
+			description: "Uncontrolled initial color format.",
+			type: "\"hex\" | \"rgb\" | \"hsl\" | \"hsb\""
+		},
+		onFormatChange: {
+			description: "Called when the selected color format changes.",
+			type: "(format: string) => void"
+		},
+		name: "Form field name submitted with the color value for native form integration.",
+		asChild: {
+			description: "Merge behavior and styles onto the child element instead of the default wrapper.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		disabled: {
+			description: "Disables the color picker.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		inline: {
+			description: "Renders the picker inline instead of inside a popover.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		readOnly: {
+			description: "Makes the color value read-only.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		required: {
+			description: "Marks the field as required for form submission.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		open: {
+			description: "Controlled open state of the picker popover.",
+			type: "boolean"
+		},
+		defaultOpen: {
+			description: "Uncontrolled initial open state of the picker popover.",
+			type: "boolean"
+		},
+		onOpenChange: {
+			description: "Called when the picker popover opens or closes.",
+			type: "(open: boolean) => void"
+		},
+		modal: {
+			description: "Whether the picker popover traps focus and blocks outside interaction.",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	examples: [{
+		title: "Composed trigger",
+		code: "<ColorPickerBase value={color} onChange={setColor}>\n  <ColorPickerInput />\n</ColorPickerBase>"
+	}],
+	related: ["ColorPicker"],
+	keywords: [
+		"color",
+		"picker",
+		"headless",
+		"form"
+	]
+};
+
+//#endregion
+export { meta };

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

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

package/dist/absolute-fill/mcp.js

@@ -0,0 +1,23 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/absolute-fill/mcp.ts
+const meta = {
+	name: "AbsoluteFill",
+	category: "Layout",
+	description: "An absolutely positioned div stretched over its relatively positioned parent, used to capture pointer events (e.g. to enable tooltips on disabled buttons).",
+	htmlElement: "div",
+	props: defineProps({}),
+	examples: [{
+		title: "Overlay for a disabled control",
+		code: "<div className=\"relative\"><Button disabled>Save</Button><AbsoluteFill onClick={explainWhy} /></div>"
+	}],
+	keywords: [
+		"overlay",
+		"absolute",
+		"fill",
+		"layout"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/alert/mcp.js

@@ -0,0 +1,41 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/alert/mcp.ts
+const meta = {
+	name: "Alert",
+	category: "Feedback",
+	description: "A variant-styled alert box with an optional leading icon, title, and description used to surface contextual status messages.",
+	htmlElement: "div",
+	props: defineProps({
+		variant: {
+			description: "Controls the color treatment and default icon of the alert.",
+			type: "\"error\" | \"info\" | \"warning\" | \"success\" | \"default\"",
+			defaultValue: "\"default\""
+		},
+		title: "Bold heading shown above the description.",
+		description: "Main message content rendered below the title.",
+		duration: "Optional auto-dismiss duration in milliseconds, used by toast-style usage.",
+		icon: {
+			description: "Leading icon. Pass a JSX element for a custom icon, true for the variant default, or false to hide it.",
+			type: "React.JSX.Element | boolean",
+			defaultValue: "false"
+		}
+	}),
+	examples: [{
+		title: "Success alert",
+		code: "<Alert variant=\"success\" title=\"Saved\" description=\"Your changes have been saved.\" icon />"
+	}, {
+		title: "Alert with custom content",
+		code: "<Alert variant=\"warning\" title=\"Heads up\">\n  <Button size=\"sm\">Review</Button>\n</Alert>"
+	}],
+	keywords: [
+		"alert",
+		"notification",
+		"message",
+		"feedback",
+		"banner"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/avatar-upload/mcp.js

@@ -0,0 +1,86 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/avatar-upload/mcp.ts
+const meta = {
+	name: "AvatarUpload",
+	category: "Forms",
+	description: "A single-image avatar uploader with a circular dropzone, preview, and optional clear button, built on the FileUpload component.",
+	props: defineProps({
+		value: "Controlled single-file metadata for the current avatar (null/empty when none).",
+		onChange: "Called with the new file metadata, or null when the avatar is cleared.",
+		onAccept: "Called with the accepted File(s) when a new image is selected.",
+		messages: "Overrides the dropzone labels, e.g. `{ upload: \"Upload\", change: \"Change\" }`.",
+		size: {
+			description: "Controls the avatar and dropzone sizing.",
+			type: "\"sm\" | \"md\" | \"lg\"",
+			defaultValue: "\"md\""
+		},
+		clearable: {
+			description: "Shows a small × button to clear the avatar when an image is present.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		onValueChange: "Low-level callback fired with the raw `File[]` whenever the underlying upload value changes.",
+		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 (e.g. EXIF stripping); return the same file or a replacement File.",
+		onUpload: "Async upload handler invoked with the accepted files and progress/success/error callbacks.",
+		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"
+		},
+		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"
+		},
+		disabled: {
+			description: "Disables the uploader and its dropzone interactions.",
+			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: "Avatar uploader",
+		code: "<AvatarUpload value={avatar} onChange={setAvatar} size=\"lg\" />"
+	}],
+	related: ["FileUpload"],
+	keywords: [
+		"avatar",
+		"upload",
+		"image",
+		"profile",
+		"form"
+	]
+};
+
+//#endregion
+export { meta };

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

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

package/dist/button-extended/mcp.js

@@ -0,0 +1,53 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/button-extended/mcp.ts
+const meta = {
+	name: "ButtonExtended",
+	category: "Actions",
+	description: "A button that adds a loading spinner, regular and disabled-state tooltips, and a disabled-click overlay on top of the base shadcn button.",
+	htmlElement: "button",
+	props: defineProps({
+		variant: {
+			description: "Controls the visual button treatment.",
+			type: "\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"",
+			defaultValue: "\"default\""
+		},
+		size: {
+			description: "Controls the button dimensions and icon-only sizing.",
+			type: "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\"",
+			defaultValue: "\"default\""
+		},
+		asChild: {
+			description: "Render the button behavior and styles through the child element instead of a native button.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		loading: {
+			description: "Shows a spinner and disables the button while a task is in progress.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		loaderProps: "Loader configuration, e.g. `{ placement: \"start\" | \"end\" | \"center\" }` (defaults to \"end\").",
+		tooltip: "Tooltip content shown on hover when the button is enabled.",
+		disabledTooltip: "Tooltip content shown when the button is disabled, explaining why the action is unavailable.",
+		onDisabledClick: "Called when the disabled overlay is clicked, so disabled actions can respond to interaction.",
+		slots: "Customizes the tooltip sub-components (tooltip, trigger, content) and the loader container/node."
+	}),
+	examples: [{
+		title: "Loading button",
+		code: "<ButtonExtended loading onClick={save}>Save</ButtonExtended>"
+	}, {
+		title: "Disabled with reason",
+		code: "<ButtonExtended disabled disabledTooltip=\"Complete required fields first\">Publish</ButtonExtended>"
+	}],
+	keywords: [
+		"button",
+		"loading",
+		"tooltip",
+		"action",
+		"spinner"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/button-group/mcp.js

@@ -0,0 +1,28 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/button-group/mcp.ts
+const meta = {
+	name: "ButtonGroup",
+	category: "Actions",
+	description: "A container that visually joins related buttons into a single cohesive group, with optional separators and text segments.",
+	htmlElement: "div",
+	props: defineProps({ orientation: {
+		description: "Lays the grouped buttons out horizontally or vertically.",
+		type: "\"horizontal\" | \"vertical\"",
+		defaultValue: "\"horizontal\""
+	} }),
+	examples: [{
+		title: "Grouped buttons",
+		code: "<ButtonGroup>\n  <Button variant=\"outline\">First</Button>\n  <Button variant=\"outline\">Second</Button>\n  <Button variant=\"outline\">Third</Button>\n</ButtonGroup>"
+	}],
+	related: ["Button", "ButtonExtended"],
+	keywords: [
+		"button",
+		"group",
+		"segmented",
+		"actions"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/card/Card.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime2 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_runtime1.JSX.Element;
+}: React.ComponentProps<typeof CardTitle>): react_jsx_runtime2.JSX.Element;
 declare function CardHeader$1({
   className,
   ...props
-}: React.ComponentProps<typeof CardHeader>): react_jsx_runtime1.JSX.Element;
+}: React.ComponentProps<typeof CardHeader>): react_jsx_runtime2.JSX.Element;
 //#endregion
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader$1 as CardHeader, CardTitle$1 as CardTitle };

package/dist/circle-loader/mcp.js

@@ -0,0 +1,48 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/circle-loader/mcp.ts
+const meta = {
+	name: "CircleLoader",
+	category: "Feedback",
+	description: "An animated circular spinner with configurable size, stroke width, speed, and single- or multi-color animation.",
+	props: defineProps({
+		size: {
+			description: "Spinner size as a preset key or a pixel number. Presets: sm (24), md (40), lg (64), xl (96).",
+			type: "\"sm\" | \"md\" | \"lg\" | \"xl\" | number",
+			defaultValue: "\"md\""
+		},
+		strokeWidth: {
+			description: "Stroke width in pixels. Defaults to 10% of the size (minimum 2px) when omitted.",
+			type: "number"
+		},
+		speed: {
+			description: "Rotation animation duration in seconds.",
+			type: "number",
+			defaultValue: "2"
+		},
+		color: {
+			description: "Single spinner color. Use \"currentColor\" to inherit the parent text color.",
+			type: "string",
+			defaultValue: "\"currentColor\""
+		},
+		colors: "Array of colors for a color-cycling animation. When provided, overrides `color`.",
+		className: "Additional CSS class applied to the loader wrapper."
+	}),
+	examples: [{
+		title: "Default spinner",
+		code: "<CircleLoader />"
+	}, {
+		title: "Large multi-color spinner",
+		code: "<CircleLoader size=\"lg\" colors={[\"#ef4444\", \"#3b82f6\", \"#22c55e\"]} speed={1.5} />"
+	}],
+	keywords: [
+		"loader",
+		"spinner",
+		"loading",
+		"progress",
+		"feedback"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/close-button-absolute/mcp.js

@@ -0,0 +1,39 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/close-button-absolute/mcp.ts
+const meta = {
+	name: "CloseButtonAbsolute",
+	category: "Actions",
+	description: "A rounded X close button positioned absolutely in the top-right corner of its relatively positioned parent surface.",
+	htmlElement: "button",
+	props: defineProps({
+		variant: {
+			description: "Controls the visual button treatment inherited from the base button.",
+			type: "\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\""
+		},
+		size: {
+			description: "Controls the button dimensions inherited from the base button.",
+			type: "\"default\" | \"sm\" | \"lg\" | \"icon\""
+		},
+		asChild: {
+			description: "Render the button behavior through the child element instead of a native button.",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	examples: [{
+		title: "Close button in a card",
+		code: "<div className=\"relative\"><CloseButtonAbsolute onClick={close} />{content}</div>"
+	}],
+	related: ["CloseButtonRounded"],
+	keywords: [
+		"close",
+		"dismiss",
+		"absolute",
+		"corner",
+		"x"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/close-button-rounded/mcp.js

@@ -0,0 +1,39 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/close-button-rounded/mcp.ts
+const meta = {
+	name: "CloseButtonRounded",
+	category: "Actions",
+	description: "A circular icon button with an X glyph, used to dismiss dialogs, popovers, and other dismissible surfaces.",
+	htmlElement: "button",
+	props: defineProps({
+		variant: {
+			description: "Controls the visual button treatment inherited from the base button.",
+			type: "\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\""
+		},
+		size: {
+			description: "Controls the button dimensions inherited from the base button.",
+			type: "\"default\" | \"sm\" | \"lg\" | \"icon\""
+		},
+		asChild: {
+			description: "Render the button behavior through the child element instead of a native button.",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	examples: [{
+		title: "Dismiss button",
+		code: "<CloseButtonRounded variant=\"ghost\" onClick={close} />"
+	}],
+	related: ["CloseButtonAbsolute"],
+	keywords: [
+		"close",
+		"dismiss",
+		"button",
+		"x",
+		"rounded"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/color-select/ColorSelect.cjs

@@ -10,7 +10,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/color-select/ColorSelect.tsx
 function ColorSelect(props) {
-	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, id,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, id, className,...restProps } = props;
 	const [uncontrolledOpen, setUncontrolledOpen] = react.default.useState(false);
 	const open = openProp ?? uncontrolledOpen;
 	const handleOpenChange = (nextOpen) => {
@@ -34,7 +34,7 @@ function ColorSelect(props) {
 		...restProps,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectTrigger, {
 			id,
-			className: "w-full",
+			className: (0, __pixpilot_shadcn.cn)("w-full", className),
 			onKeyDown: handleTriggerKeyDown,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectValue, {
 				placeholder,

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

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