@meshagent/meshagent-tailwind 0.5.7 → 0.5.9
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/CHANGELOG.md +6 -0
- package/dist/cjs/Chat.js +28 -5
- package/dist/cjs/ChatInput.d.ts +4 -1
- package/dist/cjs/ChatInput.js +15 -3
- package/dist/cjs/ChatThread.js +1 -0
- package/dist/cjs/ChatTypingIndicator.js +2 -2
- package/dist/cjs/components/pane-example.d.ts +1 -0
- package/dist/cjs/components/pane-example.js +43 -0
- package/dist/cjs/components/ui/dialog.d.ts +15 -0
- package/dist/cjs/components/ui/dialog.js +166 -0
- package/dist/cjs/components/ui/form.d.ts +24 -0
- package/dist/cjs/components/ui/form.js +146 -0
- package/dist/cjs/components/ui/input.d.ts +3 -0
- package/dist/cjs/components/ui/input.js +41 -0
- package/dist/cjs/components/ui/label.d.ts +4 -0
- package/dist/cjs/components/ui/label.js +53 -0
- package/dist/cjs/components/ui/progress.js +1 -1
- package/dist/cjs/components/ui/radio-group.d.ts +5 -0
- package/dist/cjs/components/ui/radio-group.js +76 -0
- package/dist/cjs/components/ui/select.d.ts +15 -0
- package/dist/cjs/components/ui/select.js +199 -0
- package/dist/cjs/components/ui/sheet.d.ts +13 -0
- package/dist/cjs/components/ui/sheet.js +110 -0
- package/dist/cjs/components/ui/sonner.d.ts +3 -0
- package/dist/cjs/components/ui/sonner.js +42 -0
- package/dist/cjs/lib/pane-service.d.ts +16 -0
- package/dist/cjs/lib/pane-service.js +35 -0
- package/dist/cjs/lib/utils.d.ts +4 -0
- package/dist/cjs/tools/ask-user-for-file.d.ts +10 -0
- package/dist/cjs/tools/ask-user-for-file.js +68 -0
- package/dist/cjs/tools/ask-user.d.ts +10 -0
- package/dist/cjs/tools/ask-user.js +161 -0
- package/dist/cjs/tools/display-document.d.ts +10 -0
- package/dist/cjs/tools/display-document.js +49 -0
- package/dist/cjs/tools/file-dialog.d.ts +11 -0
- package/dist/cjs/tools/file-dialog.js +113 -0
- package/dist/cjs/tools/form-dialog.d.ts +12 -0
- package/dist/cjs/tools/form-dialog.js +92 -0
- package/dist/cjs/tools/form-schema.d.ts +41 -0
- package/dist/cjs/tools/form-schema.js +51 -0
- package/dist/cjs/tools/form.d.ts +16 -0
- package/dist/cjs/tools/form.js +81 -0
- package/dist/cjs/tools/toast.d.ts +10 -0
- package/dist/cjs/tools/toast.js +52 -0
- package/dist/cjs/tools/ui-toolkit.d.ts +6 -0
- package/dist/cjs/tools/ui-toolkit.js +44 -0
- package/dist/esm/Chat.js +29 -6
- package/dist/esm/ChatInput.d.ts +4 -1
- package/dist/esm/ChatInput.js +15 -3
- package/dist/esm/ChatThread.js +1 -0
- package/dist/esm/ChatTypingIndicator.js +2 -2
- package/dist/esm/components/pane-example.d.ts +1 -0
- package/dist/esm/components/pane-example.js +30 -0
- package/dist/esm/components/ui/dialog.d.ts +15 -0
- package/dist/esm/components/ui/dialog.js +136 -0
- package/dist/esm/components/ui/form.d.ts +24 -0
- package/dist/esm/components/ui/form.js +121 -0
- package/dist/esm/components/ui/input.d.ts +3 -0
- package/dist/esm/components/ui/input.js +21 -0
- package/dist/esm/components/ui/label.d.ts +4 -0
- package/dist/esm/components/ui/label.js +23 -0
- package/dist/esm/components/ui/progress.js +1 -1
- package/dist/esm/components/ui/radio-group.d.ts +5 -0
- package/dist/esm/components/ui/radio-group.js +46 -0
- package/dist/esm/components/ui/select.d.ts +15 -0
- package/dist/esm/components/ui/select.js +169 -0
- package/dist/esm/components/ui/sheet.d.ts +13 -0
- package/dist/esm/components/ui/sheet.js +80 -0
- package/dist/esm/components/ui/sonner.d.ts +3 -0
- package/dist/esm/components/ui/sonner.js +22 -0
- package/dist/esm/lib/pane-service.d.ts +16 -0
- package/dist/esm/lib/pane-service.js +15 -0
- package/dist/esm/lib/utils.d.ts +4 -0
- package/dist/esm/tools/ask-user-for-file.d.ts +10 -0
- package/dist/esm/tools/ask-user-for-file.js +48 -0
- package/dist/esm/tools/ask-user.d.ts +10 -0
- package/dist/esm/tools/ask-user.js +141 -0
- package/dist/esm/tools/display-document.d.ts +10 -0
- package/dist/esm/tools/display-document.js +29 -0
- package/dist/esm/tools/file-dialog.d.ts +11 -0
- package/dist/esm/tools/file-dialog.js +101 -0
- package/dist/esm/tools/form-dialog.d.ts +12 -0
- package/dist/esm/tools/form-dialog.js +79 -0
- package/dist/esm/tools/form-schema.d.ts +41 -0
- package/dist/esm/tools/form-schema.js +31 -0
- package/dist/esm/tools/form.d.ts +16 -0
- package/dist/esm/tools/form.js +64 -0
- package/dist/esm/tools/toast.d.ts +10 -0
- package/dist/esm/tools/toast.js +32 -0
- package/dist/esm/tools/ui-toolkit.d.ts +6 -0
- package/dist/esm/tools/ui-toolkit.js +24 -0
- package/dist/index.css +1 -1
- package/package.json +13 -4
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var toast_exports = {};
|
|
20
|
+
__export(toast_exports, {
|
|
21
|
+
Toast: () => Toast
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(toast_exports);
|
|
24
|
+
var import_meshagent = require("@meshagent/meshagent");
|
|
25
|
+
var import_sonner = require("sonner");
|
|
26
|
+
const toastSchema = {
|
|
27
|
+
type: "object",
|
|
28
|
+
additionalProperties: false,
|
|
29
|
+
required: ["title", "description"],
|
|
30
|
+
properties: {
|
|
31
|
+
title: {
|
|
32
|
+
type: "string",
|
|
33
|
+
description: "a very short summary suitable for a toast title"
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
class Toast extends import_meshagent.Tool {
|
|
38
|
+
constructor({ name, description, title } = {}) {
|
|
39
|
+
super({
|
|
40
|
+
name: name ?? "show_toast",
|
|
41
|
+
description: description ?? "let the user know something important (will be shown as a toast)",
|
|
42
|
+
title: title ?? "show user a toast",
|
|
43
|
+
inputSchema: toastSchema
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
async execute(arguments_) {
|
|
47
|
+
(0, import_sonner.toast)(arguments_.title, {
|
|
48
|
+
description: arguments_.description ?? ""
|
|
49
|
+
});
|
|
50
|
+
return new import_meshagent.EmptyResponse();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var ui_toolkit_exports = {};
|
|
20
|
+
__export(ui_toolkit_exports, {
|
|
21
|
+
UIToolkit: () => UIToolkit
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(ui_toolkit_exports);
|
|
24
|
+
var import_meshagent = require("@meshagent/meshagent");
|
|
25
|
+
var import_ask_user = require("./ask-user");
|
|
26
|
+
var import_ask_user_for_file = require("./ask-user-for-file");
|
|
27
|
+
var import_display_document = require("./display-document");
|
|
28
|
+
var import_toast = require("./toast");
|
|
29
|
+
class UIToolkit extends import_meshagent.RemoteToolkit {
|
|
30
|
+
constructor({ room }) {
|
|
31
|
+
super({
|
|
32
|
+
name: "ui",
|
|
33
|
+
title: "UI Tools",
|
|
34
|
+
description: "User interface tools",
|
|
35
|
+
room,
|
|
36
|
+
tools: [
|
|
37
|
+
new import_ask_user.AskUser(),
|
|
38
|
+
new import_ask_user_for_file.AskUserForFile(),
|
|
39
|
+
new import_toast.Toast(),
|
|
40
|
+
new import_display_document.DisplayDocument()
|
|
41
|
+
]
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
}
|
package/dist/esm/Chat.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useMemo, useCallback } from "react";
|
|
3
|
+
import { useChat, useClientToolkits, useRoomIndicators } from "@meshagent/meshagent-react";
|
|
3
4
|
import { ChatThread } from "./ChatThread";
|
|
4
5
|
import { ChatInput } from "./ChatInput";
|
|
5
6
|
import { ChatTypingIndicator } from "./ChatTypingIndicator";
|
|
7
|
+
import { UIToolkit } from "./tools/ui-toolkit";
|
|
8
|
+
import { Toaster } from "./components/ui/sonner";
|
|
6
9
|
function Chat({ room, path, participants }) {
|
|
7
10
|
const {
|
|
8
11
|
messages,
|
|
@@ -10,11 +13,27 @@ function Chat({ room, path, participants }) {
|
|
|
10
13
|
selectAttachments,
|
|
11
14
|
attachments,
|
|
12
15
|
setAttachments,
|
|
13
|
-
schemaFileExists
|
|
16
|
+
schemaFileExists,
|
|
17
|
+
cancelRequest
|
|
14
18
|
} = useChat({ room, path, participants });
|
|
15
|
-
const
|
|
19
|
+
const { thinking } = useRoomIndicators({ room, path });
|
|
20
|
+
const toolkits = useMemo(() => [
|
|
21
|
+
new UIToolkit({ room })
|
|
22
|
+
], [room]);
|
|
23
|
+
useClientToolkits({ toolkits, public: true });
|
|
24
|
+
const onTextChange = useCallback((_) => {
|
|
25
|
+
const removeParticipant = room.messaging.remoteParticipants;
|
|
26
|
+
for (const part of removeParticipant) {
|
|
27
|
+
room.messaging.sendMessage({
|
|
28
|
+
to: part,
|
|
29
|
+
type: "typing",
|
|
30
|
+
message: { path }
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
}, [room, path]);
|
|
34
|
+
const localParticipantName = room.localParticipant?.getAttribute("name");
|
|
16
35
|
if (schemaFileExists === false) {
|
|
17
|
-
return /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-h-0 gap-2 p-4", children: /* @__PURE__ */ jsx("p", { className: "text-red-500", children: 'No AI agent found in this room. Run `meshagent chatbot join --room [room-name] --agent-name "Chat Agent" --name "Chat Friend" and try again.' }) });
|
|
36
|
+
return /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-h-0 gap-2 p-4", children: /* @__PURE__ */ jsx("p", { className: "text-red-500", children: 'No AI agent found in this room. Run `meshagent chatbot join --room [room-name] --agent-name "Chat Agent" --name "Chat Friend"` and try again.' }) });
|
|
18
37
|
}
|
|
19
38
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 gap-2 p-0", children: [
|
|
20
39
|
/* @__PURE__ */ jsx(
|
|
@@ -32,9 +51,13 @@ function Chat({ room, path, participants }) {
|
|
|
32
51
|
onSubmit: sendMessage,
|
|
33
52
|
attachments,
|
|
34
53
|
onFilesSelected: selectAttachments,
|
|
35
|
-
setAttachments
|
|
54
|
+
setAttachments,
|
|
55
|
+
onTextChange,
|
|
56
|
+
onCancelRequest: cancelRequest,
|
|
57
|
+
showCancelButton: thinking
|
|
36
58
|
}
|
|
37
|
-
)
|
|
59
|
+
),
|
|
60
|
+
/* @__PURE__ */ jsx(Toaster, {})
|
|
38
61
|
] });
|
|
39
62
|
}
|
|
40
63
|
export {
|
package/dist/esm/ChatInput.d.ts
CHANGED
|
@@ -4,6 +4,9 @@ interface ChatInputProps {
|
|
|
4
4
|
onFilesSelected: (files: File[]) => void;
|
|
5
5
|
attachments: FileUpload[];
|
|
6
6
|
setAttachments: (attachments: FileUpload[]) => void;
|
|
7
|
+
onTextChange?: (text: string) => void;
|
|
8
|
+
onCancelRequest?: () => void;
|
|
9
|
+
showCancelButton?: boolean;
|
|
7
10
|
}
|
|
8
|
-
export declare function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments, onTextChange, onCancelRequest, showCancelButton }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
|
|
9
12
|
export {};
|
package/dist/esm/ChatInput.js
CHANGED
|
@@ -6,7 +6,15 @@ import { Button } from "./components/ui/button";
|
|
|
6
6
|
import { Textarea } from "./components/ui/textarea";
|
|
7
7
|
import { FileUploader } from "./FileUploader";
|
|
8
8
|
import { UploadPill } from "./UploadPill";
|
|
9
|
-
function ChatInput({
|
|
9
|
+
function ChatInput({
|
|
10
|
+
onSubmit,
|
|
11
|
+
onFilesSelected,
|
|
12
|
+
attachments,
|
|
13
|
+
setAttachments,
|
|
14
|
+
onTextChange,
|
|
15
|
+
onCancelRequest,
|
|
16
|
+
showCancelButton
|
|
17
|
+
}) {
|
|
10
18
|
const [value, setValue] = React.useState("");
|
|
11
19
|
const handleSend = useCallback(() => {
|
|
12
20
|
const trimmed2 = value.trim();
|
|
@@ -30,6 +38,10 @@ function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments }) {
|
|
|
30
38
|
const cancelAttachment = useCallback((attachment) => {
|
|
31
39
|
setAttachments(attachments.filter((f) => f.path !== attachment.path));
|
|
32
40
|
}, [attachments, setAttachments]);
|
|
41
|
+
const _onChange = useCallback((e) => {
|
|
42
|
+
setValue(e.currentTarget.value);
|
|
43
|
+
onTextChange?.(e.currentTarget.value);
|
|
44
|
+
}, [onTextChange]);
|
|
33
45
|
const trimmed = value.trim();
|
|
34
46
|
const disabled = !trimmed && attachments.length === 0;
|
|
35
47
|
return /* @__PURE__ */ jsxs("div", { className: "border-t py-3 gap-3 flex flex-col", children: [
|
|
@@ -49,11 +61,11 @@ function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments }) {
|
|
|
49
61
|
placeholder: "Type a message and press Enter",
|
|
50
62
|
className: "flex-1 resize-none h-20",
|
|
51
63
|
value,
|
|
52
|
-
onChange:
|
|
64
|
+
onChange: _onChange,
|
|
53
65
|
onKeyDown
|
|
54
66
|
}
|
|
55
67
|
),
|
|
56
|
-
/* @__PURE__ */ jsx(Button, { onClick: handleSend, disabled, children: "Send" })
|
|
68
|
+
showCancelButton === true ? /* @__PURE__ */ jsx(Button, { onClick: onCancelRequest, children: "Cancel" }) : /* @__PURE__ */ jsx(Button, { onClick: handleSend, disabled, children: "Send" })
|
|
57
69
|
] })
|
|
58
70
|
] });
|
|
59
71
|
}
|
package/dist/esm/ChatThread.js
CHANGED
|
@@ -25,6 +25,7 @@ function timeAgo(iso) {
|
|
|
25
25
|
const rtf = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
|
|
26
26
|
const date = new Date(iso);
|
|
27
27
|
const now = /* @__PURE__ */ new Date();
|
|
28
|
+
if (isNaN(date.getTime())) return "";
|
|
28
29
|
const seconds = Math.round((date.getTime() - now.getTime()) / 1e3);
|
|
29
30
|
const minutes = Math.round(seconds / 60);
|
|
30
31
|
const hours = Math.round(minutes / 60);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRoomIndicators } from "@meshagent/meshagent-react";
|
|
3
3
|
function ChatTypingIndicator({ room, path }) {
|
|
4
|
-
const { typing } = useRoomIndicators({ room, path });
|
|
5
|
-
return typing ? /* @__PURE__ */ jsxs("div", { className: "flex items-end space-x-1 h-6 p-6", children: [
|
|
4
|
+
const { typing, thinking } = useRoomIndicators({ room, path });
|
|
5
|
+
return typing || thinking ? /* @__PURE__ */ jsxs("div", { className: "flex items-end space-x-1 h-6 p-6", children: [
|
|
6
6
|
[0, 1, 2].map((index) => /* @__PURE__ */ jsx(
|
|
7
7
|
"span",
|
|
8
8
|
{
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function PaneExample(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useState, useEffect } from "react";
|
|
4
|
+
import { Button } from "@/components/ui/button";
|
|
5
|
+
import {
|
|
6
|
+
Sheet,
|
|
7
|
+
SheetContent,
|
|
8
|
+
SheetHeader,
|
|
9
|
+
SheetTitle,
|
|
10
|
+
SheetDescription,
|
|
11
|
+
SheetFooter
|
|
12
|
+
} from "@/components/ui/sheet";
|
|
13
|
+
import { registerPane, closePane } from "@/lib/pane-service";
|
|
14
|
+
function PaneExample() {
|
|
15
|
+
const [open, setOpen] = useState(false);
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
registerPane(setOpen);
|
|
18
|
+
}, []);
|
|
19
|
+
return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-full sm:w-[700px] sm:max-w-1/2", children: [
|
|
20
|
+
/* @__PURE__ */ jsxs(SheetHeader, { children: [
|
|
21
|
+
/* @__PURE__ */ jsx(SheetTitle, { children: "My Side Pane" }),
|
|
22
|
+
/* @__PURE__ */ jsx(SheetDescription, { children: "Here's a panel you can open/close programmatically." })
|
|
23
|
+
] }),
|
|
24
|
+
/* @__PURE__ */ jsx("div", { className: "p-4 space-y-4 flex-1 overflow-auto p-4 space-y-4", children: /* @__PURE__ */ jsx("p", { children: "This is the pane content area. Add any React nodes here." }) }),
|
|
25
|
+
/* @__PURE__ */ jsx(SheetFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: closePane, children: "Close Pane" }) })
|
|
26
|
+
] }) });
|
|
27
|
+
}
|
|
28
|
+
export {
|
|
29
|
+
PaneExample as default
|
|
30
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
3
|
+
declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
|
9
|
+
showCloseButton?: boolean;
|
|
10
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
3
|
+
import { XIcon } from "lucide-react";
|
|
4
|
+
import { cn } from "../../lib/utils";
|
|
5
|
+
function Dialog({
|
|
6
|
+
...props
|
|
7
|
+
}) {
|
|
8
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
9
|
+
}
|
|
10
|
+
function DialogTrigger({
|
|
11
|
+
...props
|
|
12
|
+
}) {
|
|
13
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
|
|
14
|
+
}
|
|
15
|
+
function DialogPortal({
|
|
16
|
+
...props
|
|
17
|
+
}) {
|
|
18
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
|
|
19
|
+
}
|
|
20
|
+
function DialogClose({
|
|
21
|
+
...props
|
|
22
|
+
}) {
|
|
23
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
|
|
24
|
+
}
|
|
25
|
+
function DialogOverlay({
|
|
26
|
+
className,
|
|
27
|
+
...props
|
|
28
|
+
}) {
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
DialogPrimitive.Overlay,
|
|
31
|
+
{
|
|
32
|
+
"data-slot": "dialog-overlay",
|
|
33
|
+
className: cn(
|
|
34
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
|
35
|
+
className
|
|
36
|
+
),
|
|
37
|
+
...props
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
function DialogContent({
|
|
42
|
+
className,
|
|
43
|
+
children,
|
|
44
|
+
showCloseButton = true,
|
|
45
|
+
...props
|
|
46
|
+
}) {
|
|
47
|
+
return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
|
|
48
|
+
/* @__PURE__ */ jsx(DialogOverlay, {}),
|
|
49
|
+
/* @__PURE__ */ jsxs(
|
|
50
|
+
DialogPrimitive.Content,
|
|
51
|
+
{
|
|
52
|
+
"data-slot": "dialog-content",
|
|
53
|
+
className: cn(
|
|
54
|
+
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
|
55
|
+
className
|
|
56
|
+
),
|
|
57
|
+
...props,
|
|
58
|
+
children: [
|
|
59
|
+
children,
|
|
60
|
+
showCloseButton && /* @__PURE__ */ jsxs(
|
|
61
|
+
DialogPrimitive.Close,
|
|
62
|
+
{
|
|
63
|
+
"data-slot": "dialog-close",
|
|
64
|
+
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
65
|
+
children: [
|
|
66
|
+
/* @__PURE__ */ jsx(XIcon, {}),
|
|
67
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
)
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
)
|
|
74
|
+
] });
|
|
75
|
+
}
|
|
76
|
+
function DialogHeader({ className, ...props }) {
|
|
77
|
+
return /* @__PURE__ */ jsx(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
"data-slot": "dialog-header",
|
|
81
|
+
className: cn("flex flex-col gap-2 text-center sm:text-left", className),
|
|
82
|
+
...props
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
function DialogFooter({ className, ...props }) {
|
|
87
|
+
return /* @__PURE__ */ jsx(
|
|
88
|
+
"div",
|
|
89
|
+
{
|
|
90
|
+
"data-slot": "dialog-footer",
|
|
91
|
+
className: cn(
|
|
92
|
+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
|
93
|
+
className
|
|
94
|
+
),
|
|
95
|
+
...props
|
|
96
|
+
}
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
function DialogTitle({
|
|
100
|
+
className,
|
|
101
|
+
...props
|
|
102
|
+
}) {
|
|
103
|
+
return /* @__PURE__ */ jsx(
|
|
104
|
+
DialogPrimitive.Title,
|
|
105
|
+
{
|
|
106
|
+
"data-slot": "dialog-title",
|
|
107
|
+
className: cn("text-lg leading-none font-semibold", className),
|
|
108
|
+
...props
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
function DialogDescription({
|
|
113
|
+
className,
|
|
114
|
+
...props
|
|
115
|
+
}) {
|
|
116
|
+
return /* @__PURE__ */ jsx(
|
|
117
|
+
DialogPrimitive.Description,
|
|
118
|
+
{
|
|
119
|
+
"data-slot": "dialog-description",
|
|
120
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
121
|
+
...props
|
|
122
|
+
}
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
export {
|
|
126
|
+
Dialog,
|
|
127
|
+
DialogClose,
|
|
128
|
+
DialogContent,
|
|
129
|
+
DialogDescription,
|
|
130
|
+
DialogFooter,
|
|
131
|
+
DialogHeader,
|
|
132
|
+
DialogOverlay,
|
|
133
|
+
DialogPortal,
|
|
134
|
+
DialogTitle,
|
|
135
|
+
DialogTrigger
|
|
136
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
3
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
4
|
+
import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
|
|
5
|
+
declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
|
|
6
|
+
declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare const useFormField: () => {
|
|
8
|
+
invalid: boolean;
|
|
9
|
+
isDirty: boolean;
|
|
10
|
+
isTouched: boolean;
|
|
11
|
+
isValidating: boolean;
|
|
12
|
+
error?: import("react-hook-form").FieldError;
|
|
13
|
+
id: string;
|
|
14
|
+
name: string;
|
|
15
|
+
formItemId: string;
|
|
16
|
+
formDescriptionId: string;
|
|
17
|
+
formMessageId: string;
|
|
18
|
+
};
|
|
19
|
+
declare function FormItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element | null;
|
|
24
|
+
export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
4
|
+
import {
|
|
5
|
+
Controller,
|
|
6
|
+
FormProvider,
|
|
7
|
+
useFormContext,
|
|
8
|
+
useFormState
|
|
9
|
+
} from "react-hook-form";
|
|
10
|
+
import { cn } from "../../lib/utils";
|
|
11
|
+
import { Label } from "../../components/ui/label";
|
|
12
|
+
const Form = FormProvider;
|
|
13
|
+
const FormFieldContext = React.createContext(
|
|
14
|
+
{}
|
|
15
|
+
);
|
|
16
|
+
const FormField = ({
|
|
17
|
+
...props
|
|
18
|
+
}) => {
|
|
19
|
+
return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
|
|
20
|
+
};
|
|
21
|
+
const useFormField = () => {
|
|
22
|
+
const fieldContext = React.useContext(FormFieldContext);
|
|
23
|
+
const itemContext = React.useContext(FormItemContext);
|
|
24
|
+
const { getFieldState } = useFormContext();
|
|
25
|
+
const formState = useFormState({ name: fieldContext.name });
|
|
26
|
+
const fieldState = getFieldState(fieldContext.name, formState);
|
|
27
|
+
if (!fieldContext) {
|
|
28
|
+
throw new Error("useFormField should be used within <FormField>");
|
|
29
|
+
}
|
|
30
|
+
const { id } = itemContext;
|
|
31
|
+
return {
|
|
32
|
+
id,
|
|
33
|
+
name: fieldContext.name,
|
|
34
|
+
formItemId: `${id}-form-item`,
|
|
35
|
+
formDescriptionId: `${id}-form-item-description`,
|
|
36
|
+
formMessageId: `${id}-form-item-message`,
|
|
37
|
+
...fieldState
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
const FormItemContext = React.createContext(
|
|
41
|
+
{}
|
|
42
|
+
);
|
|
43
|
+
function FormItem({ className, ...props }) {
|
|
44
|
+
const id = React.useId();
|
|
45
|
+
return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
|
|
46
|
+
"div",
|
|
47
|
+
{
|
|
48
|
+
"data-slot": "form-item",
|
|
49
|
+
className: cn("grid gap-2", className),
|
|
50
|
+
...props
|
|
51
|
+
}
|
|
52
|
+
) });
|
|
53
|
+
}
|
|
54
|
+
function FormLabel({
|
|
55
|
+
className,
|
|
56
|
+
...props
|
|
57
|
+
}) {
|
|
58
|
+
const { error, formItemId } = useFormField();
|
|
59
|
+
return /* @__PURE__ */ jsx(
|
|
60
|
+
Label,
|
|
61
|
+
{
|
|
62
|
+
"data-slot": "form-label",
|
|
63
|
+
"data-error": !!error,
|
|
64
|
+
className: cn("data-[error=true]:text-destructive", className),
|
|
65
|
+
htmlFor: formItemId,
|
|
66
|
+
...props
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
function FormControl({ ...props }) {
|
|
71
|
+
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
72
|
+
return /* @__PURE__ */ jsx(
|
|
73
|
+
Slot,
|
|
74
|
+
{
|
|
75
|
+
"data-slot": "form-control",
|
|
76
|
+
id: formItemId,
|
|
77
|
+
"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
|
|
78
|
+
"aria-invalid": !!error,
|
|
79
|
+
...props
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
function FormDescription({ className, ...props }) {
|
|
84
|
+
const { formDescriptionId } = useFormField();
|
|
85
|
+
return /* @__PURE__ */ jsx(
|
|
86
|
+
"p",
|
|
87
|
+
{
|
|
88
|
+
"data-slot": "form-description",
|
|
89
|
+
id: formDescriptionId,
|
|
90
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
91
|
+
...props
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
function FormMessage({ className, ...props }) {
|
|
96
|
+
const { error, formMessageId } = useFormField();
|
|
97
|
+
const body = error ? String(error?.message ?? "") : props.children;
|
|
98
|
+
if (!body) {
|
|
99
|
+
return null;
|
|
100
|
+
}
|
|
101
|
+
return /* @__PURE__ */ jsx(
|
|
102
|
+
"p",
|
|
103
|
+
{
|
|
104
|
+
"data-slot": "form-message",
|
|
105
|
+
id: formMessageId,
|
|
106
|
+
className: cn("text-destructive text-sm", className),
|
|
107
|
+
...props,
|
|
108
|
+
children: body
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
export {
|
|
113
|
+
Form,
|
|
114
|
+
FormControl,
|
|
115
|
+
FormDescription,
|
|
116
|
+
FormField,
|
|
117
|
+
FormItem,
|
|
118
|
+
FormLabel,
|
|
119
|
+
FormMessage,
|
|
120
|
+
useFormField
|
|
121
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../lib/utils";
|
|
3
|
+
function Input({ className, type, ...props }) {
|
|
4
|
+
return /* @__PURE__ */ jsx(
|
|
5
|
+
"input",
|
|
6
|
+
{
|
|
7
|
+
type,
|
|
8
|
+
"data-slot": "input",
|
|
9
|
+
className: cn(
|
|
10
|
+
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
11
|
+
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
12
|
+
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
13
|
+
className
|
|
14
|
+
),
|
|
15
|
+
...props
|
|
16
|
+
}
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
export {
|
|
20
|
+
Input
|
|
21
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
4
|
+
import { cn } from "../../lib/utils";
|
|
5
|
+
function Label({
|
|
6
|
+
className,
|
|
7
|
+
...props
|
|
8
|
+
}) {
|
|
9
|
+
return /* @__PURE__ */ jsx(
|
|
10
|
+
LabelPrimitive.Root,
|
|
11
|
+
{
|
|
12
|
+
"data-slot": "label",
|
|
13
|
+
className: cn(
|
|
14
|
+
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
15
|
+
className
|
|
16
|
+
),
|
|
17
|
+
...props
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
export {
|
|
22
|
+
Label
|
|
23
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
|
3
|
-
import { cn } from "
|
|
3
|
+
import { cn } from "../../lib/utils";
|
|
4
4
|
function Progress({ className, value, ...props }) {
|
|
5
5
|
return /* @__PURE__ */ jsx(
|
|
6
6
|
ProgressPrimitive.Root,
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
|
3
|
+
declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export { RadioGroup, RadioGroupItem };
|