@krrli/cm-designsystem 1.34.2 → 1.34.4

package/dist/cm-designsystem.css

@@ -604,6 +604,10 @@
     width: auto;
   }
 
+  .w-fit {
+    width: fit-content;
+  }
+
   .w-full {
     width: 100%;
   }
@@ -755,11 +759,6 @@
     border-top-right-radius: var(--radius-2xl);
   }
 
-  .rounded-b-none {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1684,6 +1683,10 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .focus-visible\:ring-slate-300:focus-visible {
+    --tw-ring-color: var(--color-slate-300);
+  }
+
   .focus-visible\:ring-violet-600:focus-visible {
     --tw-ring-color: var(--color-violet-600);
   }

package/dist/components/accessible-button/AccessibleButton.d.ts

@@ -17,7 +17,7 @@ export interface BaseAccessibleButtonProps {
     /**
      * Click handler for the button.
      */
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 interface AccessibleButtonProps extends BaseAccessibleButtonProps {
     /**

package/dist/components/accessible-button/AccessibleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccessibleButton.d.ts","sourceRoot":"","sources":["../../../src/components/accessible-button/AccessibleButton.tsx"],"names":[],"mappings":"AAYA;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAE7D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,qBAAsB,SAAQ,yBAAyB;IAC/D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoB5D,CAAC"}
+{"version":3,"file":"AccessibleButton.d.ts","sourceRoot":"","sources":["../../../src/components/accessible-button/AccessibleButton.tsx"],"names":[],"mappings":"AAYA;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAE7D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,UAAU,qBAAsB,SAAQ,yBAAyB;IAC/D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoB5D,CAAC"}

package/dist/components/like-toggle/LikeToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LikeToggle.d.ts","sourceRoot":"","sources":["../../../src/components/like-toggle/LikeToggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA0IhB,CAAC;AAEH,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAE5D,UAAU,eAAgB,SAAQ,kBAAkB;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,UAAU,GAAI,mCAIxB,eAAe,4CAwEjB,CAAC"}
+{"version":3,"file":"LikeToggle.d.ts","sourceRoot":"","sources":["../../../src/components/like-toggle/LikeToggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA0IhB,CAAC;AAEH,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAE5D,UAAU,eAAgB,SAAQ,kBAAkB;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,UAAU,GAAI,mCAIxB,eAAe,4CAyEjB,CAAC"}

package/dist/components/like-toggle/LikeToggle.js

@@ -194,6 +194,7 @@ const LikeToggle = ({
       className: base(),
       pressed: selected,
       onPressedChange: handlePressedChange,
+      onClick: (e) => e.stopPropagation(),
       children: [
         /* @__PURE__ */ jsx(
           "span",

package/dist/components/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA2Cb,CAAC;AAEH,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAS,SAAQ,WAAW;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;CAC9C;AAED,eAAO,MAAM,IAAI,GAAI,OAAO,QAAQ,4CAsCnC,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAmDb,CAAC;AAEH,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAS,SAAQ,WAAW;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;CAC9C;AAED,eAAO,MAAM,IAAI,GAAI,OAAO,QAAQ,4CAsCnC,CAAC"}

package/dist/components/tabs/Tabs.js

@@ -5,7 +5,15 @@ import { tv } from "tailwind-variants";
 import { Label } from "../typography/Label.js";
 const tabStyles = tv({
   slots: {
-    list: ["bg-slate-200", "rounded-lg", "p-1", "flex", "gap-2", "group"],
+    list: [
+      "bg-slate-200",
+      "rounded-lg",
+      "p-1",
+      "flex",
+      "gap-2",
+      "group",
+      "w-fit"
+    ],
     trigger: ["pt-2", "pb-2", "pr-3", "pl-3", "rounded-md"]
   },
   variants: {

package/dist/components/timed-button/TimedButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimedButton.d.ts","sourceRoot":"","sources":["../../../src/components/timed-button/TimedButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,uCAAuC,CAAC;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAoErB,CAAC;AAEH,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE;;;;;GAKG;AACH,UAAU,gBACR,SAAQ,mBAAmB,EAAE,yBAAyB;IACtD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAE1C;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwDlD,CAAC"}
+{"version":3,"file":"TimedButton.d.ts","sourceRoot":"","sources":["../../../src/components/timed-button/TimedButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,uCAAuC,CAAC;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAoErB,CAAC;AAEH,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE;;;;;GAKG;AACH,UAAU,gBACR,SAAQ,mBAAmB,EAAE,yBAAyB;IACtD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAE1C;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0DlD,CAAC"}

package/dist/components/timed-button/TimedButton.js

@@ -91,10 +91,11 @@ const TimedButton = ({
       timeoutsRef.current = [];
     };
   }, []);
-  const handleClick = () => {
+  const handleClick = (e) => {
+    e.stopPropagation();
     setPressed(true);
     setAnimating(true);
-    onClick?.();
+    onClick?.(e);
     const timeout1 = setTimeout(() => setAnimating(false), 350);
     timeoutsRef.current.push(timeout1);
     const timeout2 = setTimeout(() => {

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

@@ -1,9 +1,7 @@
 import { VariantProps } from 'tailwind-variants';
 declare const PostStyles: import('tailwind-variants').TVReturnType<{
     size: {
-        lg: {
-            base: string[];
-        };
+        lg: {};
         md: {};
     };
 }, {
@@ -14,9 +12,7 @@ declare const PostStyles: import('tailwind-variants').TVReturnType<{
     action: string[];
 }, undefined, {
     size: {
-        lg: {
-            base: string[];
-        };
+        lg: {};
         md: {};
     };
 }, {
@@ -27,9 +23,7 @@ declare const PostStyles: import('tailwind-variants').TVReturnType<{
     action: string[];
 }, import('tailwind-variants').TVReturnType<{
     size: {
-        lg: {
-            base: string[];
-        };
+        lg: {};
         md: {};
     };
 }, {
@@ -72,6 +66,8 @@ interface PostProps extends PostVariants {
     onLikeClick: () => void;
     /** Callback fired when the share button is clicked. */
     onShareClick: () => void;
+    /** Link to Detail Post */
+    detailLink?: string;
 }
 /**
  * Detailed post component displaying user info, text content,

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

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

package/dist/compositions/post/Post.js

@@ -26,7 +26,7 @@ const PostStyles = tv({
   },
   variants: {
     size: {
-      lg: { base: ["rounded-b-none"] },
+      lg: {},
       md: {}
     }
   }
@@ -37,67 +37,78 @@ 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.avatarSrc,
-        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: renderWithHashtags(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: nbrOfComments === 0 ? "Comment" : nbrOfComments === 1 ? "1 Comment" : `${nbrOfComments} Comments`,
-            pressed: nbrOfComments !== 0,
-            onToggle: props.onCommentClick
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          LikeToggle,
+  const handlePostClick = () => {
+    if (!props.detailLink) return;
+    window.location.href = props.detailLink;
+  };
+  return /* @__PURE__ */ jsxs(
+    PostBase,
+    {
+      className: base(),
+      onClick: props.detailLink ? handlePostClick : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
+          Avatar,
           {
-            pressed: props.likedBySelf ?? false,
-            likes: nbrOfLikes,
-            onLikeChange: props.onLikeClick
+            alt: "Profile",
+            size: "md",
+            src: props.avatarSrc,
+            onAvatarClick: props.onAvatarClick
           }
-        ),
-        /* @__PURE__ */ jsx(
-          TimedButton,
-          {
-            icon: Share,
-            label: "Copy Link",
-            labelActive: "Link copied",
-            onClick: props.onShareClick
-          }
-        )
-      ] })
-    ] })
-  ] });
+        ) }),
+        /* @__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: renderWithHashtags(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: nbrOfComments === 0 ? "Comment" : nbrOfComments === 1 ? "1 Comment" : `${nbrOfComments} Comments`,
+                pressed: nbrOfComments !== 0,
+                onToggle: props.onCommentClick
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              LikeToggle,
+              {
+                pressed: props.likedBySelf ?? false,
+                likes: nbrOfLikes,
+                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

@@ -32,6 +32,8 @@ export interface PostBaseProps extends PostBaseVariants {
     className?: string;
     /** Content to be rendered inside the PostBase component */
     children: React.ReactNode;
+    /** Navigation via onClick handler */
+    onClick?: () => void;
 }
 /**
  * Base layout wrapper for a post, including an avatar section

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;2CAiBlB,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;IAE1B,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4B5C,CAAC"}

package/dist/compositions/post-base/PostBase.js

@@ -12,14 +12,37 @@ const PostBaseStyles = tv({
       "flex",
       "relative",
       "w-full",
+      "focus-visible:ring-2",
       "hover:ring-2",
       "hover:ring-slate-200"
     ]
   }
 });
-const PostBase = (props) => {
+const PostBase = ({
+  className,
+  onClick,
+  ...props
+}) => {
   const { base } = PostBaseStyles(props);
-  return /* @__PURE__ */ jsx("div", { className: cn(base(), props.className), children: props.children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        base(),
+        className,
+        onClick ? "cursor-pointer focus-visible:ring-2 focus-visible:ring-slate-300" : void 0
+      ),
+      onClick,
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: (e) => {
+        if (onClick && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onClick();
+        }
+      },
+      children: props.children
+    }
+  );
 };
 export {
   PostBase

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@krrli/cm-designsystem",
   "repository": "https://github.com/ost-cas-fea-25-26/cm-designsystem",
-  "version": "1.34.2",
+  "version": "1.34.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -49,10 +49,10 @@
     "@chromatic-com/storybook": "4.1.3",
     "@eslint/js": "9.39.2",
     "@playwright/test": "1.57.0",
-    "@storybook/addon-a11y": "10.1.9",
-    "@storybook/addon-docs": "10.1.9",
-    "@storybook/addon-vitest": "10.1.9",
-    "@storybook/react-vite": "10.1.9",
+    "@storybook/addon-a11y": "10.1.10",
+    "@storybook/addon-docs": "10.1.10",
+    "@storybook/addon-vitest": "10.1.10",
+    "@storybook/react-vite": "10.1.10",
     "@tailwindcss/vite": "4.1.18",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
@@ -73,7 +73,7 @@
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.0.1",
     "eslint-plugin-react-refresh": "0.4.26",
-    "eslint-plugin-storybook": "10.1.9",
+    "eslint-plugin-storybook": "10.1.10",
     "eslint-plugin-unused-imports": "4.3.0",
     "globals": "16.5.0",
     "jsdom": "27.3.0",
@@ -83,7 +83,7 @@
     "prettier-plugin-tailwindcss": "0.7.2",
     "rollup-preserve-directives": "1.1.3",
     "semantic-release": "25.0.2",
-    "storybook": "10.1.9",
+    "storybook": "10.1.10",
     "tailwind-merge": "3.4.0",
     "tailwindcss": "4.1.18",
     "typescript": "5.9.3",