@krrli/cm-designsystem 1.32.1 → 1.32.2

package/dist/components/toggle/Toggle.d.ts

@@ -1,62 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-declare const toggleStyles: import("tailwind-variants").TVReturnType<{
-    pressed: {
-        true: {
-            base: string[];
-            icon: string[];
-            label: string[];
-        };
-        false: {
-            base: string[];
-            icon: string[];
-            label: string[];
-        };
-    };
-}, {
-    base: string[];
-    icon: string[];
-    label: never[];
-}, undefined, {
-    pressed: {
-        true: {
-            base: string[];
-            icon: string[];
-            label: string[];
-        };
-        false: {
-            base: string[];
-            icon: string[];
-            label: string[];
-        };
-    };
-}, {
-    base: string[];
-    icon: string[];
-    label: never[];
-}, import("tailwind-variants").TVReturnType<{
-    pressed: {
-        true: {
-            base: string[];
-            icon: string[];
-            label: string[];
-        };
-        false: {
-            base: string[];
-            icon: string[];
-            label: string[];
-        };
-    };
-}, {
-    base: string[];
-    icon: string[];
-    label: never[];
-}, undefined, unknown, unknown, undefined>>;
-type ToggleVariants = VariantProps<typeof toggleStyles>;
-interface ToggleProps extends ToggleVariants {
-    ariaLabel: string;
-    labelText: string;
-    pressed?: boolean;
-    onToggle: (toggled: boolean) => void;
-}
-export declare const Toggle: ({ ariaLabel, labelText, pressed, onToggle, }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/toggle/Toggle.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/toggle/Toggle.test.js

@@ -1,93 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, test, vi } from "vitest";
-import { Toggle } from "./Toggle";
-describe("LikeToggle", () => {
-    test("should render icon and label", async () => {
-        // Arrange
-        render(_jsx(Toggle, { ariaLabel: "Comment", labelText: "Comment", onToggle: () => { } }));
-        const button = screen.getByRole("button");
-        expect(button).toBeVisible();
-        expect(button).toHaveTextContent("Comment");
-        // Icon prüfen
-        expect(screen.getByLabelText("ReplyOutline")).toBeInTheDocument();
-    });
-    test("when clicked, onToggle should return flag", async () => {
-        // Arrange
-        const onToggleMock = vi.fn();
-        render(_jsx(Toggle, { ariaLabel: "Comment", labelText: "Comment", onToggle: onToggleMock }));
-        const button = screen.getByRole("button");
-        // Act
-        await userEvent.click(button);
-        // Assert
-        expect(onToggleMock).toHaveBeenCalledWith(true);
-    });
-    test("when toggled and clicked, onToggle should return false", async () => {
-        // Arrange
-        const onToggleMock = vi.fn();
-        render(_jsx(Toggle, { ariaLabel: "Comment", labelText: "Comment", pressed: true, onToggle: onToggleMock }));
-        const button = screen.getByRole("button");
-        // Act
-        await userEvent.click(button);
-        // Assert
-        expect(onToggleMock).toHaveBeenCalledWith(false);
-    });
-    test("should display ReplyFilled icon when pressed is true", async () => {
-        // Arrange
-        render(_jsx(Toggle, { ariaLabel: "Comment", labelText: "Comment", pressed: true, onToggle: () => { } }));
-        // Assert
-        expect(screen.getByLabelText("ReplyFilled")).toBeInTheDocument();
-        expect(screen.queryByLabelText("ReplyOutline")).not.toBeInTheDocument();
-    });
-    test("should display ReplyOutline icon when pressed is false", async () => {
-        // Arrange
-        render(_jsx(Toggle, { ariaLabel: "Comment", labelText: "Comment", pressed: false, onToggle: () => { } }));
-        // Assert
-        expect(screen.getByLabelText("ReplyOutline")).toBeInTheDocument();
-        expect(screen.queryByLabelText("ReplyFilled")).not.toBeInTheDocument();
-    });
-    test("should use custom ariaLabel", async () => {
-        // Arrange
-        render(_jsx(Toggle, { ariaLabel: "Custom Comment Label", labelText: "Comment", onToggle: () => { } }));
-        // Assert
-        const button = screen.getByRole("button", {
-            name: "Custom Comment Label",
-        });
-        expect(button).toBeInTheDocument();
-    });
-    test("should display custom labelText", async () => {
-        // Arrange
-        render(_jsx(Toggle, { ariaLabel: "Comment", labelText: "Custom Label Text", onToggle: () => { } }));
-        // Assert
-        expect(screen.getByText("Custom Label Text")).toBeInTheDocument();
-    });
-    test("should be keyboard accessible", async () => {
-        // Arrange
-        const onToggleMock = vi.fn();
-        render(_jsx(Toggle, { ariaLabel: "Comment", labelText: "Comment", onToggle: onToggleMock }));
-        const button = screen.getByRole("button");
-        // Act
-        button.focus();
-        expect(button).toHaveFocus();
-        await userEvent.keyboard("{Enter}");
-        // Assert
-        expect(onToggleMock).toHaveBeenCalledWith(true);
-    });
-    test("should toggle multiple times correctly", async () => {
-        // Arrange
-        const onToggleMock = vi.fn();
-        const { rerender } = render(_jsx(Toggle, { ariaLabel: "Comment", labelText: "Comment", onToggle: onToggleMock }));
-        const button = screen.getByRole("button");
-        // Act - First click
-        await userEvent.click(button);
-        expect(onToggleMock).toHaveBeenCalledWith(true);
-        // Rerender with pressed state
-        rerender(_jsx(Toggle, { ariaLabel: "Comment", labelText: "Comment", pressed: true, onToggle: onToggleMock }));
-        // Act - Second click
-        await userEvent.click(button);
-        // Assert
-        expect(onToggleMock).toHaveBeenCalledWith(false);
-        expect(onToggleMock).toHaveBeenCalledTimes(2);
-    });
-});

