@krrli/cm-designsystem 1.32.2 → 1.33.1

package/dist/compositions/keyword/Keyword.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const keywordStyles: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+type KeywordVariants = VariantProps<typeof keywordStyles>;
+interface KeywordProps extends KeywordVariants {
+    /**
+     * The text content displayed as keyword.
+     */
+    children: ReactNode;
+}
+/**
+ * Renders a styled keyword element.
+ */
+export declare const Keyword: React.FC<KeywordProps>;
+export {};
+//# sourceMappingURL=Keyword.d.ts.map

package/dist/compositions/keyword/Keyword.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keyword.d.ts","sourceRoot":"","sources":["../../../src/compositions/keyword/Keyword.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;2CAIjB,CAAC;AAEH,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE1D,UAAU,YAAa,SAAQ,eAAe;IAC5C;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAQ1C,CAAC"}

package/dist/compositions/keyword/Keyword.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { Paragraph } from "../../components/typography/Paragraph.js";
+const keywordStyles = tv({
+  slots: {
+    base: ["text-violet-600"]
+  }
+});
+const Keyword = (props) => {
+  const { base } = keywordStyles(props);
+  return /* @__PURE__ */ jsx(Paragraph, { as: "span", size: "lg", className: base(), children: props.children });
+};
+export {
+  Keyword
+};

package/dist/compositions/post/Post.d.ts

@@ -0,0 +1,80 @@
+import { VariantProps } from 'tailwind-variants';
+declare const PostStyles: import('tailwind-variants').TVReturnType<{
+    size: {
+        lg: {
+            base: string[];
+        };
+        md: {};
+    };
+}, {
+    base: never[];
+    avatar: string[];
+    content: string[];
+    text: string[];
+    action: string[];
+}, undefined, {
+    size: {
+        lg: {
+            base: string[];
+        };
+        md: {};
+    };
+}, {
+    base: never[];
+    avatar: string[];
+    content: string[];
+    text: string[];
+    action: string[];
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        lg: {
+            base: string[];
+        };
+        md: {};
+    };
+}, {
+    base: never[];
+    avatar: string[];
+    content: string[];
+    text: string[];
+    action: string[];
+}, undefined, unknown, unknown, undefined>>;
+type PostVariants = VariantProps<typeof PostStyles>;
+type PostSize = "md" | "lg";
+interface PostProps extends PostVariants {
+    /** Size of the post, affecting layout and styling. */
+    size: PostSize;
+    /** The display name of the user who created the post. */
+    displayName: string | undefined;
+    /** The username or handle associated with the post. */
+    userName: string | undefined;
+    /** The date and time when the post was created. */
+    timestamp: Date | undefined;
+    /** The main text content of the post. */
+    text: string | undefined;
+    /** Avatar image URL */
+    src: string | undefined;
+    /** Triggered when the avatar is clicked. */
+    onAvatarClick: () => void;
+    /** Number of likes the post has received. */
+    nbrOfLikes: number;
+    /** Number of comments the post has received. */
+    nbrOfComments: number;
+    /** Optional image source URL displayed within the post. */
+    imageSrc?: string | undefined;
+    /** Optional alt text for the post image, used for accessibility. */
+    imageAlt?: string;
+    /** Callback fired when the comment button is clicked. */
+    onCommentClick: () => void;
+    /** Callback fired when the like button is clicked. */
+    onLikeClick: () => void;
+    /** Callback fired when the share button is clicked. */
+    onShareClick: () => void;
+}
+/**
+ * Detailed post component displaying user info, text content,
+ * optional image, and action buttons (comment, like, share).
+ */
+export declare const Post: React.FC<PostProps>;
+export {};
+//# sourceMappingURL=Post.d.ts.map

