@krrli/cm-designsystem 1.32.1 → 1.32.3

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

@@ -1,187 +1,214 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } 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";
+import { Label } from "../typography/Label.js";
+import { HeartFilled } from "../icons/generated/HeartFilled.js";
+import { HeartOutline } from "../icons/generated/HeartOutline.js";
 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",
-            "cursor-pointer",
+  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",
+      "cursor-pointer"
+    ],
+    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"
         ],
-        icon: ["inline-flex"],
-        label: [],
+        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"
+        ]
+      }
     },
-    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: {},
-        },
+    hasLikes: {
+      true: {
+        base: ["hover:bg-pink-50", "hover:text-pink-600"],
+        icon: ["text-pink-500"],
+        label: ["text-pink-900"]
+      },
+      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,
+    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 }) })] }));
+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) => {
+    if (nextSelected === selected) return;
+    setSelected(nextSelected);
+    if (nextSelected) {
+      setLabel("Liked");
+    } else {
+      setLabel(
+        currentLikes === 0 ? "Like" : currentLikes === 1 ? "1 Like" : `${currentLikes} Likes`
+      );
+    }
+    onLikeChange(nextSelected);
+    setTimeout(() => {
+      setCurrentLikes((prev) => {
+        const updated = Math.max(0, prev + (nextSelected ? 1 : -1));
+        setLabel(
+          updated === 0 ? "Like" : updated === 1 ? "1 Like" : `${updated} Likes`
+        );
+        setAnimating(true);
+        setTimeout(() => setAnimating(false), 300);
+        return updated;
+      });
+    }, 2e3);
+  };
+  return /* @__PURE__ */ jsxs(
+    RadixToggle.Root,
+    {
+      className: base(),
+      pressed: selected,
+      onPressedChange: handlePressedChange,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: icon(),
+            "aria-hidden": "true",
+            "aria-label": selected ? "HeartFilled" : "HeartOutline",
+            children: selected ? /* @__PURE__ */ jsx(HeartFilled, {}) : /* @__PURE__ */ jsx(HeartOutline, {})
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: labelSlot(), children: /* @__PURE__ */ jsx(Label, { as: "span", size: "md", children: label }) })
+      ]
+    }
+  );
+};
+export {
+  LikeToggle
 };

package/dist/components/logo-link/LogoLink.d.ts

@@ -9,3 +9,4 @@ type LogoLinkProps = React.ComponentPropsWithoutRef<"a"> & {
 };
 export declare const LogoLink: ({ href, ...props }: LogoLinkProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=LogoLink.d.ts.map

package/dist/components/logo-link/LogoLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoLink.d.ts","sourceRoot":"","sources":["../../../src/components/logo-link/LogoLink.tsx"],"names":[],"mappings":"AAmCA;;GAEG;AACH,KAAK,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAAG;IACzD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,oBAA0B,aAAa,4CAqB/D,CAAC"}

package/dist/components/logo-link/LogoLink.js

@@ -1,38 +1,60 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import hoverLogoDefault from "../branding/hover-logo-default.svg";
-import hoverLogoHovered from "../branding/hover-logo-hovered.svg";
+import hoverLogoDefault from "../branding/hover-logo-default.svg.js";
+import hoverLogoHovered from "../branding/hover-logo-hovered.svg.js";
 const logoStyles = tv({
-    slots: {
-        link: [
-            "focus-ring-neutral",
-            "inline-flex",
-            "items-center",
-            "gap-2",
-            "align-middle",
-        ],
-        container: ["group", "relative", "w-auto"],
-        default: [
-            "transition-all",
-            "duration-200",
-            "select-none",
-            "block",
-            "h-10",
-            "w-auto",
-            "group-hover:hidden",
-        ],
-        hover: [
-            "transition-all",
-            "duration-200",
-            "select-none",
-            "hidden",
-            "h-11",
-            "w-auto",
-            "group-hover:block",
-        ],
-    },
+  slots: {
+    link: [
+      "focus-ring-neutral",
+      "inline-flex",
+      "items-center",
+      "gap-2",
+      "align-middle"
+    ],
+    container: ["group", "relative", "w-auto"],
+    default: [
+      "transition-all",
+      "duration-200",
+      "select-none",
+      "block",
+      "h-10",
+      "w-auto",
+      "group-hover:hidden"
+    ],
+    hover: [
+      "transition-all",
+      "duration-200",
+      "select-none",
+      "hidden",
+      "h-11",
+      "w-auto",
+      "group-hover:block"
+    ]
+  }
 });
-export const LogoLink = ({ href = "/", ...props }) => {
-    const styles = logoStyles();
-    return (_jsx("a", { href: href, className: styles.link(), ...props, children: _jsxs("div", { className: styles.container(), children: [_jsx("img", { src: hoverLogoDefault, alt: "Logo Default", className: styles.default(), draggable: false }), _jsx("img", { src: hoverLogoHovered, alt: "Logo Hovered", className: styles.hover(), draggable: false })] }) }));
+const LogoLink = ({ href = "/", ...props }) => {
+  const styles = logoStyles();
+  return /* @__PURE__ */ jsx("a", { href, className: styles.link(), ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.container(), children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: hoverLogoDefault,
+        alt: "Logo Default",
+        className: styles.default(),
+        draggable: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: hoverLogoHovered,
+        alt: "Logo Hovered",
+        className: styles.hover(),
+        draggable: false
+      }
+    )
+  ] }) });
+};
+export {
+  LogoLink
 };

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

@@ -1,23 +1,23 @@
-import React from "react";
-import { type VariantProps } from "tailwind-variants";
-declare const modalStyles: import("tailwind-variants").TVReturnType<{
+import { default as React } from 'react';
+import { 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;
-            container?: import("tailwind-merge").ClassNameValue;
-            overlay?: import("tailwind-merge").ClassNameValue;
-            actions?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            title?: import('tailwind-merge').ClassNameValue;
+            content?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
+            overlay?: 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;
-            container?: import("tailwind-merge").ClassNameValue;
-            overlay?: import("tailwind-merge").ClassNameValue;
-            actions?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            title?: import('tailwind-merge').ClassNameValue;
+            content?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -28,12 +28,12 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
     actions: string[];
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            title?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
-            container?: import("tailwind-merge").ClassNameValue;
-            overlay?: import("tailwind-merge").ClassNameValue;
-            actions?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            title?: import('tailwind-merge').ClassNameValue;
+            content?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -42,7 +42,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
     title: string[];
     container: string[];
     actions: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     overlay: string[];
     content: string[];
     title: string[];
@@ -73,3 +73,4 @@ export declare namespace ModalActions {
     var displayName: string;
 }
 export {};
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA2Bf,CAAC;AAEH,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAEtD,UAAU,UAAW,SAAQ,aAAa;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,IAAI,EAAE,OAAO,SAAS,CAAC;IACvB,OAAO,EAAE,OAAO,YAAY,CAAC;CA6C9B,CAAC;AAGF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,mBAEpE;yBAFe,SAAS;;;AAKzB,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,mBAEvE;yBAFe,YAAY"}