package/dist/components/typography/AccessibleTypography.d.ts

@@ -1,33 +0,0 @@
-import { type JSX } from "react";
-/**
- * Props for the Typography component.
- */
-export interface AccessibleTypographyProps {
-    /**
-     * The HTML tag to render (e.g., "p", "h1", "span").
-     * Determines the semantic element used for the text.
-     */
-    as?: keyof JSX.IntrinsicElements;
-    /**
-     * Additional Tailwind or custom class names to apply.
-     */
-    className?: string;
-    /**
-     * Defines the ARIA role of the element.
-     */
-    role?: string;
-    /**
-     * The accessible label associated with this element.
-     * Useful when the visible text isn’t descriptive enough.
-     */
-    ariaLabel?: string;
-    /**
-     * The content to be rendered inside the element.
-     */
-    children: React.ReactNode;
-}
-/**
- * A flexible, semantic, accessible typography component that allows you
- * to set the HTML tag and optionally make it clickable.
- */
-export declare const AccessibleTypography: React.FC<AccessibleTypographyProps>;

package/dist/components/typography/Heading.d.ts

@@ -1,24 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-import { type AccessibleTypographyProps } from "./AccessibleTypography";
-import { headingStyles } from "./styles";
-import type { JSX } from "react";
-type HeadingVariants = VariantProps<typeof headingStyles>;
-type HeadingSize = "1" | "2" | "3" | "4";
-/**
- * Heading component props.
- *
- * @inheritDoc TypographyProps
- * @inheritDoc HeadingVariants
- */
-interface HeadingProps extends HeadingVariants, AccessibleTypographyProps {
-    as: keyof JSX.IntrinsicElements;
-    /**
-     * Controls the visual size of the heading.
-     */
-    size: HeadingSize;
-}
-/**
- * A semantic, accessible Heading component built on top of the AccessibleTypography component.
- */
-export declare const Heading: React.FC<HeadingProps>;
-export {};

package/dist/components/typography/Label.d.ts

