@krrli/cm-designsystem 1.30.0 → 1.31.0

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export * from "./file-upload/FileUpload";
 export * from "./form/Form";
 export * from "./icon-button/IconButton";
 export * from "./icons/IconBase";
+export * from "./icons/generated";
 export * from "./input/Input";
 export * from "./like-toggle/LikeToggle";
 export * from "./logo-link/LogoLink";

package/dist/components/index.js

@@ -6,6 +6,7 @@ export * from "./file-upload/FileUpload";
 export * from "./form/Form";
 export * from "./icon-button/IconButton";
 export * from "./icons/IconBase";
+export * from "./icons/generated";
 export * from "./input/Input";
 export * from "./like-toggle/LikeToggle";
 export * from "./logo-link/LogoLink";

package/dist/components/like-toggle/LikeToggle.js

@@ -23,6 +23,7 @@ const toggleStyles = tv({
             "focus-visible:ring-offset-2",
             "disabled:opacity-50",
             "disabled:pointer-events-none",
+            "cursor-pointer",
         ],
         icon: ["inline-flex"],
         label: [],

package/dist/components/toggle/Toggle.js

@@ -22,6 +22,7 @@ const toggleStyles = tv({
             "focus-visible:ring-offset-2",
             "disabled:opacity-50",
             "disabled:pointer-events-none",
+            "cursor-pointer",
         ],
         icon: ["inline-flex"],
         label: [],

package/dist/compositions/image-upload-modal/ImageUploadModal.d.ts

@@ -0,0 +1,15 @@
+interface ImageUploadModalProps {
+    /** Callback fired when the user selects a file. `null` is passed if no file is selected. */
+    onFileChange: (file: File | null) => void;
+}
+export type ImageUploadModalRef = {
+    /** Function that opens or closes the modal. Pass `true` to open, `false` to close. */
+    openModal: (open: boolean) => void;
+};
+/**
+ * ImageUploadModal component
+ *
+ * Renders a post creation component.
+ */
+export declare const ImageUploadModal: import("react").ForwardRefExoticComponent<ImageUploadModalProps & import("react").RefAttributes<ImageUploadModalRef>>;
+export {};

package/dist/compositions/image-upload-modal/ImageUploadModal.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef, useImperativeHandle } from "react";
+import { Button, FileUpload, Modal } from "../../components";
+import { Cancel, Checkmark } from "../../components/icons/generated";
+/**
+ * ImageUploadModal component
+ *
+ * Renders a post creation component.
+ */
+export const ImageUploadModal = forwardRef((props, ref) => {
+    const [open, setOpen] = useState(false);
+    const [file, setFile] = useState(null);
+    // Pass the ref to the useImperativeHandle hook
+    useImperativeHandle(ref, () => ({
+        openModal: setOpen,
+    }));
+    return (_jsxs(Modal, { open: open, onOpenChange: setOpen, title: "Image upload", children: [_jsx(Modal.Body, { children: _jsx(FileUpload, { onFileSelect: setFile }) }), _jsxs(Modal.Actions, { children: [_jsx(Button, { intent: "primary", size: "md", icon: Cancel, onClick: () => setOpen(false), children: "Cancel" }), _jsx(Button, { intent: "secondary", size: "md", icon: Checkmark, onClick: () => {
+                            setOpen(false);
+                            props.onFileChange(file);
+                        }, children: "Save" })] })] }));
+});

package/dist/compositions/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./image-banner/ImageBanner";
+export * from "./image-upload-modal/ImageUploadModal";
+export * from "./post/Post";
+export * from "./post-creator/PostCreator";
+export * from "./profile-banner/ProfileBanner";
+export * from "./profile-banner-image/ProfileBannerImage";
+export * from "./profile-banner-info/ProfileBannerInfo";
+export * from "./response/Response";
+export * from "./response-creator/ResponseCreator";
+export * from "./user-info/UserInfo";
+export * from "./user-recommendation/UserRecommendation";

package/dist/compositions/index.js

@@ -0,0 +1,11 @@
+export * from "./image-banner/ImageBanner";
+export * from "./image-upload-modal/ImageUploadModal";
+export * from "./post/Post";
+export * from "./post-creator/PostCreator";
+export * from "./profile-banner/ProfileBanner";
+export * from "./profile-banner-image/ProfileBannerImage";
+export * from "./profile-banner-info/ProfileBannerInfo";
+export * from "./response/Response";
+export * from "./response-creator/ResponseCreator";
+export * from "./user-info/UserInfo";
+export * from "./user-recommendation/UserRecommendation";

package/dist/compositions/post-creator/PostCreator.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Form } from "@radix-ui/react-form";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { tv } from "tailwind-variants";
-import { Avatar, Button, FileUpload, Heading, Modal, Textarea, } from "../../components";
-import { Cancel, Checkmark, Send, Upload, } from "../../components/icons/generated";
+import { Avatar, Button, Heading, Textarea } from "../../components";
+import { Send, Upload } from "../../components/icons/generated";
+import { ImageUploadModal, } from "../image-upload-modal/ImageUploadModal";
 import { PostBase } from "../post-base/PostBase";
 const PostCreatorStyles = tv({
     slots: {
@@ -21,8 +22,8 @@ const PostCreatorStyles = tv({
  */
 export const PostCreator = (props) => {
     const { content, avatar, title, input, action } = PostCreatorStyles(props);
-    const [open, setOpen] = useState(false);
     const [file, setFile] = useState(null);
     const [text, setText] = useState("");
-    return (_jsxs(_Fragment, { children: [_jsxs(PostBase, { children: [_jsx("div", { className: avatar(), children: _jsx(Avatar, { alt: "Profile", size: "md", src: props.src, onAvatarClick: props.onAvatarClick }) }), _jsxs(Form, { className: content(), children: [_jsx(Heading, { size: "4", as: "h4", className: title(), children: "Hey, what's up?" }), _jsx("div", { className: input(), children: _jsx(Textarea, { name: "post", placeholder: "Your opinion matters!", onChange: setText }) }), _jsxs("div", { className: action(), children: [_jsx(Button, { intent: "primary", size: "md", icon: Upload, onClick: () => setOpen(true), children: "Picture upload" }), _jsx(Button, { intent: "secondary", size: "md", icon: Send, onClick: () => props.onSendClick(text, file), children: "Send" })] })] })] }), _jsxs(Modal, { open: open, onOpenChange: setOpen, title: "Picture upload", children: [_jsx(Modal.Body, { children: _jsx(FileUpload, { onFileSelect: setFile }) }), _jsxs(Modal.Actions, { children: [_jsx(Button, { intent: "primary", size: "md", icon: Cancel, onClick: () => setOpen(false), children: "Cancel" }), _jsx(Button, { intent: "secondary", size: "md", icon: Checkmark, onClick: () => setOpen(false), children: "Save" })] })] })] }));
+    const imageUploadModalRef = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsxs(PostBase, { children: [_jsx("div", { className: avatar(), children: _jsx(Avatar, { alt: "Profile", size: "md", src: props.src, onAvatarClick: props.onAvatarClick }) }), _jsxs(Form, { className: content(), children: [_jsx(Heading, { size: "4", as: "h4", className: title(), children: "Hey, what's up?" }), _jsx("div", { className: input(), children: _jsx(Textarea, { name: "post", placeholder: "Your opinion matters!", onChange: setText }) }), _jsxs("div", { className: action(), children: [_jsx(Button, { intent: "primary", size: "md", icon: Upload, onClick: () => imageUploadModalRef.current?.openModal(true), children: "Picture upload" }), _jsx(Button, { intent: "secondary", size: "md", icon: Send, onClick: () => props.onSendClick(text, file), children: "Send" })] })] })] }), _jsx(ImageUploadModal, { ref: imageUploadModalRef, onFileChange: setFile })] }));
 };

package/dist/compositions/profile-banner/ProfileBanner.d.ts

@@ -64,6 +64,16 @@ interface ProfileBannerProps extends ProfileBannerVariants {
     description: string;
     /** Whether the profile being viewed belongs to the logged-in user. */
     isCurrentUser: boolean;
+    /**
+     *     Optional callback triggered when the profile/banner image changes.
+     *     Receives the selected `File`, or `null` if cleared.
+     */
+    onProfileImageChange?: (file: File | null) => void;
+    /**
+     *     Optional callback triggered when the avatar image changes.
+     *     Receives the selected `File`, or `null` if cleared.
+     */
+    onAvatarImageChange?: (file: File | null) => void;
 }
 /**
  * Profile banner component for displaying user profile info.

package/dist/compositions/profile-banner/ProfileBanner.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
 import { tv } from "tailwind-variants";
 import { Avatar, Paragraph } from "../../components";
+import { ImageUploadModal, } from "../image-upload-modal/ImageUploadModal";
 import { ProfileBannerImage } from "../profile-banner-image/ProfileBannerImage";
 import { ProfileBannerInfo } from "../profile-banner-info/ProfileBannerInfo";
 const ProfileBannerStyles = tv({
@@ -16,5 +18,9 @@ const ProfileBannerStyles = tv({
  */
 export const ProfileBanner = (props) => {
     const { base, avatar, info, description } = ProfileBannerStyles(props);
-    return (_jsxs("div", { className: base(), children: [_jsx(ProfileBannerImage, { src: props.imageSrc, alt: props.imageAlt, onClick: () => { } }), _jsx("div", { className: avatar(), children: _jsx(Avatar, { src: props.avatarSrc, alt: props.avatarAlt, size: "xl", onActionClick: props.isCurrentUser ? () => { } : undefined }) }), _jsxs("div", { className: info(), children: [_jsx(ProfileBannerInfo, { isCurrentUser: props.isCurrentUser, displayName: props.displayName, userName: props.userName, location: props.location, joinedTimestamp: props.joinedTimestamp, onProfileClick: () => { } }), _jsx(Paragraph, { size: "md", className: description(), children: props.description })] })] }));
+    const profileImageUploadModalRef = useRef(null);
+    const avatarImageUploadModalRef = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: base(), children: [_jsx(ProfileBannerImage, { src: props.imageSrc, alt: props.imageAlt, onClick: () => profileImageUploadModalRef.current?.openModal(true) }), _jsx("div", { className: avatar(), children: _jsx(Avatar, { src: props.avatarSrc, alt: props.avatarAlt, size: "xl", onActionClick: props.isCurrentUser
+                                ? () => avatarImageUploadModalRef.current?.openModal(true)
+                                : undefined }) }), _jsxs("div", { className: info(), children: [_jsx(ProfileBannerInfo, { isCurrentUser: props.isCurrentUser, displayName: props.displayName, userName: props.userName, location: props.location, joinedTimestamp: props.joinedTimestamp, onProfileClick: () => { } }), _jsx(Paragraph, { size: "md", className: description(), children: props.description })] })] }), _jsx(ImageUploadModal, { ref: profileImageUploadModalRef, onFileChange: props.onProfileImageChange ?? (() => { }) }), _jsx(ImageUploadModal, { ref: avatarImageUploadModalRef, onFileChange: props.onAvatarImageChange ?? (() => { }) })] }));
 };

