@pixpilot/shadcn-ui 1.39.0 → 2.0.0

package/dist/tags-input/index.d.cts

@@ -1,2 +1,2 @@
-import { TagsInput, TagsInputProps } from "./TagsInput.cjs";
-import { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps } from "./TagsInputInline.cjs";
+import { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps } from "./TagsInputInline.cjs";
+import { TagsInput, TagsInputProps } from "./TagsInput.cjs";

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

@@ -1,2 +1,2 @@
-import { TagsInput, TagsInputProps } from "./TagsInput.js";
-import { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps } from "./TagsInputInline.js";
+import { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps } from "./TagsInputInline.js";
+import { TagsInput, TagsInputProps } from "./TagsInput.js";

package/dist/tags-input/mcp.js

@@ -0,0 +1,100 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/tags-input/mcp.ts
+const meta = {
+	name: "TagsInput",
+	category: "Forms",
+	description: "An inline tags/multi-select input supporting free-text tags, an optional options dropdown, validation, paste parsing, and per-tag editing.",
+	props: defineProps({
+		id: "Optional id attribute applied to the input element.",
+		className: "Additional CSS class applied to the input wrapper.",
+		value: {
+			description: "Controlled list of tag values.",
+			type: "Array<string | number>"
+		},
+		onChange: {
+			description: "Called with the new list of tags when they change.",
+			type: "(value: Array<string | number>) => void"
+		},
+		options: "Optional selectable options as `{ label, value }[]`. When provided, a dropdown is shown.",
+		freeSolo: {
+			description: "Allows arbitrary tags not present in `options` (MUI Autocomplete style).",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		placeholder: {
+			description: "Placeholder for the tag input.",
+			type: "string",
+			defaultValue: "\"Add tags...\""
+		},
+		emptyText: {
+			description: "Message shown when the options dropdown has no matches.",
+			type: "string",
+			defaultValue: "\"No options found.\""
+		},
+		disabled: "Disables the input.",
+		readOnly: "Renders tags without allowing edits.",
+		maxTags: "Maximum number of tags allowed.",
+		allowDuplicates: {
+			description: "Allows the same tag value to be added more than once.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		editable: {
+			description: "Allows editing an existing tag inline.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		label: "Optional label rendered above the input.",
+		showLabel: {
+			description: "Hides the label element while keeping the `label` value available.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		slots: {
+			description: "Per-part prop overrides for the inline input, e.g. `{ list, label, item, input, addButton, clear }`.",
+			type: "{ list?: { className?: string }; label?: object; item?: object; input?: object; addButton?: { className?: string }; clear?: object }"
+		},
+		delimiter: {
+			description: "Character that splits pasted or typed text into multiple tags.",
+			type: "string",
+			defaultValue: "\",\""
+		},
+		addOnPaste: {
+			description: "Adds tags when pasting delimited text.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		addOnTab: {
+			description: "Commits the current input as a tag when pressing Tab.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		onValidate: {
+			description: "Custom validator returning false to reject a candidate tag.",
+			type: "(value: string) => boolean"
+		},
+		addButtonVisibility: {
+			description: "When the inline add button is shown.",
+			type: "\"always\" | \"touch\" | \"never\"",
+			defaultValue: "\"touch\""
+		}
+	}),
+	examples: [{
+		title: "Free-text tags",
+		code: "<TagsInput value={tags} onChange={setTags} placeholder=\"Add tags…\" />"
+	}, {
+		title: "With options",
+		code: "<TagsInput value={tags} onChange={setTags} options={options} freeSolo={false} />"
+	}],
+	keywords: [
+		"tags",
+		"input",
+		"multi-select",
+		"chips",
+		"form"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/theme-provider/mcp.js

@@ -0,0 +1,57 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/theme-provider/mcp.ts
+const meta = {
+	name: "ThemeProvider",
+	category: "Utilities",
+	description: "A thin wrapper around the next-themes ThemeProvider preconfigured for class-based theming with system detection.",
+	props: defineProps({
+		children: "Application subtree that reads the current theme.",
+		attribute: {
+			description: "How the theme is applied to the html element.",
+			type: "string | string[]",
+			defaultValue: "\"class\""
+		},
+		defaultTheme: {
+			description: "Theme used when none is stored.",
+			type: "string",
+			defaultValue: "\"system\""
+		},
+		enableSystem: {
+			description: "Whether to follow the OS color-scheme preference.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		storageKey: "localStorage key used to persist the selected theme.",
+		themes: "List of available theme names.",
+		forcedTheme: "Forces a specific theme for the subtree, ignoring stored and system preferences.",
+		disableTransitionOnChange: {
+			description: "Disables CSS transitions while switching themes to avoid flashes.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		enableColorScheme: {
+			description: "Whether to set the `color-scheme` style so native UI (scrollbars, inputs) matches.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		value: "Mapping of theme name to the value written to the DOM attribute.",
+		nonce: "CSP nonce applied to the injected theme script.",
+		scriptProps: "Extra props spread onto the injected theme <script> tag."
+	}),
+	notes: ["All other next-themes ThemeProvider props are forwarded."],
+	examples: [{
+		title: "Wrap the app",
+		code: "<ThemeProvider>\n  <App />\n</ThemeProvider>"
+	}],
+	related: ["ThemeModeToggleButton"],
+	keywords: [
+		"theme",
+		"dark mode",
+		"provider",
+		"next-themes"
+	]
+};
+
+//#endregion
+export { meta };

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

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

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

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

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
@@ -26,7 +26,7 @@ interface ThemeModeSwitchInsideProps {
  * Icons are embedded within the switch control.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime20.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime22.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeSwitchInside.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
@@ -26,7 +26,7 @@ interface ThemeModeSwitchInsideProps {
  * Icons are embedded within the switch control.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime22.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime16.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
 interface ThemeModeSwitchOutsideProps {
@@ -23,7 +23,7 @@ interface ThemeModeSwitchOutsideProps {
  * Icons flank the switch control on either side.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime21.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime23.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
 interface ThemeModeSwitchOutsideProps {
@@ -23,7 +23,7 @@ interface ThemeModeSwitchOutsideProps {
  * Icons flank the switch control on either side.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime23.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime17.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
@@ -14,7 +14,7 @@ interface ThemeModeToggleButtonProps {
  * Light/Dark toggle button.
  * Pure component - toggles between light and dark.
  */
-declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime18.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime20.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
@@ -14,7 +14,7 @@ interface ThemeModeToggleButtonProps {
  * Light/Dark toggle button.
  * Pure component - toggles between light and dark.
  */
-declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime20.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime14.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

package/dist/theme-toggle/mcp.js

@@ -0,0 +1,38 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/theme-toggle/mcp.ts
+const meta = {
+	name: "ThemeModeToggleButton",
+	category: "Utilities",
+	description: "A pure light/dark toggle icon button. The folder also exports ThemeModeDropdown, ThemeModeSwitchInside, and ThemeModeSwitchOutside for other theme-switching UIs.",
+	htmlElement: "button",
+	props: defineProps({
+		id: "Optional id attribute applied to the toggle button.",
+		className: "Additional CSS class applied to the toggle button.",
+		value: {
+			description: "The current resolved theme.",
+			type: "\"light\" | \"dark\""
+		},
+		onChange: {
+			description: "Called with the next theme when toggled.",
+			type: "(theme: string) => void"
+		},
+		disabled: "Disables the toggle button."
+	}),
+	notes: ["This is a controlled, presentation-only component; wire value/onChange to next-themes (e.g. via useTheme) yourself.", "Related components in this folder: ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside."],
+	examples: [{
+		title: "With next-themes",
+		code: "const { resolvedTheme, setTheme } = useTheme();\n<ThemeModeToggleButton value={resolvedTheme} onChange={setTheme} />"
+	}],
+	related: ["ThemeProvider"],
+	keywords: [
+		"theme",
+		"dark mode",
+		"toggle",
+		"light",
+		"switch"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/toast/mcp.js

@@ -0,0 +1,52 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/toast/mcp.ts
+const meta = {
+	name: "Toast",
+	category: "Feedback",
+	description: "An imperative toast notification API (built on sonner) with variant-styled alert toasts and dedupe/replacement per message. Mount ToastProvider once, then call toast(...).",
+	props: defineProps({
+		title: "Bold heading of the toast.",
+		description: "Body message of the toast.",
+		variant: {
+			description: "Controls the toast color treatment and icon.",
+			type: "\"error\" | \"info\" | \"warning\" | \"success\" | \"default\"",
+			defaultValue: "\"default\""
+		},
+		duration: {
+			description: "How long the toast stays visible, in milliseconds.",
+			type: "number",
+			defaultValue: "10000"
+		},
+		position: "Screen position for the toast (forwarded to sonner, e.g. \"top-right\", \"bottom-center\").",
+		dismissible: {
+			description: "Whether the toast shows a close button and can be dismissed.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		id: "Stable id used to dedupe and replace a previous toast with the same id.",
+		className: "Additional CSS class applied to the toast alert.",
+		icon: {
+			description: "Custom icon element, or `false` to hide the variant icon.",
+			type: "React.JSX.Element | boolean"
+		}
+	}),
+	notes: ["Render <ToastProvider /> once near the app root.", "Convenience helpers: toast.success, toast.error, toast.warning, toast.info, toast.custom, toast.dismiss(id), toast.dismissAll()."],
+	examples: [{
+		title: "Success toast",
+		code: "toast.success(\"Saved\", { description: \"Your changes were saved.\" });"
+	}, {
+		title: "Custom toast call",
+		code: "toast({ title: \"Heads up\", description: \"Something happened\", variant: \"warning\", duration: 5000 });"
+	}],
+	keywords: [
+		"toast",
+		"notification",
+		"sonner",
+		"alert",
+		"snackbar"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/toggle-button/mcp.js

@@ -0,0 +1,58 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/toggle-button/mcp.ts
+const meta = {
+	name: "ToggleButton",
+	category: "Actions",
+	description: "A button with an on/off state that swaps its content (and optionally its props) between checked and unchecked. Supports controlled and uncontrolled use.",
+	htmlElement: "button",
+	props: defineProps({
+		checked: {
+			description: "Controlled checked state.",
+			type: "boolean"
+		},
+		defaultChecked: {
+			description: "Initial checked state when uncontrolled.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		onChange: {
+			description: "Called with the next checked state when toggled.",
+			type: "(checked: boolean) => void"
+		},
+		checkedContent: "Content rendered while checked.",
+		uncheckedContent: "Content rendered while unchecked.",
+		checkedProps: "Button props applied while checked (e.g. a different variant).",
+		uncheckedProps: "Button props applied while unchecked.",
+		variant: {
+			description: "Visual button treatment inherited from the base button.",
+			type: "\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"",
+			defaultValue: "\"outline\""
+		},
+		asChild: {
+			description: "Render behavior through the child element instead of a native button.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		size: {
+			description: "Controls the button dimensions, inherited from the base button.",
+			type: "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\"",
+			defaultValue: "\"default\""
+		}
+	}),
+	examples: [{
+		title: "Mute toggle",
+		code: "<ToggleButton checked={muted} onChange={setMuted} checkedContent=\"Muted\" uncheckedContent=\"Mute\" />"
+	}],
+	related: ["IconToggle", "ToggleGroup"],
+	keywords: [
+		"toggle",
+		"button",
+		"switch",
+		"on",
+		"off"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/toggle-group/mcp.js

@@ -0,0 +1,67 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/toggle-group/mcp.ts
+const meta = {
+	name: "ToggleGroup",
+	category: "Actions",
+	description: "A set of related toggle buttons that behave as a single- or multiple-selection group, composed with ToggleGroupItem.",
+	props: defineProps({
+		type: {
+			description: "Whether one item (\"single\") or many items (\"multiple\") can be selected.",
+			type: "\"single\" | \"multiple\""
+		},
+		value: {
+			description: "Controlled selection: a string for \"single\" type or a string[] for \"multiple\".",
+			type: "string | string[]"
+		},
+		defaultValue: "Uncontrolled initial selection (a string for \"single\" type, a string[] for \"multiple\").",
+		onValueChange: "Called with the new selection when it changes.",
+		variant: {
+			description: "Visual treatment applied to the items.",
+			type: "\"default\" | \"outline\""
+		},
+		size: {
+			description: "Size applied to the items.",
+			type: "\"default\" | \"sm\" | \"lg\""
+		},
+		spacing: {
+			description: "Spacing applied between items in the group.",
+			type: "\"default\" | \"sm\" | \"lg\""
+		},
+		disabled: "Disables the entire group.",
+		orientation: {
+			description: "Layout and arrow-key navigation orientation of the group.",
+			type: "\"horizontal\" | \"vertical\"",
+			defaultValue: "\"horizontal\""
+		},
+		rovingFocus: {
+			description: "When false, disables roving-focus arrow-key navigation between items.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		loop: {
+			description: "When true, keyboard navigation wraps around from the last item to the first.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		asChild: {
+			description: "Merge behavior and styles onto the child element instead of the default wrapper.",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	examples: [{
+		title: "Single-select group",
+		code: "<ToggleGroup type=\"single\" value={align} onValueChange={setAlign}>\n  <ToggleGroupItem value=\"left\">Left</ToggleGroupItem>\n  <ToggleGroupItem value=\"center\">Center</ToggleGroupItem>\n  <ToggleGroupItem value=\"right\">Right</ToggleGroupItem>\n</ToggleGroup>"
+	}],
+	related: ["ToggleButton", "IconToggle"],
+	keywords: [
+		"toggle",
+		"group",
+		"segmented",
+		"selection"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/tooltip/mcp.js

@@ -0,0 +1,24 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/tooltip/mcp.ts
+const meta = {
+	name: "Tooltip",
+	category: "Overlays",
+	description: "A hover/focus tooltip built on Radix, composed of TooltipProvider, Tooltip, TooltipTrigger, and TooltipContent.",
+	props: defineProps({}),
+	notes: ["Wrap the app (or a subtree) in a single TooltipProvider to configure shared delayDuration.", "The Tooltip root forwards Radix props (open, defaultOpen, onOpenChange, delayDuration); TooltipContent forwards side, align, sideOffset, etc."],
+	examples: [{
+		title: "Basic tooltip",
+		code: "<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild><Button variant=\"outline\">Hover</Button></TooltipTrigger>\n    <TooltipContent>Helpful hint</TooltipContent>\n  </Tooltip>\n</TooltipProvider>"
+	}],
+	related: ["Popover"],
+	keywords: [
+		"tooltip",
+		"hint",
+		"overlay",
+		"hover"
+	]
+};
+
+//#endregion
+export { meta };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "1.39.0",
+  "version": "2.0.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -72,8 +72,8 @@
     "typescript": "^5.9.3",
     "@internal/eslint-config": "0.3.0",
     "@internal/hooks": "0.0.0",
-    "@internal/mcp": "0.0.0",
     "@internal/prettier-config": "0.0.1",
+    "@internal/mcp": "0.0.0",
     "@internal/tsconfig": "0.1.0",
     "@internal/vitest-config": "0.1.0",
     "@internal/tsdown-config": "0.1.0"