@krrli/cm-designsystem 1.1.0 → 1.19.8

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

@@ -0,0 +1,67 @@
+import React from "react";
+import { type VariantProps } from "tailwind-variants";
+import type { TabItemProps } from "./TabItem";
+declare const tabStyles: import("tailwind-variants").TVReturnType<{
+    selected: {
+        false: {
+            trigger: string[];
+        };
+        true: {
+            trigger: string[];
+        };
+    };
+    effect: {
+        first: {};
+        middle: {};
+        last: {};
+    };
+}, {
+    list: string[];
+    trigger: string[];
+}, undefined, {
+    selected: {
+        false: {
+            trigger: string[];
+        };
+        true: {
+            trigger: string[];
+        };
+    };
+    effect: {
+        first: {};
+        middle: {};
+        last: {};
+    };
+}, {
+    list: string[];
+    trigger: string[];
+}, import("tailwind-variants").TVReturnType<{
+    selected: {
+        false: {
+            trigger: string[];
+        };
+        true: {
+            trigger: string[];
+        };
+    };
+    effect: {
+        first: {};
+        middle: {};
+        last: {};
+    };
+}, {
+    list: string[];
+    trigger: string[];
+}, undefined, unknown, unknown, undefined>>;
+type TabVariants = VariantProps<typeof tabStyles>;
+export interface TabLabelProps {
+    value: string;
+    label: string;
+}
+export interface TabProps extends TabVariants {
+    value: string;
+    onChange?: (value: string) => void;
+    children: React.ReactElement<TabItemProps>[];
+}
+export declare const Tabs: (props: TabProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import React from "react";
+import { tv } from "tailwind-variants";
+import { Label } from "../typography/Label";
+const tabStyles = tv({
+    slots: {
+        list: ["bg-slate-200", "rounded-lg", "p-1", "flex", "gap-2", "group"],
+        trigger: ["pt-2", "pb-2", "pr-3", "pl-3", "rounded-md"],
+    },
+    variants: {
+        selected: {
+            false: {
+                trigger: ["bg-slate-200", "group-hover:text-slate-800"],
+            },
+            true: {
+                trigger: ["bg-white", "text-violet-600"],
+            },
+        },
+        effect: {
+            first: {},
+            middle: {},
+            last: {},
+        },
+    },
+    compoundVariants: [
+        {
+            selected: true,
+            effect: "first",
+            class: {
+                trigger: ["group-hover:pr-6"],
+            },
+        },
+        {
+            selected: true,
+            effect: "middle",
+            class: {
+                trigger: ["group-hover:pr-6", "group-hover:pl-6"],
+            },
+        },
+        {
+            selected: true,
+            effect: "last",
+            class: {
+                trigger: ["group-hover:pl-6"],
+            },
+        },
+    ],
+});
+export const Tabs = (props) => {
+    const { list, trigger } = tabStyles(props);
+    const [currentSelection, setSelection] = React.useState(props.value);
+    const getEffectVariant = (index, max) => index === 0 ? "first" : max === index ? "last" : "middle";
+    const onClick = (value) => {
+        setSelection(value);
+        props.onChange?.(value);
+    };
+    return (_jsxs(RadixTabs.Root, { defaultValue: props.value, children: [_jsx(RadixTabs.List, { className: list(), children: props.children.map((child, index) => (_jsx(RadixTabs.Trigger, { value: child.props.value, className: trigger({
+                        selected: child.props.value === currentSelection,
+                        effect: getEffectVariant(index, props.children.length - 1),
+                    }), onClick: () => onClick(child.props.value), children: _jsx(Label, { size: "lg", children: child.props.label }) }, child.props.value))) }), React.Children.map(props.children, (child, index) => {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, { key: props.value || index });
+                }
+                return child;
+            })] }));
+};

package/dist/components/tabs/Tabs.test.d.ts

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

