@krrli/cm-designsystem 1.32.1 → 1.32.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.
- package/dist/assets/fallback.png.js +4 -0
- package/dist/cm-designsystem.css +1944 -1
- package/dist/components/accessible-button/AccessibleButton.js +29 -11
- package/dist/components/avatar/Avatar.js +91 -65
- package/dist/components/branding/BrandingGallery.js +212 -145
- package/dist/components/branding/app-icon-gradient.svg.js +4 -0
- package/dist/components/branding/app-icon-white.svg.js +4 -0
- package/dist/components/branding/hover-logo-default.svg.js +4 -0
- package/dist/components/branding/hover-logo-hovered.svg.js +4 -0
- package/dist/components/branding/logo-inline-gradient.svg.js +4 -0
- package/dist/components/branding/logo-inline-violet.svg.js +4 -0
- package/dist/components/branding/logo-inline-white.svg.js +4 -0
- package/dist/components/branding/logo-stacked-gradient.svg.js +4 -0
- package/dist/components/branding/logo-stacked-violet.svg.js +4 -0
- package/dist/components/branding/logo-stacked-white.svg.js +4 -0
- package/dist/components/branding/superzeichen.svg.js +4 -0
- package/dist/components/button/Button.js +61 -55
- package/dist/components/color/ColorDoc.js +26 -7
- package/dist/components/file-upload/FileUpload.js +129 -66
- package/dist/components/form/Form.js +33 -26
- package/dist/components/icon-button/IconButton.js +33 -29
- package/dist/components/icons/IconBase.js +21 -6
- package/dist/components/icons/generated/ArrowDown.js +15 -4
- package/dist/components/icons/generated/ArrowLeft.js +15 -4
- package/dist/components/icons/generated/ArrowRight.js +15 -4
- package/dist/components/icons/generated/ArrowUp.js +15 -4
- package/dist/components/icons/generated/Calendar.js +15 -4
- package/dist/components/icons/generated/Cancel.js +12 -4
- package/dist/components/icons/generated/Checkmark.js +12 -4
- package/dist/components/icons/generated/Edit.js +9 -4
- package/dist/components/icons/generated/Eye.js +15 -4
- package/dist/components/icons/generated/Fullscreen.js +9 -4
- package/dist/components/icons/generated/HeartFilled.js +15 -4
- package/dist/components/icons/generated/HeartOutline.js +15 -4
- package/dist/components/icons/generated/Location.js +15 -4
- package/dist/components/icons/generated/LogOut.js +12 -4
- package/dist/components/icons/generated/Mumble.js +13 -4
- package/dist/components/icons/generated/Profile.js +12 -4
- package/dist/components/icons/generated/ReplyFilled.js +15 -4
- package/dist/components/icons/generated/ReplyOutline.js +15 -4
- package/dist/components/icons/generated/Repost.js +15 -4
- package/dist/components/icons/generated/Send.js +15 -4
- package/dist/components/icons/generated/Settings.js +15 -4
- package/dist/components/icons/generated/Share.js +12 -4
- package/dist/components/icons/generated/Time.js +12 -4
- package/dist/components/icons/generated/Upload.js +21 -4
- package/dist/components/input/Input.js +67 -41
- package/dist/components/like-toggle/LikeToggle.js +203 -176
- package/dist/components/logo-link/LogoLink.js +56 -34
- package/dist/components/modal/Modal.js +66 -50
- package/dist/components/navi-button/NaviButton.js +42 -30
- package/dist/components/navi-user-button/NaviUserButton.js +39 -29
- package/dist/components/round-button/RoundButton.js +39 -29
- package/dist/components/tabs/TabItem.js +11 -8
- package/dist/components/tabs/Tabs.js +74 -59
- package/dist/components/text-link/TextLink.js +14 -11
- package/dist/components/textarea/Textarea.js +57 -41
- package/dist/components/timed-button/TimedButton.js +116 -102
- package/dist/components/toggle/Toggle.js +91 -62
- package/dist/components/typography/AccessibleTypography.js +12 -9
- package/dist/components/typography/Heading.js +13 -9
- package/dist/components/typography/Label.js +13 -9
- package/dist/components/typography/Paragraph.js +13 -9
- package/dist/components/typography/Placeholder.js +13 -9
- package/dist/components/typography/ValidationMessage.js +14 -9
- package/dist/components/typography/styles.js +53 -46
- package/dist/compositions/image-banner/ImageBanner.js +53 -45
- package/dist/compositions/image-upload-modal/ImageUploadModal.js +44 -20
- package/dist/compositions/post/Post.js +81 -26
- package/dist/compositions/post-base/PostBase.js +23 -24
- package/dist/compositions/post-creator/PostCreator.js +72 -24
- package/dist/compositions/profile-banner/ProfileBanner.js +71 -21
- package/dist/compositions/profile-banner-image/ProfileBannerImage.js +60 -52
- package/dist/compositions/profile-banner-info/ProfileBannerInfo.js +72 -40
- package/dist/compositions/response/Response.js +63 -19
- package/dist/compositions/response-creator/ResponseCreator.js +67 -23
- package/dist/compositions/user-info/UserInfo.js +71 -52
- package/dist/compositions/user-recommendation/UserRecommendation.js +58 -30
- package/dist/index.js +129 -4
- package/package.json +14 -12
- package/dist/components/accessible-button/AccessibleButton.d.ts +0 -32
- package/dist/components/accessible-button/AccessibleButton.test.d.ts +0 -1
- package/dist/components/accessible-button/AccessibleButton.test.js +0 -28
- package/dist/components/avatar/Avatar.d.ts +0 -118
- package/dist/components/branding/BrandingGallery.d.ts +0 -1
- package/dist/components/button/Button.d.ts +0 -66
- package/dist/components/button/Button.test.d.ts +0 -1
- package/dist/components/button/Button.test.js +0 -30
- package/dist/components/color/ColorDoc.d.ts +0 -4
- package/dist/components/file-upload/FileUpload.d.ts +0 -83
- package/dist/components/form/Form.d.ts +0 -54
- package/dist/components/icon-button/IconButton.d.ts +0 -69
- package/dist/components/icon-button/IconButton.test.d.ts +0 -1
- package/dist/components/icon-button/IconButton.test.js +0 -22
- package/dist/components/icons/IconBase.d.ts +0 -5
- package/dist/components/icons/generated/ArrowDown.d.ts +0 -3
- package/dist/components/icons/generated/ArrowLeft.d.ts +0 -3
- package/dist/components/icons/generated/ArrowRight.d.ts +0 -3
- package/dist/components/icons/generated/ArrowUp.d.ts +0 -3
- package/dist/components/icons/generated/Calendar.d.ts +0 -3
- package/dist/components/icons/generated/Cancel.d.ts +0 -3
- package/dist/components/icons/generated/Checkmark.d.ts +0 -3
- package/dist/components/icons/generated/Edit.d.ts +0 -3
- package/dist/components/icons/generated/Eye.d.ts +0 -3
- package/dist/components/icons/generated/Fullscreen.d.ts +0 -3
- package/dist/components/icons/generated/HeartFilled.d.ts +0 -3
- package/dist/components/icons/generated/HeartOutline.d.ts +0 -3
- package/dist/components/icons/generated/Location.d.ts +0 -3
- package/dist/components/icons/generated/LogOut.d.ts +0 -3
- package/dist/components/icons/generated/Mumble.d.ts +0 -3
- package/dist/components/icons/generated/Profile.d.ts +0 -3
- package/dist/components/icons/generated/ReplyFilled.d.ts +0 -3
- package/dist/components/icons/generated/ReplyOutline.d.ts +0 -3
- package/dist/components/icons/generated/Repost.d.ts +0 -3
- package/dist/components/icons/generated/Send.d.ts +0 -3
- package/dist/components/icons/generated/Settings.d.ts +0 -3
- package/dist/components/icons/generated/Share.d.ts +0 -3
- package/dist/components/icons/generated/Time.d.ts +0 -3
- package/dist/components/icons/generated/Upload.d.ts +0 -3
- package/dist/components/icons/generated/index.d.ts +0 -24
- package/dist/components/icons/generated/index.js +0 -24
- package/dist/components/index.d.ts +0 -27
- package/dist/components/index.js +0 -27
- package/dist/components/input/Input.d.ts +0 -61
- package/dist/components/like-toggle/LikeToggle.d.ts +0 -97
- package/dist/components/like-toggle/LikeToggle.test.d.ts +0 -1
- package/dist/components/like-toggle/LikeToggle.test.js +0 -35
- package/dist/components/logo-link/LogoLink.d.ts +0 -11
- package/dist/components/modal/Modal.d.ts +0 -75
- package/dist/components/modal/Modal.test.d.ts +0 -1
- package/dist/components/modal/Modal.test.js +0 -24
- package/dist/components/navi-button/NaviButton.d.ts +0 -49
- package/dist/components/navi-button/NaviButton.test.d.ts +0 -1
- package/dist/components/navi-button/NaviButton.test.js +0 -22
- package/dist/components/navi-user-button/NaviUserButton.d.ts +0 -44
- package/dist/components/round-button/RoundButton.d.ts +0 -44
- package/dist/components/round-button/RoundButton.test.d.ts +0 -1
- package/dist/components/round-button/RoundButton.test.js +0 -22
- package/dist/components/tabs/TabItem.d.ts +0 -11
- package/dist/components/tabs/Tabs.d.ts +0 -67
- package/dist/components/tabs/Tabs.test.d.ts +0 -1
- package/dist/components/tabs/Tabs.test.js +0 -61
- package/dist/components/text-link/TextLink.d.ts +0 -9
- package/dist/components/text-link/TextLink.test.d.ts +0 -1
- package/dist/components/text-link/TextLink.test.js +0 -14
- package/dist/components/textarea/Textarea.d.ts +0 -48
- package/dist/components/timed-button/TimedButton.d.ts +0 -79
- package/dist/components/timed-button/TimedButton.test.d.ts +0 -1
- package/dist/components/timed-button/TimedButton.test.js +0 -36
- package/dist/components/toggle/Toggle.d.ts +0 -62
- package/dist/components/toggle/Toggle.test.d.ts +0 -1
- package/dist/components/toggle/Toggle.test.js +0 -93
- package/dist/components/typography/AccessibleTypography.d.ts +0 -33
- package/dist/components/typography/Heading.d.ts +0 -24
- package/dist/components/typography/Label.d.ts +0 -22
- package/dist/components/typography/Paragraph.d.ts +0 -22
- package/dist/components/typography/Placeholder.d.ts +0 -17
- package/dist/components/typography/ValidationMessage.d.ts +0 -22
- package/dist/components/typography/styles.d.ts +0 -74
- package/dist/compositions/image-banner/ImageBanner.d.ts +0 -54
- package/dist/compositions/image-upload-modal/ImageUploadModal.d.ts +0 -15
- package/dist/compositions/index.d.ts +0 -11
- package/dist/compositions/index.js +0 -11
- package/dist/compositions/post/Post.d.ts +0 -75
- package/dist/compositions/post-base/PostBase.d.ts +0 -41
- package/dist/compositions/post-creator/PostCreator.d.ts +0 -69
- package/dist/compositions/profile-banner/ProfileBanner.d.ts +0 -82
- package/dist/compositions/profile-banner-image/ProfileBannerImage.d.ts +0 -54
- package/dist/compositions/profile-banner-info/ProfileBannerInfo.d.ts +0 -92
- package/dist/compositions/response/Response.d.ts +0 -75
- package/dist/compositions/response-creator/ResponseCreator.d.ts +0 -63
- package/dist/compositions/user-info/UserInfo.d.ts +0 -75
- package/dist/compositions/user-recommendation/UserRecommendation.d.ts +0 -63
- package/dist/favicon.svg +0 -18
- package/dist/index.cjs.js +0 -50
- package/dist/index.d.ts +0 -3
- package/dist/index.es.js +0 -8343
- package/dist/logo-inline-gradient.svg +0 -43
- package/dist/setupTests.d.ts +0 -1
- package/dist/setupTests.js +0 -7
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import { type VariantProps } from "tailwind-variants";
|
|
2
|
-
declare const ProfileBannerStyles: import("tailwind-variants").TVReturnType<{
|
|
3
|
-
[key: string]: {
|
|
4
|
-
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
5
|
-
base?: import("tailwind-merge").ClassNameValue;
|
|
6
|
-
avatar?: import("tailwind-merge").ClassNameValue;
|
|
7
|
-
info?: import("tailwind-merge").ClassNameValue;
|
|
8
|
-
description?: import("tailwind-merge").ClassNameValue;
|
|
9
|
-
};
|
|
10
|
-
};
|
|
11
|
-
} | {
|
|
12
|
-
[x: string]: {
|
|
13
|
-
[x: string]: import("tailwind-merge").ClassNameValue | {
|
|
14
|
-
base?: import("tailwind-merge").ClassNameValue;
|
|
15
|
-
avatar?: import("tailwind-merge").ClassNameValue;
|
|
16
|
-
info?: import("tailwind-merge").ClassNameValue;
|
|
17
|
-
description?: import("tailwind-merge").ClassNameValue;
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
} | {}, {
|
|
21
|
-
base: string[];
|
|
22
|
-
avatar: string[];
|
|
23
|
-
info: string[];
|
|
24
|
-
description: string[];
|
|
25
|
-
}, undefined, {
|
|
26
|
-
[key: string]: {
|
|
27
|
-
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
28
|
-
base?: import("tailwind-merge").ClassNameValue;
|
|
29
|
-
avatar?: import("tailwind-merge").ClassNameValue;
|
|
30
|
-
info?: import("tailwind-merge").ClassNameValue;
|
|
31
|
-
description?: import("tailwind-merge").ClassNameValue;
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
} | {}, {
|
|
35
|
-
base: string[];
|
|
36
|
-
avatar: string[];
|
|
37
|
-
info: string[];
|
|
38
|
-
description: string[];
|
|
39
|
-
}, import("tailwind-variants").TVReturnType<unknown, {
|
|
40
|
-
base: string[];
|
|
41
|
-
avatar: string[];
|
|
42
|
-
info: string[];
|
|
43
|
-
description: string[];
|
|
44
|
-
}, undefined, unknown, unknown, undefined>>;
|
|
45
|
-
type ProfileBannerVariants = VariantProps<typeof ProfileBannerStyles>;
|
|
46
|
-
interface ProfileBannerProps extends ProfileBannerVariants {
|
|
47
|
-
/** URL of the user's avatar image. */
|
|
48
|
-
avatarSrc: string;
|
|
49
|
-
/** Alt text for the avatar image. */
|
|
50
|
-
avatarAlt: string;
|
|
51
|
-
/** URL of the profile banner or main image. */
|
|
52
|
-
imageSrc: string;
|
|
53
|
-
/** Alt text for the main image. */
|
|
54
|
-
imageAlt: string;
|
|
55
|
-
/** The user's display name. */
|
|
56
|
-
displayName: string;
|
|
57
|
-
/** The user’s username/handle. */
|
|
58
|
-
userName: string;
|
|
59
|
-
/** The user’s location string. */
|
|
60
|
-
location: string;
|
|
61
|
-
/** Date when the user joined. */
|
|
62
|
-
joinedTimestamp: Date;
|
|
63
|
-
/** Bio or profile description text. */
|
|
64
|
-
description: string;
|
|
65
|
-
/** Whether the profile being viewed belongs to the logged-in user. */
|
|
66
|
-
isCurrentUser: boolean;
|
|
67
|
-
/**
|
|
68
|
-
* Optional callback triggered when the profile/banner image changes.
|
|
69
|
-
* Receives the selected `File`, or `null` if cleared.
|
|
70
|
-
*/
|
|
71
|
-
onProfileImageChange?: (file: File | null) => void;
|
|
72
|
-
/**
|
|
73
|
-
* Optional callback triggered when the avatar image changes.
|
|
74
|
-
* Receives the selected `File`, or `null` if cleared.
|
|
75
|
-
*/
|
|
76
|
-
onAvatarImageChange?: (file: File | null) => void;
|
|
77
|
-
}
|
|
78
|
-
/**
|
|
79
|
-
* Profile banner component for displaying user profile info.
|
|
80
|
-
*/
|
|
81
|
-
export declare const ProfileBanner: React.FC<ProfileBannerProps>;
|
|
82
|
-
export {};
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { type VariantProps } from "tailwind-variants";
|
|
2
|
-
declare const ProfileBannerImageStyles: import("tailwind-variants").TVReturnType<{
|
|
3
|
-
isFallback: {
|
|
4
|
-
true: {
|
|
5
|
-
image: string[];
|
|
6
|
-
};
|
|
7
|
-
};
|
|
8
|
-
}, {
|
|
9
|
-
base: string[];
|
|
10
|
-
image: string[];
|
|
11
|
-
overlay: string[];
|
|
12
|
-
icon: string[];
|
|
13
|
-
}, undefined, {
|
|
14
|
-
isFallback: {
|
|
15
|
-
true: {
|
|
16
|
-
image: string[];
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
}, {
|
|
20
|
-
base: string[];
|
|
21
|
-
image: string[];
|
|
22
|
-
overlay: string[];
|
|
23
|
-
icon: string[];
|
|
24
|
-
}, import("tailwind-variants").TVReturnType<{
|
|
25
|
-
isFallback: {
|
|
26
|
-
true: {
|
|
27
|
-
image: string[];
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
}, {
|
|
31
|
-
base: string[];
|
|
32
|
-
image: string[];
|
|
33
|
-
overlay: string[];
|
|
34
|
-
icon: string[];
|
|
35
|
-
}, undefined, unknown, unknown, undefined>>;
|
|
36
|
-
type ProfileBannerImageVariants = VariantProps<typeof ProfileBannerImageStyles>;
|
|
37
|
-
interface ProfileBannerImageProps extends ProfileBannerImageVariants {
|
|
38
|
-
/** Avatar image URL */
|
|
39
|
-
src: string;
|
|
40
|
-
/**
|
|
41
|
-
* Alternative text for the image, used for accessibility.
|
|
42
|
-
*/
|
|
43
|
-
alt: string;
|
|
44
|
-
/** Click handler for the whole ProfileBannerImage component */
|
|
45
|
-
onClick: () => void;
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* ProfileBannerImage component
|
|
49
|
-
*
|
|
50
|
-
* Displays a banner image with a fixed aspect ratio (17:8) and an optional overlay icon.
|
|
51
|
-
* If the image fails to load, a fallback element is displayed instead.
|
|
52
|
-
*/
|
|
53
|
-
export declare const ProfileBannerImage: React.FC<ProfileBannerImageProps>;
|
|
54
|
-
export {};
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import { type VariantProps } from "tailwind-variants";
|
|
2
|
-
declare const profileBannerInfoStyles: 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
|
-
title?: import("tailwind-merge").ClassNameValue;
|
|
8
|
-
icon?: import("tailwind-merge").ClassNameValue;
|
|
9
|
-
detailInfo?: import("tailwind-merge").ClassNameValue;
|
|
10
|
-
secondaryInfo?: import("tailwind-merge").ClassNameValue;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
} | {
|
|
14
|
-
[x: string]: {
|
|
15
|
-
[x: string]: import("tailwind-merge").ClassNameValue | {
|
|
16
|
-
displayName?: import("tailwind-merge").ClassNameValue;
|
|
17
|
-
base?: import("tailwind-merge").ClassNameValue;
|
|
18
|
-
title?: import("tailwind-merge").ClassNameValue;
|
|
19
|
-
icon?: import("tailwind-merge").ClassNameValue;
|
|
20
|
-
detailInfo?: import("tailwind-merge").ClassNameValue;
|
|
21
|
-
secondaryInfo?: import("tailwind-merge").ClassNameValue;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
} | {}, {
|
|
25
|
-
base: string[];
|
|
26
|
-
title: string[];
|
|
27
|
-
icon: string[];
|
|
28
|
-
displayName: string[];
|
|
29
|
-
detailInfo: string[];
|
|
30
|
-
secondaryInfo: string[];
|
|
31
|
-
}, undefined, {
|
|
32
|
-
[key: string]: {
|
|
33
|
-
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
34
|
-
displayName?: import("tailwind-merge").ClassNameValue;
|
|
35
|
-
base?: import("tailwind-merge").ClassNameValue;
|
|
36
|
-
title?: import("tailwind-merge").ClassNameValue;
|
|
37
|
-
icon?: import("tailwind-merge").ClassNameValue;
|
|
38
|
-
detailInfo?: import("tailwind-merge").ClassNameValue;
|
|
39
|
-
secondaryInfo?: import("tailwind-merge").ClassNameValue;
|
|
40
|
-
};
|
|
41
|
-
};
|
|
42
|
-
} | {}, {
|
|
43
|
-
base: string[];
|
|
44
|
-
title: string[];
|
|
45
|
-
icon: string[];
|
|
46
|
-
displayName: string[];
|
|
47
|
-
detailInfo: string[];
|
|
48
|
-
secondaryInfo: string[];
|
|
49
|
-
}, import("tailwind-variants").TVReturnType<unknown, {
|
|
50
|
-
base: string[];
|
|
51
|
-
title: string[];
|
|
52
|
-
icon: string[];
|
|
53
|
-
displayName: string[];
|
|
54
|
-
detailInfo: string[];
|
|
55
|
-
secondaryInfo: string[];
|
|
56
|
-
}, undefined, unknown, unknown, undefined>>;
|
|
57
|
-
type ProfileBannerInfoVariants = VariantProps<typeof profileBannerInfoStyles>;
|
|
58
|
-
interface ProfileBannerInfoProps extends ProfileBannerInfoVariants {
|
|
59
|
-
/** Whether the profile being viewed belongs to the logged-in user. */
|
|
60
|
-
isCurrentUser: boolean;
|
|
61
|
-
/**
|
|
62
|
-
* The user's full display name (e.g., "John Doe").
|
|
63
|
-
*/
|
|
64
|
-
displayName: string;
|
|
65
|
-
/**
|
|
66
|
-
* The user's username or handle (e.g., "@john").
|
|
67
|
-
*/
|
|
68
|
-
userName: string;
|
|
69
|
-
/**
|
|
70
|
-
* The user's location as a readable text label.
|
|
71
|
-
*/
|
|
72
|
-
location: string;
|
|
73
|
-
/**
|
|
74
|
-
* A timestamp representing when the user joined.
|
|
75
|
-
* Used to generate the "Member since" relative date.
|
|
76
|
-
*/
|
|
77
|
-
joinedTimestamp: Date;
|
|
78
|
-
/**
|
|
79
|
-
* Callback fired whenever any profile-related element is clicked.
|
|
80
|
-
* Typically used to open the profile or navigate to a user page.
|
|
81
|
-
*/
|
|
82
|
-
onProfileClick: () => void;
|
|
83
|
-
/** A function called when the settings button is clicked. */
|
|
84
|
-
onSettingsClick?: () => void;
|
|
85
|
-
}
|
|
86
|
-
/**
|
|
87
|
-
* ProfileBannerInfo Component
|
|
88
|
-
*
|
|
89
|
-
* Renders profile information used in a user profile banner
|
|
90
|
-
*/
|
|
91
|
-
export declare const ProfileBannerInfo: React.FC<ProfileBannerInfoProps>;
|
|
92
|
-
export {};
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { type 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
|
-
/** Optional image source URL displayed within the Response. */
|
|
60
|
-
imageSrc?: string;
|
|
61
|
-
/** Optional alt text for the Response image, used for accessibility. */
|
|
62
|
-
imageAlt?: string;
|
|
63
|
-
/** Callback fired when the comment button is clicked. */
|
|
64
|
-
onCommentClick: () => void;
|
|
65
|
-
/** Callback fired when the like button is clicked. */
|
|
66
|
-
onLikeClick: () => void;
|
|
67
|
-
/** Callback fired when the share button is clicked. */
|
|
68
|
-
onShareClick: () => void;
|
|
69
|
-
}
|
|
70
|
-
/**
|
|
71
|
-
* Detailed Response component displaying user info, text content,
|
|
72
|
-
* optional image, and action buttons (comment, like, share).
|
|
73
|
-
*/
|
|
74
|
-
export declare const Response: React.FC<ResponseProps>;
|
|
75
|
-
export {};
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { type 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 {};
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { type 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;
|
|
60
|
-
/** Username of the user */
|
|
61
|
-
userName: string;
|
|
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 {};
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { type 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 {};
|
package/dist/favicon.svg
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M0 64C0 41.5979 0 30.3968 4.35974 21.8404C8.19467 14.3139 14.3139 8.19467 21.8404 4.35974C30.3968 0 41.5979 0 64 0H96C118.402 0 129.603 0 138.16 4.35974C145.686 8.19467 151.805 14.3139 155.64 21.8404C160 30.3968 160 41.5979 160 64V96C160 118.402 160 129.603 155.64 138.16C151.805 145.686 145.686 151.805 138.16 155.64C129.603 160 118.402 160 96 160H64C41.5979 160 30.3968 160 21.8404 155.64C14.3139 151.805 8.19467 145.686 4.35974 138.16C0 129.603 0 118.402 0 96V64Z" fill="url(#paint0_linear_437_1102)"/>
|
|
3
|
-
<g clip-path="url(#clip0_437_1102)">
|
|
4
|
-
<path d="M86.6667 90H73.3333C71.4258 90 69.7135 91.0612 68.8607 92.7669C68.0078 94.4694 68.1901 96.4779 69.3327 97.9981L75.9993 106.891C76.9531 108.161 78.4114 108.89 80 108.89C81.5886 108.89 83.0469 108.161 84.0007 106.888L90.6673 98.0013C91.8099 96.4779 91.9922 94.4694 91.1393 92.7669C90.2865 91.0612 88.5742 90 86.6667 90Z" fill="white"/>
|
|
5
|
-
<path d="M116.12 72.1517C115.235 69.8159 114.136 67.4571 112.861 65.1422C117.135 62.8979 120 58.419 120 53.3333C120 45.9798 114.02 40 106.667 40C101.865 40 97.4064 42.8033 94.9882 46.946C90.5688 44.693 85.5747 43.3333 80 43.3333C74.4253 43.3333 69.4314 44.6932 65.0118 46.946C62.5936 42.8033 58.135 40 53.3333 40C45.9798 40 40 45.9798 40 53.3333C40 58.4184 42.8646 62.8971 47.1375 65.1416C45.8622 67.4567 44.7628 69.8157 43.877 72.1517C40.1367 82.0313 37.2168 96.0352 44.5606 106.67C50.6673 115.514 62.5911 120 80 120C97.4089 120 109.333 115.514 115.439 106.67C122.783 96.0352 119.86 82.0313 116.12 72.1517ZM109.954 102.881C105.166 109.818 95.0879 113.333 80 113.333C64.9121 113.333 54.834 109.818 50.0456 102.881C44.3457 94.6289 46.9368 82.9004 50.1107 74.515C51.6634 70.4199 60.4004 50 80 50C99.5996 50 108.337 70.4199 109.889 74.515C113.063 82.9004 115.654 94.6289 109.954 102.881Z" fill="white"/>
|
|
6
|
-
<path d="M72.1289 81.2663C75.1367 76.9889 75.3971 75.2864 74.6452 72.3437C73.2194 66.7611 69.6647 65.5892 66.9368 65.5892C60.1595 65.5892 54.873 74.7363 54.8079 79.3099C54.7689 82.0573 55.8789 84.9186 57.7116 86.7773C58.9974 88.0794 60.5078 88.7695 62.0833 88.7695C66.2923 88.7695 69.5247 84.9772 72.1289 81.2663Z" fill="white"/>
|
|
7
|
-
<path d="M93.0632 65.5892C90.3353 65.5892 86.7806 66.7611 85.3548 72.3438C84.6029 75.2865 84.8633 76.9889 87.8711 81.2663C90.4753 84.9772 93.7077 88.7696 97.9167 88.7696C99.4922 88.7696 101.003 88.0795 102.288 86.7774C104.121 84.9186 105.231 82.0573 105.192 79.3132C105.127 74.7363 99.8405 65.5892 93.0632 65.5892Z" fill="white"/>
|
|
8
|
-
</g>
|
|
9
|
-
<defs>
|
|
10
|
-
<linearGradient id="paint0_linear_437_1102" x1="1.19209e-06" y1="80" x2="160" y2="80" gradientUnits="userSpaceOnUse">
|
|
11
|
-
<stop stop-color="#EC4899"/>
|
|
12
|
-
<stop offset="1" stop-color="#7C3AED"/>
|
|
13
|
-
</linearGradient>
|
|
14
|
-
<clipPath id="clip0_437_1102">
|
|
15
|
-
<rect width="80" height="80" fill="white" transform="translate(40 40)"/>
|
|
16
|
-
</clipPath>
|
|
17
|
-
</defs>
|
|
18
|
-
</svg>
|