@krrli/cm-designsystem 1.32.1 → 1.32.3

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

@@ -1,20 +1,20 @@
-import { type VariantProps } from "tailwind-variants";
-declare const ProfileBannerStyles: import("tailwind-variants").TVReturnType<{
+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;
+        [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;
+        [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;
         };
     };
 } | {}, {
@@ -24,11 +24,11 @@ declare const ProfileBannerStyles: import("tailwind-variants").TVReturnType<{
     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;
+        [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;
         };
     };
 } | {}, {
@@ -36,7 +36,7 @@ declare const ProfileBannerStyles: import("tailwind-variants").TVReturnType<{
     avatar: string[];
     info: string[];
     description: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     base: string[];
     avatar: string[];
     info: string[];
@@ -80,3 +80,4 @@ interface ProfileBannerProps extends ProfileBannerVariants {
  */
 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":"AACA,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,26 +1,76 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } 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";
+import { ImageUploadModal } from "../image-upload-modal/ImageUploadModal.js";
+import { ProfileBannerImage } from "../profile-banner-image/ProfileBannerImage.js";
+import { ProfileBannerInfo } from "../profile-banner-info/ProfileBannerInfo.js";
+import { Avatar } from "../../components/avatar/Avatar.js";
+import { Paragraph } from "../../components/typography/Paragraph.js";
 const ProfileBannerStyles = tv({
-    slots: {
-        base: ["flex", "flex-col", "gap-6", "w-170", "h-80", "relative"],
-        avatar: ["absolute", "-bottom-20", "right-6"],
-        info: ["flex", "flex-col", "gap-3"],
-        description: ["text-slate-500"],
-    },
+  slots: {
+    base: ["flex", "flex-col", "gap-6", "w-170", "h-80", "relative"],
+    avatar: ["absolute", "-bottom-20", "right-6"],
+    info: ["flex", "flex-col", "gap-3"],
+    description: ["text-slate-500"]
+  }
 });
-/**
- * Profile banner component for displaying user profile info.
- */
-export const ProfileBanner = (props) => {
-    const { base, avatar, info, description } = ProfileBannerStyles(props);
-    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 ?? (() => { }) })] }));
+const ProfileBanner = (props) => {
+  const { base, avatar, info, description } = ProfileBannerStyles(props);
+  const profileImageUploadModalRef = useRef(null);
+  const avatarImageUploadModalRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: base(), children: [
+      /* @__PURE__ */ jsx(
+        ProfileBannerImage,
+        {
+          src: props.imageSrc,
+          alt: props.imageAlt,
+          onClick: () => profileImageUploadModalRef.current?.openModal(true)
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          src: props.avatarSrc,
+          alt: props.avatarAlt,
+          size: "xl",
+          onActionClick: props.isCurrentUser ? () => avatarImageUploadModalRef.current?.openModal(true) : void 0
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: info(), children: [
+        /* @__PURE__ */ jsx(
+          ProfileBannerInfo,
+          {
+            isCurrentUser: props.isCurrentUser,
+            displayName: props.displayName,
+            userName: props.userName,
+            location: props.location,
+            joinedTimestamp: props.joinedTimestamp,
+            onProfileClick: () => {
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Paragraph, { size: "md", className: description(), children: props.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ImageUploadModal,
+      {
+        ref: profileImageUploadModalRef,
+        onFileChange: props.onProfileImageChange ?? (() => {
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ImageUploadModal,
+      {
+        ref: avatarImageUploadModalRef,
+        onFileChange: props.onAvatarImageChange ?? (() => {
+        })
+      }
+    )
+  ] });
+};
+export {
+  ProfileBanner
 };

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

@@ -1,5 +1,5 @@
-import { type VariantProps } from "tailwind-variants";
-declare const ProfileBannerImageStyles: import("tailwind-variants").TVReturnType<{
+import { VariantProps } from 'tailwind-variants';
+declare const ProfileBannerImageStyles: import('tailwind-variants').TVReturnType<{
     isFallback: {
         true: {
             image: string[];
@@ -21,7 +21,7 @@ declare const ProfileBannerImageStyles: import("tailwind-variants").TVReturnType
     image: string[];
     overlay: string[];
     icon: string[];
-}, import("tailwind-variants").TVReturnType<{
+}, import('tailwind-variants').TVReturnType<{
     isFallback: {
         true: {
             image: string[];
@@ -52,3 +52,4 @@ interface ProfileBannerImageProps extends ProfileBannerImageVariants {
  */
 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":"AAEA,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,57 +1,65 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as AspectRatio from "@radix-ui/react-aspect-ratio";
 import { useState } from "react";
-import { cn, tv } from "tailwind-variants";
-import { Edit } from "../../components/icons/generated";
+import { tv, cn } from "tailwind-variants";
+import { Edit } from "../../components/icons/generated/Edit.js";
 const ProfileBannerImageStyles = tv({
-    slots: {
-        base: ["w-170", "h-80"],
-        image: [
-            "h-full",
-            "w-full",
-            "cursor-pointer",
-            "rounded-2xl",
-            "object-cover",
-        ],
-        overlay: [
-            "group",
-            "absolute",
-            "flex",
-            "items-center",
-            "justify-center",
-            "text-white",
-            "inset-0",
-            "bg-violet-600/0",
-            "hover:bg-violet-600/50",
-            "transition",
-            "duration-500",
-            "ease-in-out",
-        ],
-        icon: [
-            "w-8",
-            "h-8",
-            "opacity-0",
-            "group-hover:opacity-100",
-            "transition",
-            "duration-500",
-            "rotate-15",
-            "group-hover:rotate-0",
-        ],
-    },
-    variants: {
-        isFallback: {
-            true: { image: ["bg-violet-200"] },
-        },
-    },
+  slots: {
+    base: ["w-170", "h-80"],
+    image: [
+      "h-full",
+      "w-full",
+      "cursor-pointer",
+      "rounded-2xl",
+      "object-cover"
+    ],
+    overlay: [
+      "group",
+      "absolute",
+      "flex",
+      "items-center",
+      "justify-center",
+      "text-white",
+      "inset-0",
+      "bg-violet-600/0",
+      "hover:bg-violet-600/50",
+      "transition",
+      "duration-500",
+      "ease-in-out"
+    ],
+    icon: [
+      "w-8",
+      "h-8",
+      "opacity-0",
+      "group-hover:opacity-100",
+      "transition",
+      "duration-500",
+      "rotate-15",
+      "group-hover:rotate-0"
+    ]
+  },
+  variants: {
+    isFallback: {
+      true: { image: ["bg-violet-200"] }
+    }
+  }
 });
-/**
- * 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 const ProfileBannerImage = (props) => {
-    const { base, image, overlay, icon } = ProfileBannerImageStyles(props);
-    const [src, setSrc] = useState(props.src);
-    return (_jsx("div", { className: base(), children: src ? (_jsxs(AspectRatio.Root, { ratio: 17 / 8, children: [_jsx("img", { className: image(), src: src, alt: props.alt, onError: () => setSrc("") }), _jsx("button", { className: cn(image(), overlay()), onClick: props.onClick, children: _jsx(Edit, { className: icon() }) })] })) : (_jsx("div", { className: image({ isFallback: true }) })) }));
+const ProfileBannerImage = (props) => {
+  const { base, image, overlay, icon } = ProfileBannerImageStyles(props);
+  const [src, setSrc] = useState(props.src);
+  return /* @__PURE__ */ jsx("div", { className: base(), children: src ? /* @__PURE__ */ jsxs(AspectRatio.Root, { ratio: 17 / 8, children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: image(),
+        src,
+        alt: props.alt,
+        onError: () => setSrc("")
+      }
+    ),
+    /* @__PURE__ */ jsx("button", { className: cn(image(), overlay()), onClick: props.onClick, children: /* @__PURE__ */ jsx(Edit, { className: icon() }) })
+  ] }) : /* @__PURE__ */ jsx("div", { className: image({ isFallback: true }) }) });
+};
+export {
+  ProfileBannerImage
 };

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

@@ -1,24 +1,24 @@
-import { type VariantProps } from "tailwind-variants";
-declare const profileBannerInfoStyles: import("tailwind-variants").TVReturnType<{
+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;
+        [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;
+        [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;
         };
     };
 } | {}, {
@@ -30,13 +30,13 @@ declare const profileBannerInfoStyles: import("tailwind-variants").TVReturnType<
     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;
+        [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;
         };
     };
 } | {}, {
@@ -46,7 +46,7 @@ declare const profileBannerInfoStyles: import("tailwind-variants").TVReturnType<
     displayName: string[];
     detailInfo: string[];
     secondaryInfo: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     base: string[];
     title: string[];
     icon: string[];
@@ -90,3 +90,4 @@ interface ProfileBannerInfoProps extends ProfileBannerInfoVariants {
  */
 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":"AAAA,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,47 +1,79 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { IconButton } from "../../components/icon-button/IconButton";
-import { Profile, Location, Calendar, Settings, } from "../../components/icons/generated";
-import { Label } from "../../components/typography/Label";
+import { IconButton } from "../../components/icon-button/IconButton.js";
+import { Label } from "../../components/typography/Label.js";
+import { Settings } from "../../components/icons/generated/Settings.js";
+import { Location } from "../../components/icons/generated/Location.js";
+import { Calendar } from "../../components/icons/generated/Calendar.js";
+import { Profile } from "../../components/icons/generated/Profile.js";
 const profileBannerInfoStyles = tv({
-    slots: {
-        base: ["flex", "flex-col", "gap-2", "items-start"],
-        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"],
-    },
+  slots: {
+    base: ["flex", "flex-col", "gap-2", "items-start"],
+    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"]
+  }
 });
 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 now = /* @__PURE__ */ new Date();
+  const past = timestamp instanceof Date ? timestamp : new Date(timestamp);
+  const diffMs = now.getTime() - past.getTime();
+  const seconds = Math.floor(diffMs / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(days / 365);
+  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, 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) })] })] }));
+const ProfileBannerInfo = (props) => {
+  const { base, title, icon, displayName, detailInfo, secondaryInfo } = profileBannerInfoStyles(props);
+  return /* @__PURE__ */ jsxs("div", { className: base(), children: [
+    /* @__PURE__ */ jsxs("div", { className: title(), children: [
+      /* @__PURE__ */ jsx("button", { onClick: props.onProfileClick, className: displayName(), children: /* @__PURE__ */ jsx(Label, { size: "xl", children: props.displayName }) }),
+      props.isCurrentUser && /* @__PURE__ */ jsx("button", { onClick: props.onSettingsClick, children: /* @__PURE__ */ jsx(Settings, { className: icon() }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: detailInfo(), children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          intent: "secondary",
+          icon: Profile,
+          onClick: props.onProfileClick,
+          children: props.userName
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          intent: "primary",
+          icon: Location,
+          onClick: props.onProfileClick,
+          className: secondaryInfo(),
+          children: props.location
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          intent: "primary",
+          icon: Calendar,
+          onClick: props.onProfileClick,
+          className: secondaryInfo(),
+          children: memberSincePrefix + timeSince(props.joinedTimestamp)
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ProfileBannerInfo
 };

package/dist/compositions/response/Response.d.ts

@@ -1,20 +1,20 @@
-import { type VariantProps } from "tailwind-variants";
-declare const ResponseStyles: import("tailwind-variants").TVReturnType<{
+import { VariantProps } from 'tailwind-variants';
+declare const ResponseStyles: import('tailwind-variants').TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            text?: import("tailwind-merge").ClassNameValue;
-            action?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            text?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            content?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            text?: import("tailwind-merge").ClassNameValue;
-            action?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            text?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            content?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -24,11 +24,11 @@ declare const ResponseStyles: import("tailwind-variants").TVReturnType<{
     action: string[];
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            text?: import("tailwind-merge").ClassNameValue;
-            action?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            text?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            content?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -36,7 +36,7 @@ declare const ResponseStyles: import("tailwind-variants").TVReturnType<{
     content: string[];
     text: string[];
     action: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     base: never[];
     content: string[];
     text: string[];
@@ -73,3 +73,4 @@ interface ResponseProps extends ResponseVariants {
  */
 export declare const Response: React.FC<ResponseProps>;
 export {};
+//# sourceMappingURL=Response.d.ts.map

package/dist/compositions/response/Response.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Response.d.ts","sourceRoot":"","sources":["../../../src/compositions/response/Response.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAO1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAOlB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,UAAU,aAAc,SAAQ,gBAAgB;IAC9C,6DAA6D;IAC7D,WAAW,EAAE,MAAM,CAAC;IAEpB,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IAEjB,uDAAuD;IACvD,SAAS,EAAE,IAAI,CAAC;IAEhB,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAC;IAEb,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ,4CAA4C;IAC5C,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,wEAAwE;IACxE,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,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyC5C,CAAC"}