@edux-design/comments 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @edux-design/comments
+
+## 0.1.1
+
+### Patch Changes
+
+- new packages
+- Updated dependencies
+  - @edux-design/avatars@0.1.3
+  - @edux-design/forms@0.0.15
+  - @edux-design/mentions@0.1.1
+
+## 0.1.0
+
+### Minor Changes
+
+- Initial comments package scaffold

package/README.md

@@ -0,0 +1,61 @@
+# @edux-design/comments
+
+Structured comment block for discussion threads, with avatar, metadata, actions, and nested replies.
+
+## Install
+
+```bash
+npm i @edux-design/comments @edux-design/avatars
+```
+
+## Usage
+
+```jsx
+import { Comment } from "@edux-design/comments";
+import { CommentComposer } from "@edux-design/comments";
+
+export function Example() {
+  return (
+    <Comment
+      author="Alex Johnson"
+      timestamp="2h ago"
+      body="Left a few notes on the introduction. Let me know if you want me to draft the edits."
+      avatarProps={{ name: "Alex Johnson" }}
+      onResolve={() => {
+        // mark resolved in your app state
+      }}
+      replies={
+        <Comment
+          author="Taylor"
+          timestamp="1h ago"
+          body="Happy to take the edits."
+          avatarProps={{ name: "Taylor" }}
+          variant="resolved"
+        />
+      }
+    >
+      <Comment.Actions>
+        <Comment.Reply />
+        <Comment.Edit />
+        <Comment.Resolve />
+      </Comment.Actions>
+    </Comment>
+  );
+}
+```
+
+```jsx
+export function ComposerExample() {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <CommentComposer
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+      onSubmit={() => setValue("")}
+      onCancel={() => setValue("")}
+      avatarProps={{ name: "Alex Johnson" }}
+    />
+  );
+}
+```

package/dist/index.d.mts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ *   author?: React.ReactNode,
+ *   timestamp?: React.ReactNode,
+ *   avatar?: React.ReactNode,
+ *   avatarName?: string,
+ *   avatarProps?: import("@edux-design/avatars").AvatarProps,
+ *   body?: React.ReactNode,
+ *   replies?: React.ReactNode,
+ *   variant?: "default" | "resolved",
+ *   resolved?: boolean,
+ *   onResolve?: (event: React.MouseEvent<HTMLButtonElement>) => void,
+ *   editable?: boolean,
+ *   children?: React.ReactNode,
+ * }} CommentProps
+ */
+/**
+ * Flexible comment surface with optional avatar, metadata, actions, and replies.
+ */
+declare const Comment: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+
+/**
+ * @typedef {React.FormHTMLAttributes<HTMLFormElement> & {
+ *   value?: string,
+ *   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void,
+ *   onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void,
+ *   onCancel?: (event: React.MouseEvent<HTMLButtonElement>) => void,
+ *   placeholder?: string,
+ *   rows?: number,
+ *   disabled?: boolean,
+ *   isSubmitting?: boolean,
+ *   submitLabel?: string,
+ *   cancelLabel?: string,
+ *   avatar?: React.ReactNode,
+ *   avatarProps?: import("@edux-design/avatars").AvatarProps,
+ *   actions?: React.ReactNode,
+ *   children?: React.ReactNode,
+ * }} CommentComposerProps
+ */
+/**
+ * Comment composer with avatar, textarea, and action buttons.
+ */
+declare const CommentComposer: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+
+declare function CommentMention({ peopleList, }: {
+    peopleList?: any[];
+}): react_jsx_runtime.JSX.Element;
+
+export { Comment, CommentComposer, CommentMention };

package/dist/index.d.ts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ *   author?: React.ReactNode,
+ *   timestamp?: React.ReactNode,
+ *   avatar?: React.ReactNode,
+ *   avatarName?: string,
+ *   avatarProps?: import("@edux-design/avatars").AvatarProps,
+ *   body?: React.ReactNode,
+ *   replies?: React.ReactNode,
+ *   variant?: "default" | "resolved",
+ *   resolved?: boolean,
+ *   onResolve?: (event: React.MouseEvent<HTMLButtonElement>) => void,
+ *   editable?: boolean,
+ *   children?: React.ReactNode,
+ * }} CommentProps
+ */
+/**
+ * Flexible comment surface with optional avatar, metadata, actions, and replies.
+ */
+declare const Comment: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+
+/**
+ * @typedef {React.FormHTMLAttributes<HTMLFormElement> & {
+ *   value?: string,
+ *   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void,
+ *   onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void,
+ *   onCancel?: (event: React.MouseEvent<HTMLButtonElement>) => void,
+ *   placeholder?: string,
+ *   rows?: number,
+ *   disabled?: boolean,
+ *   isSubmitting?: boolean,
+ *   submitLabel?: string,
+ *   cancelLabel?: string,
+ *   avatar?: React.ReactNode,
+ *   avatarProps?: import("@edux-design/avatars").AvatarProps,
+ *   actions?: React.ReactNode,
+ *   children?: React.ReactNode,
+ * }} CommentComposerProps
+ */
+/**
+ * Comment composer with avatar, textarea, and action buttons.
+ */
+declare const CommentComposer: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+
+declare function CommentMention({ peopleList, }: {
+    peopleList?: any[];
+}): react_jsx_runtime.JSX.Element;
+
+export { Comment, CommentComposer, CommentMention };