@krrli/cm-designsystem 1.37.2 → 1.37.4

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 (8) hide show
  1. package/dist/components/form/Form.js +1 -1
  2. package/dist/compositions/profile-banner/ProfileBanner.d.ts +6 -0
  3. package/dist/compositions/profile-banner/ProfileBanner.d.ts.map +1 -1
  4. package/dist/compositions/profile-banner/ProfileBanner.js +24 -32
  5. package/dist/compositions/profile-banner-image/ProfileBannerImage.d.ts +1 -1
  6. package/dist/compositions/profile-banner-image/ProfileBannerImage.js +1 -1
  7. package/dist/styles.css +17 -32
  8. package/package.json +1 -1
package/dist/components/form/Form.js CHANGED
@@ -3,7 +3,7 @@ import * as RadixForm from "@radix-ui/react-form";
3
3
  import { tv } from "tailwind-variants";
4
4
  const formStyles = tv({
5
5
  slots: {
6
- base: ["gap-16", "flex", "flex-col"],
6
+ base: ["gap-16", "flex", "flex-col", "w-full"],
7
7
  fields: ["gap-4", "flex", "flex-col"]
8
8
  }
9
9
  });
package/dist/compositions/profile-banner/ProfileBanner.d.ts CHANGED
@@ -4,6 +4,7 @@ declare const ProfileBannerStyles: import('tailwind-variants').TVReturnType<{
4
4
  [key: string]: import('tailwind-merge').ClassNameValue | {
5
5
  base?: import('tailwind-merge').ClassNameValue;
6
6
  avatar?: import('tailwind-merge').ClassNameValue;
7
+ bannerAvatarContainer?: import('tailwind-merge').ClassNameValue;
7
8
  info?: import('tailwind-merge').ClassNameValue;
8
9
  description?: import('tailwind-merge').ClassNameValue;
9
10
  };
@@ -13,12 +14,14 @@ declare const ProfileBannerStyles: import('tailwind-variants').TVReturnType<{
13
14
  [x: string]: import('tailwind-merge').ClassNameValue | {
14
15
  base?: import('tailwind-merge').ClassNameValue;
15
16
  avatar?: import('tailwind-merge').ClassNameValue;
17
+ bannerAvatarContainer?: import('tailwind-merge').ClassNameValue;
16
18
  info?: import('tailwind-merge').ClassNameValue;
17
19
  description?: import('tailwind-merge').ClassNameValue;
18
20
  };
19
21
  };
20
22
  } | {}, {
21
23
  base: string[];
24
+ bannerAvatarContainer: string[];
22
25
  avatar: string[];
23
26
  info: string[];
24
27
  description: string[];
@@ -27,17 +30,20 @@ declare const ProfileBannerStyles: import('tailwind-variants').TVReturnType<{
27
30
  [key: string]: import('tailwind-merge').ClassNameValue | {
28
31
  base?: import('tailwind-merge').ClassNameValue;
29
32
  avatar?: import('tailwind-merge').ClassNameValue;
33
+ bannerAvatarContainer?: import('tailwind-merge').ClassNameValue;
30
34
  info?: import('tailwind-merge').ClassNameValue;
31
35
  description?: import('tailwind-merge').ClassNameValue;
32
36
  };
33
37
  };
34
38
  } | {}, {
35
39
  base: string[];
40
+ bannerAvatarContainer: string[];
36
41
  avatar: string[];
37
42
  info: string[];
38
43
  description: string[];
39
44
  }, import('tailwind-variants').TVReturnType<unknown, {
40
45
  base: string[];
46
+ bannerAvatarContainer: string[];
41
47
  avatar: string[];
42
48
  info: string[];
43
49
  description: string[];
package/dist/compositions/profile-banner/ProfileBanner.d.ts.map CHANGED
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA0BvB,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"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAgBvB,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,CA0DtD,CAAC"}
package/dist/compositions/profile-banner/ProfileBanner.js CHANGED
@@ -14,49 +14,41 @@ const ProfileBannerStyles = tv({
14
14
  "flex-col",
15
15
  "gap-4",
16
16
  "w-full",
17
- "max-w-[680px]",
18
- "w-full",
19
17
  "relative",
20
- "px-2",
21
- "sm:px-4",
22
- "md:px-8"
23
- ],
24
- avatar: [
25
- "absolute",
26
- "top-28",
27
- "md:top-52",
28
- "md:right-12",
29
- "right-2",
30
- "sm:top-60",
31
- "sm:right-6"
18
+ "aspect-[17/8]",
19
+ "px-2"
32
20
  ],
21
+ bannerAvatarContainer: ["relative", "w-full", "h-full"],
22
+ avatar: ["absolute", "bottom-0", "right-4", "translate-y-1/2", "md:mr-4"],
33
23
  info: ["flex", "flex-col", "gap-2", "sm:gap-3"],
34
24
  description: ["text-slate-500", "text-sm", "sm:text-base"]
35
25
  }
