@krrli/cm-designsystem 1.1.0 → 1.19.7

package/dist/components/like-toggle/LikeToggle.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixToggle from "@radix-ui/react-toggle";
+import { useState } from "react";
+import { tv } from "tailwind-variants";
+import { HeartFilled, HeartOutline } from "../icons/generated";
+import { Label } from "../typography/Label";
+const toggleStyles = tv({
+    slots: {
+        base: [
+            "inline-flex",
+            "items-center",
+            "justify-center",
+            "gap-2",
+            "h-8",
+            "px-3",
+            "py-2",
+            "rounded-full",
+            "transition-all",
+            "duration-150",
+            "ease-in-out",
+            "focus-visible:outline-none",
+            "focus-visible:ring-2",
+            "focus-visible:ring-offset-2",
+            "disabled:opacity-50",
+            "disabled:pointer-events-none",
+        ],
+        icon: ["inline-flex"],
+        label: [],
+    },
+    variants: {
+        pressed: {
+            false: {
+                base: ["bg-transparent", "hover:bg-pink-50", "hover:text-pink-600"],
+                icon: [
+                    "text-inherit",
+                    "hover:transition-all",
+                    "hover:duration-350",
+                    "hover:ease-in-out",
+                ],
+                label: [
+                    "text-inherit",
+                    "hover:transition-all",
+                    "hover:duration-350",
+                    "hover:ease-in-out",
+                ],
+            },
+            true: {
+                base: [],
+                icon: ["text-pink-500", "transition-all", "duration-300", "ease-out"],
+                label: [
+                    "text-pink-900",
+                    "transition-transform",
+                    "duration-300",
+                    "ease-out",
+                ],
+            },
+        },
+        hasLikes: {
+            true: {
+                base: ["hover:bg-pink-50", "hover:text-pink-600"],
+                icon: ["text-pink-500"],
+                label: ["text-pink-900"],
+            },
+            false: "",
+        },
+        animating: {
+            true: {},
+            false: {},
+        },
+    },
+    compoundVariants: [
+        // pressed + animating --> Label ausblenden / nach oben verschieben
+        {
+            pressed: true,
+            animating: true,
+            class: {
+                label: [
+                    "opacity-0",
+                    "-translate-y-1",
+                    "transition-all",
+                    "duration-300",
+                    "ease-out",
+                ],
+                icon: ["text-pink-500"],
+            },
+        },
+        // pressed + nicht animating --> Label sichtbar
+        {
+            pressed: true,
+            animating: false,
+            class: {
+                label: [
+                    "opacity-100",
+                    "translate-y-0",
+                    "text-pink-900",
+                    "transition-all",
+                    "duration-300",
+                    "ease-out",
+                ],
+                icon: ["text-pink-500"],
+            },
+        },
+        // pressed + hasLikes --> überschreibt Hover-Farbe
+        {
+            pressed: true,
+            hasLikes: true,
+            class: {
+                label: ["text-pink-900"],
+            },
+        },
+        // not pressed + animating
+        {
+            pressed: false,
+            animating: true,
+            class: {
+                label: [
+                    "opacity-0",
+                    "-translate-y-1",
+                    "transition-all",
+                    "duration-300",
+                    "ease-out",
+                ],
+            },
+        },
+        // not pressed + nicht animating
+        {
+            pressed: false,
+            animating: false,
+            class: {
+                label: [
+                    "opacity-100",
+                    "translate-y-0",
+                    "transition-all",
+                    "duration-300",
+                    "ease-out",
+                ],
+            },
+        },
+    ],
+    defaultVariants: {
+        pressed: false,
+        animating: false,
+    },
+});
+export const LikeToggle = ({ pressed = false, likes = 0, onLikeChange, }) => {
+    const [animating, setAnimating] = useState(false);
+    const [selected, setSelected] = useState(pressed);
+    const [currentLikes, setCurrentLikes] = useState(likes);
+    const [label, setLabel] = useState(likes ? (likes === 1 ? `${likes} Like` : `${likes} Likes`) : "Like");
+    const { base, icon, label: labelSlot, } = toggleStyles({
+        pressed: selected,
+        hasLikes: currentLikes > 0,
+        animating,
+    });
+    const handlePressedChange = (nextSelected) => {
+        // Ignore redundant events
+        if (nextSelected === selected)
+            return;
+        setSelected(nextSelected);
+        // Immediate label: show 'Liked' when liking, otherwise reflect current count or 'Like' if zero
+        if (nextSelected) {
+            setLabel("Liked");
+        }
+        else {
+            setLabel(currentLikes === 0
+                ? "Like"
+                : currentLikes === 1
+                    ? "1 Like"
+                    : `${currentLikes} Likes`);
+        }
+        onLikeChange(nextSelected);
+        // After 2s apply count change + dissolve animation
+        setTimeout(() => {
+            setCurrentLikes((prev) => {
+                const updated = Math.max(0, prev + (nextSelected ? 1 : -1));
+                // Final label after animation
+                setLabel(updated === 0 ? "Like" : updated === 1 ? "1 Like" : `${updated} Likes`);
+                setAnimating(true);
+                setTimeout(() => setAnimating(false), 300);
+                return updated;
+            });
+        }, 2000);
+    };
+    return (_jsxs(RadixToggle.Root, { className: base(), pressed: selected, onPressedChange: handlePressedChange, children: [_jsx("span", { className: icon(), "aria-hidden": "true", "aria-label": selected ? "HeartFilled" : "HeartOutline", children: selected ? _jsx(HeartFilled, {}) : _jsx(HeartOutline, {}) }), _jsx("span", { className: labelSlot(), children: _jsx(Label, { as: "span", size: "md", children: label }) })] }));
+};

