@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.
Files changed (180) hide show
  1. package/dist/assets/fallback.png.js +4 -0
  2. package/dist/cm-designsystem.css +1944 -1
  3. package/dist/components/accessible-button/AccessibleButton.js +29 -11
  4. package/dist/components/avatar/Avatar.js +91 -65
  5. package/dist/components/branding/BrandingGallery.js +212 -145
  6. package/dist/components/branding/app-icon-gradient.svg.js +4 -0
  7. package/dist/components/branding/app-icon-white.svg.js +4 -0
  8. package/dist/components/branding/hover-logo-default.svg.js +4 -0
  9. package/dist/components/branding/hover-logo-hovered.svg.js +4 -0
  10. package/dist/components/branding/logo-inline-gradient.svg.js +4 -0
  11. package/dist/components/branding/logo-inline-violet.svg.js +4 -0
  12. package/dist/components/branding/logo-inline-white.svg.js +4 -0
  13. package/dist/components/branding/logo-stacked-gradient.svg.js +4 -0
  14. package/dist/components/branding/logo-stacked-violet.svg.js +4 -0
  15. package/dist/components/branding/logo-stacked-white.svg.js +4 -0
  16. package/dist/components/branding/superzeichen.svg.js +4 -0
  17. package/dist/components/button/Button.js +61 -55
  18. package/dist/components/color/ColorDoc.js +26 -7
  19. package/dist/components/file-upload/FileUpload.js +129 -66
  20. package/dist/components/form/Form.js +33 -26
  21. package/dist/components/icon-button/IconButton.js +33 -29
  22. package/dist/components/icons/IconBase.js +21 -6
  23. package/dist/components/icons/generated/ArrowDown.js +15 -4
  24. package/dist/components/icons/generated/ArrowLeft.js +15 -4
  25. package/dist/components/icons/generated/ArrowRight.js +15 -4
  26. package/dist/components/icons/generated/ArrowUp.js +15 -4
  27. package/dist/components/icons/generated/Calendar.js +15 -4
  28. package/dist/components/icons/generated/Cancel.js +12 -4
  29. package/dist/components/icons/generated/Checkmark.js +12 -4
  30. package/dist/components/icons/generated/Edit.js +9 -4
  31. package/dist/components/icons/generated/Eye.js +15 -4
  32. package/dist/components/icons/generated/Fullscreen.js +9 -4
  33. package/dist/components/icons/generated/HeartFilled.js +15 -4
  34. package/dist/components/icons/generated/HeartOutline.js +15 -4
  35. package/dist/components/icons/generated/Location.js +15 -4
  36. package/dist/components/icons/generated/LogOut.js +12 -4
  37. package/dist/components/icons/generated/Mumble.js +13 -4
  38. package/dist/components/icons/generated/Profile.js +12 -4
  39. package/dist/components/icons/generated/ReplyFilled.js +15 -4
  40. package/dist/components/icons/generated/ReplyOutline.js +15 -4
  41. package/dist/components/icons/generated/Repost.js +15 -4
  42. package/dist/components/icons/generated/Send.js +15 -4
  43. package/dist/components/icons/generated/Settings.js +15 -4
  44. package/dist/components/icons/generated/Share.js +12 -4
  45. package/dist/components/icons/generated/Time.js +12 -4
  46. package/dist/components/icons/generated/Upload.js +21 -4
  47. package/dist/components/input/Input.js +67 -41
  48. package/dist/components/like-toggle/LikeToggle.js +203 -176
  49. package/dist/components/logo-link/LogoLink.js +56 -34
  50. package/dist/components/modal/Modal.js +66 -50
  51. package/dist/components/navi-button/NaviButton.js +42 -30
  52. package/dist/components/navi-user-button/NaviUserButton.js +39 -29
  53. package/dist/components/round-button/RoundButton.js +39 -29
  54. package/dist/components/tabs/TabItem.js +11 -8
  55. package/dist/components/tabs/Tabs.js +74 -59
  56. package/dist/components/text-link/TextLink.js +14 -11
  57. package/dist/components/textarea/Textarea.js +57 -41
  58. package/dist/components/timed-button/TimedButton.js +116 -102
  59. package/dist/components/toggle/Toggle.js +91 -62
  60. package/dist/components/typography/AccessibleTypography.js +12 -9
  61. package/dist/components/typography/Heading.js +13 -9
  62. package/dist/components/typography/Label.js +13 -9
  63. package/dist/components/typography/Paragraph.js +13 -9
  64. package/dist/components/typography/Placeholder.js +13 -9
  65. package/dist/components/typography/ValidationMessage.js +14 -9
  66. package/dist/components/typography/styles.js +53 -46
  67. package/dist/compositions/image-banner/ImageBanner.js +53 -45
  68. package/dist/compositions/image-upload-modal/ImageUploadModal.js +44 -20
  69. package/dist/compositions/post/Post.js +81 -26
  70. package/dist/compositions/post-base/PostBase.js +23 -24
  71. package/dist/compositions/post-creator/PostCreator.js +72 -24
  72. package/dist/compositions/profile-banner/ProfileBanner.js +71 -21
  73. package/dist/compositions/profile-banner-image/ProfileBannerImage.js +60 -52
  74. package/dist/compositions/profile-banner-info/ProfileBannerInfo.js +72 -40
  75. package/dist/compositions/response/Response.js +63 -19
  76. package/dist/compositions/response-creator/ResponseCreator.js +67 -23
  77. package/dist/compositions/user-info/UserInfo.js +71 -52
  78. package/dist/compositions/user-recommendation/UserRecommendation.js +58 -30
  79. package/dist/index.js +129 -4
  80. package/package.json +14 -12
  81. package/dist/components/accessible-button/AccessibleButton.d.ts +0 -32
  82. package/dist/components/accessible-button/AccessibleButton.test.d.ts +0 -1
  83. package/dist/components/accessible-button/AccessibleButton.test.js +0 -28
  84. package/dist/components/avatar/Avatar.d.ts +0 -118
  85. package/dist/components/branding/BrandingGallery.d.ts +0 -1
  86. package/dist/components/button/Button.d.ts +0 -66
  87. package/dist/components/button/Button.test.d.ts +0 -1
  88. package/dist/components/button/Button.test.js +0 -30
  89. package/dist/components/color/ColorDoc.d.ts +0 -4
  90. package/dist/components/file-upload/FileUpload.d.ts +0 -83
  91. package/dist/components/form/Form.d.ts +0 -54
  92. package/dist/components/icon-button/IconButton.d.ts +0 -69
  93. package/dist/components/icon-button/IconButton.test.d.ts +0 -1
  94. package/dist/components/icon-button/IconButton.test.js +0 -22
  95. package/dist/components/icons/IconBase.d.ts +0 -5
  96. package/dist/components/icons/generated/ArrowDown.d.ts +0 -3
  97. package/dist/components/icons/generated/ArrowLeft.d.ts +0 -3
  98. package/dist/components/icons/generated/ArrowRight.d.ts +0 -3
  99. package/dist/components/icons/generated/ArrowUp.d.ts +0 -3
  100. package/dist/components/icons/generated/Calendar.d.ts +0 -3
  101. package/dist/components/icons/generated/Cancel.d.ts +0 -3
  102. package/dist/components/icons/generated/Checkmark.d.ts +0 -3
  103. package/dist/components/icons/generated/Edit.d.ts +0 -3
  104. package/dist/components/icons/generated/Eye.d.ts +0 -3
  105. package/dist/components/icons/generated/Fullscreen.d.ts +0 -3
  106. package/dist/components/icons/generated/HeartFilled.d.ts +0 -3
  107. package/dist/components/icons/generated/HeartOutline.d.ts +0 -3
  108. package/dist/components/icons/generated/Location.d.ts +0 -3
  109. package/dist/components/icons/generated/LogOut.d.ts +0 -3
  110. package/dist/components/icons/generated/Mumble.d.ts +0 -3
  111. package/dist/components/icons/generated/Profile.d.ts +0 -3
  112. package/dist/components/icons/generated/ReplyFilled.d.ts +0 -3
  113. package/dist/components/icons/generated/ReplyOutline.d.ts +0 -3
  114. package/dist/components/icons/generated/Repost.d.ts +0 -3
  115. package/dist/components/icons/generated/Send.d.ts +0 -3
  116. package/dist/components/icons/generated/Settings.d.ts +0 -3
  117. package/dist/components/icons/generated/Share.d.ts +0 -3
  118. package/dist/components/icons/generated/Time.d.ts +0 -3
  119. package/dist/components/icons/generated/Upload.d.ts +0 -3
  120. package/dist/components/icons/generated/index.d.ts +0 -24
  121. package/dist/components/icons/generated/index.js +0 -24
  122. package/dist/components/index.d.ts +0 -27
  123. package/dist/components/index.js +0 -27
  124. package/dist/components/input/Input.d.ts +0 -61
  125. package/dist/components/like-toggle/LikeToggle.d.ts +0 -97
  126. package/dist/components/like-toggle/LikeToggle.test.d.ts +0 -1
  127. package/dist/components/like-toggle/LikeToggle.test.js +0 -35
  128. package/dist/components/logo-link/LogoLink.d.ts +0 -11
  129. package/dist/components/modal/Modal.d.ts +0 -75
  130. package/dist/components/modal/Modal.test.d.ts +0 -1
  131. package/dist/components/modal/Modal.test.js +0 -24
  132. package/dist/components/navi-button/NaviButton.d.ts +0 -49
  133. package/dist/components/navi-button/NaviButton.test.d.ts +0 -1
  134. package/dist/components/navi-button/NaviButton.test.js +0 -22
  135. package/dist/components/navi-user-button/NaviUserButton.d.ts +0 -44
  136. package/dist/components/round-button/RoundButton.d.ts +0 -44
  137. package/dist/components/round-button/RoundButton.test.d.ts +0 -1
  138. package/dist/components/round-button/RoundButton.test.js +0 -22
  139. package/dist/components/tabs/TabItem.d.ts +0 -11
  140. package/dist/components/tabs/Tabs.d.ts +0 -67
  141. package/dist/components/tabs/Tabs.test.d.ts +0 -1
  142. package/dist/components/tabs/Tabs.test.js +0 -61
  143. package/dist/components/text-link/TextLink.d.ts +0 -9
  144. package/dist/components/text-link/TextLink.test.d.ts +0 -1
  145. package/dist/components/text-link/TextLink.test.js +0 -14
  146. package/dist/components/textarea/Textarea.d.ts +0 -48
  147. package/dist/components/timed-button/TimedButton.d.ts +0 -79
  148. package/dist/components/timed-button/TimedButton.test.d.ts +0 -1
  149. package/dist/components/timed-button/TimedButton.test.js +0 -36
  150. package/dist/components/toggle/Toggle.d.ts +0 -62
  151. package/dist/components/toggle/Toggle.test.d.ts +0 -1
  152. package/dist/components/toggle/Toggle.test.js +0 -93
  153. package/dist/components/typography/AccessibleTypography.d.ts +0 -33
  154. package/dist/components/typography/Heading.d.ts +0 -24
  155. package/dist/components/typography/Label.d.ts +0 -22
  156. package/dist/components/typography/Paragraph.d.ts +0 -22
  157. package/dist/components/typography/Placeholder.d.ts +0 -17
  158. package/dist/components/typography/ValidationMessage.d.ts +0 -22
  159. package/dist/components/typography/styles.d.ts +0 -74
  160. package/dist/compositions/image-banner/ImageBanner.d.ts +0 -54
  161. package/dist/compositions/image-upload-modal/ImageUploadModal.d.ts +0 -15
  162. package/dist/compositions/index.d.ts +0 -11
  163. package/dist/compositions/index.js +0 -11
  164. package/dist/compositions/post/Post.d.ts +0 -75
  165. package/dist/compositions/post-base/PostBase.d.ts +0 -41
  166. package/dist/compositions/post-creator/PostCreator.d.ts +0 -69
  167. package/dist/compositions/profile-banner/ProfileBanner.d.ts +0 -82
  168. package/dist/compositions/profile-banner-image/ProfileBannerImage.d.ts +0 -54
  169. package/dist/compositions/profile-banner-info/ProfileBannerInfo.d.ts +0 -92
  170. package/dist/compositions/response/Response.d.ts +0 -75
  171. package/dist/compositions/response-creator/ResponseCreator.d.ts +0 -63
  172. package/dist/compositions/user-info/UserInfo.d.ts +0 -75
  173. package/dist/compositions/user-recommendation/UserRecommendation.d.ts +0 -63
  174. package/dist/favicon.svg +0 -18
  175. package/dist/index.cjs.js +0 -50
  176. package/dist/index.d.ts +0 -3
  177. package/dist/index.es.js +0 -8343
  178. package/dist/logo-inline-gradient.svg +0 -43
  179. package/dist/setupTests.d.ts +0 -1
  180. package/dist/setupTests.js +0 -7
