@krrli/cm-designsystem 1.32.2 → 1.33.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (160) hide show
  1. package/dist/cm-designsystem.css +13 -1
  2. package/dist/components/accessible-button/AccessibleButton.d.ts +33 -0
  3. package/dist/components/accessible-button/AccessibleButton.d.ts.map +1 -0
  4. package/dist/components/avatar/Avatar.d.ts +119 -0
  5. package/dist/components/avatar/Avatar.d.ts.map +1 -0
  6. package/dist/components/branding/BrandingGallery.d.ts +2 -0
  7. package/dist/components/branding/BrandingGallery.d.ts.map +1 -0
  8. package/dist/components/button/Button.d.ts +67 -0
  9. package/dist/components/button/Button.d.ts.map +1 -0
  10. package/dist/components/color/ColorDoc.d.ts +5 -0
  11. package/dist/components/color/ColorDoc.d.ts.map +1 -0
  12. package/dist/components/file-upload/FileUpload.d.ts +84 -0
  13. package/dist/components/file-upload/FileUpload.d.ts.map +1 -0
  14. package/dist/components/form/Form.d.ts +55 -0
  15. package/dist/components/form/Form.d.ts.map +1 -0
  16. package/dist/components/icon-button/IconButton.d.ts +70 -0
  17. package/dist/components/icon-button/IconButton.d.ts.map +1 -0
  18. package/dist/components/icon-button/IconButton.js +1 -0
  19. package/dist/components/icons/IconBase.d.ts +6 -0
  20. package/dist/components/icons/IconBase.d.ts.map +1 -0
  21. package/dist/components/icons/generated/ArrowDown.d.ts +4 -0
  22. package/dist/components/icons/generated/ArrowDown.d.ts.map +1 -0
  23. package/dist/components/icons/generated/ArrowLeft.d.ts +4 -0
  24. package/dist/components/icons/generated/ArrowLeft.d.ts.map +1 -0
  25. package/dist/components/icons/generated/ArrowRight.d.ts +4 -0
  26. package/dist/components/icons/generated/ArrowRight.d.ts.map +1 -0
  27. package/dist/components/icons/generated/ArrowUp.d.ts +4 -0
  28. package/dist/components/icons/generated/ArrowUp.d.ts.map +1 -0
  29. package/dist/components/icons/generated/Calendar.d.ts +4 -0
  30. package/dist/components/icons/generated/Calendar.d.ts.map +1 -0
  31. package/dist/components/icons/generated/Cancel.d.ts +4 -0
  32. package/dist/components/icons/generated/Cancel.d.ts.map +1 -0
  33. package/dist/components/icons/generated/Checkmark.d.ts +4 -0
  34. package/dist/components/icons/generated/Checkmark.d.ts.map +1 -0
  35. package/dist/components/icons/generated/Edit.d.ts +4 -0
  36. package/dist/components/icons/generated/Edit.d.ts.map +1 -0
  37. package/dist/components/icons/generated/Eye.d.ts +4 -0
  38. package/dist/components/icons/generated/Eye.d.ts.map +1 -0
  39. package/dist/components/icons/generated/Fullscreen.d.ts +4 -0
  40. package/dist/components/icons/generated/Fullscreen.d.ts.map +1 -0
  41. package/dist/components/icons/generated/HeartFilled.d.ts +4 -0
  42. package/dist/components/icons/generated/HeartFilled.d.ts.map +1 -0
  43. package/dist/components/icons/generated/HeartOutline.d.ts +4 -0
  44. package/dist/components/icons/generated/HeartOutline.d.ts.map +1 -0
  45. package/dist/components/icons/generated/Location.d.ts +4 -0
  46. package/dist/components/icons/generated/Location.d.ts.map +1 -0
  47. package/dist/components/icons/generated/LogOut.d.ts +4 -0
  48. package/dist/components/icons/generated/LogOut.d.ts.map +1 -0
  49. package/dist/components/icons/generated/Mumble.d.ts +4 -0
  50. package/dist/components/icons/generated/Mumble.d.ts.map +1 -0
  51. package/dist/components/icons/generated/Profile.d.ts +4 -0
  52. package/dist/components/icons/generated/Profile.d.ts.map +1 -0
  53. package/dist/components/icons/generated/ReplyFilled.d.ts +4 -0
  54. package/dist/components/icons/generated/ReplyFilled.d.ts.map +1 -0
  55. package/dist/components/icons/generated/ReplyOutline.d.ts +4 -0
  56. package/dist/components/icons/generated/ReplyOutline.d.ts.map +1 -0
  57. package/dist/components/icons/generated/Repost.d.ts +4 -0
  58. package/dist/components/icons/generated/Repost.d.ts.map +1 -0
  59. package/dist/components/icons/generated/Send.d.ts +4 -0
  60. package/dist/components/icons/generated/Send.d.ts.map +1 -0
  61. package/dist/components/icons/generated/Settings.d.ts +4 -0
  62. package/dist/components/icons/generated/Settings.d.ts.map +1 -0
  63. package/dist/components/icons/generated/Share.d.ts +4 -0
  64. package/dist/components/icons/generated/Share.d.ts.map +1 -0
  65. package/dist/components/icons/generated/Time.d.ts +4 -0
  66. package/dist/components/icons/generated/Time.d.ts.map +1 -0
  67. package/dist/components/icons/generated/Upload.d.ts +4 -0
  68. package/dist/components/icons/generated/Upload.d.ts.map +1 -0
  69. package/dist/components/icons/generated/index.d.ts +25 -0
  70. package/dist/components/icons/generated/index.d.ts.map +1 -0
  71. package/dist/components/index.d.ts +28 -0
  72. package/dist/components/index.d.ts.map +1 -0
  73. package/dist/components/input/Input.d.ts +62 -0
  74. package/dist/components/input/Input.d.ts.map +1 -0
  75. package/dist/components/like-toggle/LikeToggle.d.ts +98 -0
  76. package/dist/components/like-toggle/LikeToggle.d.ts.map +1 -0
  77. package/dist/components/logo-link/LogoLink.d.ts +12 -0
  78. package/dist/components/logo-link/LogoLink.d.ts.map +1 -0
  79. package/dist/components/modal/Modal.d.ts +76 -0
  80. package/dist/components/modal/Modal.d.ts.map +1 -0
  81. package/dist/components/navi-button/NaviButton.d.ts +50 -0
  82. package/dist/components/navi-button/NaviButton.d.ts.map +1 -0
  83. package/dist/components/navi-user-button/NaviUserButton.d.ts +45 -0
  84. package/dist/components/navi-user-button/NaviUserButton.d.ts.map +1 -0
  85. package/dist/components/round-button/RoundButton.d.ts +45 -0
  86. package/dist/components/round-button/RoundButton.d.ts.map +1 -0
  87. package/dist/components/tabs/TabItem.d.ts +12 -0
  88. package/dist/components/tabs/TabItem.d.ts.map +1 -0
  89. package/dist/components/tabs/Tabs.d.ts +68 -0
  90. package/dist/components/tabs/Tabs.d.ts.map +1 -0
  91. package/dist/components/text-link/TextLink.d.ts +10 -0
  92. package/dist/components/text-link/TextLink.d.ts.map +1 -0
  93. package/dist/components/textarea/Textarea.d.ts +49 -0
  94. package/dist/components/textarea/Textarea.d.ts.map +1 -0
  95. package/dist/components/timed-button/TimedButton.d.ts +80 -0
  96. package/dist/components/timed-button/TimedButton.d.ts.map +1 -0
  97. package/dist/components/toggle/Toggle.d.ts +63 -0
  98. package/dist/components/toggle/Toggle.d.ts.map +1 -0
  99. package/dist/components/typography/AccessibleTypography.d.ts +34 -0
  100. package/dist/components/typography/AccessibleTypography.d.ts.map +1 -0
  101. package/dist/components/typography/Heading.d.ts +25 -0
  102. package/dist/components/typography/Heading.d.ts.map +1 -0
  103. package/dist/components/typography/Label.d.ts +23 -0
  104. package/dist/components/typography/Label.d.ts.map +1 -0
  105. package/dist/components/typography/Paragraph.d.ts +23 -0
  106. package/dist/components/typography/Paragraph.d.ts.map +1 -0
  107. package/dist/components/typography/Placeholder.d.ts +18 -0
  108. package/dist/components/typography/Placeholder.d.ts.map +1 -0
  109. package/dist/components/typography/ValidationMessage.d.ts +23 -0
  110. package/dist/components/typography/ValidationMessage.d.ts.map +1 -0
  111. package/dist/components/typography/styles.d.ts +75 -0
  112. package/dist/components/typography/styles.d.ts.map +1 -0
  113. package/dist/compositions/image-banner/ImageBanner.d.ts +55 -0
  114. package/dist/compositions/image-banner/ImageBanner.d.ts.map +1 -0
  115. package/dist/compositions/image-banner/ImageBanner.js +1 -0
  116. package/dist/compositions/image-upload-modal/ImageUploadModal.d.ts +16 -0
  117. package/dist/compositions/image-upload-modal/ImageUploadModal.d.ts.map +1 -0
  118. package/dist/compositions/image-upload-modal/ImageUploadModal.js +1 -0
  119. package/dist/compositions/index.d.ts +12 -0
  120. package/dist/compositions/index.d.ts.map +1 -0
  121. package/dist/compositions/keyword/Keyword.d.ts +40 -0
  122. package/dist/compositions/keyword/Keyword.d.ts.map +1 -0
  123. package/dist/compositions/keyword/Keyword.js +15 -0
  124. package/dist/compositions/post/Post.d.ts +80 -0
  125. package/dist/compositions/post/Post.d.ts.map +1 -0
  126. package/dist/compositions/post/Post.js +19 -5
  127. package/dist/compositions/post-base/PostBase.d.ts +42 -0
  128. package/dist/compositions/post-base/PostBase.d.ts.map +1 -0
  129. package/dist/compositions/post-creator/PostCreator.d.ts +70 -0
  130. package/dist/compositions/post-creator/PostCreator.d.ts.map +1 -0
  131. package/dist/compositions/post-creator/PostCreator.js +1 -0
  132. package/dist/compositions/profile-banner/ProfileBanner.d.ts +83 -0
  133. package/dist/compositions/profile-banner/ProfileBanner.d.ts.map +1 -0
  134. package/dist/compositions/profile-banner/ProfileBanner.js +1 -0
  135. package/dist/compositions/profile-banner-image/ProfileBannerImage.d.ts +55 -0
  136. package/dist/compositions/profile-banner-image/ProfileBannerImage.d.ts.map +1 -0
  137. package/dist/compositions/profile-banner-image/ProfileBannerImage.js +1 -0
  138. package/dist/compositions/profile-banner-info/ProfileBannerInfo.d.ts +93 -0
  139. package/dist/compositions/profile-banner-info/ProfileBannerInfo.d.ts.map +1 -0
  140. package/dist/compositions/profile-banner-info/ProfileBannerInfo.js +1 -0
  141. package/dist/compositions/response/Response.d.ts +80 -0
  142. package/dist/compositions/response/Response.d.ts.map +1 -0
  143. package/dist/compositions/response/Response.js +18 -4
  144. package/dist/compositions/response-creator/ResponseCreator.d.ts +64 -0
  145. package/dist/compositions/response-creator/ResponseCreator.d.ts.map +1 -0
  146. package/dist/compositions/response-creator/ResponseCreator.js +1 -0
  147. package/dist/compositions/user-info/UserInfo.d.ts +76 -0
  148. package/dist/compositions/user-info/UserInfo.d.ts.map +1 -0
  149. package/dist/compositions/user-info/UserInfo.js +11 -2
  150. package/dist/compositions/user-recommendation/UserRecommendation.d.ts +64 -0
  151. package/dist/compositions/user-recommendation/UserRecommendation.d.ts.map +1 -0
  152. package/dist/compositions/user-recommendation/UserRecommendation.js +1 -0
  153. package/dist/compositions/utils/keyword.utils.d.ts +13 -0
  154. package/dist/compositions/utils/keyword.utils.d.ts.map +1 -0
  155. package/dist/compositions/utils/keyword.utils.js +23 -0
  156. package/dist/index.d.ts +3 -0
  157. package/dist/index.d.ts.map +1 -0
  158. package/dist/setupTests.d.ts +1 -0
  159. package/dist/setupTests.d.ts.map +1 -0
  160. package/package.json +22 -21
