@krrli/cm-designsystem 1.32.1 → 1.32.3

package/dist/compositions/response/Response.js

@@ -1,23 +1,67 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { LikeToggle, Paragraph, TimedButton, Toggle } from "../../components";
-import { Share } from "../../components/icons/generated";
-import { ImageBanner } from "../image-banner/ImageBanner";
-import { PostBase } from "../post-base/PostBase";
-import { UserInfo } from "../user-info/UserInfo";
+import { ImageBanner } from "../image-banner/ImageBanner.js";
+import { PostBase } from "../post-base/PostBase.js";
+import { UserInfo } from "../user-info/UserInfo.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";
 const ResponseStyles = tv({
-    slots: {
-        base: [],
-        content: ["flex", "flex-col", "gap-4"],
-        text: ["text-slate-900"],
-        action: ["flex", "gap-10", "justify-start", "-ml-3"],
-    },
+  slots: {
+    base: [],
+    content: ["flex", "flex-col", "gap-4"],
+    text: ["text-slate-900"],
+    action: ["flex", "gap-10", "justify-start", "-ml-3"]
+  }
 });
-/**
- * Detailed Response component displaying user info, text content,
- * optional image, and action buttons (comment, like, share).
- */
-export const Response = (props) => {
-    const { base, content, text, action } = ResponseStyles(props);
-    return (_jsx(PostBase, { className: base(), children: _jsxs("div", { className: content(), children: [_jsx(UserInfo, { size: "sm", src: props.src, displayName: props.displayName, userName: props.userName, timestamp: props.timestamp, onClick: props.onAvatarClick }), _jsx(Paragraph, { size: "md", className: text(), children: props.text }), props.imageSrc && (_jsx(ImageBanner, { src: props.imageSrc, alt: props.imageAlt ?? "", onClick: () => { } })), _jsxs("div", { className: action(), children: [_jsx(Toggle, { ariaLabel: "Comment", labelText: "Comment", onToggle: props.onCommentClick }), _jsx(LikeToggle, { onLikeChange: props.onLikeClick }), _jsx(TimedButton, { icon: Share, label: "Copy Link", labelActive: "Link copied", onClick: props.onShareClick })] })] }) }));
+const Response = (props) => {
+  const { base, content, text, action } = ResponseStyles(props);
+  return /* @__PURE__ */ jsx(PostBase, { className: base(), children: /* @__PURE__ */ jsxs("div", { className: content(), children: [
+    /* @__PURE__ */ jsx(
+      UserInfo,
+      {
+        size: "sm",
+        src: props.src,
+        displayName: props.displayName,
+        userName: props.userName,
+        timestamp: props.timestamp,
+        onClick: props.onAvatarClick
+      }
+    ),
+    /* @__PURE__ */ jsx(Paragraph, { size: "md", className: text(), children: props.text }),
+    props.imageSrc && /* @__PURE__ */ jsx(
+      ImageBanner,
+      {
+        src: props.imageSrc,
+        alt: props.imageAlt ?? "",
+        onClick: () => {
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: action(), children: [
+      /* @__PURE__ */ jsx(
+        Toggle,
+        {
+          ariaLabel: "Comment",
+          labelText: "Comment",
+          onToggle: props.onCommentClick
+        }
+      ),
+      /* @__PURE__ */ jsx(LikeToggle, { onLikeChange: props.onLikeClick }),
+      /* @__PURE__ */ jsx(
+        TimedButton,
+        {
+          icon: Share,
+          label: "Copy Link",
+          labelActive: "Link copied",
+          onClick: props.onShareClick
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  Response
 };

package/dist/compositions/response-creator/ResponseCreator.d.ts

@@ -1,18 +1,18 @@
-import { type VariantProps } from "tailwind-variants";
-declare const ResponseCreatorStyles: import("tailwind-variants").TVReturnType<{
+import { VariantProps } from 'tailwind-variants';
+declare const ResponseCreatorStyles: import('tailwind-variants').TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            input?: import("tailwind-merge").ClassNameValue;
-            action?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            input?: 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;
-            action?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            input?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            content?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -21,17 +21,17 @@ declare const ResponseCreatorStyles: import("tailwind-variants").TVReturnType<{
     action: string[];
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            input?: import("tailwind-merge").ClassNameValue;
-            action?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            input?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            content?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
     content: string[];
     input: string[];
     action: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     content: string[];
     input: string[];
     action: string[];
@@ -61,3 +61,4 @@ interface ResponseCreatorProps extends ResponseCreatorVariants {
  */
 export declare const ResponseCreator: React.FC<ResponseCreatorProps>;
 export {};
+//# sourceMappingURL=ResponseCreator.d.ts.map

package/dist/compositions/response-creator/ResponseCreator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponseCreator.d.ts","sourceRoot":"","sources":["../../../src/compositions/response-creator/ResponseCreator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAMzB,CAAC;AAEH,KAAK,uBAAuB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE1E,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IAEpB,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAEvD;;OAEG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkD1D,CAAC"}

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

@@ -1,28 +1,72 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Form } from "@radix-ui/react-form";
-import { useRef, useState } from "react";
+import { useState, useRef } from "react";
 import { tv } from "tailwind-variants";
-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";
+import { ImageUploadModal } from "../image-upload-modal/ImageUploadModal.js";
+import { PostBase } from "../post-base/PostBase.js";
+import { UserInfo } from "../user-info/UserInfo.js";
+import { Textarea } from "../../components/textarea/Textarea.js";
+import { Button } from "../../components/button/Button.js";
+import { Upload } from "../../components/icons/generated/Upload.js";
+import { Send } from "../../components/icons/generated/Send.js";
 const ResponseCreatorStyles = tv({
-    slots: {
-        content: ["flex", "flex-col", "gap-4", "w-full"],
-        input: ["w-full", "h-40"],
-        action: ["flex", "gap-4"],
-    },
+  slots: {
+    content: ["flex", "flex-col", "gap-4", "w-full"],
+    input: ["w-full", "h-40"],
+    action: ["flex", "gap-4"]
+  }
 });
-/**
- * ResponseCreator component
- *
- * Renders a Response creation component.
- */
-export const ResponseCreator = (props) => {
-    const { content, input, action } = ResponseCreatorStyles(props);
-    const [file, setFile] = useState(null);
-    const [text, setText] = useState("");
-    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 })] }));
+const ResponseCreator = (props) => {
+  const { content, input, action } = ResponseCreatorStyles(props);
+  const [file, setFile] = useState(null);
+  const [text, setText] = useState("");
+  const imageUploadModalRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PostBase, { children: /* @__PURE__ */ jsxs(Form, { className: content(), children: [
+      /* @__PURE__ */ jsx(
+        UserInfo,
+        {
+          displayName: props.displayName,
+          onClick: props.onAvatarClick,
+          size: "sm",
+          src: props.src,
+          userName: props.userName
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: input(), children: /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          name: "post",
+          placeholder: "Your opinion matters!",
+          onChange: setText
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: action(), children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            intent: "primary",
+            size: "md",
+            icon: Upload,
+            onClick: () => imageUploadModalRef.current?.openModal(true),
+            children: "Picture upload"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            intent: "secondary",
+            size: "md",
+            icon: Send,
+            onClick: () => props.onSendClick(text, file),
+            children: "Send"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(ImageUploadModal, { ref: imageUploadModalRef, onFileChange: setFile })
+  ] });
+};
+export {
+  ResponseCreator
 };

package/dist/compositions/user-info/UserInfo.d.ts

@@ -1,22 +1,22 @@
-import { type VariantProps } from "tailwind-variants";
-declare const userInfoStyles: import("tailwind-variants").TVReturnType<{
+import { VariantProps } from 'tailwind-variants';
+declare const userInfoStyles: import('tailwind-variants').TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            displayName?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            userInfo?: import("tailwind-merge").ClassNameValue;
-            detailInfo?: import("tailwind-merge").ClassNameValue;
-            timeInfo?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            displayName?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            userInfo?: import('tailwind-merge').ClassNameValue;
+            detailInfo?: import('tailwind-merge').ClassNameValue;
+            timeInfo?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            displayName?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            userInfo?: import("tailwind-merge").ClassNameValue;
-            detailInfo?: import("tailwind-merge").ClassNameValue;
-            timeInfo?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            displayName?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            userInfo?: import('tailwind-merge').ClassNameValue;
+            detailInfo?: import('tailwind-merge').ClassNameValue;
+            timeInfo?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -27,12 +27,12 @@ declare const userInfoStyles: import("tailwind-variants").TVReturnType<{
     timeInfo: string[];
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            displayName?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            userInfo?: import("tailwind-merge").ClassNameValue;
-            detailInfo?: import("tailwind-merge").ClassNameValue;
-            timeInfo?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            displayName?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            userInfo?: import('tailwind-merge').ClassNameValue;
+            detailInfo?: import('tailwind-merge').ClassNameValue;
+            timeInfo?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -41,7 +41,7 @@ declare const userInfoStyles: import("tailwind-variants").TVReturnType<{
     displayName: string[];
     detailInfo: string[];
     timeInfo: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     base: string[];
     userInfo: string[];
     displayName: string[];
@@ -73,3 +73,4 @@ interface UserInfoProps extends UserInfoVariants {
  */
 export declare const UserInfo: React.FC<UserInfoProps>;
 export {};
+//# sourceMappingURL=UserInfo.d.ts.map

package/dist/compositions/user-info/UserInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserInfo.d.ts","sourceRoot":"","sources":["../../../src/compositions/user-info/UserInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAM1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAQlB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,UAAU,aAAc,SAAQ,gBAAgB;IAC9C,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,EAAE,YAAY,CAAC;IACnB,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,qDAAqD;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoCD;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqC5C,CAAC"}

package/dist/compositions/user-info/UserInfo.js

@@ -1,60 +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 { Avatar } from "../../components/avatar/Avatar";
-import { IconButton } from "../../components/icon-button/IconButton";
-import { Profile, Time } from "../../components/icons/generated";
-import { Label } from "../../components/typography/Label";
+import { Avatar } from "../../components/avatar/Avatar.js";
+import { IconButton } from "../../components/icon-button/IconButton.js";
+import { Label } from "../../components/typography/Label.js";
+import { Profile } from "../../components/icons/generated/Profile.js";
+import { Time } from "../../components/icons/generated/Time.js";
 const userInfoStyles = tv({
-    slots: {
-        base: ["flex", "gap-2", "items-center"],
-        userInfo: ["flex", "flex-col", "gap-2", "justify-center", "items-start"],
-        displayName: ["text-slate-900", "**:cursor-pointer"],
-        detailInfo: ["flex", "flex", "gap-4"],
-        timeInfo: ["text-slate-500"],
-    },
+  slots: {
+    base: ["flex", "gap-2", "items-center"],
+    userInfo: ["flex", "flex-col", "gap-2", "justify-center", "items-start"],
+    displayName: ["text-slate-900", "**:cursor-pointer"],
+    detailInfo: ["flex", "flex", "gap-4"],
+    timeInfo: ["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 ago" : `${years} years ago`;
-    if (months > 0)
-        return months === 1 ? "1 month ago" : `${months} months ago`;
-    if (days > 0)
-        return days === 1 ? "1 day ago" : `${days} days ago`;
-    if (hours > 0)
-        return hours === 1 ? "1 hour ago" : `${hours} hours ago`;
-    if (minutes > 0)
-        return minutes === 1 ? "1 minute ago" : `${minutes} minutes ago`;
-    return seconds <= 1 ? "just now" : `${seconds} seconds ago`;
+  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 ago" : `${years} years ago`;
+  if (months > 0) return months === 1 ? "1 month ago" : `${months} months ago`;
+  if (days > 0) return days === 1 ? "1 day ago" : `${days} days ago`;
+  if (hours > 0) return hours === 1 ? "1 hour ago" : `${hours} hours ago`;
+  if (minutes > 0)
+    return minutes === 1 ? "1 minute ago" : `${minutes} minutes ago`;
+  return seconds <= 1 ? "just now" : `${seconds} seconds ago`;
 }
 function getLabelSize(size) {
-    switch (size) {
-        case "sm":
-            return "md";
-        case "md":
-            return "lg";
-        case "lg":
-            return "xl";
-        default:
-            return "md";
-    }
+  switch (size) {
+    case "sm":
+      return "md";
+    case "md":
+      return "lg";
+    case "lg":
+      return "xl";
+    default:
+      return "md";
+  }
 }
-/**
- * UserInfo Component
- *
- * Displays a user avatar, display name, username, and a timestamp indicating
- * when an activity occurred. The entire component acts as an interactive button
- * and includes keyboard accessibility using `Enter` and `Space`.
- */
-export const UserInfo = (props) => {
-    const { base, userInfo, displayName, detailInfo, timeInfo } = userInfoStyles(props);
-    return (_jsxs("div", { className: base(), children: [props.src && (_jsx(Avatar, { alt: "Profile", size: "sm", src: props.src, onAvatarClick: props.onClick })), _jsxs("div", { className: userInfo(), children: [_jsx("button", { onClick: props.onClick, className: displayName(), children: _jsx(Label, { size: getLabelSize(props.size), children: props.displayName }) }), _jsxs("div", { className: detailInfo(), children: [_jsx(IconButton, { intent: "secondary", icon: Profile, onClick: props.onClick, children: props.userName }), props.timestamp && (_jsx(IconButton, { intent: "primary", icon: Time, className: timeInfo(), onClick: props.onClick, children: timeSince(props.timestamp) }))] })] })] }));
+const UserInfo = (props) => {
+  const { base, userInfo, displayName, detailInfo, timeInfo } = userInfoStyles(props);
+  return /* @__PURE__ */ jsxs("div", { className: base(), children: [
+    props.src && /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        alt: "Profile",
+        size: "sm",
+        src: props.src,
+        onAvatarClick: props.onClick
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: userInfo(), children: [
+      /* @__PURE__ */ jsx("button", { onClick: props.onClick, className: displayName(), children: /* @__PURE__ */ jsx(Label, { size: getLabelSize(props.size), children: props.displayName }) }),
+      /* @__PURE__ */ jsxs("div", { className: detailInfo(), children: [
+        /* @__PURE__ */ jsx(IconButton, { intent: "secondary", icon: Profile, onClick: props.onClick, children: props.userName }),
+        props.timestamp && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            intent: "primary",
+            icon: Time,
+            className: timeInfo(),
+            onClick: props.onClick,
+            children: timeSince(props.timestamp)
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  UserInfo
 };

package/dist/compositions/user-recommendation/UserRecommendation.d.ts

@@ -1,18 +1,18 @@
-import { type VariantProps } from "tailwind-variants";
-declare const userRecommendationStyles: import("tailwind-variants").TVReturnType<{
+import { VariantProps } from 'tailwind-variants';
+declare const userRecommendationStyles: import('tailwind-variants').TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            displayName?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            userInfo?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            displayName?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            userInfo?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            displayName?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            userInfo?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            displayName?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            userInfo?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -21,17 +21,17 @@ declare const userRecommendationStyles: import("tailwind-variants").TVReturnType
     displayName: string[];
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            displayName?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            userInfo?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            displayName?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            userInfo?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
     base: string[];
     userInfo: string[];
     displayName: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     base: string[];
     userInfo: string[];
     displayName: string[];
@@ -61,3 +61,4 @@ interface UserRecommendationProps extends UserRecommendationVariants {
  */
 export declare const UserRecommendation: React.FC<UserRecommendationProps>;
 export {};
+//# sourceMappingURL=UserRecommendation.d.ts.map

package/dist/compositions/user-recommendation/UserRecommendation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserRecommendation.d.ts","sourceRoot":"","sources":["../../../src/compositions/user-recommendation/UserRecommendation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAO1D,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAc5B,CAAC;AAEH,KAAK,0BAA0B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEhF,UAAU,uBAAwB,SAAQ,0BAA0B;IAClE,sCAAsC;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,mDAAmD;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,mFAAmF;IACnF,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmChE,CAAC"}

package/dist/compositions/user-recommendation/UserRecommendation.js

@@ -1,34 +1,62 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Avatar } from "../../components/avatar/Avatar";
-import { Button } from "../../components/button/Button";
-import { IconButton } from "../../components/icon-button/IconButton";
-import { Mumble, Profile } from "../../components/icons/generated";
-import { Label } from "../../components/typography/Label";
+import { Avatar } from "../../components/avatar/Avatar.js";
+import { Button } from "../../components/button/Button.js";
+import { IconButton } from "../../components/icon-button/IconButton.js";
+import { Label } from "../../components/typography/Label.js";
+import { Mumble } from "../../components/icons/generated/Mumble.js";
+import { Profile } from "../../components/icons/generated/Profile.js";
 const userRecommendationStyles = tv({
-    slots: {
-        base: [
-            "flex",
-            "flex-col",
-            "gap-4",
-            "items-center",
-            "p-4",
-            "bg-white",
-            "rounded-2xl",
-        ],
-        userInfo: ["flex", "flex-col", "gap-2", "items-center"],
-        displayName: ["text-slate-900", "**:cursor-pointer"],
-    },
+  slots: {
+    base: [
+      "flex",
+      "flex-col",
+      "gap-4",
+      "items-center",
+      "p-4",
+      "bg-white",
+      "rounded-2xl"
+    ],
+    userInfo: ["flex", "flex-col", "gap-2", "items-center"],
+    displayName: ["text-slate-900", "**:cursor-pointer"]
+  }
 });
-/**
- * UserRecommendation Component
- *
- * Displays a recommended user with:
- * - A clickable avatar
- * - Display name and username
- * - A follow button
- */
-export const UserRecommendation = (props) => {
-    const { base, userInfo, displayName } = userRecommendationStyles(props);
-    return (_jsxs("div", { className: base(), children: [_jsx(Avatar, { alt: "Profile", size: "lg", src: props.src, onAvatarClick: props.onProfileClick }), _jsxs("div", { className: userInfo(), children: [_jsx("button", { onClick: props.onProfileClick, className: displayName(), children: _jsx(Label, { size: "lg", children: props.displayName }) }), _jsx(IconButton, { icon: Profile, intent: "secondary", onClick: props.onProfileClick, children: props.userName })] }), _jsx(Button, { icon: Mumble, intent: "secondary", onClick: props.onFollowClick, size: "md", children: props.label })] }));
+const UserRecommendation = (props) => {
+  const { base, userInfo, displayName } = userRecommendationStyles(props);
+  return /* @__PURE__ */ jsxs("div", { className: base(), children: [
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        alt: "Profile",
+        size: "lg",
+        src: props.src,
+        onAvatarClick: props.onProfileClick
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: userInfo(), children: [
+      /* @__PURE__ */ jsx("button", { onClick: props.onProfileClick, className: displayName(), children: /* @__PURE__ */ jsx(Label, { size: "lg", children: props.displayName }) }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: Profile,
+          intent: "secondary",
+          onClick: props.onProfileClick,
+          children: props.userName
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: Mumble,
+        intent: "secondary",
+        onClick: props.onFollowClick,
+        size: "md",
+        children: props.label
+      }
+    )
+  ] });
+};
+export {
+  UserRecommendation
 };

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-import "./index.css";
-export * from "./components";
-export * from "./compositions";
+export * from './components';
+export * from './compositions';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,aAAa,CAAC;AAErB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}