@@ -1,22 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-import { type AccessibleTypographyProps } from "./AccessibleTypography";
-import { labelStyles } from "./styles";
-type LabelVariants = VariantProps<typeof labelStyles>;
-export type LabelSize = "xl" | "lg" | "md" | "sm";
-/**
- * Label component props.
- *
- * @inheritDoc TypographyProps
- * @inheritDoc LabelVariants
- */
-interface LabelProps extends LabelVariants, AccessibleTypographyProps {
-    /**
-     * Controls the visual size of the label.
-     */
-    size: LabelSize;
-}
-/**
- * A semantic, accessible Label component built on top of the AccessibleTypography component.
- */
-export declare const Label: React.FC<LabelProps>;
-export {};

package/dist/components/typography/Paragraph.d.ts

@@ -1,22 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-import { type AccessibleTypographyProps } from "./AccessibleTypography";
-import { paragraphStyles } from "./styles";
-type ParagraphVariants = VariantProps<typeof paragraphStyles>;
-type ParagraphSize = "lg" | "md";
-/**
- * Paragraph component props.
- *
- * @inheritDoc TypographyProps
- * @inheritDoc ParagraphVariants
- */
-interface ParagraphProps extends ParagraphVariants, AccessibleTypographyProps {
-    /**
-     * Controls the visual size of the paragraph.
-     */
-    size: ParagraphSize;
-}
-/**
- * A semantic, accessible Paragraph component built on top of the AccessibleTypography component.
- */
-export declare const Paragraph: React.FC<ParagraphProps>;
-export {};

package/dist/components/typography/Placeholder.d.ts

@@ -1,17 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-import { type AccessibleTypographyProps } from "./AccessibleTypography";
-import { placeholderStyles } from "./styles";
-type PlaceholderVariants = VariantProps<typeof placeholderStyles>;
-/**
- * Placeholder component props.
- *
- * @inheritDoc TypographyProps
- * @inheritDoc PlaceholderVariants
- */
-interface PlaceholderProps extends PlaceholderVariants, AccessibleTypographyProps {
-}
-/**
- * A semantic, accessible Placeholder component built on top of the AccessibleTypography component.
- */
-export declare const Placeholder: React.FC<PlaceholderProps>;
-export {};

package/dist/components/typography/ValidationMessage.d.ts

@@ -1,22 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-import { type AccessibleTypographyProps } from "./AccessibleTypography";
-import { validationMessageStyles } from "./styles";
-type ValidationMessageVariants = VariantProps<typeof validationMessageStyles>;
-type ValidationMessageType = "error";
-/**
- * ValidationMessage component props.
- *
- * @inheritDoc TypographyProps
- * @inheritDoc ValidationMessageVariants
- */
-interface ValidationMessageProps extends ValidationMessageVariants, AccessibleTypographyProps {
-    /**
-     * Controls the visual variant of the validation message.
-     */
-    type?: ValidationMessageType;
-}
-/**
- * A semantic, accessible ValidationMessage component built on top of the AccessibleTypography component.
- */
-export declare const ValidationMessage: React.FC<ValidationMessageProps>;
-export {};

package/dist/components/typography/styles.d.ts

