@krrli/cm-designsystem 1.32.1 → 1.32.3

package/dist/compositions/image-banner/ImageBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBanner.d.ts","sourceRoot":"","sources":["../../../src/compositions/image-banner/ImageBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAiCrB,CAAC;AAEH,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE,UAAU,gBAAiB,SAAQ,mBAAmB;IACpD,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ,wDAAwD;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0BlD,CAAC"}

package/dist/compositions/image-banner/ImageBanner.js

@@ -1,50 +1,58 @@
-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 { Fullscreen } from "../../components/icons/generated";
+import { tv, cn } from "tailwind-variants";
+import { Fullscreen } from "../../components/icons/generated/Fullscreen.js";
 const ImageBannerStyles = tv({
-    slots: {
-        base: ["w-148", "h-80"],
-        image: ["h-full", "w-full", "cursor-pointer", "rounded-lg", "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",
-            "group-hover:rotate-0",
-        ],
-    },
-    variants: {
-        isFallback: {
-            true: { image: ["bg-violet-200"] },
-        },
-    },
+  slots: {
+    base: ["w-148", "h-80"],
+    image: ["h-full", "w-full", "cursor-pointer", "rounded-lg", "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",
+      "group-hover:rotate-0"
+    ]
+  },
+  variants: {
+    isFallback: {
+      true: { image: ["bg-violet-200"] }
+    }
+  }
 });
-/**
- * ImageBanner 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 ImageBanner = (props) => {
-    const { base, image, overlay, icon } = ImageBannerStyles(props);
-    const [src, setSrc] = useState(props.src);
-    return (_jsx("div", { className: base(), children: src ? (_jsxs(AspectRatio.Root, { ratio: 37 / 20, children: [_jsx("img", { className: image(), src: src, alt: props.alt, onError: () => setSrc("") }), _jsx("button", { className: cn(image(), overlay()), onClick: props.onClick, children: _jsx(Fullscreen, { className: icon() }) })] })) : (_jsx("div", { className: image({ isFallback: true }) })) }));
+const ImageBanner = (props) => {
+  const { base, image, overlay, icon } = ImageBannerStyles(props);
+  const [src, setSrc] = useState(props.src);
+  return /* @__PURE__ */ jsx("div", { className: base(), children: src ? /* @__PURE__ */ jsxs(AspectRatio.Root, { ratio: 37 / 20, 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(Fullscreen, { className: icon() }) })
+  ] }) : /* @__PURE__ */ jsx("div", { className: image({ isFallback: true }) }) });
+};
+export {
+  ImageBanner
 };

package/dist/compositions/image-upload-modal/ImageUploadModal.d.ts

