@krrli/cm-designsystem 1.35.0 → 1.35.2

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 (16) hide show
  1. package/dist/components/avatar/Avatar.d.ts +1 -1
  2. package/dist/components/avatar/Avatar.d.ts.map +1 -1
  3. package/dist/components/input/Input.d.ts +3 -1
  4. package/dist/components/input/Input.d.ts.map +1 -1
  5. package/dist/components/input/Input.js +13 -3
  6. package/dist/components/modal/Modal.d.ts.map +1 -1
  7. package/dist/components/modal/Modal.js +20 -7
  8. package/dist/components/toggle/Toggle.d.ts.map +1 -1
  9. package/dist/components/toggle/Toggle.js +1 -0
  10. package/dist/compositions/post/Post.d.ts +2 -2
  11. package/dist/compositions/post/Post.d.ts.map +1 -1
  12. package/dist/compositions/post/Post.js +71 -76
  13. package/dist/compositions/user-info/UserInfo.d.ts +1 -1
  14. package/dist/compositions/user-info/UserInfo.d.ts.map +1 -1
  15. package/dist/styles.css +35 -19
  16. package/package.json +4 -4
package/dist/components/avatar/Avatar.d.ts CHANGED
@@ -99,7 +99,7 @@ interface AvatarProps extends AvatarVariants {
99
99
  * Click handler for the entire avatar.
100
100
  * Makes the outer wrapper clickable.
101
101
  */
102
- onAvatarClick?: () => void;
102
+ onAvatarClick?: (e: React.MouseEvent) => void;
103
103
  /**
104
104
  * Optional click handler for the action button.
105
105
  * Only visible when:
package/dist/components/avatar/Avatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAK1D,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwDhB,CAAC;AAEH,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;GAEG;AACH,UAAU,WAAY,SAAQ,cAAc;IAC1C;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,IAAI,EAAE,UAAU,CAAC;IAEjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgCxC,CAAC"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAK1D,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwDhB,CAAC;AAEH,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;GAEG;AACH,UAAU,WAAY,SAAQ,cAAc;IAC1C;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,IAAI,EAAE,UAAU,CAAC;IAEjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE9C;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgCxC,CAAC"}
package/dist/components/input/Input.d.ts CHANGED
@@ -56,7 +56,9 @@ interface InputProps extends InputVariants {
56
56
  isRequired?: boolean;
57
57
  children?: React.ReactElement<IconBaseProps>;
58
58
  onChange: (value: string) => void;
59
+ value?: string;
60
+ defaultValue?: string;
59
61
  }
60
- export declare const Input: ({ type, isRequired, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
62
+ export declare const Input: ({ type, isRequired, value: controlledValue, defaultValue, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
61
63
  export {};
62
64
  //# sourceMappingURL=Input.d.ts.map
package/dist/components/input/Input.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA8Bf,CAAC;AAEH,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAEtD,UAAU,UAAW,SAAQ,aAAa;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,KAAK,GAAI,gCAInB,UAAU,4CA2CZ,CAAC"}
1
+ {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA8Bf,CAAC;AAEH,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAEtD,UAAU,UAAW,SAAQ,aAAa;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,KAAK,GAAI,sEAMnB,UAAU,4CAqDZ,CAAC"}
package/dist/components/input/Input.js CHANGED
@@ -40,13 +40,17 @@ const inputStyles = tv({
40
40
  const Input = ({
41
41
  type = "text",
42
42
  isRequired = false,
43
+ value: controlledValue,
44
+ defaultValue = "",
43
45
  ...props
44
46
  }) => {
45
47
  const { base, controlContainer, control, message, icon } = inputStyles({
46
48
  hasIcon: !!props.children,
47
49
  ...props
48
50
  });
49
- const [value, setValue] = useState("");
51
+ const [internalValue, setInternalValue] = useState(defaultValue);
52
+ const isControlled = controlledValue !== void 0;
53
+ const value = isControlled ? controlledValue : internalValue;
50
54
  return /* @__PURE__ */ jsxs(RadixForm.Field, { name: props.name, className: base(props), children: [
51
55
  /* @__PURE__ */ jsx(RadixForm.Label, { children: /* @__PURE__ */ jsx(Label, { size: "md", children: props.label }) }),
52
56
  /* @__PURE__ */ jsxs("div", { className: controlContainer(props), children: [
@@ -57,8 +61,14 @@ const Input = ({
57
61
  type,
58
62
  required: isRequired,
59
63
  placeholder: props.placeholder,
60
- onChange: (e) => setValue(e.target.value),
61
- onBlur: () => props.onChange(value)
64
+ value,
65
+ onChange: (e) => {
66
+ const newValue = e.target.value;
67
+ if (!isControlled) {
68
+ setInternalValue(newValue);
69
+ }
70
+ props.onChange(newValue);
71
+ }
62
72
  }
63
73
  ) }),
64
74
  props.children && React.cloneElement(props.children, { className: icon(props) })
package/dist/components/modal/Modal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA2Bf,CAAC;AAEH,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAEtD,UAAU,UAAW,SAAQ,aAAa;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,IAAI,EAAE,OAAO,SAAS,CAAC;IACvB,OAAO,EAAE,OAAO,YAAY,CAAC;CA6C9B,CAAC;AAGF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,mBAEpE;yBAFe,SAAS;;;AAKzB,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,mBAEvE;yBAFe,YAAY"}
1
+ {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwCf,CAAC;AAEH,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAEtD,UAAU,UAAW,SAAQ,aAAa;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,IAAI,EAAE,OAAO,SAAS,CAAC;IACvB,OAAO,EAAE,OAAO,YAAY,CAAC;CA6C9B,CAAC;AAGF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,mBAEpE;yBAFe,SAAS;;;AAKzB,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,mBAEvE;yBAFe,YAAY"}
package/dist/components/modal/Modal.js CHANGED
@@ -11,7 +11,8 @@ const modalStyles = tv({
11
11
  "fixed",
12
12
  "top-1/2",
13
13
  "left-1/2",
14
- "w-123",
14
+ "w-[calc(100%-2rem)]",
15
+ "max-w-123",
15
16
  "-translate-x-1/2",
16
17
  "-translate-y-1/2",
17
18
  "rounded-2xl",
@@ -22,13 +23,25 @@ const modalStyles = tv({
22
23
  "justify-between",
23
24
  "rounded-t-2xl",
24
25
  "bg-violet-600",
25
- "pt-6",
26
- "pr-8",
27
- "pb-6",
28
- "pl-8",
26
+ "pt-4",
27
+ "pr-4",
28
+ "pb-4",
29
+ "pl-4",
30
+ "sm:pt-6",
31
+ "sm:pr-8",
32
+ "sm:pb-6",
33
+ "sm:pl-8",
29
34
  "text-white"
30
35
  ],
31
- container: ["flex", "flex-col", "items-center", "gap-12", "p-8"],
36
+ container: [
37
+ "flex",
38
+ "flex-col",
39
+ "items-center",
40
+ "gap-8",
41
+ "p-4",
42
+ "sm:gap-12",
43
+ "sm:p-8"
44
+ ],
32
45
  actions: ["flex", "items-center", "gap-4", "w-full"]
33
46
  }
34
47
  });
@@ -52,7 +65,7 @@ const Modal = (props) => {
52
65
  /* @__PURE__ */ jsxs(RadixDialog.Content, { className: content(), children: [
53
66
  /* @__PURE__ */ jsxs(RadixDialog.Title, { className: title(), children: [
54
67
  /* @__PURE__ */ jsx(Heading, { as: "span", size: "3", children: props.title }),
55
- /* @__PURE__ */ jsx(RadixDialog.Close, { children: /* @__PURE__ */ jsx(Cancel, {}) })
68
+ /* @__PURE__ */ jsx(RadixDialog.Close, { "aria-label": "Close modal", children: /* @__PURE__ */ jsx(Cancel, {}) })
56
69
  ] }),
57
70
  /* @__PURE__ */ jsxs("div", { className: container(), children: [
58
71
  modalBody,
package/dist/components/toggle/Toggle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4DhB,CAAC;AACH,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAExD,UAAU,WAAY,SAAQ,cAAc;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,GAAI,wDAMpB,WAAW,4CAyBb,CAAC"}
1
+ {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4DhB,CAAC;AACH,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAExD,UAAU,WAAY,SAAQ,cAAc;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,GAAI,wDAMpB,WAAW,4CA0Bb,CAAC"}
package/dist/components/toggle/Toggle.js CHANGED
@@ -81,6 +81,7 @@ const Toggle = ({
81
81
  className: base(),
82
82
  pressed,
83
83
  onPressedChange: onToggle,
84
+ onClick: (e) => e.stopPropagation(),
84
85
  disabled,
85
86
  children: [
86
87
  /* @__PURE__ */ jsx(
package/dist/compositions/post/Post.d.ts CHANGED
@@ -72,8 +72,8 @@ interface PostProps extends PostVariants {
72
72
  onLikeClick: () => void;
73
73
  /** Callback fired when the share button is clicked. */
74
74
  onShareClick: () => void;
75
- /** Link to Detail Post */
76
- detailLink?: string;
75
+ /** Callback fired when the post itself is clicked. */
76
+ onPostClick: () => void;
77
77
  }
78
78
  /**
79
79
  * Detailed post component displaying user info, text content,
package/dist/compositions/post/Post.d.ts.map CHANGED
@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4Bd,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,CAiFpC,CAAC"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4Bd,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,sDAAsD;IACtD,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA8EpC,CAAC"}
package/dist/compositions/post/Post.js CHANGED
@@ -15,7 +15,7 @@ const PostStyles = tv({
15
15
  slots: {
16
16
  base: ["flex", "flex-col", "gap-4", "md:gap-6", "md:relative"],
17
17
  header: ["flex", "gap-3", "items-start", "md:gap-0"],
18
- avatar: ["flex-shrink-0", "md:absolute", "md:-left-8", "md:top-6"],
18
+ avatar: ["shrink-0", "md:absolute", "md:-left-8", "md:top-6"],
19
19
  userInfoWrapper: ["flex-1", "min-w-0"],
20
20
  content: ["flex", "flex-col", "gap-4", "md:gap-6"],
21
21
  text: [
@@ -46,81 +46,76 @@ const Post = ({
46
46
  ...props
47
47
  }) => {
48
48
  const { base, header, avatar, userInfoWrapper, content, text, action } = PostStyles(props);
49
- const handlePostClick = () => {
50
- if (!props.detailLink) return;
51
- window.location.href = props.detailLink;
52
- };
53
- return /* @__PURE__ */ jsxs(
54
- PostBase,
55
- {
56
- className: base(),
57
- onClick: props.detailLink ? handlePostClick : void 0,
58
- children: [
59
- /* @__PURE__ */ jsxs("div", { className: header(), children: [
60
- /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
61
- Avatar,
62
- {
63
- alt: "Profile",
64
- size: "md",
65
- src: props.avatarSrc,
66
- onAvatarClick: props.onAvatarClick
67
- }
68
- ) }),
69
- /* @__PURE__ */ jsx("div", { className: userInfoWrapper(), children: /* @__PURE__ */ jsx(
70
- UserInfo,
71
- {
72
- size: props.size,
73
- displayName: props.displayName,
74
- userName: props.userName,
75
- timestamp: props.timestamp,
76
- onClick: props.onAvatarClick,
77
- src: null
78
- }
79
- ) })
80
- ] }),
81
- /* @__PURE__ */ jsxs("div", { className: content(), children: [
82
- /* @__PURE__ */ jsx(Paragraph, { size: props.size, className: text(), children: renderWithHashtags(props.text) }),
83
- props.imageSrc && /* @__PURE__ */ jsx(
84
- ImageBanner,
85
- {
86
- src: props.imageSrc,
87
- alt: props.imageAlt ?? "",
88
- onClick: () => {
89
- }
90
- }
91
- ),
92
- /* @__PURE__ */ jsxs("div", { className: action(), children: [
93
- /* @__PURE__ */ jsx(
94
- Toggle,
95
- {
96
- ariaLabel: "Comment",
97
- labelText: nbrOfComments === 0 ? "Comment" : nbrOfComments === 1 ? "1 Comment" : `${nbrOfComments} Comments`,
98
- pressed: nbrOfComments !== 0,
99
- onToggle: props.onCommentClick
100
- }
101
- ),
102
- /* @__PURE__ */ jsx(
103
- LikeToggle,
104
- {
105
- pressed: props.likedBySelf ?? false,
106
- likes: nbrOfLikes,
107
- onLikeChange: props.onLikeClick
108
- }
109
- ),
110
- /* @__PURE__ */ jsx(
111
- TimedButton,
112
- {
113
- icon: Share,
114
- label: "Copy Link",
115
- labelActive: "Link copied",
116
- onClick: props.onShareClick
117
- }
118
- )
119
- ] })
120
- ] })
121
- ]
122
- }
123
- );
49
+ return /* @__PURE__ */ jsxs(PostBase, { className: base(), onClick: props.onPostClick, children: [
50
+ /* @__PURE__ */ jsxs("div", { className: header(), children: [
51
+ /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
52
+ Avatar,
53
+ {
54
+ alt: "Profile",
55
+ size: "md",
56
+ src: props.avatarSrc,
57
+ onAvatarClick: (e) => {
58
+ props.onAvatarClick?.();
59
+ e.stopPropagation();
60
+ }
61
+ }
62
+ ) }),
63
+ /* @__PURE__ */ jsx("div", { className: userInfoWrapper(), children: /* @__PURE__ */ jsx(
64
+ UserInfo,
65
+ {
66
+ size: props.size,
67
+ displayName: props.displayName,
68
+ userName: props.userName,
69
+ timestamp: props.timestamp,
70
+ onClick: (e) => {
71
+ props.onAvatarClick?.();
72
+ e.stopPropagation();
73
+ },
74
+ src: null
75
+ }
76
+ ) })
77
+ ] }),
78
+ /* @__PURE__ */ jsxs("div", { className: content(), children: [
79
+ /* @__PURE__ */ jsx(Paragraph, { size: props.size, className: text(), children: renderWithHashtags(props.text) }),
80
+ props.imageSrc && /* @__PURE__ */ jsx(
81
+ ImageBanner,
82
+ {
83
+ src: props.imageSrc,
84
+ alt: props.imageAlt ?? "",
85
+ onClick: () => {
86
+ }
87
+ }
88
+ ),
89
+ /* @__PURE__ */ jsxs("div", { className: action(), children: [
90
+ /* @__PURE__ */ jsx(
91
+ Toggle,
92
+ {
93
+ ariaLabel: "Comment",
94
+ labelText: nbrOfComments === 0 ? "Comment" : nbrOfComments === 1 ? "1 Comment" : `${nbrOfComments} Comments`,
95
+ pressed: nbrOfComments !== 0,
96
+ onToggle: props.onCommentClick
97
+ }
98
+ ),
99
+ /* @__PURE__ */ jsx(
100
+ LikeToggle,
101
+ {
102
+ pressed: props.likedBySelf ?? false,
103
+ likes: nbrOfLikes,
104
+ onLikeChange: props.onLikeClick
105
+ }
106
+ ),
107
+ /* @__PURE__ */ jsx(
108
+ TimedButton,
109
+ {
110
+ icon: Share,
111
+ label: "Copy Link",
112
+ labelActive: "Link copied",
113
+ onClick: props.onShareClick
114
+ }
115
+ )
116
+ ] })
117
+ ] })
118
+ ] });
124
119
  };
125
120
  export {
126
121
  Post
package/dist/compositions/user-info/UserInfo.d.ts CHANGED
@@ -62,7 +62,7 @@ interface UserInfoProps extends UserInfoVariants {
62
62
  /** Timestamp for the user activity */
63
63
  timestamp?: Date | null;
64
64
  /** Click handler for the whole UserInfo component */
65
- onClick: () => void;
65
+ onClick: (e: React.MouseEvent) => void;
66
66
  }
67
67
  /**
68
68
  * UserInfo Component
package/dist/compositions/user-info/UserInfo.d.ts.map CHANGED
@@ -1 +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;AAU1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAclB,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,GAAG,IAAI,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,YAAY,CAAC;IACnB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB,qDAAqD;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoCD;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuC5C,CAAC"}
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;AAU1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAclB,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,GAAG,IAAI,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,YAAY,CAAC;IACnB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB,qDAAqD;IACrD,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC;AAoCD;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuC5C,CAAC"}
package/dist/styles.css CHANGED
@@ -576,10 +576,6 @@
576
576
  width: calc(var(--spacing) * 40);
577
577
  }
578
578
 
579
- .w-123 {
580
- width: calc(var(--spacing) * 123);
581
- }
582
-
583
579
  .w-170 {
584
580
  width: calc(var(--spacing) * 170);
585
581
  }
@@ -588,6 +584,10 @@
588
584
  width: ` < spacing> ` ;
589
585
  }
590
586
 
587
+ .w-\[calc\(100\%-2rem\)\] {
588
+ width: calc(100% - 2rem);
589
+ }
590
+
591
591
  .w-auto {
592
592
  width: auto;
593
593
  }
@@ -600,6 +600,10 @@
600
600
  width: 100%;
601
601
  }
602
602
 
603
+ .max-w-123 {
604
+ max-width: calc(var(--spacing) * 123);
605
+ }
606
+
603
607
  .max-w-\[680px\] {
604
608
  max-width: 680px;
605
609
  }
@@ -616,7 +620,7 @@
616
620
  flex: 1;
617
621
  }
618
622
 
619
- .flex-shrink-0 {
623
+ .shrink-0 {
620
624
  flex-shrink: 0;
621
625
  }
622
626
 
@@ -716,8 +720,8 @@
716
720
  gap: calc(var(--spacing) * 6);
717
721
  }
718
722
 
719
- .gap-12 {
720
- gap: calc(var(--spacing) * 12);
723
+ .gap-8 {
724
+ gap: calc(var(--spacing) * 8);
721
725
  }
722
726
 
723
727
  .gap-16 {
@@ -1025,10 +1029,6 @@
1025
1029
  padding: calc(var(--spacing) * 4);
1026
1030
  }
1027
1031
 
1028
- .p-8 {
1029
- padding: calc(var(--spacing) * 8);
1030
- }
1031
-
1032
1032
  .p-10 {
1033
1033
  padding: calc(var(--spacing) * 10);
1034
1034
  }
@@ -1081,10 +1081,6 @@
1081
1081
  padding-right: calc(var(--spacing) * 6);
1082
1082
  }
1083
1083
 
1084
- .pr-8 {
1085
- padding-right: calc(var(--spacing) * 8);
1086
- }
1087
-
1088
1084
  .pr-10 {
1089
1085
  padding-right: calc(var(--spacing) * 10);
1090
1086
  }
@@ -1125,10 +1121,6 @@
1125
1121
  padding-left: calc(var(--spacing) * 6);
1126
1122
  }
1127
1123
 
1128
- .pl-8 {
1129
- padding-left: calc(var(--spacing) * 8);
1130
- }
1131
-
1132
1124
  .align-middle {
1133
1125
  vertical-align: middle;
1134
1126
  }
@@ -1748,6 +1740,30 @@
1748
1740
  .sm\:flex-row {
1749
1741
  flex-direction: row;
1750
1742
  }
1743
+
1744
+ .sm\:gap-12 {
1745
+ gap: calc(var(--spacing) * 12);
1746
+ }
1747
+
1748
+ .sm\:p-8 {
1749
+ padding: calc(var(--spacing) * 8);
1750
+ }
1751
+
1752
+ .sm\:pt-6 {
1753
+ padding-top: calc(var(--spacing) * 6);
1754
+ }
1755
+
1756
+ .sm\:pr-8 {
1757
+ padding-right: calc(var(--spacing) * 8);
1758
+ }
1759
+
1760
+ .sm\:pb-6 {
1761
+ padding-bottom: calc(var(--spacing) * 6);
1762
+ }
1763
+
1764
+ .sm\:pl-8 {
1765
+ padding-left: calc(var(--spacing) * 8);
1766
+ }
1751
1767
  }
1752
1768
 
1753
1769
  @media (min-width: 48rem) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@krrli/cm-designsystem",
3
3
  "repository": "https://github.com/ost-cas-fea-25-26/cm-designsystem",
4
- "version": "1.35.0",
4
+ "version": "1.35.2",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -96,9 +96,9 @@
96
96
  "eslint-plugin-react-refresh": "0.4.26",
97
97
  "eslint-plugin-storybook": "10.1.11",
98
98
  "eslint-plugin-unused-imports": "4.3.0",
99
- "globals": "16.5.0",
99
+ "globals": "17.0.0",
100
100
  "jsdom": "27.4.0",
101
- "knip": "5.78.0",
101
+ "knip": "5.80.0",
102
102
  "playwright": "1.57.0",
103
103
  "prettier": "3.7.4",
104
104
  "prettier-plugin-tailwindcss": "0.7.2",
@@ -108,7 +108,7 @@
108
108
  "tailwind-merge": "3.4.0",
109
109
  "tailwindcss": "4.1.18",
110
110
  "typescript": "5.9.3",
111
- "typescript-eslint": "8.51.0",
111
+ "typescript-eslint": "8.52.0",
112
112
  "vite": "7.3.0",
113
113
  "vite-plugin-dts": "4.5.4",
114
114
  "vite-plugin-svgr": "^4.5.0",