@pixpilot/shadcn-ui 1.39.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/ColorPicker/mcp.js +105 -0
- package/dist/ColorPickerBase/mcp.js +97 -0
- package/dist/absolute-fill/AbsoluteFill.d.cts +2 -2
- package/dist/absolute-fill/mcp.js +23 -0
- package/dist/alert/mcp.js +41 -0
- package/dist/avatar-upload/mcp.js +86 -0
- package/dist/button/Button.d.cts +2 -2
- package/dist/button/Button.d.ts +2 -2
- package/dist/button-extended/ButtonExtended.d.cts +2 -2
- package/dist/button-extended/ButtonExtended.d.ts +2 -2
- package/dist/button-extended/mcp.js +53 -0
- package/dist/button-group/mcp.js +28 -0
- package/dist/card/Card.d.cts +3 -3
- package/dist/circle-loader/mcp.js +48 -0
- package/dist/close-button-absolute/mcp.js +39 -0
- package/dist/close-button-rounded/mcp.js +39 -0
- package/dist/color-select/ColorSelect.cjs +2 -2
- package/dist/color-select/ColorSelect.d.cts +3 -2
- package/dist/color-select/ColorSelect.d.ts +1 -0
- package/dist/color-select/ColorSelect.js +3 -3
- package/dist/color-select/mcp.js +59 -0
- package/dist/combobox/Combobox.cjs +4 -3
- package/dist/combobox/Combobox.d.cts +7 -3
- package/dist/combobox/Combobox.d.ts +7 -3
- package/dist/combobox/Combobox.js +5 -4
- package/dist/combobox/mcp.js +64 -0
- package/dist/confirmation-dialog/mcp.js +55 -0
- package/dist/content-card/ContentCard.d.cts +2 -2
- package/dist/content-card/mcp.js +30 -0
- package/dist/date-picker/mcp.js +43 -0
- package/dist/dialog/mcp.js +53 -0
- package/dist/dialog-provider/mcp.js +24 -0
- package/dist/file-upload/FileUpload.d.cts +2 -2
- package/dist/file-upload-inline/FileUploadInline.d.cts +2 -2
- package/dist/file-upload-inline/mcp.js +89 -0
- package/dist/file-upload-root/FileUploadRoot.d.cts +2 -2
- package/dist/file-upload-root/mcp.js +84 -0
- package/dist/generated/mcp-registry.js +84 -6
- package/dist/icon-selector/IconPicker.cjs +2 -2
- package/dist/icon-selector/IconPicker.d.cts +1 -0
- package/dist/icon-selector/IconPicker.d.ts +1 -0
- package/dist/icon-selector/IconPicker.js +2 -2
- package/dist/icon-selector/mcp.js +60 -0
- package/dist/icon-toggle/mcp.js +62 -0
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/input/Input.d.cts +2 -2
- package/dist/input/mcp.js +33 -0
- package/dist/layout/mcp.js +29 -0
- package/dist/loading-overlay/mcp.js +64 -0
- package/dist/pagination/mcp.js +65 -0
- package/dist/popover/mcp.js +27 -0
- package/dist/rating/Rating.d.cts +3 -3
- package/dist/rating/mcp.js +73 -0
- package/dist/rich-text-editor/mcp.js +78 -0
- package/dist/scaled-preview/mcp.js +47 -0
- package/dist/select/Select.cjs +4 -2
- package/dist/select/Select.d.cts +13 -4
- package/dist/select/Select.d.ts +11 -2
- package/dist/select/Select.js +4 -2
- package/dist/select/mcp.js +70 -0
- package/dist/slider/mcp.js +80 -0
- package/dist/tabs/mcp.js +51 -0
- package/dist/tags-input/TagsInput.cjs +67 -65
- package/dist/tags-input/TagsInput.d.cts +6 -33
- package/dist/tags-input/TagsInput.d.ts +5 -32
- package/dist/tags-input/TagsInput.js +68 -66
- package/dist/tags-input/TagsInputInline.d.cts +2 -2
- package/dist/tags-input/index.d.cts +2 -2
- package/dist/tags-input/index.d.ts +2 -2
- package/dist/tags-input/mcp.js +100 -0
- package/dist/theme-provider/mcp.js +57 -0
- package/dist/theme-toggle/ThemeModeToggleButton.d.cts +2 -2
- package/dist/theme-toggle/mcp.js +38 -0
- package/dist/toast/mcp.js +52 -0
- package/dist/toggle-button/mcp.js +58 -0
- package/dist/toggle-group/mcp.js +67 -0
- package/dist/tooltip/mcp.js +24 -0
- package/package.json +4 -4
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { defineProps } from "../mcp/src/utils.js";
|
|
2
|
+
|
|
3
|
+
//#region src/close-button-rounded/mcp.ts
|
|
4
|
+
const meta = {
|
|
5
|
+
name: "CloseButtonRounded",
|
|
6
|
+
category: "Actions",
|
|
7
|
+
description: "A circular icon button with an X glyph, used to dismiss dialogs, popovers, and other dismissible surfaces.",
|
|
8
|
+
htmlElement: "button",
|
|
9
|
+
props: defineProps({
|
|
10
|
+
variant: {
|
|
11
|
+
description: "Controls the visual button treatment inherited from the base button.",
|
|
12
|
+
type: "\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\""
|
|
13
|
+
},
|
|
14
|
+
size: {
|
|
15
|
+
description: "Controls the button dimensions inherited from the base button.",
|
|
16
|
+
type: "\"default\" | \"sm\" | \"lg\" | \"icon\""
|
|
17
|
+
},
|
|
18
|
+
asChild: {
|
|
19
|
+
description: "Render the button behavior through the child element instead of a native button.",
|
|
20
|
+
type: "boolean",
|
|
21
|
+
defaultValue: "false"
|
|
22
|
+
}
|
|
23
|
+
}),
|
|
24
|
+
examples: [{
|
|
25
|
+
title: "Dismiss button",
|
|
26
|
+
code: "<CloseButtonRounded variant=\"ghost\" onClick={close} />"
|
|
27
|
+
}],
|
|
28
|
+
related: ["CloseButtonAbsolute"],
|
|
29
|
+
keywords: [
|
|
30
|
+
"close",
|
|
31
|
+
"dismiss",
|
|
32
|
+
"button",
|
|
33
|
+
"x",
|
|
34
|
+
"rounded"
|
|
35
|
+
]
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
//#endregion
|
|
39
|
+
export { meta };
|
|
@@ -10,7 +10,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
|
10
10
|
|
|
11
11
|
//#region src/color-select/ColorSelect.tsx
|
|
12
12
|
function ColorSelect(props) {
|
|
13
|
-
const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, id,...restProps } = props;
|
|
13
|
+
const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, id, className,...restProps } = props;
|
|
14
14
|
const [uncontrolledOpen, setUncontrolledOpen] = react.default.useState(false);
|
|
15
15
|
const open = openProp ?? uncontrolledOpen;
|
|
16
16
|
const handleOpenChange = (nextOpen) => {
|
|
@@ -34,7 +34,7 @@ function ColorSelect(props) {
|
|
|
34
34
|
...restProps,
|
|
35
35
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectTrigger, {
|
|
36
36
|
id,
|
|
37
|
-
className: "w-full",
|
|
37
|
+
className: (0, __pixpilot_shadcn.cn)("w-full", className),
|
|
38
38
|
onKeyDown: handleTriggerKeyDown,
|
|
39
39
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectValue, {
|
|
40
40
|
placeholder,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime23 from "react/jsx-runtime";
|
|
2
2
|
import { Select, SelectContent } from "@pixpilot/shadcn";
|
|
3
3
|
import React, { ComponentProps } from "react";
|
|
4
4
|
|
|
@@ -15,7 +15,8 @@ type BaseColorSelectProps = {
|
|
|
15
15
|
onChange?: (value: string) => void;
|
|
16
16
|
placeholder?: string;
|
|
17
17
|
keyboardMode?: 'cycle' | 'dropdown';
|
|
18
|
+
className?: string;
|
|
18
19
|
} & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
|
|
19
|
-
declare function ColorSelect(props: BaseColorSelectProps):
|
|
20
|
+
declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime23.JSX.Element;
|
|
20
21
|
//#endregion
|
|
21
22
|
export { BaseColorSelectProps, ColorSelect, ColorSelectOption };
|
|
@@ -15,6 +15,7 @@ type BaseColorSelectProps = {
|
|
|
15
15
|
onChange?: (value: string) => void;
|
|
16
16
|
placeholder?: string;
|
|
17
17
|
keyboardMode?: 'cycle' | 'dropdown';
|
|
18
|
+
className?: string;
|
|
18
19
|
} & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
|
|
19
20
|
declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime5.JSX.Element;
|
|
20
21
|
//#endregion
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { getId } from "../utils/get-id.js";
|
|
2
2
|
import { useSelectKeyboard } from "../hooks/use-select-keyboard.js";
|
|
3
|
-
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@pixpilot/shadcn";
|
|
3
|
+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, cn } from "@pixpilot/shadcn";
|
|
4
4
|
import React from "react";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
|
|
7
7
|
//#region src/color-select/ColorSelect.tsx
|
|
8
8
|
function ColorSelect(props) {
|
|
9
|
-
const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, id,...restProps } = props;
|
|
9
|
+
const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, id, className,...restProps } = props;
|
|
10
10
|
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
|
|
11
11
|
const open = openProp ?? uncontrolledOpen;
|
|
12
12
|
const handleOpenChange = (nextOpen) => {
|
|
@@ -30,7 +30,7 @@ function ColorSelect(props) {
|
|
|
30
30
|
...restProps,
|
|
31
31
|
children: [/* @__PURE__ */ jsx(SelectTrigger, {
|
|
32
32
|
id,
|
|
33
|
-
className: "w-full",
|
|
33
|
+
className: cn("w-full", className),
|
|
34
34
|
onKeyDown: handleTriggerKeyDown,
|
|
35
35
|
children: /* @__PURE__ */ jsx(SelectValue, {
|
|
36
36
|
placeholder,
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { defineProps } from "../mcp/src/utils.js";
|
|
2
|
+
|
|
3
|
+
//#region src/color-select/mcp.ts
|
|
4
|
+
const meta = {
|
|
5
|
+
name: "ColorSelect",
|
|
6
|
+
category: "Forms",
|
|
7
|
+
description: "A select dropdown whose options each render a color swatch beside their label, with configurable keyboard navigation.",
|
|
8
|
+
props: defineProps({
|
|
9
|
+
className: "Additional CSS class applied to the select trigger.",
|
|
10
|
+
options: "Selectable color options as `{ label, value }[]` where value is a CSS color.",
|
|
11
|
+
value: "Controlled selected color value.",
|
|
12
|
+
onChange: "Called with the selected color value when it changes.",
|
|
13
|
+
placeholder: "Placeholder text shown before a value is selected.",
|
|
14
|
+
keyboardMode: {
|
|
15
|
+
description: "How arrow keys behave: \"dropdown\" opens the menu, \"cycle\" steps through options in place.",
|
|
16
|
+
type: "\"cycle\" | \"dropdown\"",
|
|
17
|
+
defaultValue: "\"dropdown\""
|
|
18
|
+
},
|
|
19
|
+
contentProps: "Props forwarded to the underlying select content popover.",
|
|
20
|
+
id: "Optional id attribute applied to the select trigger.",
|
|
21
|
+
defaultValue: "Uncontrolled initial selected color value.",
|
|
22
|
+
open: {
|
|
23
|
+
description: "Controlled open state of the dropdown.",
|
|
24
|
+
type: "boolean"
|
|
25
|
+
},
|
|
26
|
+
defaultOpen: {
|
|
27
|
+
description: "Uncontrolled initial open state of the dropdown.",
|
|
28
|
+
type: "boolean"
|
|
29
|
+
},
|
|
30
|
+
onOpenChange: {
|
|
31
|
+
description: "Called when the dropdown opens or closes.",
|
|
32
|
+
type: "(open: boolean) => void"
|
|
33
|
+
},
|
|
34
|
+
dir: {
|
|
35
|
+
description: "Reading direction of the dropdown.",
|
|
36
|
+
type: "\"ltr\" | \"rtl\""
|
|
37
|
+
},
|
|
38
|
+
name: "Name used when the select participates in native form submission.",
|
|
39
|
+
disabled: "Disables the select trigger.",
|
|
40
|
+
required: "Marks the select as required.",
|
|
41
|
+
autoComplete: "Native autoComplete hint forwarded to the hidden form control.",
|
|
42
|
+
form: "Associates the hidden form control with a form by id when rendered outside it."
|
|
43
|
+
}),
|
|
44
|
+
examples: [{
|
|
45
|
+
title: "Color select",
|
|
46
|
+
code: "<ColorSelect value={color} onChange={setColor} options={[{ label: \"Red\", value: \"#ef4444\" }, { label: \"Blue\", value: \"#3b82f6\" }]} />"
|
|
47
|
+
}],
|
|
48
|
+
related: ["ColorPicker", "Select"],
|
|
49
|
+
keywords: [
|
|
50
|
+
"color",
|
|
51
|
+
"select",
|
|
52
|
+
"dropdown",
|
|
53
|
+
"swatch",
|
|
54
|
+
"form"
|
|
55
|
+
]
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
//#endregion
|
|
59
|
+
export { meta };
|
|
@@ -17,7 +17,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
|
17
17
|
//#region src/combobox/Combobox.tsx
|
|
18
18
|
const DEFAULT_OPTIONS = [];
|
|
19
19
|
const Combobox = (props) => {
|
|
20
|
-
const { value = "", onChange, options = DEFAULT_OPTIONS, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No option found.", id
|
|
20
|
+
const { value = "", onChange, options = DEFAULT_OPTIONS, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No option found.", id, className, commandProps, variant = "outline",...buttonProps } = props;
|
|
21
21
|
const [open, setOpen] = (0, react.useState)(false);
|
|
22
22
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
|
|
23
23
|
open,
|
|
@@ -25,11 +25,12 @@ const Combobox = (props) => {
|
|
|
25
25
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
|
|
26
26
|
asChild: true,
|
|
27
27
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
|
|
28
|
+
...buttonProps,
|
|
28
29
|
id,
|
|
29
|
-
variant
|
|
30
|
+
variant,
|
|
30
31
|
role: "combobox",
|
|
31
32
|
"aria-expanded": open,
|
|
32
|
-
className: "w-full justify-between",
|
|
33
|
+
className: (0, __pixpilot_shadcn.cn)("w-full justify-between", className),
|
|
33
34
|
children: [value ? options.find((option) => option.value === value)?.label : placeholder, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
|
|
34
35
|
})
|
|
35
36
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { CommandOptionListItem } from "../command-option-list/CommandOptionList.cjs";
|
|
2
|
-
import { Command } from "@pixpilot/shadcn";
|
|
2
|
+
import { Button, Command } from "@pixpilot/shadcn";
|
|
3
3
|
import React, { ComponentProps } from "react";
|
|
4
4
|
|
|
5
5
|
//#region src/combobox/Combobox.d.ts
|
|
6
|
-
|
|
6
|
+
interface ComboboxProps extends Omit<React.ComponentProps<typeof Button>, 'onChange'> {
|
|
7
7
|
id?: string;
|
|
8
8
|
value?: string;
|
|
9
9
|
onChange?: (value: string) => void;
|
|
@@ -11,7 +11,11 @@ type ComboboxProps = {
|
|
|
11
11
|
placeholder?: string;
|
|
12
12
|
searchPlaceholder?: string;
|
|
13
13
|
emptyText?: string;
|
|
14
|
-
|
|
14
|
+
/** Styles the visible trigger button. */
|
|
15
|
+
className?: string;
|
|
16
|
+
/** Props forwarded to the underlying cmdk `Command` root. */
|
|
17
|
+
commandProps?: ComponentProps<typeof Command>;
|
|
18
|
+
}
|
|
15
19
|
declare const Combobox: React.FC<ComboboxProps>;
|
|
16
20
|
//#endregion
|
|
17
21
|
export { Combobox, type ComboboxProps };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { CommandOptionListItem } from "../command-option-list/CommandOptionList.js";
|
|
2
|
-
import { Command } from "@pixpilot/shadcn";
|
|
2
|
+
import { Button, Command } from "@pixpilot/shadcn";
|
|
3
3
|
import React, { ComponentProps } from "react";
|
|
4
4
|
|
|
5
5
|
//#region src/combobox/Combobox.d.ts
|
|
6
|
-
|
|
6
|
+
interface ComboboxProps extends Omit<React.ComponentProps<typeof Button>, 'onChange'> {
|
|
7
7
|
id?: string;
|
|
8
8
|
value?: string;
|
|
9
9
|
onChange?: (value: string) => void;
|
|
@@ -11,7 +11,11 @@ type ComboboxProps = {
|
|
|
11
11
|
placeholder?: string;
|
|
12
12
|
searchPlaceholder?: string;
|
|
13
13
|
emptyText?: string;
|
|
14
|
-
|
|
14
|
+
/** Styles the visible trigger button. */
|
|
15
|
+
className?: string;
|
|
16
|
+
/** Props forwarded to the underlying cmdk `Command` root. */
|
|
17
|
+
commandProps?: ComponentProps<typeof Command>;
|
|
18
|
+
}
|
|
15
19
|
declare const Combobox: React.FC<ComboboxProps>;
|
|
16
20
|
//#endregion
|
|
17
21
|
export { Combobox, type ComboboxProps };
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { getId } from "../utils/get-id.js";
|
|
5
5
|
import { CommandOptionList } from "../command-option-list/CommandOptionList.js";
|
|
6
6
|
import "../command-option-list/index.js";
|
|
7
|
-
import { Button, Command, CommandInput, Popover, PopoverContent, PopoverTrigger } from "@pixpilot/shadcn";
|
|
7
|
+
import { Button, Command, CommandInput, Popover, PopoverContent, PopoverTrigger, cn } from "@pixpilot/shadcn";
|
|
8
8
|
import { ChevronsUpDown } from "lucide-react";
|
|
9
9
|
import React, { useState } from "react";
|
|
10
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -12,7 +12,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
12
12
|
//#region src/combobox/Combobox.tsx
|
|
13
13
|
const DEFAULT_OPTIONS = [];
|
|
14
14
|
const Combobox = (props) => {
|
|
15
|
-
const { value = "", onChange, options = DEFAULT_OPTIONS, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No option found.", id
|
|
15
|
+
const { value = "", onChange, options = DEFAULT_OPTIONS, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No option found.", id, className, commandProps, variant = "outline",...buttonProps } = props;
|
|
16
16
|
const [open, setOpen] = useState(false);
|
|
17
17
|
return /* @__PURE__ */ jsxs(Popover, {
|
|
18
18
|
open,
|
|
@@ -20,11 +20,12 @@ const Combobox = (props) => {
|
|
|
20
20
|
children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
21
21
|
asChild: true,
|
|
22
22
|
children: /* @__PURE__ */ jsxs(Button, {
|
|
23
|
+
...buttonProps,
|
|
23
24
|
id,
|
|
24
|
-
variant
|
|
25
|
+
variant,
|
|
25
26
|
role: "combobox",
|
|
26
27
|
"aria-expanded": open,
|
|
27
|
-
className: "w-full justify-between",
|
|
28
|
+
className: cn("w-full justify-between", className),
|
|
28
29
|
children: [value ? options.find((option) => option.value === value)?.label : placeholder, /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
|
|
29
30
|
})
|
|
30
31
|
}), /* @__PURE__ */ jsx(PopoverContent, {
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { defineProps } from "../mcp/src/utils.js";
|
|
2
|
+
|
|
3
|
+
//#region src/combobox/mcp.ts
|
|
4
|
+
const meta = {
|
|
5
|
+
name: "Combobox",
|
|
6
|
+
category: "Forms",
|
|
7
|
+
htmlElement: "button",
|
|
8
|
+
description: "A searchable single-select rendered as a popover with a command list, letting users filter options by typing.",
|
|
9
|
+
props: defineProps({
|
|
10
|
+
value: "Controlled selected option value.",
|
|
11
|
+
onChange: "Called with the selected value when an option is chosen.",
|
|
12
|
+
options: "Selectable options as `{ label, value }[]` (CommandOptionListItem).",
|
|
13
|
+
placeholder: {
|
|
14
|
+
description: "Text shown on the trigger before a value is selected.",
|
|
15
|
+
type: "string",
|
|
16
|
+
defaultValue: "\"Select option...\""
|
|
17
|
+
},
|
|
18
|
+
searchPlaceholder: {
|
|
19
|
+
description: "Placeholder for the search input inside the popover.",
|
|
20
|
+
type: "string",
|
|
21
|
+
defaultValue: "\"Search...\""
|
|
22
|
+
},
|
|
23
|
+
emptyText: {
|
|
24
|
+
description: "Message shown when no option matches the search query.",
|
|
25
|
+
type: "string",
|
|
26
|
+
defaultValue: "\"No option found.\""
|
|
27
|
+
},
|
|
28
|
+
id: "Optional id attribute applied to the trigger element.",
|
|
29
|
+
variant: {
|
|
30
|
+
description: "Controls the visual treatment of the trigger button.",
|
|
31
|
+
type: "\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"",
|
|
32
|
+
defaultValue: "\"outline\""
|
|
33
|
+
},
|
|
34
|
+
size: {
|
|
35
|
+
description: "Controls the trigger button dimensions and icon-only sizing.",
|
|
36
|
+
type: "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\"",
|
|
37
|
+
defaultValue: "\"default\""
|
|
38
|
+
},
|
|
39
|
+
asChild: {
|
|
40
|
+
description: "Render the trigger button behavior and styles through the child element instead of a native button.",
|
|
41
|
+
type: "boolean",
|
|
42
|
+
defaultValue: "false"
|
|
43
|
+
},
|
|
44
|
+
commandProps: {
|
|
45
|
+
description: "Props forwarded to the underlying cmdk `Command` root, e.g. `filter`, `shouldFilter`, `loop`, `vimBindings`.",
|
|
46
|
+
type: "ComponentProps<typeof Command>"
|
|
47
|
+
}
|
|
48
|
+
}),
|
|
49
|
+
examples: [{
|
|
50
|
+
title: "Searchable select",
|
|
51
|
+
code: "<Combobox value={value} onChange={setValue} options={[{ label: \"Next.js\", value: \"next\" }, { label: \"Remix\", value: \"remix\" }]} />"
|
|
52
|
+
}],
|
|
53
|
+
related: ["Select", "ColorSelect"],
|
|
54
|
+
keywords: [
|
|
55
|
+
"combobox",
|
|
56
|
+
"select",
|
|
57
|
+
"search",
|
|
58
|
+
"autocomplete",
|
|
59
|
+
"form"
|
|
60
|
+
]
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
//#endregion
|
|
64
|
+
export { meta };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { defineProps } from "../mcp/src/utils.js";
|
|
2
|
+
|
|
3
|
+
//#region src/confirmation-dialog/mcp.ts
|
|
4
|
+
const meta = {
|
|
5
|
+
name: "ConfirmationDialog",
|
|
6
|
+
category: "Overlays",
|
|
7
|
+
description: "A prebuilt confirm/cancel dialog with variant styling and icon, shown imperatively via the dialog helper inside a DialogProvider.",
|
|
8
|
+
props: defineProps({
|
|
9
|
+
id: "Optional identifier for the dialog instance used by the imperative dialog helper.",
|
|
10
|
+
title: {
|
|
11
|
+
description: "Dialog heading.",
|
|
12
|
+
type: "string",
|
|
13
|
+
defaultValue: "\"Confirmation Dialog\""
|
|
14
|
+
},
|
|
15
|
+
description: "Body text or node explaining the action being confirmed.",
|
|
16
|
+
confirmText: {
|
|
17
|
+
description: "Label for the confirm button.",
|
|
18
|
+
type: "string",
|
|
19
|
+
defaultValue: "\"Confirm\""
|
|
20
|
+
},
|
|
21
|
+
cancelText: {
|
|
22
|
+
description: "Label for the cancel button.",
|
|
23
|
+
type: "string",
|
|
24
|
+
defaultValue: "\"Cancel\""
|
|
25
|
+
},
|
|
26
|
+
onConfirm: "Called when the user confirms. The shown promise also resolves to true.",
|
|
27
|
+
onCancel: "Called when the user cancels or dismisses. The shown promise also resolves to false.",
|
|
28
|
+
variant: {
|
|
29
|
+
description: "Controls the color treatment and icon of the dialog.",
|
|
30
|
+
type: "\"destructive\" | \"warning\" | \"primary\" | \"default\"",
|
|
31
|
+
defaultValue: "\"default\""
|
|
32
|
+
},
|
|
33
|
+
showIcon: {
|
|
34
|
+
description: "Shows the variant icon next to the title (ignored for the default variant).",
|
|
35
|
+
type: "boolean",
|
|
36
|
+
defaultValue: "true"
|
|
37
|
+
}
|
|
38
|
+
}),
|
|
39
|
+
notes: ["Render a DialogProvider near the app root, then show this dialog imperatively via the exported `dialog` helper."],
|
|
40
|
+
examples: [{
|
|
41
|
+
title: "Show a confirmation",
|
|
42
|
+
code: "const ok = await dialog.show(ConfirmationDialog, { title: \"Delete item?\", variant: \"destructive\", confirmText: \"Delete\" });\nif (ok) deleteItem();"
|
|
43
|
+
}],
|
|
44
|
+
related: ["Dialog", "DialogProvider"],
|
|
45
|
+
keywords: [
|
|
46
|
+
"confirm",
|
|
47
|
+
"dialog",
|
|
48
|
+
"modal",
|
|
49
|
+
"confirmation",
|
|
50
|
+
"prompt"
|
|
51
|
+
]
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
//#endregion
|
|
55
|
+
export { meta };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Card } from "../card/Card.cjs";
|
|
2
2
|
import "../card/index.cjs";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime10 from "react/jsx-runtime";
|
|
4
4
|
import React, { ReactNode } from "react";
|
|
5
5
|
|
|
6
6
|
//#region src/content-card/ContentCard.d.ts
|
|
@@ -9,7 +9,7 @@ interface SectionCardProps extends React.ComponentProps<typeof Card> {
|
|
|
9
9
|
children: ReactNode;
|
|
10
10
|
marginBottom?: boolean;
|
|
11
11
|
}
|
|
12
|
-
declare function ContentCard(props: SectionCardProps):
|
|
12
|
+
declare function ContentCard(props: SectionCardProps): react_jsx_runtime10.JSX.Element;
|
|
13
13
|
declare namespace ContentCard {
|
|
14
14
|
var displayName: string;
|
|
15
15
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { defineProps } from "../mcp/src/utils.js";
|
|
2
|
+
|
|
3
|
+
//#region src/content-card/mcp.ts
|
|
4
|
+
const meta = {
|
|
5
|
+
name: "ContentCard",
|
|
6
|
+
category: "Layout",
|
|
7
|
+
description: "A convenience card that renders an optional title header and wraps its children in card content padding.",
|
|
8
|
+
htmlElement: "div",
|
|
9
|
+
props: defineProps({
|
|
10
|
+
title: "Optional heading rendered in the card header. When omitted, no header shows.",
|
|
11
|
+
marginBottom: {
|
|
12
|
+
description: "Adds bottom margin below the card.",
|
|
13
|
+
type: "boolean"
|
|
14
|
+
}
|
|
15
|
+
}),
|
|
16
|
+
examples: [{
|
|
17
|
+
title: "Titled content card",
|
|
18
|
+
code: "<ContentCard title=\"Details\">\n <p>Body content</p>\n</ContentCard>"
|
|
19
|
+
}],
|
|
20
|
+
related: ["Card"],
|
|
21
|
+
keywords: [
|
|
22
|
+
"card",
|
|
23
|
+
"section",
|
|
24
|
+
"content",
|
|
25
|
+
"layout"
|
|
26
|
+
]
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
//#endregion
|
|
30
|
+
export { meta };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { defineProps } from "../mcp/src/utils.js";
|
|
2
|
+
|
|
3
|
+
//#region src/date-picker/mcp.ts
|
|
4
|
+
const meta = {
|
|
5
|
+
name: "DatePicker",
|
|
6
|
+
category: "Forms",
|
|
7
|
+
description: "A single-date picker with a calendar popover trigger and an optional inline clear button.",
|
|
8
|
+
props: defineProps({
|
|
9
|
+
id: "Optional id attribute applied to the trigger and calendar.",
|
|
10
|
+
value: {
|
|
11
|
+
description: "Controlled selected date.",
|
|
12
|
+
type: "Date"
|
|
13
|
+
},
|
|
14
|
+
onChange: {
|
|
15
|
+
description: "Called with the selected Date, or undefined when cleared.",
|
|
16
|
+
type: "(date: Date | undefined) => void"
|
|
17
|
+
},
|
|
18
|
+
placeholder: {
|
|
19
|
+
description: "Text shown on the trigger before a date is selected.",
|
|
20
|
+
type: "string",
|
|
21
|
+
defaultValue: "\"Pick a date\""
|
|
22
|
+
},
|
|
23
|
+
showClearButton: {
|
|
24
|
+
description: "Shows a clear button when a date is selected.",
|
|
25
|
+
type: "boolean",
|
|
26
|
+
defaultValue: "true"
|
|
27
|
+
}
|
|
28
|
+
}),
|
|
29
|
+
notes: ["Forwards all react-day-picker Calendar props (e.g. numberOfMonths, showOutsideDays, disabled, captionLayout, fixedWeeks, weekStartsOn) except selected/onSelect/mode, which the wrapper manages."],
|
|
30
|
+
examples: [{
|
|
31
|
+
title: "Date picker",
|
|
32
|
+
code: "<DatePicker value={date} onChange={setDate} />"
|
|
33
|
+
}],
|
|
34
|
+
keywords: [
|
|
35
|
+
"date",
|
|
36
|
+
"calendar",
|
|
37
|
+
"picker",
|
|
38
|
+
"form"
|
|
39
|
+
]
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
//#endregion
|
|
43
|
+
export { meta };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { defineProps } from "../mcp/src/utils.js";
|
|
2
|
+
|
|
3
|
+
//#region src/dialog/mcp.ts
|
|
4
|
+
const meta = {
|
|
5
|
+
name: "Dialog",
|
|
6
|
+
category: "Overlays",
|
|
7
|
+
description: "A modal dialog composed of DialogContent, DialogHeader, DialogBody, DialogFooter, and DialogClose, with a scrollable body and an optional fullscreen content mode.",
|
|
8
|
+
props: defineProps({
|
|
9
|
+
fullscreen: {
|
|
10
|
+
description: "When true, DialogContent expands to nearly fill the viewport instead of sizing to its content.",
|
|
11
|
+
type: "boolean",
|
|
12
|
+
defaultValue: "false"
|
|
13
|
+
},
|
|
14
|
+
asChild: {
|
|
15
|
+
description: "Merge behavior and styles onto the child element instead of the default content wrapper.",
|
|
16
|
+
type: "boolean",
|
|
17
|
+
defaultValue: "false"
|
|
18
|
+
},
|
|
19
|
+
forceMount: "Forces the content to render even when closed, so its mount can be controlled externally (e.g. for animations).",
|
|
20
|
+
onOpenAutoFocus: "Called when focus moves into the content on open; call preventDefault to opt out of autofocus.",
|
|
21
|
+
onCloseAutoFocus: "Called when focus returns to the trigger on close; call preventDefault to opt out.",
|
|
22
|
+
onEscapeKeyDown: "Called when the Escape key is pressed; call preventDefault to keep the dialog open.",
|
|
23
|
+
onPointerDownOutside: "Called when a pointer event occurs outside the content; call preventDefault to keep it open.",
|
|
24
|
+
onFocusOutside: "Called when focus moves outside the content; call preventDefault to keep it open.",
|
|
25
|
+
onInteractOutside: "Called on any interaction (pointer or focus) outside the content; call preventDefault to keep it open.",
|
|
26
|
+
showCloseButton: {
|
|
27
|
+
description: "Whether to render the built-in close (×) button in the top corner.",
|
|
28
|
+
type: "boolean",
|
|
29
|
+
defaultValue: "true"
|
|
30
|
+
},
|
|
31
|
+
disableOutsideClick: {
|
|
32
|
+
description: "When true, clicking or interacting outside the content does not close the dialog.",
|
|
33
|
+
type: "boolean",
|
|
34
|
+
defaultValue: "false"
|
|
35
|
+
},
|
|
36
|
+
container: "Portal container element the dialog content is rendered into (defaults to document.body)."
|
|
37
|
+
}),
|
|
38
|
+
notes: ["Compose with the Radix Dialog root, DialogTrigger, DialogTitle, and DialogDescription from the shadcn dialog primitives.", "DialogHeader, DialogBody, and DialogFooter accept all native <div> props; DialogContent forwards all Radix DialogContent props."],
|
|
39
|
+
examples: [{
|
|
40
|
+
title: "Dialog with body and footer",
|
|
41
|
+
code: "<Dialog>\n <DialogTrigger asChild><Button>Open</Button></DialogTrigger>\n <DialogContent>\n <DialogHeader><DialogTitle>Edit</DialogTitle></DialogHeader>\n <DialogBody>{form}</DialogBody>\n <DialogFooter><DialogClose asChild><Button>Save</Button></DialogClose></DialogFooter>\n </DialogContent>\n</Dialog>"
|
|
42
|
+
}],
|
|
43
|
+
related: ["ConfirmationDialog", "DialogProvider"],
|
|
44
|
+
keywords: [
|
|
45
|
+
"dialog",
|
|
46
|
+
"modal",
|
|
47
|
+
"overlay",
|
|
48
|
+
"popup"
|
|
49
|
+
]
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
//#endregion
|
|
53
|
+
export { meta };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { defineProps } from "../mcp/src/utils.js";
|
|
2
|
+
|
|
3
|
+
//#region src/dialog-provider/mcp.ts
|
|
4
|
+
const meta = {
|
|
5
|
+
name: "DialogProvider",
|
|
6
|
+
category: "Overlays",
|
|
7
|
+
description: "Context provider that enables imperatively shown dialogs (e.g. ConfirmationDialog). Guards against nested providers so it is safe to mount once near the app root.",
|
|
8
|
+
props: defineProps({ children: "The application subtree that can show dialogs through the dialog helper." }),
|
|
9
|
+
notes: ["Nesting a second DialogProvider is a safe no-op; the inner one passes children through."],
|
|
10
|
+
examples: [{
|
|
11
|
+
title: "App-level provider",
|
|
12
|
+
code: "<DialogProvider>\n <App />\n</DialogProvider>"
|
|
13
|
+
}],
|
|
14
|
+
related: ["ConfirmationDialog", "Dialog"],
|
|
15
|
+
keywords: [
|
|
16
|
+
"dialog",
|
|
17
|
+
"provider",
|
|
18
|
+
"modal",
|
|
19
|
+
"context"
|
|
20
|
+
]
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
export { meta };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FileUploadProps } from "./types/index.cjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/file-upload/FileUpload.d.ts
|
|
5
|
-
declare function FileUpload(props: FileUploadProps):
|
|
5
|
+
declare function FileUpload(props: FileUploadProps): react_jsx_runtime0.JSX.Element;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { FileUpload };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { FileUploadInlineProps } from "./types.cjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime12 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/file-upload-inline/FileUploadInline.d.ts
|
|
5
5
|
/**
|
|
6
6
|
* FileUploadInline - An inline file upload component using FileUpload primitives
|
|
7
7
|
*/
|
|
8
|
-
declare function FileUploadInline(props: FileUploadInlineProps):
|
|
8
|
+
declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime12.JSX.Element;
|
|
9
9
|
//#endregion
|
|
10
10
|
export { FileUploadInline };
|