package/dist/compositions/profile-banner-info/ProfileBannerInfo.js

@@ -6,9 +6,9 @@ import { Label } from "../../components/typography/Label";
 const profileBannerInfoStyles = tv({
     slots: {
         base: ["flex", "flex-col", "gap-2", "items-start"],
-        title: ["flex", "gap-1", "items-center"],
+        title: ["flex", "gap-1", "items-center", "**:cursor-pointer"],
         icon: ["text-violet-600", "-mt-0.5"],
-        displayName: ["text-slate-900", "**:cursor-pointer"],
+        displayName: ["text-slate-900"],
         detailInfo: ["flex", "gap-4"],
         secondaryInfo: ["text-slate-500"],
     },
@@ -43,5 +43,5 @@ const memberSincePrefix = "Member since ";
  */
 export const ProfileBannerInfo = (props) => {
     const { base, title, icon, displayName, detailInfo, secondaryInfo } = profileBannerInfoStyles(props);
-    return (_jsxs("div", { className: base(), children: [_jsxs("div", { className: title(), children: [_jsx("button", { onClick: props.onProfileClick, className: displayName(), children: _jsx(Label, { size: "xl", children: props.displayName }) }), props.isCurrentUser && _jsx(Settings, { className: icon() })] }), _jsxs("div", { className: detailInfo(), children: [_jsx(IconButton, { intent: "secondary", icon: Profile, onClick: props.onProfileClick, children: props.userName }), _jsx(IconButton, { intent: "primary", icon: Location, onClick: props.onProfileClick, className: secondaryInfo(), children: props.location }), _jsx(IconButton, { intent: "primary", icon: Calendar, onClick: props.onProfileClick, className: secondaryInfo(), children: memberSincePrefix + timeSince(props.joinedTimestamp) })] })] }));
+    return (_jsxs("div", { className: base(), children: [_jsxs("div", { className: title(), children: [_jsx("button", { onClick: props.onProfileClick, className: displayName(), children: _jsx(Label, { size: "xl", children: props.displayName }) }), props.isCurrentUser && (_jsx("button", { onClick: props.onSettingsClick, children: _jsx(Settings, { className: icon() }) }))] }), _jsxs("div", { className: detailInfo(), children: [_jsx(IconButton, { intent: "secondary", icon: Profile, onClick: props.onProfileClick, children: props.userName }), _jsx(IconButton, { intent: "primary", icon: Location, onClick: props.onProfileClick, className: secondaryInfo(), children: props.location }), _jsx(IconButton, { intent: "primary", icon: Calendar, onClick: props.onProfileClick, className: secondaryInfo(), children: memberSincePrefix + timeSince(props.joinedTimestamp) })] })] }));
 };

package/dist/compositions/response-creator/ResponseCreator.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Form } from "@radix-ui/react-form";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { tv } from "tailwind-variants";
-import { Button, FileUpload, Modal, Textarea } from "../../components";
-import { Cancel, Checkmark, Send, Upload, } from "../../components/icons/generated";
+import { Button, Textarea } from "../../components";
+import { Send, Upload } from "../../components/icons/generated";
+import { ImageUploadModal, } from "../image-upload-modal/ImageUploadModal";
 import { PostBase } from "../post-base/PostBase";
 import { UserInfo } from "../user-info/UserInfo";
 const ResponseCreatorStyles = tv({
@@ -20,8 +21,8 @@ const ResponseCreatorStyles = tv({
  */
 export const ResponseCreator = (props) => {
     const { content, input, action } = ResponseCreatorStyles(props);
-    const [open, setOpen] = useState(false);
     const [file, setFile] = useState(null);
     const [text, setText] = useState("");
-    return (_jsxs(_Fragment, { children: [_jsx(PostBase, { children: _jsxs(Form, { className: content(), children: [_jsx(UserInfo, { displayName: props.displayName, onClick: props.onAvatarClick, size: "sm", src: props.src, userName: props.userName }), _jsx("div", { className: input(), children: _jsx(Textarea, { name: "post", placeholder: "Your opinion matters!", onChange: setText }) }), _jsxs("div", { className: action(), children: [_jsx(Button, { intent: "primary", size: "md", icon: Upload, onClick: () => setOpen(true), children: "Picture upload" }), _jsx(Button, { intent: "secondary", size: "md", icon: Send, onClick: () => props.onSendClick(text, file), children: "Send" })] })] }) }), _jsxs(Modal, { open: open, onOpenChange: setOpen, title: "Picture upload", children: [_jsx(Modal.Body, { children: _jsx(FileUpload, { onFileSelect: setFile }) }), _jsxs(Modal.Actions, { children: [_jsx(Button, { intent: "primary", size: "md", icon: Cancel, onClick: () => setOpen(false), children: "Cancel" }), _jsx(Button, { intent: "secondary", size: "md", icon: Checkmark, onClick: () => setOpen(false), children: "Save" })] })] })] }));
+    const imageUploadModalRef = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx(PostBase, { children: _jsxs(Form, { className: content(), children: [_jsx(UserInfo, { displayName: props.displayName, onClick: props.onAvatarClick, size: "sm", src: props.src, userName: props.userName }), _jsx("div", { className: input(), children: _jsx(Textarea, { name: "post", placeholder: "Your opinion matters!", onChange: setText }) }), _jsxs("div", { className: action(), children: [_jsx(Button, { intent: "primary", size: "md", icon: Upload, onClick: () => imageUploadModalRef.current?.openModal(true), children: "Picture upload" }), _jsx(Button, { intent: "secondary", size: "md", icon: Send, onClick: () => props.onSendClick(text, file), children: "Send" })] })] }) }), _jsx(ImageUploadModal, { ref: imageUploadModalRef, onFileChange: setFile })] }));
 };

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 import "./index.css";
 export * from "./components";
+export * from "./compositions";