@krrli/cm-designsystem 1.32.0 → 1.32.2

package/dist/components/textarea/Textarea.js

@@ -1,48 +1,64 @@
 "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 { useState } from "react";
 import { tv } from "tailwind-variants";
-import { Label } from "../typography/Label";
-import { ValidationMessage } from "../typography/ValidationMessage";
+import { Label } from "../typography/Label.js";
+import { ValidationMessage } from "../typography/ValidationMessage.js";
 const textareaStyles = tv({
-    slots: {
-        base: ["flex", "flex-col", "gap-1", "w-full", "h-full"],
-        control: [
-            "w-full",
-            "h-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"],
-    },
+  slots: {
+    base: ["flex", "flex-col", "gap-1", "w-full", "h-full"],
+    control: [
+      "w-full",
+      "h-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(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` }) })) })] }));
+const Textarea = ({ isRequired = false, ...props }) => {
+  const { base, control, message } = textareaStyles({
+    ...props
+  });
+  const [value, setValue] = useState("");
+  return /* @__PURE__ */ jsxs(RadixForm.Field, { name: props.name, className: base(props), children: [
+    props.label && /* @__PURE__ */ jsx(RadixForm.Label, { children: /* @__PURE__ */ jsx(Label, { size: "md", children: props.label }) }),
+    /* @__PURE__ */ jsx(RadixForm.Control, { asChild: true, children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: control(props),
+        required: isRequired,
+        placeholder: props.placeholder,
+        onChange: (e) => setValue(e.target.value),
+        onBlur: () => props.onChange(value)
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: message(props), children: isRequired && /* @__PURE__ */ jsx(RadixForm.Message, { match: "valueMissing", children: /* @__PURE__ */ jsx(ValidationMessage, { children: `${props.name} is required` }) }) })
+  ] });
+};
+export {
+  Textarea
 };

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

@@ -1,109 +1,123 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { cn, tv } from "tailwind-variants";
-import { AccessibleButton, } from "../accessible-button/AccessibleButton";
-import { Label } from "../typography/Label";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { tv, cn } from "tailwind-variants";
+import { AccessibleButton } from "../accessible-button/AccessibleButton.js";
+import { Label } from "../typography/Label.js";
 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: ["w-4", "h-4", "inline-flex"],
-        label: ["transition-opacity", "duration-350", "ease-in-out"],
+  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: ["w-4", "h-4", "inline-flex"],
+    label: ["transition-opacity", "duration-350", "ease-in-out"]
+  },
+  variants: {
+    pressed: {
+      false: {},
+      true: {
+        base: ["bg-slate-100"]
+      }
     },
-    variants: {
-        pressed: {
-            false: {},
-            true: {
-                base: ["bg-slate-100"],
-            },
-        },
-        animating: {
-            true: {},
-            false: {},
-        },
+    animating: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      pressed: true,
+      animating: true,
+      class: {
+        label: ["opacity-0"]
+      }
     },
-    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,
+    {
+      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
+  }
 });
-/**
- * A button component that temporarily changes its label when pressed.
- */
-export const TimedButton = ({ className, onClick, ...props }) => {
-    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);
+const TimedButton = ({
+  className,
+  onClick,
+  ...props
+}) => {
+  const [pressed, setPressed] = useState(false);
+  const [animating, setAnimating] = useState(false);
+  const timeoutsRef = useRef([]);
+  const {
+    base,
+    icon: iconClass,
+    label: labelClass
+  } = timedButtonStyles({ pressed, animating });
+  useEffect(() => {
+    return () => {
+      timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+      timeoutsRef.current = [];
     };
-    return (_jsxs(AccessibleButton, { className: cn(base(props), className), onClick: handleClick, ...props, children: [props.icon && _jsx(props.icon, { className: iconClass(), "aria-hidden": "true" }), _jsx(Label, { as: "span", size: "md", className: labelClass(), children: pressed ? props.labelActive : props.label })] }));
+  }, []);
+  const handleClick = () => {
+    setPressed(true);
+    setAnimating(true);
+    onClick?.();
+    const timeout1 = setTimeout(() => setAnimating(false), 350);
+    timeoutsRef.current.push(timeout1);
+    const timeout2 = setTimeout(() => {
+      setPressed(false);
+      setAnimating(true);
+      const timeout3 = setTimeout(() => setAnimating(false), 350);
+      timeoutsRef.current.push(timeout3);
+    }, 1e3);
+    timeoutsRef.current.push(timeout2);
+  };
+  return /* @__PURE__ */ jsxs(
+    AccessibleButton,
+    {
+      className: cn(base(props), className),
+      onClick: handleClick,
+      ...props,
+      children: [
+        props.icon && /* @__PURE__ */ jsx(props.icon, { className: iconClass(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(Label, { as: "span", size: "md", className: labelClass(), children: pressed ? props.labelActive : props.label })
+      ]
+    }
+  );
+};
+export {
+  TimedButton
 };

package/dist/components/toggle/Toggle.js

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

package/dist/components/typography/AccessibleTypography.js

@@ -1,11 +1,14 @@
 import { createElement } from "react";
-/**
- * A flexible, semantic, accessible typography component that allows you
- * to set the HTML tag and optionally make it clickable.
- */
-export const AccessibleTypography = (props) => {
-    return createElement(props.as ?? "span", {
-        className: props.className,
-        "aria-label": props.ariaLabel,
-    }, props.children);
+const AccessibleTypography = (props) => {
+  return createElement(
+    props.as ?? "span",
+    {
+      className: props.className,
+      "aria-label": props.ariaLabel
+    },
+    props.children
+  );
+};
+export {
+  AccessibleTypography
 };

package/dist/components/typography/Heading.js

@@ -1,11 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "tailwind-variants";
-import { AccessibleTypography, } from "./AccessibleTypography";
-import { headingStyles } from "./styles";
-/**
- * A semantic, accessible Heading component built on top of the AccessibleTypography component.
- */
-export const Heading = ({ as, className, ...props }) => {
-    const styles = cn(headingStyles(props), className);
-    return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
+import { AccessibleTypography } from "./AccessibleTypography.js";
+import { headingStyles } from "./styles.js";
+const Heading = ({
+  as,
+  className,
+  ...props
+}) => {
+  const styles = cn(headingStyles(props), className);
+  return /* @__PURE__ */ jsx(AccessibleTypography, { as, className: styles, ...props });
+};
+export {
+  Heading
 };

package/dist/components/typography/Label.js

@@ -1,11 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "tailwind-variants";
-import { AccessibleTypography, } from "./AccessibleTypography";
-import { labelStyles } from "./styles";
-/**
- * A semantic, accessible Label component built on top of the AccessibleTypography component.
- */
-export const Label = ({ as = "label", className, ...props }) => {
-    const styles = cn(labelStyles(props), className);
-    return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
+import { AccessibleTypography } from "./AccessibleTypography.js";
+import { labelStyles } from "./styles.js";
+const Label = ({
+  as = "label",
+  className,
+  ...props
+}) => {
+  const styles = cn(labelStyles(props), className);
+  return /* @__PURE__ */ jsx(AccessibleTypography, { as, className: styles, ...props });
+};
+export {
+  Label
 };

package/dist/components/typography/Paragraph.js

@@ -1,11 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "tailwind-variants";
-import { AccessibleTypography, } from "./AccessibleTypography";
-import { paragraphStyles } from "./styles";
-/**
- * A semantic, accessible Paragraph component built on top of the AccessibleTypography component.
- */
-export const Paragraph = ({ as = "p", className, ...props }) => {
-    const styles = cn(paragraphStyles(props), className);
-    return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
+import { AccessibleTypography } from "./AccessibleTypography.js";
+import { paragraphStyles } from "./styles.js";
+const Paragraph = ({
+  as = "p",
+  className,
+  ...props
+}) => {
+  const styles = cn(paragraphStyles(props), className);
+  return /* @__PURE__ */ jsx(AccessibleTypography, { as, className: styles, ...props });
+};
+export {
+  Paragraph
 };

package/dist/components/typography/Placeholder.js

@@ -1,11 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "tailwind-variants";
-import { AccessibleTypography, } from "./AccessibleTypography";
-import { placeholderStyles } from "./styles";
-/**
- * A semantic, accessible Placeholder component built on top of the AccessibleTypography component.
- */
-export const Placeholder = ({ as = "span", className, ...props }) => {
-    const styles = cn(placeholderStyles(props), className);
-    return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
+import { AccessibleTypography } from "./AccessibleTypography.js";
+import { placeholderStyles } from "./styles.js";
+const Placeholder = ({
+  as = "span",
+  className,
+  ...props
+}) => {
+  const styles = cn(placeholderStyles(props), className);
+  return /* @__PURE__ */ jsx(AccessibleTypography, { as, className: styles, ...props });
+};
+export {
+  Placeholder
 };

package/dist/components/typography/ValidationMessage.js

@@ -1,11 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "tailwind-variants";
-import { AccessibleTypography, } from "./AccessibleTypography";
-import { validationMessageStyles } from "./styles";
-/**
- * A semantic, accessible ValidationMessage component built on top of the AccessibleTypography component.
- */
-export const ValidationMessage = ({ as = "span", type = "error", className, ...props }) => {
-    const styles = cn(validationMessageStyles({ type, ...props }), className);
-    return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
+import { AccessibleTypography } from "./AccessibleTypography.js";
+import { validationMessageStyles } from "./styles.js";
+const ValidationMessage = ({
+  as = "span",
+  type = "error",
+  className,
+  ...props
+}) => {
+  const styles = cn(validationMessageStyles({ type, ...props }), className);
+  return /* @__PURE__ */ jsx(AccessibleTypography, { as, className: styles, ...props });
+};
+export {
+  ValidationMessage
 };