package/dist/components/like-toggle/LikeToggle.test.d.ts

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

package/dist/components/like-toggle/LikeToggle.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { LikeToggle } from "./LikeToggle";
+describe("LikeToggle", () => {
+    test("should render icon and label", async () => {
+        // Arrange
+        render(_jsx(LikeToggle, { likes: 3, onLikeChange: () => { } }));
+        const button = screen.getByRole("button");
+        expect(button).toBeVisible();
+        expect(button).toHaveTextContent("3 Likes");
+        // Icon prüfen
+        expect(screen.getByLabelText("HeartOutline")).toBeInTheDocument();
+    });
+    test("renders initial state and toggles correctly", async () => {
+        // Arrange
+        const onLikeChange = vi.fn();
+        render(_jsx(LikeToggle, { likes: 3, onLikeChange: onLikeChange }));
+        const button = screen.getByRole("button");
+        expect(button).toBeVisible();
+        // Initial state with Likes
+        expect(button).toHaveTextContent("3 Likes");
+        expect(screen.getByLabelText("HeartOutline")).toBeInTheDocument();
+        // Simulate click
+        fireEvent.click(button);
+        // Immediate state after click: "Liked" label + HeartFilled
+        expect(button).toHaveTextContent("Liked");
+        expect(screen.getByLabelText("HeartFilled")).toBeInTheDocument();
+        expect(onLikeChange).toHaveBeenCalledWith(true);
+        // Wait for animation + likes count update (2s delay + 300ms animation)
+        await waitFor(() => {
+            expect(button).toHaveTextContent("4 Likes");
+        }, { timeout: 2500 });
+    });
+});

package/dist/components/modal/Modal.d.ts

@@ -0,0 +1,75 @@
+import React from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const modalStyles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            overlay?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            actions?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            overlay?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            actions?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    content: string[];
+    title: string[];
+    container: string[];
+    actions: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            overlay?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            actions?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    content: string[];
+    title: string[];
+    container: string[];
+    actions: string[];
+}, import("tailwind-variants").TVReturnType<unknown, {
+    overlay: string[];
+    content: string[];
+    title: string[];
+    container: string[];
+    actions: string[];
+}, undefined, unknown, unknown, undefined>>;
+type ModalVariants = VariantProps<typeof modalStyles>;
+interface ModalProps extends ModalVariants {
+    title: string;
+    open: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    children: React.ReactNode;
+}
+export declare const Modal: React.FC<ModalProps> & {
+    Body: typeof ModalBody;
+    Actions: typeof ModalActions;
+};
+export declare function ModalBody({ children }: {
+    children: React.ReactNode;
+}): React.ReactNode;
+export declare namespace ModalBody {
+    var displayName: string;
+}
+export declare function ModalActions({ children }: {
+    children: React.ReactNode;
+}): React.ReactNode;
+export declare namespace ModalActions {
+    var displayName: string;
+}
+export {};

