@krrli/cm-designsystem 1.32.0 → 1.32.2

package/dist/components/icons/generated/Upload.js

@@ -1,4 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { IconBase } from "../IconBase";
-export const Upload = (props) => (_jsxs(IconBase, { label: "Upload", ...props, children: [_jsx("path", { fill: "currentColor", d: "M14 10a1 1 0 0 0-1 1v2H3v-2a1 1 0 0 0-2 0v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2a1 1 0 0 0-1-1" }), _jsx("path", { fill: "currentColor", d: "M4.707 6.707 7 4.414V10a1 1 0 1 0 2 0V4.414l2.293 2.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414" })] }));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { IconBase } from "../IconBase.js";
+const Upload = (props) => /* @__PURE__ */ jsxs(IconBase, { label: "Upload", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M14 10a1 1 0 0 0-1 1v2H3v-2a1 1 0 0 0-2 0v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2a1 1 0 0 0-1-1"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M4.707 6.707 7 4.414V10a1 1 0 1 0 2 0V4.414l2.293 2.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414"
+    }
+  )
+] });
+export {
+  Upload
+};

package/dist/components/input/Input.js

@@ -1,48 +1,74 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import * as RadixForm from "@radix-ui/react-form";
 import React, { useState } from "react";
 import { tv } from "tailwind-variants";
-import { Label } from "../typography/Label";
-import { labelStyles, placeholderStyles } from "../typography/styles";
-import { ValidationMessage } from "../typography/ValidationMessage";
+import { Label } from "../typography/Label.js";
+import { labelStyles, placeholderStyles } from "../typography/styles.js";
+import { ValidationMessage } from "../typography/ValidationMessage.js";
 const inputStyles = tv({
-    slots: {
-        base: ["flex", "flex-col", "gap-1"],
-        controlContainer: ["relative", "inline-block"],
-        control: [
-            "w-full",
-            "ring",
-            "focus:ring-2",
-            "ring-slate-200",
-            "hover:ring-violet-600",
-            "focus-visible:ring-violet-600",
-            "focus-within:ring-violet-600",
-            "focus-visible:outline-none",
-            "bg-slate-50",
-            "rounded-lg",
-            "p-4",
-            "text-slate-700",
-            "transition",
-            "duration-300",
-            "ease-in-out",
-        ],
-        icon: ["absolute", "w-4", "h-4", "right-4", "top-4.5"],
-        message: ["text-error"],
-    },
-    variants: {
-        hasIcon: {
-            true: { control: ["pr-10"] },
-            false: { control: ["pr-4"] },
-        },
-    },
+  slots: {
+    base: ["flex", "flex-col", "gap-1"],
+    controlContainer: ["relative", "inline-block"],
+    control: [
+      "w-full",
+      "ring",
+      "focus:ring-2",
+      "ring-slate-200",
+      "hover:ring-violet-600",
+      "focus-visible:ring-violet-600",
+      "focus-within:ring-violet-600",
+      "focus-visible:outline-none",
+      "bg-slate-50",
+      "rounded-lg",
+      "p-4",
+      "text-slate-700",
+      "transition",
+      "duration-300",
+      "ease-in-out"
+    ],
+    icon: ["absolute", "w-4", "h-4", "right-4", "top-4.5"],
+    message: ["text-error"]
+  },
+  variants: {
+    hasIcon: {
+      true: { control: ["pr-10"] },
+      false: { control: ["pr-4"] }
+    }
+  }
 });
-export const Input = ({ type = "text", isRequired = false, ...props }) => {
-    const { base, controlContainer, control, message, icon } = inputStyles({
-        hasIcon: !!props.children,
-        ...props,
-    });
-    const [value, setValue] = useState("");
-    return (_jsxs(RadixForm.Field, { name: props.name, className: base(props), children: [_jsx(RadixForm.Label, { children: _jsx(Label, { size: "md", children: props.label }) }), _jsxs("div", { className: controlContainer(props), children: [_jsx(RadixForm.Control, { asChild: true, children: _jsx("input", { className: `${control(props)} ${labelStyles({ size: "md" })} ${placeholderStyles()}`, type: type, required: isRequired, placeholder: props.placeholder, onChange: (e) => setValue(e.target.value), onBlur: () => props.onChange(value) }) }), props.children &&
-                        React.cloneElement(props.children, { className: icon(props) })] }), _jsxs("div", { className: message(props), children: [isRequired && (_jsx(RadixForm.Message, { match: "valueMissing", children: _jsx(ValidationMessage, { children: `${props.name} is required` }) })), _jsx(RadixForm.Message, { match: "typeMismatch", children: _jsx(ValidationMessage, { children: `${props.name} is invalid` }) })] })] }));
+const Input = ({
+  type = "text",
+  isRequired = false,
+  ...props
+}) => {
+  const { base, controlContainer, control, message, icon } = inputStyles({
+    hasIcon: !!props.children,
+    ...props
+  });
+  const [value, setValue] = useState("");
+  return /* @__PURE__ */ jsxs(RadixForm.Field, { name: props.name, className: base(props), children: [
+    /* @__PURE__ */ jsx(RadixForm.Label, { children: /* @__PURE__ */ jsx(Label, { size: "md", children: props.label }) }),
+    /* @__PURE__ */ jsxs("div", { className: controlContainer(props), children: [
+      /* @__PURE__ */ jsx(RadixForm.Control, { asChild: true, children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: `${control(props)} ${labelStyles({ size: "md" })} ${placeholderStyles()}`,
+          type,
+          required: isRequired,
+          placeholder: props.placeholder,
+          onChange: (e) => setValue(e.target.value),
+          onBlur: () => props.onChange(value)
+        }
+      ) }),
+      props.children && React.cloneElement(props.children, { className: icon(props) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: message(props), children: [
+      isRequired && /* @__PURE__ */ jsx(RadixForm.Message, { match: "valueMissing", children: /* @__PURE__ */ jsx(ValidationMessage, { children: `${props.name} is required` }) }),
+      /* @__PURE__ */ jsx(RadixForm.Message, { match: "typeMismatch", children: /* @__PURE__ */ jsx(ValidationMessage, { children: `${props.name} is invalid` }) })
+    ] })
+  ] });
+};
+export {
+  Input
 };

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.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
 };