@@ -11,5 +11,6 @@ export type ImageUploadModalRef = {
  *
  * Renders a post creation component.
  */
-export declare const ImageUploadModal: import("react").ForwardRefExoticComponent<ImageUploadModalProps & import("react").RefAttributes<ImageUploadModalRef>>;
+export declare const ImageUploadModal: import('react').ForwardRefExoticComponent<ImageUploadModalProps & import('react').RefAttributes<ImageUploadModalRef>>;
 export {};
+//# sourceMappingURL=ImageUploadModal.d.ts.map

package/dist/compositions/image-upload-modal/ImageUploadModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadModal.d.ts","sourceRoot":"","sources":["../../../src/compositions/image-upload-modal/ImageUploadModal.tsx"],"names":[],"mappings":"AAIA,UAAU,qBAAqB;IAC7B,4FAA4F;IAC5F,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,sFAAsF;IACtF,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,uHAwC3B,CAAC"}

package/dist/compositions/image-upload-modal/ImageUploadModal.js

@@ -1,21 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, forwardRef, useImperativeHandle } from "react";
-import { Button, FileUpload, Modal } from "../../components";
-import { Cancel, Checkmark } from "../../components/icons/generated";
-/**
- * ImageUploadModal component
- *
- * Renders a post creation component.
- */
-export const ImageUploadModal = forwardRef((props, ref) => {
-    const [open, setOpen] = useState(false);
-    const [file, setFile] = useState(null);
-    // Pass the ref to the useImperativeHandle hook
-    useImperativeHandle(ref, () => ({
-        openModal: setOpen,
-    }));
-    return (_jsxs(Modal, { open: open, onOpenChange: setOpen, title: "Image 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);
-                            props.onFileChange(file);
-                        }, children: "Save" })] })] }));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useImperativeHandle } from "react";
+import { Modal } from "../../components/modal/Modal.js";
+import { FileUpload } from "../../components/file-upload/FileUpload.js";
+import { Button } from "../../components/button/Button.js";
+import { Checkmark } from "../../components/icons/generated/Checkmark.js";
+import { Cancel } from "../../components/icons/generated/Cancel.js";
+const ImageUploadModal = forwardRef((props, ref) => {
+  const [open, setOpen] = useState(false);
+  const [file, setFile] = useState(null);
+  useImperativeHandle(ref, () => ({
+    openModal: setOpen
+  }));
+  return /* @__PURE__ */ jsxs(Modal, { open, onOpenChange: setOpen, title: "Image upload", children: [
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(FileUpload, { onFileSelect: setFile }) }),
+    /* @__PURE__ */ jsxs(Modal.Actions, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          intent: "primary",
+          size: "md",
+          icon: Cancel,
+          onClick: () => setOpen(false),
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          intent: "secondary",
+          size: "md",
+          icon: Checkmark,
+          onClick: () => {
+            setOpen(false);
+            props.onFileChange(file);
+          },
+          children: "Save"
+        }
+      )
+    ] })
+  ] });
 });
+export {
+  ImageUploadModal
+};

package/dist/compositions/index.d.ts

@@ -1,11 +1,12 @@
-export * from "./image-banner/ImageBanner";
-export * from "./image-upload-modal/ImageUploadModal";
-export * from "./post/Post";
-export * from "./post-creator/PostCreator";
-export * from "./profile-banner/ProfileBanner";
-export * from "./profile-banner-image/ProfileBannerImage";
-export * from "./profile-banner-info/ProfileBannerInfo";
-export * from "./response/Response";
-export * from "./response-creator/ResponseCreator";
-export * from "./user-info/UserInfo";
-export * from "./user-recommendation/UserRecommendation";
+export * from './image-banner/ImageBanner';
+export * from './image-upload-modal/ImageUploadModal';
+export * from './post/Post';
+export * from './post-creator/PostCreator';
+export * from './profile-banner/ProfileBanner';
+export * from './profile-banner-image/ProfileBannerImage';
+export * from './profile-banner-info/ProfileBannerInfo';
+export * from './response/Response';
+export * from './response-creator/ResponseCreator';
+export * from './user-info/UserInfo';
+export * from './user-recommendation/UserRecommendation';
+//# sourceMappingURL=index.d.ts.map

package/dist/compositions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/compositions/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uCAAuC,CAAC;AACtD,cAAc,aAAa,CAAC;AAC5B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,cAAc,oCAAoC,CAAC;AACnD,cAAc,sBAAsB,CAAC;AACrC,cAAc,0CAA0C,CAAC"}

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

