@krrli/cm-designsystem 1.26.0 → 1.27.0

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

@@ -0,0 +1,76 @@
+import { type 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;
+            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;
+            detailInfo?: import("tailwind-merge").ClassNameValue;
+            secondaryInfo?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: 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;
+            detailInfo?: import("tailwind-merge").ClassNameValue;
+            secondaryInfo?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    displayName: string[];
+    detailInfo: string[];
+    secondaryInfo: string[];
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string[];
+    displayName: string[];
+    detailInfo: string[];
+    secondaryInfo: string[];
+}, undefined, unknown, unknown, undefined>>;
+type ProfileBannerInfoVariants = VariantProps<typeof profileBannerInfoStyles>;
+interface ProfileBannerInfoProps extends ProfileBannerInfoVariants {
+    /**
+     * 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.
+     */
+    onClick: () => void;
+}
+/**
+ * ProfileBannerInfo Component
+ *
+ * Renders profile information used in a user profile banner
+ */
+export declare const ProfileBannerInfo: React.FC<ProfileBannerInfoProps>;
+export {};

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

@@ -0,0 +1,45 @@
+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 { Label } from "../../components/typography/Label";
+const profileBannerInfoStyles = tv({
+    slots: {
+        base: ["flex", "flex-col", "gap-2", "items-start"],
+        displayName: ["text-slate-900", "**:cursor-pointer"],
+        detailInfo: ["flex", "gap-4"],
+        secondaryInfo: ["text-slate-500"],
+    },
+});
+function timeSince(timestamp) {
+    const now = new Date();
+    const past = timestamp instanceof Date ? timestamp : new Date(timestamp);
+    const diffMs = now.getTime() - past.getTime();
+    const seconds = Math.floor(diffMs / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    const months = Math.floor(days / 30); // approximate
+    const years = Math.floor(days / 365); // approximate
+    if (years > 0)
+        return years === 1 ? "1 year" : `${years} years`;
+    if (months > 0)
+        return months === 1 ? "1 month" : `${months} months`;
+    if (days > 0)
+        return days === 1 ? "1 day" : `${days} days`;
+    if (hours > 0)
+        return hours === 1 ? "1 hour" : `${hours} hours`;
+    if (minutes > 0)
+        return minutes === 1 ? "1 minute" : `${minutes} minutes`;
+    return seconds <= 1 ? "just now" : `${seconds} seconds`;
+}
+const memberSincePrefix = "Member since ";
+/**
+ * ProfileBannerInfo Component
+ *
+ * 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) })] })] }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krrli/cm-designsystem",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "files": [
     "dist/",
     "dist/cm-designsystem.css"