package/dist/components/modal/Modal.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import React from "react";
+import { tv } from "tailwind-variants";
+import { Cancel } from "../icons/generated";
+import { Heading } from "../typography/Heading";
+const modalStyles = tv({
+    slots: {
+        overlay: ["fixed", "inset-0", "bg-black/20"],
+        content: [
+            "fixed",
+            "top-1/2",
+            "left-1/2",
+            "w-full",
+            "max-w-md",
+            "-translate-x-1/2",
+            "-translate-y-1/2",
+            "rounded-2xl",
+            "bg-white",
+        ],
+        title: [
+            "flex",
+            "justify-between",
+            "rounded-t-2xl",
+            "bg-violet-600",
+            "pt-6",
+            "pr-8",
+            "pb-6",
+            "pl-8",
+            "text-white",
+        ],
+        container: ["flex", "flex-col", "items-center", "gap-12", "p-8"],
+        actions: ["flex", "items-center", "gap-4"],
+    },
+});
+export const Modal = (props) => {
+    let modalBody = null;
+    let modalActions = null;
+    React.Children.forEach(props.children, (child) => {
+        if (!React.isValidElement(child))
+            return;
+        switch (child.type) {
+            case ModalBody:
+                modalBody = child;
+                break;
+            case ModalActions:
+                modalActions = child;
+                break;
+        }
+    });
+    const { overlay, content, title, container, actions } = modalStyles(props);
+    return (_jsx(RadixDialog.Root, { open: props.open, onOpenChange: props.onOpenChange, children: _jsxs(RadixDialog.Portal, { children: [_jsx(RadixDialog.Overlay, { className: overlay() }), _jsxs(RadixDialog.Content, { className: content(), children: [_jsxs(RadixDialog.Title, { className: title(), children: [_jsx(Heading, { as: "span", size: "3", children: props.title }), _jsx(RadixDialog.Close, { children: _jsx(Cancel, {}) })] }), _jsxs("div", { className: container(), children: [_jsx("div", { children: modalBody }), _jsx("div", { className: actions(), children: modalActions })] })] })] }) }));
+};
+ModalBody.displayName = "ModalBody";
+export function ModalBody({ children }) {
+    return children;
+}
+ModalActions.displayName = "ModalActions";
+export function ModalActions({ children }) {
+    return children;
+}
+Modal.Body = ModalBody;
+Modal.Actions = ModalActions;

package/dist/components/modal/Modal.test.d.ts

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