package/dist/compositions/post/Post.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Post.d.ts","sourceRoot":"","sources":["../../../src/compositions/post/Post.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAc1D,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAmBd,CAAC;AAEH,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5B,UAAU,SAAU,SAAQ,YAAY;IACtC,sDAAsD;IACtD,IAAI,EAAE,QAAQ,CAAC;IAEf,yDAAyD;IACzD,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAEhC,uDAAuD;IACvD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7B,mDAAmD;IACnD,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC;IAE5B,yCAAyC;IACzC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB,uBAAuB;IACvB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAExB,4CAA4C;IAC5C,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IAEnB,gDAAgD;IAChD,aAAa,EAAE,MAAM,CAAC;IAEtB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,yDAAyD;IACzD,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B,sDAAsD;IACtD,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,uDAAuD;IACvD,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA2DpC,CAAC"}

package/dist/compositions/post/Post.js

@@ -1,20 +1,27 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
 import { ImageBanner } from "../image-banner/ImageBanner.js";
 import { PostBase } from "../post-base/PostBase.js";
 import { UserInfo } from "../user-info/UserInfo.js";
+import { renderWithHashtags } from "../utils/keyword.utils.js";
 import { Avatar } from "../../components/avatar/Avatar.js";
-import { Paragraph } from "../../components/typography/Paragraph.js";
 import { Toggle } from "../../components/toggle/Toggle.js";
 import { LikeToggle } from "../../components/like-toggle/LikeToggle.js";
 import { TimedButton } from "../../components/timed-button/TimedButton.js";
 import { Share } from "../../components/icons/generated/Share.js";