package/dist/components/tabs/Tabs.test.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { TabItem } from "./TabItem";
+import { Tabs } from "./Tabs";
+describe("Tabs", () => {
+    test("should render three tabs", async () => {
+        // Arrange
+        render(_jsxs(Tabs, { value: "1", children: [_jsx(TabItem, { label: "tab1", value: "1", children: "tabItem1" }), _jsx(TabItem, { label: "tab2", value: "2", children: "tabItem2" }), _jsx(TabItem, { label: "tab3", value: "3", children: "tabItem3" })] }));
+        // Assert
+        expect(screen.getByRole("tab", { name: /tab1/i })).toBeVisible();
+        expect(screen.getByRole("tab", { name: /tab2/i })).toBeVisible();
+        expect(screen.getByRole("tab", { name: /tab3/i })).toBeVisible();
+        const tabItem1 = screen.getByRole("tabpanel", {
+            name: /tab1/i,
+        });
+        expect(tabItem1).toBeVisible();
+        expect(tabItem1).toHaveTextContent(/tabItem1/i);
+        const tabItems = screen
+            .getAllByRole("tabpanel", { hidden: true })
+            .filter((el) => el.hasAttribute("hidden"));
+        expect(tabItems.length).toBe(2);
+    });
+    test("should render first tab as selected when value = 1 is set", async () => {
+        // Arrange
+        render(_jsxs(Tabs, { value: "1", children: [_jsx(TabItem, { label: "tab1", value: "1", children: "tabItem1" }), _jsx(TabItem, { label: "tab2", value: "2", children: "tabItem2" }), _jsx(TabItem, { label: "tab3", value: "3", children: "tabItem3" })] }));
+        // Assert
+        const tabItem1 = screen.getByRole("tabpanel", {
+            name: /tab1/i,
+        });
+        expect(tabItem1).toBeVisible();
+        expect(tabItem1).toHaveTextContent(/tabItem1/i);
+        expect(tabItem1).not.toHaveAttribute("hidden");
+        const tabItems = screen
+            .getAllByRole("tabpanel", { hidden: true })
+            .filter((el) => el.hasAttribute("hidden"));
+        expect(tabItems.length).toBe(2);
+    });
+    test("should render second tab as selected when value = 2 is set", async () => {
+        // Arrange
+        render(_jsxs(Tabs, { value: "2", children: [_jsx(TabItem, { label: "tab1", value: "1", children: "tabItem1" }), _jsx(TabItem, { label: "tab2", value: "2", children: "tabItem2" }), _jsx(TabItem, { label: "tab3", value: "3", children: "tabItem3" })] }));
+        // Assert
+        const tabItem2 = screen.getByRole("tabpanel", {
+            name: /tab2/i,
+        });
+        expect(tabItem2).toBeVisible();
+        expect(tabItem2).toHaveTextContent(/tabItem2/i);
+        expect(tabItem2).not.toHaveAttribute("hidden");
+        const tabItems = screen
+            .getAllByRole("tabpanel", { hidden: true })
+            .filter((el) => el.hasAttribute("hidden"));
+        expect(tabItems.length).toBe(2);
+    });
+    test("should call onChange when second tab clicked", () => {
+        // Arrange
+        const onValueChange = vi.fn();
+        render(_jsxs(Tabs, { value: "2", onChange: onValueChange, children: [_jsx(TabItem, { label: "tab1", value: "1", children: "tabItem1" }), _jsx(TabItem, { label: "tab2", value: "2", children: "tabItem2" }), _jsx(TabItem, { label: "tab3", value: "3", children: "tabItem3" })] }));
+        fireEvent.click(screen.getByRole("tab", { name: /tab2/i }));
+        expect(onValueChange).toHaveBeenCalledWith("2");
+    });
+});

