@krrli/cm-designsystem 1.29.0 → 1.31.0

package/dist/compositions/profile-banner-info/ProfileBannerInfo.d.ts

@@ -4,6 +4,8 @@ declare const profileBannerInfoStyles: import("tailwind-variants").TVReturnType<
         [key: string]: import("tailwind-merge").ClassNameValue | {
             displayName?: import("tailwind-merge").ClassNameValue;
             base?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
             detailInfo?: import("tailwind-merge").ClassNameValue;
             secondaryInfo?: import("tailwind-merge").ClassNameValue;
         };
@@ -13,12 +15,16 @@ declare const profileBannerInfoStyles: import("tailwind-variants").TVReturnType<
         [x: string]: import("tailwind-merge").ClassNameValue | {
             displayName?: import("tailwind-merge").ClassNameValue;
             base?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
             detailInfo?: import("tailwind-merge").ClassNameValue;
             secondaryInfo?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
     base: string[];
+    title: string[];
+    icon: string[];
     displayName: string[];
     detailInfo: string[];
     secondaryInfo: string[];
@@ -27,23 +33,31 @@ declare const profileBannerInfoStyles: import("tailwind-variants").TVReturnType<
         [key: string]: import("tailwind-merge").ClassNameValue | {
             displayName?: import("tailwind-merge").ClassNameValue;
             base?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
             detailInfo?: import("tailwind-merge").ClassNameValue;
             secondaryInfo?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
     base: string[];
+    title: string[];
+    icon: string[];
     displayName: string[];
     detailInfo: string[];
     secondaryInfo: string[];
 }, import("tailwind-variants").TVReturnType<unknown, {
     base: string[];
+    title: string[];
+    icon: string[];
     displayName: string[];
     detailInfo: string[];
     secondaryInfo: string[];
 }, undefined, unknown, unknown, undefined>>;
 type ProfileBannerInfoVariants = VariantProps<typeof profileBannerInfoStyles>;
 interface ProfileBannerInfoProps extends ProfileBannerInfoVariants {
+    /** Whether the profile being viewed belongs to the logged-in user. */
+    isCurrentUser: boolean;
     /**
      * The user's full display name (e.g., "John Doe").
      */
@@ -65,7 +79,9 @@ interface ProfileBannerInfoProps extends ProfileBannerInfoVariants {
      * Callback fired whenever any profile-related element is clicked.
      * Typically used to open the profile or navigate to a user page.
      */
-    onClick: () => void;
+    onProfileClick: () => void;
+    /** A function called when the settings button is clicked. */
+    onSettingsClick?: () => void;
 }
 /**
  * ProfileBannerInfo Component

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
 import { IconButton } from "../../components/icon-button/IconButton";
-import { Profile, Location, Calendar } from "../../components/icons/generated";
+import { Profile, Location, Calendar, Settings, } from "../../components/icons/generated";
 import { Label } from "../../components/typography/Label";
 const profileBannerInfoStyles = tv({
     slots: {
         base: ["flex", "flex-col", "gap-2", "items-start"],
-        displayName: ["text-slate-900", "**:cursor-pointer"],
+        title: ["flex", "gap-1", "items-center", "**:cursor-pointer"],
+        icon: ["text-violet-600", "-mt-0.5"],
+        displayName: ["text-slate-900"],
         detailInfo: ["flex", "gap-4"],
         secondaryInfo: ["text-slate-500"],
     },
@@ -40,6 +42,6 @@ const memberSincePrefix = "Member since ";
  * Renders profile information used in a user profile banner
  */
 export const ProfileBannerInfo = (props) => {
-    const { base, displayName, detailInfo, secondaryInfo } = profileBannerInfoStyles(props);
-    return (_jsxs("div", { className: base(), children: [_jsx("button", { onClick: props.onClick, className: displayName(), children: _jsx(Label, { size: "xl", children: props.displayName }) }), _jsxs("div", { className: detailInfo(), children: [_jsx(IconButton, { intent: "secondary", icon: Profile, onClick: props.onClick, children: props.userName }), _jsx(IconButton, { intent: "primary", icon: Location, onClick: props.onClick, className: secondaryInfo(), children: props.location }), _jsx(IconButton, { intent: "primary", icon: Calendar, onClick: props.onClick, className: secondaryInfo(), children: memberSincePrefix + timeSince(props.joinedTimestamp) })] })] }));
+    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("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";