36
26
  });
37
27
  const ProfileBanner = (props) => {
38
- const { base, avatar, info, description } = ProfileBannerStyles(props);
28
+ const { base, bannerAvatarContainer, avatar, info, description } = ProfileBannerStyles(props);
39
29
  const profileImageUploadModalRef = useRef(null);
40
30
  const avatarImageUploadModalRef = useRef(null);
41
31
  return /* @__PURE__ */ jsxs(Fragment, { children: [
42
32
  /* @__PURE__ */ jsxs("div", { className: base(), children: [
43
- /* @__PURE__ */ jsx(
44
- ProfileBannerImage,
45
- {
46
- src: props.imageSrc,
47
- alt: props.imageAlt,
48
- onClick: () => profileImageUploadModalRef.current?.openModal(true)
49
- }
50
- ),
51
- /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
52
- Avatar,
53
- {
54
- src: props.avatarSrc,
55
- alt: props.avatarAlt,
56
- size: typeof window !== "undefined" && window.innerWidth < 640 ? "md" : "xl",
57
- onActionClick: props.isCurrentUser ? () => avatarImageUploadModalRef.current?.openModal(true) : void 0
58
- }
59
- ) }),
33
+ /* @__PURE__ */ jsxs("div", { className: bannerAvatarContainer(), children: [
34
+ /* @__PURE__ */ jsx(
35
+ ProfileBannerImage,
36
+ {
37
+ src: props.imageSrc,
38
+ alt: props.imageAlt,
39
+ onClick: () => profileImageUploadModalRef.current?.openModal(true)
40
+ }
41
+ ),
42
+ /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
43
+ Avatar,
44
+ {
45
+ src: props.avatarSrc,
46
+ alt: props.avatarAlt,
47
+ size: typeof window !== "undefined" && window.innerWidth < 640 ? "md" : "xl",
48
+ onActionClick: props.isCurrentUser ? () => avatarImageUploadModalRef.current?.openModal(true) : void 0
49
+ }
50
+ ) })
51
+ ] }),
60
52
  /* @__PURE__ */ jsxs("div", { className: info(), children: [
61
53
  /* @__PURE__ */ jsx(
62
54
  ProfileBannerInfo,
package/dist/compositions/profile-banner-image/ProfileBannerImage.d.ts CHANGED
@@ -35,7 +35,7 @@ declare const ProfileBannerImageStyles: import('tailwind-variants').TVReturnType
35
35
  }, undefined, unknown, unknown, undefined>>;
36
36
  type ProfileBannerImageVariants = VariantProps<typeof ProfileBannerImageStyles>;
37
37
  interface ProfileBannerImageProps extends ProfileBannerImageVariants {
38
- /** Avatar image URL */
38
+ /** Banner image URL */
39
39
  src?: string | null;
40
40
  /**
41
41
  * Alternative text for the image, used for accessibility.
package/dist/compositions/profile-banner-image/ProfileBannerImage.js CHANGED
@@ -6,7 +6,7 @@ import { tv, cn } from "tailwind-variants";
6
6
  import { Edit } from "../../components/icons/generated/Edit.js";
7
7
  const ProfileBannerImageStyles = tv({
8
8
  slots: {
9
- base: ["w-full", "max-w-[680px]", "sm:min-w-[320px]", "lg:min-w-[680px]"],
9
+ base: ["w-full", "sm:min-w-[320px]", "lg:min-w-[680px]"],
10
10
  image: [
11
11
  "h-full",
12
12
  "w-full",
package/dist/styles.css CHANGED
@@ -394,10 +394,6 @@
394
394
  top: calc(var(--spacing) * 6);
395
395
  }
396
396
 
397
- .top-28 {
398
- top: calc(var(--spacing) * 28);
399
- }
400
-
401
397
  .right-2 {
402
398
  right: calc(var(--spacing) * 2);
403
399
  }
@@ -406,6 +402,10 @@
406
402
  right: calc(var(--spacing) * 4);
407
403
  }
408
404
 
405
+ .bottom-0 {
406
+ bottom: calc(var(--spacing) * 0);
407
+ }
408
+
409
409
  .bottom-2 {
410
410
  bottom: calc(var(--spacing) * 2);
411
411
  }
@@ -492,6 +492,10 @@
492
492
  display: inline-flex;
493
493
  }
494
494
 
495
+ .aspect-\[17\/8\] {
496
+ aspect-ratio: 17 / 8;
497
+ }
498
+
495
499
  .h-3 {
496
500
  height: calc(var(--spacing) * 3);
497
501
  }
@@ -588,10 +592,6 @@
588
592
  max-width: calc(var(--spacing) * 123);
589
593
  }
590
594
 
591
- .max-w-\[680px\] {
592
- max-width: 680px;
593
- }
594
-
595
595
  .min-w-0 {
596
596
  min-width: calc(var(--spacing) * 0);
597
597
  }
@@ -628,6 +628,11 @@
628
628
  translate: var(--tw-translate-x) var(--tw-translate-y);
629
629
  }
630
630
 
631
+ .translate-y-1\/2 {
632
+ --tw-translate-y: calc(1 / 2 * 100%);
633
+ translate: var(--tw-translate-x) var(--tw-translate-y);
634
+ }
635
+
631
636
  .rotate-15 {
632
637
  rotate: 15deg;
633
638
  }
@@ -1700,14 +1705,6 @@
1700
1705
  }
1701
1706
 
1702
1707
  @media (min-width: 40rem) {
1703
- .sm\:top-60 {
1704
- top: calc(var(--spacing) * 60);
1705
- }
1706
-
1707
- .sm\:right-6 {
1708
- right: calc(var(--spacing) * 6);
1709
- }
1710
-
1711
1708
  .sm\:block {
1712
1709
  display: block;
1713
1710
  }
@@ -1740,10 +1737,6 @@
1740
1737
  padding: calc(var(--spacing) * 8);
1741
1738
  }
1742
1739
 
1743
- .sm\:px-4 {
1744
- padding-inline: calc(var(--spacing) * 4);
1745
- }
1746
-
1747
1740
  .sm\:pt-6 {
1748
1741
  padding-top: calc(var(--spacing) * 6);
1749
1742
  }
@@ -1774,18 +1767,14 @@
1774
1767
  top: calc(var(--spacing) * 6);
1775
1768
  }
1776
1769
 
1777
- .md\:top-52 {
1778
- top: calc(var(--spacing) * 52);
1779
- }
1780
-
1781
- .md\:right-12 {
1782
- right: calc(var(--spacing) * 12);
1783
- }
1784
-
1785
1770
  .md\:-left-8 {
1786
1771
  left: calc(var(--spacing) * -8);
1787
1772
  }
1788
1773
 
1774
+ .md\:mr-4 {
1775
+ margin-right: calc(var(--spacing) * 4);
1776
+ }
1777
+
1789
1778
  .md\:inline {
1790
1779
  display: inline;
1791
1780
  }
@@ -1822,10 +1811,6 @@
1822
1811
  padding-inline: calc(var(--spacing) * 3);
1823
1812
  }
1824
1813
 
1825
- .md\:px-8 {
1826
- padding-inline: calc(var(--spacing) * 8);
1827
- }
1828
-
1829
1814
  .md\:pt-8 {
1830
1815
  padding-top: calc(var(--spacing) * 8);
1831
1816
  }
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.37.2",
4
+ "version": "1.37.4",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",