package/dist/components/text-link/TextLink.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from "tailwind-variants";
+declare const textLinkStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+type TextLinkVariants = VariantProps<typeof textLinkStyles>;
+interface TextLinkProps extends TextLinkVariants {
+    href: string;
+    children: React.ReactNode;
+}
+export declare const TextLink: (props: TextLinkProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/text-link/TextLink.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { Label } from "../typography/Label";
+const textLinkStyles = tv({
+    base: [
+        "text-violet-600",
+        "underline",
+        "decoration-violet-600",
+        "underline-offset-2",
+        "hover:decoration-violet-200",
+    ],
+});
+export const TextLink = (props) => {
+    return (_jsx(Label, { size: "sm", as: "span", children: _jsx("a", { href: props.href, className: textLinkStyles(props), children: props.children }) }));
+};

package/dist/components/text-link/TextLink.test.d.ts

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

package/dist/components/text-link/TextLink.test.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { TextLink } from "./TextLink";
+describe("Text Link", () => {
+    test("should render three tabs", async () => {
+        // Arrange
+        render(_jsx(TextLink, { href: "https://example.com", children: "Example Link" }));
+        // Assert
+        const link = screen.getByRole("link");
+        expect(link).toBeVisible();
+        expect(link).toHaveAttribute("href", "https://example.com");
+    });
+});

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,48 @@
+import { type VariantProps } from "tailwind-variants";
+declare const textareaStyles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            control?: import("tailwind-merge").ClassNameValue;
+            message?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            control?: import("tailwind-merge").ClassNameValue;
+            message?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    control: string[];
+    message: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            control?: import("tailwind-merge").ClassNameValue;
+            message?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    control: string[];
+    message: string[];
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string[];
+    control: string[];
+    message: string[];
+}, undefined, unknown, unknown, undefined>>;
+type TextareaVariants = VariantProps<typeof textareaStyles>;
+interface TextareaProps extends TextareaVariants {
+    name: string;
+    placeholder: string;
+    label?: string;
+    isRequired?: boolean;
+    onChange: (value: string) => void;
+}
+export declare const Textarea: ({ isRequired, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixForm from "@radix-ui/react-form";
+import { useState } from "react";
+import { tv } from "tailwind-variants";
+import { Label } from "../typography/Label";
+import { ValidationMessage } from "../typography/ValidationMessage";
+const textareaStyles = tv({
+    slots: {
+        base: ["flex", "flex-col", "gap-1"],
+        control: [
+            "w-full",
+            "ring",
+            "hover:ring-2",
+            "focus:ring-2",
+            "ring-slate-200",
+            "hover:ring-slate-300",
+            "focus:ring-violet-600",
+            "focus-visible:ring-violet-600",
+            "focus-within:ring-violet-600",
+            "focus-visible:outline-none",
+            "bg-slate-100",
+            "rounded-lg",
+            "p-4",
+            "transition",
+            "duration-300",
+            "ease-in-out",
+            "font-medium",
+            "text-slate-900",
+            "text-[20px]/[135%]",
+            "tracking-normal",
+            "placeholder:font-medium",
+            "placeholder:text-slate-500",
+            "placeholder:text-[20px]/[135%]",
+            "placeholder:tracking-normal",
+            "resize-none",
+        ],
+        message: ["text-error"],
+    },
+});
+export const Textarea = ({ isRequired = false, ...props }) => {
+    const { base, control, message } = textareaStyles({
+        ...props,
+    });
+    const [value, setValue] = useState("");
+    return (_jsxs(RadixForm.Field, { name: props.name, className: base(props), children: [props.label && (_jsx(RadixForm.Label, { children: _jsx(Label, { size: "md", children: props.label }) })), _jsx("div", { children: _jsx(RadixForm.Control, { asChild: true, children: _jsx("textarea", { className: control(props), required: isRequired, placeholder: props.placeholder, onChange: (e) => setValue(e.target.value), onBlur: () => props.onChange(value) }) }) }), _jsx("div", { className: message(props), children: isRequired && (_jsx(RadixForm.Message, { match: "valueMissing", children: _jsx(ValidationMessage, { children: `${props.name} is required` }) })) })] }));
+};

package/dist/components/timed-button/TimedButton.d.ts

@@ -0,0 +1,56 @@
+import { type VariantProps } from "tailwind-variants";
+declare const timedButtonStyles: import("tailwind-variants").TVReturnType<{
+    pressed: {
+        false: {};
+        true: {
+            base: string[];
+        };
+    };
+    animating: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, undefined, {
+    pressed: {
+        false: {};
+        true: {
+            base: string[];
+        };
+    };
+    animating: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, import("tailwind-variants").TVReturnType<{
+    pressed: {
+        false: {};
+        true: {
+            base: string[];
+        };
+    };
+    animating: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, undefined, unknown, unknown, undefined>>;
+type TimedButtonVariants = VariantProps<typeof timedButtonStyles>;
+interface TimedButtonProps extends TimedButtonVariants {
+    onClick: () => void;
+    icon?: React.ReactNode;
+    label?: string;
+    labelActive?: string;
+}
+export declare const TimedButton: ({ onClick, icon, label, labelActive, }: TimedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/timed-button/TimedButton.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { tv } from "tailwind-variants";
+import { Share } from "../icons/generated";
+import { Label } from "../typography/Label";
+const timedButtonStyles = tv({
+    slots: {
+        base: [
+            "inline-flex",
+            "items-center",
+            "justify-center",
+            "gap-2",
+            "h-8",
+            "px-3",
+            "py-2",
+            "rounded-full",
+            "focus-visible:outline-none",
+            "focus-visible:ring-2",
+            "focus-visible:ring-offset-2",
+            "disabled:opacity-50",
+            "disabled:pointer-events-none",
+            "hover:bg-slate-100",
+            "overflow-hidden",
+        ],
+        icon: ["inline-flex"],
+        label: ["transition-opacity", "duration-350", "ease-in-out"],
+    },
+    variants: {
+        pressed: {
+            false: {},
+            true: {
+                base: ["bg-slate-100"],
+            },
+        },
+        animating: {
+            true: {},
+            false: {},
+        },
+    },
+    compoundVariants: [
+        {
+            pressed: true,
+            animating: true,
+            class: {
+                label: ["opacity-0"],
+            },
+        },
+        {
+            pressed: true,
+            animating: false,
+            class: {
+                label: ["opacity-100"],
+            },
+        },
+        {
+            pressed: false,
+            animating: true,
+            class: {
+                label: ["opacity-0"],
+            },
+        },
+        {
+            pressed: false,
+            animating: false,
+            class: {
+                label: ["opacity-100"],
+            },
+        },
+    ],
+    defaultVariants: {
+        pressed: false,
+        animating: false,
+    },
+});
+export const TimedButton = ({ onClick, icon = _jsx(Share, {}), label = "Copy Link", labelActive = "Link copied", }) => {
+    const [pressed, setPressed] = useState(false);
+    const [animating, setAnimating] = useState(false);
+    const timeoutsRef = useRef([]);
+    const { base, icon: iconClass, label: labelClass, } = timedButtonStyles({ pressed, animating });
+    useEffect(() => {
+        // Cleanup all timeouts when component unmounts
+        return () => {
+            timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+            timeoutsRef.current = [];
+        };
+    }, []);
+    const handleClick = () => {
+        // Klick -> Pressed
+        setPressed(true);
+        setAnimating(true);
+        onClick();
+        // Hover -> Pressed: Dissolve über 350ms
+        const timeout1 = setTimeout(() => setAnimating(false), 350);
+        timeoutsRef.current.push(timeout1);
+        // Nach 1s Verzögerung -> zurück zu Default
+        const timeout2 = setTimeout(() => {
+            setPressed(false);
+            setAnimating(true);
+            // Dissolve zurück
+            const timeout3 = setTimeout(() => setAnimating(false), 350);
+            timeoutsRef.current.push(timeout3);
+        }, 1000);
+        timeoutsRef.current.push(timeout2);
+    };
+    return (_jsxs("button", { className: base(), onClick: handleClick, children: [_jsx("span", { className: iconClass(), "aria-hidden": "true", "aria-label": "Share", children: icon }), _jsx("span", { className: labelClass(), children: _jsx(Label, { as: "span", size: "md", children: pressed ? labelActive : label }) })] }));
+};

package/dist/components/timed-button/TimedButton.test.d.ts

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

package/dist/components/timed-button/TimedButton.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 { TimedButton } from "./TimedButton";
+describe("TimedButton", () => {
+    test("should render icon and label", async () => {
+        // Arrange
+        render(_jsx(TimedButton, { onClick: function () { }, label: "Copy Link", labelActive: "Link Copied" }));
+        const button = screen.getByRole("button");
+        expect(button).toBeVisible();
+        expect(button).toHaveTextContent("Copy Link");
+        // Icon prüfen
+        expect(screen.getByLabelText("Share")).toBeInTheDocument();
+    });
+    test("renders initial state and toggles correctly", async () => {
+        // Arrange
+        const onClick = vi.fn();
+        render(_jsx(TimedButton, { onClick: onClick, label: "Copy Link", labelActive: "Link Copied" }));
+        const button = screen.getByRole("button");
+        expect(button).toBeVisible();
+        // Initial state with Likes
+        expect(button).toHaveTextContent("Copy Link");
+        expect(screen.getByLabelText("Share")).toBeInTheDocument();
+        // Simulate click
+        fireEvent.click(button);
+        // Immediate state after click: "Liked" label + HeartFilled
+        expect(button).toHaveTextContent("Link Copied");
+        expect(screen.getByLabelText("Share")).toBeInTheDocument();
+        expect(onClick).toHaveBeenCalled();
+        // Wait for animation + likes count update (1s delay + 350ms animation)
+        await waitFor(() => {
+            expect(button).toHaveTextContent("Copy Link");
+        }, { timeout: 1500 });
+    });
+});

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

@@ -0,0 +1,62 @@
+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.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixToggle from "@radix-ui/react-toggle";
+import { tv } from "tailwind-variants";
+import { ReplyFilled, ReplyOutline } 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: {
+            true: {
+                base: ["hover:bg-violet-50", "hover:text-violet-600"],
+                icon: [
+                    "text-violet-600",
+                    "hover:transition-all",
+                    "hover:duration-300",
+                    "hover:ease-out",
+                ],
+                label: [
+                    "text-inherit",
+                    "hover:transition-all",
+                    "hover:duration-300",
+                    "hover:ease-out",
+                ],
+            },
+            false: {
+                base: ["hover:bg-violet-50", "hover:text-violet-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",
+                ],
+            },
+        },
+    },
+});
+export const Toggle = ({ ariaLabel, labelText, pressed = false, onToggle, }) => {
+    const { base, icon, label: labelSlot } = toggleStyles({ pressed });
+    return (_jsxs(RadixToggle.Root, { "aria-label": ariaLabel, className: base(), pressed: pressed, onPressedChange: onToggle, children: [_jsx("span", { className: icon(), "aria-hidden": "true", "aria-label": pressed ? "ReplyFilled" : "ReplyOutline", children: pressed ? _jsx(ReplyFilled, {}) : _jsx(ReplyOutline, {}) }), _jsx("span", { className: labelSlot(), children: _jsx(Label, { as: "span", size: "md", children: labelText }) })] }));
+};

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

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