@@ -0,0 +1,80 @@
1
+ import { VariantProps } from 'tailwind-variants';
2
+ declare const ResponseStyles: import('tailwind-variants').TVReturnType<{
3
+ [key: string]: {
4
+ [key: string]: import('tailwind-merge').ClassNameValue | {
5
+ base?: import('tailwind-merge').ClassNameValue;
6
+ text?: import('tailwind-merge').ClassNameValue;
7
+ action?: import('tailwind-merge').ClassNameValue;
8
+ content?: import('tailwind-merge').ClassNameValue;
9
+ };
10
+ };
11
+ } | {
12
+ [x: string]: {
13
+ [x: string]: import('tailwind-merge').ClassNameValue | {
14
+ base?: import('tailwind-merge').ClassNameValue;
15
+ text?: import('tailwind-merge').ClassNameValue;
16
+ action?: import('tailwind-merge').ClassNameValue;
17
+ content?: import('tailwind-merge').ClassNameValue;
18
+ };
19
+ };
20
+ } | {}, {
21
+ base: never[];
22
+ content: string[];
23
+ text: string[];
24
+ action: string[];
25
+ }, undefined, {
26
+ [key: string]: {
27
+ [key: string]: import('tailwind-merge').ClassNameValue | {
28
+ base?: import('tailwind-merge').ClassNameValue;
29
+ text?: import('tailwind-merge').ClassNameValue;
30
+ action?: import('tailwind-merge').ClassNameValue;
31
+ content?: import('tailwind-merge').ClassNameValue;
32
+ };
33
+ };
34
+ } | {}, {
35
+ base: never[];
36
+ content: string[];
37
+ text: string[];
38
+ action: string[];
39
+ }, import('tailwind-variants').TVReturnType<unknown, {
40
+ base: never[];
41
+ content: string[];
42
+ text: string[];
43
+ action: string[];
44
+ }, undefined, unknown, unknown, undefined>>;
45
+ type ResponseVariants = VariantProps<typeof ResponseStyles>;
46
+ interface ResponseProps extends ResponseVariants {
47
+ /** The display name of the user who created the Response. */
48
+ displayName: string;
49
+ /** The username or handle associated with the Response. */
50
+ userName: string;
51
+ /** The date and time when the Response was created. */
52
+ timestamp: Date;
53
+ /** The main text content of the Response. */
54
+ text: string;
55
+ /** Avatar image URL */
56
+ src: string;
57
+ /** Triggered when the avatar is clicked. */
58
+ onAvatarClick: () => void;
59
+ /** Number of likes the post has received. */
60
+ nbrOfLikes: number;
61
+ /** Number of comments the post has received. */
62
+ nbrOfComments: number;
63
+ /** Optional image source URL displayed within the Response. */
64
+ imageSrc?: string;
65
+ /** Optional alt text for the Response image, used for accessibility. */
66
+ imageAlt?: string;
67
+ /** Callback fired when the comment button is clicked. */
68
+ onCommentClick: () => void;
69
+ /** Callback fired when the like button is clicked. */
70
+ onLikeClick: () => void;
71
+ /** Callback fired when the share button is clicked. */
72
+ onShareClick: () => void;
73
+ }
74
+ /**
75
+ * Detailed Response component displaying user info, text content,
76
+ * optional image, and action buttons (comment, like, share).
77
+ */
78
+ export declare const Response: React.FC<ResponseProps>;
79
+ export {};
80
+ //# sourceMappingURL=Response.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Response.d.ts","sourceRoot":"","sources":["../../../src/compositions/response/Response.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAQ1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAYlB,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,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IAEnB,gDAAgD;IAChD,aAAa,EAAE,MAAM,CAAC;IAEtB,+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,CAmD5C,CAAC"}
@@ -1,8 +1,10 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { tv } from "tailwind-variants";
3
4
  import { ImageBanner } from "../image-banner/ImageBanner.js";