@@ -1,54 +0,0 @@
1
- import React from "react";
2
- import { type VariantProps } from "tailwind-variants";
3
- declare const formStyles: import("tailwind-variants").TVReturnType<{
4
- [key: string]: {
5
- [key: string]: import("tailwind-merge").ClassNameValue | {
6
- base?: import("tailwind-merge").ClassNameValue;
7
- fields?: import("tailwind-merge").ClassNameValue;
8
- };
9
- };
10
- } | {
11
- [x: string]: {
12
- [x: string]: import("tailwind-merge").ClassNameValue | {
13
- base?: import("tailwind-merge").ClassNameValue;
14
- fields?: import("tailwind-merge").ClassNameValue;
15
- };
16
- };
17
- } | {}, {
18
- base: string[];
19
- fields: string[];
20
- }, undefined, {
21
- [key: string]: {
22
- [key: string]: import("tailwind-merge").ClassNameValue | {
23
- base?: import("tailwind-merge").ClassNameValue;
24
- fields?: import("tailwind-merge").ClassNameValue;
25
- };
26
- };
27
- } | {}, {
28
- base: string[];
29
- fields: string[];
30
- }, import("tailwind-variants").TVReturnType<unknown, {
31
- base: string[];
32
- fields: string[];
33
- }, undefined, unknown, unknown, undefined>>;
34
- type FormVariants = VariantProps<typeof formStyles>;
35
- interface FormProps extends FormVariants {
36
- children?: React.ReactNode;
37
- }
38
- export declare const Form: React.FC<FormProps> & {
39
- Fields: typeof FormFields;
40
- Action: typeof FormAction;
41
- };
42
- export declare function FormFields({ children }: {
43
- children: React.ReactNode;
44
- }): React.ReactNode;
45
- export declare namespace FormFields {
46
- var displayName: string;
47
- }
48
- export declare function FormAction({ children }: {
49
- children: React.ReactElement;
50
- }): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
51
- export declare namespace FormAction {
52
- var displayName: string;
53
- }
54
- export {};
@@ -1,69 +0,0 @@
1
- import React from "react";
2
- import { type VariantProps } from "tailwind-variants";
3
- import { type BaseAccessibleButtonProps } from "../accessible-button/AccessibleButton";
4
- import type { IconBaseProps } from "../icons/IconBase";
5
- declare const iconButtonStyles: import("tailwind-variants").TVReturnType<{
6
- intent: {
7
- primary: {
8
- base: string[];
9
- };
10
- secondary: {
11
- base: string[];
12
- };
13
- };
14
- }, {
15
- base: string[];
16
- icon: string[];
17
- }, undefined, {
18
- intent: {
19
- primary: {
20
- base: string[];
21
- };
22
- secondary: {
23
- base: string[];
24
- };
25
- };
26
- }, {
27
- base: string[];
28
- icon: string[];
29
- }, import("tailwind-variants").TVReturnType<{
30
- intent: {
31
- primary: {
32
- base: string[];
33
- };
34
- secondary: {
35
- base: string[];
36
- };
37
- };
38
- }, {
39
- base: string[];
40
- icon: string[];
41
- }, undefined, unknown, unknown, undefined>>;
42
- type IconButtonVariants = VariantProps<typeof iconButtonStyles>;
43
- type IconButtonIntent = "primary" | "secondary";
44
- /**
45
- * Props for the IconButton component.
46
- *
47
- * @inheritdoc BaseAccessibleButtonProps
48
- * @inheritdoc IconButtonVariants
49
- */
50
- interface IconButtonProps extends IconButtonVariants, BaseAccessibleButtonProps {
51
- /**
52
- * Visual intent of the button (controls background color, hover, and active styles).
53
- */
54
- intent: IconButtonIntent;
55
- /**
56
- * Icon element rendered alongside the button label.
57
- */
58
- icon?: React.ComponentType<IconBaseProps>;
59
- /**
60
- * Visible text label displayed inside the button.
61
- */
62
- children: string;
63
- }
64
- /**
65
- * A compact, accessible button component that displays an icon alongside
66
- * a text label.
67
- */
68
- export declare const IconButton: React.FC<IconButtonProps>;
69
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1,22 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { fireEvent, render, screen } from "@testing-library/react";
3
- import { describe, expect, test, vi } from "vitest";
4
- import { Profile } from "../icons/generated";
5
- import { IconButton } from "./IconButton";
6
- describe("IconButton", () => {
7
- test("should render icon-button with icon", async () => {
8
- // Arrange
9
- render(_jsx(IconButton, { intent: "primary", icon: Profile, onClick: vi.fn(), children: "button" }));
10
- // Assert
11
- expect(screen.getByRole("button")).toBeVisible();
12
- expect(screen.getByRole("button")).toHaveTextContent("button");
13
- expect(screen.getByText("Profile")).toBeVisible();
14
- });
15
- test("should call onClick when clicked", () => {
16
- // Arrange
17
- const onClick = vi.fn();
18
- render(_jsx(IconButton, { intent: "primary", icon: Profile, onClick: onClick, children: "button" }));
19
- fireEvent.click(screen.getByRole("button"));
20
- expect(onClick).toHaveBeenCalled();
21
- });
22
- });
@@ -1,5 +0,0 @@
1
- import * as React from "react";
2
- export type IconBaseProps = React.SVGProps<SVGSVGElement> & {
3
- label?: string;
4
- };
5
- export declare const IconBase: React.FC<IconBaseProps>;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const ArrowDown: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const ArrowLeft: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const ArrowRight: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const ArrowUp: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Calendar: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Cancel: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Checkmark: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Edit: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Eye: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Fullscreen: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const HeartFilled: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const HeartOutline: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Location: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const LogOut: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Mumble: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Profile: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const ReplyFilled: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const ReplyOutline: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Repost: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Send: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Settings: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Share: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Time: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { IconBase } from "../IconBase";
3
- export declare const Upload: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;
@@ -1,24 +0,0 @@
1
- export * from "./ArrowDown";
2
- export * from "./ArrowLeft";
3
- export * from "./ArrowRight";
4
- export * from "./ArrowUp";
5
- export * from "./Calendar";
6
- export * from "./Cancel";
7
- export * from "./Checkmark";
8
- export * from "./Edit";
9
- export * from "./Eye";
10
- export * from "./Fullscreen";
11
- export * from "./HeartFilled";
12
- export * from "./HeartOutline";
13
- export * from "./Location";
14
- export * from "./LogOut";
15
- export * from "./Mumble";
16
- export * from "./Profile";
17
- export * from "./ReplyFilled";
18
- export * from "./ReplyOutline";
19
- export * from "./Repost";
20
- export * from "./Send";
21
- export * from "./Settings";
22
- export * from "./Share";
23
- export * from "./Time";
24
- export * from "./Upload";
@@ -1,24 +0,0 @@
1
- export * from "./ArrowDown";
2
- export * from "./ArrowLeft";
3
- export * from "./ArrowRight";
4
- export * from "./ArrowUp";
5
- export * from "./Calendar";
6
- export * from "./Cancel";
7
- export * from "./Checkmark";
8
- export * from "./Edit";
9
- export * from "./Eye";
10
- export * from "./Fullscreen";
11
- export * from "./HeartFilled";
12
- export * from "./HeartOutline";
13
- export * from "./Location";
14
- export * from "./LogOut";
15
- export * from "./Mumble";
16
- export * from "./Profile";
17
- export * from "./ReplyFilled";
18
- export * from "./ReplyOutline";
19
- export * from "./Repost";
20
- export * from "./Send";
21
- export * from "./Settings";
22
- export * from "./Share";
23
- export * from "./Time";
24
- export * from "./Upload";
@@ -1,27 +0,0 @@
1
- export * from "./avatar/Avatar";
2
- export * from "./branding/BrandingGallery";
3
- export * from "./button/Button";
4
- export * from "./color/ColorDoc";
5
- export * from "./file-upload/FileUpload";
6
- export * from "./form/Form";
7
- export * from "./icon-button/IconButton";
8
- export * from "./icons/IconBase";
9
- export * from "./icons/generated";
10
- export * from "./input/Input";
11
- export * from "./like-toggle/LikeToggle";
12
- export * from "./logo-link/LogoLink";
13
- export * from "./modal/Modal";
14
- export * from "./navi-button/NaviButton";
15
- export * from "./navi-user-button/NaviUserButton";
16
- export * from "./round-button/RoundButton";
17
- export * from "./tabs/TabItem";
18
- export * from "./tabs/Tabs";
19
- export * from "./text-link/TextLink";
20
- export * from "./textarea/Textarea";
21
- export * from "./timed-button/TimedButton";
22
- export * from "./toggle/Toggle";
23
- export * from "./typography/Heading";
24
- export * from "./typography/Label";
25
- export * from "./typography/Paragraph";
26
- export * from "./typography/Placeholder";
27
- export * from "./typography/ValidationMessage";
@@ -1,27 +0,0 @@
1
- export * from "./avatar/Avatar";
2
- export * from "./branding/BrandingGallery";
3
- export * from "./button/Button";
4
- export * from "./color/ColorDoc";
5
- export * from "./file-upload/FileUpload";
6
- export * from "./form/Form";
7
- export * from "./icon-button/IconButton";
8
- export * from "./icons/IconBase";
9
- export * from "./icons/generated";
10
- export * from "./input/Input";
11
- export * from "./like-toggle/LikeToggle";
12
- export * from "./logo-link/LogoLink";
13
- export * from "./modal/Modal";
14
- export * from "./navi-button/NaviButton";
15
- export * from "./navi-user-button/NaviUserButton";
16
- export * from "./round-button/RoundButton";
17
- export * from "./tabs/TabItem";
18
- export * from "./tabs/Tabs";
19
- export * from "./text-link/TextLink";
20
- export * from "./textarea/Textarea";
21
- export * from "./timed-button/TimedButton";
22
- export * from "./toggle/Toggle";
23
- export * from "./typography/Heading";
24
- export * from "./typography/Label";
25
- export * from "./typography/Paragraph";
26
- export * from "./typography/Placeholder";
27
- export * from "./typography/ValidationMessage";
@@ -1,61 +0,0 @@
1
- import React from "react";
2
- import { type VariantProps } from "tailwind-variants";
3
- import type { IconBaseProps } from "../icons/IconBase";
4
- declare const inputStyles: import("tailwind-variants").TVReturnType<{
5
- hasIcon: {
6
- true: {
7
- control: string[];
8
- };
9
- false: {
10
- control: string[];
11
- };
12
- };
13
- }, {
14
- base: string[];
15
- controlContainer: string[];
16
- control: string[];
17
- icon: string[];
18
- message: string[];
19
- }, undefined, {
20
- hasIcon: {
21
- true: {
22
- control: string[];
23
- };
24
- false: {
25
- control: string[];
26
- };
27
- };
28
- }, {
29
- base: string[];
30
- controlContainer: string[];
31
- control: string[];
32
- icon: string[];
33
- message: string[];
34
- }, import("tailwind-variants").TVReturnType<{
35
- hasIcon: {
36
- true: {
37
- control: string[];
38
- };
39
- false: {
40
- control: string[];
41
- };
42
- };
43
- }, {
44
- base: string[];
45
- controlContainer: string[];
46
- control: string[];
47
- icon: string[];
48
- message: string[];
49
- }, undefined, unknown, unknown, undefined>>;
50
- type InputVariants = VariantProps<typeof inputStyles>;
51
- interface InputProps extends InputVariants {
52
- label: string;
53
- name: string;
54
- placeholder: string;
55
- type?: string;
56
- isRequired?: boolean;
57
- children?: React.ReactElement<IconBaseProps>;
58
- onChange: (value: string) => void;
59
- }
60
- export declare const Input: ({ type, isRequired, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
61
- export {};
@@ -1,97 +0,0 @@
1
- import { type VariantProps } from "tailwind-variants";
2
- declare const toggleStyles: import("tailwind-variants").TVReturnType<{
3
- pressed: {
4
- false: {
5
- base: string[];
6
- icon: string[];
7
- label: string[];
8
- };
9
- true: {
10
- base: never[];
11
- icon: string[];
12
- label: string[];
13
- };
14
- };
15
- hasLikes: {
16
- true: {
17
- base: string[];
18
- icon: string[];
19
- label: string[];
20
- };
21
- false: string;
22
- };
23
- animating: {
24
- true: {};
25
- false: {};
26
- };
27
- }, {
28
- base: string[];
29
- icon: string[];
30
- label: never[];
31
- }, undefined, {
32
- pressed: {
33
- false: {
34
- base: string[];
35
- icon: string[];
36
- label: string[];
37
- };
38
- true: {
39
- base: never[];
40
- icon: string[];
41
- label: string[];
42
- };
43
- };
44
- hasLikes: {
45
- true: {
46
- base: string[];
47
- icon: string[];
48
- label: string[];
49
- };
50
- false: string;
51
- };
52
- animating: {
53
- true: {};
54
- false: {};
55
- };
56
- }, {
57
- base: string[];
58
- icon: string[];
59
- label: never[];
60
- }, import("tailwind-variants").TVReturnType<{
61
- pressed: {
62
- false: {
63
- base: string[];
64
- icon: string[];
65
- label: string[];
66
- };
67
- true: {
68
- base: never[];
69
- icon: string[];
70
- label: string[];
71
- };
72
- };
73
- hasLikes: {
74
- true: {
75
- base: string[];
76
- icon: string[];
77
- label: string[];
78
- };
79
- false: string;
80
- };
81
- animating: {
82
- true: {};
83
- false: {};
84
- };
85
- }, {
86
- base: string[];
87
- icon: string[];
88
- label: never[];
89
- }, undefined, unknown, unknown, undefined>>;
90
- type LikeToggleVariants = VariantProps<typeof toggleStyles>;
91
- interface LikeToggleProps extends LikeToggleVariants {
92
- pressed?: boolean;
93
- likes?: number;
94
- onLikeChange: (liked: boolean) => void;
95
- }
96
- export declare const LikeToggle: ({ pressed, likes, onLikeChange, }: LikeToggleProps) => import("react/jsx-runtime").JSX.Element;
97
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1,35 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { fireEvent, render, screen, waitFor } from "@testing-library/react";
3
- import { describe, expect, test, vi } from "vitest";
4
- import { LikeToggle } from "./LikeToggle";
5
- describe("LikeToggle", () => {
6
- test("should render icon and label", async () => {
7
- // Arrange
8
- render(_jsx(LikeToggle, { likes: 3, onLikeChange: () => { } }));
9
- const button = screen.getByRole("button");
10
- expect(button).toBeVisible();
11
- expect(button).toHaveTextContent("3 Likes");
12
- // Icon prüfen
13
- expect(screen.getByLabelText("HeartOutline")).toBeInTheDocument();
14
- });
15
- test("renders initial state and toggles correctly", async () => {
16
- // Arrange
17
- const onLikeChange = vi.fn();
18
- render(_jsx(LikeToggle, { likes: 3, onLikeChange: onLikeChange }));
19
- const button = screen.getByRole("button");
20
- expect(button).toBeVisible();
21
- // Initial state with Likes
22
- expect(button).toHaveTextContent("3 Likes");
23
- expect(screen.getByLabelText("HeartOutline")).toBeInTheDocument();
24
- // Simulate click
25
- fireEvent.click(button);
26
- // Immediate state after click: "Liked" label + HeartFilled
27
- expect(button).toHaveTextContent("Liked");
28
- expect(screen.getByLabelText("HeartFilled")).toBeInTheDocument();
29
- expect(onLikeChange).toHaveBeenCalledWith(true);
30
- // Wait for animation + likes count update (2s delay + 300ms animation)
31
- await waitFor(() => {
32
- expect(button).toHaveTextContent("4 Likes");
33
- }, { timeout: 2500 });
34
- });
35
- });
@@ -1,11 +0,0 @@
1
- /**
2
- * Props for LogoLink component *
3
- */
4
- type LogoLinkProps = React.ComponentPropsWithoutRef<"a"> & {
5
- /**
6
- * The URL to navigate to when the logo is clicked. Defaults to "/".
7
- */
8
- href?: string;
9
- };
10
- export declare const LogoLink: ({ href, ...props }: LogoLinkProps) => import("react/jsx-runtime").JSX.Element;
11
- export {};