@krrli/cm-designsystem 1.32.1 → 1.32.3

package/dist/components/tabs/Tabs.js

@@ -1,67 +1,82 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } 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";
+import { Label } from "../typography/Label.js";
 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"],
+  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"]
+      }
     },
-    variants: {
-        selected: {
-            false: {
-                trigger: ["bg-slate-200", "group-hover:text-slate-800"],
-            },
-            true: {
-                trigger: ["bg-white", "text-violet-600"],
-            },
-        },
-        effect: {
-            first: {},
-            middle: {},
-            last: {},
-        },
+    effect: {
+      first: {},
+      middle: {},
+      last: {}
+    }
+  },
+  compoundVariants: [
+    {
+      selected: true,
+      effect: "first",
+      class: {
+        trigger: ["group-hover:pr-6"]
+      }
     },
-    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"],
-            },
-        },
-    ],
+    {
+      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;
-            })] }));
+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 /* @__PURE__ */ jsxs(RadixTabs.Root, { defaultValue: props.value, children: [
+    /* @__PURE__ */ jsx(RadixTabs.List, { className: list(), children: props.children.map((child, index) => /* @__PURE__ */ 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: /* @__PURE__ */ 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;
+    })
+  ] });
+};
+export {
+  Tabs
 };

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

@@ -1,5 +1,5 @@
-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>>;
+import { 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;
@@ -7,3 +7,4 @@ interface TextLinkProps extends TextLinkVariants {
 }
 export declare const TextLink: (props: TextLinkProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=TextLink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../src/components/text-link/TextLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,QAAA,MAAM,cAAc,sMAQlB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,UAAU,aAAc,SAAQ,gBAAgB;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAQ5C,CAAC"}

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

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

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

@@ -1,18 +1,18 @@
-import { type VariantProps } from "tailwind-variants";
-declare const textareaStyles: import("tailwind-variants").TVReturnType<{
+import { 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;
+        [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;
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            control?: import('tailwind-merge').ClassNameValue;
+            message?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -21,17 +21,17 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
     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;
+        [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, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     base: string[];
     control: string[];
     message: string[];
@@ -46,3 +46,4 @@ interface TextareaProps extends TextareaVariants {
 }
 export declare const Textarea: ({ isRequired, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=Textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAiClB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,UAAU,aAAc,SAAQ,gBAAgB;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,QAAQ,GAAI,0BAAkC,aAAa,4CAoCvE,CAAC"}

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.d.ts

@@ -1,7 +1,7 @@
-import { type VariantProps } from "tailwind-variants";
-import { type BaseAccessibleButtonProps } from "../accessible-button/AccessibleButton";
-import type { IconBaseProps } from "../icons/IconBase";
-declare const timedButtonStyles: import("tailwind-variants").TVReturnType<{
+import { VariantProps } from 'tailwind-variants';
+import { BaseAccessibleButtonProps } from '../accessible-button/AccessibleButton';
+import { IconBaseProps } from '../icons/IconBase';
+declare const timedButtonStyles: import('tailwind-variants').TVReturnType<{
     pressed: {
         false: {};
         true: {
@@ -31,7 +31,7 @@ declare const timedButtonStyles: import("tailwind-variants").TVReturnType<{
     base: string[];
     icon: string[];
     label: string[];
-}, import("tailwind-variants").TVReturnType<{
+}, import('tailwind-variants').TVReturnType<{
     pressed: {
         false: {};
         true: {
@@ -77,3 +77,4 @@ interface TimedButtonProps extends TimedButtonVariants, BaseAccessibleButtonProp
  */
 export declare const TimedButton: React.FC<TimedButtonProps>;
 export {};
+//# sourceMappingURL=TimedButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimedButton.d.ts","sourceRoot":"","sources":["../../../src/components/timed-button/TimedButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,uCAAuC,CAAC;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAoErB,CAAC;AAEH,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE;;;;;GAKG;AACH,UAAU,gBACR,SAAQ,mBAAmB,EAAE,yBAAyB;IACtD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAE1C;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwDlD,CAAC"}

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.d.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from "tailwind-variants";
-declare const toggleStyles: import("tailwind-variants").TVReturnType<{
+import { VariantProps } from 'tailwind-variants';
+declare const toggleStyles: import('tailwind-variants').TVReturnType<{
     pressed: {
         true: {
             base: string[];
@@ -33,7 +33,7 @@ declare const toggleStyles: import("tailwind-variants").TVReturnType<{
     base: string[];
     icon: string[];
     label: never[];
-}, import("tailwind-variants").TVReturnType<{
+}, import('tailwind-variants').TVReturnType<{
     pressed: {
         true: {
             base: string[];
@@ -60,3 +60,4 @@ interface ToggleProps extends ToggleVariants {
 }
 export declare const Toggle: ({ ariaLabel, labelText, pressed, onToggle, }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=Toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA0DhB,CAAC;AACH,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAExD,UAAU,WAAY,SAAQ,cAAc;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,MAAM,GAAI,8CAKpB,WAAW,4CAwBb,CAAC"}