4
5
  import { PostBase } from "../post-base/PostBase.js";
5
6
  import { UserInfo } from "../user-info/UserInfo.js";
7
+ import { renderWithHashtags } from "../utils/keyword.utils.js";
6
8
  import { Paragraph } from "../../components/typography/Paragraph.js";
7
9
  import { Toggle } from "../../components/toggle/Toggle.js";
8
10
  import { LikeToggle } from "../../components/like-toggle/LikeToggle.js";
@@ -12,7 +14,12 @@ const ResponseStyles = tv({
12
14
  slots: {
13
15
  base: [],
14
16
  content: ["flex", "flex-col", "gap-4"],
15
- text: ["text-slate-900"],
17
+ text: [
18
+ "text-slate-900",
19
+ "text-wrap",
20
+ "wrap-anywhere",
21
+ "whitespace-pre-wrap"
22
+ ],
16
23
  action: ["flex", "gap-10", "justify-start", "-ml-3"]
17
24
  }
18
25
  });
@@ -30,7 +37,7 @@ const Response = (props) => {
30
37
  onClick: props.onAvatarClick
31
38
  }
32
39
  ),
33
- /* @__PURE__ */ jsx(Paragraph, { size: "md", className: text(), children: props.text }),
40
+ /* @__PURE__ */ jsx(Paragraph, { size: "md", className: text(), children: renderWithHashtags(props.text) }),
34
41
  props.imageSrc && /* @__PURE__ */ jsx(
35
42
  ImageBanner,
36
43
  {
@@ -45,11 +52,18 @@ const Response = (props) => {
45
52
  Toggle,
46
53
  {
47
54
  ariaLabel: "Comment",
48
- labelText: "Comment",
55
+ labelText: props.nbrOfComments === 0 ? "Comment" : props.nbrOfComments === 1 ? "1 Comment" : `${props.nbrOfComments} Comments`,
56
+ pressed: props.nbrOfComments !== 0,
49
57
  onToggle: props.onCommentClick
50
58
  }
51
59
  ),
52
- /* @__PURE__ */ jsx(LikeToggle, { onLikeChange: props.onLikeClick }),
60
+ /* @__PURE__ */ jsx(
61
+ LikeToggle,
62
+ {
63
+ likes: props.nbrOfLikes,
64
+ onLikeChange: props.onLikeClick
65
+ }
66
+ ),
53
67
  /* @__PURE__ */ jsx(
54
68
  TimedButton,
55
69
  {
@@ -0,0 +1,64 @@
1
+ import { VariantProps } from 'tailwind-variants';
2
+ declare const ResponseCreatorStyles: import('tailwind-variants').TVReturnType<{
3
+ [key: string]: {
4
+ [key: string]: import('tailwind-merge').ClassNameValue | {
5
+ input?: import('tailwind-merge').ClassNameValue;
6
+ action?: import('tailwind-merge').ClassNameValue;
7
+ content?: import('tailwind-merge').ClassNameValue;
8
+ };
9
+ };
10
+ } | {
11
+ [x: string]: {
12
+ [x: string]: import('tailwind-merge').ClassNameValue | {
13
+ input?: import('tailwind-merge').ClassNameValue;
14
+ action?: import('tailwind-merge').ClassNameValue;
15
+ content?: import('tailwind-merge').ClassNameValue;
16
+ };
17
+ };
18
+ } | {}, {
19
+ content: string[];
20
+ input: string[];
21
+ action: string[];
22
+ }, undefined, {
23
+ [key: string]: {
24
+ [key: string]: import('tailwind-merge').ClassNameValue | {
25
+ input?: import('tailwind-merge').ClassNameValue;
26
+ action?: import('tailwind-merge').ClassNameValue;
27
+ content?: import('tailwind-merge').ClassNameValue;
28
+ };
29
+ };
30
+ } | {}, {
31
+ content: string[];
32
+ input: string[];
33
+ action: string[];
34
+ }, import('tailwind-variants').TVReturnType<unknown, {
35
+ content: string[];
36
+ input: string[];
37
+ action: string[];
38
+ }, undefined, unknown, unknown, undefined>>;
39
+ type ResponseCreatorVariants = VariantProps<typeof ResponseCreatorStyles>;
40
+ interface ResponseCreatorProps extends ResponseCreatorVariants {
41
+ /** Avatar image URL */
42
+ src: string;
43
+ /** Display name of the user */
44
+ displayName: string;
45
+ /** Username of the user */
46
+ userName: string;
47
+ /**
48
+ * Callback fired when the "Send" button is clicked.
49
+ * Receives the textarea text and the optionally uploaded file.
50
+ */
51
+ onSendClick: (text: string, file: File | null) => void;
52
+ /**
53
+ * Triggered when the avatar is clicked.
54
+ */
55
+ onAvatarClick: () => void;
56
+ }
57
+ /**
58
+ * ResponseCreator component
59
+ *
60
+ * Renders a Response creation component.
61
+ */
62
+ export declare const ResponseCreator: React.FC<ResponseCreatorProps>;
63
+ export {};
64
+ //# sourceMappingURL=ResponseCreator.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ResponseCreator.d.ts","sourceRoot":"","sources":["../../../src/compositions/response-creator/ResponseCreator.tsx"],"names":[],"mappings":"AAIA,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"}
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
3
  import { Form } from "@radix-ui/react-form";
3
4
  import { useState, useRef } from "react";
@@ -0,0 +1,76 @@
1
+ import { VariantProps } from 'tailwind-variants';
2
+ declare const userInfoStyles: import('tailwind-variants').TVReturnType<{
3
+ [key: string]: {
4
+ [key: string]: import('tailwind-merge').ClassNameValue | {
5
+ displayName?: import('tailwind-merge').ClassNameValue;
6
+ base?: import('tailwind-merge').ClassNameValue;
7
+ userInfo?: import('tailwind-merge').ClassNameValue;
8
+ detailInfo?: import('tailwind-merge').ClassNameValue;
9
+ timeInfo?: import('tailwind-merge').ClassNameValue;
10
+ };
11
+ };
12
+ } | {
13
+ [x: string]: {
14
+ [x: string]: import('tailwind-merge').ClassNameValue | {
15
+ displayName?: import('tailwind-merge').ClassNameValue;
16
+ base?: import('tailwind-merge').ClassNameValue;
17
+ userInfo?: import('tailwind-merge').ClassNameValue;
18
+ detailInfo?: import('tailwind-merge').ClassNameValue;
19
+ timeInfo?: import('tailwind-merge').ClassNameValue;
20
+ };
21
+ };
22
+ } | {}, {
23
+ base: string[];
24
+ userInfo: string[];
25
+ displayName: string[];
26
+ detailInfo: string[];
27
+ timeInfo: string[];
28
+ }, undefined, {
29
+ [key: string]: {
30
+ [key: string]: import('tailwind-merge').ClassNameValue | {
31
+ displayName?: import('tailwind-merge').ClassNameValue;
32
+ base?: import('tailwind-merge').ClassNameValue;
33
+ userInfo?: import('tailwind-merge').ClassNameValue;
34
+ detailInfo?: import('tailwind-merge').ClassNameValue;
35
+ timeInfo?: import('tailwind-merge').ClassNameValue;
36
+ };
37
+ };
38
+ } | {}, {
39
+ base: string[];
40
+ userInfo: string[];
41
+ displayName: string[];
42
+ detailInfo: string[];
43
+ timeInfo: string[];
44
+ }, import('tailwind-variants').TVReturnType<unknown, {
45
+ base: string[];
46
+ userInfo: string[];
47
+ displayName: string[];
48
+ detailInfo: string[];
49
+ timeInfo: string[];
50
+ }, undefined, unknown, unknown, undefined>>;
51
+ type UserInfoVariants = VariantProps<typeof userInfoStyles>;
52
+ type UserInfoSize = "sm" | "md" | "lg";
53
+ interface UserInfoProps extends UserInfoVariants {
54
+ /** Avatar image URL */
55
+ src?: string;
56
+ /** Size variant of the component */
57
+ size: UserInfoSize;
58
+ /** Display name of the user */
59
+ displayName: string | undefined;
60
+ /** Username of the user */
61
+ userName: string | undefined;
62
+ /** Timestamp for the user activity */
63
+ timestamp?: Date;
64
+ /** Click handler for the whole UserInfo component */
65
+ onClick: () => void;
66
+ }
67
+ /**
68
+ * UserInfo Component
69
+ *
70
+ * Displays a user avatar, display name, username, and a timestamp indicating
71
+ * when an activity occurred. The entire component acts as an interactive button
72
+ * and includes keyboard accessibility using `Enter` and `Space`.
73
+ */
74
+ export declare const UserInfo: React.FC<UserInfoProps>;
75
+ export {};
76
+ //# sourceMappingURL=UserInfo.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UserInfo.d.ts","sourceRoot":"","sources":["../../../src/compositions/user-info/UserInfo.tsx"],"names":[],"mappings":"AAEA,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,GAAG,SAAS,CAAC;IAChC,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,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,CA6C5C,CAAC"}
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, jsx } from "react/jsx-runtime";
2
3
  import { tv } from "tailwind-variants";
3
4
  import { Avatar } from "../../components/avatar/Avatar.js";
@@ -57,9 +58,17 @@ const UserInfo = (props) => {
57
58
  }
58
59
  ),
59
60
  /* @__PURE__ */ jsxs("div", { className: userInfo(), children: [
60
- /* @__PURE__ */ jsx("button", { onClick: props.onClick, className: displayName(), children: /* @__PURE__ */ jsx(Label, { size: getLabelSize(props.size), children: props.displayName }) }),
61
+ /* @__PURE__ */ jsx("button", { onClick: props.onClick, className: displayName(), children: props.displayName && /* @__PURE__ */ jsx(Label, { size: getLabelSize(props.size), children: props.displayName }) }),
61
62
  /* @__PURE__ */ jsxs("div", { className: detailInfo(), children: [
62
- /* @__PURE__ */ jsx(IconButton, { intent: "secondary", icon: Profile, onClick: props.onClick, children: props.userName }),
63
+ props.userName && /* @__PURE__ */ jsx(
64
+ IconButton,
65
+ {
66
+ intent: "secondary",
67
+ icon: Profile,
68
+ onClick: props.onClick,
69
+ children: props.userName
70
+ }
71
+ ),
63
72
  props.timestamp && /* @__PURE__ */ jsx(
64
73
  IconButton,
65
74
  {
@@ -0,0 +1,64 @@
1
+ import { VariantProps } from 'tailwind-variants';
2
+ declare const userRecommendationStyles: import('tailwind-variants').TVReturnType<{
3
+ [key: string]: {
4
+ [key: string]: import('tailwind-merge').ClassNameValue | {
5
+ displayName?: import('tailwind-merge').ClassNameValue;
6
+ base?: import('tailwind-merge').ClassNameValue;
7
+ userInfo?: import('tailwind-merge').ClassNameValue;
8
+ };
9
+ };
10
+ } | {
11
+ [x: string]: {
12
+ [x: string]: import('tailwind-merge').ClassNameValue | {
13
+ displayName?: import('tailwind-merge').ClassNameValue;
14
+ base?: import('tailwind-merge').ClassNameValue;
15
+ userInfo?: import('tailwind-merge').ClassNameValue;
16
+ };
17
+ };
18
+ } | {}, {
19
+ base: string[];
20
+ userInfo: string[];
21
+ displayName: string[];
22
+ }, undefined, {
23
+ [key: string]: {
24
+ [key: string]: import('tailwind-merge').ClassNameValue | {
25
+ displayName?: import('tailwind-merge').ClassNameValue;
26
+ base?: import('tailwind-merge').ClassNameValue;
27
+ userInfo?: import('tailwind-merge').ClassNameValue;
28
+ };
29
+ };
30
+ } | {}, {
31
+ base: string[];
32
+ userInfo: string[];
33
+ displayName: string[];
34
+ }, import('tailwind-variants').TVReturnType<unknown, {
35
+ base: string[];
36
+ userInfo: string[];
37
+ displayName: string[];
38
+ }, undefined, unknown, unknown, undefined>>;
39
+ type UserRecommendationVariants = VariantProps<typeof userRecommendationStyles>;
40
+ interface UserRecommendationProps extends UserRecommendationVariants {
41
+ /** URL of the user's avatar image. */
42
+ src: string;
43
+ /** Display name of the user (e.g., "Jane Doe"). */
44
+ displayName: string;
45
+ /** Username/handle of the user (e.g., "@jane"). */
46
+ userName: string;
47
+ /** Label shown on the follow button (e.g., "Follow"). */
48
+ label: string;
49
+ /** Handler invoked when the "Follow" button is clicked. */
50
+ onFollowClick: () => void;
51
+ /** Handler invoked when user profile elements (avatar or username) are clicked. */
52
+ onProfileClick: () => void;
53
+ }
54
+ /**
55
+ * UserRecommendation Component
56
+ *
57
+ * Displays a recommended user with:
58
+ * - A clickable avatar
59
+ * - Display name and username
60
+ * - A follow button
61
+ */
62
+ export declare const UserRecommendation: React.FC<UserRecommendationProps>;
63
+ export {};
64
+ //# sourceMappingURL=UserRecommendation.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UserRecommendation.d.ts","sourceRoot":"","sources":["../../../src/compositions/user-recommendation/UserRecommendation.tsx"],"names":[],"mappings":"AAEA,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"}
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, jsx } from "react/jsx-runtime";
2
3
  import { tv } from "tailwind-variants";
3
4
  import { Avatar } from "../../components/avatar/Avatar.js";
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Splits a text string into normal text and hashtag elements,
3
+ * replacing each hashtag (`#word`) with a `<Keyword>` component.
4
+ *
5
+ * This function preserves the original text layout and returns
6
+ * an array of strings and React nodes suitable for direct rendering.
7
+ *
8
+ * @function renderWithHashtags
9
+ * @param {string} text - The input text that may contain hashtags.
10
+ * @returns {(string | React.ReactNode)[]} A list of text segments and `<Keyword>` components.
11
+ */
12
+ export declare function renderWithHashtags(text?: string): (string | import("react/jsx-runtime").JSX.Element)[];
13
+ //# sourceMappingURL=keyword.utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"keyword.utils.d.ts","sourceRoot":"","sources":["../../../src/compositions/utils/keyword.utils.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,MAAW,wDA0BnD"}
@@ -0,0 +1,23 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { Keyword } from "../keyword/Keyword.js";
3
+ function renderWithHashtags(text = "") {
4
+ const regex = /#\w+/g;
5
+ const parts = [];
6
+ let lastIndex = 0;
7
+ let match;
8
+ while ((match = regex.exec(text)) !== null) {
9
+ const { index } = match;
10
+ if (index > lastIndex) {
11
+ parts.push(text.substring(lastIndex, index));
12
+ }
13
+ parts.push(/* @__PURE__ */ jsx(Keyword, { children: match[0] }, index));
14
+ lastIndex = index + match[0].length;
15
+ }
16
+ if (lastIndex < text.length) {
17
+ parts.push(text.substring(lastIndex));
18
+ }
19
+ return parts;
20
+ }
21
+ export {
22
+ renderWithHashtags
23
+ };
@@ -0,0 +1,3 @@
1
+ export * from './components';
2
+ export * from './compositions';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1 @@
1
+ //# sourceMappingURL=setupTests.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../src/setupTests.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@krrli/cm-designsystem",
3
- "version": "1.32.2",
3
+ "repository": "https://github.com/ost-cas-fea-25-26/cm-designsystem",
4
+ "version": "1.33.1",
4
5
  "type": "module",
5
6
  "main": "dist/index.js",
6
7
  "module": "dist/index.js",
@@ -41,53 +42,53 @@
41
42
  "@radix-ui/react-form": "0.1.8",
42
43
  "@radix-ui/react-tabs": "1.1.13",
43
44
  "@radix-ui/react-toggle": "1.1.10",
44
- "react": "19.2.1",
45
- "react-dom": "19.2.1"
45
+ "react": "19.2.3",
46
+ "react-dom": "19.2.3"
46
47
  },
47
48
  "devDependencies": {
48
49
  "@chromatic-com/storybook": "4.1.3",
49
- "@eslint/js": "9.39.1",
50
+ "@eslint/js": "9.39.2",
50
51
  "@playwright/test": "1.57.0",
51
- "@storybook/addon-a11y": "10.1.4",
52
- "@storybook/addon-docs": "10.1.4",
53
- "@storybook/addon-vitest": "10.1.4",
54
- "@storybook/react-vite": "10.1.4",
55
- "@tailwindcss/vite": "4.1.17",
52
+ "@storybook/addon-a11y": "10.1.9",
53
+ "@storybook/addon-docs": "10.1.9",
54
+ "@storybook/addon-vitest": "10.1.9",
55
+ "@storybook/react-vite": "10.1.9",
56
+ "@tailwindcss/vite": "4.1.18",
56
57
  "@testing-library/dom": "10.4.1",
57
58
  "@testing-library/jest-dom": "6.9.1",
58
- "@testing-library/react": "16.3.0",
59
+ "@testing-library/react": "16.3.1",
59
60
  "@testing-library/user-event": "14.6.1",
60
- "@types/node": "24.10.1",
61
+ "@types/node": "24.10.4",
61
62
  "@types/react": "19.2.7",
62
63
  "@types/react-dom": "19.2.3",
63
- "@vitejs/plugin-react": "5.1.1",
64
+ "@vitejs/plugin-react": "5.1.2",
64
65
  "@vitest/browser": "4.0.15",
65
66
  "@vitest/browser-playwright": "4.0.15",
66
67
  "@vitest/coverage-v8": "4.0.15",
67
- "eslint": "9.39.1",
68
+ "eslint": "9.39.2",
68
69
  "eslint-config-prettier": "10.1.8",
69
70
  "eslint-import-resolver-typescript": "4.4.4",
70
71
  "eslint-plugin-import": "2.32.0",
71
72
  "eslint-plugin-jsx-a11y": "6.10.2",
72
73
  "eslint-plugin-react": "7.37.5",
73
74
  "eslint-plugin-react-hooks": "7.0.1",
74
- "eslint-plugin-react-refresh": "0.4.24",
75
- "eslint-plugin-storybook": "10.1.4",
75
+ "eslint-plugin-react-refresh": "0.4.25",
76
+ "eslint-plugin-storybook": "10.1.9",
76
77
  "eslint-plugin-unused-imports": "4.3.0",
77
78
  "globals": "16.5.0",
78
- "jsdom": "27.2.0",
79
- "knip": "5.72.0",
79
+ "jsdom": "27.3.0",
80
+ "knip": "5.74.0",
80
81
  "playwright": "1.57.0",
81
82
  "prettier": "3.7.4",
82
83
  "prettier-plugin-tailwindcss": "0.7.2",
83
84
  "rollup-preserve-directives": "1.1.3",
84
85
  "semantic-release": "25.0.2",
85
- "storybook": "10.1.4",
86
+ "storybook": "10.1.9",
86
87
  "tailwind-merge": "3.4.0",
87
- "tailwindcss": "4.1.17",
88
+ "tailwindcss": "4.1.18",
88
89
  "typescript": "5.9.3",
89
- "typescript-eslint": "8.48.1",
90
- "vite": "7.2.7",
90
+ "typescript-eslint": "8.50.0",
91
+ "vite": "7.3.0",
91
92
  "vite-plugin-dts": "4.5.4",
92
93
  "vite-plugin-svgr": "^4.5.0",
93
94
  "vitest": "4.0.15"