@@ -1,74 +0,0 @@
-export declare const headingStyles: import("tailwind-variants").TVReturnType<{
-    size: {
-        "1": string[];
-        "2": string[];
-        "3": string[];
-        "4": string[];
-    };
-}, undefined, string[], {
-    size: {
-        "1": string[];
-        "2": string[];
-        "3": string[];
-        "4": string[];
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        "1": string[];
-        "2": string[];
-        "3": string[];
-        "4": string[];
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-export declare const paragraphStyles: import("tailwind-variants").TVReturnType<{
-    size: {
-        lg: string[];
-        md: string[];
-    };
-}, undefined, string[], {
-    size: {
-        lg: string[];
-        md: string[];
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        lg: string[];
-        md: string[];
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-export declare const labelStyles: import("tailwind-variants").TVReturnType<{
-    size: {
-        xl: string[];
-        lg: string[];
-        md: string[];
-        sm: string[];
-    };
-}, undefined, string[], {
-    size: {
-        xl: string[];
-        lg: string[];
-        md: string[];
-        sm: string[];
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        xl: string[];
-        lg: string[];
-        md: string[];
-        sm: string[];
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-export declare const placeholderStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
-export declare const validationMessageStyles: import("tailwind-variants").TVReturnType<{
-    type: {
-        error: string[];
-    };
-}, undefined, string[], {
-    type: {
-        error: string[];
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    type: {
-        error: string[];
-    };
-}, undefined, string[], unknown, unknown, undefined>>;

package/dist/compositions/image-banner/ImageBanner.d.ts

@@ -1,54 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-declare const ImageBannerStyles: import("tailwind-variants").TVReturnType<{
-    isFallback: {
-        true: {
-            image: string[];
-        };
-    };
-}, {
-    base: string[];
-    image: string[];
-    overlay: string[];
-    icon: string[];
-}, undefined, {
-    isFallback: {
-        true: {
-            image: string[];
-        };
-    };
-}, {
-    base: string[];
-    image: string[];
-    overlay: string[];
-    icon: string[];
-}, import("tailwind-variants").TVReturnType<{
-    isFallback: {
-        true: {
-            image: string[];
-        };
-    };
-}, {
-    base: string[];
-    image: string[];
-    overlay: string[];
-    icon: string[];
-}, undefined, unknown, unknown, undefined>>;
-type ImageBannerVariants = VariantProps<typeof ImageBannerStyles>;
-interface ImageBannerProps extends ImageBannerVariants {
-    /** Avatar image URL */
-    src: string;
-    /**
-     * Alternative text for the image, used for accessibility.
-     */
-    alt: string;
-    /** Click handler for the whole ImageBanner component */
-    onClick: () => void;
-}
-/**
- * ImageBanner component
- *
- * Displays a banner image with a fixed aspect ratio (17:8) and an optional overlay icon.
- * If the image fails to load, a fallback element is displayed instead.
- */
-export declare const ImageBanner: React.FC<ImageBannerProps>;
-export {};

package/dist/compositions/image-upload-modal/ImageUploadModal.d.ts

@@ -1,15 +0,0 @@
-interface ImageUploadModalProps {
-    /** Callback fired when the user selects a file. `null` is passed if no file is selected. */
-    onFileChange: (file: File | null) => void;
-}
-export type ImageUploadModalRef = {
-    /** Function that opens or closes the modal. Pass `true` to open, `false` to close. */
-    openModal: (open: boolean) => void;
-};
-/**
- * ImageUploadModal component
- *
- * Renders a post creation component.
- */
-export declare const ImageUploadModal: import("react").ForwardRefExoticComponent<ImageUploadModalProps & import("react").RefAttributes<ImageUploadModalRef>>;
-export {};

package/dist/compositions/index.d.ts

@@ -1,11 +0,0 @@
-export * from "./image-banner/ImageBanner";
-export * from "./image-upload-modal/ImageUploadModal";
-export * from "./post/Post";
-export * from "./post-creator/PostCreator";
-export * from "./profile-banner/ProfileBanner";
-export * from "./profile-banner-image/ProfileBannerImage";
-export * from "./profile-banner-info/ProfileBannerInfo";
-export * from "./response/Response";
-export * from "./response-creator/ResponseCreator";
-export * from "./user-info/UserInfo";
-export * from "./user-recommendation/UserRecommendation";

package/dist/compositions/index.js

@@ -1,11 +0,0 @@
-export * from "./image-banner/ImageBanner";
-export * from "./image-upload-modal/ImageUploadModal";
-export * from "./post/Post";
-export * from "./post-creator/PostCreator";
-export * from "./profile-banner/ProfileBanner";
-export * from "./profile-banner-image/ProfileBannerImage";
-export * from "./profile-banner-info/ProfileBannerInfo";
-export * from "./response/Response";
-export * from "./response-creator/ResponseCreator";
-export * from "./user-info/UserInfo";
-export * from "./user-recommendation/UserRecommendation";

package/dist/compositions/post/Post.d.ts

@@ -1,75 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-declare const PostStyles: import("tailwind-variants").TVReturnType<{
-    size: {
-        lg: {
-            base: string[];
-        };
-        md: {};
-    };
-}, {
-    base: never[];
-    avatar: string[];
-    content: string[];
-    text: string[];
-    action: string[];
-}, undefined, {
-    size: {
-        lg: {
-            base: string[];
-        };
-        md: {};
-    };
-}, {
-    base: never[];
-    avatar: string[];
-    content: string[];
-    text: string[];
-    action: string[];
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        lg: {
-            base: string[];
-        };
-        md: {};
-    };
-}, {
-    base: never[];
-    avatar: string[];
-    content: string[];
-    text: string[];
-    action: string[];
-}, undefined, unknown, unknown, undefined>>;
-type PostVariants = VariantProps<typeof PostStyles>;
-type PostSize = "md" | "lg";
-interface PostProps extends PostVariants {
-    /** Size of the post, affecting layout and styling. */
-    size: PostSize;
-    /** The display name of the user who created the post. */
-    displayName: string;
-    /** The username or handle associated with the post. */
-    userName: string;
-    /** The date and time when the post was created. */
-    timestamp: Date;
-    /** The main text content of the post. */
-    text: string;
-    /** Avatar image URL */
-    src: string;
-    /** Triggered when the avatar is clicked. */
-    onAvatarClick: () => void;
-    /** Optional image source URL displayed within the post. */
-    imageSrc?: string;
-    /** Optional alt text for the post image, used for accessibility. */
-    imageAlt?: string;
-    /** Callback fired when the comment button is clicked. */
-    onCommentClick: () => void;
-    /** Callback fired when the like button is clicked. */
-    onLikeClick: () => void;
-    /** Callback fired when the share button is clicked. */
-    onShareClick: () => void;
-}
-/**
- * Detailed post component displaying user info, text content,
- * optional image, and action buttons (comment, like, share).
- */
-export declare const Post: React.FC<PostProps>;
-export {};

package/dist/compositions/post-base/PostBase.d.ts

@@ -1,41 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-declare const PostBaseStyles: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
-    base: string[];
-}, undefined, unknown, unknown, undefined>>;
-type PostBaseVariants = VariantProps<typeof PostBaseStyles>;
-export interface PostBaseProps extends PostBaseVariants {
-    /**
-     * Additional CSS class names to apply to the component.
-     */
-    className?: string;
-    /** Content to be rendered inside the PostBase component */
-    children: React.ReactNode;
-}
-/**
- * Base layout wrapper for a post, including an avatar section
- * and content area.
- */
-export declare const PostBase: React.FC<PostBaseProps>;
-export {};

package/dist/compositions/post-creator/PostCreator.d.ts

@@ -1,69 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-declare const PostCreatorStyles: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            input?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
-            avatar?: import("tailwind-merge").ClassNameValue;
-            action?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            input?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
-            avatar?: import("tailwind-merge").ClassNameValue;
-            action?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {}, {
-    content: string[];
-    avatar: string[];
-    title: string[];
-    input: string[];
-    action: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            input?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
-            avatar?: import("tailwind-merge").ClassNameValue;
-            action?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {}, {
-    content: string[];
-    avatar: string[];
-    title: string[];
-    input: string[];
-    action: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
-    content: string[];
-    avatar: string[];
-    title: string[];
-    input: string[];
-    action: string[];
-}, undefined, unknown, unknown, undefined>>;
-type PostCreatorVariants = VariantProps<typeof PostCreatorStyles>;
-interface PostCreatorProps extends PostCreatorVariants {
-    /** Avatar image URL */
-    src: string;
-    /** Triggered when the avatar is clicked. */
-    onAvatarClick: () => void;
-    /**
-     * Callback fired when the "Send" button is clicked.
-     *   Receives the textarea text and the optionally uploaded file.
-     */
-    onSendClick: (text: string, file: File | null) => void;
-}
-/**
- * PostCreator component
- *
- * Renders a post creation component.
- */
-export declare const PostCreator: React.FC<PostCreatorProps>;
-export {};