package/dist/components/modal/Modal.test.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { Button } from "../button/Button";
+import { Cancel, Checkmark } from "../icons/generated";
+import { Modal } from "./Modal";
+describe("Modal", () => {
+    test("should open modal", async () => {
+        // Arrange
+        render(_jsx("div", { children: _jsxs(Modal, { open: true, onOpenChange: () => { }, title: "Modal", children: [_jsx(Modal.Body, { children: "Body" }), _jsxs(Modal.Actions, { children: [_jsx(Button, { intent: "primary", size: "md", label: "Exit", onClick: () => { }, children: _jsx(Cancel, {}) }), _jsx(Button, { intent: "secondary", size: "md", label: "Save", onClick: () => { }, children: _jsx(Checkmark, {}) })] })] }) }));
+        // Assert
+        expect(screen.getByRole("dialog")).toBeVisible();
+        expect(screen.getByText(/body/i)).toBeVisible();
+        expect(screen.getByText(/modal/i)).toBeVisible();
+        expect(screen.getByRole("button", { name: /exit/i })).toBeVisible();
+        expect(screen.getByRole("button", { name: /save/i })).toBeVisible();
+    });
+    test("should open modal", async () => {
+        // Arrange
+        render(_jsx("div", { children: _jsxs(Modal, { open: false, onOpenChange: () => { }, title: "Modal", children: [_jsx(Modal.Body, { children: "Body" }), _jsxs(Modal.Actions, { children: [_jsx(Button, { intent: "primary", size: "md", label: "Exit", onClick: () => { }, children: _jsx(Cancel, {}) }), _jsx(Button, { intent: "secondary", size: "md", label: "Save", onClick: () => { }, children: _jsx(Checkmark, {}) })] })] }) }));
+        // Assert
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+});

package/dist/components/navi-button/NaviButton.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { type VariantProps } from "tailwind-variants";
+import type { IconBaseProps } from "../icons/IconBase";
+declare const naviButtonStyles: import("tailwind-variants").TVReturnType<{
+    intent: {
+        secondary: string[];
+    };
+}, undefined, string[], {
+    intent: {
+        secondary: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    intent: {
+        secondary: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+type NaviButtonVariants = VariantProps<typeof naviButtonStyles>;
+type NaviButtonIntent = "secondary";
+interface NaviButtonProps extends NaviButtonVariants {
+    label: string;
+    intent?: NaviButtonIntent;
+    onClick: () => void;
+    children: React.ReactElement<IconBaseProps>;
+}
+export declare const NaviButton: ({ intent, ...props }: NaviButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/navi-button/NaviButton.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { tv } from "tailwind-variants";
+import { Label } from "../typography/Label";
+const naviButtonStyles = tv({
+    base: [
+        "flex",
+        "flex-col",
+        "gap-1",
+        "transition",
+        "duration-300",
+        "ease-in-out",
+        "text-white",
+        "rounded-lg",
+        "items-center",
+        "pt-3",
+        "pb-3",
+        "pl-2",
+        "pr-2",
+    ],
+    variants: {
+        intent: {
+            secondary: ["bg-violet-600", "hover:bg-violet-700"],
+        },
+    },
+});
+export const NaviButton = ({ intent = "secondary", ...props }) => {
+    return (_jsxs("button", { className: naviButtonStyles({ intent, ...props }), onClick: props.onClick, "aria-label": props.label, children: [props.children, _jsx(Label, { as: "span", size: "sm", children: props.label })] }));
+};

package/dist/components/navi-button/NaviButton.test.d.ts

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

package/dist/components/navi-button/NaviButton.test.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { Mumble } from "../icons/generated";
+import { NaviButton } from "./NaviButton";
+describe("NaviButton", () => {
+    test("should render button with icon", async () => {
+        // Arrange
+        render(_jsx(NaviButton, { label: "button", onClick: vi.fn(), children: _jsx(Mumble, {}) }));
+        // Assert
+        expect(screen.getByRole("button")).toBeVisible();
+        expect(screen.getByRole("button")).toHaveTextContent("button");
+        expect(screen.getByText("Mumble")).toBeVisible();
+    });
+    test("should call onClick when clicked", () => {
+        // Arrange
+        const onClick = vi.fn();
+        render(_jsx(NaviButton, { label: "button", onClick: onClick, children: _jsx(Mumble, {}) }));
+        fireEvent.click(screen.getByRole("button"));
+        expect(onClick).toHaveBeenCalled();
+    });
+});

package/dist/components/navi-user-button/NaviUserButton.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const naviUserButtonStyles: import("tailwind-variants").TVReturnType<{
+    intent: {
+        secondary: string[];
+    };
+}, undefined, string[], {
+    intent: {
+        secondary: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    intent: {
+        secondary: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+type NaviUserButtonVariants = VariantProps<typeof naviUserButtonStyles>;
+type NaviUserButtonIntent = "secondary";
+interface NaviUserButtonProps extends NaviUserButtonVariants {
+    ariaLabel: string;
+    intent?: NaviUserButtonIntent;
+    src: string;
+    onClick: () => void;
+    children: React.ReactNode;
+}
+export declare const NaviUserButton: ({ intent, ...props }: NaviUserButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/navi-user-button/NaviUserButton.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { tv } from "tailwind-variants";
+import { Avatar } from "../avatar/Avatar";
+const naviUserButtonStyles = tv({
+    base: [
+        "flex",
+        "flex-col",
+        "gap-1",
+        "transition",
+        "duration-300",
+        "ease-in-out",
+        "text-white",
+        "rounded-lg",
+        "items-center",
+        "pt-3",
+        "pb-3",
+        "pl-2",
+        "pr-2",
+    ],
+    variants: {
+        intent: {
+            secondary: ["bg-violet-600", "hover:bg-violet-700"],
+        },
+    },
+});
+export const NaviUserButton = ({ intent = "secondary", ...props }) => {
+    return (_jsx("button", { className: naviUserButtonStyles({ intent, ...props }), onClick: props.onClick, "aria-label": props.ariaLabel, children: _jsx(Avatar, { label: props.ariaLabel, size: "sm", src: props.src, children: props.children }) }));
+};

package/dist/components/round-button/RoundButton.d.ts

@@ -0,0 +1,25 @@
+import { type VariantProps } from "tailwind-variants";
+import type { IconBaseProps } from "../icons/IconBase";
+declare const roundButtonStyles: import("tailwind-variants").TVReturnType<{
+    intent: {
+        primary: string[];
+    };
+}, undefined, string[], {
+    intent: {
+        primary: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    intent: {
+        primary: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+type RoundButtonVariants = VariantProps<typeof roundButtonStyles>;
+type RoundButtonIntent = "primary";
+interface RoundButtonProps extends RoundButtonVariants {
+    intent?: RoundButtonIntent;
+    ariaLabel: string;
+    onClick: () => void;
+    children: React.ReactElement<IconBaseProps>;
+}
+export declare const RoundButton: ({ intent, ...props }: RoundButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/round-button/RoundButton.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+const roundButtonStyles = tv({
+    base: [
+        "text-white",
+        "rounded-full",
+        "hover:ring-3",
+        "active:ring-4",
+        "transition",
+        "duration-350",
+        "active:duration-300",
+        "ease-in-out",
+        "p-4",
+    ],
+    variants: {
+        intent: {
+            primary: [
+                "bg-slate-600",
+                "hover:bg-slate-700",
+                "hover:ring-slate-100",
+                "active:ring-violet-200",
+            ],
+        },
+    },
+});
+export const RoundButton = ({ intent = "primary", ...props }) => {
+    return (_jsx("button", { className: roundButtonStyles({ intent }), onClick: props.onClick, "aria-label": props.ariaLabel, children: props.children }));
+};

package/dist/components/round-button/RoundButton.test.d.ts

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

package/dist/components/round-button/RoundButton.test.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { Mumble } from "../icons/generated";
+import { RoundButton } from "./RoundButton";
+describe("RoundButton", () => {
+    test("should render button with icon", async () => {
+        // Arrange
+        render(_jsx(RoundButton, { onClick: vi.fn(), ariaLabel: "Mumble", children: _jsx(Mumble, {}) }));
+        // Assert
+        expect(screen.getByRole("button")).toBeVisible();
+        expect(screen.getByText("Mumble")).toBeVisible();
+    });
+    test("should call onChange when second tab clicked", () => {
+        // Arrange
+        const onClick = vi.fn();
+        render(_jsx(RoundButton, { onClick: onClick, ariaLabel: "Mumble", children: _jsx(Mumble, {}) }));
+        fireEvent.click(screen.getByRole("button"));
+        expect(onClick).toHaveBeenCalled();
+    });
+});

package/dist/components/tabs/TabItem.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const tabItemStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, undefined, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, undefined, unknown, unknown, undefined>>;
+type TabItemVariants = VariantProps<typeof tabItemStyles>;
+export interface TabItemProps extends TabItemVariants {
+    value: string;
+    label: string;
+    children: React.ReactNode;
+}
+export declare const TabItem: (props: TabItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tabs/TabItem.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import React from "react";
+import { tv } from "tailwind-variants";
+const tabItemStyles = tv({});
+export const TabItem = (props) => {
+    return (_jsx(RadixTabs.Content, { value: props.value, className: tabItemStyles(props), children: React.Children.map(props.children, (child, index) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, { key: props.value || index });
+            }
+            return child;
+        }) }));
+};