@@ -1,5 +1,5 @@
-import { type VariantProps } from "tailwind-variants";
-declare const PostStyles: import("tailwind-variants").TVReturnType<{
+import { VariantProps } from 'tailwind-variants';
+declare const PostStyles: import('tailwind-variants').TVReturnType<{
     size: {
         lg: {
             base: string[];
@@ -25,7 +25,7 @@ declare const PostStyles: import("tailwind-variants").TVReturnType<{
     content: string[];
     text: string[];
     action: string[];
-}, import("tailwind-variants").TVReturnType<{
+}, import('tailwind-variants').TVReturnType<{
     size: {
         lg: {
             base: string[];
@@ -73,3 +73,4 @@ interface PostProps extends PostVariants {
  */
 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":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAa1D,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAcd,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,CAAC;IAEpB,uDAAuD;IACvD,QAAQ,EAAE,MAAM,CAAC;IAEjB,mDAAmD;IACnD,SAAS,EAAE,IAAI,CAAC;IAEhB,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IAEb,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ,4CAA4C;IAC5C,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,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,CAiDpC,CAAC"}

package/dist/compositions/post/Post.js

@@ -1,30 +1,85 @@
-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, 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 { 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";
 const PostStyles = tv({
-    slots: {
-        base: [],
-        avatar: ["absolute", "-left-8", "top-6"],
-        content: ["flex", "flex-col", "gap-6"],
-        text: ["text-slate-900"],
-        action: ["flex", "gap-10", "justify-start", "-ml-3"],
-    },
-    variants: {
-        size: {
-            lg: { base: ["rounded-b-none"] },
-            md: {},
-        },
-    },
+  slots: {
+    base: [],
+    avatar: ["absolute", "-left-8", "top-6"],
+    content: ["flex", "flex-col", "gap-6"],
+    text: ["text-slate-900"],
+    action: ["flex", "gap-10", "justify-start", "-ml-3"]
+  },
+  variants: {
+    size: {
+      lg: { base: ["rounded-b-none"] },
+      md: {}
+    }
+  }
 });
-/**
- * Detailed post component displaying user info, text content,
- * optional image, and action buttons (comment, like, share).
- */
-export const Post = (props) => {
-    const { base, avatar, content, text, action } = PostStyles(props);
-    return (_jsxs(PostBase, { className: base(), children: [_jsx("div", { className: avatar(), children: _jsx(Avatar, { alt: "Profile", size: "md", src: props.src, onAvatarClick: props.onAvatarClick }) }), _jsxs("div", { className: content(), children: [_jsx(UserInfo, { size: props.size, displayName: props.displayName, userName: props.userName, timestamp: props.timestamp, onClick: props.onAvatarClick }), _jsx(Paragraph, { size: props.size, 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 Post = (props) => {
+  const { base, avatar, content, text, action } = PostStyles(props);
+  return /* @__PURE__ */ jsxs(PostBase, { className: base(), children: [
+    /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        alt: "Profile",
+        size: "md",
+        src: props.src,
+        onAvatarClick: props.onAvatarClick
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: content(), children: [
+      /* @__PURE__ */ jsx(
+        UserInfo,
+        {
+          size: props.size,
+          displayName: props.displayName,
+          userName: props.userName,
+          timestamp: props.timestamp,
+          onClick: props.onAvatarClick
+        }
+      ),
+      /* @__PURE__ */ jsx(Paragraph, { size: props.size, 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 {
+  Post
 };

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

@@ -1,27 +1,27 @@
-import { type VariantProps } from "tailwind-variants";
-declare const PostBaseStyles: import("tailwind-variants").TVReturnType<{
+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;
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
+        [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;
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
     base: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     base: string[];
 }, undefined, unknown, unknown, undefined>>;
 type PostBaseVariants = VariantProps<typeof PostBaseStyles>;
@@ -39,3 +39,4 @@ export interface PostBaseProps extends PostBaseVariants {
  */
 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-base/PostBase.js

@@ -1,27 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn, tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+import { tv, cn } from "tailwind-variants";
 const PostBaseStyles = tv({
-    slots: {
-        base: [
-            "bg-white",
-            "rounded-2xl",
-            "pl-12",
-            "pr-12",
-            "pt-8",
-            "pb-8",
-            "flex",
-            "relative",
-            "w-full",
-            "hover:ring-2",
-            "hover:ring-slate-200",
-        ],
-    },
+  slots: {
+    base: [
+      "bg-white",
+      "rounded-2xl",
+      "pl-12",
+      "pr-12",
+      "pt-8",
+      "pb-8",
+      "flex",
+      "relative",
+      "w-full",
+      "hover:ring-2",
+      "hover:ring-slate-200"
+    ]
+  }
 });
-/**
- * Base layout wrapper for a post, including an avatar section
- * and content area.
- */
-export const PostBase = (props) => {
-    const { base } = PostBaseStyles(props);
-    return _jsx("div", { className: cn(base(), props.className), children: props.children });
+const PostBase = (props) => {
+  const { base } = PostBaseStyles(props);
+  return /* @__PURE__ */ jsx("div", { className: cn(base(), props.className), children: props.children });
+};
+export {
+  PostBase
 };

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

@@ -1,22 +1,22 @@
-import { type VariantProps } from "tailwind-variants";
-declare const PostCreatorStyles: import("tailwind-variants").TVReturnType<{
+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;
+        [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;
+        [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;
         };
     };
 } | {}, {
@@ -27,12 +27,12 @@ declare const PostCreatorStyles: import("tailwind-variants").TVReturnType<{
     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;
+        [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;
         };
     };
 } | {}, {
@@ -41,7 +41,7 @@ declare const PostCreatorStyles: import("tailwind-variants").TVReturnType<{
     title: string[];
     input: string[];
     action: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     content: string[];
     avatar: string[];
     title: string[];
@@ -67,3 +67,4 @@ interface PostCreatorProps extends PostCreatorVariants {
  */
 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":"AAEA,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,CAAC;IAEZ,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,29 +1,77 @@
-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 { Avatar, Button, Heading, Textarea } from "../../components";
-import { Send, Upload } from "../../components/icons/generated";
-import { ImageUploadModal, } from "../image-upload-modal/ImageUploadModal";
-import { PostBase } from "../post-base/PostBase";
+import { ImageUploadModal } from "../image-upload-modal/ImageUploadModal.js";
+import { PostBase } from "../post-base/PostBase.js";
+import { Heading } from "../../components/typography/Heading.js";
+import { Textarea } from "../../components/textarea/Textarea.js";
+import { Send } from "../../components/icons/generated/Send.js";
+import { Avatar } from "../../components/avatar/Avatar.js";
+import { Button } from "../../components/button/Button.js";
+import { Upload } from "../../components/icons/generated/Upload.js";
 const PostCreatorStyles = tv({
-    slots: {
-        content: ["flex", "flex-col", "gap-4", "w-full"],
-        avatar: ["absolute", "-left-8", "top-6"],
-        title: ["text-slate-900"],
-        input: ["w-full", "h-40"],
-        action: ["flex", "gap-4"],
-    },
+  slots: {
+    content: ["flex", "flex-col", "gap-4", "w-full"],
+    avatar: ["absolute", "-left-8", "top-6"],
+    title: ["text-slate-900"],
+    input: ["w-full", "h-40"],
+    action: ["flex", "gap-4"]
+  }
 });
-/**
- * PostCreator component
- *
- * Renders a post creation component.
- */
-export const PostCreator = (props) => {
-    const { content, avatar, title, input, action } = PostCreatorStyles(props);
-    const [file, setFile] = useState(null);
-    const [text, setText] = useState("");
-    const imageUploadModalRef = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsxs(PostBase, { children: [_jsx("div", { className: avatar(), children: _jsx(Avatar, { alt: "Profile", size: "md", src: props.src, onAvatarClick: props.onAvatarClick }) }), _jsxs(Form, { className: content(), children: [_jsx(Heading, { size: "4", as: "h4", className: title(), children: "Hey, what's up?" }), _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 PostCreator = (props) => {
+  const { content, avatar, title, input, action } = PostCreatorStyles(props);
+  const [file, setFile] = useState(null);
+  const [text, setText] = useState("");
+  const imageUploadModalRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(PostBase, { children: [
+      /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          alt: "Profile",
+          size: "md",
+          src: props.src,
+          onAvatarClick: props.onAvatarClick
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Form, { className: content(), children: [
+        /* @__PURE__ */ jsx(Heading, { size: "4", as: "h4", className: title(), children: "Hey, what's up?" }),
+        /* @__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 {
+  PostCreator
 };