+import { Paragraph } from "../../components/typography/Paragraph.js";
 const PostStyles = tv({
   slots: {
     base: [],
     avatar: ["absolute", "-left-8", "top-6"],
     content: ["flex", "flex-col", "gap-6"],
-    text: ["text-slate-900"],
+    text: [
+      "text-slate-900",
+      "text-wrap",
+      "wrap-anywhere",
+      "whitespace-pre-wrap"
+    ],
     action: ["flex", "gap-10", "justify-start", "-ml-3"]
   },
   variants: {
@@ -47,7 +54,7 @@ const Post = (props) => {
           onClick: props.onAvatarClick
         }
       ),
-      /* @__PURE__ */ jsx(Paragraph, { size: props.size, className: text(), children: props.text }),
+      /* @__PURE__ */ jsx(Paragraph, { size: props.size, className: text(), children: renderWithHashtags(props.text) }),
       props.imageSrc && /* @__PURE__ */ jsx(
         ImageBanner,
         {
@@ -62,11 +69,18 @@ const Post = (props) => {
           Toggle,
           {
             ariaLabel: "Comment",
-            labelText: "Comment",
+            labelText: props.nbrOfComments === 0 ? "Comment" : props.nbrOfComments === 1 ? "1 Comment" : `${props.nbrOfComments} Comments`,
+            pressed: props.nbrOfComments !== 0,
             onToggle: props.onCommentClick
           }
         ),
-        /* @__PURE__ */ jsx(LikeToggle, { onLikeChange: props.onLikeClick }),
+        /* @__PURE__ */ jsx(
+          LikeToggle,
+          {
+            likes: props.nbrOfLikes,
+            onLikeChange: props.onLikeClick
+          }
+        ),
         /* @__PURE__ */ jsx(
           TimedButton,
           {

package/dist/compositions/post-base/PostBase.d.ts

@@ -0,0 +1,42 @@
+import { VariantProps } from 'tailwind-variants';
+declare const PostBaseStyles: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+type PostBaseVariants = VariantProps<typeof PostBaseStyles>;
+export interface PostBaseProps extends PostBaseVariants {
+    /**
+     * Additional CSS class names to apply to the component.
+     */
+    className?: string;
+    /** Content to be rendered inside the PostBase component */
+    children: React.ReactNode;
+}
+/**
+ * Base layout wrapper for a post, including an avatar section
+ * and content area.
+ */
+export declare const PostBase: React.FC<PostBaseProps>;
+export {};
+//# sourceMappingURL=PostBase.d.ts.map

package/dist/compositions/post-base/PostBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostBase.d.ts","sourceRoot":"","sources":["../../../src/compositions/post-base/PostBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;2CAgBlB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAI5C,CAAC"}

package/dist/compositions/post-creator/PostCreator.d.ts

@@ -0,0 +1,70 @@
+import { VariantProps } from 'tailwind-variants';
+declare const PostCreatorStyles: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            input?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            avatar?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            content?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            input?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            avatar?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            content?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    content: string[];
+    avatar: string[];
+    title: string[];
+    input: string[];
+    action: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            input?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            avatar?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            content?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    content: string[];
+    avatar: string[];
+    title: string[];
+    input: string[];
+    action: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    content: string[];
+    avatar: string[];
+    title: string[];
+    input: string[];
+    action: string[];
+}, undefined, unknown, unknown, undefined>>;
+type PostCreatorVariants = VariantProps<typeof PostCreatorStyles>;
+interface PostCreatorProps extends PostCreatorVariants {
+    /** Avatar image URL */
+    src: string | undefined;
+    /** Triggered when the avatar is clicked. */
+    onAvatarClick: () => void;
+    /**
+     * Callback fired when the "Send" button is clicked.
+     *   Receives the textarea text and the optionally uploaded file.
+     */
+    onSendClick: (text: string, file: File | null) => void;
+}
+/**
+ * PostCreator component
+ *
+ * Renders a post creation component.
+ */
+export declare const PostCreator: React.FC<PostCreatorProps>;
+export {};
+//# sourceMappingURL=PostCreator.d.ts.map

package/dist/compositions/post-creator/PostCreator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostCreator.d.ts","sourceRoot":"","sources":["../../../src/compositions/post-creator/PostCreator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAS1D,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAQrB,CAAC;AAEH,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE,UAAU,gBAAiB,SAAQ,mBAAmB;IACpD,uBAAuB;IACvB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAExB,4CAA4C;IAC5C,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B;;;OAGG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuDlD,CAAC"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Form } from "@radix-ui/react-form";
 import { useState, useRef } from "react";

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

@@ -0,0 +1,83 @@
+import { VariantProps } from 'tailwind-variants';
+declare const ProfileBannerStyles: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            avatar?: import('tailwind-merge').ClassNameValue;
+            info?: import('tailwind-merge').ClassNameValue;
+            description?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            avatar?: import('tailwind-merge').ClassNameValue;
+            info?: import('tailwind-merge').ClassNameValue;
+            description?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    avatar: string[];
+    info: string[];
+    description: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            avatar?: import('tailwind-merge').ClassNameValue;
+            info?: import('tailwind-merge').ClassNameValue;
+            description?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    avatar: string[];
+    info: string[];
+    description: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    avatar: string[];
+    info: string[];
+    description: string[];
+}, undefined, unknown, unknown, undefined>>;
+type ProfileBannerVariants = VariantProps<typeof ProfileBannerStyles>;
+interface ProfileBannerProps extends ProfileBannerVariants {
+    /** URL of the user's avatar image. */
+    avatarSrc: string;
+    /** Alt text for the avatar image. */
+    avatarAlt: string;
+    /** URL of the profile banner or main image. */
+    imageSrc: string;
+    /** Alt text for the main image. */
+    imageAlt: string;
+    /** The user's display name. */
+    displayName: string;
+    /** The user’s username/handle. */
+    userName: string;
+    /** The user’s location string. */
+    location: string;
+    /** Date when the user joined. */
+    joinedTimestamp: Date;
+    /** Bio or profile description text. */
+    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.
+ */
+export declare const ProfileBanner: React.FC<ProfileBannerProps>;
+export {};
+//# sourceMappingURL=ProfileBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileBanner.d.ts","sourceRoot":"","sources":["../../../src/compositions/profile-banner/ProfileBanner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAS1D,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAOvB,CAAC;AAEH,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEtE,UAAU,kBAAmB,SAAQ,qBAAqB;IACxD,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAC;IAElB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAElB,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAC;IAEjB,mCAAmC;IACnC,QAAQ,EAAE,MAAM,CAAC;IAEjB,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IAEpB,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IAEjB,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IAEjB,iCAAiC;IACjC,eAAe,EAAE,IAAI,CAAC;IAEtB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IAEpB,sEAAsE;IACtE,aAAa,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoDtD,CAAC"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { tv } from "tailwind-variants";

package/dist/compositions/profile-banner-image/ProfileBannerImage.d.ts

@@ -0,0 +1,55 @@
+import { VariantProps } from 'tailwind-variants';
+declare const ProfileBannerImageStyles: import('tailwind-variants').TVReturnType<{
+    isFallback: {
+        true: {
+            image: string[];
+        };
+    };
+}, {
+    base: string[];
+    image: string[];
+    overlay: string[];
+    icon: string[];
+}, undefined, {
+    isFallback: {
+        true: {
+            image: string[];
+        };
+    };
+}, {
+    base: string[];
+    image: string[];
+    overlay: string[];
+    icon: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isFallback: {
+        true: {
+            image: string[];
+        };
+    };
+}, {
+    base: string[];
+    image: string[];
+    overlay: string[];
+    icon: string[];
+}, undefined, unknown, unknown, undefined>>;
+type ProfileBannerImageVariants = VariantProps<typeof ProfileBannerImageStyles>;
+interface ProfileBannerImageProps extends ProfileBannerImageVariants {
+    /** Avatar image URL */
+    src: string;
+    /**
+     * Alternative text for the image, used for accessibility.
+     */
+    alt: string;
+    /** Click handler for the whole ProfileBannerImage component */
+    onClick: () => void;
+}
+/**
+ * ProfileBannerImage component
+ *
+ * Displays a banner image with a fixed aspect ratio (17:8) and an optional overlay icon.
+ * If the image fails to load, a fallback element is displayed instead.
+ */
+export declare const ProfileBannerImage: React.FC<ProfileBannerImageProps>;
+export {};
+//# sourceMappingURL=ProfileBannerImage.d.ts.map

package/dist/compositions/profile-banner-image/ProfileBannerImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileBannerImage.d.ts","sourceRoot":"","sources":["../../../src/compositions/profile-banner-image/ProfileBannerImage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwC5B,CAAC;AAEH,KAAK,0BAA0B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEhF,UAAU,uBAAwB,SAAQ,0BAA0B;IAClE,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ,+DAA+D;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA0BhE,CAAC"}

package/dist/compositions/profile-banner-image/ProfileBannerImage.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as AspectRatio from "@radix-ui/react-aspect-ratio";
 import { useState } from "react";

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

@@ -0,0 +1,93 @@
+import { VariantProps } from 'tailwind-variants';
+declare const profileBannerInfoStyles: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [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;
+        };
+    };
+} | {
+    [x: string]: {
+        [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[];
+}, undefined, {
+    [key: string]: {
+        [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").
+     */
+    displayName: string;
+    /**
+     * The user's username or handle (e.g., "@john").
+     */
+    userName: string;
+    /**
+     * The user's location as a readable text label.
+     */
+    location: string;
+    /**
+     * A timestamp representing when the user joined.
+     * Used to generate the "Member since" relative date.
+     */
+    joinedTimestamp: Date;
+    /**
+     * Callback fired whenever any profile-related element is clicked.
+     * Typically used to open the profile or navigate to a user page.
+     */
+    onProfileClick: () => void;
+    /** A function called when the settings button is clicked. */
+    onSettingsClick?: () => void;
+}
+/**
+ * ProfileBannerInfo Component
+ *
+ * Renders profile information used in a user profile banner
+ */
+export declare const ProfileBannerInfo: React.FC<ProfileBannerInfoProps>;
+export {};
+//# sourceMappingURL=ProfileBannerInfo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileBannerInfo.d.ts","sourceRoot":"","sources":["../../../src/compositions/profile-banner-info/ProfileBannerInfo.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAS3B,CAAC;AAEH,KAAK,yBAAyB,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAE9E,UAAU,sBAAuB,SAAQ,yBAAyB;IAChE,sEAAsE;IACtE,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,eAAe,EAAE,IAAI,CAAC;IAEtB;;;OAGG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAwBD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgD9D,CAAC"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
 import { IconButton } from "../../components/icon-button/IconButton.js";