@krrli/cm-designsystem 1.36.0 → 1.36.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.
@@ -1 +1 @@
1
- {"version":3,"file":"ProfileBanner.d.ts","sourceRoot":"","sources":["../../../src/compositions/profile-banner/ProfileBanner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAS1D,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAOvB,CAAC;AAEH,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEtE,UAAU,kBAAmB,SAAQ,qBAAqB;IACxD,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAElB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,mCAAmC;IACnC,QAAQ,EAAE,MAAM,CAAC;IAEjB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,iCAAiC;IACjC,eAAe,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAE9B,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,sEAAsE;IACtE,aAAa,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmDtD,CAAC"}
1
+ {"version":3,"file":"ProfileBanner.d.ts","sourceRoot":"","sources":["../../../src/compositions/profile-banner/ProfileBanner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAS1D,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA2BvB,CAAC;AAEH,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEtE,UAAU,kBAAmB,SAAQ,qBAAqB;IACxD,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAElB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,mCAAmC;IACnC,QAAQ,EAAE,MAAM,CAAC;IAEjB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,iCAAiC;IACjC,eAAe,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAE9B,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,sEAAsE;IACtE,aAAa,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuDtD,CAAC"}
@@ -9,10 +9,30 @@ import { Avatar } from "../../components/avatar/Avatar.js";
9
9
  import { Paragraph } from "../../components/typography/Paragraph.js";
10
10
  const ProfileBannerStyles = tv({
11
11
  slots: {
12
- base: ["flex", "flex-col", "gap-6", "w-170", "relative"],
13
- avatar: ["absolute", "top-60", "right-6"],
14
- info: ["flex", "flex-col", "gap-3"],
15
- description: ["text-slate-500"]
12
+ base: [
13
+ "flex",
14
+ "flex-col",
15
+ "gap-4",
16
+ "w-full",
17
+ "max-w-[680px]",
18
+ "sm:min-w-[320px]",
19
+ "lg:min-w-[680px]",
20
+ "relative",
21
+ "px-2",
22
+ "sm:px-4",
23
+ "md:px-8"
24
+ ],
25
+ avatar: [
26
+ "absolute",
27
+ "top-28",
28
+ "md:top-52",
29
+ "md:right-12",
30
+ "right-2",
31
+ "sm:top-60",
32
+ "sm:right-6"
33
+ ],
34
+ info: ["flex", "flex-col", "gap-2", "sm:gap-3"],
35
+ description: ["text-slate-500", "text-sm", "sm:text-base"]
16
36
  }
17
37
  });
18
38
  const ProfileBanner = (props) => {
@@ -34,7 +54,7 @@ const ProfileBanner = (props) => {
34
54
  {
35
55
  src: props.avatarSrc,
36
56
  alt: props.avatarAlt,
37
- size: "xl",
57
+ size: typeof window !== "undefined" && window.innerWidth < 640 ? "md" : "xl",
38
58
  onActionClick: props.isCurrentUser ? () => avatarImageUploadModalRef.current?.openModal(true) : void 0
39
59
  }
40
60
  ) }),
@@ -1 +1 @@
1
- {"version":3,"file":"ProfileBannerInfo.d.ts","sourceRoot":"","sources":["../../../src/compositions/profile-banner-info/ProfileBannerInfo.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAe1D,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAS3B,CAAC;AAEH,KAAK,yBAAyB,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAE9E,UAAU,sBAAuB,SAAQ,yBAAyB;IAChE,sEAAsE;IACtE,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;;OAGG;IACH,eAAe,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAE9B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAwBD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsD9D,CAAC"}
1
+ {"version":3,"file":"ProfileBannerInfo.d.ts","sourceRoot":"","sources":["../../../src/compositions/profile-banner-info/ProfileBannerInfo.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAe1D,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAgB3B,CAAC;AAEH,KAAK,yBAAyB,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAE9E,UAAU,sBAAuB,SAAQ,yBAAyB;IAChE,sEAAsE;IACtE,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;;OAGG;IACH,eAAe,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAE9B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAwBD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsD9D,CAAC"}
@@ -14,7 +14,14 @@ const profileBannerInfoStyles = tv({
14
14
  title: ["flex", "gap-1", "items-center", "**:cursor-pointer"],
15
15
  icon: ["text-violet-600", "-mt-0.5"],
16
16
  name: ["text-slate-900"],
17
- detailInfo: ["flex", "gap-4"],
17
+ detailInfo: [
18
+ "flex",
19
+ "flex-col",
20
+ "gap-2",
21
+ "sm:flex-row",
22
+ "sm:gap-4",
23
+ "py-2"
24
+ ],
18
25
  secondaryInfo: ["text-slate-500"]
19
26
  }
20
27
  });
package/dist/styles.css CHANGED
@@ -394,8 +394,8 @@
394
394
  top: calc(var(--spacing) * 6);
395
395
  }
396
396
 
397
- .top-60 {
398
- top: calc(var(--spacing) * 60);
397
+ .top-28 {
398
+ top: calc(var(--spacing) * 28);
399
399
  }
400
400
 
401
401
  .right-2 {
@@ -406,10 +406,6 @@
406
406
  right: calc(var(--spacing) * 4);
407
407
  }
408
408
 
409
- .right-6 {
410
- right: calc(var(--spacing) * 6);
411
- }
412
-
413
409
  .bottom-2 {
414
410
  bottom: calc(var(--spacing) * 2);
415
411
  }
@@ -576,10 +572,6 @@
576
572
  width: calc(var(--spacing) * 40);
577
573
  }
578
574
 
579
- .w-170 {
580
- width: calc(var(--spacing) * 170);
581
- }
582
-
583
575
  .w-\[\`\<spacing\>\`\] {
584
576
  width: ` < spacing> ` ;
585
577
  }
@@ -716,10 +708,6 @@
716
708
  gap: calc(var(--spacing) * 5);
717
709
  }
718
710
 
719
- .gap-6 {
720
- gap: calc(var(--spacing) * 6);
721
- }
722
-
723
711
  .gap-8 {
724
712
  gap: calc(var(--spacing) * 8);
725
713
  }
@@ -1725,6 +1713,14 @@
1725
1713
  }
1726
1714
 
1727
1715
  @media (min-width: 40rem) {
1716
+ .sm\:top-60 {
1717
+ top: calc(var(--spacing) * 60);
1718
+ }
1719
+
1720
+ .sm\:right-6 {
1721
+ right: calc(var(--spacing) * 6);
1722
+ }
1723
+
1728
1724
  .sm\:block {
1729
1725
  display: block;
1730
1726
  }
@@ -1741,6 +1737,14 @@
1741
1737
  flex-direction: row;
1742
1738
  }
1743
1739
 
1740
+ .sm\:gap-3 {
1741
+ gap: calc(var(--spacing) * 3);
1742
+ }
1743
+
1744
+ .sm\:gap-4 {
1745
+ gap: calc(var(--spacing) * 4);
1746
+ }
1747
+
1744
1748
  .sm\:gap-12 {
1745
1749
  gap: calc(var(--spacing) * 12);
1746
1750
  }
@@ -1749,6 +1753,10 @@
1749
1753
  padding: calc(var(--spacing) * 8);
1750
1754
  }
1751
1755
 
1756
+ .sm\:px-4 {
1757
+ padding-inline: calc(var(--spacing) * 4);
1758
+ }
1759
+
1752
1760
  .sm\:pt-6 {
1753
1761
  padding-top: calc(var(--spacing) * 6);
1754
1762
  }
@@ -1779,6 +1787,14 @@
1779
1787
  top: calc(var(--spacing) * 6);
1780
1788
  }
1781
1789
 
1790
+ .md\:top-52 {
1791
+ top: calc(var(--spacing) * 52);
1792
+ }
1793
+
1794
+ .md\:right-12 {
1795
+ right: calc(var(--spacing) * 12);
1796
+ }
1797
+
1782
1798
  .md\:-left-8 {
1783
1799
  left: calc(var(--spacing) * -8);
1784
1800
  }
@@ -1819,6 +1835,10 @@
1819
1835
  padding-inline: calc(var(--spacing) * 3);
1820
1836
  }
1821
1837
 
1838
+ .md\:px-8 {
1839
+ padding-inline: calc(var(--spacing) * 8);
1840
+ }
1841
+
1822
1842
  .md\:pt-8 {
1823
1843
  padding-top: calc(var(--spacing) * 8);
1824
1844
  }
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.36.0",
4
+ "version": "1.36.1",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -109,7 +109,7 @@
109
109
  "tailwindcss": "4.1.18",
110
110
  "typescript": "5.9.3",
111
111
  "typescript-eslint": "8.52.0",
112
- "vite": "7.3.0",
112
+ "vite": "7.3.1",
113
113
  "vite-plugin-dts": "4.5.4",
114
114
  "vite-plugin-svgr": "^4.5.0",
115
115
  "vitest": "4.0.16"